quasar 2.1.0

package/src/components/spinner/QSpinnerDots.json

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

package/src/components/spinner/QSpinnerFacebook.js

@@ -0,0 +1,103 @@
+import { h, defineComponent } from 'vue'
+
+import useSpinner, { useSpinnerProps } from './use-spinner.js'
+
+const svg = [
+  h('g', {
+    transform: 'translate(20 50)'
+  }, [
+    h('rect', {
+      x: '-10',
+      y: '-30',
+      width: ' 20',
+      height: '60',
+      fill: 'currentColor',
+      opacity: '0.6'
+    }, [
+      h('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'
+      })
+    ])
+  ]),
+  h('g', {
+    transform: 'translate(50 50)'
+  }, [
+    h('rect', {
+      x: '-10',
+      y: '-30',
+      width: ' 20',
+      height: '60',
+      fill: 'currentColor',
+      opacity: '0.8'
+    }, [
+      h('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'
+      })
+    ])
+  ]),
+  h('g', {
+    transform: 'translate(80 50)'
+  }, [
+    h('rect', {
+      x: '-10',
+      y: '-30',
+      width: ' 20',
+      height: '60',
+      fill: 'currentColor',
+      opacity: '0.9'
+    }, [
+      h('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'
+      })
+    ])
+  ])
+]
+
+export default defineComponent({
+  name: 'QSpinnerFacebook',
+
+  props: useSpinnerProps,
+
+  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'
+    }, svg)
+  }
+})

package/src/components/spinner/QSpinnerFacebook.json

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

package/src/components/spinner/QSpinnerGears.js

@@ -0,0 +1,59 @@
+import { h, defineComponent } from 'vue'
+
+import useSpinner, { useSpinnerProps } from './use-spinner.js'
+
+const svg = [
+  h('g', {
+    transform: 'translate(-20,-20)'
+  }, [
+    h('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'
+    }, [
+      h('animateTransform', {
+        attributeName: 'transform',
+        type: 'rotate',
+        from: '90 50 50',
+        to: '0 50 50',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      })
+    ])
+  ]),
+  h('g', {
+    transform: 'translate(20,20) rotate(15 50 50)'
+  }, [
+    h('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'
+    }, [
+      h('animateTransform', {
+        attributeName: 'transform',
+        type: 'rotate',
+        from: '0 50 50',
+        to: '90 50 50',
+        dur: '1s',
+        repeatCount: 'indefinite'
+      })
+    ])
+  ])
+]
+
+export default defineComponent({
+  name: 'QSpinnerGears',
+
+  props: useSpinnerProps,
+
+  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'
+    }, svg)
+  }
+})

package/src/components/spinner/QSpinnerGears.json

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

package/src/components/spinner/QSpinnerGrid.js

@@ -0,0 +1,152 @@
+import { h, defineComponent } from 'vue'
+
+import useSpinner, { useSpinnerProps } from './use-spinner.js'
+
+const svg = [
+  h('circle', {
+    cx: '12.5',
+    cy: '12.5',
+    r: '12.5'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '0s',
+      dur: '1s',
+      values: '1;.2;1',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ]),
+  h('circle', {
+    cx: '12.5',
+    cy: '52.5',
+    r: '12.5',
+    'fill-opacity': '.5'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '100ms',
+      dur: '1s',
+      values: '1;.2;1',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ]),
+  h('circle', {
+    cx: '52.5',
+    cy: '12.5',
+    r: '12.5'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '300ms',
+      dur: '1s',
+      values: '1;.2;1',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ]),
+  h('circle', {
+    cx: '52.5',
+    cy: '52.5',
+    r: '12.5'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '600ms',
+      dur: '1s',
+      values: '1;.2;1',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ]),
+  h('circle', {
+    cx: '92.5',
+    cy: '12.5',
+    r: '12.5'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '800ms',
+      dur: '1s',
+      values: '1;.2;1',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ]),
+  h('circle', {
+    cx: '92.5',
+    cy: '52.5',
+    r: '12.5'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '400ms',
+      dur: '1s',
+      values: '1;.2;1',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ]),
+  h('circle', {
+    cx: '12.5',
+    cy: '92.5',
+    r: '12.5'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '700ms',
+      dur: '1s',
+      values: '1;.2;1',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ]),
+  h('circle', {
+    cx: '52.5',
+    cy: '92.5',
+    r: '12.5'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '500ms',
+      dur: '1s',
+      values: '1;.2;1',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ]),
+  h('circle', {
+    cx: '92.5',
+    cy: '92.5',
+    r: '12.5'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '200ms',
+      dur: '1s',
+      values: '1;.2;1',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ])
+]
+
+export default defineComponent({
+  name: 'QSpinnerGrid',
+
+  props: useSpinnerProps,
+
+  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'
+    }, svg)
+  }
+})

