quasar 2.18.7 → 2.19.0

package/src/components/checkbox/use-checkbox.js

@@ -1,9 +1,16 @@
 import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
 
-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 { useFormInject, useFormProps } from '../../composables/use-form/private.use-form.js'
+import {
+  useFormInject,
+  useFormProps
+} from '../../composables/use-form/private.use-form.js'
 
 import optionSizes from '../../utils/private.option-sizes/option-sizes.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
@@ -42,12 +49,12 @@ export const useCheckboxProps = {
   dense: Boolean,
 
   disable: Boolean,
-  tabindex: [ String, Number ]
+  tabindex: [String, Number]
 }
 
-export const useCheckboxEmits = [ 'update:modelValue' ]
+export const useCheckboxEmits = ['update:modelValue']
 
-export default function (type, getInner) {
+export default function useCheckbox(type, getInner) {
   const { props, slots, emit, proxy } = getCurrentInstance()
   const { $q } = proxy
 
@@ -57,8 +64,8 @@ export default function (type, getInner) {
   const { refocusTargetEl, refocusTarget } = useRefocusTarget(props, rootRef)
   const sizeStyle = useSize(props, optionSizes)
 
-  const modelIsArray = computed(() =>
-    props.val !== void 0 && Array.isArray(props.modelValue)
+  const modelIsArray = computed(
+    () => props.val !== void 0 && Array.isArray(props.modelValue)
   )
 
   const index = computed(() => {
@@ -68,58 +75,64 @@ export default function (type, getInner) {
       : -1
   })
 
-  const isTrue = computed(() => (
+  const isTrue = computed(() =>
     modelIsArray.value === true
       ? index.value !== -1
       : toRaw(props.modelValue) === toRaw(props.trueValue)
-  ))
+  )
 
-  const isFalse = computed(() => (
+  const isFalse = computed(() =>
     modelIsArray.value === true
       ? index.value === -1
       : toRaw(props.modelValue) === toRaw(props.falseValue)
-  ))
+  )
 
-  const isIndeterminate = computed(() =>
-    isTrue.value === false && isFalse.value === false
+  const isIndeterminate = computed(
+    () => isTrue.value === false && isFalse.value === false
   )
 
-  const tabindex = computed(() => (
+  const tabindex = computed(() =>
     props.disable === true ? -1 : props.tabindex || 0
-  ))
-
-  const classes = computed(() =>
-    `q-${ type } cursor-pointer no-outline row inline no-wrap items-center`
-    + (props.disable === true ? ' disabled' : '')
-    + (isDark.value === true ? ` q-${ type }--dark` : '')
-    + (props.dense === true ? ` q-${ type }--dense` : '')
-    + (props.leftLabel === true ? ' reverse' : '')
   )
 
-  const innerClass = computed(() => {
-    const state = isTrue.value === true ? 'truthy' : (isFalse.value === true ? 'falsy' : 'indet')
-    const color = props.color !== void 0 && (
-      props.keepColor === true
-      || (type === 'toggle' ? isTrue.value === true : isFalse.value !== true)
-    )
-      ? ` text-${ props.color }`
-      : ''
+  const classes = computed(
+    () =>
+      `q-${type} cursor-pointer no-outline row inline no-wrap items-center` +
+      (props.disable === true ? ' disabled' : '') +
+      (isDark.value === true ? ` q-${type}--dark` : '') +
+      (props.dense === true ? ` q-${type}--dense` : '') +
+      (props.leftLabel === true ? ' reverse' : '')
+  )
 
-    return `q-${ type }__inner relative-position non-selectable q-${ type }__inner--${ state }${ color }`
+  const innerClass = computed(() => {
+    const state =
+      isTrue.value === true
+        ? 'truthy'
+        : isFalse.value === true
+          ? 'falsy'
+          : 'indet'
+    const color =
+      props.color !== void 0 &&
+      (props.keepColor === true ||
+        (type === 'toggle' ? isTrue.value === true : isFalse.value !== true))
+        ? ` text-${props.color}`
+        : ''
+
+    return `q-${type}__inner relative-position non-selectable q-${type}__inner--${state}${color}`
   })
 
   const formAttrs = computed(() => {
     const prop = { type: 'checkbox' }
 
-    props.name !== void 0 && Object.assign(prop, {
-      // see https://vuejs.org/guide/extras/render-function.html#creating-vnodes (.prop)
-      '.checked': isTrue.value,
-      '^checked': isTrue.value === true ? 'checked' : void 0,
-      name: props.name,
-      value: modelIsArray.value === true
-        ? props.val
-        : props.trueValue
-    })
+    if (props.name !== void 0) {
+      Object.assign(prop, {
+        // see https://vuejs.org/guide/extras/render-function.html#creating-vnodes (.prop)
+        '.checked': isTrue.value,
+        '^checked': isTrue.value === true ? 'checked' : void 0,
+        name: props.name,
+        value: modelIsArray.value === true ? props.val : props.trueValue
+      })
+    }
 
     return prop
   })
@@ -131,19 +144,22 @@ export default function (type, getInner) {
       tabindex: tabindex.value,
       role: type === 'toggle' ? 'switch' : 'checkbox',
       'aria-label': props.label,
-      'aria-checked': isIndeterminate.value === true
-        ? 'mixed'
-        : (isTrue.value === true ? 'true' : 'false')
+      'aria-checked':
+        isIndeterminate.value === true
+          ? 'mixed'
+          : isTrue.value === true
+            ? 'true'
+            : 'false'
     }
 
     if (props.disable === true) {
-      attrs[ 'aria-disabled' ] = 'true'
+      attrs['aria-disabled'] = 'true'
     }
 
     return attrs
   })
 
-  function onClick (e) {
+  function onClick(e) {
     if (e !== void 0) {
       stopAndPrevent(e)
       refocusTarget(e)
@@ -154,7 +170,7 @@ export default function (type, getInner) {
     }
   }
 
-  function getNextValue () {
+  function getNextValue() {
     if (modelIsArray.value === true) {
       if (isTrue.value === true) {
         const val = props.modelValue.slice()
@@ -162,35 +178,31 @@ export default function (type, getInner) {
         return val
       }
 
-      return props.modelValue.concat([ props.val ])
+      return props.modelValue.concat([props.val])
     }
 
     if (isTrue.value === true) {
       if (props.toggleOrder !== 'ft' || props.toggleIndeterminate === false) {
         return props.falseValue
       }
-    }
-    else if (isFalse.value === true) {
+    } else if (isFalse.value === true) {
       if (props.toggleOrder === 'ft' || props.toggleIndeterminate === false) {
         return props.trueValue
       }
-    }
-    else {
-      return props.toggleOrder !== 'ft'
-        ? props.trueValue
-        : props.falseValue
+    } else {
+      return props.toggleOrder !== 'ft' ? props.trueValue : props.falseValue
     }
 
     return props.indeterminateValue
   }
 
-  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)
     }
@@ -204,41 +216,58 @@ export default function (type, getInner) {
   return () => {
     const inner = getInnerContent()
 
-    props.disable !== true && injectFormInput(
-      inner,
-      'unshift',
-      ` q-${ type }__native absolute q-ma-none q-pa-none`
-    )
+    if (props.disable !== true) {
+      injectFormInput(
+        inner,
+        'unshift',
+        ` q-${type}__native absolute q-ma-none q-pa-none`
+      )
+    }
 
     const child = [
-      h('div', {
-        class: innerClass.value,
-        style: sizeStyle.value,
-        'aria-hidden': 'true'
-      }, inner)
+      h(
+        'div',
+        {
+          class: innerClass.value,
+          style: sizeStyle.value,
+          'aria-hidden': 'true'
+        },
+        inner
+      )
     ]
 
     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-${type}__label q-anchor--skip`
+          },
+          label
+        )
+      )
+    }
 
-    label !== void 0 && child.push(
-      h('div', {
-        class: `q-${ type }__label q-anchor--skip`
-      }, label)
+    return h(
+      'div',
+      {
+        ref: rootRef,
+        class: classes.value,
+        ...attributes.value,
+        onClick,
+        onKeydown,
+        onKeyup
+      },
+      child
     )
-
-    return h('div', {
-      ref: rootRef,
-      class: classes.value,
-      ...attributes.value,
-      onClick,
-      onKeydown,
-      onKeyup
-    }, child)
   }
 }

package/src/components/checkbox/use-checkbox.json

@@ -1,18 +1,21 @@
 {
-  "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"
+  ],
 
   "props": {
     "model-value": {
       "extends": "model-value",
-      "type": [ "Any", "Array" ],
+      "type": ["Any", "Array"],
       "default": "null",
-      "examples": [ "false", "[ 'car', 'building' ]" ]
+      "examples": ["false", "['car', 'building']"]
     },
 
     "val": {
       "type": "Any",
       "desc": "Works when model ('value') is Array. It tells the component which value should add/remove when ticked/unticked",
-      "examples": [ "'car'" ],
+      "examples": ["'car'"],
       "category": "model"
     },
 
@@ -20,7 +23,7 @@
       "type": "Any",
       "desc": "What model value should be considered as checked/ticked/on?",
       "default": "true",
-      "examples": [ "'Agreed'" ],
+      "examples": ["'Agreed'"],
       "category": "model"
     },
 
@@ -28,7 +31,7 @@
       "type": "Any",
       "desc": "What model value should be considered as unchecked/unticked/off?",
       "default": "false",
-      "examples": [ "'Disagree'" ],
+      "examples": ["'Disagree'"],
       "category": "model"
     },
 
@@ -36,14 +39,14 @@
       "type": "Any",
       "desc": "What model value should be considered as 'indeterminate'?",
       "default": "null",
-      "examples": [ "0", "'not_answered'" ],
+      "examples": ["0", "'not_answered'"],
       "category": "model"
     },
 
     "toggle-order": {
       "type": "String",
       "desc": "Determines toggle order of the two states ('t' stands for state of true, 'f' for state of false); If 'toggle-indeterminate' is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> ...",
-      "values": [ "'tf'", "'ft'" ],
+      "values": ["'tf'", "'ft'"],
       "category": "behavior"
     },
 
@@ -56,7 +59,7 @@
     "label": {
       "type": "String",
       "desc": "Label to display along the component (or use the default slot instead of this prop)",
-      "examples": [ "'I agree with the Terms and Conditions'" ],
+      "examples": ["'I agree with the Terms and Conditions'"],
       "category": "label"
     },
 
@@ -68,19 +71,19 @@
 
     "checked-icon": {
       "type": "String",
-      "examples": [ "'visibility'" ],
+      "examples": ["'visibility'"],
       "category": "icons"
     },
 
     "unchecked-icon": {
       "type": "String",
-      "examples": [ "'visibility_off'" ],
+      "examples": ["'visibility_off'"],
       "category": "icons"
     },
 
     "indeterminate-icon": {
       "type": "String",
-      "examples": [ "'help'" ],
+      "examples": ["'help'"],
       "category": "icons"
     },
 

package/src/components/chip/QChip.js

@@ -4,8 +4,12 @@ import QIcon from '../icon/QIcon.js'
 
 import Ripple from '../../directives/ripple/Ripple.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 { createComponent } from '../../utils/private.create/create.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
@@ -32,7 +36,7 @@ export default createComponent({
     iconRight: String,
     iconRemove: String,
     iconSelected: String,
-    label: [ String, Number ],
+    label: [String, Number],
 
     color: String,
     textColor: String,
@@ -53,59 +57,74 @@ export default createComponent({
 
     removeAriaLabel: String,
 
-    tabindex: [ String, Number ],
+    tabindex: [String, Number],
     disable: Boolean,
 
     ripple: {
-      type: [ Boolean, Object ],
+      type: [Boolean, Object],
       default: true
     }
   },
 
-  emits: [ 'update:modelValue', 'update:selected', 'remove', 'click' ],
+  emits: ['update:modelValue', 'update:selected', 'remove', 'click'],
 
-  setup (props, { slots, emit }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots, emit }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
 
     const isDark = useDark(props, $q)
     const sizeStyle = useSize(props, defaultSizes)
 
-    const hasLeftIcon = computed(() => props.selected === true || props.icon !== void 0)
+    const hasLeftIcon = computed(
+      () => props.selected === true || props.icon !== void 0
+    )
 
-    const leftIcon = computed(() => (
+    const leftIcon = computed(() =>
       props.selected === true
         ? props.iconSelected || $q.iconSet.chip.selected
         : props.icon
-    ))
+    )
 
-    const removeIcon = computed(() => props.iconRemove || $q.iconSet.chip.remove)
+    const removeIcon = computed(
+      () => props.iconRemove || $q.iconSet.chip.remove
+    )
 
-    const isClickable = computed(() =>
-      props.disable === false
-      && (props.clickable === true || props.selected !== null)
+    const isClickable = computed(
+      () =>
+        props.disable === false &&
+        (props.clickable === true || props.selected !== null)
     )
 
     const classes = computed(() => {
-      const text = props.outline === true
-        ? props.color || props.textColor
-        : props.textColor
-
-      return 'q-chip row inline no-wrap items-center'
-        + (props.outline === false && props.color !== void 0 ? ` bg-${ props.color }` : '')
-        + (text ? ` text-${ text } q-chip--colored` : '')
-        + (props.disable === true ? ' disabled' : '')
-        + (props.dense === true ? ' q-chip--dense' : '')
-        + (props.outline === true ? ' q-chip--outline' : '')
-        + (props.selected === true ? ' q-chip--selected' : '')
-        + (isClickable.value === true ? ' q-chip--clickable cursor-pointer non-selectable q-hoverable' : '')
-        + (props.square === true ? ' q-chip--square' : '')
-        + (isDark.value === true ? ' q-chip--dark q-dark' : '')
+      const text =
+        props.outline === true
+          ? props.color || props.textColor
+          : props.textColor
+
+      return (
+        'q-chip row inline no-wrap items-center' +
+        (props.outline === false && props.color !== void 0
+          ? ` bg-${props.color}`
+          : '') +
+        (text ? ` text-${text} q-chip--colored` : '') +
+        (props.disable === true ? ' disabled' : '') +
+        (props.dense === true ? ' q-chip--dense' : '') +
+        (props.outline === true ? ' q-chip--outline' : '') +
+        (props.selected === true ? ' q-chip--selected' : '') +
+        (isClickable.value === true
+          ? ' q-chip--clickable cursor-pointer non-selectable q-hoverable'
+          : '') +
+        (props.square === true ? ' q-chip--square' : '') +
+        (isDark.value === true ? ' q-chip--dark q-dark' : '')
+      )
     })
 
     const attributes = computed(() => {
-      const chip = props.disable === true
-        ? { tabindex: -1, 'aria-disabled': 'true' }
-        : { tabindex: props.tabindex || 0 }
+      const chip =
+        props.disable === true
+          ? { tabindex: -1, 'aria-disabled': 'true' }
+          : { tabindex: props.tabindex || 0 }
 
       const remove = {
         ...chip,
@@ -117,18 +136,18 @@ export default createComponent({
       return { chip, remove }
     })
 
-    function onKeyup (e) {
-      e.keyCode === 13 /* ENTER */ && onClick(e)
+    function onKeyup(e) {
+      if (e.keyCode === 13 /* ENTER */) onClick(e)
     }
 
-    function onClick (e) {
+    function onClick(e) {
       if (!props.disable) {
         emit('update:selected', !props.selected)
         emit('click', e)
       }
     }
 
-    function onRemove (e) {
+    function onRemove(e) {
       if (e.keyCode === void 0 || e.keyCode === 13) {
         stopAndPrevent(e)
         if (props.disable === false) {
@@ -138,46 +157,57 @@ export default createComponent({
       }
     }
 
-    function getContent () {
+    function getContent() {
       const child = []
 
-      isClickable.value === true && child.push(
-        h('div', { class: 'q-focus-helper' })
-      )
+      if (isClickable.value === true) {
+        child.push(h('div', { class: 'q-focus-helper' }))
+      }
 
-      hasLeftIcon.value === true && child.push(
-        h(QIcon, {
-          class: 'q-chip__icon q-chip__icon--left',
-          name: leftIcon.value
-        })
-      )
+      if (hasLeftIcon.value === true) {
+        child.push(
+          h(QIcon, {
+            class: 'q-chip__icon q-chip__icon--left',
+            name: leftIcon.value
+          })
+        )
+      }
 
-      const label = props.label !== void 0
-        ? [ h('div', { class: 'ellipsis' }, [ props.label ]) ]
-        : void 0
+      const label =
+        props.label !== void 0
+          ? [h('div', { class: 'ellipsis' }, [props.label])]
+          : void 0
 
       child.push(
-        h('div', {
-          class: 'q-chip__content col row no-wrap items-center q-anchor--skip'
-        }, hMergeSlotSafely(slots.default, label))
+        h(
+          'div',
+          {
+            class: 'q-chip__content col row no-wrap items-center q-anchor--skip'
+          },
+          hMergeSlotSafely(slots.default, label)
+        )
       )
 
-      props.iconRight && child.push(
-        h(QIcon, {
-          class: 'q-chip__icon q-chip__icon--right',
-          name: props.iconRight
-        })
-      )
+      if (props.iconRight) {
+        child.push(
+          h(QIcon, {
+            class: 'q-chip__icon q-chip__icon--right',
+            name: props.iconRight
+          })
+        )
+      }
 
-      props.removable === true && child.push(
-        h(QIcon, {
-          class: 'q-chip__icon q-chip__icon--remove cursor-pointer',
-          name: removeIcon.value,
-          ...attributes.value.remove,
-          onClick: onRemove,
-          onKeyup: onRemove
-        })
-      )
+      if (props.removable === true) {
+        child.push(
+          h(QIcon, {
+            class: 'q-chip__icon q-chip__icon--remove cursor-pointer',
+            name: removeIcon.value,
+            ...attributes.value.remove,
+            onClick: onRemove,
+            onKeyup: onRemove
+          })
+        )
+      }
 
       return child
     }
@@ -190,11 +220,9 @@ export default createComponent({
         style: sizeStyle.value
       }
 
-      isClickable.value === true && Object.assign(
-        data,
-        attributes.value.chip,
-        { onClick, onKeyup }
-      )
+      if (isClickable.value === true) {
+        Object.assign(data, attributes.value.chip, { onClick, onKeyup })
+      }
 
       return hDir(
         'div',
@@ -202,7 +230,7 @@ export default createComponent({
         getContent(),
         'ripple',
         props.ripple !== false && props.disable !== true,
-        () => [ [ Ripple, props.ripple ] ]
+        () => [[Ripple, props.ripple]]
       )
     }
   }