ep-craft 0.1.39 → 0.1.40

package/dist/components/color-picker-panel/composables/use-slider.js

@@ -1,68 +1,60 @@
-import { getCurrentInstance as S, shallowRef as D, computed as p, ref as W, onMounted as O, watch as K } from "vue";
-import "@vue/shared";
-import "lodash-unified";
+import { getCurrentInstance as L, shallowRef as K, computed as w, ref as D, onMounted as P, watch as T } from "vue";
+import { getEventCode as R } from "../../../utils/dom/event.js";
+import { getClientXY as U } from "../../../utils/dom/position.js";
+import { addUnit as E } from "../../../utils/dom/style.js";
+import { useNamespace as X } from "../../../hooks/use-namespace/index.js";
 import "@vueuse/core";
-import { getEventCode as P } from "../../../utils/dom/event.js";
-import { getClientXY as R } from "../../../utils/dom/position.js";
-import { addUnit as T } from "../../../utils/dom/style.js";
-import "@element-plus/icons-vue";
-import { EVENT_CODE as m } from "../../../constants/aria.js";
-import { useNamespace as U } from "../../../hooks/use-namespace/index.js";
 import "../../../hooks/use-size/index.js";
-import "@popperjs/core";
-import "../../../hooks/use-z-index/index.js";
-import "../../../hooks/use-delayed-toggle/index.js";
 import "../../../hooks/use-aria/index.js";
