feat(docs): QBtnToggle page

rstoenescu · rstoenescu · commit e02e37c65f69 · 2019-01-18T15:12:22.000+02:00
diff --git a/docs/src/examples/QBtn/CustomColor.vue b/docs/src/examples/QBtn/CustomColor.vue
@@ -4,6 +4,6 @@
     <q-btn flat style="color: #FF0080" label="Fuchsia Flat" />
     <q-btn style="background: goldenrod; color: white" label="Goldenrod" />
     <q-btn outline style="color: goldenrod;" label="Goldenrod" />
-    <q-btn color="grey-4" text-color="purple" unelevated icon="camera_enhance" label="Purple text" />
+    <q-btn color="grey-4" text-color="purple" glossy unelevated icon="camera_enhance" label="Purple text" />
   </div>
 </template>
diff --git a/docs/src/examples/QBtn/Links.vue b/docs/src/examples/QBtn/Links.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="q-pa-md q-gutter-sm">
-    <q-btn to="/docs" label="To Docs index" outline color="secondary" />
-    <q-btn to="/docs" label="To Docs index in 2s" @click="linkClick" glossy color="secondary" />
+    <q-btn to="/docs" label="To Docs index" outline color="purple" />
+    <q-btn to="/docs" label="To Docs index in 2s" @click="linkClick" glossy color="purple" />
 
-    <q-btn type="a" href="/docs" label="Type 'a'" push color="secondary" />
-    <q-btn type="a" href="/docs" target="_blank" label="Type 'a' - external" color="secondary" />
+    <q-btn type="a" href="/docs" label="Type 'a'" push color="purple" />
+    <q-btn type="a" href="/docs" target="_blank" label="Type 'a' - external" color="purple" />
   </div>
 </template>
 
diff --git a/docs/src/examples/QBtn/Round.vue b/docs/src/examples/QBtn/Round.vue
@@ -2,10 +2,10 @@
   <div class="q-pa-md q-gutter-sm">
     <q-btn round color="primary" icon="shopping_cart" />
     <q-btn round color="secondary" icon="navigation" />
-    <q-btn round color="amber" text-color="black" icon="layers_clear" />
+    <q-btn round color="amber" glossy text-color="black" icon="layers_clear" />
     <q-btn round color="brown-5" icon="directions" />
     <q-btn round color="deep-orange" icon="edit_location" />
-    <q-btn round color="purple" icon="local_grocery_store" />
+    <q-btn round color="purple" glossy icon="local_grocery_store" />
     <q-btn round color="black" icon="my_location" />
   </div>
 </template>
diff --git a/docs/src/examples/QBtn/Standard.vue b/docs/src/examples/QBtn/Standard.vue
@@ -3,9 +3,9 @@
     <q-btn color="white" text-color="black" label="Standard" />
     <q-btn color="primary" label="Primary" />
     <q-btn color="secondary" label="Secondary" />
-    <q-btn color="amber" label="Amber" />
+    <q-btn color="amber" glossy label="Amber" />
     <q-btn color="brown-5" label="Brown 5" />
-    <q-btn color="deep-orange" label="Deep Orange" />
+    <q-btn color="deep-orange" glossy label="Deep Orange" />
     <q-btn color="purple" label="Purple" />
     <q-btn color="black" label="Black" />
   </div>
diff --git a/docs/src/examples/QBtn/WithIcons.vue b/docs/src/examples/QBtn/WithIcons.vue
@@ -4,6 +4,6 @@
     <q-btn color="secondary" icon-right="mail" label="On Right" />
     <q-btn color="red" icon="mail" icon-right="send" label="On Left and Right" />
     <br>
-    <q-btn icon="phone" label="Stacked" stack color="purple" />
+    <q-btn icon="phone" label="Stacked" stack glossy color="purple" />
   </div>
 </template>
diff --git a/docs/src/examples/QBtnDropdown/CustomButton.vue b/docs/src/examples/QBtnDropdown/CustomButton.vue
@@ -4,6 +4,7 @@
       split
       color="orange"
       push
+      glossy
       no-caps
       icon="folder"
       label="Dropdown Button"
diff --git a/docs/src/examples/QBtnDropdown/Split.vue b/docs/src/examples/QBtnDropdown/Split.vue
@@ -3,7 +3,7 @@
     <q-btn-dropdown
       split
       class="glossy"
-      color="purple"
+      color="teal"
       label="Folders"
       @click="onMainClick"
     >
