vue-data-ui 3.5.0 → 3.5.2

package/dist/{vue-ui-xy-canvas-DDngEA1s.js → vue-ui-xy-canvas-y4h7gEFp.js}

@@ -1,7 +1,7 @@
 import { defineAsyncComponent as pe, ref as d, computed as g, useSlots as Tl, onMounted as Aa, toRefs as Al, watch as P, nextTick as be, onBeforeUnmount as Fa, shallowRef as Ye, createElementBlock as Fe, openBlock as R, normalizeClass as Fl, normalizeStyle as xe, createCommentVNode as W, createElementVNode as J, createBlock as V, unref as L, createSlots as Ra, withCtx as b, renderSlot as M, normalizeProps as K, guardReactiveProps as ee, createVNode as Oa, Teleport as Rl, toDisplayString as Ge, resolveDynamicComponent as Ol, mergeProps as Pl, createTextVNode as Pa } from "vue";
 import { c as Dl, t as El, b as Nl, p as ae, O as Le, e as _l, m as qe, a as se, d as re, h as Da, u as Hl, a1 as Xl, w as Ul, o as Bl, f as Wl, G as Ea, s as ke, S as Vl, P as Yl, Q as Gl, H as ql } from "./lib-C_mNZmhD.js";
 import { c as Zl, a as Ze, d as jl, t as Jl, u as Ql, l as C, r as Re, b as Y, p as Na } from "./useResponsive-DfdjqQps.js";
-import { u as Kl, a as je } from "./useNestedProp-BjZe1Y85.js";
+import { u as Kl, a as je } from "./useNestedProp-CReNavA0.js";
 import { u as et, B as at } from "./BaseScanner-BgWxam9d.js";
 import { u as lt } from "./usePrinter-DTzqpYKF.js";
 import { u as tt, a as ot, l as ut } from "./useTimeLabels-BGFjWgrv.js";
@@ -10,9 +10,9 @@ import { u as rt } from "./useChartAccessibility-9icAAmYg.js";
 import nt from "./img-BecE5qXd.js";
 import { t as it } from "./themes-AUNCOb2G.js";
 import vt from "./Legend-G6GMcdAc.js";
-import ct from "./Title-l36lOBMx.js";
+import ct from "./Title-BzH_LEA3.js";
 import dt from "./BaseIcon-BmMbm4d0.js";
