vue-data-ui 3.24.0 → 3.24.1

package/dist/vue-ui-sparkbar-BykHIrxz.js

@@ -0,0 +1,401 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { Ht as t, It as n, Jt as r, Nt as i, S as a, Ut as ee, X as o, Xt as s, i as c, mt as te, nt as l, q as ne, t as re, w as ie } from "./lib-DfMn_3jf.js";
+import { n as ae, t as oe } from "./useHints-Dq_w2E8B.js";
+import { t as se } from "./useConfig-DcMi9POF.js";
+import { n as u, t as ce } from "./BaseScanner-DZvpgOjM.js";
+import { t as d } from "./useNestedProp-CLEe1P5W.js";
+import { t as le } from "./useThemeCheck-C43Tcqmk.js";
+import { t as ue } from "./DefGrad-DVBqDjhO.js";
+import { t as de } from "./usePrefersMotion-BC-CsqR1.js";
+import { t as fe } from "./vue_ui_sparkbar-z6qO--Kf.js";
+import { Fragment as f, computed as p, createBlock as pe, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineAsyncComponent as me, guardReactiveProps as he, mergeProps as v, nextTick as y, normalizeProps as ge, normalizeStyle as b, onMounted as x, openBlock as S, ref as C, renderList as _e, renderSlot as w, toDisplayString as T, toRefs as E, unref as D, useSlots as O, watch as k } from "vue";
+//#region src/components/vue-ui-sparkbar.vue
+var A = /* @__PURE__ */ e({ default: () => L }), j = [
+	"onClick",
+	"onMouseenter",
+	"onMouseleave"
+], M = {
+	key: 1,
+	class: "vue-ui-sparkbar-datapoint-value"
+}, N = ["xmlns", "viewBox"], P = [
+	"height",
+	"width",
+	"fill",
+	"rx"
+], F = [
+	"height",
+	"width",
+	"fill",
+	"rx"
+], I = [
+	"height",
+	"width",
+	"fill",
+	"rx"
+], ve = {
+	key: 2,
+	ref: "source",
+	dir: "auto"
+}, L = {
+	__name: "vue-ui-sparkbar",
+	props: {
+		config: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		dataset: {
+			type: Array,
+			default() {
+				return [];
+			}
+		},
+		backgroundOpacity: {
+			type: Number,
+			default: null
+		}
+	},
+	emits: ["selectDatapoint"],
+	setup(e, { emit: A }) {
+		let L = me(() => import("./PackageVersion-DtE5p3O7.js").then((e) => e.t)), { vue_ui_sparkbar: ye } = se(), { isThemeValid: be, warnInvalidTheme: xe } = le(), R = de(), z = e, B = O(), V = C(ne()), H = C(K()), U = p(() => H.value.debug);
+		x(() => {
+			B["chart-background"] && U.value && console.warn("VueUiSparkbar does not support the #chart-background slot.");
+		}), ae({
+			config: () => H.value,
+			dataset: () => z.dataset,
+			component: "VueUiSparkbar",
+			rules: [oe.noHint]
+		});
+		let Se = p(() => s({
+			defaultConfig: { style: {
+				backgroundColor: "#99999930",
+				animation: { show: !1 },
+				layout: { independant: !0 },
+				gutter: {
+					backgroundColor: "#6A6A6A",
+					opacity: 50
+				},
+				bar: { gradient: { underlayerColor: "#6A6A6A" } }
+			} },
+			userConfig: H.value.skeletonConfig ?? {}
+		})), { loading: W, FINAL_DATASET: G, manualLoading: Ce } = u({
+			...E(z),
+			FINAL_CONFIG: H,
+			prepareConfig: K,
+			skeletonDataset: z.config?.skeletonDataset ?? [
+				{
+					name: "_",
+					value: 21,
+					target: 25,
+					color: "#808080"
+				},
+				{
+					name: "_",
+					value: 13,
+					target: 25,
+					color: "#ADADAD"
+				},
+				{
+					name: "_",
+					value: 8,
+					target: 25,
+					color: "#DBDBDB"
+				}
+			],
+			skeletonConfig: s({
+				defaultConfig: H.value,
+				userConfig: Se.value
+			})
+		});
+		function K() {
+			let e = d({
+				userConfig: z.config,
+				defaultConfig: ye
+			}), t = e.theme;
+			if (!t) return e;
+			if (!be.value(e)) return xe(e), e;
+			let i = d({
+				userConfig: fe[t] || z.config,
+				defaultConfig: e
+			}), a = d({
+				userConfig: z.config,
+				defaultConfig: i
+			});
+			return {
+				...a,
+				customPalette: a.customPalette.length ? a.customPalette : r[t] || n
+			};
+		}
+		k(() => z.config, (e) => {
+			H.value = K();
+		}, { deep: !0 });
+		let we = p(() => ie(H.value.customPalette)), q = C(G.value.map((e) => ({
+			...e,
+			value: H.value.style.animation.show ? 0 : e.value || 0,
+			formatter: e.formatter || null
+		}))), J = C(null);
+		x(async () => {
+			i(z.dataset) && l({
+				componentName: "VueUiSparkbar",
+				type: "dataset",
+				debug: U.value
+			}), Y();
+		});
+		function Y() {
+			if (H.value.style.animation.show && !R.value) {
+				let e = H.value.style.animation.animationFrames, t = G.value.map((t, n) => t.value / e), n = G.value.map((e) => e.value || 0).reduce((e, t) => e + t, 0), r = 0;
+				function i() {
+					r += n / e, r < n ? (q.value = q.value.map((e, n) => ({
+						...e,
+						value: e.value += t[n]
+					})), J.value = requestAnimationFrame(i)) : q.value = G.value.map((e) => ({
+						...e,
+						value: e.value || 0,
+						formatter: e.formatter || null
+					}));
+				}
+				i();
+			}
+		}
+		k(() => G.value, async (e) => {
+			cancelAnimationFrame(J.value), q.value = G.value.map((e) => ({
+				...e,
+				value: H.value.style.animation.show && !R.value ? 0 : e.value || 0,
+				formatter: e.formatter || null
+			})), y(Y);
+		}, { deep: !0 });
+		let X = C({
+			width: 500,
+			height: 16
+		}), Te = p(() => Math.max(...G.value.map((e) => e.value))), Ee = p(() => (U.value && G.value.forEach((e, t) => {
+			te({
+				datasetObject: e,
+				requiredAttributes: ["name", "value"]
+			}).forEach((e) => {
+				l({
+					componentName: "VueUiSparkbar",
+					type: "datasetSerieAttribute",
+					property: e,
+					index: t
+				});
+			});
+		}), q.value.map((e, t) => ({
+			...e,
+			value: e.value || 0,
+			color: a(e.color) || we.value[t] || n[t] || n[t % n.length]
+		}))));
+		function De(e) {
+			return e / Te.value;
+		}
+		function Z(e) {
+			return H.value.style.layout.independant ? e.target ? e.value / e.target : H.value.style.layout.percentage ? e.value > 100 ? 1 : e.value / 100 : H.value.style.layout.target === 0 ? 1 : e.value / H.value.style.layout.target : De(e.value);
+		}
+		function Q(e) {
+			return H.value.style.layout.independant && e.target || H.value.style.layout.target;
+		}
+		let Oe = A;
+		function ke(e, t) {
+			Oe("selectDatapoint", {
+				datapoint: e,
+				index: t
+			}), H.value.events.datapointClick && H.value.events.datapointClick({
+				datapoint: e,
+				seriesIndex: t
+			});
+		}
+		function Ae(e, t) {
+			H.value.events.datapointEnter && H.value.events.datapointEnter({
+				datapoint: e,
+				seriesIndex: t
+			});
+		}
+		function je(e, t) {
+			H.value.events.datapointLeave && H.value.events.datapointLeave({
+				datapoint: e,
+				seriesIndex: t
+			});
+		}
+		let $ = p(() => H.value.style.bar.borderRadius == null ? X.value.height / 2 : Math.min(X.value.height / 2, H.value.style.bar.borderRadius));
+		return (e, n) => (S(), h("div", {
+			class: "vue-data-ui-component vue-ui-sparkbar",
+			style: b({
+				width: "100%",
+				position: "relative",
+				fontFamily: H.value.style.fontFamily,
+				background: z.backgroundOpacity === null ? H.value.style.backgroundColor : D(t)(H.value.style.backgroundColor, z.backgroundOpacity)
+			})
+		}, [
+			e.$slots.title ? w(e.$slots, "title", ge(he({ title: {
+				...e.title,
+				title: H.value.style.title.text,
+				subtitle: H.value.style.title.subtitle.text
+			} })), void 0, void 0, 0) : m("", !0),
+			!e.$slots.title && H.value.style.title.text ? (S(), h("div", {
+				key: 1,
+				class: "vue-ui-sparkbar-title-container",
+				style: b({
+					background: H.value.style.title.backgroundColor,
+					margin: H.value.style.title.margin,
+					textAlign: H.value.style.title.textAlign
+				})
+			}, [g("div", {
+				class: "vue-ui-sparkbar-title",
+				style: b({
+					fontSize: H.value.style.title.fontSize + "px",
+					color: H.value.style.title.color,
+					fontWeight: H.value.style.title.bold ? "bold" : "normal"
+				})
+			}, T(H.value.style.title.text), 5), H.value.style.title.subtitle.text ? (S(), h("div", {
+				key: 0,
+				class: "vue-ui-sparkbar-subtitle",
+				style: b({
+					fontSize: H.value.style.title.subtitle.fontSize + "px",
+					color: H.value.style.title.subtitle.color,
+					fontWeight: H.value.style.title.subtitle.bold ? "bold" : "normal"
+				})
+			}, T(H.value.style.title.subtitle.text), 5)) : m("", !0)], 4)) : m("", !0),
+			(S(!0), h(f, null, _e(Ee.value, (n, r) => (S(), h("div", {
+				style: b(`display:flex !important;${["left", "right"].includes(H.value.style.labels.name.position) ? `flex-direction: ${H.value.style.labels.name.position === "right" ? "row-reverse" : "row"} !important` : "flex-direction:column !important"};gap:${H.value.style.gap}px !important;align-items:center;${D(G).length > 0 && r !== D(G).length - 1 ? "margin-bottom:6px" : ""}`),
+				onClick: (e) => ke(n, r),
+				onMouseenter: (e) => Ae(n, r),
+				onMouseleave: (e) => je(n, r)
+			}, [
+				D(W) ? m("", !0) : w(e.$slots, "data-label", v({ ref_for: !0 }, { bar: {
+					...n,
+					target: Q(n),
+					valueLabel: D(c)(n.formatter, n.value, D(o)({
+						p: n.prefix || "",
+						v: n.value,
+						s: n.suffix || "",
+						r: n.rounding || 0
+					}), {
+						datapoint: n,
+						seriesIndex: r
+					}),
+					targetLabel: D(c)(n.formatter, Q(n), D(o)({
+						p: n.prefix || "",
+						v: Q(n),
+						s: n.suffix || "",
+						r: n.rounding || 0
+					}), {
+						datapoint: n,
+						seriesIndex: r
+					})
+				} }), void 0, void 0, 0),
+				!e.$slots["data-label"] || D(W) ? (S(), h("div", {
+					key: 1,
+					style: b({
+						display: "flex",
+						justifyContent: ["right", "top-right"].includes(H.value.style.labels.name.position) ? "flex-end" : ["top-center"].includes(H.value.style.labels.name.position) ? "center" : "flex-start",
+						alignItems: "center",
+						width: H.value.style.labels.name.width,
+						color: H.value.style.labels.name.color,
+						fontSize: H.value.style.labels.fontSize + "px",
+						fontWeight: H.value.style.labels.name.bold ? "bold" : "normal",
+						flexWrap: "wrap"
+					})
+				}, [D(W) ? (S(), h("div", {
+					key: 0,
+					class: "vue-ui-sparkbar-skeleton-name",
+					style: b({
+						width: "60px",
+						height: H.value.style.labels.fontSize + "px",
+						borderRadius: H.value.style.labels.fontSize / 4 + "px",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						marginTop: "5px"
+					})
+				}, [g("div", { style: b({
+					height: "100%",
+					width: "40px",
+					borderRadius: H.value.style.labels.fontSize / 4 + "px",
+					backgroundColor: "#6A6A6A80"
+				}) }, null, 4), g("div", { style: b({
+					height: "100%",
+					width: "15px",
+					borderRadius: H.value.style.labels.fontSize / 4 + "px",
+					backgroundColor: "#6A6A6A80"
+				}) }, null, 4)], 4)) : (S(), h(f, { key: 1 }, [
+					g("span", null, T(n.name), 1),
+					H.value.style.labels.value.show ? (S(), h("span", {
+						key: 0,
+						style: b(`font-weight:${H.value.style.labels.value.bold ? "bold" : "normal"}`),
+						class: "vue-ui-sparkbar-datapoint-name"
+					}, ": " + T(D(c)(n.formatter, n.value, D(o)({
+						p: n.prefix || "",
+						v: n.value,
+						s: n.suffix || "",
+						r: n.rounding || 0
+					}), {
+						datapoint: n,
+						seriesIndex: r
+					})), 5)) : m("", !0),
+					H.value.style.layout.showTargetValue ? (S(), h("span", M, T(" " + H.value.style.layout.targetValueText) + " " + T(D(c)(n.formatter, Q(n), D(o)({
+						p: n.prefix || "",
+						v: Q(n),
+						s: n.suffix || "",
+						r: n.rounding || 0
+					}), {
+						datapoint: n,
+						seriesIndex: r
+					})), 1)) : m("", !0)
+				], 64))], 4)) : m("", !0),
+				(S(), h("svg", {
+					role: "img",
+					xmlns: D(re),
+					viewBox: `0 0 ${X.value.width} ${X.value.height}`,
+					width: "100%"
+				}, [
+					_(D(L)),
+					g("defs", null, [_(ue, {
+						t: "linear",
+						x1: "0%",
+						y1: "0%",
+						x2: "100%",
+						y2: "0%",
+						id: `sparkbar_gradient_${r}_${V.value}`,
+						stops: [[
+							"0%",
+							D(t)(D(ee)(n.color, .03), 100 - H.value.style.bar.gradient.intensity),
+							1
+						], [
+							"100%",
+							n.color,
+							1
+						]]
+					}, null, 8, ["id", "stops"])]),
+					g("rect", {
+						height: X.value.height,
+						width: X.value.width,
+						x: 0,
+						y: 0,
+						fill: D(t)(H.value.style.gutter.backgroundColor, H.value.style.gutter.opacity),
+						rx: $.value
+					}, null, 8, P),
+					g("rect", {
+						height: X.value.height,
+						width: X.value.width * Z(n),
+						x: 0,
+						y: 0,
+						fill: H.value.style.bar.gradient.underlayerColor,
+						rx: $.value
+					}, null, 8, F),
+					g("rect", {
+						height: X.value.height,
+						width: X.value.width * Z(n),
+						x: 0,
+						y: 0,
+						fill: H.value.style.bar.gradient.show ? `url(#sparkbar_gradient_${r}_${V.value})` : n.color,
+						rx: $.value
+					}, null, 8, I)
+				], 8, N))
+			], 44, j))), 256)),
+			e.$slots.source ? (S(), h("div", ve, [w(e.$slots, "source")], 512)) : m("", !0),
+			D(W) ? (S(), pe(ce, { key: 3 })) : m("", !0)
+		], 4));
+	}
+};
+//#endregion
+export { A as n, L as t };

