diff --git a/ui/src/components/spinner/QSpinnerAudio.js b/ui/src/components/spinner/QSpinnerAudio.js index 412d49ed565..3088e3e6dfb 100644 --- a/ui/src/components/spinner/QSpinnerAudio.js +++ b/ui/src/components/spinner/QSpinnerAudio.js @@ -1,74 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('g', { - transform: 'matrix(1 0 0 -1 0 80)' - }, [ - h('rect', { - width: '10', - height: '20', - rx: '3' - }, [ - h('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' - }) - ]), - h('rect', { - x: '15', - width: '10', - height: '80', - rx: '3' - }, [ - h('animate', { - attributeName: 'height', - begin: '0s', - dur: '2s', - values: '80;55;33;5;75;23;73;33;12;14;60;80', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('rect', { - x: '30', - width: '10', - height: '50', - rx: '3' - }, [ - h('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' - }) - ]), - h('rect', { - x: '45', - width: '10', - height: '30', - rx: '3' - }, [ - h('animate', { - attributeName: 'height', - begin: '0s', - dur: '2s', - values: '30;45;13;80;56;72;45;76;34;23;67;30', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerAudio', @@ -77,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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' - }, svg) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerBall.js b/ui/src/components/spinner/QSpinnerBall.js index 17f278bb5af..3654bbc7e5e 100644 --- a/ui/src/components/spinner/QSpinnerBall.js +++ b/ui/src/components/spinner/QSpinnerBall.js @@ -1,90 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('g', { - transform: 'translate(1 1)', - 'stroke-width': '2', - fill: 'none', - 'fill-rule': 'evenodd' - }, [ - h('circle', { - cx: '5', - cy: '50', - r: '5' - }, [ - h('animate', { - attributeName: 'cy', - begin: '0s', - dur: '2.2s', - values: '50;5;50;50', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'cx', - begin: '0s', - dur: '2.2s', - values: '5;27;49;5', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('circle', { - cx: '27', - cy: '5', - r: '5' - }, [ - h('animate', { - attributeName: 'cy', - begin: '0s', - dur: '2.2s', - from: '5', - to: '5', - values: '5;50;50;5', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'cx', - begin: '0s', - dur: '2.2s', - from: '27', - to: '27', - values: '27;49;5;27', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('circle', { - cx: '49', - cy: '50', - r: '5' - }, [ - h('animate', { - attributeName: 'cy', - begin: '0s', - dur: '2.2s', - values: '50;50;5;50', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'cx', - from: '49', - to: '49', - begin: '0s', - dur: '2.2s', - values: '49;5;27;49', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerBall', @@ -93,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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' - }, svg) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerBars.js b/ui/src/components/spinner/QSpinnerBars.js index 57138c6cfd8..bd5e044f6ca 100644 --- a/ui/src/components/spinner/QSpinnerBars.js +++ b/ui/src/components/spinner/QSpinnerBars.js @@ -1,129 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('rect', { - y: '10', - width: '15', - height: '120', - rx: '6' - }, [ - h('animate', { - attributeName: 'height', - begin: '0.5s', - dur: '1s', - values: '120;110;100;90;80;70;60;50;40;140;120', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'y', - begin: '0.5s', - dur: '1s', - values: '10;15;20;25;30;35;40;45;50;0;10', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('rect', { - x: '30', - y: '10', - width: '15', - height: '120', - rx: '6' - }, [ - h('animate', { - attributeName: 'height', - begin: '0.25s', - dur: '1s', - values: '120;110;100;90;80;70;60;50;40;140;120', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'y', - begin: '0.25s', - dur: '1s', - values: '10;15;20;25;30;35;40;45;50;0;10', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('rect', { - x: '60', - width: '15', - height: '140', - rx: '6' - }, [ - h('animate', { - attributeName: 'height', - begin: '0s', - dur: '1s', - values: '120;110;100;90;80;70;60;50;40;140;120', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'y', - begin: '0s', - dur: '1s', - values: '10;15;20;25;30;35;40;45;50;0;10', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('rect', { - x: '90', - y: '10', - width: '15', - height: '120', - rx: '6' - }, [ - h('animate', { - attributeName: 'height', - begin: '0.25s', - dur: '1s', - values: '120;110;100;90;80;70;60;50;40;140;120', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'y', - begin: '0.25s', - dur: '1s', - values: '10;15;20;25;30;35;40;45;50;0;10', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('rect', { - x: '120', - y: '10', - width: '15', - height: '120', - rx: '6' - }, [ - h('animate', { - attributeName: 'height', - begin: '0.5s', - dur: '1s', - values: '120;110;100;90;80;70;60;50;40;140;120', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'y', - begin: '0.5s', - dur: '1s', - values: '10;15;20;25;30;35;40;45;50;0;10', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerBars', @@ -132,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - return () => h('svg', { class: classes.value, fill: 'currentColor', width: cSize.value, height: cSize.value, viewBox: '0 0 135 140', - xmlns: 'http://www.w3.org/2000/svg' - }, svg) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerBox.js b/ui/src/components/spinner/QSpinnerBox.js index 9514ff25681..94a5f87ea92 100644 --- a/ui/src/components/spinner/QSpinnerBox.js +++ b/ui/src/components/spinner/QSpinnerBox.js @@ -1,47 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('rect', { - x: '25', - y: '25', - width: '50', - height: '50', - fill: 'none', - 'stroke-width': '4', - stroke: 'currentColor' - }, [ - h('animateTransform', { - id: 'spinnerBox', - attributeName: 'transform', - type: 'rotate', - from: '0 50 50', - to: '180 50 50', - dur: '0.5s', - begin: 'rectBox.end' - }) - ]), - h('rect', { - x: '27', - y: '27', - width: '46', - height: '50', - fill: 'currentColor' - }, [ - h('animate', { - id: 'rectBox', - attributeName: 'height', - begin: '0s;spinnerBox.end', - dur: '1.3s', - from: '50', - to: '0', - fill: 'freeze' - }) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerBox', @@ -50,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerClock.js b/ui/src/components/spinner/QSpinnerClock.js index 5f3572ed886..f61fe2a15eb 100644 --- a/ui/src/components/spinner/QSpinnerClock.js +++ b/ui/src/components/spinner/QSpinnerClock.js @@ -1,58 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('circle', { - cx: '50', - cy: '50', - r: '48', - fill: 'none', - 'stroke-width': '4', - 'stroke-miterlimit': '10', - stroke: 'currentColor' - }), - h('line', { - 'stroke-linecap': 'round', - 'stroke-width': '4', - 'stroke-miterlimit': '10', - stroke: 'currentColor', - x1: '50', - y1: '50', - x2: '85', - y2: '50.5' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'rotate', - from: '0 50 50', - to: '360 50 50', - dur: '2s', - repeatCount: 'indefinite' - }) - ]), - h('line', { - 'stroke-linecap': 'round', - 'stroke-width': '4', - 'stroke-miterlimit': '10', - stroke: 'currentColor', - x1: '50', - y1: '50', - x2: '49.5', - y2: '74' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'rotate', - from: '0 50 50', - to: '360 50 50', - dur: '15s', - repeatCount: 'indefinite' - }) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerClock', @@ -61,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerComment.js b/ui/src/components/spinner/QSpinnerComment.js index d00b407ce4a..299a71a574e 100644 --- a/ui/src/components/spinner/QSpinnerComment.js +++ b/ui/src/components/spinner/QSpinnerComment.js @@ -1,70 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('rect', { - x: '0', - y: '0', - width: '100', - height: '100', - fill: 'none' - }), - h('path', { - d: 'M78,19H22c-6.6,0-12,5.4-12,12v31c0,6.6,5.4,12,12,12h37.2c0.4,3,1.8,5.6,3.7,7.6c2.4,2.5,5.1,4.1,9.1,4 c-1.4-2.1-2-7.2-2-10.3c0-0.4,0-0.8,0-1.3h8c6.6,0,12-5.4,12-12V31C90,24.4,84.6,19,78,19z', - fill: 'currentColor' - }), - h('circle', { - cx: '30', - cy: '47', - r: '5', - fill: '#fff' - }, [ - h('animate', { - attributeName: 'opacity', - from: '0', - to: '1', - values: '0;1;1', - keyTimes: '0;0.2;1', - dur: '1s', - repeatCount: 'indefinite' - }) - ]), - h('circle', { - cx: '50', - cy: '47', - r: '5', - fill: '#fff' - }, [ - h('animate', { - attributeName: 'opacity', - from: '0', - to: '1', - values: '0;0;1;1', - keyTimes: '0;0.2;0.4;1', - dur: '1s', - repeatCount: 'indefinite' - }) - ]), - h('circle', { - cx: '70', - cy: '47', - r: '5', - fill: '#fff' - }, [ - h('animate', { - attributeName: 'opacity', - from: '0', - to: '1', - values: '0;0;1;1', - keyTimes: '0;0.4;0.6;1', - dur: '1s', - repeatCount: 'indefinite' - }) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerComment', @@ -73,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - return () => h('svg', { class: classes.value, width: cSize.value, height: cSize.value, xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 100 100', - preserveAspectRatio: 'xMidYMid' - }, svg) + preserveAspectRatio: 'xMidYMid', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerCube.js b/ui/src/components/spinner/QSpinnerCube.js index dfadd90fcec..c04c66e7753 100644 --- a/ui/src/components/spinner/QSpinnerCube.js +++ b/ui/src/components/spinner/QSpinnerCube.js @@ -1,118 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('rect', { - x: '0', - y: '0', - width: '100', - height: '100', - fill: 'none' - }), - h('g', { - transform: 'translate(25 25)' - }, [ - h('rect', { - x: '-20', - y: '-20', - width: '40', - height: '40', - fill: 'currentColor', - opacity: '0.9' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'scale', - from: '1.5', - to: '1', - repeatCount: 'indefinite', - begin: '0s', - dur: '1s', - calcMode: 'spline', - keySplines: '0.2 0.8 0.2 0.8', - keyTimes: '0;1' - }) - ]) - ]), - h('g', { - transform: 'translate(75 25)' - }, [ - h('rect', { - x: '-20', - y: '-20', - width: '40', - height: '40', - fill: 'currentColor', - opacity: '0.8' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'scale', - from: '1.5', - to: '1', - repeatCount: 'indefinite', - begin: '0.1s', - dur: '1s', - calcMode: 'spline', - keySplines: '0.2 0.8 0.2 0.8', - keyTimes: '0;1' - }) - ]) - ]), - h('g', { - transform: 'translate(25 75)' - }, [ - h('rect', { - x: '-20', - y: '-20', - width: '40', - height: '40', - fill: 'currentColor', - opacity: '0.7' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'scale', - from: '1.5', - to: '1', - repeatCount: 'indefinite', - begin: '0.3s', - dur: '1s', - calcMode: 'spline', - keySplines: '0.2 0.8 0.2 0.8', - keyTimes: '0;1' - }) - ]) - ]), - h('g', { - transform: 'translate(75 75)' - }, [ - h('rect', { - x: '-20', - y: '-20', - width: '40', - height: '40', - fill: 'currentColor', - opacity: '0.6' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'scale', - from: '1.5', - to: '1', - repeatCount: 'indefinite', - begin: '0.2s', - dur: '1s', - calcMode: 'spline', - keySplines: '0.2 0.8 0.2 0.8', - keyTimes: '0;1' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerCube', @@ -121,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - return () => h('svg', { class: classes.value, width: cSize.value, height: cSize.value, xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 100 100', - preserveAspectRatio: 'xMidYMid' - }, svg) + preserveAspectRatio: 'xMidYMid', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerDots.js b/ui/src/components/spinner/QSpinnerDots.js index cd756087ef0..fc879606bb1 100644 --- a/ui/src/components/spinner/QSpinnerDots.js +++ b/ui/src/components/spinner/QSpinnerDots.js @@ -1,90 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('circle', { - cx: '15', - cy: '15', - r: '15' - }, [ - h('animate', { - attributeName: 'r', - from: '15', - to: '15', - begin: '0s', - dur: '0.8s', - values: '15;9;15', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'fill-opacity', - from: '1', - to: '1', - begin: '0s', - dur: '0.8s', - values: '1;.5;1', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('circle', { - cx: '60', - cy: '15', - r: '9', - 'fill-opacity': '.3' - }, [ - h('animate', { - attributeName: 'r', - from: '9', - to: '9', - begin: '0s', - dur: '0.8s', - values: '9;15;9', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'fill-opacity', - from: '.5', - to: '.5', - begin: '0s', - dur: '0.8s', - values: '.5;1;.5', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('circle', { - cx: '105', - cy: '15', - r: '15' - }, [ - h('animate', { - attributeName: 'r', - from: '15', - to: '15', - begin: '0s', - dur: '0.8s', - values: '15;9;15', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'fill-opacity', - from: '1', - to: '1', - begin: '0s', - dur: '0.8s', - values: '1;.5;1', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerDots', @@ -93,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - return () => h('svg', { class: classes.value, fill: 'currentColor', width: cSize.value, height: cSize.value, viewBox: '0 0 120 30', - xmlns: 'http://www.w3.org/2000/svg' - }, svg) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerFacebook.js b/ui/src/components/spinner/QSpinnerFacebook.js index ff18c020474..30f78ca602d 100644 --- a/ui/src/components/spinner/QSpinnerFacebook.js +++ b/ui/src/components/spinner/QSpinnerFacebook.js @@ -1,89 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - 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' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerFacebook', @@ -92,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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) + preserveAspectRatio: 'xMidYMid', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerGears.js b/ui/src/components/spinner/QSpinnerGears.js index 28bf8725364..ecf2bb7625c 100644 --- a/ui/src/components/spinner/QSpinnerGears.js +++ b/ui/src/components/spinner/QSpinnerGears.js @@ -1,45 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - 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' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerGears', @@ -48,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerGrid.js b/ui/src/components/spinner/QSpinnerGrid.js index be7c2045efe..de5bdc225b7 100644 --- a/ui/src/components/spinner/QSpinnerGrid.js +++ b/ui/src/components/spinner/QSpinnerGrid.js @@ -1,138 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - 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' - }) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerGrid', @@ -141,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerHearts.js b/ui/src/components/spinner/QSpinnerHearts.js index c608d7c2121..8d118167667 100644 --- a/ui/src/components/spinner/QSpinnerHearts.js +++ b/ui/src/components/spinner/QSpinnerHearts.js @@ -1,40 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - 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' - }) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerHearts', @@ -43,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerHourglass.js b/ui/src/components/spinner/QSpinnerHourglass.js index 983189f0bf2..ef23e84422f 100644 --- a/ui/src/components/spinner/QSpinnerHourglass.js +++ b/ui/src/components/spinner/QSpinnerHourglass.js @@ -1,98 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - 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' - }) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerHourglass', @@ -101,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerInfinity.js b/ui/src/components/spinner/QSpinnerInfinity.js index b469c258746..25fb85da2c9 100644 --- a/ui/src/components/spinner/QSpinnerInfinity.js +++ b/ui/src/components/spinner/QSpinnerInfinity.js @@ -1,29 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('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' - }, [ - h('animate', { - attributeName: 'stroke-dashoffset', - from: '0', - to: '21.382410685221355', - begin: '0', - dur: '2s', - repeatCount: 'indefinite', - fill: 'freeze' - }) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerInfinity', @@ -32,14 +12,13 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - return () => h('svg', { class: classes.value, width: cSize.value, height: cSize.value, viewBox: '0 0 100 100', - preserveAspectRatio: 'xMidYMid' - }, svg) + preserveAspectRatio: 'xMidYMid', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerIos.js b/ui/src/components/spinner/QSpinnerIos.js index 3cbf2b06fd4..cc7bf9af95b 100644 --- a/ui/src/components/spinner/QSpinnerIos.js +++ b/ui/src/components/spinner/QSpinnerIos.js @@ -1,160 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('g', { - 'stroke-width': '4', - 'stroke-linecap': 'round' - }, [ - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(180)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(210)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(240)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15;.1', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(270)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25;.15', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(300)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35;.25', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(330)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45;.35', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(0)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55;.45', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(30)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65;.55', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(60)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7;.65', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(90)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85;.7', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(120)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1;.85', - repeatCount: 'indefinite' - }) - ]), - h('line', { - y1: '17', - y2: '29', - transform: 'translate(32,32) rotate(150)' - }, [ - h('animate', { - attributeName: 'stroke-opacity', - dur: '750ms', - values: '1;.85;.7;.65;.55;.45;.35;.25;.15;.1;0;1', - repeatCount: 'indefinite' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerIos', @@ -163,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - return () => h('svg', { class: classes.value, width: cSize.value, height: cSize.value, stroke: 'currentColor', fill: 'currentColor', - viewBox: '0 0 64 64' - }, svg) + viewBox: '0 0 64 64', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerOrbit.js b/ui/src/components/spinner/QSpinnerOrbit.js index 54b91f794f0..1c48ca17920 100644 --- a/ui/src/components/spinner/QSpinnerOrbit.js +++ b/ui/src/components/spinner/QSpinnerOrbit.js @@ -1,37 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('circle', { - cx: '50', - cy: '50', - r: '44', - fill: 'none', - 'stroke-width': '4', - 'stroke-opacity': '.5', - stroke: 'currentColor' - }), - h('circle', { - cx: '8', - cy: '54', - r: '6', - fill: 'currentColor', - 'stroke-width': '3', - stroke: 'currentColor' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'rotate', - from: '0 50 48', - to: '360 50 52', - dur: '2s', - repeatCount: 'indefinite' - }) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerOrbit', @@ -40,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerOval.js b/ui/src/components/spinner/QSpinnerOval.js index 43efb099e7e..75798fad3ac 100644 --- a/ui/src/components/spinner/QSpinnerOval.js +++ b/ui/src/components/spinner/QSpinnerOval.js @@ -1,36 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('g', { - transform: 'translate(1 1)', - 'stroke-width': '2', - fill: 'none', - 'fill-rule': 'evenodd' - }, [ - h('circle', { - 'stroke-opacity': '.5', - cx: '18', - cy: '18', - r: '18' - }), - h('path', { - d: 'M36 18c0-9.94-8.06-18-18-18' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'rotate', - from: '0 18 18', - to: '360 18 18', - dur: '1s', - repeatCount: 'indefinite' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerOval', @@ -39,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - return () => h('svg', { class: classes.value, stroke: 'currentColor', width: cSize.value, height: cSize.value, viewBox: '0 0 38 38', - xmlns: 'http://www.w3.org/2000/svg' - }, svg) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerPie.js b/ui/src/components/spinner/QSpinnerPie.js index 2cf5de146ec..42c261b7418 100644 --- a/ui/src/components/spinner/QSpinnerPie.js +++ b/ui/src/components/spinner/QSpinnerPie.js @@ -1,67 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('path', { - d: 'M0 50A50 50 0 0 1 50 0L50 50L0 50', - fill: 'currentColor', - opacity: '0.5' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'rotate', - from: '0 50 50', - to: '360 50 50', - dur: '0.8s', - repeatCount: 'indefinite' - }) - ]), - h('path', { - d: 'M50 0A50 50 0 0 1 100 50L50 50L50 0', - fill: 'currentColor', - opacity: '0.5' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'rotate', - from: '0 50 50', - to: '360 50 50', - dur: '1.6s', - repeatCount: 'indefinite' - }) - ]), - h('path', { - d: 'M100 50A50 50 0 0 1 50 100L50 50L100 50', - fill: 'currentColor', - opacity: '0.5' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'rotate', - from: '0 50 50', - to: '360 50 50', - dur: '2.4s', - repeatCount: 'indefinite' - }) - ]), - h('path', { - d: 'M50 100A50 50 0 0 1 0 50L50 50L50 100', - fill: 'currentColor', - opacity: '0.5' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'rotate', - from: '0 50 50', - to: '360 50 50', - dur: '3.2s', - repeatCount: 'indefinite' - }) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerPie', @@ -70,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerPuff.js b/ui/src/components/spinner/QSpinnerPuff.js index 61f9ec945e6..c2f228fe7c8 100644 --- a/ui/src/components/spinner/QSpinnerPuff.js +++ b/ui/src/components/spinner/QSpinnerPuff.js @@ -1,69 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('g', { - fill: 'none', - 'fill-rule': 'evenodd', - 'stroke-width': '2' - }, [ - h('circle', { - cx: '22', - cy: '22', - r: '1' - }, [ - h('animate', { - attributeName: 'r', - begin: '0s', - dur: '1.8s', - values: '1; 20', - calcMode: 'spline', - keyTimes: '0; 1', - keySplines: '0.165, 0.84, 0.44, 1', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'stroke-opacity', - begin: '0s', - dur: '1.8s', - values: '1; 0', - calcMode: 'spline', - keyTimes: '0; 1', - keySplines: '0.3, 0.61, 0.355, 1', - repeatCount: 'indefinite' - }) - ]), - h('circle', { - cx: '22', - cy: '22', - r: '1' - }, [ - h('animate', { - attributeName: 'r', - begin: '-0.9s', - dur: '1.8s', - values: '1; 20', - calcMode: 'spline', - keyTimes: '0; 1', - keySplines: '0.165, 0.84, 0.44, 1', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'stroke-opacity', - begin: '-0.9s', - dur: '1.8s', - values: '1; 0', - calcMode: 'spline', - keyTimes: '0; 1', - keySplines: '0.3, 0.61, 0.355, 1', - repeatCount: 'indefinite' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerPuff', @@ -72,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - return () => h('svg', { class: classes.value, stroke: 'currentColor', width: cSize.value, height: cSize.value, viewBox: '0 0 44 44', - xmlns: 'http://www.w3.org/2000/svg' - }, svg) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerRadio.js b/ui/src/components/spinner/QSpinnerRadio.js index 21a4f8cd7ac..d7448206c6b 100644 --- a/ui/src/components/spinner/QSpinnerRadio.js +++ b/ui/src/components/spinner/QSpinnerRadio.js @@ -1,62 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('g', { - transform: 'scale(0.55)' - }, [ - h('circle', { - cx: '30', - cy: '150', - r: '30', - fill: 'currentColor' - }, [ - h('animate', { - attributeName: 'opacity', - from: '0', - to: '1', - dur: '1s', - begin: '0', - repeatCount: 'indefinite', - keyTimes: '0;0.5;1', - values: '0;1;1' - }) - ]), - h('path', { - d: 'M90,150h30c0-49.7-40.3-90-90-90v30C63.1,90,90,116.9,90,150z', - fill: 'currentColor' - }, [ - h('animate', { - attributeName: 'opacity', - from: '0', - to: '1', - dur: '1s', - begin: '0.1', - repeatCount: 'indefinite', - keyTimes: '0;0.5;1', - values: '0;1;1' - }) - ]), - h('path', { - d: 'M150,150h30C180,67.2,112.8,0,30,0v30C96.3,30,150,83.7,150,150z', - fill: 'currentColor' - }, [ - h('animate', { - attributeName: 'opacity', - from: '0', - to: '1', - dur: '1s', - begin: '0.2', - repeatCount: 'indefinite', - keyTimes: '0;0.5;1', - values: '0;1;1' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerRadio', @@ -65,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerRings.js b/ui/src/components/spinner/QSpinnerRings.js index 7e1ca3f2987..d109e12dcbe 100644 --- a/ui/src/components/spinner/QSpinnerRings.js +++ b/ui/src/components/spinner/QSpinnerRings.js @@ -1,92 +1,9 @@ import { h } from 'vue' import useSpinner, { useSpinnerProps } from './use-spinner.js' - import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('g', { - fill: 'none', - 'fill-rule': 'evenodd', - transform: 'translate(1 1)', - 'stroke-width': '2' - }, [ - h('circle', { - cx: '22', - cy: '22', - r: '6' - }, [ - h('animate', { - attributeName: 'r', - begin: '1.5s', - dur: '3s', - values: '6;22', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'stroke-opacity', - begin: '1.5s', - dur: '3s', - values: '1;0', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'stroke-width', - begin: '1.5s', - dur: '3s', - values: '2;0', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('circle', { - cx: '22', - cy: '22', - r: '6' - }, [ - h('animate', { - attributeName: 'r', - begin: '3s', - dur: '3s', - values: '6;22', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'stroke-opacity', - begin: '3s', - dur: '3s', - values: '1;0', - calcMode: 'linear', - repeatCount: 'indefinite' - }), - h('animate', { - attributeName: 'stroke-width', - begin: '3s', - dur: '3s', - values: '2;0', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]), - h('circle', { - cx: '22', - cy: '22', - r: '8' - }, [ - h('animate', { - attributeName: 'r', - begin: '0s', - dur: '1.5s', - values: '6;1;2;3;4;5;6', - calcMode: 'linear', - repeatCount: 'indefinite' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerRings', @@ -95,15 +12,14 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - 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' - }, svg) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } }) diff --git a/ui/src/components/spinner/QSpinnerTail.js b/ui/src/components/spinner/QSpinnerTail.js index dab89ce03c0..953104a5358 100644 --- a/ui/src/components/spinner/QSpinnerTail.js +++ b/ui/src/components/spinner/QSpinnerTail.js @@ -4,67 +4,7 @@ import useSpinner, { useSpinnerProps } from './use-spinner.js' import { createComponent } from '../../utils/private.create/create.js' -const createSvg = () => [ - h('defs', [ - h('linearGradient', { - x1: '8.042%', - y1: '0%', - x2: '65.682%', - y2: '23.865%', - id: 'a' - }, [ - h('stop', { - 'stop-color': 'currentColor', - 'stop-opacity': '0', - offset: '0%' - }), - h('stop', { - 'stop-color': 'currentColor', - 'stop-opacity': '.631', - offset: '63.146%' - }), - h('stop', { - 'stop-color': 'currentColor', - offset: '100%' - }) - ]) - ]), - h('g', { - transform: 'translate(1 1)', - fill: 'none', - 'fill-rule': 'evenodd' - }, [ - h('path', { - d: 'M36 18c0-9.94-8.06-18-18-18', - stroke: 'url(#a)', - 'stroke-width': '2' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'rotate', - from: '0 18 18', - to: '360 18 18', - dur: '0.9s', - repeatCount: 'indefinite' - }) - ]), - h('circle', { - fill: 'currentColor', - cx: '36', - cy: '18', - r: '1' - }, [ - h('animateTransform', { - attributeName: 'transform', - type: 'rotate', - from: '0 18 18', - to: '360 18 18', - dur: '0.9s', - repeatCount: 'indefinite' - }) - ]) - ]) -] +const innerHTML = '' export default createComponent({ name: 'QSpinnerTail', @@ -73,14 +13,13 @@ export default createComponent({ setup (props) { const { cSize, classes } = useSpinner(props) - const svg = createSvg() - return () => h('svg', { class: classes.value, width: cSize.value, height: cSize.value, viewBox: '0 0 38 38', - xmlns: 'http://www.w3.org/2000/svg' - }, svg) + xmlns: 'http://www.w3.org/2000/svg', + innerHTML + }) } })