-import ht from "./vue-ui-accordion-CZ0thhxa.js";
+import ht from "./vue-ui-accordion-BmFTVF1a.js";
 import { S as ft } from "./SlicerPreview-ij72TAs6.js";
 import { _ as yt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const mt = ["id"], gt = ["id"], pt = ["id"], bt = ["onClick"], xt = {
@@ -40,7 +40,7 @@ const mt = ["id"], gt = ["id"], pt = ["id"], bt = ["onClick"], xt = {
   },
   emits: ["selectLegend", "selectX"],
   setup(Je, { expose: _a, emit: Ha }) {
-    const Xa = pe(() => import("./Tooltip-oWCO1HKy.js")), Ua = pe(() => import("./DataTable-BT7VF2ua.js")), Ba = pe(() => import("./UserOptions-CGnQt6Fd.js")), Wa = pe(() => import("./NonSvgPenAndPaper-C7TRn0_3.js")), Va = pe(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_xy_canvas: Ya } = Kl(), p = Je, Q = d(Dl()), H = d(null), le = d(null), v = d(null), m = d(1), G = d(1), ne = d(!1), h = d(null), Ce = d(""), Qe = d(null), $ = d([]), te = d(1), D = d(!0), X = d(!0), we = d(null), Ke = d(0), ie = d(!1), ea = d(null), aa = d(null), q = d(null), la = d(null), Oe = d(0), Pe = d(0), De = d(0), E = d(null), ta = d(!1), ve = d(null), Ee = d(null), ce = d(!1), oa = d(!1), Se = d(!1), w = d(null), U = g(() => Array.isArray(He.value) && He.value.length > 0), Ne = Ha, Ga = Tl();
+    const Xa = pe(() => import("./Tooltip-oWCO1HKy.js")), Ua = pe(() => import("./DataTable-BT7VF2ua.js")), Ba = pe(() => import("./UserOptions-CGnQt6Fd.js")), Wa = pe(() => import("./NonSvgPenAndPaper-DVgKKLIf.js")), Va = pe(() => import("./BaseDraggableDialog-ymf2sfB8.js")), { vue_ui_xy_canvas: Ya } = Kl(), p = Je, Q = d(Dl()), H = d(null), le = d(null), v = d(null), m = d(1), G = d(1), ne = d(!1), h = d(null), Ce = d(""), Qe = d(null), $ = d([]), te = d(1), D = d(!0), X = d(!0), we = d(null), Ke = d(0), ie = d(!1), ea = d(null), aa = d(null), q = d(null), la = d(null), Oe = d(0), Pe = d(0), De = d(0), E = d(null), ta = d(!1), ve = d(null), Ee = d(null), ce = d(!1), oa = d(!1), Se = d(!1), w = d(null), U = g(() => Array.isArray(He.value) && He.value.length > 0), Ne = Ha, Ga = Tl();
     Aa(() => {
       Ga["chart-background"] && console.warn("VueUiXyCanvas does not support the #chart-background slot.");
     });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "3.5.0",
+  "version": "3.5.2",
   "type": "module",
   "description": "A user-empowering data visualization Vue 3 components library for eloquent data storytelling",
   "keywords": [
@@ -106,12 +106,12 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
-    "cypress": "^14.5.0",
+    "cypress": "^15.5.0",
     "remove-attr": "^0.0.13",
     "sass": "^1.57.1",
     "simple-git": "^3.24.0",
-    "vite": "^7.1.11",
-    "vitest": "^3.2.4",
+    "vite": "^7.1.12",
+    "vitest": "^4.0.5",
     "vue": "^3.5.22"
   }
 }

package/dist/PenAndPaper-DSvu9dwa.js

@@ -1,373 +0,0 @@
-import { ref as c, computed as ge, watch as X, nextTick as le, onMounted as pe, onBeforeUnmount as me, createElementBlock as Y, createCommentVNode as q, openBlock as z, normalizeStyle as x, createElementVNode as C, withDirectives as ae, createVNode as $, normalizeClass as G, toDisplayString as Ae, unref as he, vModelText as oe } from "vue";
-import T from "./BaseIcon-BmMbm4d0.js";
-import { C as we } from "./ColorPicker-J5wOPCeB.js";
-import { S as be, d as xe } from "./lib-C_mNZmhD.js";
-const ye = {
-  class: "vue-ui-pen-and-paper-action",
-  style: { padding: "0 !important" }
-}, ke = ["disabled"], Be = {
-  __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
-    }
-  },
-  emits: ["close"],
-  setup(d, { emit: se }) {
-    const s = d, ue = se, b = c([]), E = c([]), S = c(s.color), R = c(2), M = c(!1), P = c(""), o = c(null), A = c(null), F = c(null), h = c("draw"), Q = c(!1), f = c(null), H = c({ x: 0, y: 0 }), N = c([""]), D = c({ row: 0, col: 0 }), L = c(16), W = c("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 O(l) {
-      if (!o.value || h.value !== "text" || Q.value) return;
-      const { x: e, y: n } = V(l);
-      H.value = { x: e, y: n }, N.value = [""], D.value = { row: 0, col: 0 };
-      const t = document.createElementNS("http://www.w3.org/2000/svg", "text");
-      t.setAttribute("x", e), t.setAttribute("y", n), t.setAttribute("fill", S.value), t.setAttribute("font-size", L.value * s.scale), t.setAttribute("font-family", "sans-serif"), t.setAttribute("class", "vue-data-ui-doodle"), t.setAttribute("dominant-baseline", "hanging"), t.setAttribute("pointer-events", "all");
-      const a = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
-      a.setAttribute("x", e), a.setAttribute("dy", "0"), a.textContent = "", t.appendChild(a), t.style.pointerEvents = "none", t.style.userSelect = "none", o.value.appendChild(t), f.value = t, Q.value = !0, window.addEventListener("keydown", j), window.addEventListener("mousedown", _, !0), J(), Z();
-    }
-    function j(l) {
-      if (!Q.value) return;
-      let { row: e, col: n } = D.value, t = N.value.slice(), a = !1;
-      if (l.key === "Enter") {
-        const u = t[e], r = u.slice(0, n), v = u.slice(n);
-        t.splice(e, 1, r, v), e += 1, n = 0, a = !0, l.preventDefault();
-      } else if (l.key === "Backspace") {
-        if (n > 0)
-          t[e] = t[e].slice(0, n - 1) + t[e].slice(n), n -= 1, a = !0;
-        else if (e > 0) {
-          const u = t[e - 1].length;
-          t[e - 1] += t[e], t.splice(e, 1), e -= 1, n = u, a = !0;
-        }
-        l.preventDefault();
-      } else if (l.key === "Delete")
-        n < t[e].length ? (t[e] = t[e].slice(0, n) + t[e].slice(n + 1), a = !0) : e < t.length - 1 && (t[e] += t[e + 1], t.splice(e + 1, 1), a = !0), l.preventDefault();
-      else if (l.key === "ArrowLeft")
-        n > 0 ? n -= 1 : e > 0 && (e -= 1, n = t[e].length), a = !0, l.preventDefault();
-      else if (l.key === "ArrowRight")
-        n < t[e].length ? n += 1 : e < t.length - 1 && (e += 1, n = 0), a = !0, l.preventDefault();
-      else if (l.key === "ArrowUp")
-        e > 0 && (e -= 1, n = Math.min(n, t[e].length), a = !0), l.preventDefault();
-      else if (l.key === "ArrowDown")
-        e < t.length - 1 && (e += 1, n = Math.min(n, t[e].length), a = !0), l.preventDefault();
-      else if (l.key.length === 1 && !l.ctrlKey && !l.metaKey && !l.altKey)
-        t[e] = t[e].slice(0, n) + l.key + t[e].slice(n), n += 1, a = !0, l.preventDefault();
-      else if (l.key === "Escape") {
-        ee(!0);
-        return;
-      } else l.key === "Tab" && l.preventDefault();
-      a && (N.value = t, D.value = { row: e, col: n }, J(), Z());
-    }
-    function J() {
-      const l = f.value, { x: e } = H.value;
-      for (; l.firstChild; ) l.removeChild(l.firstChild);
-      N.value.forEach((n, t) => {
-        const a = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
-        a.setAttribute("x", e), a.setAttribute("dy", t === 0 ? "0" : `${L.value * 1.2 * s.scale}`), a.textContent = n.length ? n : "​", l.appendChild(a);
-      });
-    }
-    function Z() {
-      const l = o.value.querySelector(".vue-data-ui-svg-caret");
-      l && o.value.removeChild(l);
-      const e = f.value;
-      if (!e) return;
-      const { x: n, y: t } = H.value, { row: a, col: u } = D.value, r = L.value * s.scale, v = e.childNodes[a];
-      if (!v) return;
-      let g = v.textContent.slice(0, u);
-      g.endsWith(" ") && (g += " ");
-      const i = document.createElementNS("http://www.w3.org/2000/svg", "text");
-      i.setAttribute("x", n), i.setAttribute("y", t), i.setAttribute("font-size", r), i.setAttribute("font-family", "sans-serif"), i.textContent = g || "", o.value.appendChild(i);
-      const p = i.getBBox();
-      o.value.removeChild(i);
-      let m = t + a * r * 1.2, k = n + p.width;
-      const w = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-      w.setAttribute("x", k), w.setAttribute("y", m), w.setAttribute("width", 2), w.setAttribute("height", r), w.setAttribute("fill", S.value), w.setAttribute("class", "vue-data-ui-svg-caret"), o.value.appendChild(w);
-    }
-    function _(l) {
-      if (f.value && !f.value.contains(l.target)) {
-        const e = f.value.children;
-        e.length === 1 && (e[0].textContent === "" || e[0].textContent === "​") && f.value.remove(), ee(!1);
-      }
-    }
-    function ee(l = !1) {
-      window.removeEventListener("keydown", j), window.removeEventListener("mousedown", _, !0);
-      const e = o.value.querySelector(".vue-data-ui-svg-caret");
-      e && o.value.removeChild(e);
-      const n = f.value?.children;
-      let t = !1;
-      if (n && n.length === 1) {
-        const a = n[0].textContent;
-        t = !a || a === "​";
-      }
-      l || t ? f.value && o.value.contains(f.value) && o.value.removeChild(f.value) : f.value && o.value.contains(f.value) && b.value.push(f.value), Q.value = !1, f.value = null, N.value = [""], D.value = { row: 0, col: 0 };
-    }
-    const y = ge(() => be(s.color, 0.6));
-    function te() {
-      if (!o.value) return;
-      const l = o.value.querySelector(".vue-data-ui-mask");
-      if (l && o.value.removeChild(l), s.active) {
-        const 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"), o.value.insertBefore(e, o.value.firstChild);
-      }
-    }
-    function V(l) {
-      const e = s.svgRef;
-      if (!e) return { x: 0, y: 0 };
-      const n = e.createSVGPoint();
-      n.x = l.clientX, n.y = l.clientY;
-      const t = e.getScreenCTM()?.inverse();
-      return t ? n.matrixTransform(t) : { x: 0, y: 0 };
-    }
-    function re(l) {
-      const e = l.trim().split(/\s+/);
-      if (e.length < 4)
-        return l;
-      const n = e.slice(1).map(Number);
-      if (n.length % 2 !== 0)
-        return l;
-      const t = ie(n), a = [`M ${t[0]} ${t[1]}`];
-      for (let v = 2; v < t.length - 2; v += 2) {
-        const g = t[v - 2], i = t[v - 1], p = t[v], m = t[v + 1], k = (g + p) / 2, w = (i + m) / 2;
-        a.push(`Q ${g} ${i} ${k} ${w}`);
-      }
-      const u = t[t.length - 2], r = t[t.length - 1];
-      return a.push(`L ${u} ${r}`), a.join(" ");
-    }
-    function ie(l, e = 1) {
-      const n = [...l];
-      for (let t = 2; t < l.length - 2; t += 2) {
-        const a = l[t], u = l[t + 1], r = l[t - 2], v = l[t - 1], g = l[t + 2], i = l[t + 3];
-        n[t] = a + e * ((r + g) / 2 - a), n[t + 1] = u + e * ((v + i) / 2 - u);
-      }
-      return n;
-    }
-    function ve(l) {
-      const e = l.trim().split(/\s+/);
-      let n = "", t = "", a = null, u = null;
-      for (let r = 0; r < e.length; r += 1) {
-        const v = e[r];
-        if (isNaN(v)) {
-          if (t = v, t === "M" || t === "L")
-            a = parseFloat(e[++r]), u = parseFloat(e[++r]), n += `${t}${a} ${u}`;
-          else if (t === "Q") {
-            const g = parseFloat(e[++r]), i = parseFloat(e[++r]), p = parseFloat(e[++r]), m = parseFloat(e[++r]);
-            g === a && i === u ? n += `t${p - a} ${m - u}` : n += `q${g - a} ${i - u} ${p - a} ${m - u}`, a = p, u = m;
-          }
-        } else {
-          const g = parseFloat(v), i = parseFloat(e[++r]);
-          if (t === "L") {
-            const p = g - a, m = i - u;
-            p === 0 ? n += `v${m}` : m === 0 ? n += `h${p}` : n += `l${p} ${m}`, a = g, u = i;
-          } else if (t === "Q") {
-            const p = g, m = i, k = parseFloat(e[++r]), w = parseFloat(e[++r]);
-            p === a && m === u ? n += `t${k - a} ${w - u}` : n += `q${p - a} ${m - u} ${k - a} ${w - u}`, a = k, u = w;
-          }
-        }
-      }
-      return n;
-    }
-    function I(l) {
-      if (h.value !== "draw" || !s.active || !o.value) return;
-      M.value = !0;
-      const { x: e, y: n } = V(l);
-      F.value = { x: e, y: n }, P.value = `M ${e} ${n}`, A.value = document.createElementNS("http://www.w3.org/2000/svg", "path"), A.value.setAttribute("stroke", S.value), A.value.setAttribute("stroke-width", R.value * s.scale), A.value.setAttribute("fill", "none"), A.value.setAttribute("stroke-linecap", "round"), A.value.setAttribute("stroke-linejoin", "round"), A.value.setAttribute("class", "vue-data-ui-doodle"), o.value.appendChild(A.value);
-    }
-    function K(l) {
-      if (!M.value || !o.value || !A.value) return;
-      const { x: e, y: n } = V(l);
-      P.value += ` ${e} ${n}`, A.value.setAttribute("d", P.value);
-    }
-    function B(l) {
-      if (M.value && o.value && A.value) {
-        const { x: e, y: n } = V(l);
-        if (F.value && F.value.x === e && F.value.y === n) {
-          const t = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-          t.setAttribute("cx", e), t.setAttribute("cy", n), t.setAttribute("r", R.value * s.scale / 2), t.setAttribute("fill", S.value), t.setAttribute("class", "vue-data-ui-doodle"), o.value.appendChild(t), b.value.push(t);
-        } else {
-          const t = A.value;
-          t.setAttribute("d", ve(re(P.value))), b.value.push(t);
-        }
-        E.value = [], A.value = "";
-      }
-      M.value = !1;
-    }
-    function ce() {
-      if (b.value.length > 0) {
-        const l = b.value.pop();
-        E.value.push(l), o.value && o.value.removeChild(l);
-      }
-    }
-    function de() {
-      if (E.value.length > 0) {
-        const l = E.value.pop();
-        b.value.push(l), o.value && o.value.appendChild(l);
-      }
-    }
-    function fe() {
-      o.value && (o.value.innerHTML = ""), b.value = [], E.value = [], te();
-    }
-    X(h, () => {
-      s.active && (U(), ne(), h.value === "text" ? o.value.style.cursor = "text" : o.value.style.cursor = W.value);
-    });
-    function ne() {
-      !s.svgRef || !s.active || (h.value === "draw" ? (s.svgRef.addEventListener("mousedown", I), s.svgRef.addEventListener("mousemove", K), s.svgRef.addEventListener("mouseup", B), s.svgRef.addEventListener("mouseleave", B), s.svgRef.addEventListener("touchstart", I, { passive: !1 }), s.svgRef.addEventListener("touchmove", K, { passive: !1 }), s.svgRef.addEventListener("touchend", B)) : h.value === "text" && s.svgRef.addEventListener("mousedown", O), o.value && (o.value.style.pointerEvents = "auto"));
-    }
-    function U() {
-      s.svgRef && (s.svgRef.removeEventListener("mousedown", I), s.svgRef.removeEventListener("mousemove", K), s.svgRef.removeEventListener("mouseup", B), s.svgRef.removeEventListener("mouseleave", B), s.svgRef.removeEventListener("touchstart", I), s.svgRef.removeEventListener("touchmove", K), s.svgRef.removeEventListener("touchend", B), s.svgRef.removeEventListener("mousedown", O), o.value && (o.value.style.pointerEvents = "none"));
-    }
-    return X(() => s.active, (l) => {
-      l ? ne() : U();
-    }), X(() => s.active, () => {
-      le(() => {
-        te();
-      });
-    }), pe(() => {
-      le(() => {
-        s.svgRef && (o.value = document.createElementNS("http://www.w3.org/2000/svg", "g"), o.value.setAttribute("class", "vue-data-ui-doodles"), o.value.style.cursor = W.value, s.svgRef.appendChild(o.value), U());
-      });
-    }), me(() => {
-      o.value && s.svgRef && (o.value.remove(), U());
-    }), (l, e) => d.active ? (z(), Y("div", {
-      key: 0,
-      "data-dom-to-png-ignore": "",
-      class: "vue-ui-pen-and-paper-actions",
-      style: x({ backgroundColor: d.backgroundColor })
-    }, [
-      C("button", {
-        class: "vue-ui-pen-and-paper-action",
-        onClick: e[0] || (e[0] = (n) => ue("close")),
-        style: x({
-          backgroundColor: d.backgroundColor,
-          border: `1px solid ${y.value}`
-        })
-      }, [
-        $(T, {
-          name: "close",
-          stroke: d.color
-        }, null, 8, ["stroke"])
-      ], 4),
-      C("button", ye, [
-        $(we, {
-          value: S.value,
-          "onUpdate:value": e[1] || (e[1] = (n) => S.value = n),
-          backgroundColor: d.backgroundColor,
-          buttonBorderColor: y.value
-        }, null, 8, ["value", "backgroundColor", "buttonBorderColor"])
-      ]),
-      C("button", {
-        class: G(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-active": h.value === "text" }]),
-        onClick: e[2] || (e[2] = (n) => h.value = h.value === "text" ? "draw" : "text"),
-        style: x({
-          backgroundColor: d.backgroundColor,
-          border: `1px solid ${y.value}`
-        })
-      }, [
-        $(T, {
-          name: h.value === "draw" ? "annotator" : "text",
-          stroke: d.color
-        }, null, 8, ["name", "stroke"]),
-        C("div", {
-          style: x({
-            position: "absolute",
-            bottom: "-20px",
-            color: y.value,
-            width: "100%",
-            textAlign: "center",
-            fontSize: "12px",
-            fontVariantNumeric: "tabular-nums"
-          })
-        }, Ae(he(xe)({
-          v: h.value === "draw" ? R.value : L.value,
-          s: "px",
-          r: 1
-        })), 5)
-      ], 6),
-      C("button", {
-        class: G(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !b.value.length }]),
-        disabled: !b.value.length,
-        onClick: ce,
-        style: x({
-          backgroundColor: d.backgroundColor,
-          border: `1px solid ${y.value}`,
-          marginTop: "20px"
-        })
-      }, [
-        $(T, {
-          name: "restart",
-          stroke: d.color
-        }, null, 8, ["stroke"])
-      ], 14, ke),
-      C("button", {
-        class: G(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !E.value.length }]),
-        onClick: de,
-        style: x({
-          backgroundColor: d.backgroundColor,
-          border: `1px solid ${y.value}`
-        })
-      }, [
-        $(T, {
-          name: "restart",
-          stroke: d.color,
-          style: { transform: "scaleX(-1)" }
-        }, null, 8, ["stroke"])
-      ], 6),
-      C("button", {
-        class: G(["vue-ui-pen-and-paper-action", { "vue-ui-pen-and-paper-action-disabled": !b.value.length }]),
-        onClick: fe,
-        style: x({
-          backgroundColor: d.backgroundColor,
-          border: `1px solid ${y.value}`
-        })
-      }, [
-        $(T, {
-          name: "trash",
-          stroke: d.color
-        }, null, 8, ["stroke"])
-      ], 6),
-      h.value === "draw" ? ae((z(), Y("input", {
-        key: 0,
-        ref: "range",
-        type: "range",
-        class: "vertical-range",
-        min: 0.5,
-        max: 12,
-        step: 0.1,
-        "onUpdate:modelValue": e[3] || (e[3] = (n) => R.value = n),
-        style: x({ accentColor: d.color })
-      }, null, 4)), [
-        [oe, R.value]
-      ]) : q("", !0),
-      h.value === "text" ? ae((z(), Y("input", {
-        key: 1,
-        ref: "range",
-        type: "range",
-        class: "vertical-range",
-        min: 3,
-        max: 48,
-        step: 0.1,
-        "onUpdate:modelValue": e[4] || (e[4] = (n) => L.value = n),
-        style: x({ accentColor: d.color })
-      }, null, 4)), [
-        [oe, L.value]
-      ]) : q("", !0)
-    ], 4)) : q("", !0);
-  }
-};
-export {
-  Be as default
-};