vue-data-ui 3.20.1 → 3.20.2

package/dist/vue-ui-timer-BHP_5wgz.js

@@ -0,0 +1,439 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { H as t, t as n, zt as r } from "./lib-DUeYQsS0.js";
+import { t as i } from "./useConfig-DAyQk86L.js";
+import { t as a } from "./useNestedProp-CNcoy38D.js";
+import { n as o } from "./Title-NWp4qB4K.js";
+import { t as s } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { c } from "./canvas-lib-BOP_HS11.js";
+import { t as ee } from "./useResponsive-BfnK0KxU.js";
+import { t as l } from "./BaseIcon-DfLoHNUj.js";
+import { t as te } from "./useChartAccessibility-DYqac8yF.js";
+import { computed as u, createBlock as ne, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineAsyncComponent as re, guardReactiveProps as h, mergeProps as g, normalizeProps as _, normalizeStyle as v, onBeforeUnmount as ie, onMounted as ae, openBlock as y, ref as b, renderSlot as x, shallowRef as S, toDisplayString as C, unref as w, watch as oe } from "vue";
+//#region src/timer.js
+var se = class {
+	constructor(e, t, n, r = !0, i = !0) {
+		this.interval = t, this.elapsed = 0, this.isPaused = !1;
+		let a = new Blob(["\n            let interval;\n            let elapsed = 0;\n            let paused = false;\n            let startTime;\n            let tickInterval;\n\n            onmessage = function(e) {\n                const { action, data } = e.data;\n\n                switch(action) {\n                    case 'start':\n                        startTime = Date.now();\n                        tickInterval = data.interval;\n                        elapsed = 0;\n                        paused = false;\n                        interval = setInterval(() => {\n                            elapsed += tickInterval;\n                            postMessage({ elapsed, timestamp: Date.now() });\n                        }, tickInterval);\n                        break;\n                    \n                    case 'pause':\n                        paused = true;\n                        clearInterval(interval);\n                        elapsed = Date.now() - startTime;\n                        break;\n\n                    case 'resume':\n                        if (paused) {\n                            startTime = Date.now() - elapsed;\n                            interval = setInterval(() => {\n                                elapsed += tickInterval;\n                                postMessage({ elapsed, timestamp: Date.now() });\n                            }, tickInterval);\n                        }\n                        paused = false;\n                        break;\n\n                    case 'stop':\n                        clearInterval(interval);\n                        elapsed = 0;\n                        postMessage({ elapsed });\n                        break;\n\n                    case 'reset':\n                        elapsed = 0;\n                        clearInterval(interval);\n                        postMessage({ elapsed });\n                        break;\n\n                    case 'lap':\n                        postMessage({\n                            elapsed,\n                            timestamp: Date.now(),\n                            action: 'lap'\n                        });\n                        break;\n\n                    default:\n                        break;\n                }\n            };\n        "], { type: "application/javascript" }), o = URL.createObjectURL(a), s = new Worker(o);
+		function c(e) {
+			let t = Math.floor(e / 1e3), n = Math.floor(e % 1e3 / 10), a = Math.floor(t / 3600), o = Math.floor(t % 3600 / 60), s = t % 60, c = "";
+			return i && (c += String(a).padStart(2, "0") + ":"), c += String(o).padStart(2, "0") + ":", c += String(s).padStart(2, "0"), r && (c += "." + String(n).padStart(2, "0")), c;
+		}
+		this.start = () => {
+			this.isPaused = !1, s.postMessage({
+				action: "start",
+				data: { interval: this.interval }
+			});
+		}, this.pause = () => {
+			this.isPaused ? this.resume() : (this.isPaused = !0, s.postMessage({ action: "pause" }));
+		}, this.resume = () => {
+			this.isPaused &&= (s.postMessage({ action: "resume" }), !1);
+		}, this.stop = () => {
+			s.postMessage({ action: "stop" }), this.isPaused = !1;
+		}, this.reset = () => {
+			s.postMessage({ action: "reset" }), this.elapsed = 0, this.isPaused = !1;
+		}, this.restart = () => {
+			this.stop(), this.start();
+		}, this.lap = () => new Promise((e) => {
+			s.postMessage({ action: "lap" }), s.addEventListener("message", (t) => {
+				let { elapsed: n, timestamp: r, action: i } = t.data;
+				if (i === "lap") {
+					let t = c(n);
+					e({
+						timestamp: r || 0,
+						elapsed: n,
+						formatted: t
+					});
+				}
+			}, { once: !0 });
+		}), s.onmessage = (t) => {
+			let { elapsed: n, timestamp: r } = t.data;
+			this.elapsed = n, e({
+				timestamp: r || 0,
+				elapsed: this.elapsed,
+				formatted: c(this.elapsed)
+			});
+		}, s.onerror = (e) => {
+			n && n(e);
+		};
+	}
+}, T = /* @__PURE__ */ e({ default: () => E }), ce = ["xmlns", "viewBox"], le = ["width", "height"], ue = { key: 1 }, de = ["id"], fe = ["stop-color"], pe = ["stop-color"], me = [
+	"cx",
+	"cy",
+	"r",
+	"fill",
+	"stroke",
+	"stroke-width"
+], he = [
+	"d",
+	"stroke",
+	"stroke-width"
+], ge = [
+	"r",
+	"fill",
+	"stroke",
+	"stroke-width"
+], _e = [
+	"r",
+	"fill",
+	"stroke",
+	"stroke-width"
+], ve = ["x", "y"], ye = { key: 5 }, be = [
+	"x",
+	"y",
+	"font-size",
+	"fill",
+	"font-weight"
+], xe = {
+	key: 0,
+	class: "vue-ui-timer-controls"
+}, Se = ["title"], Ce = ["title"], we = ["title"], Te = ["title"], Ee = ["title"], E = /* @__PURE__ */ s({
+	__name: "vue-ui-timer",
+	props: { config: {
+		type: Object,
+		default() {
+			return {};
+		}
+	} },
+	emits: [
+		"start",
+		"pause",
+		"reset",
+		"restart",
+		"lap"
+	],
+	setup(e, { expose: s, emit: T }) {
+		let E = re(() => import("./PackageVersion-f0MuYk3R.js").then((e) => e.t)), { vue_ui_timer: De } = i(), D = e, O = T, k = b(null), A = b(null), j = b(null), M = S(null), N = S(null), P = b(t()), F = b(0);
+		ae(() => {
+			I();
+		});
+		function I() {
+			if (L.value.responsive) {
+				let e = c(() => {
+					let { width: e, height: t } = ee({
+						chart: k.value,
+						title: L.value.style.title.text ? A.value : null,
+						legend: j.value
+					});
+					requestAnimationFrame(() => {
+						B.value.width = e, B.value.height = t, L.value.responsiveProportionalSizing ? (B.value.tracker.core = r({
+							relator: Math.min(e, t),
+							adjuster: L.value.style.width,
+							source: 6 * L.value.stopwatch.tracker.radiusRatio,
+							threshold: 1,
+							fallback: 1
+						}), B.value.tracker.aura = r({
+							relator: Math.min(e, t),
+							adjuster: L.value.style.width,
+							source: 12 * L.value.stopwatch.tracker.aura.radiusRatio,
+							threshold: 1,
+							fallback: 1
+						}), B.value.label = r({
+							relator: Math.min(e, t),
+							adjuster: L.value.style.width,
+							source: L.value.stopwatch.label.fontSize,
+							threshold: 10,
+							fallback: 10
+						})) : B.value.label = L.value.stopwatch.label.fontSize;
+					});
+				});
+				M.value && (N.value && M.value.unobserve(N.value), M.value.disconnect()), M.value = new ResizeObserver(e), N.value = k.value.parentNode, M.value.observe(N.value);
+			}
+		}
+		ie(() => {
+			M.value && (N.value && M.value.unobserve(N.value), M.value.disconnect());
+		});
+		let L = u({
+			get: () => z(),
+			set: (e) => e
+		}), R = u(() => L.value.useCursorPointer), { svgRef: Oe } = te({ config: L.value.style.title });
+		function z() {
+			return a({
+				userConfig: D.config,
+				defaultConfig: De
+			});
+		}
+		oe(() => D.config, (e) => {
+			L.value = z(), I(), F.value += 1;
+		}, { deep: !0 });
+		let ke = u(() => {
+			if (L.value.stopwatch.showHours && L.value.stopwatch.showHundredth) return "00:00:00.00";
+			if (L.value.stopwatch.showHours && !L.value.stopwatch.showHundredth) return "00:00:00";
+			if (!L.value.stopwatch.showHours && L.value.stopwatch.showHundredth) return "00:00.00";
+			if (!L.value.stopwatch.showHours && !L.value.stopwatch.showHundredth) return "00:00";
+		}), B = b({
+			height: L.value.style.height,
+			width: L.value.style.width,
+			tracker: {
+				core: 6 * L.value.stopwatch.tracker.radiusRatio,
+				aura: 12 * L.value.stopwatch.tracker.aura.radiusRatio
+			},
+			label: L.value.stopwatch.label.fontSize
+		}), V = b(0), H = new se((e) => Ae(e), 10, "", L.value.stopwatch.showHundredth, L.value.stopwatch.showHours), U = b(!0), W = b(!1), G = b(!1);
+		function K() {
+			O("start"), U.value && H.start(), U.value = !1, W.value = !0;
+		}
+		function q() {
+			W.value &&= (O("reset"), H.stop(), X.value = [], U.value = !0, !1);
+		}
+		function J() {
+			G.value = !G.value, O("pause", V.value), H.pause();
+		}
+		function Y() {
+			W.value && (G.value = !1, O("restart"), X.value = [], H.restart());
+		}
+		let X = b([]);
+		async function Z() {
+			if (!W.value || G.value) return;
+			let e = await H.lap();
+			e && (X.value.push(e), O("lap", X.value));
+		}
+		function Ae({ timestamp: e, elapsed: t, formatted: n }) {
+			V.value = {
+				timestamp: e,
+				elapsed: t,
+				formatted: n
+			};
+		}
+		let Q = u(() => Math.min(B.value.width, B.value.height) / 2.5 * L.value.stopwatch.track.radiusRatio);
+		function je(e, t) {
+			return e * (360 / (t * 1e3)) % 360;
+		}
+		function Me(e) {
+			let t = Math.PI / 180 * e;
+			return {
+				cx: B.value.width / 2 + Q.value * Math.cos(t),
+				cy: B.value.height / 2 + Q.value * Math.sin(t)
+			};
+		}
+		let $ = u(() => {
+			let e = je(V.value.elapsed, L.value.stopwatch.cycleSeconds), { cx: t, cy: n } = Me(e - 90), r = +(e > 180);
+			return {
+				cx: t || B.value.width / 2,
+				cy: n || B.value.height / 2 - Q.value,
+				largeArcFlag: r,
+				sweepFlag: 1
+			};
+		});
+		return s({
+			start: K,
+			pause: J,
+			reset: q,
+			restart: Y,
+			lap: Z
+		}), (e, t) => (y(), f("div", {
+			ref_key: "timerChart",
+			ref: k,
+			class: "vue-data-ui-component vue-ui-timer",
+			style: v({
+				fontFamily: L.value.style.fontFamily,
+				width: "100%",
+				height: L.value.responsive ? "100%" : "auto",
+				textAlign: "center"
+			})
+		}, [
+			L.value.style.title.text ? (y(), f("div", {
+				key: 0,
+				ref_key: "chartTitle",
+				ref: A,
+				style: v({
+					width: "100%",
+					background: L.value.style.backgroundColor
+				})
+			}, [(y(), ne(o, {
+				key: `title_${F.value}`,
+				config: {
+					title: {
+						cy: "title",
+						...L.value.style.title
+					},
+					subtitle: {
+						cy: "subtitle",
+						...L.value.style.title.subtitle
+					}
+				}
+			}, null, 8, ["config"]))], 4)) : d("", !0),
+			(y(), f("svg", {
+				ref_key: "svgRef",
+				ref: Oe,
+				xmlns: w(n),
+				viewBox: `0 0 ${B.value.width <= 0 ? 10 : B.value.width} ${B.value.height <= 0 ? 10 : B.value.height}`,
+				style: v({
+					maxWidth: "100%",
+					overflow: "visible",
+					background: L.value.style.backgroundColor
+				})
+			}, [
+				m(w(E)),
+				e.$slots["chart-background"] ? (y(), f("foreignObject", {
+					key: 0,
+					x: 0,
+					y: 0,
+					width: B.value.width <= 0 ? 10 : B.value.width,
+					height: B.value.height <= 0 ? 10 : B.value.height,
+					style: { pointerEvents: "none" }
+				}, [x(e.$slots, "chart-background", {}, void 0, !0)], 8, le)) : d("", !0),
+				L.value.stopwatch.tracker.gradient.show ? (y(), f("defs", ue, [p("radialGradient", {
+					id: `tracker_gradient_${P.value}`,
+					cx: "50%",
+					cy: "50%",
+					r: "50%",
+					fx: "50%",
+					fy: "50%"
+				}, [p("stop", {
+					offset: "0%",
+					"stop-color": L.value.stopwatch.tracker.gradient.color
+				}, null, 8, fe), p("stop", {
+					offset: "100%",
+					"stop-color": L.value.stopwatch.tracker.fill
+				}, null, 8, pe)], 8, de)])) : d("", !0),
+				p("circle", {
+					cx: B.value.width / 2,
+					cy: B.value.height / 2,
+					r: Q.value,
+					fill: L.value.stopwatch.track.fill,
+					stroke: L.value.stopwatch.track.stroke,
+					"stroke-width": L.value.stopwatch.track.strokeWidth
+				}, null, 8, me),
+				L.value.stopwatch.cycleTrack.show ? (y(), f("path", {
+					key: 2,
+					d: `M ${B.value.width / 2},${B.value.height / 2 - Q.value} A ${Q.value},${Q.value} 0 ${$.value.largeArcFlag},${$.value.sweepFlag} ${$.value.cx},${$.value.cy}`,
+					stroke: L.value.stopwatch.cycleTrack.stroke,
+					"stroke-width": L.value.stopwatch.cycleTrack.strokeWidth,
+					"stroke-linecap": "round",
+					fill: "none"
+				}, null, 8, he)) : d("", !0),
+				p("circle", g($.value, {
+					r: B.value.tracker.core,
+					fill: L.value.stopwatch.tracker.gradient.show ? `url(#tracker_gradient_${P.value})` : L.value.stopwatch.tracker.fill,
+					stroke: L.value.stopwatch.tracker.stroke,
+					"stroke-width": L.value.stopwatch.tracker.strokeWidth
+				}), null, 16, ge),
+				L.value.stopwatch.tracker.aura.show ? (y(), f("circle", g({ key: 3 }, $.value, {
+					r: B.value.tracker.aura,
+					fill: `${L.value.stopwatch.tracker.aura.fill}20`,
+					stroke: L.value.stopwatch.tracker.aura.stroke,
+					"stroke-width": L.value.stopwatch.tracker.aura.strokeWidth
+				}), null, 16, _e)) : d("", !0),
+				e.$slots.time ? (y(), f("foreignObject", {
+					key: 4,
+					x: B.value.width / 2,
+					y: B.value.height / 2,
+					height: "0.1",
+					width: "0.1",
+					style: { overflow: "visible" }
+				}, [x(e.$slots, "time", _(h({
+					...V.value,
+					...B.value
+				})), void 0, !0)], 8, ve)) : e.$slots.timeSvg ? (y(), f("g", ye, [x(e.$slots, "timeSvg", _(h({
+					...V.value,
+					...B.value
+				})), void 0, !0)])) : (y(), f("text", {
+					key: 6,
+					x: B.value.width / 2,
+					y: B.value.height / 2 + B.value.label / 4,
+					"font-size": B.value.label,
+					"text-anchor": "middle",
+					fill: L.value.stopwatch.label.color,
+					"font-weight": L.value.stopwatch.label.bold ? "bold" : "normal",
+					style: { "font-variant-numeric": "tabular-nums !important" }
+				}, C(V.value.formatted || ke.value), 9, be))
+			], 12, ce)),
+			p("div", {
+				ref_key: "chartLegend",
+				ref: j,
+				style: v({
+					width: "100%",
+					backgroundColor: L.value.stopwatch.legend.backgroundColor
+				})
+			}, [
+				e.$slots.controls ? d("", !0) : (y(), f("div", xe, [
+					L.value.stopwatch.legend.buttons.start ? (y(), f("button", {
+						key: 0,
+						title: L.value.stopwatch.legend.buttonTitles.start,
+						onClick: K,
+						class: "vue-ui-timer-button",
+						style: v({
+							opacity: W.value ? .2 : 1,
+							cursor: W.value ? "default" : R.value ? "pointer" : "default"
+						})
+					}, [m(l, {
+						name: "play",
+						stroke: L.value.stopwatch.legend.buttons.iconColor
+					}, null, 8, ["stroke"])], 12, Se)) : d("", !0),
+					L.value.stopwatch.legend.buttons.pause ? (y(), f("button", {
+						key: 1,
+						title: G.value ? L.value.stopwatch.legend.buttonTitles.resume : L.value.stopwatch.legend.buttonTitles.pause,
+						onClick: J,
+						class: "vue-ui-timer-button",
+						style: v({
+							opacity: W.value ? 1 : .2,
+							cursor: W.value && R.value ? "pointer" : "default"
+						})
+					}, [m(l, {
+						name: "pause",
+						stroke: L.value.stopwatch.legend.buttons.iconColor
+					}, null, 8, ["stroke"])], 12, Ce)) : d("", !0),
+					L.value.stopwatch.legend.buttons.reset ? (y(), f("button", {
+						key: 2,
+						title: L.value.stopwatch.legend.buttonTitles.reset,
+						onClick: q,
+						class: "vue-ui-timer-button",
+						style: v({
+							opacity: W.value ? 1 : .2,
+							cursor: W.value && R.value ? "pointer" : "default"
+						})
+					}, [m(l, {
+						name: "stop",
+						stroke: L.value.stopwatch.legend.buttons.iconColor
+					}, null, 8, ["stroke"])], 12, we)) : d("", !0),
+					L.value.stopwatch.legend.buttons.restart ? (y(), f("button", {
+						key: 3,
+						title: L.value.stopwatch.legend.buttonTitles.restart,
+						onClick: Y,
+						class: "vue-ui-timer-button",
+						style: v({
+							opacity: W.value ? 1 : .2,
+							cursor: W.value && R.value ? "pointer" : "default"
+						})
+					}, [m(l, {
+						name: "restart",
+						stroke: L.value.stopwatch.legend.buttons.iconColor
+					}, null, 8, ["stroke"])], 12, Te)) : d("", !0),
+					L.value.stopwatch.legend.buttons.lap ? (y(), f("button", {
+						key: 4,
+						title: L.value.stopwatch.legend.buttonTitles.lap,
+						onClick: Z,
+						class: "vue-ui-timer-button",
+						style: v({
+							opacity: W.value && !G.value ? 1 : .2,
+							cursor: W.value && !G.value && R.value ? "pointer" : "default"
+						})
+					}, [m(l, {
+						name: "lap",
+						stroke: L.value.stopwatch.legend.buttons.iconColor
+					}, null, 8, ["stroke"])], 12, Ee)) : d("", !0)
+				])),
+				x(e.$slots, "controls", _(h({
+					start: K,
+					pause: J,
+					reset: q,
+					restart: Y,
+					lap: Z,
+					laps: X.value,
+					isRunning: W.value,
+					isPaused: G.value,
+					...V.value
+				})), void 0, !0),
+				x(e.$slots, "laps", _(h({
+					laps: X.value,
+					lap: Z,
+					isRunning: W.value,
+					isPaused: G.value,
+					...V.value
+				})), void 0, !0)
+			], 4)
+		], 4));
+	}
+}, [["__scopeId", "data-v-7cc009e4"]]);
+//#endregion
+export { T as n, E as t };