vue-data-ui 2.6.3 → 2.6.4-beta.0

package/dist/{PenAndPaper-NARoVmb-.js → PenAndPaper-C1v_7F2S.js}

@@ -1,9 +1,9 @@
-import { computed as V, ref as c, watch as A, withDirectives as H, createElementBlock as p, openBlock as f, createElementVNode as C, createCommentVNode as U, normalizeStyle as b, createVNode as P, Fragment as T, renderList as j, unref as G, onMounted as ne, nextTick as le, onBeforeUnmount as re, normalizeClass as D, vModelText as ae, withModifiers as q } from "vue";
-import { G as se, l as ue, X as ce } from "./index-Sq6_Z5Ol.js";
-import L from "./BaseIcon-CFtrFJk8.js";
-import { v as ie } from "./usePrinter-KhQnrZzM.js";
+import { ref as u, computed as W, watch as H, withDirectives as K, createElementBlock as p, openBlock as f, withKeys as ne, createElementVNode as C, createCommentVNode as Q, normalizeStyle as b, createVNode as M, Fragment as O, renderList as j, unref as G, onMounted as le, nextTick as re, onBeforeUnmount as ae, normalizeClass as z, vModelText as se, withModifiers as A } from "vue";
+import { G as ue, l as ce, X as ie } from "./index-GSCW0GhW.js";
+import D from "./BaseIcon-BhXkDb2X.js";
+import { v as de } from "./usePrinter-BBNI0jHz.js";
 import { _ as J } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const de = { style: { height: "100%", width: "100%", position: "relative" } }, ve = { class: "icon" }, pe = ["onClick"], fe = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -46%)" } }, ke = ["value"], he = {
