quasar 2.19.2 → 2.20.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/spinner/use-spinner.test.js

@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest'
+import { describe, expect, test } from 'vitest'
 
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 import { useSizeDefaults } from 'quasar/src/composables/private.use-size/use-size.js'

package/src/components/splitter/QSplitter.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, nextTick, ref, watch } from 'vue'
 
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
@@ -7,7 +7,7 @@ import useDark, {
 } from '../../composables/private.use-dark/use-dark.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import { hSlot, hMergeSlot, hDir } from '../../utils/private.render/render.js'
+import { hDir, hMergeSlot, hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QSplitter',
@@ -64,15 +64,13 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-splitter no-wrap ' +
-        `${props.horizontal === true ? 'q-splitter--horizontal column' : 'q-splitter--vertical row'}` +
-        ` q-splitter--${props.disable === true ? 'disabled' : 'workable'}` +
-        (isDark.value === true ? ' q-splitter--dark' : '')
+        `${props.horizontal ? 'q-splitter--horizontal column' : 'q-splitter--vertical row'}` +
+        ` q-splitter--${props.disable ? 'disabled' : 'workable'}` +
+        (isDark.value ? ' q-splitter--dark' : '')
     )
 
-    const propName = computed(() =>
-      props.horizontal === true ? 'height' : 'width'
-    )
-    const side = computed(() => (props.reverse !== true ? 'before' : 'after'))
+    const propName = computed(() => (props.horizontal ? 'height' : 'width'))
+    const side = computed(() => (props.reverse ? 'after' : 'before'))
 
     const computedLimits = computed(() =>
       props.limits !== void 0
@@ -95,10 +93,10 @@ export default createComponent({
     let __dir, __maxValue, __value, __multiplier, __normalized
 
     function pan(evt) {
-      if (evt.isFirst === true) {
+      if (evt.isFirst) {
         const size = rootRef.value.getBoundingClientRect()[propName.value]
 
-        __dir = props.horizontal === true ? 'up' : 'left'
+        __dir = props.horizontal ? 'up' : 'left'
         __maxValue = props.unit === '%' ? 100 : size
         __value = Math.min(
           __maxValue,
@@ -106,15 +104,15 @@ export default createComponent({
           Math.max(computedLimits.value[0], props.modelValue)
         )
         __multiplier =
-          (props.reverse !== true ? 1 : -1) *
-          (props.horizontal === true ? 1 : $q.lang.rtl === true ? -1 : 1) *
+          (props.reverse ? -1 : 1) *
+          (props.horizontal ? 1 : $q.lang.rtl ? -1 : 1) *
           (props.unit === '%' ? (size === 0 ? 0 : 100 / size) : 1)
 
         rootRef.value.classList.add('q-splitter--active')
         return
       }
 
-      if (evt.isFinal === true) {
+      if (evt.isFinal) {
         if (__normalized !== props.modelValue) {
           emit('update:modelValue', __normalized)
         }
@@ -127,7 +125,7 @@ export default createComponent({
         __value +
         __multiplier *
           (evt.direction === __dir ? -1 : 1) *
-          evt.distance[props.horizontal === true ? 'y' : 'x']
+          evt.distance[props.horizontal ? 'y' : 'x']
 
       __normalized = Math.min(
         __maxValue,
@@ -138,7 +136,7 @@ export default createComponent({
       sideRefs[side.value].value.style[propName.value] =
         getCSSValue(__normalized)
 
-      if (props.emitImmediately === true && props.modelValue !== __normalized) {
+      if (props.emitImmediately && props.modelValue !== __normalized) {
         emit('update:modelValue', __normalized)
       }
     }
@@ -149,7 +147,7 @@ export default createComponent({
         pan,
         void 0,
         {
-          [props.horizontal === true ? 'vertical' : 'horizontal']: true,
+          [props.horizontal ? 'vertical' : 'horizontal']: true,
           prevent: true,
           stop: true,
           mouse: true,
@@ -190,7 +188,7 @@ export default createComponent({
             ref: sideRefs.before,
             class: [
               'q-splitter__panel q-splitter__before' +
-                (props.reverse === true ? ' col' : ''),
+                (props.reverse ? ' col' : ''),
               props.beforeClass
             ],
             style: styles.value.before
@@ -203,7 +201,7 @@ export default createComponent({
           {
             class: ['q-splitter__separator', props.separatorClass],
             style: props.separatorStyle,
-            'aria-disabled': props.disable === true ? 'true' : void 0
+            'aria-disabled': props.disable ? 'true' : void 0
           },
           [
             hDir(
@@ -211,7 +209,7 @@ export default createComponent({
               { class: 'q-splitter__separator-area absolute-full' },
               hSlot(slots.separator),
               'sep',
-              props.disable !== true,
+              !props.disable,
               () => sepDirective.value
             )
           ]
@@ -223,7 +221,7 @@ export default createComponent({
             ref: sideRefs.after,
             class: [
               'q-splitter__panel q-splitter__after' +
-                (props.reverse === true ? '' : ' col'),
+                (props.reverse ? '' : ' col'),
               props.afterClass
             ],
             style: styles.value.after

package/src/components/stepper/QStep.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, inject, getCurrentInstance, KeepAlive } from 'vue'
+import { KeepAlive, computed, getCurrentInstance, h, inject, ref } from 'vue'
 
 import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import StepHeader from './StepHeader.js'
@@ -8,8 +8,8 @@ import useRenderCache from '../../composables/use-render-cache/use-render-cache.
 
 import { createComponent } from '../../utils/private.create/create.js'
 import {
-  stepperKey,
-  emptyRenderFn
+  emptyRenderFn,
+  stepperKey
 } from '../../utils/private.symbols/symbols.js'
 import { hSlot } from '../../utils/private.render/render.js'
 
@@ -87,9 +87,9 @@ export default createComponent({
     const isActive = computed(() => $stepper.value.modelValue === props.name)
 
     const scrollEvent = computed(() =>
-      ($q.platform.is.ios !== true && $q.platform.is.chrome === true) ||
-      isActive.value !== true ||
-      $stepper.value.vertical !== true
+      (!$q.platform.is.ios && $q.platform.is.chrome) ||
+      !isActive.value ||
+      !$stepper.value.vertical
         ? {}
         : {
             onScroll(e) {
@@ -112,14 +112,14 @@ export default createComponent({
     function getStepContent() {
       const vertical = $stepper.value.vertical
 
-      if (vertical === true && $stepper.value.keepAlive === true) {
+      if (vertical && $stepper.value.keepAlive) {
         return h(
           KeepAlive,
           $stepper.value.keepAliveProps.value,
-          isActive.value === true
+          isActive.value
             ? [
                 h(
-                  $stepper.value.needsUniqueKeepAliveWrapper.value === true
+                  $stepper.value.needsUniqueKeepAliveWrapper.value
                     ? getCache(contentKey.value, () => ({
                         ...PanelWrapper,
                         name: contentKey.value
@@ -133,9 +133,7 @@ export default createComponent({
         )
       }
 
-      return vertical !== true || isActive.value === true
-        ? getStepWrapper(slots)
-        : void 0
+      return !vertical || isActive.value ? getStepWrapper(slots) : void 0
     }
 
     return () =>
@@ -147,7 +145,7 @@ export default createComponent({
           role: 'tabpanel',
           ...scrollEvent.value
         },
-        $stepper.value.vertical === true
+        $stepper.value.vertical
           ? [
               h(StepHeader, {
                 stepper: $stepper.value,
@@ -155,7 +153,7 @@ export default createComponent({
                 goToPanel: $stepper.value.goToPanel
               }),
 
-              $stepper.value.animated === true
+              $stepper.value.animated
                 ? h(QSlideTransition, getStepContent)
                 : getStepContent()
             ]

package/src/components/stepper/QStepper.js

@@ -1,4 +1,4 @@
-import { h, computed, provide, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, provide } from 'vue'
 
 import StepHeader from './StepHeader.js'
 
@@ -6,13 +6,13 @@ import useDark, {
   useDarkProps
 } from '../../composables/private.use-dark/use-dark.js'
 import usePanel, {
-  usePanelProps,
-  usePanelEmits
+  usePanelEmits,
+  usePanelProps
 } from '../../composables/private.use-panel/use-panel.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { stepperKey } from '../../utils/private.symbols/symbols.js'
-import { hSlot, hMergeSlot, hDir } from '../../utils/private.render/render.js'
+import { hDir, hMergeSlot, hSlot } from '../../utils/private.render/render.js'
 
 const camelRE = /(-\w)/g
 
@@ -79,27 +79,25 @@ export default createComponent({
 
     const classes = computed(
       () =>
-        `q-stepper q-stepper--${props.vertical === true ? 'vertical' : 'horizontal'}` +
-        (props.flat === true ? ' q-stepper--flat' : '') +
-        (props.bordered === true ? ' q-stepper--bordered' : '') +
-        (isDark.value === true ? ' q-stepper--dark q-dark' : '')
+        `q-stepper q-stepper--${props.vertical ? 'vertical' : 'horizontal'}` +
+        (props.flat ? ' q-stepper--flat' : '') +
+        (props.bordered ? ' q-stepper--bordered' : '') +
+        (isDark.value ? ' q-stepper--dark q-dark' : '')
     )
 
     const headerClasses = computed(
       () =>
         'q-stepper__header row items-stretch justify-between' +
-        ` q-stepper__header--${props.alternativeLabels === true ? 'alternative' : 'standard'}-labels` +
-        (props.flat === false || props.bordered === true
-          ? ' q-stepper__header--border'
-          : '') +
-        (props.contracted === true ? ' q-stepper__header--contracted' : '') +
+        ` q-stepper__header--${props.alternativeLabels ? 'alternative' : 'standard'}-labels` +
+        (props.bordered || !props.flat ? ' q-stepper__header--border' : '') +
+        (props.contracted ? ' q-stepper__header--contracted' : '') +
         (props.headerClass !== void 0 ? ` ${props.headerClass}` : '')
     )
 
     function getContent() {
       const top = hSlot(slots.message, [])
 
-      if (props.vertical === true) {
+      if (props.vertical) {
         if (isValidPanelName(props.modelValue)) updatePanelIndex()
 
         const content = h(
@@ -110,6 +108,7 @@ export default createComponent({
           hSlot(slots.default)
         )
 
+        // oxlint-disable-next-line unicorn/prefer-spread
         return top === void 0 ? [content] : top.concat(content)
       }
 

package/src/components/stepper/StepHeader.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, withDirectives, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, ref, withDirectives } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 import Ripple from '../../directives/ripple/Ripple.js'
@@ -36,42 +36,44 @@ export default createComponent({
 
     const isDone = computed(() => {
       const opt = props.step.done
-      return isDisable.value === false && (opt === true || opt === '')
+      return !isDisable.value && (opt === true || opt === '')
     })
 
     const headerNav = computed(() => {
-      const opt = props.step.headerNav,
-        nav = opt === true || opt === '' || opt === void 0
-
-      return isDisable.value === false && props.stepper.headerNav && nav
+      const opt = props.step.headerNav
+      return (
+        !isDisable.value &&
+        props.stepper.headerNav &&
+        (opt === true || opt === '' || opt === void 0)
+      )
     })
 
     const hasPrefix = computed(
       () =>
         props.step.prefix &&
-        (isActive.value === false || props.stepper.activeIcon === 'none') &&
-        (isError.value === false || props.stepper.errorIcon === 'none') &&
-        (isDone.value === false || props.stepper.doneIcon === 'none')
+        (!isActive.value || props.stepper.activeIcon === 'none') &&
+        (!isError.value || props.stepper.errorIcon === 'none') &&
+        (!isDone.value || props.stepper.doneIcon === 'none')
     )
 
     const icon = computed(() => {
       const defaultIcon = props.step.icon || props.stepper.inactiveIcon
 
-      if (isActive.value === true) {
+      if (isActive.value) {
         const localIcon = props.step.activeIcon || props.stepper.activeIcon
         return localIcon === 'none'
           ? defaultIcon
           : localIcon || $q.iconSet.stepper.active
       }
 
-      if (isError.value === true) {
+      if (isError.value) {
         const localIcon = props.step.errorIcon || props.stepper.errorIcon
         return localIcon === 'none'
           ? defaultIcon
           : localIcon || $q.iconSet.stepper.error
       }
 
-      if (isDisable.value === false && isDone.value === true) {
+      if (!isDisable.value && isDone.value) {
         const localIcon = props.step.doneIcon || props.stepper.doneIcon
         return localIcon === 'none'
           ? defaultIcon
@@ -82,22 +84,21 @@ export default createComponent({
     })
 
     const color = computed(() => {
-      const errorColor =
-        isError.value === true
-          ? props.step.errorColor || props.stepper.errorColor
-          : void 0
+      const errorColor = isError.value
+        ? props.step.errorColor || props.stepper.errorColor
+        : void 0
 
-      if (isActive.value === true) {
+      if (isActive.value) {
         const localColor =
           props.step.activeColor ||
           props.stepper.activeColor ||
           props.step.color
         return localColor !== void 0 ? localColor : errorColor
       }
-      if (errorColor !== void 0) {
-        return errorColor
-      }
-      if (isDisable.value === false && isDone.value === true) {
+
+      if (errorColor !== void 0) return errorColor
+
+      if (!isDisable.value && isDone.value) {
         return (
           props.step.doneColor ||
           props.stepper.doneColor ||
@@ -113,29 +114,27 @@ export default createComponent({
       () =>
         'q-stepper__tab col-grow flex items-center no-wrap relative-position' +
         (color.value !== void 0 ? ` text-${color.value}` : '') +
-        (isError.value === true
+        (isError.value
           ? ' q-stepper__tab--error q-stepper__tab--error-with-' +
-            (hasPrefix.value === true ? 'prefix' : 'icon')
+            (hasPrefix.value ? 'prefix' : 'icon')
           : '') +
-        (isActive.value === true ? ' q-stepper__tab--active' : '') +
-        (isDone.value === true ? ' q-stepper__tab--done' : '') +
-        (headerNav.value === true
+        (isActive.value ? ' q-stepper__tab--active' : '') +
+        (isDone.value ? ' q-stepper__tab--done' : '') +
+        (headerNav.value
           ? ' q-stepper__tab--navigation q-focusable q-hoverable'
           : '') +
-        (isDisable.value === true ? ' q-stepper__tab--disabled' : '')
+        (isDisable.value ? ' q-stepper__tab--disabled' : '')
     )
 
-    const ripple = computed(() =>
-      props.stepper.headerNav !== true ? false : headerNav.value
-    )
+    const ripple = computed(() => props.stepper.headerNav && headerNav.value)
 
     function onActivate() {
       blurRef.value?.focus()
-      if (isActive.value === false) props.goToPanel(props.step.name)
+      if (!isActive.value) props.goToPanel(props.step.name)
     }
 
     function onKeyup(e) {
-      if (e.keyCode === 13 && isActive.value === false) {
+      if (e.keyCode === 13 && !isActive.value) {
         props.goToPanel(props.step.name)
       }
     }
@@ -143,13 +142,13 @@ export default createComponent({
     return () => {
       const data = { class: classes.value }
 
-      if (headerNav.value === true) {
+      if (headerNav.value) {
         data.onClick = onActivate
         data.onKeyup = onKeyup
 
         Object.assign(
           data,
-          isDisable.value === true
+          isDisable.value
             ? { tabindex: -1, 'aria-disabled': 'true' }
             : { tabindex: attrs.tabindex || 0 }
         )
@@ -166,7 +165,7 @@ export default createComponent({
           },
           [
             h('span', { class: 'row flex-center' }, [
-              hasPrefix.value === true
+              hasPrefix.value
                 ? props.step.prefix
                 : h(QIcon, { name: icon.value })
             ])

package/src/components/tab-panels/QTabPanels.js

@@ -4,8 +4,8 @@ import useDark, {
   useDarkProps
 } from '../../composables/private.use-dark/use-dark.js'
 import usePanel, {
-  usePanelProps,
-  usePanelEmits
+  usePanelEmits,
+  usePanelProps
 } from '../../composables/private.use-panel/use-panel.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
@@ -30,7 +30,7 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-tab-panels q-panel-parent' +
-        (isDark.value === true ? ' q-tab-panels--dark q-dark' : '')
+        (isDark.value ? ' q-tab-panels--dark q-dark' : '')
     )
 
     return () => {