feat(QRadio): new props -> checked-icon, unchecked-icon #12233

quasarframework · Jan 28, 2022 · f75287e · f75287e
1 parent b32daff
commit f75287e
Show file tree

Hide file tree

Showing 15 changed files with 217 additions and 62 deletions.
diff --git a/docs/src/examples/QCheckbox/Label.vue b/docs/src/examples/QCheckbox/Label.vue
@@ -1,13 +1,34 @@
 <template>
   <div class="q-pa-md">
     <div class="q-gutter-sm">
-      <q-checkbox v-model="right" label="Label on Right" />
-    </div>
-    <div class="q-gutter-sm">
-      <q-checkbox left-label v-model="left" label="Label on Left" />
-    </div>
+      <div>
+        <q-checkbox v-model="right" label="Label on Right" />
+      </div>
+
+      <div>
+        <q-checkbox left-label v-model="left" label="Label on Left" />
+      </div>
+
+      <div>
+        <q-checkbox
+          v-model="right2"
+          label="Swipe"
+          checked-icon="swipe_left"
+          unchecked-icon="swipe_right"
+          color="green"
+          keep-color
+        />
+      </div>
 
-    <div class="q-px-sm">
+      <div>
+        <q-checkbox
+          left-label
+          v-model="left2"
+          label="I agree"
+          checked-icon="task_alt"
+          unchecked-icon="highlight_off"
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -19,7 +40,9 @@ export default {
   setup () {
     return {
       left: ref(true),
-      right: ref(false)
+      right: ref(false),
+      left2: ref(true),
+      right2: ref(false)
     }
   }
 }

diff --git a/docs/src/examples/QCheckbox/Standard.vue b/docs/src/examples/QCheckbox/Standard.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <div class="q-gutter-sm">
-      <q-checkbox v-model="val" />
-    </div>
-
-    <div class="q-px-sm">
-    </div>
+    <q-checkbox v-model="val" />
   </div>
 </template>
 