package/dist/{vue-ui-sparkgauge-CCkcq4Wh.js → vue-ui-sparkgauge-irYUg_Rc.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 import { Nt as t, X as n, Xt as r, b as i, bt as ee, i as a, mt as te, nt as o, q as ne, t as re } from "./lib-DfMn_3jf.js";
 import { n as s, t as c } from "./useHints-Dq_w2E8B.js";
-import { t as ie } from "./useConfig-BtJSJ6AK.js";
+import { t as ie } from "./useConfig-DcMi9POF.js";
 import { n as ae, t as oe } from "./BaseScanner-DZvpgOjM.js";
 import { t as l } from "./useNestedProp-CLEe1P5W.js";
 import { t as se } from "./useThemeCheck-C43Tcqmk.js";
@@ -52,7 +52,7 @@ var T = /* @__PURE__ */ e({ default: () => j }), he = ["xmlns", "viewBox"], ge =
 		}
 	},
 	setup(e) {
-		let T = fe(() => import("./PackageVersion-CrLLZ567.js").then((e) => e.t)), { vue_ui_sparkgauge: j } = ie(), { isThemeValid: M, warnInvalidTheme: N } = se(), P = u(), F = b(null), I = e, L = b(ne()), R = b(W());
+		let T = fe(() => import("./PackageVersion-DtE5p3O7.js").then((e) => e.t)), { vue_ui_sparkgauge: j } = ie(), { isThemeValid: M, warnInvalidTheme: N } = se(), P = u(), F = b(null), I = e, L = b(ne()), R = b(W());
 		s({
 			config: () => R.value,
 			dataset: () => I.dataset,

package/dist/{vue-ui-sparkhistogram-B-fzheQo.js → vue-ui-sparkhistogram-DzNLp6Cm.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 import { Ht as t, Nt as n, Ut as r, X as i, Xt as a, i as o, mt as s, nt as c, q as l, t as ee } from "./lib-DfMn_3jf.js";
 import { n as u, t as d } from "./useHints-Dq_w2E8B.js";
-import { t as f } from "./useConfig-BtJSJ6AK.js";
+import { t as f } from "./useConfig-DcMi9POF.js";
 import { n as p, t as te } from "./BaseScanner-DZvpgOjM.js";
 import { t as m } from "./useNestedProp-CLEe1P5W.js";
 import { t as ne } from "./useThemeCheck-C43Tcqmk.js";
@@ -89,7 +89,7 @@ var A = /* @__PURE__ */ e({ default: () => j }), xe = ["id"], Se = { key: 0 }, C
 	emits: ["selectDatapoint"],
 	setup(e, { emit: ie }) {
 		be((e) => ({ v5034d9c8: Xe.value }));
-		let A = pe(() => import("./PackageVersion-CrLLZ567.js").then((e) => e.t)), { vue_ui_sparkhistogram: j } = f(), { isThemeValid: Ie, warnInvalidTheme: Le } = ne(), M = e, N = w(l()), P = w(null), F = w(null), I = w(null), L = w(null), R = w(null), z = w(!1), B = w(null), V = w("pointer"), H = w(q());
+		let A = pe(() => import("./PackageVersion-DtE5p3O7.js").then((e) => e.t)), { vue_ui_sparkhistogram: j } = f(), { isThemeValid: Ie, warnInvalidTheme: Le } = ne(), M = e, N = w(l()), P = w(null), F = w(null), I = w(null), L = w(null), R = w(null), z = w(!1), B = w(null), V = w("pointer"), H = w(q());
 		u({
 			config: () => H.value,
 			dataset: () => M.dataset,

package/dist/{vue-ui-sparkline-DVYlqELY.js → vue-ui-sparkline-BJuiIvej.js}

@@ -2,7 +2,7 @@ import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
 import { A as t, H as n, Ht as r, I as i, L as a, N as o, Nt as s, Ot as c, P as l, S as u, U as d, Ut as f, V as p, Vt as ee, X as te, Xt as ne, at as re, d as ie, i as m, k as ae, m as oe, mt as se, nt as ce, q as le, st as ue, t as de, xt as fe } from "./lib-DfMn_3jf.js";
 import { n as pe, t as me } from "./useHints-Dq_w2E8B.js";
 import { t as h } from "./useTimeLabels-d2f-W1L4.js";
-import { t as he } from "./useConfig-BtJSJ6AK.js";
+import { t as he } from "./useConfig-DcMi9POF.js";
 import { n as ge, t as _e } from "./BaseScanner-DZvpgOjM.js";
 import { t as ve } from "./useNestedProp-CLEe1P5W.js";
 import { t as ye } from "./useThemeCheck-C43Tcqmk.js";
@@ -697,7 +697,7 @@ var gt = ["innerHTML"], _t = {
 	},
 	emits: ["hoverIndex", "selectDatapoint"],
 	setup(e, { emit: be }) {
-		let Ve = je(() => import("./PackageVersion-CrLLZ567.js").then((e) => e.t)), He = je(() => import("./SparkTooltip-BqzJa3h2.js")), { vue_ui_sparkline: Ue } = he(), { isThemeValid: We, warnInvalidTheme: Ge } = ye(), Ke = Ee(), k = e, qe = _(() => Array.isArray(k.dataset) && k.dataset.length > 0), A = w(le()), j = w(null), Ye = w(null), Xe = w(null), M = w(null), N = w(null), P = w(R());
+		let Ve = je(() => import("./PackageVersion-DtE5p3O7.js").then((e) => e.t)), He = je(() => import("./SparkTooltip-BqzJa3h2.js")), { vue_ui_sparkline: Ue } = he(), { isThemeValid: We, warnInvalidTheme: Ge } = ye(), Ke = Ee(), k = e, qe = _(() => Array.isArray(k.dataset) && k.dataset.length > 0), A = w(le()), j = w(null), Ye = w(null), Xe = w(null), M = w(null), N = w(null), P = w(R());
 		pe({
 			config: () => P.value,
 			dataset: () => k.dataset,