vue-data-ui 3.23.5 → 3.23.7

package/dist/{PackageVersion-QmpeTdwH.js → PackageVersion-Dy83B80Q.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { t } from "./package-AMny8nIk.js";
+import { t } from "./package-CMYqMdZB.js";
 import { createElementBlock as n, openBlock as r, toDisplayString as i, unref as a } from "vue";
 //#region src/atoms/PackageVersion.vue
 var o = /* @__PURE__ */ e({ default: () => c }), s = { "aria-hidden": "true" }, c = {

package/dist/PenAndPaper-C0UZ74fa.js

@@ -0,0 +1,571 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { Ot as t, X as n, q as r, t as i } from "./lib-Bttd6u5E.js";
+import { t as a } from "./BaseIcon-BfndwIWE.js";
+import { t as o } from "./ColorPicker--ayG2YHf.js";
+import { computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, guardReactiveProps as f, nextTick as p, normalizeClass as m, normalizeProps as h, normalizeStyle as g, onBeforeUnmount as ee, onMounted as te, openBlock as ne, ref as _, renderSlot as v, toDisplayString as re, unref as ie, vModelText as ae, watch as y, withCtx as oe, withDirectives as se } from "vue";
+//#region src/atoms/PenAndPaper.vue
+var ce = /* @__PURE__ */ e({ default: () => b }), le = {
+	"aria-hidden": "true",
+	viewBox: "0 0 6 12",
+	style: { width: "100%" }
+}, ue = ["fill"], de = ["fill"], fe = ["fill"], pe = ["disabled"], b = {
+	__name: "PenAndPaper",
+	props: {
+		svgRef: {
+			type: [
+				Object,
+				null,
+				void 0
+			],
+			required: !0
+		},
+		color: {
+			type: String,
+			default: "#2D353C"
+		},
+		backgroundColor: {
+			type: String,
+			default: "#FFFFFF"
+		},
+		active: {
+			type: Boolean,
+			default: !1
+		},
+		scale: {
+			type: Number,
+			default: 1
+		},
+		isCursorPointer: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["close"],
+	setup(e, { emit: ce }) {
+		let b = e, me = ce, x = _([]), S = _([]), C = _(b.color), w = _(2), T = _(!1), he = _(""), E = _(null), D = _(null), O = _(null), k = _(null), ge = /* @__PURE__ */ new Map(), _e = _(`arrow-def-${r()}`), A = _(!1), j = _(null), ve = _({
+			x: 0,
+			y: 0
+		}), M = _([""]), N = _({
+			row: 0,
+			col: 0
+		}), P = _(16), F = _(!1), ye = [
+			"arrow",
+			"text",
+			"line",
+			"draw"
+		], I = _(0), L = s(() => ye[I.value]), be = {
+			arrow: "plotArrow",
+			text: "text",
+			line: "plotLine",
+			draw: "annotator"
+		}, xe = _("url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TpSIVh2YQcchQnSyIijhKFYtgobQVWnUwufQLmjQkKS6OgmvBwY/FqoOLs64OroIg+AHi6OSk6CIl/i8ptIjx4Lgf7+497t4BQrPKNKtnAtB020wn4lIuvyqFXhGGiAhCiMnMMpKZxSx8x9c9Any9i/Es/3N/jgG1YDEgIBHPMcO0iTeIZzZtg/M+scjKskp8Tjxu0gWJH7muePzGueSywDNFM5ueJxaJpVIXK13MyqZGPE0cVTWd8oWcxyrnLc5atc7a9+QvDBf0lQzXaY4ggSUkkYIEBXVUUIWNGK06KRbStB/38Q+7/hS5FHJVwMixgBo0yK4f/A9+d2sVpya9pHAc6H1xnI9RILQLtBqO833sOK0TIPgMXOkdf60JzH6S3uho0SNgcBu4uO5oyh5wuQMMPRmyKbtSkKZQLALvZ/RNeSByC/Sveb2193H6AGSpq+Ub4OAQGCtR9rrPu/u6e/v3TLu/H5C7crM1WjgWAAAABmJLR0QAqwB5AHWF+8OUAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gwUExIUagzGcQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABfSURBVBjTldAxDoNQDIPhL0+q1L33P1AvAhN7xfK6WAgoLfSfrNiykpQtE+7RLzx2vgF9D3o8lWDmn1QVVMP0LZQGmNtqp1/cmou0XHdG/+sYeGZwFBqPCub8rkcvvAGvsi1VYarR8wAAAABJRU5ErkJggg==') 5 5, auto");
+		function Se() {
+			I.value + 1 >= ye.length ? I.value = 0 : I.value += 1;
+		}
+		function R(e) {
+			if (!E.value || L.value !== "text" || A.value) return;
+			let { x: t, y: n } = H(e);
+			ve.value = {
+				x: t,
+				y: n
+			}, M.value = [""], N.value = {
+				row: 0,
+				col: 0
+			}, F.value = !1;
+			let r = document.createElementNS("http://www.w3.org/2000/svg", "text");
+			r.setAttribute("x", t), r.setAttribute("y", n), r.setAttribute("fill", C.value), r.setAttribute("font-size", P.value * b.scale), r.setAttribute("font-family", "sans-serif"), r.setAttribute("class", "vue-data-ui-doodle"), r.setAttribute("dominant-baseline", "hanging"), r.setAttribute("pointer-events", "all");
+			let i = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+			i.setAttribute("x", t), i.setAttribute("dy", "0"), i.setAttribute("dominant-baseline", "hanging"), i.textContent = "", r.appendChild(i), r.style.pointerEvents = "none", r.style.userSelect = "none", E.value.appendChild(r), j.value = r, A.value = !0, window.addEventListener("keydown", Ce), window.addEventListener("mousedown", De, !0), we(), Ee();
+		}
+		function Ce(e) {
+			if (!A.value) return;
+			let { row: t, col: n } = N.value, r = M.value.slice(), i = !1;
+			if (e.key === "Enter") {
+				let a = r[t], o = a.slice(0, n), s = a.slice(n);
+				r.splice(t, 1, o, s), t += 1, n = 0, i = !0, e.preventDefault();
+			} else if (e.key === "Backspace") {
+				if (n > 0) r[t] = r[t].slice(0, n - 1) + r[t].slice(n), --n, i = !0;
+				else if (t > 0) {
+					let e = r[t - 1].length;
+					r[t - 1] += r[t], r.splice(t, 1), --t, n = e, i = !0;
+				}
+				e.preventDefault();
+			} else if (e.key === "Delete") n < r[t].length ? (r[t] = r[t].slice(0, n) + r[t].slice(n + 1), i = !0) : t < r.length - 1 && (r[t] += r[t + 1], r.splice(t + 1, 1), i = !0), e.preventDefault();
+			else if (e.key === "ArrowLeft") n > 0 ? --n : t > 0 && (--t, n = r[t].length), i = !0, e.preventDefault();
+			else if (e.key === "ArrowRight") n < r[t].length ? n += 1 : t < r.length - 1 && (t += 1, n = 0), i = !0, e.preventDefault();
+			else if (e.key === "ArrowUp") t > 0 && (--t, n = Math.min(n, r[t].length), i = !0), e.preventDefault();
+			else if (e.key === "ArrowDown") t < r.length - 1 && (t += 1, n = Math.min(n, r[t].length), i = !0), e.preventDefault();
+			else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) r[t] = r[t].slice(0, n) + e.key + r[t].slice(n), n += 1, i = !0, e.preventDefault();
+			else if (e.key === "Escape") {
+				Oe(!0);
+				return;
+			} else e.key === "Tab" && e.preventDefault();
+			i && (M.value = r, N.value = {
+				row: t,
+				col: n
+			}, r.some((e) => e.length > 0) && !F.value && j.value && (x.value.push(j.value), S.value = [], F.value = !0), we(), Ee());
+		}
+		function we() {
+			let e = j.value, { x: t } = ve.value;
+			for (; e.firstChild;) e.removeChild(e.firstChild);
+			M.value.forEach((n, r) => {
+				let i = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
+				i.setAttribute("x", t), i.setAttribute("dominant-baseline", "hanging"), i.setAttribute("dy", r === 0 ? "0" : `${P.value * 1.2 * b.scale}`), i.textContent = n.length ? n : "​", e.appendChild(i);
+			});
+		}
+		let z = _(null);
+		function B() {
+			z.value !== null && (clearInterval(z.value), z.value = null);
+		}
+		function Te(e) {
+			B();
+			let t = !0;
+			e.style.opacity = "1", z.value = setInterval(() => {
+				if (!E.value || !e || !E.value.contains(e)) {
+					B();
+					return;
+				}
+				t = !t, e.style.opacity = t ? "1" : "0";
+			}, 500);
+		}
+		function Ee() {
+			let e = E.value?.querySelector(".vue-data-ui-svg-caret");
+			e && E.value && E.value.removeChild(e);
+			let t = j.value;
+			if (!t || !E.value) return;
+			let { x: n, y: r } = ve.value, { row: i, col: a } = N.value, o = P.value * b.scale, s = t.childNodes[i];
+			if (!s) return;
+			let c = s.textContent.slice(0, a);
+			c.endsWith(" ") && (c += "\xA0");
+			let l = document.createElementNS("http://www.w3.org/2000/svg", "text");
+			l.setAttribute("x", n), l.setAttribute("y", r), l.setAttribute("font-size", o), l.setAttribute("font-family", "sans-serif"), l.textContent = c || "", E.value.appendChild(l);
+			let u = l.getBBox();
+			E.value.removeChild(l);
+			let d = r + i * o * 1.2, f = n + u.width, p = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+			p.setAttribute("x", f), p.setAttribute("y", d), p.setAttribute("rx", 1), p.setAttribute("width", 2), p.setAttribute("height", o), p.setAttribute("fill", C.value), p.setAttribute("class", "vue-data-ui-svg-caret"), E.value.appendChild(p), Te(p);
+		}
+		function De(e) {
+			if (j.value && !j.value.contains(e.target)) {
+				let e = j.value.children;
+				e.length === 1 && (e[0].textContent === "" || e[0].textContent === "​") && j.value.remove(), Oe(!1);
+			}
+		}
+		function Oe(e = !1) {
+			window.removeEventListener("keydown", Ce), window.removeEventListener("mousedown", De, !0), B();
+			let t = E.value?.querySelector(".vue-data-ui-svg-caret");
+			t && E.value && E.value.removeChild(t);
+			let n = j.value?.children, r = !1;
+			if (n && n.length === 1) {
+				let e = n[0].textContent;
+				r = !e || e === "​";
+			}
+			(e || r) && j.value && E.value && E.value.contains(j.value) && E.value.removeChild(j.value), A.value = !1, j.value = null, M.value = [""], N.value = {
+				row: 0,
+				col: 0
+			}, F.value = !1;
+		}
+		let V = s(() => t(b.color, .6));
+		function ke() {
+			if (!E.value) return;
+			let e = E.value.querySelector(".vue-data-ui-mask");
+			if (e && E.value.removeChild(e), b.active) {
+				let e = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+				e.setAttribute("class", "vue-data-ui-mask"), e.setAttribute("width", "100%"), e.setAttribute("height", "100%"), e.setAttribute("fill", "transparent"), e.setAttribute("pointer-events", "all"), E.value.insertBefore(e, E.value.firstChild);
+			}
+		}
+		function H(e) {
+			let t = b.svgRef;
+			if (!t) return {
+				x: 0,
+				y: 0
+			};
+			let n = t.createSVGPoint(), r = e.touches?.length || e.changedTouches?.length ? e.touches?.[0] || e.changedTouches?.[0] : null, i = r ? r.clientX : e.clientX, a = r ? r.clientY : e.clientY;
+			n.x = i, n.y = a;
+			let o = t.getScreenCTM()?.inverse();
+			return o ? n.matrixTransform(o) : {
+				x: 0,
+				y: 0
+			};
+		}
+		function Ae(e) {
+			let t = e.trim().split(/\s+/);
+			if (t.length < 4) return e;
+			let n = t.slice(1).map(Number);
+			if (n.length % 2 != 0) return e;
+			let r = je(n), i = [`M ${r[0]} ${r[1]}`];
+			for (let e = 2; e < r.length - 2; e += 2) {
+				let t = r[e - 2], n = r[e - 1], a = r[e], o = r[e + 1], s = (t + a) / 2, c = (n + o) / 2;
+				i.push(`Q ${t} ${n} ${s} ${c}`);
+			}
+			let a = r[r.length - 2], o = r[r.length - 1];
+			return i.push(`L ${a} ${o}`), i.join(" ");
+		}
+		function je(e, t = 1) {
+			let n = [...e];
+			for (let r = 2; r < e.length - 2; r += 2) {
+				let i = e[r], a = e[r + 1], o = e[r - 2], s = e[r - 1], c = e[r + 2], l = e[r + 3];
+				n[r] = i + t * ((o + c) / 2 - i), n[r + 1] = a + t * ((s + l) / 2 - a);
+			}
+			return n;
+		}
+		function Me(e) {
+			let t = e.trim().split(/\s+/), n = "", r = "", i = null, a = null;
+			for (let e = 0; e < t.length; e += 1) {
+				let o = t[e];
+				if (isNaN(o)) {
+					if (r = o, r === "M" || r === "L") i = parseFloat(t[++e]), a = parseFloat(t[++e]), n += `${r}${i} ${a}`;
+					else if (r === "Q") {
+						let r = parseFloat(t[++e]), o = parseFloat(t[++e]), s = parseFloat(t[++e]), c = parseFloat(t[++e]);
+						n += r === i && o === a ? `t${s - i} ${c - a}` : `q${r - i} ${o - a} ${s - i} ${c - a}`, i = s, a = c;
+					}
+				} else {
+					let s = parseFloat(o), c = parseFloat(t[++e]);
+					if (r === "L") {
+						let e = s - i, t = c - a;
+						n += e === 0 ? `v${t}` : t === 0 ? `h${e}` : `l${e} ${t}`, i = s, a = c;
+					} else if (r === "Q") {
+						let r = s, o = c, l = parseFloat(t[++e]), u = parseFloat(t[++e]);
+						n += r === i && o === a ? `t${l - i} ${u - a}` : `q${r - i} ${o - a} ${l - i} ${u - a}`, i = l, a = u;
+					}
+				}
+			}
+			return n;
+		}
+		function U(e) {
+			if (e.cancelable && e.preventDefault(), L.value !== "draw" || !b.active || !E.value) return;
+			T.value = !0;
+			let { x: t, y: n } = H(e);
+			k.value = {
+				x: t,
+				y: n
+			}, he.value = `M ${t} ${n}`, D.value = document.createElementNS(i, "path"), D.value.setAttribute("stroke", C.value), D.value.setAttribute("stroke-width", w.value * b.scale), D.value.setAttribute("fill", "none"), D.value.setAttribute("stroke-linecap", "round"), D.value.setAttribute("stroke-linejoin", "round"), D.value.setAttribute("class", "vue-data-ui-doodle"), E.value.appendChild(D.value);
+		}
+		function W(e) {
+			if (e.cancelable && e.preventDefault(), !T.value || !E.value || !D.value) return;
+			let { x: t, y: n } = H(e);
+			he.value += ` ${t} ${n}`, D.value.setAttribute("d", he.value);
+		}
+		function Ne(e) {
+			let t = b.svgRef;
+			if (!t) return null;
+			let n = t.querySelector(`defs#${_e.value}`);
+			n || (n = document.createElementNS(i, "defs"), n.setAttribute("id", _e.value), t.appendChild(n));
+			let a = String(e).trim();
+			if (ge.has(a)) return ge.get(a);
+			let o = `arrow-${r()}`, s = document.createElementNS(i, "marker");
+			s.setAttribute("id", o), s.setAttribute("markerUnits", "strokeWidth"), s.setAttribute("markerWidth", "6"), s.setAttribute("markerHeight", "6"), s.setAttribute("refX", "4"), s.setAttribute("refY", "3"), s.setAttribute("orient", "auto"), s.setAttribute("viewBox", "0 0 6 6");
+			let c = document.createElementNS(i, "path");
+			return c.setAttribute("d", `M 0 0 L 6 ${6 / 2} L 0 6 z`), c.setAttribute("fill", e), c.setAttribute("stroke", "none"), s.appendChild(c), n.appendChild(s), ge.set(a, o), o;
+		}
+		function G(e) {
+			if (e.cancelable && e.preventDefault(), !["line", "arrow"].includes(L.value) || !b.active || !E.value) return;
+			T.value = !0;
+			let { x: t, y: n } = H(e);
+			if (k.value = {
+				x: t,
+				y: n
+			}, O.value = document.createElementNS(i, "line"), O.value.setAttribute("stroke", C.value), O.value.setAttribute("stroke-width", w.value * b.scale), O.value.setAttribute("stroke-linecap", "round"), O.value.setAttribute("class", "vue-data-ui-doodle"), O.value.setAttribute("x1", t), O.value.setAttribute("y1", n), O.value.setAttribute("x2", t), O.value.setAttribute("y2", n), L.value === "arrow") {
+				let e = Ne(C.value);
+				e && O.value.setAttribute("marker-end", `url(#${e})`);
+			}
+			E.value.appendChild(O.value);
+		}
+		function K(e) {
+			if (e.cancelable && e.preventDefault(), !["line", "arrow"].includes(L.value) || !T.value || !E.value || !O.value) return;
+			let { x: t, y: n } = H(e);
+			O.value.setAttribute("x2", t), O.value.setAttribute("y2", n);
+		}
+		function q(e) {
+			if (T.value && E.value && O.value) {
+				let { x: t, y: n } = H(e);
+				O.value.setAttribute("x2", t), O.value.setAttribute("y2", n), x.value.push(O.value), S.value = [], O.value = "";
+			}
+			T.value = !1;
+		}
+		function J(e) {
+			if (T.value && E.value && D.value) {
+				let { x: t, y: n } = H(e);
+				if (k.value && k.value.x === t && k.value.y === n) {
+					let e = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+					e.setAttribute("cx", t), e.setAttribute("cy", n), e.setAttribute("r", w.value * b.scale / 2), e.setAttribute("fill", C.value), e.setAttribute("class", "vue-data-ui-doodle"), E.value.appendChild(e), x.value.push(e);
+				} else {
+					let e = D.value;
+					e.setAttribute("d", Me(Ae(he.value))), x.value.push(e);
+				}
+				S.value = [], D.value = "";
+			}
+			T.value = !1;
+		}
+		function Pe() {
+			if (x.value.length > 0) {
+				let e = x.value.pop();
+				S.value.push(e), e === j.value ? Oe(!0) : E.value && E.value.contains(e) && E.value.removeChild(e);
+			}
+		}
+		function Fe() {
+			if (S.value.length > 0) {
+				let e = S.value.pop();
+				x.value.push(e), E.value && E.value.appendChild(e);
+			}
+		}
+		function Ie() {
+			E.value && (E.value.innerHTML = ""), x.value = [], S.value = [], F.value = !1, ke();
+		}
+		y(L, (e) => {
+			b.active && (Re(), Le(), ze());
+		});
+		function Le() {
+			!b.svgRef || !b.active || (L.value === "draw" ? (b.svgRef.addEventListener("mousedown", U), b.svgRef.addEventListener("mousemove", W), b.svgRef.addEventListener("mouseup", J), b.svgRef.addEventListener("mouseleave", J), b.svgRef.addEventListener("touchstart", U, { passive: !1 }), b.svgRef.addEventListener("touchmove", W, { passive: !1 }), b.svgRef.addEventListener("touchend", J), b.svgRef.addEventListener("touchcancel", J)) : ["line", "arrow"].includes(L.value) ? (b.svgRef.addEventListener("mousedown", G), b.svgRef.addEventListener("mousemove", K), b.svgRef.addEventListener("mouseup", q), b.svgRef.addEventListener("touchstart", G, { passive: !1 }), b.svgRef.addEventListener("touchmove", K, { passive: !1 }), b.svgRef.addEventListener("touchend", q), b.svgRef.addEventListener("touchcancel", q)) : L.value === "text" && (b.svgRef.addEventListener("mousedown", R), b.svgRef.addEventListener("touchstart", R, { passive: !1 })), E.value && (E.value.style.pointerEvents = "auto"));
+		}
+		function Re() {
+			b.svgRef && (b.svgRef.removeEventListener("mousedown", U), b.svgRef.removeEventListener("mousemove", W), b.svgRef.removeEventListener("mouseup", J), b.svgRef.removeEventListener("mouseleave", J), b.svgRef.removeEventListener("touchstart", U), b.svgRef.removeEventListener("touchmove", W), b.svgRef.removeEventListener("touchend", J), b.svgRef.removeEventListener("touchcancel", J), b.svgRef.removeEventListener("mousedown", G), b.svgRef.removeEventListener("mousemove", K), b.svgRef.removeEventListener("mouseup", q), b.svgRef.removeEventListener("touchstart", G), b.svgRef.removeEventListener("touchmove", K), b.svgRef.removeEventListener("touchend", q), b.svgRef.removeEventListener("touchcancel", q), b.svgRef.removeEventListener("mousedown", R), b.svgRef.removeEventListener("touchstart", R), E.value && (E.value.style.pointerEvents = "none"));
+		}
+		y(() => b.active, (e) => {
+			e ? Le() : Re();
+		}), y(() => b.active, () => {
+			p(() => {
+				ke();
+			});
+		}), y(() => b.active, (e) => {
+			b.svgRef && (e ? b.svgRef.style.touchAction = "none" : b.svgRef.style.touchAction = "");
+		}, { immediate: !0 });
+		function ze() {
+			E.value && (L.value === "text" ? E.value.style.cursor = "text" : ["line", "arrow"].includes(L.value) ? E.value.style.cursor = "crosshair" : E.value.style.cursor = xe.value);
+		}
+		let Y = _(null), Be = _(null), Ve = _(!1), X = _({
+			x: 0,
+			y: 0
+		}), Z = _(null), Q = _(null), He = s(() => ({
+			backgroundColor: b.backgroundColor,
+			"--vue-ui-pen-and-paper-drag-x": `${X.value.x}px`,
+			"--vue-ui-pen-and-paper-drag-y": `${X.value.y}px`
+		}));
+		function Ue() {
+			return {
+				width: document.documentElement.clientWidth || window.innerWidth,
+				height: document.documentElement.clientHeight || window.innerHeight
+			};
+		}
+		function We() {
+			if (!Y.value) return null;
+			let e = [
+				Y.value,
+				Y.value.querySelector(".vue-ui-pen-and-paper-drag-handle"),
+				Y.value.querySelector(".vertical-range")
+			].filter(Boolean).map((e) => e.getBoundingClientRect());
+			return {
+				left: Math.min(...e.map((e) => e.left)),
+				top: Math.min(...e.map((e) => e.top)),
+				right: Math.max(...e.map((e) => e.right)),
+				bottom: Math.max(...e.map((e) => e.bottom))
+			};
+		}
+		function Ge(e) {
+			if (e.pointerType === "mouse" && e.button !== 0 || !Y.value) return;
+			e.preventDefault(), e.stopPropagation();
+			let t = We();
+			t && (Ve.value = !0, Q.value = e.pointerId, Z.value = {
+				clientX: e.clientX,
+				clientY: e.clientY,
+				offsetX: X.value.x,
+				offsetY: X.value.y,
+				rect: t
+			}, window.addEventListener("pointermove", Ke), window.addEventListener("pointerup", $), window.addEventListener("pointercancel", $));
+		}
+		function Ke(e) {
+			if (!Ve.value || !Z.value || e.pointerId !== Q.value) return;
+			e.preventDefault();
+			let t = Z.value, { width: n, height: r } = Ue(), i = e.clientX - t.clientX, a = e.clientY - t.clientY, o = Math.min(Math.max(i, -t.rect.left), n - t.rect.right), s = Math.min(Math.max(a, -t.rect.top), r - t.rect.bottom);
+			X.value = {
+				x: t.offsetX + o,
+				y: t.offsetY + s
+			};
+		}
+		function $(e) {
+			(e?.pointerId === void 0 || Q.value === null || e.pointerId === Q.value) && (Ve.value = !1, Z.value = null, Q.value = null, window.removeEventListener("pointermove", Ke), window.removeEventListener("pointerup", $), window.removeEventListener("pointercancel", $));
+		}
+		function qe() {
+			if (!Y.value || !b.active) return;
+			let e = We();
+			if (!e) return;
+			let { width: t, height: n } = Ue(), r = 0, i = 0;
+			e.left < 0 ? r = -e.left : e.right > t && (r = t - e.right), e.top < 0 ? i = -e.top : e.bottom > n && (i = n - e.bottom), (r || i) && (X.value = {
+				x: X.value.x + r,
+				y: X.value.y + i
+			});
+		}
+		return te(() => {
+			window.addEventListener("resize", qe), p(() => {
+				b.svgRef && (E.value = document.createElementNS("http://www.w3.org/2000/svg", "g"), E.value.setAttribute("class", "vue-data-ui-doodles"), b.svgRef.appendChild(E.value), ze(), Re());
+			});
+		}), y(() => b.active, async (e) => {
+			if (!e) {
+				$(), X.value = {
+					x: 0,
+					y: 0
+				};
+				return;
+			}
+			await p(), Be.value?.focus();
+		}, { flush: "post" }), ee(() => {
+			B(), $(), window.removeEventListener("resize", qe), E.value && b.svgRef && (E.value.remove(), Re());
+		}), (t, r) => e.active ? (ne(), l("div", {
+			key: 0,
+			ref_key: "menuRef",
+			ref: Y,
+			"data-dom-to-png-ignore": "",
+			class: m(["vue-ui-pen-and-paper-actions", { "vue-ui-pen-and-paper-actions-dragging": Ve.value }]),
+			style: g(He.value)
+		}, [
+			u("button", {
+				type: "button",
+				class: "vue-ui-pen-and-paper-drag-handle",
+				"aria-label": "Move drawing toolbar",
+				style: g({
+					backgroundColor: e.backgroundColor,
+					border: `1px solid ${V.value}`,
+					color: e.color
+				}),
+				onPointerdown: Ge
+			}, [(ne(), l("svg", le, [
+				u("circle", {
+					fill: e.color,
+					cx: "3",
+					cy: "3",
+					r: "0.7"
+				}, null, 8, ue),
+				u("circle", {
+					fill: e.color,
+					cx: "3",
+					cy: "6",
+					r: "0.7"
+				}, null, 8, de),
+				u("circle", {
+					fill: e.color,
+					cx: "3",
+					cy: "9",
+					r: "0.7"
+				}, null, 8, fe)
+			]))], 36),
+			u("button", {
+				ref_key: "buttonToggle",
+				ref: Be,
+				class: "vue-ui-pen-and-paper-action",
+				onClick: r[0] ||= (e) => me("close"),
+				style: g({
+					backgroundColor: e.backgroundColor,
+					border: `1px solid ${V.value}`,
+					cursor: e.isCursorPointer ? "pointer" : "default"
+				})
+			}, [v(t.$slots, "annotator-action-close", {}, () => [d(a, {
+				name: "close",
+				stroke: e.color
+			}, null, 8, ["stroke"])])], 4),
+			u("button", {
+				class: "vue-ui-pen-and-paper-action",
+				tabindex: "-1",
+				style: g(`padding: 0 !important; cursor: ${e.isCursorPointer ? "pointer" : "default"}`)
+			}, [d(o, {
+				value: C.value,
+				"onUpdate:value": r[1] ||= (e) => C.value = e,
+				backgroundColor: e.backgroundColor,
+				buttonBorderColor: V.value,
+				isCursorPointer: e.isCursorPointer
+			}, {
+				"annotator-action-color": oe(({ color: e }) => [v(t.$slots, "annotator-action-color", h(f({ color: e })))]),
+				_: 3
+			}, 8, [
+				"value",
+				"backgroundColor",
+				"buttonBorderColor",
+				"isCursorPointer"
+			])], 4),
+			u("button", {
+				class: m(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-active": L.value === "text" }]),
+				onClick: r[2] ||= (e) => Se(),
+				style: g({
+					backgroundColor: e.backgroundColor,
+					border: `1px solid ${V.value}`,
+					cursor: e.isCursorPointer ? "pointer" : "default"
+				})
+			}, [v(t.$slots, "annotator-action-draw", h(f({ mode: L.value })), () => [d(a, {
+				name: be[L.value],
+				stroke: e.color
+			}, null, 8, ["name", "stroke"])]), u("div", { style: g({
+				position: "absolute",
+				bottom: "-20px",
+				color: V.value,
+				width: "100%",
+				textAlign: "center",
+				fontSize: "12px",
+				fontVariantNumeric: "tabular-nums"
+			}) }, re(ie(n)({
+				v: L.value === "text" ? Math.round(P.value) : Math.round(w.value),
+				s: "px",
+				r: 1
+			})), 5)], 6),
+			u("button", {
+				class: m(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !x.value.length }]),
+				disabled: !x.value.length,
+				onClick: Pe,
+				style: g({
+					backgroundColor: e.backgroundColor,
+					border: `1px solid ${V.value}`,
+					marginTop: "20px",
+					cursor: e.isCursorPointer ? "pointer" : "default"
+				})
+			}, [v(t.$slots, "annotator-action-undo", h(f({ disabled: !x.value.length })), () => [d(a, {
+				name: "refresh",
+				stroke: e.color
+			}, null, 8, ["stroke"])])], 14, pe),
+			u("button", {
+				class: m(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !S.value.length }]),
+				onClick: Fe,
+				style: g({
+					backgroundColor: e.backgroundColor,
+					border: `1px solid ${V.value}`,
+					cursor: e.isCursorPointer ? "pointer" : "default"
+				})
+			}, [v(t.$slots, "annotator-action-redo", h(f({ disabled: !S.value.length })), () => [d(a, {
+				name: "refresh",
+				stroke: e.color,
+				style: { transform: "scaleX(-1)" }
+			}, null, 8, ["stroke"])])], 6),
+			u("button", {
+				class: m(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !x.value.length }]),
+				onClick: Ie,
+				style: g({
+					backgroundColor: e.backgroundColor,
+					border: `1px solid ${V.value}`,
+					cursor: e.isCursorPointer ? "pointer" : "default"
+				})
+			}, [v(t.$slots, "annotator-action-delete", h(f({ disabled: !x.value.length })), () => [d(a, {
+				name: "trash",
+				stroke: e.color
+			}, null, 8, ["stroke"])])], 6),
+			L.value === "text" ? se((ne(), l("input", {
+				key: 0,
+				ref: "range",
+				type: "range",
+				class: "vertical-range",
+				min: 3,
+				max: 48,
+				step: 1,
+				"onUpdate:modelValue": r[3] ||= (e) => P.value = e,
+				style: g({ accentColor: e.color })
+			}, null, 4)), [[ae, P.value]]) : se((ne(), l("input", {
+				key: 1,
+				ref: "range",
+				type: "range",
+				class: "vertical-range",
+				min: .5,
+				max: 12,
+				step: .1,
+				"onUpdate:modelValue": r[4] ||= (e) => w.value = e,
+				style: g({ accentColor: e.color })
+			}, null, 4)), [[ae, w.value]])
+		], 6)) : c("", !0);
+	}
+};
+//#endregion
+export { b as n, ce as t };