-import "../../../hooks/use-model-toggle/index.js";
-import "../../../hooks/use-empty-values/index.js";
-import { draggable as E } from "../utils/draggable.js";
-const V = (e, { key: a, minValue: b, maxValue: l }) => {
-  const c = S(), t = D(), w = D(), M = p(() => e.color.get(a));
-  function H(o) {
+import { EVENT_CODE as b } from "../../../constants/aria.js";
+import { draggable as S } from "../utils/draggable.js";
+const J = (t, { key: i, minValue: g, maxValue: r }) => {
+  const c = L(), e = K(), C = K(), M = w(() => t.color.get(i));
+  function W(o) {
     var n;
-    if (e.disabled) return;
-    o.target !== t.value && f(o), (n = t.value) == null || n.focus();
+    if (t.disabled) return;
+    o.target !== e.value && f(o), (n = e.value) == null || n.focus();
   }
   function f(o) {
-    if (!w.value || !t.value || e.disabled) return;
-    const n = c.vnode.el.getBoundingClientRect(), { clientX: s, clientY: d } = R(o);
+    if (!C.value || !e.value || t.disabled) return;
+    const n = c.vnode.el.getBoundingClientRect(), { clientX: s, clientY: d } = U(o);
     let v;
-    if (e.vertical) {
-      let i = d - n.top;
-      i = Math.max(t.value.offsetHeight / 2, i), i = Math.min(i, n.height - t.value.offsetHeight / 2), v = Math.round(
-        (i - t.value.offsetHeight / 2) / (n.height - t.value.offsetHeight) * l
+    if (t.vertical) {
+      let a = d - n.top;
+      a = Math.max(e.value.offsetHeight / 2, a), a = Math.min(a, n.height - e.value.offsetHeight / 2), v = Math.round(
+        (a - e.value.offsetHeight / 2) / (n.height - e.value.offsetHeight) * r
       );
     } else {
-      let i = s - n.left;
-      i = Math.max(t.value.offsetWidth / 2, i), i = Math.min(i, n.width - t.value.offsetWidth / 2), v = Math.round(
-        (i - t.value.offsetWidth / 2) / (n.width - t.value.offsetWidth) * l
+      let a = s - n.left;
+      a = Math.max(e.value.offsetWidth / 2, a), a = Math.min(a, n.width - e.value.offsetWidth / 2), v = Math.round(
+        (a - e.value.offsetWidth / 2) / (n.width - e.value.offsetWidth) * r
       );
     }
-    e.color.set(a, v);
+    t.color.set(i, v);
   }
-  function C(o) {
-    if (e.disabled) return;
-    const { shiftKey: r } = o, n = P(o), s = r ? 10 : 1, d = a === "hue" ? -1 : 1;
+  function H(o) {
+    if (t.disabled) return;
+    const { shiftKey: l } = o, n = R(o), s = l ? 10 : 1, d = i === "hue" ? -1 : 1;
     let v = !0;
     switch (n) {
-      case m.left:
-      case m.down:
+      case b.left:
+      case b.down:
         u(-s * d);
         break;
-      case m.right:
-      case m.up:
+      case b.right:
+      case b.up:
         u(s * d);
         break;
-      case m.home:
-        e.color.set(a, a === "hue" ? l : b);
+      case b.home:
+        t.color.set(i, i === "hue" ? r : g);
         break;
-      case m.end:
-        e.color.set(a, a === "hue" ? b : l);
+      case b.end:
+        t.color.set(i, i === "hue" ? g : r);
         break;
-      case m.pageDown:
+      case b.pageDown:
         u(-4 * d);
         break;
-      case m.pageUp:
+      case b.pageUp:
         u(4 * d);
         break;
       default:
@@ -72,81 +64,81 @@ const V = (e, { key: a, minValue: b, maxValue: l }) => {
     v && o.preventDefault();
   }
   function u(o) {
-    let r = M.value + o;
-    r = r < b ? b : r > l ? l : r, e.color.set(a, r);
+    let l = M.value + o;
+    l = l < g ? g : l > r ? r : l, t.color.set(i, l);
   }
   return {
-    thumb: t,
-    bar: w,
+    thumb: e,
+    bar: C,
     currentValue: M,
     handleDrag: f,
-    handleClick: H,
-    handleKeydown: C
+    handleClick: W,
+    handleKeydown: H
   };
-}, tt = (e, {
-  namespace: a,
-  maxValue: b,
-  bar: l,
+}, Q = (t, {
+  namespace: i,
+  maxValue: g,
+  bar: r,
   thumb: c,
-  currentValue: t,
-  handleDrag: w,
+  currentValue: e,
+  handleDrag: C,
   getBackground: M
 }) => {
-  const H = S(), f = U(a), C = W(0), u = W(0), o = W();
-  function r() {
-    if (!c.value || e.vertical) return 0;
-    const h = H.vnode.el, g = t.value;
+  const W = L(), f = X(i), H = D(0), u = D(0), o = D();
+  function l() {
+    if (!c.value || t.vertical) return 0;
+    const h = W.vnode.el, m = e.value;
     return h ? Math.round(
-      g * (h.offsetWidth - c.value.offsetWidth / 2) / b
+      m * (h.offsetWidth - c.value.offsetWidth / 2) / g
     ) : 0;
   }
   function n() {
     if (!c.value) return 0;
-    const h = H.vnode.el;
-    if (!e.vertical) return 0;
-    const g = t.value;
+    const h = W.vnode.el;
+    if (!t.vertical) return 0;
+    const m = e.value;
     return h ? Math.round(
-      g * (h.offsetHeight - c.value.offsetHeight / 2) / b
+      m * (h.offsetHeight - c.value.offsetHeight / 2) / g
     ) : 0;
   }
   function s() {
-    C.value = r(), u.value = n(), o.value = M == null ? void 0 : M();
+    H.value = l(), u.value = n(), o.value = M == null ? void 0 : M();
   }
-  O(() => {
-    if (!l.value || !c.value) return;
+  P(() => {
+    if (!r.value || !c.value) return;
     const h = {
-      drag: (g) => {
-        w(g);
+      drag: (m) => {
+        C(m);
       },
-      end: (g) => {
-        w(g);
+      end: (m) => {
+        C(m);
       }
     };
-    E(l.value, h), E(c.value, h), s();
-  }), K(t, () => s()), K(
-    () => e.color.value,
+    S(r.value, h), S(c.value, h), s();
+  }), T(e, () => s()), T(
+    () => t.color.value,
     () => s()
   );
-  const d = p(() => [
+  const d = w(() => [
     f.b(),
-    f.is("vertical", e.vertical),
-    f.is("disabled", e.disabled)
-  ]), v = p(() => f.e("bar")), i = p(() => f.e("thumb")), L = p(() => ({ background: o.value })), N = p(() => ({
-    left: T(C.value),
-    top: T(u.value)
+    f.is("vertical", t.vertical),
+    f.is("disabled", t.disabled)
+  ]), v = w(() => f.e("bar")), a = w(() => f.e("thumb")), N = w(() => ({ background: o.value })), O = w(() => ({
+    left: E(H.value),
+    top: E(u.value)
   }));
   return {
     rootKls: d,
     barKls: v,
-    barStyle: L,
-    thumbKls: i,
-    thumbStyle: N,
-    thumbLeft: C,
+    barStyle: N,
+    thumbKls: a,
+    thumbStyle: O,
+    thumbLeft: H,
     thumbTop: u,
     update: s
   };
 };
 export {
-  V as useSlider,
-  tt as useSliderDOM
+  J as useSlider,
+  Q as useSliderDOM
 };

package/dist/components/color-picker-panel/composables/use-sv-panel.d.ts

@@ -1,4 +1,4 @@
-import type { SvPanelProps } from '../props/sv-panel';
+import type { SvPanelProps } from '../props/sv-panel.js';
 export declare const useSvPanel: (props: SvPanelProps) => {
     cursorRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
     cursorTop: import("vue").Ref<number, number>;

package/dist/components/color-picker-panel/composables/use-sv-panel.js

@@ -1,47 +1,39 @@
-import { getCurrentInstance as y, ref as w, computed as l, onMounted as D, watch as E } from "vue";
+import { getCurrentInstance as D, ref as w, computed as a, onMounted as E, watch as K } from "vue";
 import { EVENT_CODE as C } from "../../../constants/aria.js";
-import { useNamespace as K } from "../../../hooks/use-namespace/index.js";
-import "@vue/shared";
-import "lodash-unified";
+import { useNamespace as P } from "../../../hooks/use-namespace/index.js";
 import "@vueuse/core";
-import { getEventCode as P } from "../../../utils/dom/event.js";
-import { getClientXY as B } from "../../../utils/dom/position.js";
-import { addUnit as p } from "../../../utils/dom/style.js";
-import "@element-plus/icons-vue";
+import { getEventCode as B } from "../../../utils/dom/event.js";
+import { getClientXY as N } from "../../../utils/dom/position.js";
+import { addUnit as y } from "../../../utils/dom/style.js";
 import "../../../hooks/use-size/index.js";
-import "@popperjs/core";
-import "../../../hooks/use-z-index/index.js";
-import "../../../hooks/use-delayed-toggle/index.js";
 import "../../../hooks/use-aria/index.js";
-import "../../../hooks/use-model-toggle/index.js";
-import "../../../hooks/use-empty-values/index.js";
-import { draggable as N } from "../utils/draggable.js";
-const J = (e) => {
-  const f = y(), a = w(), m = w(0), d = w(0), g = w("hsl(0, 100%, 50%)"), h = l(() => e.color.get("saturation")), c = l(() => e.color.get("value")), M = l(() => e.color.get("hue"));
+import { draggable as O } from "../utils/draggable.js";
+const $ = (e) => {
+  const g = D(), c = w(), d = w(0), h = w(0), m = w("hsl(0, 100%, 50%)"), f = a(() => e.color.get("saturation")), r = a(() => e.color.get("value")), M = a(() => e.color.get("hue"));
   function S(o) {
     var n;
     if (e.disabled) return;
-    o.target !== a.value && v(o), (n = a.value) == null || n.focus({ preventScroll: !0 });
+    o.target !== c.value && v(o), (n = c.value) == null || n.focus({ preventScroll: !0 });
   }
   function v(o) {
     if (e.disabled) return;
-    const n = f.vnode.el.getBoundingClientRect(), { clientX: i, clientY: k } = B(o);
+    const n = g.vnode.el.getBoundingClientRect(), { clientX: i, clientY: k } = N(o);
     let u = i - n.left, s = k - n.top;
-    u = Math.max(0, u), u = Math.min(u, n.width), s = Math.max(0, s), s = Math.min(s, n.height), d.value = u, m.value = s, e.color.set({
+    u = Math.max(0, u), u = Math.min(u, n.width), s = Math.max(0, s), s = Math.min(s, n.height), h.value = u, d.value = s, e.color.set({
       saturation: u / n.width * 100,
       value: 100 - s / n.height * 100
     });
   }
   function x(o) {
     if (e.disabled) return;
-    const { shiftKey: t } = o, n = P(o), i = t ? 10 : 1;
+    const { shiftKey: t } = o, n = B(o), i = t ? 10 : 1;
     let k = !0;
     switch (n) {
       case C.left:
-        r(-i);
+        l(-i);
         break;
       case C.right:
-        r(i);
+        l(i);
         break;
       case C.up:
         b(i);
@@ -55,69 +47,69 @@ const J = (e) => {
     }
     k && o.preventDefault();
   }
-  function r(o) {
-    let t = h.value + o;
+  function l(o) {
+    let t = f.value + o;
     t = t < 0 ? 0 : t > 100 ? 100 : t, e.color.set("saturation", t);
   }
   function b(o) {
-    let t = c.value + o;
+    let t = r.value + o;
     t = t < 0 ? 0 : t > 100 ? 100 : t, e.color.set("value", t);
   }
   return {
-    cursorRef: a,
-    cursorTop: m,
-    cursorLeft: d,
-    background: g,
-    saturation: h,
-    brightness: c,
+    cursorRef: c,
+    cursorTop: d,
+    cursorLeft: h,
+    background: m,
+    saturation: f,
+    brightness: r,
     hue: M,
     handleClick: S,
     handleDrag: v,
     handleKeydown: x
   };
-}, L = (e, {
-  cursorTop: f,
-  cursorLeft: a,
-  background: m,
-  handleDrag: d
+}, j = (e, {
+  cursorTop: g,
+  cursorLeft: c,
+  background: d,
+  handleDrag: h
 }) => {
-  const g = y(), h = K("color-svpanel");
-  function c() {
-    const r = e.color.get("saturation"), b = e.color.get("value"), o = g.vnode.el, { clientWidth: t, clientHeight: n } = o;
-    a.value = r * t / 100, f.value = (100 - b) * n / 100, m.value = `hsl(${e.color.get("hue")}, 100%, 50%)`;
+  const m = D(), f = P("color-svpanel");
+  function r() {
+    const l = e.color.get("saturation"), b = e.color.get("value"), o = m.vnode.el, { clientWidth: t, clientHeight: n } = o;
+    c.value = l * t / 100, g.value = (100 - b) * n / 100, d.value = `hsl(${e.color.get("hue")}, 100%, 50%)`;
   }
-  D(() => {
-    N(g.vnode.el, {
-      drag: (r) => {
-        d(r);
+  E(() => {
+    O(m.vnode.el, {
+      drag: (l) => {
+        h(l);
       },
-      end: (r) => {
-        d(r);
+      end: (l) => {
+        h(l);
       }
-    }), c();
-  }), E(
+    }), r();
+  }), K(
     [
       () => e.color.get("hue"),
       () => e.color.get("value"),
       () => e.color.value
     ],
-    () => c()
+    () => r()
   );
-  const M = l(() => h.b()), S = l(() => h.e("cursor")), v = l(() => ({
-    backgroundColor: m.value
-  })), x = l(() => ({
-    top: p(f.value),
-    left: p(a.value)
+  const M = a(() => f.b()), S = a(() => f.e("cursor")), v = a(() => ({
+    backgroundColor: d.value
+  })), x = a(() => ({
+    top: y(g.value),
+    left: y(c.value)
   }));
   return {
     rootKls: M,
     cursorKls: S,
     rootStyle: v,
     cursorStyle: x,
-    update: c
+    update: r
   };
 };
 export {
-  J as useSvPanel,
-  L as useSvPanelDOM
+  $ as useSvPanel,
+  j as useSvPanelDOM
 };

package/dist/components/color-picker-panel/index.d.ts

@@ -1,4 +1,4 @@
-import EpColorPickerPanel from './EpColorPickerPanel.vue';
+import EpColorPickerPanel from './EpColorPickerPanel.vue.js';
 export { EpColorPickerPanel };
 export default EpColorPickerPanel;
-export * from './color-picker-panel';
+export * from './color-picker-panel.js';

package/dist/components/color-picker-panel/props/predefine.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractPublicPropTypes } from 'vue';
-import type Color from '../utils/color';
+import type Color from '../utils/color.js';
 export interface PredefineProps {
     colors: string[];
     color: Color;
@@ -23,7 +23,7 @@ export declare const predefineProps: {
         __epPropKey: true;
     };
     readonly enableAlpha: {
-        readonly type: import("vue").PropType<import("../../../utils/index").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
+        readonly type: import("vue").PropType<import("../../../utils/index.js").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
         readonly required: true;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;

package/dist/components/color-picker-panel/props/slider.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractPublicPropTypes } from 'vue';
-import type Color from '../utils/color';
+import type Color from '../utils/color.js';
 export interface AlphaSliderProps {
     color: Color;
     vertical?: boolean;

package/dist/components/color-picker-panel/props/sv-panel.d.ts

@@ -1,5 +1,5 @@
 import type { ExtractPublicPropTypes } from 'vue';
-import type Color from '../utils/color';
+import type Color from '../utils/color.js';
 export interface SvPanelProps {
     color: Color;
     disabled?: boolean;

package/dist/components/color-picker-panel/utils/color.js

@@ -1,20 +1,16 @@
 import { TinyColor as e } from "@ctrl/tinycolor";
-import { hasOwn as r } from "@vue/shared";
-import "lodash-unified";
-import "@vueuse/core";
-import "@element-plus/icons-vue";
-import "vue";
-class g {
+import { hasOwn as _ } from "@vue/shared";
+class f {
   constructor(t = {}) {
     this._hue = 0, this._saturation = 100, this._value = 100, this._alpha = 100, this._tiny = new e(), this._isValid = !1, this.enableAlpha = !1, this.format = "", this.value = "";
     for (const i in t)
-      r(t, i) && (this[i] = t[i]);
+      _(t, i) && (this[i] = t[i]);
     t.value ? this.fromString(t.value) : this.doOnChange();
   }
   set(t, i) {
     if (arguments.length === 1 && typeof t == "object") {
       for (const s in t)
-        r(t, s) && this.set(s, t[s]);
+        _(t, s) && this.set(s, t[s]);
       return;
     }
     this[`_${t}`] = i, this._isValid = !0, this.doOnChange();
@@ -58,5 +54,5 @@ class g {
   }
 }
 export {
-  g as default
+  f as default
 };

package/dist/components/color-picker-panel/utils/draggable.js

@@ -1,23 +1,19 @@
-import "@vue/shared";
-import "lodash-unified";
 import { isClient as a } from "@vueuse/core";
-import "@element-plus/icons-vue";
-import "vue";
-let d = !1;
-function i(m, e) {
+let r = !1;
+function v(m, e) {
   if (!a) return;
-  const r = function(n) {
+  const u = function(n) {
     var t;
     (t = e.drag) == null || t.call(e, n);
-  }, u = function(n) {
+  }, d = function(n) {
     var t;
-    document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", u), document.removeEventListener("touchmove", r), document.removeEventListener("touchend", u), document.onselectstart = null, document.ondragstart = null, d = !1, (t = e.end) == null || t.call(e, n);
+    document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", d), document.removeEventListener("touchmove", u), document.removeEventListener("touchend", d), document.onselectstart = null, document.ondragstart = null, r = !1, (t = e.end) == null || t.call(e, n);
   }, c = function(n) {
     var t;
-    d || (document.onselectstart = () => !1, document.ondragstart = () => !1, document.addEventListener("mousemove", r), document.addEventListener("mouseup", u), document.addEventListener("touchmove", r), document.addEventListener("touchend", u), d = !0, (t = e.start) == null || t.call(e, n));
+    r || (document.onselectstart = () => !1, document.ondragstart = () => !1, document.addEventListener("mousemove", u), document.addEventListener("mouseup", d), document.addEventListener("touchmove", u), document.addEventListener("touchend", d), r = !0, (t = e.start) == null || t.call(e, n));
   };
   m.addEventListener("mousedown", c), m.addEventListener("touchstart", c, { passive: !1 });
 }
 export {
-  i as draggable
+  v as draggable
 };