Skip to content

Commit 553f334

Browse files
graphierosgraphieros
committed
Added VueUiMiniLoader component
1 parent ae7bbe1 commit 553f334

File tree

7 files changed

+227
-4
lines changed

7 files changed

+227
-4
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
1515
![NPM](https://img.shields.io/npm/l/vue-data-ui)
1616
![npm](https://img.shields.io/npm/dt/vue-data-ui)
17-
![Static Badge](https://img.shields.io/badge/components-36-green)
17+
![Static Badge](https://img.shields.io/badge/components-37-green)
1818

1919
[Interactive documentation](https://vue-data-ui.graphieros.com/)
2020

@@ -70,6 +70,7 @@ Available components:
7070
- [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)
7171
- [VueUiIcon](https://vue-data-ui.graphieros.com/docs#vue-ui-icon)
7272
- [VueUiDigits](https://vue-data-ui.graphieros.com/docs#vue-ui-digits)
73+
- [VueUiMiniLoader](https://vue-data-ui.graphieros.com/docs#vue-ui-mini-loader)
7374

7475
# Installation
7576
```

‎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: 1 addition & 1 deletion
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.89",
4+
"version": "1.9.90",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import DigitsTest from "./components/vue-ui-digits.vue";
4848
import MoleculeTest from './components/vue-ui-molecule.vue';
4949
import DonutEvolutionTest from "./components/vue-ui-donut-evolution.vue";
5050
import TableSparklineTest from "./components/vue-ui-table-sparkline.vue";
51+
import MiniLoaderTest from "./components/vue-ui-mini-loader.vue";
5152
5253
const dataset = ref([
5354
{
@@ -3831,6 +3832,28 @@ const moodRadarConfig = ref({
38313832
},
38323833
])
38333834
3835+
const miniLoaderConfig = ref({
3836+
type: "bar",
3837+
onion: {
3838+
gutterColor: "#CCCCCC",
3839+
gutterOpacity: 0.3,
3840+
gutterBlur: 0.2,
3841+
trackHueRotate: 360,
3842+
trackBlur: 2,
3843+
trackColor: "#42d392"
3844+
},
3845+
line: {
3846+
color: "#42d392",
3847+
blur: 1,
3848+
hueRotate: 360
3849+
},
3850+
bar: {
3851+
color: "#42d392",
3852+
blur: 1,
3853+
hueRotate: 360
3854+
}
3855+
})
3856+
38343857
</script>
38353858

38363859
<template>
@@ -3931,6 +3954,24 @@ const moodRadarConfig = ref({
39313954
</template>
39323955
</Box>
39333956

3957+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_mini_loader)">
3958+
<template #title>
3959+
<!-- <BaseIcon name="chartTable"/> -->
3960+
VueUiMiniLoader
3961+
</template>
3962+
<template #info>
3963+
</template>
3964+
<template #dev>
3965+
<MiniLoaderTest :config="miniLoaderConfig" />
3966+
</template>
3967+
<!-- <template #prod>
3968+
<VueUiTableSparkline :dataset="tableSparklineDataset"/>
3969+
</template> -->
3970+
<template #config>
3971+
{{ PROD_CONFIG.vue_ui_mini_loader }}
3972+
</template>
3973+
</Box>
3974+
39343975
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_table_sparkline)">
39353976
<template #title>
39363977
<BaseIcon name="chartTable"/>

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

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<script setup>
2+
import { ref, computed, nextTick } from "vue";
3+
import {
4+
createUid,
5+
palette,
6+
} from '../lib';
7+
import { useNestedProp } from "../useNestedProp";
8+
import mainConfig from "../default_configs.json";
9+
10+
const props = defineProps({
11+
config: {
12+
type: Object,
13+
default() {
14+
return {}
15+
}
16+
},
17+
dataset: {
18+
type: Array,
19+
default() {
20+
return []
21+
}
22+
},
23+
});
24+
25+
const uid = ref(createUid());
26+
27+
const defaultConfig = ref(mainConfig.vue_ui_mini_loader);
28+
29+
const loaderConfig = computed(() => {
30+
return useNestedProp({
31+
userConfig: props.config,
32+
defaultConfig: defaultConfig.value
33+
});
34+
});
35+
36+
const viewBox = ref({
37+
onion: "-10 -10 84 84",
38+
line: "-10 -10 112 84",
39+
bar: "-10 -10 106 84"
40+
})
41+
42+
const onionStyle = computed(() => {
43+
return {
44+
gutter: `stroke:${loaderConfig.value.onion.gutterColor};opacity:${loaderConfig.value.onion.gutterOpacity};`,
45+
gutterBlur: `filter:blur(${loaderConfig.value.onion.gutterBlur}px);`
46+
}
47+
})
48+
49+
const trackBlur = computed(() => `blur(${loaderConfig.value.onion.trackBlur}px) hue-rotate(${loaderConfig.value.onion.trackHueRotate}deg)`);
50+
51+
const lineBlur = computed(() => `blur(${loaderConfig.value.line.blur}px) hue-rotate(${loaderConfig.value.line.hueRotate}deg)`);
52+
53+
const barBlur = computed(() => `blur(${loaderConfig.value.bar.blur}px) hue-rotate(${loaderConfig.value.bar.hueRotate}deg)`);
54+
55+
</script>
56+
57+
<template>
58+
<svg :viewBox="viewBox[loaderConfig.type]" style="background: transparent" width="100%">
59+
<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"/>
63+
64+
<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"/>
65+
<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"/>
66+
<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"/>
67+
</g>
68+
<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"/>
70+
</g>
71+
<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"/>
73+
</g>
74+
</svg>
75+
</template>
76+
77+
<style scoped>
78+
79+
path.onion-animated {
80+
stroke-dasharray: 0;
81+
stroke-dashoffset: 0;
82+
animation: onion-groove infinite cubic-bezier(.53,.15,.57,.93) 3s;
83+
}
84+
85+
@keyframes onion-groove {
86+
from {
87+
stroke-dasharray: 160;
88+
stroke-dashoffset: -140;
89+
filter: blur(0px);
90+
}
91+
to {
92+
stroke-dasharray: 160;
93+
stroke-dashoffset: 0;
94+
filter: v-bind(trackBlur);
95+
}
96+
}
97+
path.line-animated {
98+
stroke-dasharray: 0;
99+
stroke-dashoffset: 0;
100+
animation: line-funk infinite cubic-bezier(.53,.15,.57,.93) 3s;
101+
}
102+
103+
@keyframes line-funk {
104+
from {
105+
stroke-dasharray: 300;
106+
stroke-dashoffset: 300;
107+
filter: blur(0px);
108+
}
109+
to {
110+
stroke-dasharray: 300;
111+
stroke-dashoffset: 100;
112+
filter: v-bind(lineBlur);
113+
}
114+
}
115+
116+
path.bar-animated {
117+
stroke-dasharray: 0;
118+
stroke-dashoffset: 0;
119+
animation: bar-jazz infinite cubic-bezier(.53,.15,.57,.93) 3s;
120+
}
121+
122+
@keyframes bar-jazz {
123+
from {
124+
stroke-dasharray: 60;
125+
stroke-dashoffset: 60;
126+
filter: blur(0px);
127+
}
128+
to {
129+
stroke-dasharray: 60;
130+
stroke-dashoffset: 0;
131+
filter: v-bind(barBlur);
132+
}
133+
}
134+
</style>

‎src/default_configs.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3080,5 +3080,26 @@
30803080
"userOptions": {
30813081
"show": true
30823082
}
3083+
},
3084+
"vue_ui_mini_loader": {
3085+
"type": "onion",
3086+
"onion": {
3087+
"gutterColor": "#CCCCCC",
3088+
"gutterOpacity": 0,
3089+
"gutterBlur": 0,
3090+
"trackHueRotate": 20,
3091+
"trackBlur": 5,
3092+
"trackColor": "#42d392"
3093+
},
3094+
"line": {
3095+
"color": "#42d392",
3096+
"blur": 1,
3097+
"hueRotate": 20
3098+
},
3099+
"bar": {
3100+
"color": "#42d392",
3101+
"blur": 1,
3102+
"hueRotate": 20
3103+
}
30833104
}
30843105
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,32 @@ declare module 'vue-data-ui' {
55
[key: string]: unknown;
66
}
77

8+
export type VueUiMiniLoaderConfig = {
9+
type?: "line" | "bar" | "onion";
10+
onion?: {
11+
gutterColor?: string;
12+
gutterOpacity?: number;
13+
gutterBlur?: number;
14+
trackHueRotate?: number;
15+
trackBlur?: number;
16+
trackColor?: string;
17+
};
18+
line?: {
19+
color?: string;
20+
blur?: number;
21+
hueRotate?: number;
22+
};
23+
bar?: {
24+
color?: string;
25+
blur?: number;
26+
hueRotate?: number;
27+
}
28+
}
29+
30+
export const VueUiMiniLoader: DefineComponent<{
31+
config?: VueUiMiniLoaderConfig;
32+
}>
33+
834
export const Arrow: DefineComponent<{
935
markerEnd?: boolean,
1036
markerSize?: number,

0 commit comments

Comments
 (0)