vue-data-ui 2.4.6 → 2.4.7

package/dist/PenAndPaper-DSz98f49.js

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