quasar 2.18.7 → 2.19.0

package/src/components/spinner/QSpinnerFacebook.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(20 50)"><rect x="-10" y="-30" width="20" height="60" fill="currentColor" opacity="0.6"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g><g transform="translate(50 50)"><rect x="-10" y="-30" width="20" height="60" fill="currentColor" opacity="0.8"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0.1s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g><g transform="translate(80 50)"><rect x="-10" y="-30" width="20" height="60" fill="currentColor" opacity="0.9"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0.2s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g>'
+const innerHTML =
+  '<g transform="translate(20 50)"><rect x="-10" y="-30" width="20" height="60" fill="currentColor" opacity="0.6"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g><g transform="translate(50 50)"><rect x="-10" y="-30" width="20" height="60" fill="currentColor" opacity="0.8"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0.1s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g><g transform="translate(80 50)"><rect x="-10" y="-30" width="20" height="60" fill="currentColor" opacity="0.9"><animateTransform attributeName="transform" type="scale" from="2" to="1" begin="0.2s" repeatCount="indefinite" dur="1s" calcMode="spline" keySplines="0.1 0.9 0.4 1" keyTimes="0;1" values="2;1"></animateTransform></rect></g>'
 
 export default createComponent({
   name: 'QSpinnerFacebook',
 
   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 100 100',
-      xmlns: 'http://www.w3.org/2000/svg',
-      preserveAspectRatio: 'xMidYMid',
-      innerHTML
-    })
+    return () =>
+      h('svg', {
+        class: classes.value,
+        width: cSize.value,
+        height: cSize.value,
+        viewBox: '0 0 100 100',
+        xmlns: 'http://www.w3.org/2000/svg',
+        preserveAspectRatio: 'xMidYMid',
+        innerHTML
+      })
   }
 })

package/src/components/spinner/QSpinnerFacebook.json

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

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

@@ -7,32 +7,24 @@ describe('[QSpinnerFacebook 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(QSpinnerFacebook)
 
         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('[QSpinnerFacebook 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/QSpinnerGears.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(-20,-20)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" fill="currentColor"><animateTransform attributeName="transform" type="rotate" from="90 50 50" to="0 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g><g transform="translate(20,20) rotate(15 50 50)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" fill="currentColor"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="90 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g>'
+const innerHTML =
+  '<g transform="translate(-20,-20)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" fill="currentColor"><animateTransform attributeName="transform" type="rotate" from="90 50 50" to="0 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g><g transform="translate(20,20) rotate(15 50 50)"><path d="M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z" fill="currentColor"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="90 50 50" dur="1s" repeatCount="indefinite"></animateTransform></path></g>'
 
 export default createComponent({
   name: 'QSpinnerGears',
 
   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 100 100',
-      preserveAspectRatio: 'xMidYMid',
-      xmlns: 'http://www.w3.org/2000/svg',
-      innerHTML
-    })
+    return () =>
+      h('svg', {
+        class: classes.value,
+        width: cSize.value,
+        height: cSize.value,
+        viewBox: '0 0 100 100',
+        preserveAspectRatio: 'xMidYMid',
+        xmlns: 'http://www.w3.org/2000/svg',
+        innerHTML
+      })
   }
 })

package/src/components/spinner/QSpinnerGears.json

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

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

@@ -7,32 +7,24 @@ describe('[QSpinnerGears 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(QSpinnerGears)
 
         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('[QSpinnerGears 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/QSpinnerGrid.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 = '<circle cx="12.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5"><animate attributeName="fill-opacity" begin="100ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="300ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="600ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="800ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="400ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="12.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="700ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="500ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="200ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle>'
+const innerHTML =
+  '<circle cx="12.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="12.5" cy="52.5" r="12.5" fill-opacity=".5"><animate attributeName="fill-opacity" begin="100ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="300ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="600ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="12.5" r="12.5"><animate attributeName="fill-opacity" begin="800ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="52.5" r="12.5"><animate attributeName="fill-opacity" begin="400ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="12.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="700ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="52.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="500ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="92.5" cy="92.5" r="12.5"><animate attributeName="fill-opacity" begin="200ms" dur="1s" values="1;.2;1" calcMode="linear" repeatCount="indefinite"></animate></circle>'
 
 export default createComponent({
   name: 'QSpinnerGrid',
 
   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 105 105',
-      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 105 105',
+        xmlns: 'http://www.w3.org/2000/svg',
+        innerHTML
+      })
   }
 })

package/src/components/spinner/QSpinnerGrid.json

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

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

@@ -7,32 +7,24 @@ describe('[QSpinnerGrid 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(QSpinnerGrid)
 
         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('[QSpinnerGrid 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/QSpinnerHearts.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 = '<path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.716-6.002 11.47-7.65 17.304-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"></animate></path><path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.593-2.32 17.308 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0.7s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"></animate></path><path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"></path>'
+const innerHTML =
+  '<path d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.716-6.002 11.47-7.65 17.304-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"></animate></path><path d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.593-2.32 17.308 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z" fill-opacity=".5"><animate attributeName="fill-opacity" begin="0.7s" dur="1.4s" values="0.5;1;0.5" calcMode="linear" repeatCount="indefinite"></animate></path><path d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"></path>'
 
 export default createComponent({
   name: 'QSpinnerHearts',
 
   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 140 64',
-      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 140 64',
+        xmlns: 'http://www.w3.org/2000/svg',
+        innerHTML
+      })
   }
 })

