Skip to content

Commit 7bcc7dd

Browse files
graphierosgraphieros
committed
VueUiMiniLoader minor improvements
1 parent e17bf69 commit 7bcc7dd

File tree

6 files changed

+69
-35
lines changed

6 files changed

+69
-35
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "1.9.91",
4+
"version": "1.9.92",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [
@@ -63,7 +63,7 @@
6363
"dev": "vite",
6464
"clean": "node cleanup.cjs",
6565
"build": "npm run clean && vite build --mode production && node copy-types.cjs && npm i",
66-
"prod": "npm run test && npx cypress run --component && npm run clean && vite build --mode production && node copy-types.cjs && npm i",
66+
"prod": "npm run test && npx cypress run --component && npm run clean && vite build --mode production && node copy-types.cjs",
6767
"build:dev": "npm run build && npm run dev",
6868
"test": "vitest --run",
6969
"test:w": "vitest --watch",
@@ -78,7 +78,6 @@
7878
"sass": "^1.57.1",
7979
"vite": "^4.4.5",
8080
"vitest": "^0.34.1",
81-
"vue": "^3.3.4",
82-
"vue-data-ui": "file:../vue-data-ui"
81+
"vue": "^3.3.4"
8382
}
8483
}

‎src/App.vue

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3833,24 +3833,30 @@ const moodRadarConfig = ref({
38333833
])
38343834
38353835
const miniLoaderConfig = ref({
3836-
type: "bar",
3836+
type: "line",
38373837
onion: {
38383838
gutterColor: "#CCCCCC",
38393839
gutterOpacity: 0.3,
38403840
gutterBlur: 0.2,
38413841
trackHueRotate: 360,
3842-
trackBlur: 2,
3842+
trackBlur: 1,
38433843
trackColor: "#42d392"
38443844
},
38453845
line: {
3846-
color: "#42d392",
3847-
blur: 1,
3848-
hueRotate: 360
3846+
gutterColor: "#CCCCCC",
3847+
gutterOpacity: 0.3,
3848+
gutterBlur: 0,
3849+
trackHueRotate: 360,
3850+
trackBlur: 1,
3851+
trackColor: "#42d392"
38493852
},
38503853
bar: {
3851-
color: "#42d392",
3852-
blur: 1,
3853-
hueRotate: 360
3854+
gutterColor: "#CCCCCC",
3855+
gutterOpacity: 0.3,
3856+
gutterBlur: 0.2,
3857+
trackHueRotate: 360,
3858+
trackBlur: 1,
3859+
trackColor: "#42d392"
38543860
}
38553861
})
38563862

‎src/components/vue-ui-mini-loader.vue

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,37 +39,54 @@ const viewBox = ref({
3939
bar: "-10 -10 106 84"
4040
})
4141
42+
const lineStyle = computed(() => {
43+
return {
44+
gutter: `stroke:${loaderConfig.value.line.gutterColor};opacity:${loaderConfig.value.line.gutterOpacity};`,
45+
gutterBlur: `filter:blur(${loaderConfig.value.line.gutterBlur}px);`
46+
}
47+
})
48+
const barStyle = computed(() => {
49+
return {
50+
gutter: `stroke:${loaderConfig.value.bar.gutterColor};opacity:${loaderConfig.value.bar.gutterOpacity};`,
51+
gutterBlur: `filter:blur(${loaderConfig.value.bar.gutterBlur}px);`
52+
}
53+
})
4254
const onionStyle = computed(() => {
4355
return {
4456
gutter: `stroke:${loaderConfig.value.onion.gutterColor};opacity:${loaderConfig.value.onion.gutterOpacity};`,
4557
gutterBlur: `filter:blur(${loaderConfig.value.onion.gutterBlur}px);`
4658
}
4759
})
4860
61+
4962
const trackBlur = computed(() => `blur(${loaderConfig.value.onion.trackBlur}px) hue-rotate(${loaderConfig.value.onion.trackHueRotate}deg)`);
5063
51-
const lineBlur = computed(() => `blur(${loaderConfig.value.line.blur}px) hue-rotate(${loaderConfig.value.line.hueRotate}deg)`);
64+
const lineBlur = computed(() => `blur(${loaderConfig.value.line.trackBlur}px) hue-rotate(${loaderConfig.value.line.trackHueRotate}deg)`);
5265
53-
const barBlur = computed(() => `blur(${loaderConfig.value.bar.blur}px) hue-rotate(${loaderConfig.value.bar.hueRotate}deg)`);
66+
const barBlur = computed(() => `blur(${loaderConfig.value.bar.trackBlur}px) hue-rotate(${loaderConfig.value.bar.trackHueRotate}deg)`);
5467
5568
</script>
5669

5770
<template>
5871
<svg :viewBox="viewBox[loaderConfig.type]" style="background: transparent" width="100%">
5972
<g v-if="loaderConfig.type === 'onion'">
60-
<path d="M 3 32 C 3 45 12 62 32 62 A 1 1 0 0 0 32 3" stroke="black" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>
61-
<path d="M 13 32 C 13 39 19 52 32 52 A 1 1 0 0 0 32 13" stroke="black" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>
62-
<path d="M 23 32 C 23 37 26.5 41 32 41 A 1 1 0 0 0 32 25" stroke="black" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>
73+
<path d="M 3 32 C 3 45 12 62 32 62 A 1 1 0 0 0 32 3" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>
74+
<path d="M 13 32 C 13 39 19 52 32 52 A 1 1 0 0 0 32 13" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>
75+
<path d="M 23 32 C 23 37 26.5 41 32 41 A 1 1 0 0 0 32 25" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>
6376