diff --git a/docs/src/examples/QBtnToggle/Basic.vue b/docs/src/examples/QBtnToggle/Basic.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="q-pa-md">
+    <q-btn-toggle
+      v-model="model"
+      toggle-color="primary"
+      :options="[
+        {label: 'One', value: 'one'},
+        {label: 'Two', value: 'two'},
+        {label: 'Three', value: 'three'}
+      ]"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: null,
+      states: 'two',
+      field: 'cake'
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/QBtnToggle/Dark.vue b/docs/src/examples/QBtnToggle/Dark.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="q-pa-md">
+    <q-btn-toggle
+      v-model="model"
+      push
+      glossy
+      toggle-color="primary"
+      :options="[
+        {label: 'Cake', value: 'cake'},
+        {label: 'Ice cream', value: 'ice-cream'}
+      ]"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: 'cake'
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/QBtnToggle/Design.vue b/docs/src/examples/QBtnToggle/Design.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="q-pa-md q-gutter-md">
+    <div>
+      <q-btn-toggle
+        v-model="model"
+        push
+        glossy
+        toggle-color="primary"
+        :options="[
+          {label: 'One', value: 'one'},
+          {label: 'Two', value: 'two'},
+          {label: 'Three', value: 'three'}
+        ]"
+      />
+    </div>
+
+    <div>
+      <q-btn-toggle
+        v-model="model"
+        toggle-color="primary"
+        flat
+        :options="[
+          {label: 'One', value: 'one'},
+          {label: 'Two', value: 'two'},
+          {label: 'Three', value: 'three'}
+        ]"
+      />
+    </div>
+
+    <div>
+      <q-btn-toggle
+        v-model="model"
+        color="brown"
+        text-color="white"
+        toggle-color="orange"
+        toggle-text-color="black"
+        rounded
+        unelevated
+        glossy
+        :options="[
+          {label: 'One', value: 'one'},
+          {label: 'Two', value: 'two'},
+          {label: 'Three', value: 'three'},
+          {label: 'Four', value: 'four'}
+        ]"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: null,
+      states: 'two',
+      field: 'cake'
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/QBtnToggle/DisableReadonly.vue b/docs/src/examples/QBtnToggle/DisableReadonly.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="q-pa-md">
+    <q-btn-toggle
+      disable
+      v-model="model"
+      toggle-color="primary"
+      push
+      glossy
+      :options="[
+        {label: 'One', value: 'one'},
+        {label: 'Two', value: 'two'},
+        {label: 'Three', value: 'three'}
+      ]"
+    />
+
+    <q-btn-toggle
+      readonly
+      v-model="model"
+      toggle-color="primary"
+      push
+      glossy
+      class="q-ml-md"
+      :options="[
+        {label: 'One', value: 'one'},
+        {label: 'Two', value: 'two'},
+        {label: 'Three', value: 'three'}
+      ]"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      model: 'two'
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/vue-components/button-toggle.md b/docs/src/pages/vue-components/button-toggle.md
@@ -1,83 +1,23 @@
 ---
-title: Docs
+title: Button Toggle
 ---
+The QBtnToggle component is another basic element for user input, similar to QRadio but with buttons. You can use this to supply a way for the user to pick an option from multiple choices.
 
