vue-data-ui 2.4.16 → 2.4.17

package/dist/PenAndPaper-M_ZBYgJF.js

@@ -1,347 +0,0 @@
-import { computed as I, ref as p, watch as q, openBlock as k, createElementBlock as y, normalizeStyle as w, createElementVNode as $, createVNode as F, onMounted as Z, nextTick as ee, onBeforeUnmount as te, Fragment as R, normalizeClass as P, withDirectives as oe, vModelText as ne, createCommentVNode as W, unref as le, withModifiers as Q, renderList as ae } from "vue";
-import { F as re, l as se, X as ue } from "./index-DtgCF1dT.js";
-import z from "./BaseIcon-CbpX2G1z.js";
-import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ce = ["value"], ie = { class: "icon" }, de = {
-  __name: "ColorPicker",
-  props: {
-    value: {
-      type: String,
-      default: "#ffffff"
-    },
-    size: {
-      type: String,
-      default: "50px"
-    }
-  },
-  emits: ["update:value"],
-  setup(r, { emit: Y }) {
-    const v = r, f = I(() => ({
-      backgroundColor: v.value,
-      width: "100%",
-      height: "100%",
-      cursor: "pointer"
-    })), m = p(null), L = () => {
-      var u;
-      (u = m.value) == null || u.click();
-    }, x = (u) => {
-      const b = u.target.value;
-      Y("update:value", b);
-    }, C = I(() => re(v.value));
-    return q(
-      () => v.value,
-      (u) => {
-        m.value.value = u;
-      }
-    ), (u, b) => (k(), y("div", {
-      style: w(f.value),
-      class: "color-picker-wrapper",
-      onClick: L
-    }, [
-      $("input", {
-        ref_key: "colorInput",
-        ref: m,
-        type: "color",
-        value: r.value,
-        class: "hidden-input",
-        onInput: x
-      }, null, 40, ce),
-      $("div", ie, [
-        F(z, {
-          name: "palette",
-          stroke: C.value,
-          size: 22
-        }, null, 8, ["stroke"])
-      ])
-    ], 4));
-  }
-}, pe = /* @__PURE__ */ A(de, [["__scopeId", "data-v-d3f01240"]]), ve = {
-  class: /* @__PURE__ */ P({
-    "vue-ui-pen-and-paper-action": !0
-  }),
-  style: { padding: "0 !important" }
-}, fe = ["disabled"], he = ["xmlns", "viewBox", "onTouchstart", "onTouchmove"], ge = ["cx", "cy", "r", "fill"], me = ["d", "stroke", "stroke-width"], ke = ["d", "stroke", "stroke-width"], ye = {
-  __name: "PenAndPaper",
-  props: {
-    parent: {
-      type: HTMLElement
-    },
-    backgroundColor: {
-      type: String,
-      default: "#FFFFFF"
-    },
-    color: {
-      type: String,
-      default: "#2D353C"
-    },
-    active: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["close"],
-  setup(r, { emit: Y }) {
-    const v = r, f = p([]), m = p([]), L = p("0 0 0 0"), x = p(v.color), C = p(1), u = I(() => se(v.color, 0.6));
-    function b({ width: o, height: t }) {
-      L.value = `0 0 ${o} ${t}`;
-    }
-    const N = p(null);
-    Z(() => {
-      ee(() => {
-        if (v.parent) {
-          N.value = new ResizeObserver((e) => {
-            for (const n of e) {
-              const { width: l, height: a } = n.contentRect;
-              b({ width: l, height: a });
-            }
-          }), N.value.observe(v.parent);
-          const { width: o, height: t } = v.parent.getBoundingClientRect();
-          b({ width: o, height: t });
-        }
-      });
-    }), te(() => {
-      N.value && N.value.disconnect();
-    }), q(
-      () => v.parent,
-      (o) => {
-        if (!o) return;
-        const { width: t, height: e } = v.parent.getBoundingClientRect();
-        b({ width: t, height: e });
-      },
-      { immediate: !0 }
-    );
-    const M = p(!1), B = p(""), X = p(null);
-    function _(o) {
-      if (!X.value) return;
-      M.value = !0;
-      const { x: t, y: e } = U(o);
-      B.value = `M ${t} ${e}`;
-    }
-    function E(o) {
-      if (!M.value || !X.value) return;
-      const { x: t, y: e } = U(o);
-      B.value += ` ${t} ${e}`;
-    }
-    function V(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 = H(e), l = [`M ${n[0]} ${n[1]}`];
-      for (let c = 2; c < n.length - 2; c += 2) {
-        const h = n[c - 2], g = n[c - 1], i = n[c], d = n[c + 1], S = (h + i) / 2, T = (g + d) / 2;
-        l.push(`Q ${h} ${g} ${S} ${T}`);
-      }
-      const a = n[n.length - 2], s = n[n.length - 1];
-      return l.push(`L ${a} ${s}`), l.join(" ");
-    }
-    function H(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], c = o[n - 1], h = o[n + 2], g = o[n + 3];
-        e[n] = l + t * ((s + h) / 2 - l), e[n + 1] = a + t * ((c + g) / 2 - a);
-      }
-      return e;
-    }
-    function O(o) {
-      const t = o.trim().split(/\s+/);
-      let e = "", n = "", l = null, a = null;
-      for (let s = 0; s < t.length; s += 1) {
-        const c = t[s];
-        if (isNaN(c)) {
-          if (n = c, n === "M" || n === "L")
-            l = parseFloat(t[++s]), a = parseFloat(t[++s]), e += `${n}${l} ${a}`;
-          else if (n === "Q") {
-            const h = parseFloat(t[++s]), g = parseFloat(t[++s]), i = parseFloat(t[++s]), d = parseFloat(t[++s]);
-            h === l && g === a ? e += `t${i - l} ${d - a}` : e += `q${h - l} ${g - a} ${i - l} ${d - a}`, l = i, a = d;
-          }
-        } else {
-          const h = parseFloat(c), g = parseFloat(t[++s]);
-          if (n === "L") {
-            const i = h - l, d = g - a;
-            i === 0 ? e += `v${d}` : d === 0 ? e += `h${i}` : e += `l${i} ${d}`, l = h, a = g;
-          } else if (n === "Q") {
-            const i = h, d = g, S = parseFloat(t[++s]), T = parseFloat(t[++s]);
-            i === l && d === a ? e += `t${S - l} ${T - a}` : e += `q${i - l} ${d - a} ${S - l} ${T - a}`, l = S, a = T;
-          }
-        }
-      }
-      return e;
-    }
-    function D() {
-      M.value && (f.value.push({
-        strokeWidth: C.value,
-        path: O(V(B.value)),
-        color: x.value
-      }), m.value = [], B.value = ""), M.value = !1;
-    }
-    function U(o) {
-      if (!X.value) return { x: 0, y: 0 };
-      const t = X.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
-      };
-    }
-    p(!1);
-    function j() {
-      if (f.value.length > 0) {
-        const o = f.value.pop();
-        m.value.push(o);
-      }
-    }
-    function G() {
-      if (m.value.length > 0) {
-        const o = m.value.pop();
-        f.value.push(o);
-      }
-    }
-    function J() {
-      f.value = [], m.value = [];
-    }
-    const K = p(null);
-    return (o, t) => (k(), y(R, null, [
-      r.active ? (k(), y("div", {
-        key: 0,
-        "data-html2canvas-ignore": "",
-        class: P({
-          "vue-ui-pen-and-paper-actions": !0,
-          visible: r.active
-        })
-      }, [
-        $("button", {
-          class: "vue-ui-pen-and-paper-action",
-          style: w({
-            backgroundColor: r.backgroundColor,
-            border: `1px solid ${u.value}`
-          }),
-          onClick: t[0] || (t[0] = (e) => Y("close"))
-        }, [
-          F(z, {
-            name: "close",
-            stroke: r.color
-          }, null, 8, ["stroke"])
-        ], 4),
-        $("button", ve, [
-          F(pe, {
-            value: x.value,
-            "onUpdate:value": t[1] || (t[1] = (e) => x.value = e)
-          }, null, 8, ["value"])
-        ]),
-        $("button", {
-          class: P({
-            "vue-ui-pen-and-paper-action": !0,
-            "vue-ui-pen-and-paper-action-disabled": !f.value.length
-          }),
-          disabled: !f.value.length,
-          style: w({
-            backgroundColor: r.backgroundColor,
-            border: `1px solid ${u.value}`
-          }),
-          onClick: j
-        }, [
-          F(z, {
-            name: "restart",
-            stroke: r.color
-          }, null, 8, ["stroke"])
-        ], 14, fe),
-        $("button", {
-          class: P({
-            "vue-ui-pen-and-paper-action": !0,
-            "vue-ui-pen-and-paper-action-disabled": !m.value.length
-          }),
-          style: w({
-            backgroundColor: r.backgroundColor,
-            border: `1px solid ${u.value}`
-          }),
-          onClick: G
-        }, [
-          F(z, {
-            name: "restart",
-            stroke: r.color,
-            style: { transform: "scaleX(-1)" }
-          }, null, 8, ["stroke"])
-        ], 6),
-        $("button", {
-          class: P([{
-            "vue-ui-pen-and-paper-action": !0,
-            "vue-ui-pen-and-paper-action-disabled": !f.value.length
-          }, "vue-ui-pen-and-paper-action"]),
-          style: w({
-            backgroundColor: r.backgroundColor,
-            border: `1px solid ${u.value}`
-          }),
-          onClick: J
-        }, [
-          F(z, {
-            name: "trash",
-            stroke: r.color
-          }, null, 8, ["stroke"])
-        ], 6),
-        oe($("input", {
-          ref_key: "range",
-          ref: K,
-          type: "range",
-          class: "vertical-range",
-          min: 0.5,
-          max: 12,
-          step: 0.1,
-          "onUpdate:modelValue": t[2] || (t[2] = (e) => C.value = e),
-          style: w({
-            accentColor: r.color
-          })
-        }, null, 4), [
-          [ne, C.value]
-        ])
-      ], 2)) : W("", !0),
-      (k(), y("svg", {
-        ref_key: "svgElement",
-        ref: X,
-        xmlns: le(ue),
-        viewBox: L.value,
-        class: P({
-          "vue-ui-pen-and-paper": !0,
-          inactive: !r.active
-        }),
-        onMousedown: _,
-        onMousemove: E,
-        onMouseup: D,
-        onMouseleave: D,
-        onTouchstart: Q(_, ["prevent"]),
-        onTouchmove: Q(E, ["prevent"]),
-        onTouchend: D
-      }, [
-        (k(!0), y(R, null, ae(f.value, (e) => (k(), y(R, { key: e }, [
-          e.path.replace("M", "").split(" ").length === 2 ? (k(), y("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, ge)) : (k(), y("path", {
-            key: 1,
-            class: "vue-ui-pen-and-paper-path",
-            d: e.path,
-            stroke: e.color,
-            "stroke-width": e.strokeWidth,
-            fill: "none"
-          }, null, 8, me))
-        ], 64))), 128)),
-        M.value ? (k(), y("path", {
-          key: 0,
-          class: "vue-ui-pen-and-paper-path vue-ui-pen-and-paper-path-drawing",
-          d: V(B.value),
-          stroke: x.value,
-          "stroke-width": C.value * 1.1,
-          fill: "none"
-        }, null, 8, ke)) : W("", !0)
-      ], 42, he))
-    ], 64));
-  }
-}, we = /* @__PURE__ */ A(ye, [["__scopeId", "data-v-a868f599"]]);
-export {
-  we as P
-};