quasar 2.18.7 → 2.19.0

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

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/use-form/private.use-form" ],
+  "mixins": ["composables/use-form/private.use-form"],
 
   "props": {
     "min": {
@@ -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"
     },
@@ -132,14 +132,14 @@
     },
 
     "markers": {
-      "type": [ "Boolean", "Number" ],
+      "type": ["Boolean", "Number"],
       "desc": "Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number)",
       "category": "content",
-      "examples": [ "5", "true" ]
+      "examples": ["5", "true"]
     },
 
     "marker-labels": {
-      "type": [ "Boolean", "Array", "Object", "Function" ],
+      "type": ["Boolean", "Array", "Object", "Function"],
       "tsType": "SliderMarkerLabels",
       "desc": "Configure the marker labels (or show the default ones if 'true'); Array of definition Objects or Object with key-value where key is the model and the value is the marker label definition",
       "definition": {
@@ -149,20 +149,20 @@
           "desc": "Value of equivalent model where to position the marker"
         },
         "label": {
-          "type": [ "Number", "String" ],
+          "type": ["Number", "String"],
           "desc": "Label to use"
         },
         "classes": {
-          "type": [ "String", "Array", "Object" ],
+          "type": ["String", "Array", "Object"],
           "tsType": "VueClassProp",
           "desc": "CSS classes to be attributed to the marker label",
-          "examples": [ "'my-class-name'" ]
+          "examples": ["'my-class-name'"]
         },
         "style": {
           "type": "Object",
           "tsType": "VueStyleObjectProp",
           "desc": "Style definitions to be attributed to the marker label",
-          "examples": [ "{ height: '24px' }" ]
+          "examples": ["{ height: '24px' }"]
         }
       },
       "params": {
@@ -173,7 +173,7 @@
         }
       },
       "returns": {
-        "type": [ "String", "Object" ],
+        "type": ["String", "Object"],
         "desc": "Marker definition Object or directly a String for the label of the marker",
         "definition": {
           "value": {
@@ -181,27 +181,27 @@
             "desc": "Value of equivalent model where to position the marker"
           },
           "label": {
-            "type": [ "Number", "String" ],
+            "type": ["Number", "String"],
             "desc": "Label to use"
           },
           "classes": {
-            "type": [ "String", "Array", "Object" ],
+            "type": ["String", "Array", "Object"],
             "tsType": "VueClassProp",
             "desc": "CSS classes to be attributed to the marker label",
-            "examples": [ "'my-class-name'" ]
+            "examples": ["'my-class-name'"]
           },
           "style": {
             "type": "Object",
             "tsType": "VueStyleObjectProp",
             "desc": "Style definitions to be attributed to the marker label",
-            "examples": [ "{ height: '24px' }" ]
+            "examples": ["{ height: '24px' }"]
           }
         }
       },
       "category": "content",
       "examples": [
         "true",
-        "[ { value: 0, label: '0%' }, { value: 5, classes: 'my-class', style: { width: '24px' } } ]",
+        "[{ value: 0, label: '0%' }, { value: 5, classes: 'my-class', style: { width: '24px' } }]",
         "{ 0: '0%', 5: { label: '5%', classes: 'my-class', style: { width: '24px' } } }",
         "val => (10 * val) + '%'",
         "val => ({ label: (10 * val) + '%', classes: 'my-class', style: { width: '24px' } })"
@@ -212,7 +212,7 @@
     "marker-labels-class": {
       "type": "String",
       "desc": "CSS class(es) to apply to the marker labels container",
-      "examples": [ "'text-orange'" ],
+      "examples": ["'text-orange'"],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -228,7 +228,7 @@
       "type": "String",
       "desc": "Track size (including CSS unit)",
       "default": "'4px'",
-      "examples": [ "'35px'" ],
+      "examples": ["'35px'"],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -237,7 +237,7 @@
       "type": "String",
       "desc": "Thumb size (including CSS unit)",
       "default": "'20px'",
-      "examples": [ "'20px'" ],
+      "examples": ["'20px'"],
       "category": "style",
       "addedIn": "v2.4"
     },
@@ -251,7 +251,7 @@
       "type": "String",
       "desc": "Set custom thumb svg path",
       "default": "'M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0'",
-      "examples": [ "'M5 5 h10 v10 h-10 v-10'" ],
+      "examples": ["'M5 5 h10 v10 h-10 v-10'"],
       "category": "style"
     },
 