6477
<path d="M 3 32 C 3 45 12 62 32 62 A 1 1 0 0 0 32 3" :stroke="loaderConfig.onion.trackColor" stroke-width="4" fill="none" stroke-linecap="round" class="onion-animated"/>
6578
<path d="M 13 32 C 13 39 19 52 32 52 A 1 1 0 0 0 32 13" :stroke="loaderConfig.onion.trackColor" stroke-width="4" fill="none" stroke-linecap="round" class="onion-animated"/>
6679
<path d="M 23 32 C 23 37 26.5 41 32 41 A 1 1 0 0 0 32 25" :stroke="loaderConfig.onion.trackColor" stroke-width="4" fill="none" stroke-linecap="round" class="onion-animated"/>
6780
</g>
6881
<g v-if="loaderConfig.type === 'line'">
69-
<path d="M 3 62 C 6 57 6 48 11 45 C 16 44 17 53 22 52 C 27 49 25 32 30 31 C 34 29 37 47 42 47 C 46 47 45 38 49 36 C 53 34 56 45 61 45 C 66 45 65 24 69 24 C 73 22 75 35 79 34 C 84 34 83 11 91 5" :stroke="loaderConfig.line.color" stroke-width="4" fill="none" stroke-linecap="round" class="line-animated"/>
82+
<path d="M 3 62 C 6 57 6 48 11 45 C 16 44 17 53 22 52 C 27 49 25 32 30 31 C 34 29 37 47 42 47 C 46 47 45 38 49 36 C 53 34 56 45 61 45 C 66 45 65 24 69 24 C 73 22 75 35 79 34 C 84 34 83 11 91 5" stroke-width="4" fill="none" stroke-linecap="round" :style="lineStyle.gutter + lineStyle.gutterBlur"/>
83+
84+
<path d="M 3 62 C 6 57 6 48 11 45 C 16 44 17 53 22 52 C 27 49 25 32 30 31 C 34 29 37 47 42 47 C 46 47 45 38 49 36 C 53 34 56 45 61 45 C 66 45 65 24 69 24 C 73 22 75 35 79 34 C 84 34 83 11 91 5" :stroke="loaderConfig.line.trackColor" stroke-width="4" fill="none" stroke-linecap="round" class="line-animated"/>
7085
</g>
7186
<g v-if="loaderConfig.type === 'bar'">
72-
<path d="M 3 62 L 3 44 M 12 62 L 12 49 M 21 62 L 21 37 M 30 62 L 30 29 M 39 62 L 39 43 M 48 62 L 48 16 M 57 62 L 57 24 M 66 62 L 66 35 M 75 62 L 75 20 M 84 62 L 84 5" :stroke="loaderConfig.bar.color" stroke-width="4" fill="none" stroke-linecap="round" class="bar-animated"/>
87+
<path d="M 3 62 L 3 44 M 12 62 L 12 49 M 21 62 L 21 37 M 30 62 L 30 29 M 39 62 L 39 43 M 48 62 L 48 16 M 57 62 L 57 24 M 66 62 L 66 35 M 75 62 L 75 20 M 84 62 L 84 5" stroke-width="4" fill="none" stroke-linecap="round" :style="barStyle.gutter + barStyle.gutterBlur"/>
88+
89+
<path d="M 3 62 L 3 44 M 12 62 L 12 49 M 21 62 L 21 37 M 30 62 L 30 29 M 39 62 L 39 43 M 48 62 L 48 16 M 57 62 L 57 24 M 66 62 L 66 35 M 75 62 L 75 20 M 84 62 L 84 5" :stroke="loaderConfig.bar.trackColor" stroke-width="4" fill="none" stroke-linecap="round" class="bar-animated"/>
7390
</g>
7491
</svg>
7592
</template>

‎src/default_configs.json

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3085,21 +3085,27 @@
30853085
"type": "onion",
30863086
"onion": {
30873087
"gutterColor": "#CCCCCC",
3088-
"gutterOpacity": 0,
3088+
"gutterOpacity": 0.3,
30893089
"gutterBlur": 0,
30903090
"trackHueRotate": 20,
3091-
"trackBlur": 5,
3091+
"trackBlur": 1,
30923092
"trackColor": "#42d392"
30933093
},
30943094
"line": {
3095-
"color": "#42d392",
3096-
"blur": 1,
3097-
"hueRotate": 20
3095+
"gutterColor": "#CCCCCC",
3096+
"gutterOpacity": 0.3,
3097+
"gutterBlur": 0,
3098+
"trackHueRotate": 20,
3099+
"trackBlur": 1,
3100+
"trackColor": "#42d392"
30983101
},
30993102
"bar": {
3100-
"color": "#42d392",
3101-
"blur": 1,
3102-
"hueRotate": 20
3103+
"gutterColor": "#CCCCCC",
3104+
"gutterOpacity": 0.3,
3105+
"gutterBlur": 0,
3106+
"trackHueRotate": 20,
3107+
"trackBlur": 1,
3108+
"trackColor": "#42d392"
31033109
}
31043110
}
31053111
}

‎types/vue-data-ui.d.ts

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,20 @@ declare module 'vue-data-ui' {
1616
trackColor?: string;
1717
};
1818
line?: {
19-
color?: string;
20-
blur?: number;
21-
hueRotate?: number;
19+
gutterColor?: string;
20+
gutterOpacity?: number;
21+
gutterBlur?: number;
22+
trackHueRotate?: number;
23+
trackBlur?: number;
24+
trackColor?: string;
2225
};
2326
bar?: {
24-
color?: string;
25-
blur?: number;
26-
hueRotate?: number;
27+
gutterColor?: string;
28+
gutterOpacity?: number;
29+
gutterBlur?: number;
30+
trackHueRotate?: number;
31+
trackBlur?: number;
32+
trackColor?: string;
2733
}
2834
}
2935

0 commit comments

Comments
 (0)