Skip to content

Commit

Permalink
feat+refactor(QSpinner): mount & patch faster
Browse files Browse the repository at this point in the history
  • Loading branch information
@rstoenescu
rstoenescu committed Sep 14, 2024
1 parent b42ea09 commit 1d807ab
Show file tree
Hide file tree
Showing 22 changed files with 88 additions and 1,619 deletions.
74 changes: 4 additions & 70 deletions ui/src/components/spinner/QSpinnerAudio.js
View file
Original file line number Diff line number Diff line change
@@ -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 = '<g transform="matrix(1 0 0 -1 0 80)"><rect width="10" height="20" rx="3"><animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="15" width="10" height="80" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="30" width="10" height="50" rx="3"><animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="45" width="10" height="30" rx="3"><animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"></animate></rect></g>'

export default createComponent({
name: 'QSpinnerAudio',
Expand All @@ -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
})
}
})
90 changes: 4 additions & 86 deletions ui/src/components/spinner/QSpinnerBall.js
View file
Original file line number Diff line number Diff line change
@@ -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 = '<g transform="translate(1 1)" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="5" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;5;50;50" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" begin="0s" dur="2.2s" values="5;27;49;5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="27" cy="5" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" from="5" to="5" values="5;50;50;5" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" begin="0s" dur="2.2s" from="27" to="27" values="27;49;5;27" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="49" cy="50" r="5"><animate attributeName="cy" begin="0s" dur="2.2s" values="50;50;5;50" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="cx" from="49" to="49" begin="0s" dur="2.2s" values="49;5;27;49" calcMode="linear" repeatCount="indefinite"></animate></circle></g>'

export default createComponent({
name: 'QSpinnerBall',
Expand All @@ -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
})
}
})
129 changes: 4 additions & 125 deletions ui/src/components/spinner/QSpinnerBars.js
View file
Original file line number Diff line number Diff line change
@@ -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 = '<rect y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="30" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="60" width="15" height="140" rx="6"><animate attributeName="height" begin="0s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="90" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.25s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.25s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect><rect x="120" y="10" width="15" height="120" rx="6"><animate attributeName="height" begin="0.5s" dur="1s" values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="y" begin="0.5s" dur="1s" values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear" repeatCount="indefinite"></animate></rect>'

export default createComponent({
name: 'QSpinnerBars',
Expand All @@ -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
})
}
})
Loading

0 comments on commit 1d807ab

Please sign in to comment.