@@ -295,7 +295,7 @@
               "desc": "Equivalent model value for the marker label"
             },
             "label": {
-              "type": [ "Number", "String" ],
+              "type": ["Number", "String"],
               "desc": "Configured label for the marker"
             },
             "classes": {
@@ -306,7 +306,7 @@
               "type": "Object",
               "tsType": "VueStyleObjectProp",
               "desc": "Style definitions to be attributed to the marker label",
-              "examples": [ "{ height: '24px' }" ]
+              "examples": ["{ height: '24px' }"]
             }
           }
         },
@@ -325,7 +325,7 @@
               "desc": "Equivalent model value for the marker label"
             },
             "label": {
-              "type": [ "Number", "String" ],
+              "type": ["Number", "String"],
               "desc": "Configured label for the marker"
             },
             "classes": {
@@ -336,7 +336,7 @@
               "type": "Object",
               "tsType": "VueStyleObjectProp",
               "desc": "Style definitions to be attributed to the marker label",
-              "examples": [ "{ height: '24px' }" ]
+              "examples": ["{ height: '24px' }"]
             }
           }
         },
@@ -359,7 +359,7 @@
                   "desc": "Equivalent model value for the marker label"
                 },
                 "label": {
-                  "type": [ "Number", "String" ],
+                  "type": ["Number", "String"],
                   "desc": "Configured label for the marker"
                 },
                 "classes": {
@@ -370,7 +370,7 @@
                   "type": "Object",
                   "tsType": "VueStyleObjectProp",
                   "desc": "Style definitions to be attributed to the marker label",
-                  "examples": [ "{ height: '24px' }" ]
+                  "examples": ["{ height: '24px' }"]
                 }
               }
             }
@@ -418,7 +418,7 @@
               "desc": "Equivalent model value for the marker label"
             },
             "label": {
-              "type": [ "Number", "String" ],
+              "type": ["Number", "String"],
               "desc": "Configured label for the marker"
             },
             "classes": {
@@ -429,7 +429,7 @@
               "type": "Object",
               "tsType": "VueStyleObjectProp",
               "desc": "Style definitions to be attributed to the marker label",
-              "examples": [ "{ height: '24px' }" ]
+              "examples": ["{ height: '24px' }"]
             }
           }
         },
@@ -452,7 +452,7 @@
                   "desc": "Equivalent model value for the marker label"
                 },
                 "label": {
-                  "type": [ "Number", "String" ],
+                  "type": ["Number", "String"],
                   "desc": "Configured label for the marker"
                 },
                 "classes": {
@@ -463,7 +463,7 @@
                   "type": "Object",
                   "tsType": "VueStyleObjectProp",
                   "desc": "Style definitions to be attributed to the marker label",
-                  "examples": [ "{ height: '24px' }" ]
+                  "examples": ["{ height: '24px' }"]
                 }
               }
             }
@@ -506,7 +506,7 @@
         "phase": {
           "type": "String",
           "desc": "Phase of panning",
-          "values": [ "'start'", "'end'" ]
+          "values": ["'start'", "'end'"]
         }
       }
     }

package/src/components/space/QSpace.js

@@ -5,7 +5,7 @@ import { createComponent } from '../../utils/private.create/create.js'
 export default createComponent({
   name: 'QSpace',
 
-  setup () {
+  setup() {
     const space = h('div', { class: 'q-space' })
     return () => space
   }

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

@@ -8,10 +8,7 @@ describe('[QSpace API]', () => {
     test('should not throw error on render', () => {
       const wrapper = mount(QSpace)
 
-      expect(
-        wrapper.get('div.q-space')
-          .exists()
-      ).toBe(true)
+      expect(wrapper.get('div.q-space').exists()).toBe(true)
     })
   })
 })

package/src/components/space/index.js

@@ -1,5 +1,3 @@
 import QSpace from './QSpace.js'
 
-export {
-  QSpace
-}
+export { QSpace }

package/src/components/spinner/QSpinner.js

@@ -16,25 +16,30 @@ export default createComponent({
     }
   },
 
-  setup (props) {
+  setup(props) {
     const { cSize, classes } = useSpinner(props)
 
-    return () => h('svg', {
-      class: classes.value + ' q-spinner-mat',
-      width: cSize.value,
-      height: cSize.value,
-      viewBox: '25 25 50 50'
-    }, [
-      h('circle', {
-        class: 'path',
-        cx: '50',
-        cy: '50',
-        r: '20',
-        fill: 'none',
-        stroke: 'currentColor',
-        'stroke-width': props.thickness,
-        'stroke-miterlimit': '10'
-      })
-    ])
+    return () =>
+      h(
+        'svg',
+        {
+          class: classes.value + ' q-spinner-mat',
+          width: cSize.value,
+          height: cSize.value,
+          viewBox: '25 25 50 50'
+        },
+        [
+          h('circle', {
+            class: 'path',
+            cx: '50',
+            cy: '50',
+            r: '20',
+            fill: 'none',
+            stroke: 'currentColor',
+            'stroke-width': props.thickness,
+            'stroke-miterlimit': '10'
+          })
+        ]
+      )
   }
 })

