vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
131 lines (130 loc) • 5.38 kB
JavaScript
import { useCssVars as M, unref as e, computed as o, ref as m, openBlock as u, createElementBlock as a, createElementVNode as r, normalizeStyle as l, createCommentVNode as i } from "vue";
import { u as y } from "./useNestedProp-Cj0kHD7k.js";
import { u as L, X as b } from "./index-WrV3SAID.js";
import { _ as v } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const B = ["xmlns", "viewBox"], x = { key: 0 }, $ = ["stroke"], w = ["stroke"], A = ["stroke"], N = { key: 1 }, O = ["stroke"], S = { key: 2 }, F = ["stroke"], I = {
__name: "vue-ui-mini-loader",
props: {
config: {
type: Object,
default() {
return {};
}
}
},
setup(d) {
M((f) => ({
a1772a34: e(g),
e5bbb532: e(_),
c88232a4: e(h)
}));
const { vue_ui_mini_loader: p } = L(), k = d, t = o(() => y({
userConfig: k.config,
defaultConfig: p
})), C = m({
onion: "-10 -10 84 84",
line: "-10 -10 112 84",
bar: "-10 -10 106 84"
}), s = o(() => ({
gutter: `stroke:${t.value.line.gutterColor};opacity:${t.value.line.gutterOpacity};`,
gutterBlur: `filter:blur(${t.value.line.gutterBlur}px);`
})), c = o(() => ({
gutter: `stroke:${t.value.bar.gutterColor};opacity:${t.value.bar.gutterOpacity};`,
gutterBlur: `filter:blur(${t.value.bar.gutterBlur}px);`
})), n = o(() => ({
gutter: `stroke:${t.value.onion.gutterColor};opacity:${t.value.onion.gutterOpacity};`,
gutterBlur: `filter:blur(${t.value.onion.gutterBlur}px);`
})), g = o(() => `blur(${t.value.onion.trackBlur}px) hue-rotate(${t.value.onion.trackHueRotate}deg)`), _ = o(() => `blur(${t.value.line.trackBlur}px) hue-rotate(${t.value.line.trackHueRotate}deg)`), h = o(() => `blur(${t.value.bar.trackBlur}px) hue-rotate(${t.value.bar.trackHueRotate}deg)`);
return (f, E) => (u(), a("svg", {
xmlns: e(b),
viewBox: e(C)[e(t).type],
style: { background: "transparent" },
width: "100%"
}, [
e(t).type === "onion" ? (u(), a("g", x, [
r("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: l(e(n).gutter + e(n).gutterBlur)
}, null, 4),
r("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: l(e(n).gutter + e(n).gutterBlur)
}, null, 4),
r("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: l(e(n).gutter + e(n).gutterBlur)
}, null, 4),
r("path", {
d: "M 3 32 C 3 45 12 62 32 62 A 1 1 0 0 0 32 3",
stroke: e(t).onion.trackColor,
"stroke-width": "4",
fill: "none",
"stroke-linecap": "round",
class: "onion-animated"
}, null, 8, $),
r("path", {
d: "M 13 32 C 13 39 19 52 32 52 A 1 1 0 0 0 32 13",
stroke: e(t).onion.trackColor,
"stroke-width": "4",
fill: "none",
"stroke-linecap": "round",
class: "onion-animated"
}, null, 8, w),
r("path", {
d: "M 23 32 C 23 37 26.5 41 32 41 A 1 1 0 0 0 32 25",
stroke: e(t).onion.trackColor,
"stroke-width": "4",
fill: "none",
"stroke-linecap": "round",
class: "onion-animated"
}, null, 8, A)
])) : i("", !0),
e(t).type === "line" ? (u(), a("g", N, [
r("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: l(e(s).gutter + e(s).gutterBlur)
}, null, 4),
r("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: e(t).line.trackColor,
"stroke-width": "4",
fill: "none",
"stroke-linecap": "round",
class: "line-animated"
}, null, 8, O)
])) : i("", !0),
e(t).type === "bar" ? (u(), a("g", S, [
r("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: l(e(c).gutter + e(c).gutterBlur)
}, null, 4),
r("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: e(t).bar.trackColor,
"stroke-width": "4",
fill: "none",
"stroke-linecap": "round",
class: "bar-animated"
}, null, 8, F)
])) : i("", !0)
], 8, B));
}
}, U = /* @__PURE__ */ v(I, [["__scopeId", "data-v-d78afb42"]]);
export {
U as default
};