diff --git a/docs/src/examples/QCheckbox/WithIcons.vue b/docs/src/examples/QCheckbox/WithIcons.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="q-pa-md">
+    <q-checkbox
+      v-model="val"
+      checked-icon="star"
+      unchecked-icon="star_border"
+      indeterminate-icon="help"
+    />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup () {
+    return {
+      val: ref(true)
+    }
+  }
+}
+</script>
diff --git a/docs/src/examples/QRadio/WithIcons.vue b/docs/src/examples/QRadio/WithIcons.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-sm">
+      <q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="line" label="Line" />
+      <q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="rectangle" label="Rectangle" />
+      <q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="ellipse" label="Ellipse" />
+      <q-radio v-model="shape" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="polygon" label="Polygon" />
+    </div>
+
+    <div class="q-px-sm">
+      Your selection is: <strong>{{ shape }}</strong>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup () {
+    return {
+      shape: ref('line')
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/vue-components/checkbox.md b/docs/src/pages/vue-components/checkbox.md
@@ -26,6 +26,10 @@ Please also refer to the [QOptionGroup](/vue-components/option-group) on other p
 
 <doc-example title="Standard" file="QCheckbox/Standard" />
 
+### With custom icons <q-badge align="top" color="brand-primary" label="v2.5+" />
+
+<doc-example title="With icons" file="QCheckbox/WithIcons" />
+
 ### Label
 
 <doc-example title="Label" file="QCheckbox/Label" />

diff --git a/docs/src/pages/vue-components/radio.md b/docs/src/pages/vue-components/radio.md
@@ -25,6 +25,10 @@ Please also refer to the [QOptionGroup](/vue-components/option-group) on other p
 
 <doc-example title="Standard" file="QRadio/Standard" />
 
+### With custom icons <q-badge align="top" color="brand-primary" label="v2.5+" />
+
+<doc-example title="With icons" file="QRadio/WithIcons" />
+
 ### Dense
 
 <doc-example title="Dense" file="QRadio/Dense" />

diff --git a/ui/dev/src/pages/form/checkbox.vue b/ui/dev/src/pages/form/checkbox.vue
@@ -11,12 +11,16 @@
       <p class="caption">
         Standalone
       </p>
-      <q-checkbox v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor" />
-      <q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" :keep-color="keepColor" />
-      <q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" color="primary" :keep-color="keepColor" />
-      <q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" :keep-color="keepColor" checked-icon="star" unchecked-icon="star_border" />
-      <q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" color="primary" :keep-color="keepColor" checked-icon="star" unchecked-icon="star_border" />
-      <q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" :keep-color="keepColor" color="green" checked-icon="star" unchecked-icon="star_border" />
+      <div>
+        <q-checkbox v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor" />
+        <q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" :keep-color="keepColor" />
+        <q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" color="primary" :keep-color="keepColor" />
+      </div>
+      <div>
+        <q-checkbox v-model="checked" :dark="dark" :dense="dense" :keep-color="keepColor" checked-icon="star" unchecked-icon="star_border" />
+        <q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" color="primary" :keep-color="keepColor" checked-icon="star" unchecked-icon="star_border" />
+        <q-checkbox v-model="checked" style="margin-left: 50px" :dark="dark" :dense="dense" :keep-color="keepColor" color="green" checked-icon="star" unchecked-icon="star_border" />
+      </div>
 
       <p class="caption">
         Sizes
@@ -28,6 +32,15 @@
         :label="size"
         v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor"
       />
+      <div />
+      <q-checkbox
+        v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '150px']"
+        :key="size"
+        :size="size"
+        :label="size"
+        checked-icon="star" unchecked-icon="star_border"
+        v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor"
+      />
 
       <p class="caption">
         Indeterminate
@@ -36,6 +49,11 @@
       <q-checkbox v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" keep-color label="Three states" />
       <q-checkbox v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" color="orange" label="Three states" />
       <q-checkbox v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" keep-color color="orange" label="Three states" size="100px" />
+      <div />
+      <q-checkbox checked-icon="star" unchecked-icon="star_border" indeterminate-icon="help" v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" label="Three states" />
+      <q-checkbox checked-icon="star" unchecked-icon="star_border" indeterminate-icon="help" v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" keep-color label="Three states" />
+      <q-checkbox checked-icon="star" unchecked-icon="star_border" indeterminate-icon="help" v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" :keep-color="keepColor" color="orange" label="Three states" />
+      <q-checkbox checked-icon="star" unchecked-icon="star_border" v-model="indModel" toggle-indeterminate :dark="dark" :dense="dense" keep-color color="orange" label="Three states" size="100px" />
 
       <p class="caption">
         Order ({{ JSON.stringify(orderModel) }})

diff --git a/ui/dev/src/pages/form/radio.vue b/ui/dev/src/pages/form/radio.vue
@@ -17,6 +17,12 @@
         <q-radio @change="onChange" @update:model-value="onInput" v-model="option" val="opt3" color="teal" label="Option 3" :dark="dark" :dense="dense" :keep-color="keepColor" />
         <q-radio @change="onChange" @update:model-value="onInput" v-model="option" val="opt4" color="orange" label="Option 4" :dark="dark" :dense="dense" :keep-color="keepColor" />
       </div>
+      <div class="q-gutter-md">
+        <q-radio :checked-icon="mdiCheckboxMarkedCircleOutline" unchecked-icon="circle" @change="onChange" @update:model-value="onInput" v-model="option" val="opt1" :dark="dark" :dense="dense" :keep-color="keepColor" />
+        <q-radio checked-icon="task_alt" unchecked-icon="circle" @change="onChange" @update:model-value="onInput" v-model="option" val="opt2" label="Option 2" :dark="dark" :dense="dense" :keep-color="keepColor" />
+        <q-radio checked-icon="task_alt" unchecked-icon="circle" @change="onChange" @update:model-value="onInput" v-model="option" val="opt3" color="teal" label="Option 3" :dark="dark" :dense="dense" :keep-color="keepColor" />
+        <q-radio checked-icon="task_alt" unchecked-icon="circle" @change="onChange" @update:model-value="onInput" v-model="option" val="opt4" color="orange" label="Option 4" :dark="dark" :dense="dense" :keep-color="keepColor" />
+      </div>
 
       <p class="caption">
         Sizes
@@ -28,6 +34,15 @@
         :label="size"
         v-model="option" val="opt1" :dark="dark" :dense="dense" :keep-color="keepColor"
       />
+      <div />
+      <q-radio
+        v-for="size in ['xs', 'sm', 'md', 'lg', 'xl', '150px']"
+        :key="size"
+        :size="size"
+        :label="size"
+        checked-icon="task_alt" unchecked-icon="circle"
+        v-model="option" val="opt1" :dark="dark" :dense="dense" :keep-color="keepColor"
+      />
 
       <p class="caption">
         Label on the left side
@@ -200,7 +215,12 @@
 </template>
 
 <script>
+import { mdiCheckboxMarkedCircleOutline } from '@quasar/extras/mdi-v6'
+
 export default {
+  created () {
+    this.mdiCheckboxMarkedCircleOutline = mdiCheckboxMarkedCircleOutline
+  },
   data () {
     return {
       option: 'opt1',

diff --git a/ui/src/components/checkbox/QCheckbox.js b/ui/src/components/checkbox/QCheckbox.js
@@ -6,6 +6,7 @@ import { createComponent } from '../../utils/private/create.js'
 import useCheckbox, { useCheckboxProps, useCheckboxEmits } from './use-checkbox.js'
 
 const bgNode = h('div', {
+  key: 'svg',
   class: 'q-checkbox__bg absolute'
 }, [
   h('svg', {
@@ -34,25 +35,21 @@ export default createComponent({
 
   setup (props) {
     function getInner (isTrue, isIndeterminate) {
-      const hasIcons = computed(() =>
-        props.checkedIcon !== void 0
-        && props.uncheckedIcon !== void 0
-      )
-
       const icon = computed(() =>
         (isTrue.value === true
           ? props.checkedIcon
           : (isIndeterminate.value === true
-              ? props.indeterminateIcon || props.uncheckedIcon
+              ? props.indeterminateIcon
               : props.uncheckedIcon
             )
-        )
+        ) || null
       )
 
       return () => (
-        hasIcons.value === true
+        icon.value !== null
           ? [
               h('div', {
+                key: 'icon',
                 class: 'q-checkbox__icon-container absolute flex flex-center no-wrap'
               }, [
                 h(QIcon, {

diff --git a/ui/src/components/checkbox/QCheckbox.json b/ui/src/components/checkbox/QCheckbox.json
@@ -7,15 +7,18 @@
 
   "props": {
     "checked-icon": {
-      "desc": "The icon to be used when the model is truthy; Use in conjuction with 'unchecked-icon' otherwise it is ignored"
+      "desc": "The icon to be used when the model is truthy (instead of the default design)",
+      "addedIn": "v2.5"
     },
 
     "unchecked-icon": {
-      "desc": "The icon to be used when the toggle is falsy; Use in conjuction with 'checked-icon' otherwise it is ignored"
+      "desc": "The icon to be used when the toggle is falsy (instead of the default design)",
+      "addedIn": "v2.5"
     },
 
     "indeterminate-icon": {
-      "desc": "The icon to be used when the model is indeterminate; Use in conjuction with 'checked-icon' and 'unchecked-icon' otherwise it is ignored"
+      "desc": "The icon to be used when the model is indeterminate (instead of the default design)",
+      "addedIn": "v2.5"
     }
   }
 }
diff --git a/ui/src/components/checkbox/QCheckbox.sass b/ui/src/components/checkbox/QCheckbox.sass
@@ -3,33 +3,27 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 .q-checkbox
   vertical-align: middle
 
-  &__bg
+  &__native
+    width: 1px
+    height: 1px
+
+  &__bg,
+  &__icon-container
     top: 25%
     left: 25%
     width: 50%
     height: 50%
+    user-select: none
+
+  &__bg
     border: 2px solid currentColor
     border-radius: 2px
     transition: background $checkbox-transition
     -webkit-print-color-adjust: exact
 
-  &__native
-    width: 1px
-    height: 1px
-
-  &__icon-container
-    top: .25em
-    left: .25em
-    width: .5em
-    height: .5em
-    user-select: none
-    z-index: 0
-
   &__icon
     color: currentColor
-    font-size: .7em
-    min-width: 1em
-    z-index: 1
+    font-size: .6em
 
   &__svg
     color: #fff
@@ -82,19 +76,16 @@ $checkbox-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &--dense
 
-    .q-checkbox__icon-container
-      top: 0
-      left: 0
-
     .q-checkbox__icon
-      font-size: .5em
+      font-size: .6em
 
     .q-checkbox__inner
       width: .5em
       min-width: .5em
       height: .5em
 
-    .q-checkbox__bg
+    .q-checkbox__bg,
+    .q-checkbox__icon-container
       left: 5%
       top: 5%
       width: 90%

diff --git a/ui/src/components/checkbox/use-checkbox.json b/ui/src/components/checkbox/use-checkbox.json
@@ -69,19 +69,19 @@
     "checked-icon": {
       "type": "String",
       "examples": [ "visibility" ],
-      "category": "content"
+      "category": "icons"
     },
 
     "unchecked-icon": {
       "type": "String",
       "examples": [ "visibility_off" ],
-      "category": "content"
+      "category": "icons"
     },
 
     "indeterminate-icon": {
       "type": "String",
       "examples": [ "help" ],
-      "category": "content"
+      "category": "icons"
     },
 
     "color": {