-[Internal Link](/docs), [External Link](https://vuejs.org)
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non laoreet eros. `token` Morbi non ipsum ac purus dignissim rutrum. Nulla nec ante congue, rutrum tortor facilisis, aliquet ligula. Fusce vitae odio elit. `/quasar.conf.js`
-
-## Heading 2
-### Heading 3
-#### Heading 4
-##### Heading 5
-###### Heading 6
-
-```
-const m = 'lala'
-```
-
-```html
-<div>
-  <q-btn @click="doSomething">Do something</q-btn>
-  <q-icon name="alarm" />
-</div>
-```
-
-```vue
-<template>
-  <!-- you define your Vue template here -->
-</template>
-
-<script>
-// This is where your Javascript goes
-// to define your Vue component, which
-// can be a Layout, a Page or your own
-// component used throughout the app.
-
-export default {
-  //
-}
-</script>
-
-<style>
-/* This is where your CSS goes */
-</style>
-```
+## Installation
+<doc-installation components="QBtnToggle" />
 
-| Table Example | Type | Description |
-| --- | --- | --- |
-| infinite | Boolean | Infinite slides scrolling |
-| size | String | Thickness of loading bar. |
+## Usage
 
-> Something...
+<doc-example title="Basic" file="QBtnToggle/Basic" />
 
 ::: tip
-Some tip
+Singe QBtnToggle uses QBtn, you can use design related props of QBtn to style this component.
 :::
+<doc-example title="Some design examples" file="QBtnToggle/Design" />
 
-::: warning
-Some tip
-:::
-
-::: danger
-Some tip
-:::
-
-::: warning CUSTOM TITLE
-Some tip
-:::
+<doc-example title="Disable and Readonly" file="QBtnToggle/DisableReadonly" />
 
-* Something
-  * something
-  * else
-* Back
-  * wee
-
-## Installation
-<doc-installation components="QBtn" :plugins="['Meta', 'Cookies']" directives="Ripple" :config="{ notify: 'Notify' }" />
-
-## Usage
-<doc-example title="Standard" file="QBtn/Standard" />
+<doc-example title="On Dark Background" file="QBtnToggle/Dark" dark />
 
 ## API
-<doc-api file="QTh" />
+<doc-api file="QBtnToggle" />
diff --git a/quasar/dev/components/components/button-group.vue b/quasar/dev/components/components/button-group.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-layout-padding button-group-test">
-    <q-btn-group push>
+    <q-btn-group push glossy>
       <q-btn color="yellow" push to="/a">
         Link /a
       </q-btn>
diff --git a/quasar/src/components/btn/QBtnDropdown.js b/quasar/src/components/btn/QBtnDropdown.js
@@ -115,7 +115,8 @@ export default Vue.extend({
         flat: this.flat,
         rounded: this.rounded,
         push: this.push,
-        unelevated: this.unelevated
+        unelevated: this.unelevated,
+        glossy: this.glossy
       },
       staticClass: 'q-btn-dropdown q-btn-dropdown--split no-wrap q-btn-item',
       class: this.stretch === true ? 'self-stretch no-border-radius' : null
diff --git a/quasar/src/components/btn/QBtnGroup.js b/quasar/src/components/btn/QBtnGroup.js
@@ -9,12 +9,13 @@ export default Vue.extend({
     flat: Boolean,
     rounded: Boolean,
     push: Boolean,
-    stretch: Boolean
+    stretch: Boolean,
+    glossy: Boolean
   },
 
   computed: {
     classes () {
-      return ['unelevated', 'outline', 'flat', 'rounded', 'push', 'stretch']
+      return ['unelevated', 'outline', 'flat', 'rounded', 'push', 'stretch', 'glossy']
         .filter(t => this[t] === true)
         .map(t => `q-btn-group--${t}`).join(' ')
     }
diff --git a/quasar/src/components/btn/QBtnGroup.json b/quasar/src/components/btn/QBtnGroup.json
@@ -28,6 +28,11 @@
     "stretch": {
       "type": "Boolean",
       "desc": "When used on flexbox parent, buttons will stretch to parent's height"
+    },
+
+    "glossy": {
+      "type": "Boolean",
+      "desc": "Applies a glossy effect"
     }
   },
 
diff --git a/quasar/src/components/btn/QBtnToggle.js b/quasar/src/components/btn/QBtnToggle.js
@@ -31,6 +31,7 @@ export default Vue.extend({
     unelevated: Boolean,
     rounded: Boolean,
     push: Boolean,
+    glossy: Boolean,
 
     size: String,
 
@@ -72,7 +73,8 @@ export default Vue.extend({
         rounded: this.rounded,
         push: this.push,
         stretch: this.stretch,
-        unelevated: this.unelevated
+        unelevated: this.unelevated,
+        glossy: this.glossy
       }
     },
     this.options.map(
diff --git a/quasar/src/components/btn/QBtnToggle.json b/quasar/src/components/btn/QBtnToggle.json
@@ -80,6 +80,11 @@
       "desc": "Use 'push' design"
     },
 
+    "glossy": {
+      "type": "Boolean",
+      "desc": "Applies a glossy effect"
+    },
+
     "size": {
       "type": "String",
       "desc": "Button size name or a CSS unit including unit name",
diff --git a/quasar/src/components/btn/__btn-mixin.json b/quasar/src/components/btn/__btn-mixin.json
diff --git a/quasar/src/components/btn/btn-group.styl b/quasar/src/components/btn/btn-group.styl
diff --git a/quasar/src/components/btn/btn-mixin.js b/quasar/src/components/btn/btn-mixin.js

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`<q-btn-dropdown`
`4`	`4`	`split`
`5`	`5`	`class="glossy"`
`6`		`- color="purple"`
	`6`	`+ color="teal"`
`7`	`7`	`label="Folders"`
`8`	`8`	`@click="onMainClick"`
`9`	`9`	`>`