quasar 2.19.2 → 2.20.0

package/src/components/item/QItem.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, ref } from 'vue'
 
 import useDark, {
   useDarkProps
@@ -54,54 +54,44 @@ export default createComponent({
     const blurTargetRef = ref(null)
 
     const isActionable = computed(
-      () =>
-        props.clickable === true ||
-        hasLink.value === true ||
-        props.tag === 'label'
+      () => props.clickable || hasLink.value || props.tag === 'label'
     )
 
-    const isClickable = computed(
-      () => props.disable !== true && isActionable.value === true
-    )
+    const isClickable = computed(() => !props.disable && isActionable.value)
 
     const classes = computed(
       () =>
         'q-item q-item-type row no-wrap' +
-        (props.dense === true ? ' q-item--dense' : '') +
-        (isDark.value === true ? ' q-item--dark' : '') +
-        (hasLink.value === true && props.active === null
+        (props.dense ? ' q-item--dense' : '') +
+        (isDark.value ? ' q-item--dark' : '') +
+        (hasLink.value && props.active === null
           ? linkClass.value
-          : props.active === true
+          : props.active
             ? ` q-item--active${props.activeClass !== void 0 ? ` ${props.activeClass}` : ''}`
             : '') +
-        (props.disable === true ? ' disabled' : '') +
-        (isClickable.value === true
+        (props.disable ? ' disabled' : '') +
+        (isClickable.value
           ? ' q-item--clickable q-link cursor-pointer ' +
-            (props.manualFocus === true
+            (props.manualFocus
               ? 'q-manual-focusable'
               : 'q-focusable q-hoverable') +
-            (props.focused === true ? ' q-manual-focusable--focused' : '')
+            (props.focused ? ' q-manual-focusable--focused' : '')
           : '')
     )
 
     const style = computed(() => {
-      if (props.insetLevel === void 0) {
-        return null
-      }
+      if (props.insetLevel === void 0) return null
 
-      const dir = $q.lang.rtl === true ? 'Right' : 'Left'
+      const dir = $q.lang.rtl ? 'Right' : 'Left'
       return {
         ['padding' + dir]: 16 + props.insetLevel * 56 + 'px'
       }
     })
 
     function onClick(e) {
-      if (isClickable.value === true) {
-        if (blurTargetRef.value !== null && e.qAvoidFocus !== true) {
-          if (
-            e.qKeyEvent !== true &&
-            document.activeElement === rootRef.value
-          ) {
+      if (isClickable.value) {
+        if (blurTargetRef.value !== null && !e.qAvoidFocus) {
+          if (!e.qKeyEvent && document.activeElement === rootRef.value) {
             blurTargetRef.value.focus()
           } else if (document.activeElement === blurTargetRef.value) {
             rootRef.value.focus()
@@ -113,7 +103,7 @@ export default createComponent({
     }
 
     function onKeyup(e) {
-      if (isClickable.value === true && isKeyCode(e, [13, 32]) === true) {
+      if (isClickable.value && isKeyCode(e, [13, 32])) {
         stopAndPrevent(e)
 
         // for ripple
@@ -131,7 +121,7 @@ export default createComponent({
     function getContent() {
       const child = hUniqueSlot(slots.default, [])
 
-      if (isClickable.value === true) {
+      if (isClickable.value) {
         child.unshift(
           h('div', {
             class: 'q-focus-helper',
@@ -154,10 +144,10 @@ export default createComponent({
         onKeyup
       }
 
-      if (isClickable.value === true) {
+      if (isClickable.value) {
         data.tabindex = props.tabindex || '0'
         Object.assign(data, linkAttrs.value)
-      } else if (isActionable.value === true) {
+      } else if (isActionable.value) {
         data['aria-disabled'] = 'true'
       }
 

package/src/components/item/QItemLabel.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
@@ -14,16 +14,14 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const parsedLines = computed(() => parseInt(props.lines, 10))
+    const parsedLines = computed(() => Number.parseInt(props.lines, 10))
 
     const classes = computed(
       () =>
         'q-item__label' +
-        (props.overline === true
-          ? ' q-item__label--overline text-overline'
-          : '') +
-        (props.caption === true ? ' q-item__label--caption text-caption' : '') +
-        (props.header === true ? ' q-item__label--header' : '') +
+        (props.overline ? ' q-item__label--overline text-overline' : '') +
+        (props.caption ? ' q-item__label--caption text-caption' : '') +
+        (props.header ? ' q-item__label--header' : '') +
         (parsedLines.value === 1 ? ' ellipsis' : '')
     )
 

package/src/components/item/QItemSection.js

@@ -1,4 +1,4 @@
-import { h, computed } from 'vue'
+import { computed, h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { hSlot } from '../../utils/private.render/render.js'
@@ -18,13 +18,13 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-item__section column' +
-        ` q-item__section--${props.avatar === true || props.side === true || props.thumbnail === true ? 'side' : 'main'}` +
-        (props.top === true
+        ` q-item__section--${props.avatar || props.side || props.thumbnail ? 'side' : 'main'}` +
+        (props.top
           ? ' q-item__section--top justify-start'
           : ' justify-center') +
-        (props.avatar === true ? ' q-item__section--avatar' : '') +
-        (props.thumbnail === true ? ' q-item__section--thumbnail' : '') +
-        (props.noWrap === true ? ' q-item__section--nowrap' : '')
+        (props.avatar ? ' q-item__section--avatar' : '') +
+        (props.thumbnail ? ' q-item__section--thumbnail' : '') +
+        (props.noWrap ? ' q-item__section--nowrap' : '')
     )
 
     return () => h('div', { class: classes.value }, hSlot(slots.default))

package/src/components/item/QList.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import useDark, {
@@ -36,11 +36,11 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-list' +
-        (props.bordered === true ? ' q-list--bordered' : '') +
-        (props.dense === true ? ' q-list--dense' : '') +
-        (props.separator === true ? ' q-list--separator' : '') +
-        (isDark.value === true ? ' q-list--dark' : '') +
-        (props.padding === true ? ' q-list--padding' : '')
+        (props.bordered ? ' q-list--bordered' : '') +
+        (props.dense ? ' q-list--dense' : '') +
+        (props.separator ? ' q-list--separator' : '') +
+        (isDark.value ? ' q-list--dark' : '') +
+        (props.padding ? ' q-list--padding' : '')
     )
 
     return () =>

package/src/components/item/QList.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 QList from './QList.js'
 

package/src/components/knob/QKnob.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, ref, watch } from 'vue'
 
 import QCircularProgress from '../circular-progress/QCircularProgress.js'
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
@@ -9,8 +9,8 @@ import { between, normalizeToInterval } from '../../utils/format/format.js'
 import { hDir } from '../../utils/private.render/render.js'
 
 import {
-  useFormProps,
-  useFormAttrs
+  useFormAttrs,
+  useFormProps
 } from '../../composables/use-form/private.use-form.js'
 import { useCircularCommonProps } from '../circular-progress/circular-progress.js'
 
@@ -58,12 +58,12 @@ export default createComponent({
     const dragging = ref(false)
 
     const innerMin = computed(() =>
-      isNaN(props.innerMin) === true || props.innerMin < props.min
+      !Number.isFinite(props.innerMin) || props.innerMin < props.min
         ? props.min
         : props.innerMin
     )
     const innerMax = computed(() =>
-      isNaN(props.innerMax) === true || props.innerMax > props.max
+      !Number.isFinite(props.innerMax) || props.innerMax > props.max
         ? props.max
         : props.innerMax
     )
@@ -86,16 +86,14 @@ export default createComponent({
 
     normalizeModel()
 
-    const editable = computed(
-      () => props.disable === false && props.readonly === false
-    )
+    const editable = computed(() => !props.disable && !props.readonly)
 
     const classes = computed(
       () =>
         'q-knob non-selectable' +
-        (editable.value === true
+        (editable.value
           ? ' q-knob--editable'
-          : props.disable === true
+          : props.disable
             ? ' disabled'
             : '')
     )
@@ -105,28 +103,27 @@ export default createComponent({
     )
     const step = computed(() => (props.step === 0 ? 1 : props.step))
     const instantFeedback = computed(
-      () => props.instantFeedback === true || dragging.value === true
+      () => props.instantFeedback || dragging.value
     )
 
-    const onEvents =
-      $q.platform.is.mobile === true
-        ? computed(() => (editable.value === true ? { onClick } : {}))
-        : computed(() =>
-            editable.value === true
-              ? {
-                  onMousedown,
-                  onClick,
-                  onKeydown,
-                  onKeyup
-                }
-              : {}
-          )
+    const onEvents = $q.platform.is.mobile
+      ? computed(() => (editable.value ? { onClick } : {}))
+      : computed(() =>
+          editable.value
+            ? {
+                onMousedown,
+                onClick,
+                onKeydown,
+                onKeyup
+              }
+            : {}
+        )
 
     const attrs = computed(() =>
-      editable.value === true
+      editable.value
         ? { tabindex: props.tabindex }
         : {
-            [`aria-${props.disable === true ? 'disabled' : 'readonly'}`]: 'true'
+            [`aria-${props.disable ? 'disabled' : 'readonly'}`]: 'true'
           }
     )
 
@@ -142,13 +139,15 @@ export default createComponent({
       if (event.isFinal) {
         updatePosition(event.evt, true)
         dragging.value = false
-      } else if (event.isFirst) {
+        return
+      }
+
+      if (event.isFirst) {
         updateCenterPosition()
         dragging.value = true
-        updatePosition(event.evt)
-      } else {
-        updatePosition(event.evt)
       }
+
+      updatePosition(event.evt, false)
     }
 
     const directives = computed(() => [
@@ -165,7 +164,7 @@ export default createComponent({
 
     function onMousedown(evt) {
       updateCenterPosition()
-      updatePosition(evt)
+      updatePosition(evt, false)
     }
 
     function onClick(evt) {
@@ -174,7 +173,7 @@ export default createComponent({
     }
 
     function onKeydown(evt) {
-      if (keyCodes.includes(evt.keyCode) === false) return
+      if (!keyCodes.includes(evt.keyCode)) return
 
       stopAndPrevent(evt)
 
@@ -182,20 +181,18 @@ export default createComponent({
         offset = [34, 37, 40].includes(evt.keyCode) ? -stepVal : stepVal
 
       model.value = between(
-        parseFloat((model.value + offset).toFixed(decimals.value)),
+        Number.parseFloat((model.value + offset).toFixed(decimals.value)),
         innerMin.value,
         innerMax.value
       )
 
-      updateValue()
+      updateValue(false)
     }
 
     function updatePosition(evt, change) {
       const pos = position(evt),
         height = Math.abs(pos.top - centerPosition.top),
-        distance = Math.sqrt(
-          height ** 2 + Math.abs(pos.left - centerPosition.left) ** 2
-        )
+        distance = Math.hypot(height, pos.left - centerPosition.left)
 
       let angle = Math.asin(height / distance) * (180 / Math.PI)
 
@@ -205,15 +202,13 @@ export default createComponent({
         angle = centerPosition.left < pos.left ? angle + 90 : 270 - angle
       }
 
-      if ($q.lang.rtl === true) {
+      if ($q.lang.rtl) {
         angle = normalizeToInterval(-angle - props.angle, 0, 360)
       } else if (props.angle) {
         angle = normalizeToInterval(angle - props.angle, 0, 360)
       }
 
-      if (props.reverse === true) {
-        angle = 360 - angle
-      }
+      if (props.reverse) angle = 360 - angle
 
       let newModel = props.min + (angle / 360) * (props.max - props.min)
 
@@ -227,7 +222,7 @@ export default createComponent({
             ? (modulo < 0 ? -1 : 1) * step.value
             : 0)
 
-        newModel = parseFloat(newModel.toFixed(decimals.value))
+        newModel = Number.parseFloat(newModel.toFixed(decimals.value))
       }
 
       newModel = between(newModel, innerMin.value, innerMax.value)
@@ -252,7 +247,7 @@ export default createComponent({
         emit('update:modelValue', model.value)
       }
 
-      if (change === true) emit('change', model.value)
+      if (change) emit('change', model.value)
     }
 
     const formAttrs = useFormAttrs(props)
@@ -279,7 +274,7 @@ export default createComponent({
         default: slots.default
       }
 
-      if (editable.value === true && props.name !== void 0) {
+      if (editable.value && props.name !== void 0) {
         child.internal = getNameInput
       }
 

package/src/components/layout/QLayout.js

@@ -1,12 +1,12 @@
 import {
-  h,
-  ref,
-  reactive,
   computed,
-  watch,
-  provide,
+  getCurrentInstance,
+  h,
   onUnmounted,
-  getCurrentInstance
+  provide,
+  reactive,
+  ref,
+  watch
 } from 'vue'
 
 import { isRuntimeSsrPreHydration } from '../../plugins/platform/Platform.js'
@@ -19,6 +19,8 @@ import { getScrollbarWidth } from '../../utils/scroll/scroll.js'
 import { hMergeSlot } from '../../utils/private.render/render.js'
 import { layoutKey } from '../../utils/private.symbols/symbols.js'
 
+const viewRE = /^(h|l)h(h|r) lpr (f|l)f(f|r)$/
+
 export default createComponent({
   name: 'QLayout',
 
@@ -27,7 +29,7 @@ export default createComponent({
     view: {
       type: String,
       default: 'hhh lpr fff',
-      validator: v => /^(h|l)h(h|r) lpr (f|l)f(f|r)$/.test(v.toLowerCase())
+      validator: v => viewRE.test(v.toLowerCase())
     },
 
     onScroll: Function,
@@ -44,31 +46,29 @@ export default createComponent({
 
     // page related
     const height = ref($q.screen.height)
-    const width = ref(props.container === true ? 0 : $q.screen.width)
+    const width = ref(props.container ? 0 : $q.screen.width)
     const scroll = ref({ position: 0, direction: 'down', inflectionPoint: 0 })
 
     // container only prop
     const containerHeight = ref(0)
     const scrollbarWidth = ref(
-      isRuntimeSsrPreHydration.value === true ? 0 : getScrollbarWidth()
+      isRuntimeSsrPreHydration.value ? 0 : getScrollbarWidth()
     )
 
     const classes = computed(
       () =>
-        'q-layout q-layout--' +
-        (props.container === true ? 'containerized' : 'standard')
+        'q-layout q-layout--' + (props.container ? 'containerized' : 'standard')
     )
 
     const style = computed(() =>
-      props.container === false ? { minHeight: $q.screen.height + 'px' } : null
+      props.container ? null : { minHeight: $q.screen.height + 'px' }
     )
 
     // used by container only
     const targetStyle = computed(() =>
       scrollbarWidth.value !== 0
         ? {
-            [$q.lang.rtl === true ? 'left' : 'right']:
-              `${scrollbarWidth.value}px`
+            [$q.lang.rtl ? 'left' : 'right']: `${scrollbarWidth.value}px`
           }
         : null
     )
@@ -76,16 +76,15 @@ export default createComponent({
     const targetChildStyle = computed(() =>
       scrollbarWidth.value !== 0
         ? {
-            [$q.lang.rtl === true ? 'right' : 'left']: 0,
-            [$q.lang.rtl === true ? 'left' : 'right']:
-              `-${scrollbarWidth.value}px`,
+            [$q.lang.rtl ? 'right' : 'left']: 0,
+            [$q.lang.rtl ? 'left' : 'right']: `-${scrollbarWidth.value}px`,
             width: `calc(100% + ${scrollbarWidth.value}px)`
           }
         : null
     )
 
     function onPageScroll(data) {
-      if (props.container === true || document.qScrollPrevented !== true) {
+      if (props.container || !document.qScrollPrevented) {
         const info = {
           position: data.position.top,
           direction: data.direction,
@@ -114,7 +113,7 @@ export default createComponent({
         width.value = newWidth
       }
 
-      if (resized === true && props.onResize !== void 0) {
+      if (resized && props.onResize !== void 0) {
         emit('resize', data)
       }
     }
@@ -127,7 +126,7 @@ export default createComponent({
     }
 
     function updateScrollbarWidth() {
-      if (props.container === true) {
+      if (props.container) {
         const newWidth =
           height.value > containerHeight.value ? getScrollbarWidth() : 0
 
@@ -154,9 +153,9 @@ export default createComponent({
       rows: computed(() => {
         const rows = props.view.toLowerCase().split(' ')
         return {
-          top: rows[0].split(''),
-          middle: rows[1].split(''),
-          bottom: rows[2].split('')
+          top: [...rows[0]],
+          middle: [...rows[1]],
+          bottom: [...rows[2]]
         }
       }),
 
@@ -189,16 +188,16 @@ export default createComponent({
 
     // prevent scrollbar flicker while resizing window height
     // if no page scrollbar is already present
-    if (__QUASAR_SSR_SERVER__ !== true && getScrollbarWidth() > 0) {
+    if (!__QUASAR_SSR_SERVER__ && getScrollbarWidth() > 0) {
       let timer = null
       const el = document.body
 
-      function restoreScrollbar() {
+      const restoreScrollbar = () => {
         timer = null
         el.classList.remove('hide-scrollbar')
       }
 
-      function hideScrollbar() {
+      const hideScrollbar = () => {
         if (timer === null) {
           // if it has no scrollbar then there's nothing to do
           if (el.scrollHeight > $q.screen.height) return
@@ -211,7 +210,7 @@ export default createComponent({
         timer = setTimeout(restoreScrollbar, 300)
       }
 
-      function updateScrollEvent(action) {
+      const updateScrollEvent = action => {
         if (timer !== null && action === 'remove') {
           clearTimeout(timer)
           restoreScrollbar()
@@ -220,12 +219,9 @@ export default createComponent({
         window[`${action}EventListener`]('resize', hideScrollbar)
       }
 
-      watch(
-        () => (props.container !== true ? 'add' : 'remove'),
-        updateScrollEvent
-      )
+      watch(() => (props.container ? 'remove' : 'add'), updateScrollEvent)
 
-      if (props.container !== true) updateScrollEvent('add')
+      if (!props.container) updateScrollEvent('add')
 
       onUnmounted(() => {
         updateScrollEvent('remove')
@@ -243,13 +239,13 @@ export default createComponent({
         {
           class: classes.value,
           style: style.value,
-          ref: props.container === true ? void 0 : rootRef,
+          ref: props.container ? void 0 : rootRef,
           tabindex: -1
         },
         content
       )
 
-      if (props.container === true) {
+      if (props.container) {
         return h(
           'div',
           {

package/src/components/linear-progress/QLinearProgress.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import useDark, {
   useDarkProps
@@ -20,10 +20,9 @@ const defaultSizes = {
 
 function width(val, reverse, $q) {
   return {
-    transform:
-      reverse === true
-        ? `translateX(${$q.lang.rtl === true ? '-' : ''}100%) scale3d(${-val},1,1)`
-        : `scale3d(${val},1,1)`
+    transform: reverse
+      ? `translateX(${$q.lang.rtl ? '-' : ''}100%) scale3d(${-val},1,1)`
+      : `scale3d(${val},1,1)`
   }
 }
 
@@ -62,9 +61,7 @@ export default createComponent({
     const isDark = useDark(props, proxy.$q)
     const sizeStyle = useSize(props, defaultSizes)
 
-    const motion = computed(
-      () => props.indeterminate === true || props.query === true
-    )
+    const motion = computed(() => props.indeterminate || props.query)
     const widthReverse = computed(() => props.reverse !== props.query)
     const style = computed(() => ({
       ...(sizeStyle.value !== null ? sizeStyle.value : {}),
@@ -75,10 +72,8 @@ export default createComponent({
       () =>
         'q-linear-progress' +
         (props.color !== void 0 ? ` text-${props.color}` : '') +
-        (props.reverse === true || props.query === true
-          ? ' q-linear-progress--reverse'
-          : '') +
-        (props.rounded === true ? ' rounded-borders' : '')
+        (props.reverse || props.query ? ' q-linear-progress--reverse' : '') +
+        (props.rounded ? ' rounded-borders' : '')
     )
 
     const trackStyle = computed(() =>
@@ -89,35 +84,31 @@ export default createComponent({
       )
     )
     const transitionSuffix = computed(
-      () => `with${props.instantFeedback === true ? 'out' : ''}-transition`
+      () => `with${props.instantFeedback ? 'out' : ''}-transition`
     )
 
     const trackClass = computed(
       () =>
         'q-linear-progress__track absolute-full' +
         ` q-linear-progress__track--${transitionSuffix.value}` +
-        ` q-linear-progress__track--${isDark.value === true ? 'dark' : 'light'}` +
+        ` q-linear-progress__track--${isDark.value ? 'dark' : 'light'}` +
         (props.trackColor !== void 0 ? ` bg-${props.trackColor}` : '')
     )
 
     const modelStyle = computed(() =>
-      width(
-        motion.value === true ? 1 : props.value,
-        widthReverse.value,
-        proxy.$q
-      )
+      width(motion.value ? 1 : props.value, widthReverse.value, proxy.$q)
     )
     const modelClass = computed(
       () =>
         'q-linear-progress__model absolute-full' +
         ` q-linear-progress__model--${transitionSuffix.value}` +
-        ` q-linear-progress__model--${motion.value === true ? 'in' : ''}determinate`
+        ` q-linear-progress__model--${motion.value ? 'in' : ''}determinate`
     )
 
     const stripeStyle = computed(() => ({ width: `${props.value * 100}%` }))
     const stripeClass = computed(
       () =>
-        `q-linear-progress__stripe absolute-${props.reverse === true ? 'right' : 'left'}` +
+        `q-linear-progress__stripe absolute-${props.reverse ? 'right' : 'left'}` +
         ` q-linear-progress__stripe--${transitionSuffix.value}`
     )
 
@@ -134,7 +125,7 @@ export default createComponent({
         })
       ]
 
-      if (props.stripe === true && motion.value === false) {
+      if (props.stripe && !motion.value) {
         child.push(
           h('div', {
             class: stripeClass.value,
@@ -151,7 +142,7 @@ export default createComponent({
           role: 'progressbar',
           'aria-valuemin': 0,
           'aria-valuemax': 1,
-          'aria-valuenow': props.indeterminate === true ? void 0 : props.value
+          'aria-valuenow': props.indeterminate ? void 0 : props.value
         },
         hMergeSlot(slots.default, child)
       )