quasar 2.18.7 → 2.19.0

package/src/components/spinner/QSpinnerRadio.test.js

@@ -7,32 +7,24 @@ describe('[QSpinnerRadio API]', () => {
   describe('[Props]', () => {
     describe('[(prop)size]', () => {
       test.each([
-        [ 'String', '100px' ],
-        [ 'Number', 100 ]
+        ['String', '100px'],
+        ['Number', 100]
       ])('type %s has effect', async (_, propVal) => {
-        const expectedValue = '' + propVal
+        const expectedValue = String(propVal)
         const wrapper = mount(QSpinnerRadio)
 
         const target = wrapper.get('.q-spinner')
 
-        expect(
-          target.attributes('width')
-        ).not.toBe(expectedValue)
+        expect(target.attributes('width')).not.toBe(expectedValue)
 
-        expect(
-          target.attributes('height')
-        ).not.toBe(expectedValue)
+        expect(target.attributes('height')).not.toBe(expectedValue)
 
         await wrapper.setProps({ size: propVal })
         await flushPromises()
 
-        expect(
-          target.attributes('width')
-        ).toBe(expectedValue)
+        expect(target.attributes('width')).toBe(expectedValue)
 
-        expect(
-          target.attributes('height')
-        ).toBe(expectedValue)
+        expect(target.attributes('height')).toBe(expectedValue)
       })
     })
 
@@ -43,16 +35,12 @@ describe('[QSpinnerRadio API]', () => {
 
         const target = wrapper.get('.q-spinner')
 
-        expect(
-          target.classes()
-        ).not.toContain('text-red')
+        expect(target.classes()).not.toContain('text-red')
 
         await wrapper.setProps({ color: propVal })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('text-red')
+        expect(target.classes()).toContain('text-red')
       })
     })
   })

package/src/components/spinner/QSpinnerRings.js

@@ -3,23 +3,25 @@ import { h } from 'vue'
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 import { createComponent } from '../../utils/private.create/create.js'
 
-const innerHTML = '<g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2"><circle cx="22" cy="22" r="6"><animate attributeName="r" begin="1.5s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="1.5s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-width" begin="1.5s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="6"><animate attributeName="r" begin="3s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="3s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-width" begin="3s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="8"><animate attributeName="r" begin="0s" dur="1.5s" values="6;1;2;3;4;5;6" calcMode="linear" repeatCount="indefinite"></animate></circle></g>'
+const innerHTML =
+  '<g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2"><circle cx="22" cy="22" r="6"><animate attributeName="r" begin="1.5s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="1.5s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-width" begin="1.5s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="6"><animate attributeName="r" begin="3s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="3s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="stroke-width" begin="3s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="22" cy="22" r="8"><animate attributeName="r" begin="0s" dur="1.5s" values="6;1;2;3;4;5;6" calcMode="linear" repeatCount="indefinite"></animate></circle></g>'
 
 export default createComponent({
   name: 'QSpinnerRings',
 
   props: useSpinnerProps,
 
-  setup (props) {
+  setup(props) {
     const { cSize, classes } = useSpinner(props)
-    return () => h('svg', {
-      class: classes.value,
-      stroke: 'currentColor',
-      width: cSize.value,
-      height: cSize.value,
-      viewBox: '0 0 45 45',
-      xmlns: 'http://www.w3.org/2000/svg',
-      innerHTML
-    })
+    return () =>
+      h('svg', {
+        class: classes.value,
+        stroke: 'currentColor',
+        width: cSize.value,
+        height: cSize.value,
+        viewBox: '0 0 45 45',
+        xmlns: 'http://www.w3.org/2000/svg',
+        innerHTML
+      })
   }
 })

package/src/components/spinner/QSpinnerRings.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/spinner" ]
+  "mixins": ["components/spinner/spinner"]
 }

package/src/components/spinner/QSpinnerRings.test.js