package/src/components/spinner/QSpinnerGrid.json

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

package/src/components/spinner/QSpinnerHearts.js

@@ -0,0 +1,54 @@
+import { h, defineComponent } from 'vue'
+
+import useSpinner, { useSpinnerProps } from './use-spinner.js'
+
+const svg = [
+  h('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'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '0s',
+      dur: '1.4s',
+      values: '0.5;1;0.5',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ]),
+  h('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'
+  }, [
+    h('animate', {
+      attributeName: 'fill-opacity',
+      begin: '0.7s',
+      dur: '1.4s',
+      values: '0.5;1;0.5',
+      calcMode: 'linear',
+      repeatCount: 'indefinite'
+    })
+  ]),
+  h('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'
+  })
+]
+
+export default defineComponent({
+  name: 'QSpinnerHearts',
+
+  props: useSpinnerProps,
+
+  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'
+    }, svg)
+  }
+})

package/src/components/spinner/QSpinnerHearts.json

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

package/src/components/spinner/QSpinnerHourglass.js

@@ -0,0 +1,112 @@
+import { h, defineComponent } from 'vue'
+
+import useSpinner, { useSpinnerProps } from './use-spinner.js'
+
+const svg = [
+  h('g', [
+    h('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'
+    }),
+    h('clipPath', {
+      id: 'uil-hourglass-clip1'
+    }, [
+      h('rect', {
+        x: '15',
+        y: '20',
+        width: ' 70',
+        height: '25'
+      }, [
+        h('animate', {
+          attributeName: 'height',
+          from: '25',
+          to: '0',
+          dur: '1s',
+          repeatCount: 'indefinite',
+          values: '25;0;0',
+          keyTimes: '0;0.5;1'
+        }),
+        h('animate', {
+          attributeName: 'y',
+          from: '20',
+          to: '45',
+          dur: '1s',
+          repeatCount: 'indefinite',
+          values: '20;45;45',
+          keyTimes: '0;0.5;1'
+        })
+      ])
+    ]),
+    h('clipPath', {
+      id: 'uil-hourglass-clip2'
+    }, [
+      h('rect', {
+        x: '15',
+        y: '55',
+        width: ' 70',
+        height: '25'
+      }, [
+        h('animate', {
+          attributeName: 'height',
+          from: '0',
+          to: '25',
+          dur: '1s',
+          repeatCount: 'indefinite',
+          values: '0;25;25',
+          keyTimes: '0;0.5;1'
+        }),
+        h('animate', {
+          attributeName: 'y',
+          from: '80',
+          to: '55',
+          dur: '1s',
+          repeatCount: 'indefinite',
+          values: '80;55;55',
+          keyTimes: '0;0.5;1'
+        })
+      ])
+    ]),
+    h('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'
+    }),
+    h('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'
+    }),
+    h('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'
+    })
+  ])
+]
+
+export default defineComponent({
+  name: 'QSpinnerHourglass',
+
+  props: useSpinnerProps,
+
+  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'
+    }, svg)
+  }
+})