vue-data-ui 3.17.13 → 3.18.0

package/dist/vue-ui-gizmo-B9POi_SN.js

@@ -0,0 +1,225 @@
+import { t as e } from "./rolldown-runtime-CAFD8bLK.js";
+import { G as t, H as n, X as ee, i as r, zt as i } from "./lib-B83ZCydz.js";
+import { t as a } from "./useConfig-KnOLHtlJ.js";
+import { n as o, t as te } from "./BaseScanner-C7dmAref.js";
+import { t as ne } from "./useNestedProp-CcxL1gUU.js";
+import { t as s } from "./_plugin-vue_export-helper-Dq1MygBL.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineAsyncComponent as h, normalizeStyle as g, onMounted as _, openBlock as v, ref as y, renderSlot as re, toDisplayString as b, toRefs as ie, unref as x, useSlots as ae, watch as oe } from "vue";
+//#region src/components/vue-ui-gizmo.vue
+var S = /* @__PURE__ */ e({ default: () => B }), C = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-busy"
+], w = ["viewBox", "width"], T = { key: 0 }, E = ["id"], D = ["stop-color"], O = ["stop-color"], k = ["stroke"], A = ["stroke"], j = ["width", "fill"], M = ["fill"], N = { key: 0 }, P = ["id"], F = ["stroke"], I = [
+	"stroke",
+	"stroke-dasharray",
+	"stroke-dashoffset"
+], L = ["filter"], R = [
+	"stroke",
+	"stroke-dasharray",
+	"stroke-dashoffset"
+], z = ["fill"], B = /* @__PURE__ */ s({
+	__name: "vue-ui-gizmo",
+	props: {
+		config: {
+			type: Object,
+			default() {
+				return {};
+			}
+		},
+		dataset: { type: Number }
+	},
+	setup(e) {
+		let s = h(() => import("./PackageVersion-B1cPtZ3Q.js").then((e) => e.t)), { vue_ui_gizmo: S } = a(), B = e, V = y(n()), H = ae();
+		_(() => {
+			W();
+		}), _(() => {
+			H["chart-background"] && U.value && console.warn("VueUiGizmo does not support the #chart-background slot.");
+		});
+		let U = l(() => G.value.debug);
+		function W() {
+			!B.dataset && B.dataset !== 0 && ee({
+				componentName: "VueUiGizmo",
+				type: "dataset",
+				debug: U.value
+			}), B.dataset < 0 && U.value && console.warn("VueUiGizmo: dataset cannot be negative."), B.dataset > 100 && U.value && console.warn(`VueUiGizmo: gauge is maxed out, as dataset exceeds 100% (props.dataset = ${B.dataset})`);
+		}
+		let G = y(Y()), K = l(() => i({
+			defaultConfig: {
+				stroke: "#6A6A6A80",
+				color: "#6A6A6A",
+				gradientColor: "#CACACA",
+				textColor: "transparent"
+			},
+			userConfig: G.value.skeletonConfig ?? {}
+		})), { loading: q, FINAL_DATASET: J, manualLoading: se } = o({
+			...ie(B),
+			FINAL_CONFIG: G,
+			prepareConfig: Y,
+			dsIsNumber: !0,
+			skeletonDataset: B.config?.skeletonDataset ?? 50,
+			skeletonConfig: i({
+				defaultConfig: G.value,
+				userConfig: K.value
+			})
+		});
+		function Y() {
+			return ne({
+				userConfig: B.config,
+				defaultConfig: S
+			});
+		}
+		oe(() => B.config, (e) => {
+			G.value = Y(), W();
+		}, { deep: !0 });
+		let X = l(() => ({
+			battery: {
+				width: G.value.showPercentage ? 150 : 80,
+				height: 50
+			},
+			gauge: {
+				width: 80,
+				height: 80
+			}
+		})[G.value.type]), Z = l(() => Math.min(Math.max(0, J.value), 100)), Q = l(() => Math.max(0, J.value)), $ = l(() => {
+			let e = 2 * Math.PI * 35, t = e - Z.value / 100 * e;
+			return {
+				dasharray: `${e} ${e}`,
+				dashoffset: t
+			};
+		});
+		return (e, n) => (v(), f("div", {
+			class: "vue-data-ui-component vue-ui-gizmo-wrapper",
+			role: "progressbar",
+			"aria-label": G.value.a11y.translations.label,
+			"aria-valuemin": "0",
+			"aria-valuemax": "100",
+			"aria-valuenow": x(q) ? void 0 : Z.value,
+			"aria-valuetext": Z.value + "%",
+			"aria-busy": x(q) ? "true" : "false"
+		}, [(v(), f("svg", {
+			class: "vue-ui-gizmo",
+			viewBox: `0 0 ${X.value.width} ${X.value.height}`,
+			width: G.value.size,
+			style: g({
+				background: "transparent",
+				fontFamily: G.value.fontFamily
+			})
+		}, [
+			m(x(s)),
+			G.value.useGradient ? (v(), f("defs", T, [p("linearGradient", {
+				id: `gizmo_gradient_${V.value}`,
+				x1: "0%",
+				x2: "100%",
+				y1: "0%",
+				y2: "0%"
+			}, [p("stop", {
+				offset: "0%",
+				"stop-color": G.value.gradientColor
+			}, null, 8, D), p("stop", {
+				offset: "100%",
+				"stop-color": G.value.color
+			}, null, 8, O)], 8, E)])) : d("", !0),
+			G.value.type === "battery" ? (v(), f(c, { key: 1 }, [
+				p("path", {
+					d: "M 5 10 L 5 40 C 5 43 7 45 9 45 L 65 45 C 68 45 70 43 70 40 L 70 38 C 73 38 75 38 75 33 L 75 17 C 75 12 73 12 70 12 L 70 10 C 70 7 68 5 65 5 L 10 5 C 7 5 5 7 5 10",
+					stroke: G.value.stroke,
+					"stroke-width": 2,
+					fill: "none"
+				}, null, 8, k),
+				p("path", {
+					d: "M 70 16 L 70 34",
+					stroke: G.value.stroke,
+					"stroke-width": 2,
+					fill: "none",
+					style: { opacity: "0.5" }
+				}, null, 8, A),
+				p("rect", {
+					x: 10,
+					y: 10,
+					height: 30,
+					width: 55 * (Z.value / 100),
+					fill: G.value.useGradient ? `url(#gizmo_gradient_${V.value})` : G.value.color,
+					rx: 2
+				}, null, 8, j),
+				G.value.showPercentage ? (v(), f("text", {
+					key: 0,
+					x: 85,
+					y: 32,
+					"text-anchor": "start",
+					"font-size": "20",
+					fill: G.value.textColor
+				}, b(x(r)(G.value.formatter, Q.value, x(t)({
+					v: Q.value,
+					s: "%"
+				}))), 9, M)) : d("", !0)
+			], 64)) : d("", !0),
+			G.value.type === "gauge" ? (v(), f(c, { key: 2 }, [
+				G.value.useGradient ? (v(), f("defs", N, [p("filter", {
+					id: `blur_${V.value}`,
+					x: "-50%",
+					y: "-50%",
+					width: "200%",
+					height: "200%"
+				}, [...n[0] ||= [p("feGaussianBlur", {
+					in: "SourceGraphic",
+					stdDeviation: 1
+				}, null, -1)]], 8, P)])) : d("", !0),
+				p("circle", {
+					cx: 40,
+					cy: 40,
+					r: 35,
+					stroke: G.value.stroke,
+					"stroke-width": 8,
+					fill: "none"
+				}, null, 8, F),
+				p("circle", {
+					cx: 40,
+					cy: 40,
+					r: 35,
+					stroke: G.value.color,
+					"stroke-width": 8,
+					"stroke-dasharray": $.value.dasharray,
+					"stroke-dashoffset": $.value.dashoffset,
+					"stroke-linecap": "round",
+					fill: "none",
+					style: {
+						transform: "rotate(-90deg)",
+						"transform-origin": "50% 50%"
+					}
+				}, null, 8, I),
+				G.value.useGradient ? (v(), f("g", {
+					key: 1,
+					filter: `url(#blur_${V.value})`
+				}, [p("circle", {
+					cx: 40,
+					cy: 40,
+					r: 35,
+					stroke: G.value.gradientColor,
+					"stroke-width": 1,
+					fill: "none",
+					"stroke-dasharray": $.value.dasharray,
+					"stroke-dashoffset": $.value.dashoffset,
+					style: {
+						transform: "rotate(-90deg)",
+						"transform-origin": "50% 50%"
+					}
+				}, null, 8, R)], 8, L)) : d("", !0),
+				G.value.showPercentage ? (v(), f("text", {
+					key: 2,
+					x: 40,
+					y: 47,
+					"text-anchor": "middle",
+					"font-size": "20",
+					fill: G.value.textColor
+				}, b(x(r)(G.value.formatter, Q.value, x(t)({
+					v: Q.value,
+					s: "%"
+				}))), 9, z)) : d("", !0)
+			], 64)) : d("", !0)
+		], 12, w)), re(e.$slots, "skeleton", {}, () => [x(q) ? (v(), u(te, { key: 0 })) : d("", !0)], !0)], 8, C));
+	}
+}, [["__scopeId", "data-v-435edafd"]]);
+//#endregion
+export { S as n, B as t };