+const ve = ["onClick"], pe = { style: { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -46%)" } }, fe = ["value"], ke = {
   __name: "ColorPicker",
   props: {
     value: {
@@ -24,36 +24,39 @@ const de = { style: { height: "100%", width: "100%", position: "relative" } }, v
     }
   },
   emits: ["update:value"],
-  setup(r, { emit: E }) {
-    const k = r, R = E, h = V(() => ({
+  setup(r, { emit: V }) {
+    const k = r, R = V, g = u(null), F = W(() => ({
       backgroundColor: k.value,
       width: "100%",
       height: "100%",
       cursor: "pointer"
-    })), y = c(null), $ = c(!1), M = () => {
-      var u;
-      (u = y.value) == null || u.click();
+    })), S = u(null), h = u(!1), X = () => {
+      var c;
+      (c = S.value) == null || c.click();
     };
-    function S(u) {
-      R("update:value", u), $.value = !1;
+    function x(c) {
+      R("update:value", c), h.value = !1;
     }
-    function x() {
-      $.value = !1;
+    function L() {
+      h.value = !1;
     }
-    function N() {
-      $.value && x();
+    function w() {
+      h.value && L();
     }
-    const X = (u) => {
-      const B = u.target.value;
-      R("update:value", B);
-    }, F = V(() => se(k.value));
-    A(
+    const B = (c) => {
+      const N = c.target.value;
+      R("update:value", N);
+    }, $ = W(() => ue(k.value));
+    async function P() {
+      h.value = !h.value;
+    }
+    H(
       () => k.value,
-      (u) => {
-        y.value.value = u;
+      (c) => {
+        S.value.value = c;
       }
     );
-    const w = c([
+    const T = u([
       "#000000",
       "#FFFFFF",
       "#FF5733",
@@ -64,69 +67,75 @@ const de = { style: { height: "100%", width: "100%", position: "relative" } }, v
       "#FF1493",
       "#00CED1"
     ]);
-    return (u, B) => H((f(), p("div", de, [
-      C("div", {
-        onClick: B[0] || (B[0] = (z) => $.value = !$.value),
-        style: b(h.value)
+    return (c, N) => K((f(), p("div", {
+      onKeydown: ne(w, ["esc"]),
+      style: { height: "100%", width: "100%", position: "relative" }
+    }, [
+      C("button", {
+        class: "icon",
+        onClick: P,
+        style: b(F.value)
       }, [
-        C("div", ve, [
-          P(L, {
-            name: "palette",
-            stroke: F.value,
-            size: 22
-          }, null, 8, ["stroke"])
-        ])
+        M(D, {
+          name: "palette",
+          stroke: $.value,
+          size: 22
+        }, null, 8, ["stroke"])
       ], 4),
-      $.value ? (f(), p("div", {
+      h.value ? (f(), p("div", {
         key: 0,
+        ref_key: "picker",
+        ref: g,
+        tabindex: "0",
         class: "vue-ui-color-picker",
         style: b({
           backgroundColor: r.backgroundColor
         })
       }, [
-        (f(!0), p(T, null, j(w.value, (z) => (f(), p("div", {
+        (f(!0), p(O, null, j(T.value, (E) => (f(), p("button", {
+          tabindex: "0",
           class: "vue-ui-color-picker-option",
           style: b({
-            backgroundColor: z,
+            backgroundColor: E,
             outline: `1px solid ${r.buttonBorderColor}`
           }),
-          onClick: () => S(z)
-        }, null, 12, pe))), 256)),
-        C("div", {
+          onClick: () => x(E)
+        }, null, 12, ve))), 256)),
+        C("button", {
           class: "vue-ui-color-picker-option",
-          onClick: M,
+          onClick: X,
           style: b({
             backgroundColor: r.value,
             outline: `1px solid ${r.buttonBorderColor}`
           })
         }, [
-          C("div", fe, [
-            P(L, {
+          C("div", pe, [
+            M(D, {
               name: "colorPicker",
-              stroke: F.value,
+              stroke: $.value,
               size: 22
             }, null, 8, ["stroke"])
           ]),
           C("input", {
             ref_key: "colorInput",
-            ref: y,
+            ref: S,
             type: "color",
             value: r.value,
             class: "hidden-input",
-            onInput: X
-          }, null, 40, ke)
+            onInput: B
+          }, null, 40, fe)
         ], 4)
-      ], 4)) : U("", !0)
-    ])), [
-      [G(ie), N]
+      ], 4)) : Q("", !0)
+    ], 32)), [
+      [G(de), w]
     ]);
   }
-}, ge = /* @__PURE__ */ J(he, [["__scopeId", "data-v-84e6c062"]]), me = {
-  class: /* @__PURE__ */ D({
+}, ge = /* @__PURE__ */ J(ke, [["__scopeId", "data-v-f6dd9192"]]), he = {
+  class: /* @__PURE__ */ z({
     "vue-ui-pen-and-paper-action": !0
   }),
   style: { padding: "0 !important" }
-}, Ce = ["disabled"], ye = ["xmlns", "viewBox"], $e = ["cx", "cy", "r", "fill"], be = ["d", "stroke", "stroke-width"], Fe = ["d", "stroke", "stroke-width"], xe = {
+}, me = ["disabled"], ye = ["xmlns", "viewBox"], Ce = ["cx", "cy", "r", "fill"], be = ["d", "stroke", "stroke-width"], Fe = ["d", "stroke", "stroke-width"], $e = {
   __name: "PenAndPaper",
   props: {
     parent: {
@@ -146,68 +155,68 @@ const de = { style: { height: "100%", width: "100%", position: "relative" } }, v
     }
   },
   emits: ["close"],
-  setup(r, { emit: E }) {
-    const k = r, R = E, h = c([]), y = c([]), $ = c("0 0 0 0"), M = c(k.color), S = c(1), x = V(() => ue(k.color, 0.6));
-    function N({ width: o, height: t }) {
-      $.value = `0 0 ${o} ${t}`;
+  setup(r, { emit: V }) {
+    const k = r, R = V, g = u([]), F = u([]), S = u("0 0 0 0"), h = u(k.color), X = u(1), x = W(() => ce(k.color, 0.6));
+    function L({ width: o, height: t }) {
+      S.value = `0 0 ${o} ${t}`;
     }
-    const X = c(null);
-    ne(() => {
-      le(() => {
+    const w = u(null);
+    le(() => {
+      re(() => {
         if (k.parent) {
-          X.value = new ResizeObserver((e) => {
+          w.value = new ResizeObserver((e) => {
             for (const n of e) {
               const { width: l, height: a } = n.contentRect;
-              N({ width: l, height: a });
+              L({ width: l, height: a });
             }
-          }), X.value.observe(k.parent);
+          }), w.value.observe(k.parent);
           const { width: o, height: t } = k.parent.getBoundingClientRect();
-          N({ width: o, height: t });
+          L({ width: o, height: t });
         }
       });
-    }), re(() => {
-      X.value && X.value.disconnect();
-    }), A(
+    }), ae(() => {
+      w.value && w.value.disconnect();
+    }), H(
       () => k.parent,
       (o) => {
         if (!o) return;
         const { width: t, height: e } = k.parent.getBoundingClientRect();
-        N({ width: t, height: e });
+        L({ width: t, height: e });
       },
       { immediate: !0 }
     );
-    const F = c(!1), w = c(""), u = c(null);
-    function B(o) {
-      if (!u.value) return;
-      F.value = !0;
-      const { x: t, y: e } = Q(o);
-      w.value = `M ${t} ${e}`;
+    const B = u(!1), $ = u(""), P = u(null);
+    function T(o) {
+      if (!P.value) return;
+      B.value = !0;
+      const { x: t, y: e } = q(o);
+      $.value = `M ${t} ${e}`;
     }
-    function z(o) {
-      if (!F.value || !u.value) return;
-      const { x: t, y: e } = Q(o);
-      w.value += ` ${t} ${e}`;
+    function c(o) {
+      if (!B.value || !P.value) return;
+      const { x: t, y: e } = q(o);
+      $.value += ` ${t} ${e}`;
     }
-    function W(o) {
+    function N(o) {
       const t = o.trim().split(/\s+/);
       if (t.length < 4)
         return o;
       const e = t.slice(1).map(Number);
       if (e.length % 2 !== 0)
         return o;
-      const n = K(e), l = [`M ${n[0]} ${n[1]}`];
+      const n = E(e), l = [`M ${n[0]} ${n[1]}`];
       for (let i = 2; i < n.length - 2; i += 2) {
-        const g = n[i - 2], m = n[i - 1], d = n[i], v = n[i + 1], Y = (g + d) / 2, I = (m + v) / 2;
-        l.push(`Q ${g} ${m} ${Y} ${I}`);
+        const m = n[i - 2], y = n[i - 1], d = n[i], v = n[i + 1], Y = (m + d) / 2, I = (y + v) / 2;
+        l.push(`Q ${m} ${y} ${Y} ${I}`);
       }
       const a = n[n.length - 2], s = n[n.length - 1];
       return l.push(`L ${a} ${s}`), l.join(" ");
     }
-    function K(o, t = 1) {
+    function E(o, t = 1) {
       const e = [...o];
       for (let n = 2; n < o.length - 2; n += 2) {
-        const l = o[n], a = o[n + 1], s = o[n - 2], i = o[n - 1], g = o[n + 2], m = o[n + 3];
-        e[n] = l + t * ((s + g) / 2 - l), e[n + 1] = a + t * ((i + m) / 2 - a);
+        const l = o[n], a = o[n + 1], s = o[n - 2], i = o[n - 1], m = o[n + 2], y = o[n + 3];
+        e[n] = l + t * ((s + m) / 2 - l), e[n + 1] = a + t * ((i + y) / 2 - a);
       }
       return e;
     }
@@ -220,60 +229,60 @@ const de = { style: { height: "100%", width: "100%", position: "relative" } }, v
           if (n = i, n === "M" || n === "L")
             l = parseFloat(t[++s]), a = parseFloat(t[++s]), e += `${n}${l} ${a}`;
           else if (n === "Q") {
-            const g = parseFloat(t[++s]), m = parseFloat(t[++s]), d = parseFloat(t[++s]), v = parseFloat(t[++s]);
-            g === l && m === a ? e += `t${d - l} ${v - a}` : e += `q${g - l} ${m - a} ${d - l} ${v - a}`, l = d, a = v;
+            const m = parseFloat(t[++s]), y = parseFloat(t[++s]), d = parseFloat(t[++s]), v = parseFloat(t[++s]);
+            m === l && y === a ? e += `t${d - l} ${v - a}` : e += `q${m - l} ${y - a} ${d - l} ${v - a}`, l = d, a = v;
           }
         } else {
-          const g = parseFloat(i), m = parseFloat(t[++s]);
+          const m = parseFloat(i), y = parseFloat(t[++s]);
           if (n === "L") {
-            const d = g - l, v = m - a;
-            d === 0 ? e += `v${v}` : v === 0 ? e += `h${d}` : e += `l${d} ${v}`, l = g, a = m;
+            const d = m - l, v = y - a;
+            d === 0 ? e += `v${v}` : v === 0 ? e += `h${d}` : e += `l${d} ${v}`, l = m, a = y;
           } else if (n === "Q") {
-            const d = g, v = m, Y = parseFloat(t[++s]), I = parseFloat(t[++s]);
+            const d = m, v = y, Y = parseFloat(t[++s]), I = parseFloat(t[++s]);
             d === l && v === a ? e += `t${Y - l} ${I - a}` : e += `q${d - l} ${v - a} ${Y - l} ${I - a}`, l = Y, a = I;
           }
         }
       }
       return e;
     }
-    function O() {
-      F.value && (h.value.push({
-        strokeWidth: S.value,
-        path: Z(W(w.value)),
-        color: M.value
-      }), y.value = [], w.value = ""), F.value = !1;
+    function U() {
+      B.value && (g.value.push({
+        strokeWidth: X.value,
+        path: Z(N($.value)),
+        color: h.value
+      }), F.value = [], $.value = ""), B.value = !1;
     }
-    function Q(o) {
-      if (!u.value) return { x: 0, y: 0 };
-      const t = u.value.getBoundingClientRect();
+    function q(o) {
+      if (!P.value) return { x: 0, y: 0 };
+      const t = P.value.getBoundingClientRect();
       let e, n;
       return o.touches && o.touches.length ? (e = o.touches[0].clientX, n = o.touches[0].clientY) : (e = o.clientX, n = o.clientY), {
         x: e - t.left,
         y: n - t.top
       };
     }
-    c(!1);
+    u(!1);
     function _() {
-      if (h.value.length > 0) {
-        const o = h.value.pop();
-        y.value.push(o);
+      if (g.value.length > 0) {
+        const o = g.value.pop();
+        F.value.push(o);
       }
     }
     function ee() {
-      if (y.value.length > 0) {
-        const o = y.value.pop();
-        h.value.push(o);
+      if (F.value.length > 0) {
+        const o = F.value.pop();
+        g.value.push(o);
       }
     }
     function te() {
-      h.value = [], y.value = [];
+      g.value = [], F.value = [];
     }
-    const oe = c(null);
-    return (o, t) => (f(), p(T, null, [
+    const oe = u(null);
+    return (o, t) => (f(), p(O, null, [
       r.active ? (f(), p("div", {
         key: 0,
         "data-html2canvas-ignore": "",
-        class: D({
+        class: z({
           "vue-ui-pen-and-paper-actions": !0,
           visible: r.active
         })
@@ -286,40 +295,40 @@ const de = { style: { height: "100%", width: "100%", position: "relative" } }, v
           }),
           onClick: t[0] || (t[0] = (e) => R("close"))
         }, [
-          P(L, {
+          M(D, {
             name: "close",
             stroke: r.color
           }, null, 8, ["stroke"])
         ], 4),
-        C("button", me, [
-          P(ge, {
-            value: M.value,
-            "onUpdate:value": t[1] || (t[1] = (e) => M.value = e),
+        C("button", he, [
+          M(ge, {
+            value: h.value,
+            "onUpdate:value": t[1] || (t[1] = (e) => h.value = e),
             backgroundColor: r.backgroundColor,
             buttonBorderColor: x.value
           }, null, 8, ["value", "backgroundColor", "buttonBorderColor"])
         ]),
         C("button", {
-          class: D({
+          class: z({
             "vue-ui-pen-and-paper-action": !0,
-            "vue-ui-pen-and-paper-action-disabled": !h.value.length
+            "vue-ui-pen-and-paper-action-disabled": !g.value.length
           }),
-          disabled: !h.value.length,
+          disabled: !g.value.length,
           style: b({
             backgroundColor: r.backgroundColor,
             border: `1px solid ${x.value}`
           }),
           onClick: _
         }, [
-          P(L, {
+          M(D, {
             name: "restart",
             stroke: r.color
           }, null, 8, ["stroke"])
-        ], 14, Ce),
+        ], 14, me),
         C("button", {
-          class: D({
+          class: z({
             "vue-ui-pen-and-paper-action": !0,
-            "vue-ui-pen-and-paper-action-disabled": !y.value.length
+            "vue-ui-pen-and-paper-action-disabled": !F.value.length
           }),
           style: b({
             backgroundColor: r.backgroundColor,
@@ -327,16 +336,16 @@ const de = { style: { height: "100%", width: "100%", position: "relative" } }, v
           }),
           onClick: ee
         }, [
-          P(L, {
+          M(D, {
             name: "restart",
             stroke: r.color,
             style: { transform: "scaleX(-1)" }
           }, null, 8, ["stroke"])
         ], 6),
         C("button", {
-          class: D([{
+          class: z([{
             "vue-ui-pen-and-paper-action": !0,
-            "vue-ui-pen-and-paper-action-disabled": !h.value.length
+            "vue-ui-pen-and-paper-action-disabled": !g.value.length
           }, "vue-ui-pen-and-paper-action"]),
           style: b({
             backgroundColor: r.backgroundColor,
@@ -344,12 +353,12 @@ const de = { style: { height: "100%", width: "100%", position: "relative" } }, v
           }),
           onClick: te
         }, [
-          P(L, {
+          M(D, {
             name: "trash",
             stroke: r.color
           }, null, 8, ["stroke"])
         ], 6),
-        H(C("input", {
+        K(C("input", {
           ref_key: "range",
           ref: oe,
           type: "range",
@@ -357,39 +366,39 @@ const de = { style: { height: "100%", width: "100%", position: "relative" } }, v
           min: 0.5,
           max: 12,
           step: 0.1,
-          "onUpdate:modelValue": t[2] || (t[2] = (e) => S.value = e),
+          "onUpdate:modelValue": t[2] || (t[2] = (e) => X.value = e),
           style: b({
             accentColor: r.color
           })
         }, null, 4), [
-          [ae, S.value]
+          [se, X.value]
         ])
-      ], 2)) : U("", !0),
+      ], 2)) : Q("", !0),
       (f(), p("svg", {
         ref_key: "svgElement",
-        ref: u,
-        xmlns: G(ce),
-        viewBox: $.value,
-        class: D({
+        ref: P,
+        xmlns: G(ie),
+        viewBox: S.value,
+        class: z({
           "vue-ui-pen-and-paper": !0,
           inactive: !r.active
         }),
-        onMousedown: B,
-        onMousemove: z,
-        onMouseup: O,
-        onMouseleave: O,
-        onTouchstart: q(B, ["prevent"]),
-        onTouchmove: q(z, ["prevent"]),
-        onTouchend: O
+        onMousedown: T,
+        onMousemove: c,
+        onMouseup: U,
+        onMouseleave: U,
+        onTouchstart: A(T, ["prevent"]),
+        onTouchmove: A(c, ["prevent"]),
+        onTouchend: U
       }, [
-        (f(!0), p(T, null, j(h.value, (e) => (f(), p(T, { key: e }, [
+        (f(!0), p(O, null, j(g.value, (e) => (f(), p(O, { key: e }, [
           e.path.replace("M", "").split(" ").length === 2 ? (f(), p("circle", {
             key: 0,
             cx: e.path.replace("M", "").split(" ")[0],
             cy: e.path.replace("M", "").split(" ")[1],
             r: e.strokeWidth / 2,
             fill: e.color
-          }, null, 8, $e)) : (f(), p("path", {
+          }, null, 8, Ce)) : (f(), p("path", {
             key: 1,
             class: "vue-ui-pen-and-paper-path",
             d: e.path,
@@ -398,18 +407,18 @@ const de = { style: { height: "100%", width: "100%", position: "relative" } }, v
             fill: "none"
           }, null, 8, be))
         ], 64))), 128)),
-        F.value ? (f(), p("path", {
+        B.value ? (f(), p("path", {
           key: 0,
           class: "vue-ui-pen-and-paper-path vue-ui-pen-and-paper-path-drawing",
-          d: W(w.value),
-          stroke: M.value,
-          "stroke-width": S.value * 1.1,
+          d: N($.value),
+          stroke: h.value,
+          "stroke-width": X.value * 1.1,
           fill: "none"
-        }, null, 8, Fe)) : U("", !0)
+        }, null, 8, Fe)) : Q("", !0)
       ], 42, ye))
     ], 64));
   }
-}, Xe = /* @__PURE__ */ J(xe, [["__scopeId", "data-v-a932b1ac"]]);
+}, Se = /* @__PURE__ */ J($e, [["__scopeId", "data-v-7395a3bf"]]);
 export {
-  Xe as P
+  Se as P
 };

package/dist/PenAndPaper-DpBM14U6.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),L=require("./index-BfKO0mWG.cjs"),w=require("./BaseIcon-BJi2tdtl.cjs"),W=require("./usePrinter-B3WcbJUK.cjs"),q=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),A=["onClick"],H={style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -46%)"}},Q=["value"],K={__name:"ColorPicker",props:{value:{type:String,default:"#ffffff"},size:{type:String,default:"50px"},backgroundColor:{type:String,default:"#FFFFFF"},buttonBorderColor:{type:String,default:"#FFFFFF"}},emits:["update:value"],setup(a,{emit:X}){const v=a,P=X,f=e.ref(null),h=e.computed(()=>({backgroundColor:v.value,width:"100%",height:"100%",cursor:"pointer"})),x=e.ref(null),k=e.ref(!1),B=()=>{var u;(u=x.value)==null||u.click()};function C(u){P("update:value",u),k.value=!1}function E(){k.value=!1}function b(){k.value&&E()}const F=u=>{const N=u.target.value;P("update:value",N)},y=e.computed(()=>L.adaptColorToBackground(v.value));async function $(){k.value=!k.value}e.watch(()=>v.value,u=>{x.value.value=u});const S=e.ref(["#000000","#FFFFFF","#FF5733","#33FF57","#3357FF","#FFC300","#800080","#FF1493","#00CED1"]);return(u,N)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{onKeydown:e.withKeys(b,["esc"]),style:{height:"100%",width:"100%",position:"relative"}},[e.createElementVNode("button",{class:"icon",onClick:$,style:e.normalizeStyle(h.value)},[e.createVNode(w.default,{name:"palette",stroke:y.value,size:22},null,8,["stroke"])],4),k.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"picker",ref:f,tabindex:"0",class:"vue-ui-color-picker",style:e.normalizeStyle({backgroundColor:a.backgroundColor})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,M=>(e.openBlock(),e.createElementBlock("button",{tabindex:"0",class:"vue-ui-color-picker-option",style:e.normalizeStyle({backgroundColor:M,outline:`1px solid ${a.buttonBorderColor}`}),onClick:()=>C(M)},null,12,A))),256)),e.createElementVNode("button",{class:"vue-ui-color-picker-option",onClick:B,style:e.normalizeStyle({backgroundColor:a.value,outline:`1px solid ${a.buttonBorderColor}`})},[e.createElementVNode("div",H,[e.createVNode(w.default,{name:"colorPicker",stroke:y.value,size:22},null,8,["stroke"])]),e.createElementVNode("input",{ref_key:"colorInput",ref:x,type:"color",value:a.value,class:"hidden-input",onInput:F},null,40,Q)],4)],4)):e.createCommentVNode("",!0)],32)),[[e.unref(W.vClickOutside),b]])}},_=q._export_sfc(K,[["__scopeId","data-v-f6dd9192"]]),j={class:e.normalizeClass({"vue-ui-pen-and-paper-action":!0}),style:{padding:"0 !important"}},G=["disabled"],J=["xmlns","viewBox"],Z=["cx","cy","r","fill"],ee=["d","stroke","stroke-width"],te=["d","stroke","stroke-width"],oe={__name:"PenAndPaper",props:{parent:{type:HTMLElement},backgroundColor:{type:String,default:"#FFFFFF"},color:{type:String,default:"#2D353C"},active:{type:Boolean,default:!1}},emits:["close"],setup(a,{emit:X}){const v=a,P=X,f=e.ref([]),h=e.ref([]),x=e.ref("0 0 0 0"),k=e.ref(v.color),B=e.ref(1),C=e.computed(()=>L.lightenHexColor(v.color,.6));function E({width:n,height:o}){x.value=`0 0 ${n} ${o}`}const b=e.ref(null);e.onMounted(()=>{e.nextTick(()=>{if(v.parent){b.value=new ResizeObserver(t=>{for(const l of t){const{width:r,height:c}=l.contentRect;E({width:r,height:c})}}),b.value.observe(v.parent);const{width:n,height:o}=v.parent.getBoundingClientRect();E({width:n,height:o})}})}),e.onBeforeUnmount(()=>{b.value&&b.value.disconnect()}),e.watch(()=>v.parent,n=>{if(!n)return;const{width:o,height:t}=v.parent.getBoundingClientRect();E({width:o,height:t})},{immediate:!0});const F=e.ref(!1),y=e.ref(""),$=e.ref(null);function S(n){if(!$.value)return;F.value=!0;const{x:o,y:t}=Y(n);y.value=`M ${o} ${t}`}function u(n){if(!F.value||!$.value)return;const{x:o,y:t}=Y(n);y.value+=` ${o} ${t}`}function N(n){const o=n.trim().split(/\s+/);if(o.length<4)return n;const t=o.slice(1).map(Number);if(t.length%2!==0)return n;const l=M(t),r=[`M ${l[0]} ${l[1]}`];for(let i=2;i<l.length-2;i+=2){const m=l[i-2],g=l[i-1],d=l[i],p=l[i+1],V=(m+d)/2,z=(g+p)/2;r.push(`Q ${m} ${g} ${V} ${z}`)}const c=l[l.length-2],s=l[l.length-1];return r.push(`L ${c} ${s}`),r.join(" ")}function M(n,o=1){const t=[...n];for(let l=2;l<n.length-2;l+=2){const r=n[l],c=n[l+1],s=n[l-2],i=n[l-1],m=n[l+2],g=n[l+3];t[l]=r+o*((s+m)/2-r),t[l+1]=c+o*((i+g)/2-c)}return t}function I(n){const o=n.trim().split(/\s+/);let t="",l="",r=null,c=null;for(let s=0;s<o.length;s+=1){const i=o[s];if(isNaN(i)){if(l=i,l==="M"||l==="L")r=parseFloat(o[++s]),c=parseFloat(o[++s]),t+=`${l}${r} ${c}`;else if(l==="Q"){const m=parseFloat(o[++s]),g=parseFloat(o[++s]),d=parseFloat(o[++s]),p=parseFloat(o[++s]);m===r&&g===c?t+=`t${d-r} ${p-c}`:t+=`q${m-r} ${g-c} ${d-r} ${p-c}`,r=d,c=p}}else{const m=parseFloat(i),g=parseFloat(o[++s]);if(l==="L"){const d=m-r,p=g-c;d===0?t+=`v${p}`:p===0?t+=`h${d}`:t+=`l${d} ${p}`,r=m,c=g}else if(l==="Q"){const d=m,p=g,V=parseFloat(o[++s]),z=parseFloat(o[++s]);d===r&&p===c?t+=`t${V-r} ${z-c}`:t+=`q${d-r} ${p-c} ${V-r} ${z-c}`,r=V,c=z}}}return t}function D(){F.value&&(f.value.push({strokeWidth:B.value,path:I(N(y.value)),color:k.value}),h.value=[],y.value=""),F.value=!1}function Y(n){if(!$.value)return{x:0,y:0};const o=$.value.getBoundingClientRect();let t,l;return n.touches&&n.touches.length?(t=n.touches[0].clientX,l=n.touches[0].clientY):(t=n.clientX,l=n.clientY),{x:t-o.left,y:l-o.top}}e.ref(!1);function R(){if(f.value.length>0){const n=f.value.pop();h.value.push(n)}}function T(){if(h.value.length>0){const n=h.value.pop();f.value.push(n)}}function O(){f.value=[],h.value=[]}const U=e.ref(null);return(n,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[a.active?(e.openBlock(),e.createElementBlock("div",{key:0,"data-html2canvas-ignore":"",class:e.normalizeClass({"vue-ui-pen-and-paper-actions":!0,visible:a.active})},[e.createElementVNode("button",{class:"vue-ui-pen-and-paper-action",style:e.normalizeStyle({backgroundColor:a.backgroundColor,border:`1px solid ${C.value}`}),onClick:o[0]||(o[0]=t=>P("close"))},[e.createVNode(w.default,{name:"close",stroke:a.color},null,8,["stroke"])],4),e.createElementVNode("button",j,[e.createVNode(_,{value:k.value,"onUpdate:value":o[1]||(o[1]=t=>k.value=t),backgroundColor:a.backgroundColor,buttonBorderColor:C.value},null,8,["value","backgroundColor","buttonBorderColor"])]),e.createElementVNode("button",{class:e.normalizeClass({"vue-ui-pen-and-paper-action":!0,"vue-ui-pen-and-paper-action-disabled":!f.value.length}),disabled:!f.value.length,style:e.normalizeStyle({backgroundColor:a.backgroundColor,border:`1px solid ${C.value}`}),onClick:R},[e.createVNode(w.default,{name:"restart",stroke:a.color},null,8,["stroke"])],14,G),e.createElementVNode("button",{class:e.normalizeClass({"vue-ui-pen-and-paper-action":!0,"vue-ui-pen-and-paper-action-disabled":!h.value.length}),style:e.normalizeStyle({backgroundColor:a.backgroundColor,border:`1px solid ${C.value}`}),onClick:T},[e.createVNode(w.default,{name:"restart",stroke:a.color,style:{transform:"scaleX(-1)"}},null,8,["stroke"])],6),e.createElementVNode("button",{class:e.normalizeClass([{"vue-ui-pen-and-paper-action":!0,"vue-ui-pen-and-paper-action-disabled":!f.value.length},"vue-ui-pen-and-paper-action"]),style:e.normalizeStyle({backgroundColor:a.backgroundColor,border:`1px solid ${C.value}`}),onClick:O},[e.createVNode(w.default,{name:"trash",stroke:a.color},null,8,["stroke"])],6),e.withDirectives(e.createElementVNode("input",{ref_key:"range",ref:U,type:"range",class:"vertical-range",min:.5,max:12,step:.1,"onUpdate:modelValue":o[2]||(o[2]=t=>B.value=t),style:e.normalizeStyle({accentColor:a.color})},null,4),[[e.vModelText,B.value]])],2)):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{ref_key:"svgElement",ref:$,xmlns:e.unref(L.XMLNS),viewBox:x.value,class:e.normalizeClass({"vue-ui-pen-and-paper":!0,inactive:!a.active}),onMousedown:S,onMousemove:u,onMouseup:D,onMouseleave:D,onTouchstart:e.withModifiers(S,["prevent"]),onTouchmove:e.withModifiers(u,["prevent"]),onTouchend:D},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,t=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:t},[t.path.replace("M","").split(" ").length===2?(e.openBlock(),e.createElementBlock("circle",{key:0,cx:t.path.replace("M","").split(" ")[0],cy:t.path.replace("M","").split(" ")[1],r:t.strokeWidth/2,fill:t.color},null,8,Z)):(e.openBlock(),e.createElementBlock("path",{key:1,class:"vue-ui-pen-and-paper-path",d:t.path,stroke:t.color,"stroke-width":t.strokeWidth,fill:"none"},null,8,ee))],64))),128)),F.value?(e.openBlock(),e.createElementBlock("path",{key:0,class:"vue-ui-pen-and-paper-path vue-ui-pen-and-paper-path-drawing",d:N(y.value),stroke:k.value,"stroke-width":B.value*1.1,fill:"none"},null,8,te)):e.createCommentVNode("",!0)],42,J))],64))}},ne=q._export_sfc(oe,[["__scopeId","data-v-7395a3bf"]]);exports.PenAndPaper=ne;

package/dist/{Shape-DQcajuPX.cjs → Shape-BeLBzUjm.cjs}

@@ -1 +1 @@
-"use strict";const o=require("vue"),a=require("./index-TsXfF4RW.cjs"),c=["cx","cy","r","fill","stroke","stroke-width"],v=["d","fill","stroke","stroke-width"],p=["points","fill","stroke","stroke-width"],f={__name:"Shape",props:{color:String,isSelected:{type:Boolean,default:!1},limit:{type:Number,default:3},plot:Object,radius:Number,shape:String,stroke:String,strokeWidth:Number,zoom:{type:Number,default:1.3}},emits:["mouseover","mouseout","click"],setup(n,{emit:m}){const e=n,i=m;function d(u){return{circle:{points:1,rotation:0},line:{points:2,rotation:0},triangle:{points:3,rotation:.52},square:{points:4,rotation:.783},diamond:{points:4,rotation:0},pentagon:{points:5,rotation:.95},hexagon:{points:6,rotation:0}}[u]}const l=o.computed(()=>d(e.shape)),s=o.computed(()=>e.shape!=="star"?null:a.createStar({plot:{x:e.plot.x,y:e.plot.y},radius:e.radius*(e.isSelected?e.zoom:1)})),k=o.computed(()=>a.createPolygonPath({plot:{x:e.plot.x,y:e.plot.y},radius:e.radius*(e.isSelected?e.zoom:1),sides:l.value.points,rotation:l.value.rotation}).path);return(u,t)=>(o.openBlock(),o.createElementBlock("g",null,[l.value&&l.value.points===1?(o.openBlock(),o.createElementBlock("circle",{key:0,cx:n.plot.x,cy:n.plot.y,r:e.radius*(e.isSelected?e.zoom:1),fill:n.color,stroke:n.stroke,"stroke-width":n.strokeWidth,onMouseover:t[0]||(t[0]=r=>i("mouseover")),onMouseout:t[1]||(t[1]=r=>i("mouseout")),onClick:t[2]||(t[2]=r=>i("click"))},null,40,c)):o.createCommentVNode("",!0),l.value&&l.value.points>=n.limit?(o.openBlock(),o.createElementBlock("path",{key:1,d:k.value,fill:n.color,stroke:n.stroke,"stroke-width":n.strokeWidth,onMouseover:t[3]||(t[3]=r=>i("mouseover")),onMouseout:t[4]||(t[4]=r=>i("mouseout")),onClick:t[5]||(t[5]=r=>i("click"))},null,40,v)):o.createCommentVNode("",!0),s.value?(o.openBlock(),o.createElementBlock("polygon",{key:2,points:s.value,fill:n.color,stroke:n.stroke,"stroke-width":n.strokeWidth,onMouseover:t[6]||(t[6]=r=>i("mouseover")),onMouseout:t[7]||(t[7]=r=>i("mouseout")),onClick:t[8]||(t[8]=r=>i("click"))},null,40,p)):o.createCommentVNode("",!0)]))}};exports._sfc_main=f;
+"use strict";const o=require("vue"),a=require("./index-BfKO0mWG.cjs"),c=["cx","cy","r","fill","stroke","stroke-width"],v=["d","fill","stroke","stroke-width"],p=["points","fill","stroke","stroke-width"],f={__name:"Shape",props:{color:String,isSelected:{type:Boolean,default:!1},limit:{type:Number,default:3},plot:Object,radius:Number,shape:String,stroke:String,strokeWidth:Number,zoom:{type:Number,default:1.3}},emits:["mouseover","mouseout","click"],setup(n,{emit:m}){const e=n,i=m;function d(u){return{circle:{points:1,rotation:0},line:{points:2,rotation:0},triangle:{points:3,rotation:.52},square:{points:4,rotation:.783},diamond:{points:4,rotation:0},pentagon:{points:5,rotation:.95},hexagon:{points:6,rotation:0}}[u]}const l=o.computed(()=>d(e.shape)),s=o.computed(()=>e.shape!=="star"?null:a.createStar({plot:{x:e.plot.x,y:e.plot.y},radius:e.radius*(e.isSelected?e.zoom:1)})),k=o.computed(()=>a.createPolygonPath({plot:{x:e.plot.x,y:e.plot.y},radius:e.radius*(e.isSelected?e.zoom:1),sides:l.value.points,rotation:l.value.rotation}).path);return(u,t)=>(o.openBlock(),o.createElementBlock("g",null,[l.value&&l.value.points===1?(o.openBlock(),o.createElementBlock("circle",{key:0,cx:n.plot.x,cy:n.plot.y,r:e.radius*(e.isSelected?e.zoom:1),fill:n.color,stroke:n.stroke,"stroke-width":n.strokeWidth,onMouseover:t[0]||(t[0]=r=>i("mouseover")),onMouseout:t[1]||(t[1]=r=>i("mouseout")),onClick:t[2]||(t[2]=r=>i("click"))},null,40,c)):o.createCommentVNode("",!0),l.value&&l.value.points>=n.limit?(o.openBlock(),o.createElementBlock("path",{key:1,d:k.value,fill:n.color,stroke:n.stroke,"stroke-width":n.strokeWidth,onMouseover:t[3]||(t[3]=r=>i("mouseover")),onMouseout:t[4]||(t[4]=r=>i("mouseout")),onClick:t[5]||(t[5]=r=>i("click"))},null,40,v)):o.createCommentVNode("",!0),s.value?(o.openBlock(),o.createElementBlock("polygon",{key:2,points:s.value,fill:n.color,stroke:n.stroke,"stroke-width":n.strokeWidth,onMouseover:t[6]||(t[6]=r=>i("mouseover")),onMouseout:t[7]||(t[7]=r=>i("mouseout")),onClick:t[8]||(t[8]=r=>i("click"))},null,40,p)):o.createCommentVNode("",!0)]))}};exports._sfc_main=f;

package/dist/{Shape-BQwPhaQ2.js → Shape-DBqyaB9e.js}

@@ -1,5 +1,5 @@
 import { computed as u, createElementBlock as s, openBlock as l, createCommentVNode as a } from "vue";
-import { W as f, P as y } from "./index-Sq6_Z5Ol.js";
+import { W as f, P as y } from "./index-GSCW0GhW.js";
 const c = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], g = ["d", "fill", "stroke", "stroke-width"], x = ["points", "fill", "stroke", "stroke-width"], w = {
   __name: "Shape",
   props: {