package/dist/components/vue-ui-3d-bar.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-3d-bar-CXOPbeiO.js";
+import { t as e } from "../vue-ui-3d-bar-DbMCxsYc.js";
 export { e as VueUi3dBar, e as default };

package/dist/components/vue-ui-accordion.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-accordion-DIPkJSR5.js";
+import { t as e } from "../vue-ui-accordion-CLU_su1P.js";
 export { e as VueUiAccordion, e as default };

package/dist/components/vue-ui-age-pyramid.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-age-pyramid-BXsOR5vR.js";
+import { t as e } from "../vue-ui-age-pyramid-Dmbk6rMP.js";
 export { e as VueUiAgePyramid, e as default };

package/dist/components/vue-ui-annotator.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-annotator-BUp16M0M.js";
+import { t as e } from "../vue-ui-annotator-QjHngrui.js";
 export { e as VueUiAnnotator, e as default };

package/dist/components/vue-ui-bullet.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-bullet-CQDSUZGN.js";
+import { t as e } from "../vue-ui-bullet-DBZ3n4yK.js";
 export { e as VueUiBullet, e as default };

package/dist/components/vue-ui-bump.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-bump-Bi6vei_K.js";
+import { t as e } from "../vue-ui-bump-CirnIRZw.js";
 export { e as VueUiBump, e as default };

