quasar 2.19.2 → 2.20.0

package/src/components/separator/QSeparator.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import useDark, {
   useDarkProps
@@ -38,32 +38,30 @@ export default createComponent({
     const isDark = useDark(props, vm.proxy.$q)
 
     const orientation = computed(() =>
-      props.vertical === true ? 'vertical' : 'horizontal'
+      props.vertical ? 'vertical' : 'horizontal'
     )
 
     const orientClass = computed(() => ` q-separator--${orientation.value}`)
 
     const insetClass = computed(() =>
-      props.inset !== false
-        ? `${orientClass.value}-${insetMap[props.inset]}`
-        : ''
+      props.inset ? `${orientClass.value}-${insetMap[props.inset]}` : ''
     )
 
     const classes = computed(
       () =>
         `q-separator${orientClass.value}${insetClass.value}` +
         (props.color !== void 0 ? ` bg-${props.color}` : '') +
-        (isDark.value === true ? ' q-separator--dark' : '')
+        (isDark.value ? ' q-separator--dark' : '')
     )
 
     const style = computed(() => {
       const acc = {}
 
       if (props.size !== void 0) {
-        acc[props.vertical === true ? 'width' : 'height'] = props.size
+        acc[props.vertical ? 'width' : 'height'] = props.size
       }
 
-      if (props.spaced !== false) {
+      if (props.spaced) {
         const size =
           props.spaced === true
             ? `${margins.md}px`
@@ -71,8 +69,7 @@ export default createComponent({
               ? `${margins[props.spaced]}px`
               : props.spaced
 
-        const dir =
-          props.vertical === true ? ['Left', 'Right'] : ['Top', 'Bottom']
+        const dir = props.vertical ? ['Left', 'Right'] : ['Top', 'Bottom']
 
         acc[`margin${dir[0]}`] = acc[`margin${dir[1]}`] = size
       }

package/src/components/skeleton/QSkeleton.js

@@ -1,4 +1,4 @@
-import { h, computed, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h } from 'vue'
 
 import useDark, {
   useDarkProps
@@ -88,12 +88,12 @@ export default createComponent({
 
     const classes = computed(
       () =>
-        `q-skeleton q-skeleton--${isDark.value === true ? 'dark' : 'light'} q-skeleton--type-${props.type}` +
+        `q-skeleton q-skeleton--${isDark.value ? 'dark' : 'light'} q-skeleton--type-${props.type}` +
         (props.animation !== 'none'
           ? ` q-skeleton--anim q-skeleton--anim-${props.animation}`
           : '') +
-        (props.square === true ? ' q-skeleton--square' : '') +
-        (props.bordered === true ? ' q-skeleton--bordered' : '')
+        (props.square ? ' q-skeleton--square' : '') +
+        (props.bordered ? ' q-skeleton--bordered' : '')
     )
 
     return () =>

package/src/components/slide-item/QSlideItem.js

@@ -1,11 +1,11 @@
 import {
-  h,
-  ref,
   computed,
-  withDirectives,
+  getCurrentInstance,
+  h,
   onBeforeUnmount,
   onBeforeUpdate,
-  getCurrentInstance
+  ref,
+  withDirectives
 } from 'vue'
 
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
@@ -56,7 +56,7 @@ export default createComponent({
       dirContentRefs = {}
 
     const langDir = computed(() =>
-      $q.lang.rtl === true
+      $q.lang.rtl
         ? { left: 'right', right: 'left' }
         : { left: 'left', right: 'right' }
     )
@@ -64,7 +64,7 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-slide-item q-item-type overflow-hidden' +
-        (isDark.value === true ? ' q-slide-item--dark q-dark' : '')
+        (isDark.value ? ' q-slide-item--dark q-dark' : '')
     )
 
     function reset() {
@@ -189,7 +189,7 @@ export default createComponent({
           up: slots.bottom !== void 0,
           down: slots.top !== void 0
         },
-        dirs = Object.keys(slotsList).filter(key => slotsList[key] === true)
+        dirs = Object.keys(slotsList).filter(key => slotsList[key])
 
       slotsDef.forEach(slotName => {
         const dir = slotName[0]

package/src/components/slide-transition/QSlideTransition.js

@@ -1,4 +1,4 @@
-import { h, onBeforeUnmount, Transition } from 'vue'
+import { Transition, h, onBeforeUnmount } from 'vue'
 
 import { createComponent } from '../../utils/private.create/create.js'
 
@@ -67,7 +67,7 @@ export default createComponent({
       element = el
 
       // if animationg overflowY is already 'hidden'
-      if (animating === true) {
+      if (animating) {
         cleanup()
         pos = el.offsetHeight === el.scrollHeight ? 0 : void 0
       } else {
@@ -96,7 +96,7 @@ export default createComponent({
       let pos
       element = el
 
-      if (animating === true) {
+      if (animating) {
         cleanup()
       } else {
         lastEvent = 'show'
@@ -124,7 +124,7 @@ export default createComponent({
     }
 
     onBeforeUnmount(() => {
-      if (animating === true) cleanup()
+      if (animating) cleanup()
     })
 
     return () =>

package/src/components/slider/QSlider.js

@@ -1,11 +1,11 @@
-import { h, ref, computed, watch, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, ref, watch } from 'vue'
 
 import { useFormAttrs } from '../../composables/use-form/private.use-form.js'
 
 import useSlider, {
-  useSliderProps,
+  keyCodes,
   useSliderEmits,
-  keyCodes
+  useSliderProps
 } from './use-slider.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
@@ -61,14 +61,13 @@ export default createComponent({
     watch(
       () =>
         `${props.modelValue}|${state.innerMin.value}|${state.innerMax.value}`,
-      normalizeModel
+      normalizeModel,
+      { immediate: true }
     )
 
-    normalizeModel()
-
     const modelRatio = computed(() => methods.convertModelToRatio(model.value))
     const ratio = computed(() =>
-      state.active.value === true ? curRatio.value : modelRatio.value
+      state.active.value ? curRatio.value : modelRatio.value
     )
 
     const selectionBarStyle = computed(() => {
@@ -96,11 +95,9 @@ export default createComponent({
     })
 
     const trackContainerEvents = computed(() => {
-      if (state.editable.value !== true) {
-        return {}
-      }
+      if (!state.editable.value) return {}
 
-      return $q.platform.is.mobile === true
+      return $q.platform.is.mobile
         ? { onClick: methods.onMobileClick }
         : {
             onMousedown: methods.onActivate,
@@ -116,7 +113,7 @@ export default createComponent({
         emit('update:modelValue', model.value)
       }
 
-      if (change === true) emit('change', model.value)
+      if (change) emit('change', model.value)
     }
 
     function getDragging() {
@@ -129,7 +126,7 @@ export default createComponent({
       model.value = methods.convertRatioToModel(localRatio)
 
       curRatio.value =
-        props.snap !== true || props.step === 0
+        !props.snap || props.step === 0
           ? localRatio
           : methods.convertModelToRatio(model.value)
     }
@@ -139,7 +136,7 @@ export default createComponent({
     }
 
     function onKeydown(evt) {
-      if (keyCodes.includes(evt.keyCode) === false) return
+      if (!keyCodes.includes(evt.keyCode)) return
 
       stopAndPrevent(evt)
 
@@ -147,8 +144,8 @@ export default createComponent({
           ([34, 33].includes(evt.keyCode) ? 10 : 1) * state.keyStep.value,
         offset =
           ([34, 37, 40].includes(evt.keyCode) ? -1 : 1) *
-          (state.isReversed.value === true ? -1 : 1) *
-          (props.vertical === true ? -1 : 1) *
+          (state.isReversed.value ? -1 : 1) *
+          (props.vertical ? -1 : 1) *
           stepVal
 
       model.value = between(

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

@@ -1,4 +1,4 @@
-import { h, ref, computed, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, onBeforeUnmount, ref } from 'vue'
 
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
@@ -6,8 +6,8 @@ import useDark, {
   useDarkProps
 } from '../../composables/private.use-dark/use-dark.js'
 import {
-  useFormProps,
-  useFormInject
+  useFormInject,
+  useFormProps
 } from '../../composables/use-form/private.use-form.js'
 
 import { between } from '../../utils/format/format.js'
@@ -122,48 +122,39 @@ export default function useSlider({
   const focus = ref(false)
   const dragging = ref(false)
 
-  const axis = computed(() => (props.vertical === true ? '--v' : '--h'))
+  const axis = computed(() => (props.vertical ? '--v' : '--h'))
   const labelSide = computed(
-    () => '-' + (props.switchLabelSide === true ? 'switched' : 'standard')
+    () => '-' + (props.switchLabelSide ? 'switched' : 'standard')
   )
 
   const isReversed = computed(() =>
-    props.vertical === true
-      ? props.reverse === true
-      : props.reverse !== ($q.lang.rtl === true)
+    props.vertical ? props.reverse : props.reverse !== ($q.lang.rtl === true)
   )
 
   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
   )
 
   const editable = computed(
-    () =>
-      props.disable !== true &&
-      props.readonly !== true &&
-      innerMin.value < innerMax.value
+    () => !props.disable && !props.readonly && innerMin.value < innerMax.value
   )
 
   const roundValueFn = computed(() => {
-    if (props.step === 0) {
-      return v => v
-    }
+    if (props.step === 0) return v => v
 
     const decimals = (String(props.step).trim().split('.')[1] || '').length
-    return v => parseFloat(v.toFixed(decimals))
+    return v => Number.parseFloat(v.toFixed(decimals))
   })
 
   const keyStep = computed(() => (props.step === 0 ? 1 : props.step))
-  const tabindex = computed(() =>
-    editable.value === true ? props.tabindex || 0 : -1
-  )
+  const tabindex = computed(() => (editable.value ? props.tabindex || 0 : -1))
 
   const trackLen = computed(() => props.max - props.min)
   const innerBarLen = computed(() => innerMax.value - innerMin.value)
@@ -172,23 +163,19 @@ export default function useSlider({
   const innerMaxRatio = computed(() => convertModelToRatio(innerMax.value))
 
   const positionProp = computed(() =>
-    props.vertical === true
-      ? isReversed.value === true
+    props.vertical
+      ? isReversed.value
         ? 'bottom'
         : 'top'
-      : isReversed.value === true
+      : isReversed.value
         ? 'right'
         : 'left'
   )
 
-  const sizeProp = computed(() =>
-    props.vertical === true ? 'height' : 'width'
-  )
-  const thicknessProp = computed(() =>
-    props.vertical === true ? 'width' : 'height'
-  )
+  const sizeProp = computed(() => (props.vertical ? 'height' : 'width'))
+  const thicknessProp = computed(() => (props.vertical ? 'width' : 'height'))
   const orientation = computed(() =>
-    props.vertical === true ? 'vertical' : 'horizontal'
+    props.vertical ? 'vertical' : 'horizontal'
   )
 
   const attributes = computed(() => {
@@ -200,9 +187,9 @@ export default function useSlider({
       'data-step': props.step
     }
 
-    if (props.disable === true) {
+    if (props.disable) {
       acc['aria-disabled'] = 'true'
-    } else if (props.readonly === true) {
+    } else if (props.readonly) {
       acc['aria-readonly'] = 'true'
     }
 
@@ -211,19 +198,17 @@ export default function useSlider({
 
   const classes = computed(
     () =>
-      `q-slider q-slider${axis.value} q-slider--${active.value === true ? '' : 'in'}active inline no-wrap ` +
-      (props.vertical === true ? 'row' : 'column') +
-      (props.disable === true
+      `q-slider q-slider${axis.value} q-slider--${active.value ? '' : 'in'}active inline no-wrap ` +
+      (props.vertical ? 'row' : 'column') +
+      (props.disable
         ? ' disabled'
         : ' q-slider--enabled' +
-          (editable.value === true ? ' q-slider--editable' : '')) +
+          (editable.value ? ' q-slider--editable' : '')) +
       (focus.value === 'both' ? ' q-slider--focus' : '') +
-      (props.label || props.labelAlways === true ? ' q-slider--label' : '') +
-      (props.labelAlways === true ? ' q-slider--label-always' : '') +
-      (isDark.value === true ? ' q-slider--dark' : '') +
-      (props.dense === true
-        ? ' q-slider--dense q-slider--dense' + axis.value
-        : '')
+      (props.label || props.labelAlways ? ' q-slider--label' : '') +
+      (props.labelAlways ? ' q-slider--label-always' : '') +
+      (isDark.value ? ' q-slider--dark' : '') +
+      (props.dense ? ' q-slider--dense q-slider--dense' + axis.value : '')
   )
 
   function getPositionClass(name) {
@@ -307,20 +292,19 @@ export default function useSlider({
 
   function getDraggingRatio(evt, draggingInfo) {
     const pos = position(evt),
-      val =
-        props.vertical === true
-          ? between((pos.top - draggingInfo.top) / draggingInfo.height, 0, 1)
-          : between((pos.left - draggingInfo.left) / draggingInfo.width, 0, 1)
+      val = props.vertical
+        ? between((pos.top - draggingInfo.top) / draggingInfo.height, 0, 1)
+        : between((pos.left - draggingInfo.left) / draggingInfo.width, 0, 1)
 
     return between(
-      isReversed.value === true ? 1.0 - val : val,
+      isReversed.value ? 1 - val : val,
       innerMinRatio.value,
       innerMaxRatio.value
     )
   }
 
   const markerStep = computed(() =>
-    isNumber(props.markers) === true ? props.markers : keyStep.value
+    isNumber(props.markers) ? props.markers : keyStep.value
   )
 
   const markerTicks = computed(() => {
@@ -342,15 +326,13 @@ export default function useSlider({
     const prefix = ` ${markerPrefixClass}${axis.value}-`
     return (
       markerPrefixClass +
-      `${prefix}${props.switchMarkerLabelsSide === true ? 'switched' : 'standard'}` +
-      `${prefix}${isReversed.value === true ? 'rtl' : 'ltr'}`
+      `${prefix}${props.switchMarkerLabelsSide ? 'switched' : 'standard'}` +
+      `${prefix}${isReversed.value ? 'rtl' : 'ltr'}`
     )
   })
 
   const markerLabelsList = computed(() => {
-    if (props.markerLabels === false) {
-      return null
-    }
+    if (props.markerLabels === false) return null
 
     return getMarkerList(props.markerLabels).map((entry, index) => ({
       index,
@@ -361,7 +343,7 @@ export default function useSlider({
         (entry.classes !== void 0 ? ' ' + entry.classes : ''),
       style: {
         ...getMarkerLabelStyle(entry.value),
-        ...(entry.style || {})
+        ...entry.style
       }
     }))
   })
@@ -381,14 +363,12 @@ export default function useSlider({
 
     return {
       ...innerBarStyle.value,
-      backgroundSize: props.vertical === true ? `2px ${size}%` : `${size}% 2px`
+      backgroundSize: props.vertical ? `2px ${size}%` : `${size}% 2px`
     }
   })
 
   function getMarkerList(def) {
-    if (def === false) {
-      return null
-    }
+    if (def === false) return null
 
     if (def === true) {
       return markerTicks.value.map(defaultMarkerConvertFn)
@@ -397,17 +377,15 @@ export default function useSlider({
     if (typeof def === 'function') {
       return markerTicks.value.map(value => {
         const item = def(value)
-        return isObject(item) === true
-          ? { ...item, value }
-          : { value, label: item }
+        return isObject(item) ? { ...item, value } : { value, label: item }
       })
     }
 
     const filterFn = ({ value }) => value >= props.min && value <= props.max
 
-    if (Array.isArray(def) === true) {
+    if (Array.isArray(def)) {
       return def
-        .map(item => (isObject(item) === true ? item : { value: item }))
+        .map(item => (isObject(item) ? item : { value: item }))
         .filter(filterFn)
     }
 
@@ -415,9 +393,7 @@ export default function useSlider({
       .map(key => {
         const item = def[key]
         const value = Number(key)
-        return isObject(item) === true
-          ? { ...item, value }
-          : { value, label: item }
+        return isObject(item) ? { ...item, value } : { value, label: item }
       })
       .filter(filterFn)
   }
@@ -429,9 +405,7 @@ export default function useSlider({
   }
 
   const markerLabelsMap = computed(() => {
-    if (props.markerLabels === false) {
-      return null
-    }
+    if (props.markerLabels === false) return null
 
     const acc = {}
     markerLabelsList.value.forEach(entry => {
@@ -470,17 +444,17 @@ export default function useSlider({
   ])
 
   function onPan(event) {
-    if (event.isFinal === true) {
+    if (event.isFinal) {
       if (dragging.value !== void 0) {
         updatePosition(event.evt)
         // only if touch, because we also have mousedown/up:
-        if (event.touch === true) updateValue(true)
+        if (event.touch) updateValue(true)
         dragging.value = void 0
         emit('pan', 'end')
       }
       active.value = false
       focus.value = false
-    } else if (event.isFirst === true) {
+    } else if (event.isFirst) {
       dragging.value = getDragging(event.evt)
       updatePosition(event.evt)
       updateValue()
@@ -528,9 +502,7 @@ export default function useSlider({
   }
 
   function getTextContainerStyle(ratio) {
-    if (props.vertical === true) {
-      return null
-    }
+    if (props.vertical) return null
 
     const p = $q.lang.rtl !== props.reverse ? 1 - ratio : ratio
     return {
@@ -540,7 +512,7 @@ export default function useSlider({
 
   function getThumbRenderFn(thumb) {
     const focusClass = computed(() =>
-      preventFocus.value === false &&
+      !preventFocus.value &&
       (focus.value === thumb.focusValue || focus.value === 'both')
         ? ' q-slider--focus'
         : ''
@@ -548,7 +520,7 @@ export default function useSlider({
 
     const thumbClasses = computed(
       () =>
-        `q-slider__thumb q-slider__thumb${axis.value} q-slider__thumb${axis.value}-${isReversed.value === true ? 'rtl' : 'ltr'} absolute non-selectable` +
+        `q-slider__thumb q-slider__thumb${axis.value} q-slider__thumb${axis.value}-${isReversed.value ? 'rtl' : 'ltr'} absolute non-selectable` +
         focusClass.value +
         (thumb.thumbColor.value !== void 0
           ? ` text-${thumb.thumbColor.value}`
@@ -593,7 +565,7 @@ export default function useSlider({
         h('div', { class: 'q-slider__focus-ring fit' })
       ]
 
-      if (props.label === true || props.labelAlways === true) {
+      if (props.label || props.labelAlways) {
         thumbContent.push(
           h(
             'div',
@@ -625,7 +597,7 @@ export default function useSlider({
           )
         )
 
-        if (props.name !== void 0 && props.disable !== true) {
+        if (props.name !== void 0 && !props.disable) {
           injectFormInput(thumbContent, 'push')
         }
       }
@@ -708,7 +680,7 @@ export default function useSlider({
     ]
 
     if (props.markerLabels !== false) {
-      const action = props.switchMarkerLabelsSide === true ? 'unshift' : 'push'
+      const action = props.switchMarkerLabelsSide ? 'unshift' : 'push'
 
       content[action](
         h(

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

@@ -69,7 +69,7 @@
       "type": "String",
       "desc": "Apply a pattern image on the track",
       "transformAssetUrls": true,
-      "examples": ["'~assets/my-pattern.png'"],
+      "examples": ["'~@/assets/my-pattern.png'"],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -84,7 +84,7 @@
       "type": "String",
       "desc": "Apply a pattern image on the inner track",
       "transformAssetUrls": true,
-      "examples": ["'~assets/my-pattern.png'"],
+      "examples": ["'~@/assets/my-pattern.png'"],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -99,7 +99,7 @@
       "type": "String",
       "desc": "Apply a pattern image on the selection bar",
       "transformAssetUrls": true,
-      "examples": ["'~assets/my-pattern.png'"],
+      "examples": ["'~@/assets/my-pattern.png'"],
       "category": "style",
       "addedIn": "v2.4"
     },

package/src/components/space/QSpace.test.js

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

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

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

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

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

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

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

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

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