quasar 2.18.6 → 2.19.0

package/src/components/radio/QRadio.js

@@ -2,30 +2,42 @@ import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
-import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
+import useDark, {
+  useDarkProps
+} from '../../composables/private.use-dark/use-dark.js'
+import useSize, {
+  useSizeProps
+} from '../../composables/private.use-size/use-size.js'
 import useRefocusTarget from '../../composables/private.use-refocus-target/use-refocus-target.js'
-import { useFormProps, useFormInject } from '../../composables/use-form/private.use-form.js'
+import {
+  useFormProps,
+  useFormInject
+} from '../../composables/use-form/private.use-form.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import optionSizes from '../../utils/private.option-sizes/option-sizes.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
 import { hSlot, hMergeSlot } from '../../utils/private.render/render.js'
 
-const createSvg = () => h('svg', {
-  key: 'svg',
-  class: 'q-radio__bg absolute non-selectable',
-  viewBox: '0 0 24 24'
-}, [
-  h('path', {
-    d: 'M12,22a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10a10,10 0 0 1 10,10a10,10 0 0 1 -10,10m0,-22a12,12 0 0 0 -12,12a12,12 0 0 0 12,12a12,12 0 0 0 12,-12a12,12 0 0 0 -12,-12'
-  }),
-
-  h('path', {
-    class: 'q-radio__check',
-    d: 'M12,6a6,6 0 0 0 -6,6a6,6 0 0 0 6,6a6,6 0 0 0 6,-6a6,6 0 0 0 -6,-6'
-  })
-])
+const createSvg = () =>
+  h(
+    'svg',
+    {
+      key: 'svg',
+      class: 'q-radio__bg absolute non-selectable',
+      viewBox: '0 0 24 24'
+    },
+    [
+      h('path', {
+        d: 'M12,22a10,10 0 0 1 -10,-10a10,10 0 0 1 10,-10a10,10 0 0 1 10,10a10,10 0 0 1 -10,10m0,-22a12,12 0 0 0 -12,12a12,12 0 0 0 12,12a12,12 0 0 0 12,-12a12,12 0 0 0 -12,-12'
+      }),
+
+      h('path', {
+        class: 'q-radio__check',
+        d: 'M12,6a6,6 0 0 0 -6,6a6,6 0 0 0 6,6a6,6 0 0 0 6,-6a6,6 0 0 0 -6,-6'
+      })
+    ]
+  )
 
 export default createComponent({
   name: 'QRadio',
@@ -49,12 +61,12 @@ export default createComponent({
     dense: Boolean,
 
     disable: Boolean,
-    tabindex: [ String, Number ]
+    tabindex: [String, Number]
   },
 
-  emits: [ 'update:modelValue' ],
+  emits: ['update:modelValue'],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const { proxy } = getCurrentInstance()
 
     const isDark = useDark(props, proxy.$q)
@@ -65,54 +77,57 @@ export default createComponent({
 
     const isTrue = computed(() => toRaw(props.modelValue) === toRaw(props.val))
 
-    const classes = computed(() =>
-      'q-radio cursor-pointer no-outline row inline no-wrap items-center'
-      + (props.disable === true ? ' disabled' : '')
-      + (isDark.value === true ? ' q-radio--dark' : '')
-      + (props.dense === true ? ' q-radio--dense' : '')
-      + (props.leftLabel === true ? ' reverse' : '')
+    const classes = computed(
+      () =>
+        'q-radio cursor-pointer no-outline row inline no-wrap items-center' +
+        (props.disable === true ? ' disabled' : '') +
+        (isDark.value === true ? ' q-radio--dark' : '') +
+        (props.dense === true ? ' q-radio--dense' : '') +
+        (props.leftLabel === true ? ' reverse' : '')
     )
 
     const innerClass = computed(() => {
-      const color = props.color !== void 0 && (
-        props.keepColor === true
-        || isTrue.value === true
+      const color =
+        props.color !== void 0 &&
+        (props.keepColor === true || isTrue.value === true)
+          ? ` text-${props.color}`
+          : ''
+
+      return (
+        'q-radio__inner relative-position ' +
+        `q-radio__inner--${isTrue.value === true ? 'truthy' : 'falsy'}${color}`
       )
-        ? ` text-${ props.color }`
-        : ''
-
-      return 'q-radio__inner relative-position '
-        + `q-radio__inner--${ isTrue.value === true ? 'truthy' : 'falsy' }${ color }`
     })
 
-    const icon = computed(() =>
-      (isTrue.value === true
-        ? props.checkedIcon
-        : props.uncheckedIcon
-      ) || null
+    const icon = computed(
+      () =>
+        (isTrue.value === true ? props.checkedIcon : props.uncheckedIcon) ||
+        null
     )
 
-    const tabindex = computed(() => (
+    const tabindex = computed(() =>
       props.disable === true ? -1 : props.tabindex || 0
-    ))
+    )
 
     const formAttrs = computed(() => {
       const prop = { type: 'radio' }
 
-      props.name !== void 0 && Object.assign(prop, {
-        // see https://vuejs.org/guide/extras/render-function.html#creating-vnodes (.prop)
-        '.checked': isTrue.value === true,
-        '^checked': isTrue.value === true ? 'checked' : void 0,
-        name: props.name,
-        value: props.val
-      })
+      if (props.name !== void 0) {
+        Object.assign(prop, {
+          // see https://vuejs.org/guide/extras/render-function.html#creating-vnodes (.prop)
+          '.checked': isTrue.value === true,
+          '^checked': isTrue.value === true ? 'checked' : void 0,
+          name: props.name,
+          value: props.val
+        })
+      }
 
       return prop
     })
 
     const injectFormInput = useFormInject(formAttrs)
 
-    function onClick (e) {
+    function onClick(e) {
       if (e !== void 0) {
         stopAndPrevent(e)
         refocusTarget(e)
@@ -123,13 +138,13 @@ export default createComponent({
       }
     }
 
-    function onKeydown (e) {
+    function onKeydown(e) {
       if (e.keyCode === 13 || e.keyCode === 32) {
         stopAndPrevent(e)
       }
     }
 
-    function onKeyup (e) {
+    function onKeyup(e) {
       if (e.keyCode === 13 || e.keyCode === 32) {
         onClick(e)
       }
@@ -141,60 +156,83 @@ export default createComponent({
     const svg = createSvg()
 
     return () => {
-      const content = icon.value !== null
-        ? [
-            h('div', {
-              key: 'icon',
-              class: 'q-radio__icon-container absolute-full flex flex-center no-wrap'
-            }, [
-              h(QIcon, {
-                class: 'q-radio__icon',
-                name: icon.value
-              })
-            ])
-          ]
-        : [ svg ]
-
-      props.disable !== true && injectFormInput(
-        content,
-        'unshift',
-        ' q-radio__native q-ma-none q-pa-none'
-      )
+      const content =
+        icon.value !== null
+          ? [
+              h(
+                'div',
+                {
+                  key: 'icon',
+                  class:
+                    'q-radio__icon-container absolute-full flex flex-center no-wrap'
+                },
+                [
+                  h(QIcon, {
+                    class: 'q-radio__icon',
+                    name: icon.value
+                  })
+                ]
+              )
+            ]
+          : [svg]
+
+      if (props.disable !== true) {
+        injectFormInput(
+          content,
+          'unshift',
+          ' q-radio__native q-ma-none q-pa-none'
+        )
+      }
 
       const child = [
-        h('div', {
-          class: innerClass.value,
-          style: sizeStyle.value,
-          'aria-hidden': 'true'
-        }, content)
+        h(
+          'div',
+          {
+            class: innerClass.value,
+            style: sizeStyle.value,
+            'aria-hidden': 'true'
+          },
+          content
+        )
       ]
 
       if (refocusTargetEl.value !== null) {
         child.push(refocusTargetEl.value)
       }
 
-      const label = props.label !== void 0
-        ? hMergeSlot(slots.default, [ props.label ])
-        : hSlot(slots.default)
+      const label =
+        props.label !== void 0
+          ? hMergeSlot(slots.default, [props.label])
+          : hSlot(slots.default)
+
+      if (label !== void 0) {
+        child.push(
+          h(
+            'div',
+            {
+              class: 'q-radio__label q-anchor--skip'
+            },
+            label
+          )
+        )
+      }
 
-      label !== void 0 && child.push(
-        h('div', {
-          class: 'q-radio__label q-anchor--skip'
-        }, label)
+      return h(
+        'div',
+        {
+          ref: rootRef,
+          class: classes.value,
+          tabindex: tabindex.value,
+          role: 'radio',
+          'aria-label': props.label,
+          'aria-checked': isTrue.value === true ? 'true' : 'false',
+          'aria-disabled': props.disable === true ? 'true' : void 0,
+          onClick,
+          onKeydown,
+          onKeyup
+        },
+        child
       )
-
-      return h('div', {
-        ref: rootRef,
-        class: classes.value,
-        tabindex: tabindex.value,
-        role: 'radio',
-        'aria-label': props.label,
-        'aria-checked': isTrue.value === true ? 'true' : 'false',
-        'aria-disabled': props.disable === true ? 'true' : void 0,
-        onClick,
-        onKeydown,
-        onKeyup
-      }, child)
     }
   }
 })

package/src/components/radio/QRadio.json

@@ -1,5 +1,8 @@
 {
-  "mixins": [ "composables/private.use-size/use-size", "composables/use-form/private.use-form" ],
+  "mixins": [
+    "composables/private.use-size/use-size",
+    "composables/use-form/private.use-form"
+  ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/radio"
@@ -8,22 +11,22 @@
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "Any" ],
-      "examples": [ "# v-model=\"option\"" ]
+      "type": ["Any"],
+      "examples": ["# v-model=\"option\""]
     },
 
     "val": {
-      "type": [ "Any" ],
+      "type": ["Any"],
       "required": true,
       "desc": "The actual value of the option with which model value is changed",
-      "examples": [ "'opt1'", "50" ],
+      "examples": ["'opt1'", "50"],
       "category": "model"
     },
 
     "label": {
       "type": "String",
       "desc": "Label to display along the radio control (or use the default slot instead of this prop)",
-      "examples": [ "'Option 1'" ],
+      "examples": ["'Option 1'"],
       "category": "label"
     },
 
@@ -36,7 +39,7 @@
     "checked-icon": {
       "type": "String",
       "desc": "The icon to be used when selected (instead of the default design)",
-      "examples": [ "'visibility'" ],
+      "examples": ["'visibility'"],
       "category": "icons",
       "addedIn": "v2.5"
     },
@@ -44,7 +47,7 @@
     "unchecked-icon": {
       "type": "String",
       "desc": "The icon to be used when un-selected (instead of the default design)",
-      "examples": [ "'visibility_off'" ],
+      "examples": ["'visibility_off'"],
       "category": "icons",
       "addedIn": "v2.5"
     },

package/src/components/radio/index.js

@@ -1,5 +1,3 @@
 import QRadio from './QRadio.js'
 
-export {
-  QRadio
-}
+export { QRadio }