package/src/components/spinner/QSpinnerHearts.json

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

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

@@ -7,32 +7,24 @@ describe('[QSpinnerHearts 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(QSpinnerHearts)
 
         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('[QSpinnerHearts 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/QSpinnerHourglass.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><path fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" d="M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z"></path><clipPath id="uil-hourglass-clip1"><rect x="15" y="20" width="70" height="25"><animate attributeName="height" from="25" to="0" dur="1s" repeatCount="indefinite" values="25;0;0" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="20" to="45" dur="1s" repeatCount="indefinite" values="20;45;45" keyTimes="0;0.5;1"></animate></rect></clipPath><clipPath id="uil-hourglass-clip2"><rect x="15" y="55" width="70" height="25"><animate attributeName="height" from="0" to="25" dur="1s" repeatCount="indefinite" values="0;25;25" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="80" to="55" dur="1s" repeatCount="indefinite" values="80;55;55" keyTimes="0;0.5;1"></animate></rect></clipPath><path d="M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z" clip-path="url(#uil-hourglass-clip1)" fill="currentColor"></path><path d="M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z" clip-path="url(#uil-hourglass-clip2)" fill="currentColor"></path><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="180 50 50" repeatCount="indefinite" dur="1s" values="0 50 50;0 50 50;180 50 50" keyTimes="0;0.7;1"></animateTransform></g>'
+const innerHTML =
+  '<g><path fill="none" stroke="currentColor" stroke-width="5" stroke-miterlimit="10" d="M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z"></path><clipPath id="uil-hourglass-clip1"><rect x="15" y="20" width="70" height="25"><animate attributeName="height" from="25" to="0" dur="1s" repeatCount="indefinite" values="25;0;0" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="20" to="45" dur="1s" repeatCount="indefinite" values="20;45;45" keyTimes="0;0.5;1"></animate></rect></clipPath><clipPath id="uil-hourglass-clip2"><rect x="15" y="55" width="70" height="25"><animate attributeName="height" from="0" to="25" dur="1s" repeatCount="indefinite" values="0;25;25" keyTimes="0;0.5;1"></animate><animate attributeName="y" from="80" to="55" dur="1s" repeatCount="indefinite" values="80;55;55" keyTimes="0;0.5;1"></animate></rect></clipPath><path d="M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z" clip-path="url(#uil-hourglass-clip1)" fill="currentColor"></path><path d="M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z" clip-path="url(#uil-hourglass-clip2)" fill="currentColor"></path><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="180 50 50" repeatCount="indefinite" dur="1s" values="0 50 50;0 50 50;180 50 50" keyTimes="0;0.7;1"></animateTransform></g>'
 
 export default createComponent({
   name: 'QSpinnerHourglass',
 
   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 100 100',
-      preserveAspectRatio: 'xMidYMid',
-      xmlns: 'http://www.w3.org/2000/svg',
-      innerHTML
-    })
+    return () =>
+      h('svg', {
+        class: classes.value,
+        width: cSize.value,
+        height: cSize.value,
+        viewBox: '0 0 100 100',
+        preserveAspectRatio: 'xMidYMid',
+        xmlns: 'http://www.w3.org/2000/svg',
+        innerHTML
+      })
   }
 })

package/src/components/spinner/QSpinnerHourglass.json

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

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

@@ -7,32 +7,24 @@ describe('[QSpinnerHourglass 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(QSpinnerHourglass)
 
         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('[QSpinnerHourglass 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/QSpinnerInfinity.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 = '<path d="M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z" fill="none" stroke="currentColor" stroke-width="8" stroke-dasharray="10.691205342610678 10.691205342610678" stroke-dashoffset="0"><animate attributeName="stroke-dashoffset" from="0" to="21.382410685221355" begin="0" dur="2s" repeatCount="indefinite" fill="freeze"></animate></path>'
+const innerHTML =
+  '<path d="M24.3,30C11.4,30,5,43.3,5,50s6.4,20,19.3,20c19.3,0,32.1-40,51.4-40C88.6,30,95,43.3,95,50s-6.4,20-19.3,20C56.4,70,43.6,30,24.3,30z" fill="none" stroke="currentColor" stroke-width="8" stroke-dasharray="10.691205342610678 10.691205342610678" stroke-dashoffset="0"><animate attributeName="stroke-dashoffset" from="0" to="21.382410685221355" begin="0" dur="2s" repeatCount="indefinite" fill="freeze"></animate></path>'
 
 export default createComponent({
   name: 'QSpinnerInfinity',
 
   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 100 100',
-      preserveAspectRatio: 'xMidYMid',
-      innerHTML
-    })
+    return () =>
+      h('svg', {
+        class: classes.value,
+        width: cSize.value,
+        height: cSize.value,
+        viewBox: '0 0 100 100',
+        preserveAspectRatio: 'xMidYMid',
+        innerHTML
+      })
   }
 })

package/src/components/spinner/QSpinnerInfinity.json

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