package/dist/components/vue-ui-candlestick.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-candlestick-vlN6ggwT.js";
+import { t as e } from "../vue-ui-candlestick-DZX6VVMs.js";
 export { e as VueUiCandlestick, e as default };

package/dist/components/vue-ui-carousel-table.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-carousel-table-BsM01Vhv.js";
+import { t as e } from "../vue-ui-carousel-table-CWhd8Plu.js";
 export { e as VueUiCarouselTable, e as default };

package/dist/components/vue-ui-chestnut.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-chestnut-DeZm4G27.js";
+import { t as e } from "../vue-ui-chestnut-CMktwDOV.js";
 export { e as VueUiChestnut, e as default };

package/dist/components/vue-ui-chord.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-chord-BVZ0JwUk.js";
+import { t as e } from "../vue-ui-chord-_3zAHsdj.js";
 export { e as VueUiChord, e as default };

package/dist/components/vue-ui-circle-pack.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-circle-pack-BPfju3EJ.js";
+import { t as e } from "../vue-ui-circle-pack-BhcQw1-I.js";
 export { e as VueUiCirclePack, e as default };

package/dist/components/vue-ui-cursor.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-cursor-CXA7DIe8.js";
+import { t as e } from "../vue-ui-cursor-Bo39SVBr.js";
 export { e as VueUiCursor, e as default };

package/dist/components/vue-ui-dag.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-dag-B-DSsdY1.js";
+import { t as e } from "../vue-ui-dag-DEF_uf-N.js";
 export { e as VueUiDag, e as default };

package/dist/components/vue-ui-dashboard.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-dashboard-DgluDGFX.js";
+import { t as e } from "../vue-ui-dashboard-DFIIsh3Z.js";
 export { e as VueUiDashboard, e as default };

package/dist/components/vue-ui-digits.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-digits-B0A9bPI5.js";
+import { t as e } from "../vue-ui-digits-BrIyw5fg.js";
 export { e as VueUiDigits, e as default };

package/dist/components/vue-ui-donut-evolution.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-donut-evolution-vfnMiNoN.js";
+import { t as e } from "../vue-ui-donut-evolution-BmNVUdQJ.js";
 export { e as VueUiDonutEvolution, e as default };

package/dist/components/vue-ui-donut.js

@@ -1,2 +1,2 @@
-import { t as e } from "../vue-ui-donut-HCALQsex.js";
+import { t as e } from "../vue-ui-donut-IafNVctv.js";
 export { e as VueUiDonut, e as default };