quasar 2.19.3 → 2.20.1

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance, toRaw } from 'vue'
+import { computed, getCurrentInstance, h, ref, toRaw } from 'vue'
 
 import useDark, {
   useDarkProps
@@ -14,7 +14,7 @@ import {
 
 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'
+import { hMergeSlot, hSlot } from '../../utils/private.render/render.js'
 
 export const useCheckboxProps = {
   ...useDarkProps,
@@ -54,6 +54,12 @@ export const useCheckboxProps = {
 
 export const useCheckboxEmits = ['update:modelValue']
 
+function onKeydown(e) {
+  if (e.keyCode === 13 || e.keyCode === 32) {
+    stopAndPrevent(e)
+  }
+}
+
 export default function useCheckbox(type, getInner) {
   const { props, slots, emit, proxy } = getCurrentInstance()
   const { $q } = proxy
@@ -70,51 +76,40 @@ export default function useCheckbox(type, getInner) {
 
   const index = computed(() => {
     const val = toRaw(props.val)
-    return modelIsArray.value === true
+    return modelIsArray.value
       ? props.modelValue.findIndex(opt => toRaw(opt) === val)
       : -1
   })
 
   const isTrue = computed(() =>
-    modelIsArray.value === true
+    modelIsArray.value
       ? index.value !== -1
       : toRaw(props.modelValue) === toRaw(props.trueValue)
   )
 
   const isFalse = computed(() =>
-    modelIsArray.value === true
+    modelIsArray.value
       ? index.value === -1
       : toRaw(props.modelValue) === toRaw(props.falseValue)
   )
 
-  const isIndeterminate = computed(
-    () => isTrue.value === false && isFalse.value === false
-  )
-
-  const tabindex = computed(() =>
-    props.disable === true ? -1 : props.tabindex || 0
-  )
-
+  const isIndeterminate = computed(() => !isTrue.value && !isFalse.value)
+  const tabindex = computed(() => (props.disable ? -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' : '')
+      (props.disable ? ' disabled' : '') +
+      (isDark.value ? ` q-${type}--dark` : '') +
+      (props.dense ? ` q-${type}--dense` : '') +
+      (props.leftLabel ? ' reverse' : '')
   )
 
   const innerClass = computed(() => {
-    const state =
-      isTrue.value === true
-        ? 'truthy'
-        : isFalse.value === true
-          ? 'falsy'
-          : 'indet'
+    const state = isTrue.value ? 'truthy' : isFalse.value ? 'falsy' : 'indet'
+
     const color =
       props.color !== void 0 &&
-      (props.keepColor === true ||
-        (type === 'toggle' ? isTrue.value === true : isFalse.value !== true))
+      (props.keepColor || (type === 'toggle' ? isTrue.value : !isFalse.value))
         ? ` text-${props.color}`
         : ''
 
@@ -128,9 +123,9 @@ export default function useCheckbox(type, getInner) {
       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,
+        '^checked': isTrue.value ? 'checked' : void 0,
         name: props.name,
-        value: modelIsArray.value === true ? props.val : props.trueValue
+        value: modelIsArray.value ? props.val : props.trueValue
       })
     }
 
@@ -144,15 +139,14 @@ export default function useCheckbox(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
+        ? 'mixed'
+        : isTrue.value
+          ? 'true'
+          : 'false'
     }
 
-    if (props.disable === true) {
+    if (props.disable) {
       attrs['aria-disabled'] = 'true'
     }
 
@@ -165,28 +159,28 @@ export default function useCheckbox(type, getInner) {
       refocusTarget(e)
     }
 
-    if (props.disable !== true) {
+    if (!props.disable) {
       emit('update:modelValue', getNextValue(), e)
     }
   }
 
   function getNextValue() {
-    if (modelIsArray.value === true) {
-      if (isTrue.value === true) {
-        const val = props.modelValue.slice()
+    if (modelIsArray.value) {
+      if (isTrue.value) {
+        const val = [...props.modelValue]
         val.splice(index.value, 1)
         return val
       }
 
-      return props.modelValue.concat([props.val])
+      return [...props.modelValue, props.val]
     }
 
-    if (isTrue.value === true) {
-      if (props.toggleOrder !== 'ft' || props.toggleIndeterminate === false) {
+    if (isTrue.value) {
+      if (props.toggleOrder !== 'ft' || !props.toggleIndeterminate) {
         return props.falseValue
       }
-    } else if (isFalse.value === true) {
-      if (props.toggleOrder === 'ft' || props.toggleIndeterminate === false) {
+    } else if (isFalse.value) {
+      if (props.toggleOrder === 'ft' || !props.toggleIndeterminate) {
         return props.trueValue
       }
     } else {
@@ -196,12 +190,6 @@ export default function useCheckbox(type, getInner) {
     return props.indeterminateValue
   }
 
-  function onKeydown(e) {
-    if (e.keyCode === 13 || e.keyCode === 32) {
-      stopAndPrevent(e)
-    }
-  }
-
   function onKeyup(e) {
     if (e.keyCode === 13 || e.keyCode === 32) {
       onClick(e)
@@ -216,7 +204,7 @@ export default function useCheckbox(type, getInner) {
   return () => {
     const inner = getInnerContent()
 
-    if (props.disable !== true) {
+    if (!props.disable) {
       injectFormInput(
         inner,
         'unshift',

package/src/components/chip/QChip.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
@@ -13,7 +13,7 @@ import useSize, {
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { stopAndPrevent } from '../../utils/event/event.js'
-import { hMergeSlotSafely, hDir } from '../../utils/private.render/render.js'
+import { hDir, hMergeSlotSafely } from '../../utils/private.render/render.js'
 
 export const defaultSizes = {
   xs: 8,
@@ -76,12 +76,10 @@ export default createComponent({
     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 || props.icon !== void 0)
 
     const leftIcon = computed(() =>
-      props.selected === true
+      props.selected
         ? props.iconSelected || $q.iconSet.chip.selected
         : props.icon
     )
@@ -91,40 +89,34 @@ export default createComponent({
     )
 
     const isClickable = computed(
-      () =>
-        props.disable === false &&
-        (props.clickable === true || props.selected !== null)
+      () => !props.disable && (props.clickable || props.selected !== null)
     )
 
     const classes = computed(() => {
-      const text =
-        props.outline === true
-          ? props.color || props.textColor
-          : props.textColor
+      const text = props.outline
+        ? 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}`
-          : '') +
+        (!props.outline && 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
+        (props.disable ? ' disabled' : '') +
+        (props.dense ? ' q-chip--dense' : '') +
+        (props.outline ? ' q-chip--outline' : '') +
+        (props.selected ? ' q-chip--selected' : '') +
+        (isClickable.value
           ? ' q-chip--clickable cursor-pointer non-selectable q-hoverable'
           : '') +
-        (props.square === true ? ' q-chip--square' : '') +
-        (isDark.value === true ? ' q-chip--dark q-dark' : '')
+        (props.square ? ' q-chip--square' : '') +
+        (isDark.value ? ' 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
+        ? { tabindex: -1, 'aria-disabled': 'true' }
+        : { tabindex: props.tabindex || 0 }
 
       const remove = {
         ...chip,
@@ -150,7 +142,7 @@ export default createComponent({
     function onRemove(e) {
       if (e.keyCode === void 0 || e.keyCode === 13) {
         stopAndPrevent(e)
-        if (props.disable === false) {
+        if (!props.disable) {
           emit('update:modelValue', false)
           emit('remove')
         }
@@ -160,11 +152,11 @@ export default createComponent({
     function getContent() {
       const child = []
 
-      if (isClickable.value === true) {
+      if (isClickable.value) {
         child.push(h('div', { class: 'q-focus-helper' }))
       }
 
-      if (hasLeftIcon.value === true) {
+      if (hasLeftIcon.value) {
         child.push(
           h(QIcon, {
             class: 'q-chip__icon q-chip__icon--left',
@@ -197,7 +189,7 @@ export default createComponent({
         )
       }
 
-      if (props.removable === true) {
+      if (props.removable) {
         child.push(
           h(QIcon, {
             class: 'q-chip__icon q-chip__icon--remove cursor-pointer',
@@ -213,14 +205,14 @@ export default createComponent({
     }
 
     return () => {
-      if (props.modelValue === false) return
+      if (!props.modelValue) return
 
       const data = {
         class: classes.value,
         style: sizeStyle.value
       }
 
-      if (isClickable.value === true) {
+      if (isClickable.value) {
         Object.assign(data, attributes.value.chip, { onClick, onKeyup })
       }
 
@@ -229,7 +221,7 @@ export default createComponent({
         data,
         getContent(),
         'ripple',
-        props.ripple !== false && props.disable !== true,
+        props.ripple !== false && !props.disable,
         () => [[Ripple, props.ripple]]
       )
     }

package/src/components/chip/QChip.test.js

@@ -1,5 +1,5 @@
-import { mount, flushPromises } from '@vue/test-utils'
-import { describe, test, expect } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
 
 import QChip, { defaultSizes } from './QChip.js'
 

package/src/components/circular-progress/QCircularProgress.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import useSize from '../../composables/private.use-size/use-size.js'
 import { useCircularCommonProps } from './circular-progress.js'
@@ -38,7 +38,7 @@ export default createComponent({
     const sizeStyle = useSize(props)
 
     const svgStyle = computed(() => {
-      const angle = ($q.lang.rtl === true ? -1 : 1) * props.angle
+      const angle = ($q.lang.rtl ? -1 : 1) * props.angle
 
       return {
         transform:
@@ -49,7 +49,7 @@ export default createComponent({
     })
 
     const circleStyle = computed(() =>
-      props.instantFeedback !== true && props.indeterminate !== true
+      !props.instantFeedback && !props.indeterminate
         ? {
             transition: `stroke-dashoffset ${props.animationSpeed}ms ease 0s, stroke ${props.animationSpeed}ms ease`
           }
@@ -72,9 +72,7 @@ export default createComponent({
     const strokeDashOffset = computed(() => {
       const dashRatio = (props.max - normalized.value) / range.value
       const dashGap =
-        props.rounded === true &&
-        normalized.value < props.max &&
-        dashRatio < 0.25
+        props.rounded && normalized.value < props.max && dashRatio < 0.25
           ? (strokeWidth.value / 2) * (1 - dashRatio / 0.25)
           : 0
 
@@ -132,7 +130,7 @@ export default createComponent({
           thickness: strokeWidth.value,
           offset: strokeDashOffset.value,
           color: props.color,
-          rounded: props.rounded === true ? 'round' : void 0
+          rounded: props.rounded ? 'round' : void 0
         })
       )
 
@@ -149,7 +147,7 @@ export default createComponent({
         )
       ]
 
-      if (props.showValue === true) {
+      if (props.showValue) {
         child.push(
           h(
             'div',
@@ -168,13 +166,12 @@ export default createComponent({
       return h(
         'div',
         {
-          class: `q-circular-progress q-circular-progress--${props.indeterminate === true ? 'in' : ''}determinate`,
+          class: `q-circular-progress q-circular-progress--${props.indeterminate ? 'in' : ''}determinate`,
           style: sizeStyle.value,
           role: 'progressbar',
           'aria-valuemin': props.min,
           'aria-valuemax': props.max,
-          'aria-valuenow':
-            props.indeterminate === true ? void 0 : normalized.value
+          'aria-valuenow': props.indeterminate ? void 0 : normalized.value
         },
         hMergeSlotSafely(slots.internal, child)
       ) // "internal" is used by QKnob

package/src/components/circular-progress/circular-progress.test.js

@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
 
 import { useCircularCommonProps } from './circular-progress.js'