@@ -7,32 +7,24 @@ describe('[QSpinnerRings API]', () => {
   describe('[Props]', () => {
     describe('[(prop)size]', () => {
       test.each([
-        [ 'String', '100px' ],
-        [ 'Number', 100 ]
+        ['String', '100px'],
+        ['Number', 100]
       ])('type %s has effect', async (_, propVal) => {
-        const expectedValue = '' + propVal
+        const expectedValue = String(propVal)
         const wrapper = mount(QSpinnerRings)
 
         const target = wrapper.get('.q-spinner')
 
-        expect(
-          target.attributes('width')
-        ).not.toBe(expectedValue)
+        expect(target.attributes('width')).not.toBe(expectedValue)
 
-        expect(
-          target.attributes('height')
-        ).not.toBe(expectedValue)
+        expect(target.attributes('height')).not.toBe(expectedValue)
 
         await wrapper.setProps({ size: propVal })
         await flushPromises()
 
-        expect(
-          target.attributes('width')
-        ).toBe(expectedValue)
+        expect(target.attributes('width')).toBe(expectedValue)
 
-        expect(
-          target.attributes('height')
-        ).toBe(expectedValue)
+        expect(target.attributes('height')).toBe(expectedValue)
       })
     })
 
@@ -43,16 +35,12 @@ describe('[QSpinnerRings API]', () => {
 
         const target = wrapper.get('.q-spinner')
 
-        expect(
-          target.classes()
-        ).not.toContain('text-red')
+        expect(target.classes()).not.toContain('text-red')
 
         await wrapper.setProps({ color: propVal })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('text-red')
+        expect(target.classes()).toContain('text-red')
       })
     })
   })

package/src/components/spinner/QSpinnerTail.js

@@ -3,22 +3,24 @@ import { h } from 'vue'
 import useSpinner, { useSpinnerProps } from './use-spinner.js'
 import { createComponent } from '../../utils/private.create/create.js'
 
