vue-data-ui 3.16.0 → 3.16.1

package/dist/{PenAndPaper-DARlvvKW.js → PenAndPaper-Ct3qJ4lA.js}

@@ -1,8 +1,8 @@
-import { ref as v, computed as he, watch as te, nextTick as Ae, onMounted as Te, onBeforeUnmount as Fe, openBlock as re, createElementBlock as se, normalizeStyle as x, createElementVNode as B, renderSlot as M, createVNode as T, withCtx as Ie, normalizeProps as U, guardReactiveProps as K, normalizeClass as ne, toDisplayString as Qe, unref as Ve, withDirectives as be, vModelText as we, createCommentVNode as Ue } from "vue";
-import X from "./BaseIcon-Cb3zzG6s.js";
-import { C as Ke } from "./ColorPicker-DQ5sdRrl.js";
-import { j as ye, x as Xe, l as Ye, X as Y } from "./lib-DBptbyyI.js";
-const Ge = ["disabled"], Oe = {
+import { ref as v, computed as be, watch as U, nextTick as re, onMounted as Fe, onBeforeUnmount as Ie, openBlock as se, createElementBlock as ue, normalizeStyle as x, createElementVNode as B, renderSlot as M, createVNode as T, withCtx as Qe, normalizeProps as K, guardReactiveProps as X, normalizeClass as ne, toDisplayString as Ve, unref as Ue, withDirectives as we, vModelText as ye, createCommentVNode as Ke } from "vue";
+import Y from "./BaseIcon-Cb3zzG6s.js";
+import { C as Xe } from "./ColorPicker-B0mV4xzu.js";
+import { j as xe, x as Ye, l as Ge, X as G } from "./lib-DBptbyyI.js";
+const qe = ["disabled"], je = {
   __name: "PenAndPaper",
   props: {
     svgRef: {
@@ -31,29 +31,27 @@ const Ge = ["disabled"], Oe = {
     }
   },
   emits: ["close"],
-  setup(i, { emit: xe }) {
-    const l = i, Ce = xe, w = v([]), C = v([]), E = v(l.color), N = v(2), k = v(!1), G = v(""), r = v(null), y = v(null), f = v(null), F = v(null);
-    v(null);
-    const ae = v(`arrow-${ye()}`), ue = v(`arrow-def-${ye()}`), q = v(!1), m = v(null), le = v({ x: 0, y: 0 }), I = v([""]), Q = v({ row: 0, col: 0 }), D = v(16), V = v(!1), ie = ["arrow", "text", "line", "draw"], z = v(0), g = he(() => ie[z.value]), ke = {
+  setup(i, { emit: Ce }) {
+    const l = i, ke = Ce, w = v([]), C = v([]), E = v(l.color), N = v(2), k = v(!1), q = v(""), r = v(null), y = v(null), f = v(null), F = v(null), ae = v(`arrow-${xe()}`), ie = v(`arrow-def-${xe()}`), z = v(!1), m = v(null), le = v({ x: 0, y: 0 }), I = v([""]), Q = v({ row: 0, col: 0 }), D = v(16), V = v(!1), ve = ["arrow", "text", "line", "draw"], H = v(0), g = be(() => ve[H.value]), Le = {
       arrow: "plotArrow",
       text: "text",
       line: "plotLine",
       draw: "annotator"
-    }, Le = v("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 Ee() {
-      z.value + 1 >= ie.length ? z.value = 0 : z.value += 1;
+    }, Ee = v("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 Re() {
+      H.value + 1 >= ve.length ? H.value = 0 : H.value += 1;
     }
-    function H(t) {
-      if (!r.value || g.value !== "text" || q.value) return;
+    function W(t) {
+      if (!r.value || g.value !== "text" || z.value) return;
       const { x: e, y: a } = S(t);
       le.value = { x: e, y: a }, I.value = [""], Q.value = { row: 0, col: 0 }, V.value = !1;
       const n = document.createElementNS("http://www.w3.org/2000/svg", "text");
       n.setAttribute("x", e), n.setAttribute("y", a), n.setAttribute("fill", E.value), n.setAttribute("font-size", D.value * l.scale), n.setAttribute("font-family", "sans-serif"), n.setAttribute("class", "vue-data-ui-doodle"), n.setAttribute("dominant-baseline", "hanging"), n.setAttribute("pointer-events", "all");
       const o = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
-      o.setAttribute("x", e), o.setAttribute("dy", "0"), o.textContent = "", n.appendChild(o), n.style.pointerEvents = "none", n.style.userSelect = "none", r.value.appendChild(n), m.value = n, q.value = !0, window.addEventListener("keydown", ve), window.addEventListener("mousedown", fe, !0), ce(), de();
+      o.setAttribute("x", e), o.setAttribute("dy", "0"), o.textContent = "", n.appendChild(o), n.style.pointerEvents = "none", n.style.userSelect = "none", r.value.appendChild(n), m.value = n, z.value = !0, window.addEventListener("keydown", ce), window.addEventListener("mousedown", ge, !0), de(), fe();
     }
-    function ve(t) {
-      if (!q.value) return;
+    function ce(t) {
+      if (!z.value) return;
       let { row: e, col: a } = Q.value, n = I.value.slice(), o = !1;
       if (t.key === "Enter") {
         const s = n[e], u = s.slice(0, a), c = s.slice(a);
@@ -82,9 +80,9 @@ const Ge = ["disabled"], Oe = {
         oe(!0);
         return;
       } else t.key === "Tab" && t.preventDefault();
-      o && (I.value = n, Q.value = { row: e, col: a }, n.some((u) => u.length > 0) && !V.value && m.value && (w.value.push(m.value), C.value = [], V.value = !0), ce(), de());
+      o && (I.value = n, Q.value = { row: e, col: a }, n.some((u) => u.length > 0) && !V.value && m.value && (w.value.push(m.value), C.value = [], V.value = !0), de(), fe());
     }
-    function ce() {
+    function de() {
       const t = m.value, { x: e } = le.value;
       for (; t.firstChild; ) t.removeChild(t.firstChild);
       I.value.forEach((a, n) => {
@@ -92,22 +90,22 @@ const Ge = ["disabled"], Oe = {
         o.setAttribute("x", e), o.setAttribute("dy", n === 0 ? "0" : `${D.value * 1.2 * l.scale}`), o.textContent = a.length ? a : "​", t.appendChild(o);
       });
     }
-    const W = v(null);
-    function O() {
-      W.value !== null && (clearInterval(W.value), W.value = null);
+    const O = v(null);
+    function j() {
+      O.value !== null && (clearInterval(O.value), O.value = null);
     }
-    function Re(t) {
-      O();
+    function Se(t) {
+      j();
       let e = !0;
-      t.style.opacity = "1", W.value = setInterval(() => {
+      t.style.opacity = "1", O.value = setInterval(() => {
         if (!r.value || !t || !r.value.contains(t)) {
-          O();
+          j();
           return;
         }
         e = !e, t.style.opacity = e ? "1" : "0";
       }, 500);
     }
-    function de() {
+    function fe() {
       const t = r.value?.querySelector(".vue-data-ui-svg-caret");
       t && r.value && r.value.removeChild(t);
       const e = m.value;
@@ -121,16 +119,16 @@ const Ge = ["disabled"], Oe = {
       const A = d.getBBox();
       r.value.removeChild(d);
       const b = n + o * u * 1.2, $ = a + A.width, h = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-      h.setAttribute("x", $), h.setAttribute("y", b), h.setAttribute("rx", 1), h.setAttribute("width", 2), h.setAttribute("height", u), h.setAttribute("fill", E.value), h.setAttribute("class", "vue-data-ui-svg-caret"), r.value.appendChild(h), Re(h);
+      h.setAttribute("x", $), h.setAttribute("y", b), h.setAttribute("rx", 1), h.setAttribute("width", 2), h.setAttribute("height", u), h.setAttribute("fill", E.value), h.setAttribute("class", "vue-data-ui-svg-caret"), r.value.appendChild(h), Se(h);
     }
-    function fe(t) {
+    function ge(t) {
       if (m.value && !m.value.contains(t.target)) {
         const e = m.value.children;
         e.length === 1 && (e[0].textContent === "" || e[0].textContent === "​") && m.value.remove(), oe(!1);
       }
     }
     function oe(t = !1) {
-      window.removeEventListener("keydown", ve), window.removeEventListener("mousedown", fe, !0), O();
+      window.removeEventListener("keydown", ce), window.removeEventListener("mousedown", ge, !0), j();
       const e = r.value?.querySelector(".vue-data-ui-svg-caret");
       e && r.value && r.value.removeChild(e);
       const a = m.value?.children;
@@ -139,10 +137,10 @@ const Ge = ["disabled"], Oe = {
         const o = a[0].textContent;
         n = !o || o === "​";
       }
-      (t || n) && m.value && r.value && r.value.contains(m.value) && r.value.removeChild(m.value), q.value = !1, m.value = null, I.value = [""], Q.value = { row: 0, col: 0 }, V.value = !1;
+      (t || n) && m.value && r.value && r.value.contains(m.value) && r.value.removeChild(m.value), z.value = !1, m.value = null, I.value = [""], Q.value = { row: 0, col: 0 }, V.value = !1;
     }
-    const R = he(() => Xe(l.color, 0.6));
-    function ge() {
+    const R = be(() => Ye(l.color, 0.6));
+    function me() {
       if (!r.value) return;
       const t = r.value.querySelector(".vue-data-ui-mask");
       if (t && r.value.removeChild(t), l.active) {
@@ -158,14 +156,14 @@ const Ge = ["disabled"], Oe = {
       const c = e.getScreenCTM()?.inverse();
       return c ? a.matrixTransform(c) : { x: 0, y: 0 };
     }
-    function Se(t) {
+    function $e(t) {
       const e = t.trim().split(/\s+/);
       if (e.length < 4)
         return t;
       const a = e.slice(1).map(Number);
       if (a.length % 2 !== 0)
         return t;
-      const n = $e(a), o = [`M ${n[0]} ${n[1]}`];
+      const n = Be(a), o = [`M ${n[0]} ${n[1]}`];
       for (let c = 2; c < n.length - 2; c += 2) {
         const p = n[c - 2], d = n[c - 1], A = n[c], b = n[c + 1], $ = (p + A) / 2, h = (d + b) / 2;
         o.push(`Q ${p} ${d} ${$} ${h}`);
@@ -173,7 +171,7 @@ const Ge = ["disabled"], Oe = {
       const s = n[n.length - 2], u = n[n.length - 1];
       return o.push(`L ${s} ${u}`), o.join(" ");
     }
-    function $e(t, e = 1) {
+    function Be(t, e = 1) {
       const a = [...t];
       for (let n = 2; n < t.length - 2; n += 2) {
         const o = t[n], s = t[n + 1], u = t[n - 2], c = t[n - 1], p = t[n + 2], d = t[n + 3];
@@ -181,7 +179,7 @@ const Ge = ["disabled"], Oe = {
       }
       return a;
     }
-    function Be(t) {
+    function Ne(t) {
       const e = t.trim().split(/\s+/);
       let a = "", n = "", o = null, s = null;
       for (let u = 0; u < e.length; u += 1) {
@@ -206,34 +204,34 @@ const Ge = ["disabled"], Oe = {
       }
       return a;
     }
-    function j(t) {
+    function J(t) {
       if (t.cancelable && t.preventDefault(), g.value !== "draw" || !l.active || !r.value) return;
       k.value = !0;
       const { x: e, y: a } = S(t);
-      F.value = { x: e, y: a }, G.value = `M ${e} ${a}`, y.value = document.createElementNS(Y, "path"), y.value.setAttribute("stroke", E.value), y.value.setAttribute("stroke-width", N.value * l.scale), y.value.setAttribute("fill", "none"), y.value.setAttribute("stroke-linecap", "round"), y.value.setAttribute("stroke-linejoin", "round"), y.value.setAttribute("class", "vue-data-ui-doodle"), r.value.appendChild(y.value);
+      F.value = { x: e, y: a }, q.value = `M ${e} ${a}`, y.value = document.createElementNS(G, "path"), y.value.setAttribute("stroke", E.value), y.value.setAttribute("stroke-width", N.value * l.scale), y.value.setAttribute("fill", "none"), y.value.setAttribute("stroke-linecap", "round"), y.value.setAttribute("stroke-linejoin", "round"), y.value.setAttribute("class", "vue-data-ui-doodle"), r.value.appendChild(y.value);
     }
-    function J(t) {
+    function Z(t) {
       if (t.cancelable && t.preventDefault(), !k.value || !r.value || !y.value) return;
       const { x: e, y: a } = S(t);
-      G.value += ` ${e} ${a}`, y.value.setAttribute("d", G.value);
+      q.value += ` ${e} ${a}`, y.value.setAttribute("d", q.value);
     }
-    function Ne() {
+    function De() {
       const t = l.svgRef;
       if (!t) return;
-      let e = t.querySelector(`defs#${ue.value}`);
-      if (e || (e = document.createElementNS(Y, "defs"), e.setAttribute("id", ue.value), t.appendChild(e)), e.querySelector(`#${ae.value}`)) return;
-      const a = 6, n = document.createElementNS(Y, "marker");
+      let e = t.querySelector(`defs#${ie.value}`);
+      if (e || (e = document.createElementNS(G, "defs"), e.setAttribute("id", ie.value), t.appendChild(e)), e.querySelector(`#${ae.value}`)) return;
+      const a = 6, n = document.createElementNS(G, "marker");
       n.setAttribute("id", ae.value), n.setAttribute("markerUnits", "strokeWidth"), n.setAttribute("markerWidth", String(a)), n.setAttribute("markerHeight", String(a)), n.setAttribute("refX", String(a - 2)), n.setAttribute("refY", String(a / 2)), n.setAttribute("orient", "auto"), n.setAttribute("viewBox", `0 0 ${a} ${a}`);
-      const o = document.createElementNS(Y, "path");
+      const o = document.createElementNS(G, "path");
       o.setAttribute("d", `M 0 0 L ${a} ${a / 2} L 0 ${a} z`), o.setAttribute("fill", "context-stroke"), o.setAttribute("stroke", "none"), n.appendChild(o), e.appendChild(n);
     }
-    function Z(t) {
+    function _(t) {
       if (t.cancelable && t.preventDefault(), !["line", "arrow"].includes(g.value) || !l.active || !r.value) return;
-      g.value === "arrow" && Ne(), k.value = !0;
+      g.value === "arrow" && De(), k.value = !0;
       const { x: e, y: a } = S(t);
-      F.value = { x: e, y: a }, f.value = document.createElementNS(Y, "line"), f.value.setAttribute("stroke", E.value), f.value.setAttribute("stroke-width", N.value * l.scale), f.value.setAttribute("stroke-linecap", "round"), f.value.setAttribute("class", "vue-data-ui-doodle"), f.value.setAttribute("x1", e), f.value.setAttribute("y1", a), f.value.setAttribute("x2", e), f.value.setAttribute("y2", a), g.value === "arrow" && f.value.setAttribute("marker-end", `url(#${ae.value})`), r.value.appendChild(f.value);
+      F.value = { x: e, y: a }, f.value = document.createElementNS(G, "line"), f.value.setAttribute("stroke", E.value), f.value.setAttribute("stroke-width", N.value * l.scale), f.value.setAttribute("stroke-linecap", "round"), f.value.setAttribute("class", "vue-data-ui-doodle"), f.value.setAttribute("x1", e), f.value.setAttribute("y1", a), f.value.setAttribute("x2", e), f.value.setAttribute("y2", a), g.value === "arrow" && f.value.setAttribute("marker-end", `url(#${ae.value})`), r.value.appendChild(f.value);
     }
-    function _(t) {
+    function ee(t) {
       if (t.cancelable && t.preventDefault(), !["line", "arrow"].includes(g.value) || !k.value || !r.value || !f.value) return;
       const { x: e, y: a } = S(t);
       f.value.setAttribute("x2", e), f.value.setAttribute("y2", a);
@@ -253,67 +251,76 @@ const Ge = ["disabled"], Oe = {
           n.setAttribute("cx", e), n.setAttribute("cy", a), n.setAttribute("r", N.value * l.scale / 2), n.setAttribute("fill", E.value), n.setAttribute("class", "vue-data-ui-doodle"), r.value.appendChild(n), w.value.push(n);
         } else {
           const n = y.value;
-          n.setAttribute("d", Be(Se(G.value))), w.value.push(n);
+          n.setAttribute("d", Ne($e(q.value))), w.value.push(n);
         }
         C.value = [], y.value = "";
       }
       k.value = !1;
     }
-    function De() {
+    function Pe() {
       if (w.value.length > 0) {
         const t = w.value.pop();
         C.value.push(t), t === m.value ? oe(!0) : r.value && r.value.contains(t) && r.value.removeChild(t);
       }
     }
-    function Pe() {
+    function Me() {
       if (C.value.length > 0) {
         const t = C.value.pop();
         w.value.push(t), r.value && r.value.appendChild(t);
       }
     }
-    function Me() {
-      r.value && (r.value.innerHTML = ""), w.value = [], C.value = [], V.value = !1, ge();
+    function Te() {
+      r.value && (r.value.innerHTML = ""), w.value = [], C.value = [], V.value = !1, me();
     }
-    te(g, (t) => {
-      l.active && (ee(), me(), pe());
+    U(g, (t) => {
+      l.active && (te(), pe(), he());
     });
-    function me() {
-      !l.svgRef || !l.active || (g.value === "draw" ? (l.svgRef.addEventListener("mousedown", j), l.svgRef.addEventListener("mousemove", J), l.svgRef.addEventListener("mouseup", L), l.svgRef.addEventListener("mouseleave", L), l.svgRef.addEventListener("touchstart", j, { passive: !1 }), l.svgRef.addEventListener("touchmove", J, { passive: !1 }), l.svgRef.addEventListener("touchend", L), l.svgRef.addEventListener("touchcancel", L)) : ["line", "arrow"].includes(g.value) ? (l.svgRef.addEventListener("mousedown", Z), l.svgRef.addEventListener("mousemove", _), l.svgRef.addEventListener("mouseup", P), l.svgRef.addEventListener("touchstart", Z, { passive: !1 }), l.svgRef.addEventListener("touchmove", _, { passive: !1 }), l.svgRef.addEventListener("touchend", P), l.svgRef.addEventListener("touchcancel", P)) : g.value === "text" && (l.svgRef.addEventListener("mousedown", H), l.svgRef.addEventListener("touchstart", H, { passive: !1 })), r.value && (r.value.style.pointerEvents = "auto"));
+    function pe() {
+      !l.svgRef || !l.active || (g.value === "draw" ? (l.svgRef.addEventListener("mousedown", J), l.svgRef.addEventListener("mousemove", Z), l.svgRef.addEventListener("mouseup", L), l.svgRef.addEventListener("mouseleave", L), l.svgRef.addEventListener("touchstart", J, { passive: !1 }), l.svgRef.addEventListener("touchmove", Z, { passive: !1 }), l.svgRef.addEventListener("touchend", L), l.svgRef.addEventListener("touchcancel", L)) : ["line", "arrow"].includes(g.value) ? (l.svgRef.addEventListener("mousedown", _), l.svgRef.addEventListener("mousemove", ee), l.svgRef.addEventListener("mouseup", P), l.svgRef.addEventListener("touchstart", _, { passive: !1 }), l.svgRef.addEventListener("touchmove", ee, { passive: !1 }), l.svgRef.addEventListener("touchend", P), l.svgRef.addEventListener("touchcancel", P)) : g.value === "text" && (l.svgRef.addEventListener("mousedown", W), l.svgRef.addEventListener("touchstart", W, { passive: !1 })), r.value && (r.value.style.pointerEvents = "auto"));
     }
-    function ee() {
-      l.svgRef && (l.svgRef.removeEventListener("mousedown", j), l.svgRef.removeEventListener("mousemove", J), l.svgRef.removeEventListener("mouseup", L), l.svgRef.removeEventListener("mouseleave", L), l.svgRef.removeEventListener("touchstart", j), l.svgRef.removeEventListener("touchmove", J), l.svgRef.removeEventListener("touchend", L), l.svgRef.removeEventListener("touchcancel", L), l.svgRef.removeEventListener("mousedown", Z), l.svgRef.removeEventListener("mousemove", _), l.svgRef.removeEventListener("mouseup", P), l.svgRef.removeEventListener("touchstart", Z), l.svgRef.removeEventListener("touchmove", _), l.svgRef.removeEventListener("touchend", P), l.svgRef.removeEventListener("touchcancel", P), l.svgRef.removeEventListener("mousedown", H), l.svgRef.removeEventListener("touchstart", H), r.value && (r.value.style.pointerEvents = "none"));
+    function te() {
+      l.svgRef && (l.svgRef.removeEventListener("mousedown", J), l.svgRef.removeEventListener("mousemove", Z), l.svgRef.removeEventListener("mouseup", L), l.svgRef.removeEventListener("mouseleave", L), l.svgRef.removeEventListener("touchstart", J), l.svgRef.removeEventListener("touchmove", Z), l.svgRef.removeEventListener("touchend", L), l.svgRef.removeEventListener("touchcancel", L), l.svgRef.removeEventListener("mousedown", _), l.svgRef.removeEventListener("mousemove", ee), l.svgRef.removeEventListener("mouseup", P), l.svgRef.removeEventListener("touchstart", _), l.svgRef.removeEventListener("touchmove", ee), l.svgRef.removeEventListener("touchend", P), l.svgRef.removeEventListener("touchcancel", P), l.svgRef.removeEventListener("mousedown", W), l.svgRef.removeEventListener("touchstart", W), r.value && (r.value.style.pointerEvents = "none"));
     }
-    te(() => l.active, (t) => {
-      t ? me() : ee();
-    }), te(() => l.active, () => {
-      Ae(() => {
-        ge();
+    U(() => l.active, (t) => {
+      t ? pe() : te();
+    }), U(() => l.active, () => {
+      re(() => {
+        me();
       });
-    }), te(
+    }), U(
       () => l.active,
       (t) => {
         l.svgRef && (t ? l.svgRef.style.touchAction = "none" : l.svgRef.style.touchAction = "");
       },
       { immediate: !0 }
     );
-    function pe() {
-      r.value && (g.value === "text" ? r.value.style.cursor = "text" : ["line", "arrow"].includes(g.value) ? r.value.style.cursor = "crosshair" : r.value.style.cursor = Le.value);
+    function he() {
+      r.value && (g.value === "text" ? r.value.style.cursor = "text" : ["line", "arrow"].includes(g.value) ? r.value.style.cursor = "crosshair" : r.value.style.cursor = Ee.value);
     }
-    return Te(() => {
-      Ae(() => {
-        l.svgRef && (r.value = document.createElementNS("http://www.w3.org/2000/svg", "g"), r.value.setAttribute("class", "vue-data-ui-doodles"), l.svgRef.appendChild(r.value), pe(), ee());
+    const Ae = v(null);
+    return Fe(() => {
+      re(() => {
+        l.svgRef && (r.value = document.createElementNS("http://www.w3.org/2000/svg", "g"), r.value.setAttribute("class", "vue-data-ui-doodles"), l.svgRef.appendChild(r.value), he(), te());
       });
-    }), Fe(() => {
-      O(), r.value && l.svgRef && (r.value.remove(), ee());
-    }), (t, e) => i.active ? (re(), se("div", {
+    }), U(
+      () => l.active,
+      async (t) => {
+        t && (await re(), Ae.value?.focus());
+      },
+      { flush: "post" }
+    ), Ie(() => {
+      j(), r.value && l.svgRef && (r.value.remove(), te());
+    }), (t, e) => i.active ? (se(), ue("div", {
       key: 0,
       "data-dom-to-png-ignore": "",
       class: "vue-ui-pen-and-paper-actions",
       style: x({ backgroundColor: i.backgroundColor })
     }, [
       B("button", {
+        ref_key: "buttonToggle",
+        ref: Ae,
         class: "vue-ui-pen-and-paper-action",
-        onClick: e[0] || (e[0] = (a) => Ce("close")),
+        onClick: e[0] || (e[0] = (a) => ke("close")),
         style: x({
           backgroundColor: i.backgroundColor,
           border: `1px solid ${R.value}`,
@@ -321,7 +328,7 @@ const Ge = ["disabled"], Oe = {
         })
       }, [
         M(t.$slots, "annotator-action-close", {}, () => [
-          T(X, {
+          T(Y, {
             name: "close",
             stroke: i.color
           }, null, 8, ["stroke"])
@@ -329,33 +336,34 @@ const Ge = ["disabled"], Oe = {
       ], 4),
       B("button", {
         class: "vue-ui-pen-and-paper-action",
+        tabindex: "-1",
         style: x(`padding: 0 !important; cursor: ${i.isCursorPointer ? "pointer" : "default"}`)
       }, [
-        T(Ke, {
+        T(Xe, {
           value: E.value,
           "onUpdate:value": e[1] || (e[1] = (a) => E.value = a),
           backgroundColor: i.backgroundColor,
           buttonBorderColor: R.value,
           isCursorPointer: i.isCursorPointer
         }, {
-          "annotator-action-color": Ie(({ color: a }) => [
-            M(t.$slots, "annotator-action-color", U(K({ color: a })))
+          "annotator-action-color": Qe(({ color: a }) => [
+            M(t.$slots, "annotator-action-color", K(X({ color: a })))
           ]),
           _: 3
         }, 8, ["value", "backgroundColor", "buttonBorderColor", "isCursorPointer"])
       ], 4),
       B("button", {
         class: ne(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-active": g.value === "text" }]),
-        onClick: e[2] || (e[2] = (a) => Ee()),
+        onClick: e[2] || (e[2] = (a) => Re()),
         style: x({
           backgroundColor: i.backgroundColor,
           border: `1px solid ${R.value}`,
           cursor: i.isCursorPointer ? "pointer" : "default"
         })
       }, [
-        M(t.$slots, "annotator-action-draw", U(K({ mode: g.value })), () => [
-          T(X, {
-            name: ke[g.value],
+        M(t.$slots, "annotator-action-draw", K(X({ mode: g.value })), () => [
+          T(Y, {
+            name: Le[g.value],
             stroke: i.color
           }, null, 8, ["name", "stroke"])
         ]),
@@ -369,7 +377,7 @@ const Ge = ["disabled"], Oe = {
             fontSize: "12px",
             fontVariantNumeric: "tabular-nums"
           })
-        }, Qe(Ve(Ye)({
+        }, Ve(Ue(Ge)({
           v: g.value === "text" ? Math.round(D.value) : Math.round(N.value),
           s: "px",
           r: 1
@@ -378,7 +386,7 @@ const Ge = ["disabled"], Oe = {
       B("button", {
         class: ne(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !w.value.length }]),
         disabled: !w.value.length,
-        onClick: De,
+        onClick: Pe,
         style: x({
           backgroundColor: i.backgroundColor,
           border: `1px solid ${R.value}`,
@@ -386,24 +394,24 @@ const Ge = ["disabled"], Oe = {
           cursor: i.isCursorPointer ? "pointer" : "default"
         })
       }, [
-        M(t.$slots, "annotator-action-undo", U(K({ disabled: !w.value.length })), () => [
-          T(X, {
+        M(t.$slots, "annotator-action-undo", K(X({ disabled: !w.value.length })), () => [
+          T(Y, {
             name: "refresh",
             stroke: i.color
           }, null, 8, ["stroke"])
         ])
-      ], 14, Ge),
+      ], 14, qe),
       B("button", {
         class: ne(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !C.value.length }]),
-        onClick: Pe,
+        onClick: Me,
         style: x({
           backgroundColor: i.backgroundColor,
           border: `1px solid ${R.value}`,
           cursor: i.isCursorPointer ? "pointer" : "default"
         })
       }, [
-        M(t.$slots, "annotator-action-redo", U(K({ disabled: !C.value.length })), () => [
-          T(X, {
+        M(t.$slots, "annotator-action-redo", K(X({ disabled: !C.value.length })), () => [
+          T(Y, {
             name: "refresh",
             stroke: i.color,
             style: { transform: "scaleX(-1)" }
@@ -412,21 +420,21 @@ const Ge = ["disabled"], Oe = {
       ], 6),
       B("button", {
         class: ne(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !w.value.length }]),
-        onClick: Me,
+        onClick: Te,
         style: x({
           backgroundColor: i.backgroundColor,
           border: `1px solid ${R.value}`,
           cursor: i.isCursorPointer ? "pointer" : "default"
         })
       }, [
-        M(t.$slots, "annotator-action-delete", U(K({ disabled: !w.value.length })), () => [
-          T(X, {
+        M(t.$slots, "annotator-action-delete", K(X({ disabled: !w.value.length })), () => [
+          T(Y, {
             name: "trash",
             stroke: i.color
           }, null, 8, ["stroke"])
         ])
       ], 6),
-      g.value === "text" ? be((re(), se("input", {
+      g.value === "text" ? we((se(), ue("input", {
         key: 0,
         ref: "range",
         type: "range",
@@ -437,8 +445,8 @@ const Ge = ["disabled"], Oe = {
         "onUpdate:modelValue": e[3] || (e[3] = (a) => D.value = a),
         style: x({ accentColor: i.color })
       }, null, 4)), [
-        [we, D.value]
-      ]) : be((re(), se("input", {
+        [ye, D.value]
+      ]) : we((se(), ue("input", {
         key: 1,
         ref: "range",
         type: "range",
@@ -449,11 +457,11 @@ const Ge = ["disabled"], Oe = {
         "onUpdate:modelValue": e[4] || (e[4] = (a) => N.value = a),
         style: x({ accentColor: i.color })
       }, null, 4)), [
-        [we, N.value]
+        [ye, N.value]
       ])
-    ], 4)) : Ue("", !0);
+    ], 4)) : Ke("", !0);
   }
 };
 export {
-  Oe as default
+  je as default
 };

package/dist/{UserOptions-DWHf8jyO.js → UserOptions-rW2fRf3V.js}

@@ -396,7 +396,7 @@ const Ze = {
     }
     function ve() {
       if (!h.value || !k.value || !E.value || !m.value) return;
-      const o = E.value.getBoundingClientRect(), t = m.value.getBoundingClientRect(), u = o.top + 36;
+      const o = E.value.getBoundingClientRect(), t = m.value.getBoundingClientRect(), u = o.top + 38;
       if (s.position === "right") {
         const M = s.offsetX ? s.offsetX : s.noOffset ? 0 : 4, L = o.right - M - t.width;
         fe(m.value, u, L, t.width);
@@ -1434,7 +1434,7 @@ const Ze = {
       [Me(De), Ee]
     ]);
   }
-}, Je = /* @__PURE__ */ Xe(Ge, [["__scopeId", "data-v-6433616f"]]);
+}, Je = /* @__PURE__ */ Xe(Ge, [["__scopeId", "data-v-69799749"]]);
 export {
   Je as default
 };

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

@@ -1,4 +1,4 @@
-import { default as d, default as f } from "../vue-ui-3d-bar-D5KRiVmZ.js";
+import { default as d, default as f } from "../vue-ui-3d-bar-BaFpQnd5.js";
 export {
   d as VueUi3dBar,
   f as default

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

@@ -1,4 +1,4 @@
-import { default as d, default as f } from "../vue-ui-age-pyramid-QfZ1J5Xx.js";
+import { default as d, default as f } from "../vue-ui-age-pyramid-CRM498Pc.js";
 export {
   d as VueUiAgePyramid,
   f as default

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

@@ -1,4 +1,4 @@
-import { default as e, default as o } from "../vue-ui-annotator-CpSMITlP.js";
+import { default as e, default as o } from "../vue-ui-annotator-CkPi9moo.js";
 export {
   e as VueUiAnnotator,
   o as default

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

@@ -1,4 +1,4 @@
-import { default as t, default as u } from "../vue-ui-bullet-B-mo7tzz.js";
+import { default as t, default as u } from "../vue-ui-bullet-BBiwof3c.js";
 export {
   t as VueUiBullet,
   u as default

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

@@ -1,4 +1,4 @@
-import { default as a, default as f } from "../vue-ui-bump-NfZcJ9Q0.js";
+import { default as a, default as f } from "../vue-ui-bump-Brxpu4xV.js";
 export {
   a as VueUiBump,
   f as default

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

@@ -1,4 +1,4 @@
-import { default as t, default as d } from "../vue-ui-candlestick-CGU-0rrF.js";
+import { default as t, default as d } from "../vue-ui-candlestick-DAnZv77-.js";
 export {
   t as VueUiCandlestick,
   d as default

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

@@ -1,4 +1,4 @@
-import { default as l, default as u } from "../vue-ui-carousel-table-BsdD3wU7.js";
+import { default as l, default as u } from "../vue-ui-carousel-table-BHRZBYY0.js";
 export {
   l as VueUiCarouselTable,
   u as default

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

@@ -1,4 +1,4 @@
-import { default as u, default as a } from "../vue-ui-chestnut-JpoNeiHD.js";
+import { default as u, default as a } from "../vue-ui-chestnut-CbrYnRgm.js";
 export {
   u as VueUiChestnut,
   a as default

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

@@ -1,4 +1,4 @@
-import { default as d, default as f } from "../vue-ui-chord-CxhxjRQz.js";
+import { default as d, default as f } from "../vue-ui-chord-CaX_IUVs.js";
 export {
   d as VueUiChord,
   f as default

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

@@ -1,4 +1,4 @@
-import { default as f, default as l } from "../vue-ui-circle-pack-DbxOzzk2.js";
+import { default as f, default as l } from "../vue-ui-circle-pack-CR3h53sc.js";
 export {
   f as VueUiCirclePack,
   l as default

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

@@ -1,4 +1,4 @@
-import { default as u, default as a } from "../vue-ui-cursor-CZGKKkeT.js";
+import { default as u, default as a } from "../vue-ui-cursor-Cjfazw7Z.js";
 export {
   u as VueUiCursor,
   a as default

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

@@ -1,4 +1,4 @@
-import { default as f, default as t } from "../vue-ui-dag-gal2eIv-.js";
+import { default as f, default as t } from "../vue-ui-dag-B9vH3c66.js";
 export {
   f as VueUiDag,
   t as default

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

@@ -1,4 +1,4 @@
-import { default as d, default as f } from "../vue-ui-dashboard-ClnkPMc5.js";
+import { default as d, default as f } from "../vue-ui-dashboard-DWll05qs.js";
 export {
   d as VueUiDashboard,
   f as default

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

@@ -1,4 +1,4 @@
-import { default as a, default as f } from "../vue-ui-digits-DColgbmH.js";
+import { default as a, default as f } from "../vue-ui-digits-DcM67rMx.js";
 export {
   a as VueUiDigits,
   f as default

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

@@ -1,4 +1,4 @@
-import { default as u, default as e } from "../vue-ui-donut-evolution-B6HtvZVs.js";
+import { default as u, default as e } from "../vue-ui-donut-evolution-BLSesj3c.js";
 export {
   u as VueUiDonutEvolution,
   e as default

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

@@ -1,4 +1,4 @@
-import { default as u, default as a } from "../vue-ui-donut-Bckj-DX2.js";
+import { default as u, default as a } from "../vue-ui-donut-Be5G38P5.js";
 export {
   u as VueUiDonut,
   a as default

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

@@ -1,4 +1,4 @@
-import { default as u, default as a } from "../vue-ui-dumbbell-r3Jv9uut.js";
+import { default as u, default as a } from "../vue-ui-dumbbell-DIMiCY4r.js";
 export {
   u as VueUiDumbbell,
   a as default

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

@@ -1,4 +1,4 @@
-import { default as f, default as l } from "../vue-ui-flow-BxfLqYXa.js";
+import { default as f, default as l } from "../vue-ui-flow-zvZylhgr.js";
 export {
   f as VueUiFlow,
   l as default

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

@@ -1,4 +1,4 @@
-import { default as a, default as f } from "../vue-ui-funnel-B6Gevxqh.js";
+import { default as a, default as f } from "../vue-ui-funnel-CSri-oWm.js";
 export {
   a as VueUiFunnel,
   f as default