vue-data-ui 2.4.4 → 2.4.5

package/dist/PenAndPaper-BQzgk5kO.js

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

package/dist/PenAndPaper-DBSxk9Xk.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),y=require("./index-CcykRspI.cjs"),k=require("./BaseIcon-BTn_oML7.cjs"),x=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),$=["value"],S={class:"icon"},M={__name:"ColorPicker",props:{value:{type:String,default:"#ffffff"},size:{type:String,default:"50px"}},emits:["update:value"],setup(l,{emit:g}){const a=l,r=e.computed(()=>({backgroundColor:a.value,width:"100%",height:"100%",cursor:"pointer"})),c=e.ref(null),h=()=>{var u;(u=c.value)==null||u.click()},i=u=>{const s=u.target.value;g("update:value",s)},d=e.computed(()=>y.adaptColorToBackground(a.value));return e.watch(()=>a.value,u=>{c.value.value=u}),(u,s)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(r.value),class:"color-picker-wrapper",onClick:h},[e.createElementVNode("input",{ref_key:"colorInput",ref:c,type:"color",value:l.value,class:"hidden-input",onInput:i},null,40,$),e.createElementVNode("div",S,[e.createVNode(k.default,{name:"palette",stroke:d.value,size:22},null,8,["stroke"])])],4))}},_=x._export_sfc(M,[["__scopeId","data-v-d3f01240"]]),F={class:e.normalizeClass({"vue-ui-pen-and-paper-action":!0}),style:{padding:"0 !important"}},T=["disabled"],R=["xmlns","viewBox","onTouchstart","onTouchmove"],D=["d","stroke"],I=["d","stroke"],L={__name:"PenAndPaper",props:{parent:{type:HTMLElement},backgroundColor:{type:String,default:"#FFFFFF"},color:{type:String,default:"#2D353C"},active:{type:Boolean,default:!1}},emits:["close"],setup(l,{emit:g}){const a=l,r=e.ref([]),c=e.ref([]),h=e.ref("0 0 0 0"),i=e.ref(a.color),d=e.computed(()=>y.lightenHexColor(a.color,.6));function u({width:t,height:o}){h.value=`0 0 ${t} ${o}`}const s=e.ref(null);e.onMounted(()=>{e.nextTick(()=>{if(a.parent){s.value=new ResizeObserver(n=>{for(const m of n){const{width:z,height:P}=m.contentRect;u({width:z,height:P})}}),s.value.observe(a.parent);const{width:t,height:o}=a.parent.getBoundingClientRect();u({width:t,height:o})}})}),e.onBeforeUnmount(()=>{s.value&&s.value.disconnect()}),e.watch(()=>a.parent,t=>{if(!t)return;const{width:o,height:n}=a.parent.getBoundingClientRect();u({width:o,height:n})},{immediate:!0});const v=e.ref(!1),p=e.ref(""),f=e.ref(null);function b(t){if(!f.value)return;v.value=!0;const{x:o,y:n}=w(t);p.value=`M ${o} ${n}`}function B(t){if(!v.value||!f.value)return;const{x:o,y:n}=w(t);p.value+=` ${o} ${n}`}function C(){v.value&&(r.value.push(p.value),c.value=[],p.value=""),v.value=!1}function w(t){if(!f.value)return{x:0,y:0};const o=f.value.getBoundingClientRect();let n,m;return t.touches&&t.touches.length?(n=t.touches[0].clientX,m=t.touches[0].clientY):(n=t.clientX,m=t.clientY),{x:n-o.left,y:m-o.top}}e.ref(!1);function E(){if(r.value.length>0){const t=r.value.pop();c.value.push(t)}}function V(){if(c.value.length>0){const t=c.value.pop();r.value.push(t)}}function N(){r.value=[],c.value=[]}return(t,o)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[l.active?(e.openBlock(),e.createElementBlock("div",{key:0,"data-html2canvas-ignore":"",class:e.normalizeClass({"vue-ui-pen-and-paper-actions":!0,visible:l.active})},[e.createElementVNode("button",{class:"vue-ui-pen-and-paper-action",style:e.normalizeStyle({backgroundColor:l.backgroundColor,border:`1px solid ${d.value}`}),onClick:o[0]||(o[0]=n=>g("close"))},[e.createVNode(k.default,{name:"close",stroke:l.color},null,8,["stroke"])],4),e.createElementVNode("button",F,[e.createVNode(_,{value:i.value,"onUpdate:value":o[1]||(o[1]=n=>i.value=n)},null,8,["value"])]),e.createElementVNode("button",{class:e.normalizeClass({"vue-ui-pen-and-paper-action":!0,"vue-ui-pen-and-paper-action-disabled":!r.value.length}),disabled:!r.value.length,style:e.normalizeStyle({backgroundColor:l.backgroundColor,border:`1px solid ${d.value}`}),onClick:E},[e.createVNode(k.default,{name:"restart",stroke:l.color},null,8,["stroke"])],14,T),e.createElementVNode("button",{class:e.normalizeClass({"vue-ui-pen-and-paper-action":!0,"vue-ui-pen-and-paper-action-disabled":!c.value.length}),style:e.normalizeStyle({backgroundColor:l.backgroundColor,border:`1px solid ${d.value}`}),onClick:V},[e.createVNode(k.default,{name:"restart",stroke:l.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":!r.value.length},"vue-ui-pen-and-paper-action"]),style:e.normalizeStyle({backgroundColor:l.backgroundColor,border:`1px solid ${d.value}`}),onClick:N},[e.createVNode(k.default,{name:"trash",stroke:l.color},null,8,["stroke"])],6)],2)):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{ref_key:"svgElement",ref:f,xmlns:e.unref(y.XMLNS),viewBox:h.value,class:e.normalizeClass({"vue-ui-pen-and-paper":!0,inactive:!l.active}),onMousedown:b,onMousemove:B,onMouseup:C,onMouseleave:C,onTouchstart:e.withModifiers(b,["prevent"]),onTouchmove:e.withModifiers(B,["prevent"]),onTouchend:C},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.value,n=>(e.openBlock(),e.createElementBlock("path",{class:"vue-ui-pen-and-paper-path",key:n,d:n,stroke:i.value,fill:"none"},null,8,D))),128)),v.value?(e.openBlock(),e.createElementBlock("path",{key:0,class:"vue-ui-pen-and-paper-path vue-ui-pen-and-paper-path-drawing",d:p.value,stroke:i.value,fill:"none"},null,8,I)):e.createCommentVNode("",!0)],42,R))],64))}},X=x._export_sfc(L,[["__scopeId","data-v-634187a1"]]);exports.PenAndPaper=X;