-const innerHTML = '<defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="currentColor" stop-opacity="0" offset="0%"></stop><stop stop-color="currentColor" stop-opacity=".631" offset="63.146%"></stop><stop stop-color="currentColor" offset="100%"></stop></linearGradient></defs><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"></animateTransform></path><circle fill="currentColor" cx="36" cy="18" r="1"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"></animateTransform></circle></g>'
+const innerHTML =
+  '<defs><linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a"><stop stop-color="currentColor" stop-opacity="0" offset="0%"></stop><stop stop-color="currentColor" stop-opacity=".631" offset="63.146%"></stop><stop stop-color="currentColor" offset="100%"></stop></linearGradient></defs><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"></animateTransform></path><circle fill="currentColor" cx="36" cy="18" r="1"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"></animateTransform></circle></g>'
 
 export default createComponent({
   name: 'QSpinnerTail',
 
   props: useSpinnerProps,
 
-  setup (props) {
+  setup(props) {
     const { cSize, classes } = useSpinner(props)
-    return () => h('svg', {
-      class: classes.value,
-      width: cSize.value,
-      height: cSize.value,
-      viewBox: '0 0 38 38',
-      xmlns: 'http://www.w3.org/2000/svg',
-      innerHTML
-    })
+    return () =>
+      h('svg', {
+        class: classes.value,
+        width: cSize.value,
+        height: cSize.value,
+        viewBox: '0 0 38 38',
+        xmlns: 'http://www.w3.org/2000/svg',
+        innerHTML
+      })
   }
 })

package/src/components/spinner/QSpinnerTail.json

@@ -1,3 +1,3 @@
 {
-  "mixins": [ "components/spinner/spinner" ]
+  "mixins": ["components/spinner/spinner"]
 }

package/src/components/spinner/QSpinnerTail.test.js

@@ -7,32 +7,24 @@ describe('[QSpinnerTail API]', () => {
   describe('[Props]', () => {
     describe('[(prop)size]', () => {
       test.each([
-        [ 'String', '100px' ],
-        [ 'Number', 100 ]
+        ['String', '100px'],
+        ['Number', 100]
       ])('type %s has effect', async (_, propVal) => {
-        const expectedValue = '' + propVal
+        const expectedValue = String(propVal)
         const wrapper = mount(QSpinnerTail)
 
         const target = wrapper.get('.q-spinner')
 
-        expect(
-          target.attributes('width')
-        ).not.toBe(expectedValue)
+        expect(target.attributes('width')).not.toBe(expectedValue)
 
-        expect(
-          target.attributes('height')
-        ).not.toBe(expectedValue)
+        expect(target.attributes('height')).not.toBe(expectedValue)
 
         await wrapper.setProps({ size: propVal })
         await flushPromises()
 
-        expect(
-          target.attributes('width')
-        ).toBe(expectedValue)
+        expect(target.attributes('width')).toBe(expectedValue)
 
-        expect(
-          target.attributes('height')
-        ).toBe(expectedValue)
+        expect(target.attributes('height')).toBe(expectedValue)
       })
     })
 
@@ -43,16 +35,12 @@ describe('[QSpinnerTail API]', () => {
 
         const target = wrapper.get('.q-spinner')
 
-        expect(
-          target.classes()
-        ).not.toContain('text-red')
+        expect(target.classes()).not.toContain('text-red')
 
         await wrapper.setProps({ color: propVal })
         await flushPromises()
 
-        expect(
-          target.classes()
-        ).toContain('text-red')
+        expect(target.classes()).toContain('text-red')
       })
     })
   })

package/src/components/spinner/index.js

@@ -25,7 +25,6 @@ import QSpinnerTail from './QSpinnerTail.js'
 
 export {
   QSpinner,
-
   QSpinnerAudio,
   QSpinnerBall,
   QSpinnerBars,

package/src/components/spinner/spinner.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private.use-size/use-size" ],
+  "mixins": ["composables/private.use-size/use-size"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/spinners"
@@ -11,7 +11,7 @@
     },
 
     "size": {
-      "type": [ "String", "Number" ],
+      "type": ["String", "Number"],
       "default": "'1em'"
     }
   }

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

@@ -3,22 +3,22 @@ import { useSizeDefaults } from '../../composables/private.use-size/use-size.js'
 
 export const useSpinnerProps = {
   size: {
-    type: [ String, Number ],
+    type: [String, Number],
     default: '1em'
   },
   color: String
 }
 
-export default function useSpinner (props) {
+export default function useSpinner(props) {
   return {
-    cSize: computed(() => (
+    cSize: computed(() =>
       props.size in useSizeDefaults
-        ? `${ useSizeDefaults[ props.size ] }px`
+        ? `${useSizeDefaults[props.size]}px`
         : props.size
-    )),
+    ),
 
-    classes: computed(() =>
-      'q-spinner' + (props.color ? ` text-${ props.color }` : '')
+    classes: computed(
+      () => 'q-spinner' + (props.color ? ` text-${props.color}` : '')
     )
   }
 }

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

@@ -34,7 +34,7 @@ describe('[useSpinner API]', () => {
       test('has correct return value when props.size is xl', () => {
         const result = useSpinner({ size: 'xl' })
         expect(result).toStrictEqual({
-          cSize: expect.$ref(`${ useSizeDefaults.xl }px`),
+          cSize: expect.$ref(`${useSizeDefaults.xl}px`),
           classes: expect.$ref('q-spinner')
         })
       })

package/src/components/splitter/QSplitter.js

@@ -2,7 +2,9 @@ import { h, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
 
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
-import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import useDark, {
+  useDarkProps
+} 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'
@@ -21,15 +23,15 @@ export default createComponent({
     unit: {
       type: String,
       default: '%',
-      validator: v => [ '%', 'px' ].includes(v)
+      validator: v => ['%', 'px'].includes(v)
     },
 
     limits: {
       type: Array,
       validator: v => {
         if (v.length !== 2) return false
-        if (typeof v[ 0 ] !== 'number' || typeof v[ 1 ] !== 'number') return false
-        return v[ 0 ] >= 0 && v[ 0 ] <= v[ 1 ]
+        if (typeof v[0] !== 'number' || typeof v[1] !== 'number') return false
+        return v[0] >= 0 && v[0] <= v[1]
       }
     },
 
@@ -38,17 +40,19 @@ export default createComponent({
     horizontal: Boolean,
     disable: Boolean,
 
-    beforeClass: [ Array, String, Object ],
-    afterClass: [ Array, String, Object ],
+    beforeClass: [Array, String, Object],
+    afterClass: [Array, String, Object],
 
-    separatorClass: [ Array, String, Object ],
-    separatorStyle: [ Array, String, Object ]
+    separatorClass: [Array, String, Object],
+    separatorStyle: [Array, String, Object]
   },
 
-  emits: [ 'update:modelValue' ],
+  emits: ['update:modelValue'],
 
-  setup (props, { slots, emit }) {
-    const { proxy: { $q } } = getCurrentInstance()
+  setup(props, { slots, emit }) {
+    const {
+      proxy: { $q }
+    } = getCurrentInstance()
     const isDark = useDark(props, $q)
 
     const rootRef = ref(null)
@@ -57,44 +61,54 @@ export default createComponent({
       after: ref(null)
     }
 
-    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' : '')
+    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' : '')
     )
 
-    const propName = computed(() => (props.horizontal === true ? 'height' : 'width'))
+    const propName = computed(() =>
+      props.horizontal === true ? 'height' : 'width'
+    )
     const side = computed(() => (props.reverse !== true ? 'before' : 'after'))
 
-    const computedLimits = computed(() => (
+    const computedLimits = computed(() =>
       props.limits !== void 0
         ? props.limits
-        : (props.unit === '%' ? [ 10, 90 ] : [ 50, Infinity ])
-    ))
+        : props.unit === '%'
+          ? [10, 90]
+          : [50, Infinity]
+    )
 
-    function getCSSValue (value) {
+    function getCSSValue(value) {
       return (props.unit === '%' ? value : Math.round(value)) + props.unit
     }
 
     const styles = computed(() => ({
-      [ side.value ]: {
-        [ propName.value ]: getCSSValue(props.modelValue)
+      [side.value]: {
+        [propName.value]: getCSSValue(props.modelValue)
       }
     }))
 
     let __dir, __maxValue, __value, __multiplier, __normalized
 
-    function pan (evt) {
+    function pan(evt) {
       if (evt.isFirst === true) {
-        const size = rootRef.value.getBoundingClientRect()[ propName.value ]
+        const size = rootRef.value.getBoundingClientRect()[propName.value]
 
         __dir = props.horizontal === true ? 'up' : 'left'
         __maxValue = props.unit === '%' ? 100 : size
-        __value = Math.min(__maxValue, computedLimits.value[ 1 ], Math.max(computedLimits.value[ 0 ], props.modelValue))
-        __multiplier = (props.reverse !== true ? 1 : -1)
-          * (props.horizontal === true ? 1 : ($q.lang.rtl === true ? -1 : 1))
-          * (props.unit === '%' ? (size === 0 ? 0 : 100 / size) : 1)
+        __value = Math.min(
+          __maxValue,
+          computedLimits.value[1],
+          Math.max(computedLimits.value[0], props.modelValue)
+        )
+        __multiplier =
+          (props.reverse !== true ? 1 : -1) *
+          (props.horizontal === true ? 1 : $q.lang.rtl === true ? -1 : 1) *
+          (props.unit === '%' ? (size === 0 ? 0 : 100 / size) : 1)
 
         rootRef.value.classList.add('q-splitter--active')
         return
@@ -109,98 +123,123 @@ export default createComponent({
         return
       }
 
-      const val = __value
-        + __multiplier
-        * (evt.direction === __dir ? -1 : 1)
-        * evt.distance[ props.horizontal === true ? 'y' : 'x' ]
+      const val =
+        __value +
+        __multiplier *
+          (evt.direction === __dir ? -1 : 1) *
+          evt.distance[props.horizontal === true ? 'y' : 'x']
 
-      __normalized = Math.min(__maxValue, computedLimits.value[ 1 ], Math.max(computedLimits.value[ 0 ], val))
+      __normalized = Math.min(
+        __maxValue,
+        computedLimits.value[1],
+        Math.max(computedLimits.value[0], val)
+      )
 
-      sideRefs[ side.value ].value.style[ propName.value ] = getCSSValue(__normalized)
+      sideRefs[side.value].value.style[propName.value] =
+        getCSSValue(__normalized)
 
       if (props.emitImmediately === true && props.modelValue !== __normalized) {
         emit('update:modelValue', __normalized)
       }
     }
 
-    const sepDirective = computed(() => {
-      // if props.disable !== true
-      return [ [
+    const sepDirective = computed(() => [
+      [
         TouchPan,
         pan,
         void 0,
         {
-          [ props.horizontal === true ? 'vertical' : 'horizontal' ]: true,
+          [props.horizontal === true ? 'vertical' : 'horizontal']: true,
           prevent: true,
           stop: true,
           mouse: true,
           mouseAllDir: true
         }
-      ] ]
-    })
+      ]
+    ])
 
-    function normalize (val, limits) {
-      if (val < limits[ 0 ]) {
-        emit('update:modelValue', limits[ 0 ])
-      }
-      else if (val > limits[ 1 ]) {
-        emit('update:modelValue', limits[ 1 ])
+    function normalize(val, limits) {
+      if (val < limits[0]) {
+        emit('update:modelValue', limits[0])
+      } else if (val > limits[1]) {
+        emit('update:modelValue', limits[1])
       }
     }
 
-    watch(() => props.modelValue, v => {
-      normalize(v, computedLimits.value)
-    })
+    watch(
+      () => props.modelValue,
+      v => {
+        normalize(v, computedLimits.value)
+      }
+    )
 
-    watch(() => props.limits, () => {
-      nextTick(() => {
-        normalize(props.modelValue, computedLimits.value)
-      })
-    })
+    watch(
+      () => props.limits,
+      () => {
+        nextTick(() => {
+          normalize(props.modelValue, computedLimits.value)
+        })
+      }
+    )
 
     return () => {
       const child = [
-        h('div', {
-          ref: sideRefs.before,
-          class: [
-            'q-splitter__panel q-splitter__before' + (props.reverse === true ? ' col' : ''),
-            props.beforeClass
-          ],
-          style: styles.value.before
-        }, hSlot(slots.before)),
-
-        h('div', {
-          class: [
-            'q-splitter__separator',
-            props.separatorClass
-          ],
-          style: props.separatorStyle,
-          'aria-disabled': props.disable === true ? 'true' : void 0
-        }, [
-          hDir(
-            'div',
-            { class: 'q-splitter__separator-area absolute-full' },
-            hSlot(slots.separator),
-            'sep',
-            props.disable !== true,
-            () => sepDirective.value
-          )
-        ]),
-
-        h('div', {
-          ref: sideRefs.after,
-          class: [
-            'q-splitter__panel q-splitter__after' + (props.reverse === true ? '' : ' col'),
-            props.afterClass
-          ],
-          style: styles.value.after
-        }, hSlot(slots.after))
+        h(
+          'div',
+          {
+            ref: sideRefs.before,
+            class: [
+              'q-splitter__panel q-splitter__before' +
+                (props.reverse === true ? ' col' : ''),
+              props.beforeClass
+            ],
+            style: styles.value.before
+          },
+          hSlot(slots.before)
+        ),
+
+        h(
+          'div',
+          {
+            class: ['q-splitter__separator', props.separatorClass],
+            style: props.separatorStyle,
+            'aria-disabled': props.disable === true ? 'true' : void 0
+          },
+          [
+            hDir(
+              'div',
+              { class: 'q-splitter__separator-area absolute-full' },
+              hSlot(slots.separator),
+              'sep',
+              props.disable !== true,
+              () => sepDirective.value
+            )
+          ]
+        ),
+
+        h(
+          'div',
+          {
+            ref: sideRefs.after,
+            class: [
+              'q-splitter__panel q-splitter__after' +
+                (props.reverse === true ? '' : ' col'),
+              props.afterClass
+            ],
+            style: styles.value.after
+          },
+          hSlot(slots.after)
+        )
       ]
 
-      return h('div', {
-        class: classes.value,
-        ref: rootRef
-      }, hMergeSlot(slots.default, child))
+      return h(
+        'div',
+        {
+          class: classes.value,
+          ref: rootRef
+        },
+        hMergeSlot(slots.default, child)
+      )
     }
   }
 })