package/src/components/spinner/QSpinner.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/spinner/spinner" ],
+  "mixins": ["components/spinner/spinner"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/spinners"

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

@@ -7,32 +7,24 @@ describe('[QSpinner 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(QSpinner)
 
         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('[QSpinner 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')
       })
     })
 
@@ -63,16 +51,12 @@ describe('[QSpinner API]', () => {
 
         const target = wrapper.get('.q-spinner circle')
 
-        expect(
-          target.attributes('stroke-width')
-        ).not.toBe('' + propVal)
+        expect(target.attributes('stroke-width')).not.toBe(String(propVal))
 
         await wrapper.setProps({ thickness: propVal })
         await flushPromises()
 
-        expect(
-          target.attributes('stroke-width')
-        ).toBe('' + propVal)
+        expect(target.attributes('stroke-width')).toBe(String(propVal))
       })
     })
   })

package/src/components/spinner/QSpinnerAudio.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 transform="matrix(1 0 0 -1 0 80)"><rect width="10" height="20" rx="3"><animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="15" width="10" height="80" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="30" width="10" height="50" rx="3"><animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="45" width="10" height="30" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"></animate></rect></g>'
+const innerHTML =
+  '<g transform="matrix(1 0 0 -1 0 80)"><rect width="10" height="20" rx="3"><animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="15" width="10" height="80" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="30" width="10" height="50" rx="3"><animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="45" width="10" height="30" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"></animate></rect></g>'
 
 export default createComponent({
   name: 'QSpinnerAudio',
 
   props: useSpinnerProps,
 
-  setup (props) {
+  setup(props) {
     const { cSize, classes } = useSpinner(props)
-    return () => h('svg', {
-      class: classes.value,
-      fill: 'currentColor',
-      width: cSize.value,
-      height: cSize.value,
-      viewBox: '0 0 55 80',
-      xmlns: 'http://www.w3.org/2000/svg',
-      innerHTML
-    })
+    return () =>
+      h('svg', {
+        class: classes.value,
+        fill: 'currentColor',
+        width: cSize.value,
+        height: cSize.value,
+        viewBox: '0 0 55 80',
+        xmlns: 'http://www.w3.org/2000/svg',
+        innerHTML
+      })
   }
 })

package/src/components/spinner/QSpinnerAudio.json

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

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

@@ -7,32 +7,24 @@ describe('[QSpinnerAudio 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(QSpinnerAudio)
 
         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('[QSpinnerAudio 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/QSpinnerBall.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 transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="5" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;5;50;50" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" begin="0s" dur="2.2s" values="5;27;49;5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="27" cy="5" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" from="5" to="5" values="5;50;50;5" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" begin="0s" dur="2.2s" from="27" to="27" values="27;49;5;27" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="49" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;50;5;50" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" from="49" to="49" begin="0s" dur="2.2s" values="49;5;27;49" calcMode="linear" repeatCount="indefinite"></animate></circle></g>'
+const innerHTML =
+  '<g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="5" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;5;50;50" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" begin="0s" dur="2.2s" values="5;27;49;5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="27" cy="5" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" from="5" to="5" values="5;50;50;5" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" begin="0s" dur="2.2s" from="27" to="27" values="27;49;5;27" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="49" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;50;5;50" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" from="49" to="49" begin="0s" dur="2.2s" values="49;5;27;49" calcMode="linear" repeatCount="indefinite"></animate></circle></g>'
 
 export default createComponent({
   name: 'QSpinnerBall',
 
   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 57 57',
-      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 57 57',
+        xmlns: 'http://www.w3.org/2000/svg',
+        innerHTML
+      })
   }
 })

package/src/components/spinner/QSpinnerBall.json

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

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

@@ -7,32 +7,24 @@ describe('[QSpinnerBall 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(QSpinnerBall)
 
         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('[QSpinnerBall 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')
       })
     })
   })