quasar 2.4.13 → 2.5.0

package/src/components/radio/QRadio.js

@@ -1,5 +1,7 @@
 import { h, ref, computed, getCurrentInstance } from 'vue'
 
+import QIcon from '../icon/QIcon.js'
+
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useSize, { useSizeProps } from '../../composables/private/use-size.js'
 import useRefocusTarget from '../../composables/private/use-refocus-target.js'
@@ -11,6 +13,7 @@ import { stopAndPrevent } from '../../utils/event.js'
 import { hSlot, hMergeSlot } from '../../utils/private/render.js'
 
 const svg = h('svg', {
+  key: 'svg',
   class: 'q-radio__bg absolute non-selectable',
   viewBox: '0 0 24 24',
   'aria-hidden': 'true'
@@ -39,6 +42,9 @@ export default createComponent({
     label: String,
     leftLabel: Boolean,
 
+    checkedIcon: String,
+    uncheckedIcon: String,
+
     color: String,
     keepColor: Boolean,
     dense: Boolean,
@@ -80,6 +86,13 @@ export default createComponent({
         + `q-radio__inner--${ isTrue.value === true ? 'truthy' : 'falsy' }${ color }`
     })
 
+    const icon = computed(() =>
+      (isTrue.value === true
+        ? props.checkedIcon
+        : props.uncheckedIcon
+      ) || null
+    )
+
     const tabindex = computed(() => (
       props.disable === true ? -1 : props.tabindex || 0
     ))
@@ -125,7 +138,19 @@ export default createComponent({
     Object.assign(proxy, { set: onClick })
 
     return () => {
-      const content = [ svg ]
+      const content = icon.value !== null
+        ? [
+            h('div', {
+              key: 'icon',
+              class: 'q-radio__icon-container absolute flex flex-center no-wrap'
+            }, [
+              h(QIcon, {
+                class: 'q-radio__icon',
+                name: icon.value
+              })
+            ])
+          ]
+        : [ svg ]
 
       props.disable !== true && injectFormInput(
         content,

package/src/components/radio/QRadio.json

@@ -33,6 +33,22 @@
       "category": "label"
     },
 
+    "checked-icon": {
+      "type": "String",
+      "desc": "The icon to be used when selected (instead of the default design)",
+      "examples": [ "visibility" ],
+      "category": "icons",
+      "addedIn": "v2.5"
+    },
+
+    "unchecked-icon": {
+      "type": "String",
+      "desc": "The icon to be used when un-selected (instead of the default design)",
+      "examples": [ "visibility_off" ],
+      "category": "icons",
+      "addedIn": "v2.5"
+    },
+
     "color": {
       "extends": "color"
     },

package/src/components/radio/QRadio.sass

@@ -3,19 +3,26 @@ $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 .q-radio
   vertical-align: middle
 
-  &__bg
+  &__native
+    width: 1px
+    height: 1px
+
+  &__bg,
+  &__icon-container
     top: 25%
     left: 25%
     width: 50%
     height: 50%
-    -webkit-print-color-adjust: exact
+    user-select: none
 
+  &__bg
+    -webkit-print-color-adjust: exact
     path
       fill: currentColor
 
-  &__native
-    width: 1px
-    height: 1px
+  &__icon
+    color: currentColor
+    font-size: .6em
 
   &__check
     transform-origin: 50% 50%
@@ -49,12 +56,16 @@ $radio-transition: .22s cubic-bezier(0,0,.2,1) 0ms
 
   &--dense
 
+    .q-checkbox__icon
+      font-size: .6em
+
     .q-radio__inner
       width: .5em
       min-width: .5em
       height: .5em
 
-    .q-radio__bg
+    .q-radio__bg,
+    .q-radio__icon-container
       left: 0
       top: 0
       width: 100%

package/src/components/select/QSelect.js

@@ -1389,7 +1389,7 @@ export default createComponent({
       filter, updateMenuPosition, updateInputValue,
       isOptionSelected,
       getEmittingOptionValue,
-      isOptionDisabled: (...args) => isOptionDisabled.value.apply(null, args),
+      isOptionDisabled: (...args) => isOptionDisabled.value.apply(null, args) === true,
       getOptionValue: (...args) => getOptionValue.value.apply(null, args),
       getOptionLabel: (...args) => getOptionLabel.value.apply(null, args)
     })