easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-color-picker.js

@@ -1,39 +1,39 @@
-var Et = Object.defineProperty;
-var ot = (n) => {
-  throw TypeError(n);
+var xt = Object.defineProperty;
+var ot = (h) => {
+  throw TypeError(h);
 };
-var xt = (n, h, e) => h in n ? Et(n, h, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[h] = e;
-var D = (n, h, e) => xt(n, typeof h != "symbol" ? h + "" : h, e), tt = (n, h, e) => h.has(n) || ot("Cannot " + e);
-var t = (n, h, e) => (tt(n, h, "read from private field"), e ? e.call(n) : h.get(n)), l = (n, h, e) => h.has(n) ? ot("Cannot add the same private member more than once") : h instanceof WeakSet ? h.add(n) : h.set(n, e), d = (n, h, e, a) => (tt(n, h, "write to private field"), a ? a.call(n, e) : h.set(n, e), e), i = (n, h, e) => (tt(n, h, "access private method"), e);
-import { F as Mt } from "../core/FormBase.js";
+var Et = (h, n, e) => n in h ? xt(h, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[n] = e;
+var T = (h, n, e) => Et(h, typeof n != "symbol" ? n + "" : n, e), tt = (h, n, e) => n.has(h) || ot("Cannot " + e);
+var t = (h, n, e) => (tt(h, n, "read from private field"), e ? e.call(h) : n.get(h)), l = (h, n, e) => n.has(h) ? ot("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(h) : n.set(h, e), d = (h, n, e, i) => (tt(h, n, "write to private field"), i ? i.call(h, e) : n.set(h, e), e), a = (h, n, e) => (tt(h, n, "access private method"), e);
+import { F as kt } from "../core/FormBase.js";
 import { n as rt } from "./ea-calendar2.js";
-import { C as H } from "../utils/Color.js";
-import { s as kt } from "../css/ea-color-picker.style.js";
+import { C as F } from "../utils/Color.js";
+import { s as Mt } from "../css/ea-color-picker.style.js";
 import { E as $t } from "../utils/Variables.js";
 import { B as At } from "./Base.js";
-import { s as Rt } from "../css/ea-color-picker-panel.style.js";
+import { s as Pt } from "../css/ea-color-picker-panel.style.js";
 import "./ea-input.js";
 import { E as G } from "../utils/Utils.js";
 import "./ea-popper.js";
 import "./ea-button.js";
-class Pt extends Event {
-  constructor(h) {
+class Rt extends Event {
+  constructor(n) {
     super("ea-active-change", {
       bubbles: !0,
       cancelable: !0,
       composed: !0
-    }), this.detail = h;
+    }), this.detail = n;
   }
 }
 class qt extends Event {
-  constructor(h) {
+  constructor(n) {
     super("ea-invalid-color", {
       bubbles: !0,
       composed: !0
-    }), this.detail = h;
+    }), this.detail = n;
   }
 }
-var W, x, M, $, P, A, J, q, L, f, B, m, v, s, o, lt, nt, ht, ct, et, I, ut, T, dt, pt, st, it, Z, vt, bt;
+var W, A, m, P, k, R, J, M, L, g, B, y, v, s, o, lt, ht, nt, ut, et, D, ct, H, dt, pt, st, it, Z, vt, bt;
 class Lt extends At {
   constructor() {
     super();
@@ -41,26 +41,26 @@ class Lt extends At {
     /** @type {HTMLDivElement} */
     l(this, W);
     /** @type {HTMLDivElement} */
-    l(this, x);
-    /** @type {HTMLDivElement} */
-    l(this, M);
+    l(this, A);
     /** @type {HTMLDivElement} */
-    l(this, $);
+    l(this, m);
     /** @type {HTMLDivElement} */
     l(this, P);
     /** @type {HTMLDivElement} */
-    l(this, A);
+    l(this, k);
+    /** @type {HTMLDivElement} */
+    l(this, R);
     /** @type {HTMLDivElement} */
     l(this, J);
     /** @type {HTMLDivElement} */
-    l(this, q);
+    l(this, M);
     /** @type {HTMLDivElement} */
     l(this, L);
     /** @type {HTMLInputElement} */
-    l(this, f);
+    l(this, g);
     /** @type {HTMLDivElement} */
     l(this, B);
-    l(this, m, new AbortController());
+    l(this, y, new AbortController());
     l(this, v, {
       /** @type {AbortController | null} 饱和度拖拽控制器 */
       saturationMove: null,
@@ -81,18 +81,18 @@ class Lt extends At {
       /** @type {number} 透明度值 (0-1) */
       alpha: 1,
       /** @type {import("@/utils/Color").Color} 当前颜色对象 */
-      color: new H(),
+      color: new F(),
       /** @type {boolean} 是否正在拖拽 */
       isDragging: !1,
       /** @type {string} 上一个验证通过的颜色值 */
       lastValidValue: ""
     });
-    D(this, "state", this.properties({
+    T(this, "state", this.properties({
       value: {
         type: String,
         default: "",
         observer: (e) => {
-          t(this, s).lastValidValue = e, i(this, o, et).call(this), t(this, I).call(this), i(this, o, Z).call(this);
+          t(this, s).lastValidValue = e, a(this, o, et).call(this), t(this, D).call(this), a(this, o, Z).call(this);
         }
       },
       "color-format": {
@@ -127,36 +127,36 @@ class Lt extends At {
         type: Boolean,
         default: !0,
         observer: (e) => {
-          i(this, o, it).call(this);
+          a(this, o, it).call(this);
         }
       }
     }));
-    D(this, "propStates", this.properties({
+    T(this, "propStates", this.properties({
       predefine: {
         props: !0,
         type: Array,
         default: [],
         observer: (e) => {
-          i(this, o, dt).call(this, e);
+          a(this, o, dt).call(this, e);
         }
       }
     }));
     /**
      * 更新饱和度面板的背景颜色
      */
-    l(this, I, () => {
-      const e = new H({
+    l(this, D, () => {
+      const e = new F({
         h: t(this, s).hue,
         s: 1,
         v: 1,
         a: 1
       });
-      t(this, x).style.setProperty(
+      this.style.setProperty(
         "--ea-color-picker-panel-background-color",
         e.toString(this["color-format"])
       );
     });
-    this.stylesheet = Rt, this.$render();
+    this.stylesheet = Pt, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -170,6 +170,23 @@ class Lt extends At {
       "clearable"
     ];
   }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      this.ns.b("container"),
+      {},
+      {
+        disabled: this.disabled,
+        border: this.border,
+        "show-alpha": this["show-alpha"],
+        clearable: this.clearable
+      }
+    );
+    return t(this, W).className = e, e;
+  }
   $render() {
     const e = rt("color-picker-panel");
     this.ns = e, this.shadowRoot.innerHTML = this.html(`
@@ -196,101 +213,90 @@ class Lt extends At {
           </section>
         </div>
       </div>
-    `), d(this, W, this.shadowRoot.querySelector(e.cb())), d(this, x, this.shadowRoot.querySelector(e.ce("svpanel"))), d(this, M, this.shadowRoot.querySelector(
+    `), d(this, W, this.shadowRoot.querySelector(e.cb())), d(this, A, this.shadowRoot.querySelector(e.ce("svpanel"))), d(this, m, this.shadowRoot.querySelector(
       e.ce("svpanel-cursor")
-    )), d(this, $, this.shadowRoot.querySelector(e.ce("hue-slider"))), d(this, P, this.shadowRoot.querySelector(e.ce("hue-slider-thumb"))), d(this, A, this.shadowRoot.querySelector(e.ce("alpha-slider"))), d(this, J, this.shadowRoot.querySelector(
+    )), d(this, P, this.shadowRoot.querySelector(e.ce("hue-slider"))), d(this, k, this.shadowRoot.querySelector(e.ce("hue-slider-thumb"))), d(this, R, this.shadowRoot.querySelector(e.ce("alpha-slider"))), d(this, J, this.shadowRoot.querySelector(
       e.ce("alpha-slider-bar")
-    )), d(this, q, this.shadowRoot.querySelector(
+    )), d(this, M, this.shadowRoot.querySelector(
       e.ce("alpha-slider-thumb")
-    )), d(this, L, this.shadowRoot.querySelector(e.ce("predefine"))), d(this, f, this.shadowRoot.querySelector(e.ce("color-input"))), d(this, B, this.shadowRoot.querySelector(e.ce("text-display"))), this.updateContainerClasslist(), i(this, o, it).call(this);
+    )), d(this, L, this.shadowRoot.querySelector(e.ce("predefine"))), d(this, g, this.shadowRoot.querySelector(e.ce("color-input"))), d(this, B, this.shadowRoot.querySelector(e.ce("text-display"))), this.updateContainerClasslist(), a(this, o, it).call(this);
   }
   connectedCallback() {
     var e;
-    super.connectedCallback(), (e = t(this, m)) == null || e.abort(), d(this, m, new AbortController()), i(this, o, lt).call(this);
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const e = this.computedClasslist(
-      this.ns.b("container"),
-      {},
-      {
-        disabled: this.disabled,
-        border: this.border,
-        "show-alpha": this["show-alpha"],
-        clearable: this.clearable
-      }
-    );
-    return t(this, W).className = e, e;
+    super.connectedCallback(), (e = t(this, y)) == null || e.abort(), d(this, y, new AbortController()), a(this, o, lt).call(this);
   }
   $beforeUnmounted() {
     var e;
-    (e = t(this, m)) == null || e.abort();
+    (e = t(this, y)) == null || e.abort();
+  }
+  /**
+   * 重置光标和滑块位置到初始状态
+   */
+  resetCursorPosition() {
+    t(this, s).hue = 0, t(this, s).saturation = 1, t(this, s).value = 1, t(this, s).alpha = 1, t(this, s).isFirstValueUpdate = !1, t(this, m) && (t(this, m).style.left = "", t(this, m).style.top = ""), t(this, k) && (t(this, k).style.top = ""), t(this, M) && (t(this, M).style.left = ""), t(this, D).call(this);
   }
 }
-W = new WeakMap(), x = new WeakMap(), M = new WeakMap(), $ = new WeakMap(), P = new WeakMap(), A = new WeakMap(), J = new WeakMap(), q = new WeakMap(), L = new WeakMap(), f = new WeakMap(), B = new WeakMap(), m = new WeakMap(), v = new WeakMap(), s = new WeakMap(), o = new WeakSet(), /**
+W = new WeakMap(), A = new WeakMap(), m = new WeakMap(), P = new WeakMap(), k = new WeakMap(), R = new WeakMap(), J = new WeakMap(), M = new WeakMap(), L = new WeakMap(), g = new WeakMap(), B = new WeakMap(), y = new WeakMap(), v = new WeakMap(), s = new WeakMap(), o = new WeakSet(), /**
  * 绑定组件事件监听器
  */
 lt = function() {
-  t(this, x).addEventListener(
+  t(this, A).addEventListener(
     "mousedown",
-    i(this, o, nt).bind(this),
+    a(this, o, ht).bind(this),
     {
-      signal: t(this, m).signal
+      signal: t(this, y).signal
     }
-  ), t(this, $).addEventListener("mousedown", i(this, o, ht).bind(this), {
-    signal: t(this, m).signal
-  }), t(this, A).addEventListener(
+  ), t(this, P).addEventListener("mousedown", a(this, o, nt).bind(this), {
+    signal: t(this, y).signal
+  }), t(this, R).addEventListener(
     "mousedown",
-    i(this, o, ct).bind(this),
+    a(this, o, ut).bind(this),
     {
-      signal: t(this, m).signal
+      signal: t(this, y).signal
     }
-  ), t(this, f).addEventListener(
+  ), t(this, g).addEventListener(
     "change",
-    i(this, o, ut).bind(this),
+    a(this, o, ct).bind(this),
     {
-      signal: t(this, m).signal
+      signal: t(this, y).signal
     }
-  ), t(this, f).addEventListener(
+  ), t(this, g).addEventListener(
     "blur",
-    i(this, o, vt).bind(this),
+    a(this, o, vt).bind(this),
     {
-      signal: t(this, m).signal
+      signal: t(this, y).signal
     }
   ), t(this, L) && t(this, L).addEventListener(
     "click",
-    i(this, o, pt).bind(this),
+    a(this, o, pt).bind(this),
     {
-      signal: t(this, m).signal
+      signal: t(this, y).signal
     }
   );
 }, /**
  * 处理饱和度和值的更新
  * @param {MouseEvent} e - 鼠标事件对象
  */
-nt = function(e) {
-  var c, b;
-  if ((c = t(this, v).saturationMove) == null || c.abort(), (b = t(this, v).hueMove) == null || b.abort(), this.disabled) return;
+ht = function(e) {
+  var u, b;
+  if ((u = t(this, v).saturationMove) == null || u.abort(), (b = t(this, v).hueMove) == null || b.abort(), this.disabled) return;
   e.preventDefault(), t(this, v).saturationMove = new AbortController(), t(this, s).isDragging = !0;
-  const a = (u) => {
-    const p = t(this, x).getBoundingClientRect(), V = Math.max(0, Math.min(u.clientX - p.left, p.width)), E = Math.max(0, Math.min(u.clientY - p.top, p.height)), C = V / p.width, Q = 1 - E / p.height;
-    t(this, s).saturation = C, t(this, s).value = Q, t(this, s).color.setValue({
+  const i = (c) => {
+    const p = t(this, A).getBoundingClientRect(), x = Math.max(0, Math.min(c.clientX - p.left, p.width)), E = Math.max(0, Math.min(c.clientY - p.top, p.height)), V = x / p.width, Q = 1 - E / p.height;
+    t(this, s).saturation = V, t(this, s).value = Q, t(this, s).color.setValue({
       h: t(this, s).hue,
-      s: C,
+      s: V,
       v: Q,
       a: t(this, s).alpha
-    }), this.value = t(this, s).color.toString(this["color-format"]), i(this, o, T).call(this), t(this, M).style.left = C * p.width + "px", t(this, M).style.top = (1 - Q) * p.height + "px";
+    }), this.value = t(this, s).color.toString(this["color-format"]), a(this, o, H).call(this), t(this, m).style.left = V * p.width + "px", t(this, m).style.top = (1 - Q) * p.height + "px";
   };
-  a(e), window.addEventListener("mousemove", a, {
+  i(e), window.addEventListener("mousemove", i, {
     signal: t(this, v).saturationMove.signal
   }), window.addEventListener(
     "mouseup",
     () => {
-      var u;
-      (u = t(this, v).saturationMove) == null || u.abort(), t(this, s).isDragging = !1;
+      var c;
+      (c = t(this, v).saturationMove) == null || c.abort(), t(this, s).isDragging = !1;
     },
     {
       signal: t(this, v).saturationMove.signal
@@ -300,26 +306,26 @@ nt = function(e) {
  * 处理色调的更新
  * @param {MouseEvent} e - 鼠标事件对象
  */
-ht = function(e) {
-  var c, b;
-  if ((c = t(this, v).hueMove) == null || c.abort(), (b = t(this, v).saturationMove) == null || b.abort(), this.disabled) return;
+nt = function(e) {
+  var u, b;
+  if ((u = t(this, v).hueMove) == null || u.abort(), (b = t(this, v).saturationMove) == null || b.abort(), this.disabled) return;
   e.preventDefault(), t(this, v).hueMove = new AbortController(), t(this, s).isDragging = !0;
-  const a = (u) => {
-    const p = t(this, $).getBoundingClientRect(), E = (1 - Math.max(0.01, Math.min(u.clientY - p.top, p.height)) / p.height) * 360;
+  const i = (c) => {
+    const p = t(this, P).getBoundingClientRect(), E = (1 - Math.max(0.01, Math.min(c.clientY - p.top, p.height)) / p.height) * 360;
     t(this, s).hue = E, t(this, s).color.setValue({
       h: E,
       s: t(this, s).saturation,
       v: t(this, s).value,
       a: t(this, s).alpha
-    }), this.value = t(this, s).color.toString(this["color-format"]), i(this, o, T).call(this), t(this, P).style.top = (1 - E / 360) * p.height + "px", t(this, I).call(this);
+    }), this.value = t(this, s).color.toString(this["color-format"]), a(this, o, H).call(this), t(this, k).style.top = (1 - E / 360) * p.height + "px", t(this, D).call(this);
   };
-  a(e), window.addEventListener("mousemove", a, {
+  i(e), window.addEventListener("mousemove", i, {
     signal: t(this, v).hueMove.signal
   }), window.addEventListener(
     "mouseup",
     () => {
-      var u;
-      (u = t(this, v).hueMove) == null || u.abort(), t(this, s).isDragging = !1;
+      var c;
+      (c = t(this, v).hueMove) == null || c.abort(), t(this, s).isDragging = !1;
     },
     {
       signal: t(this, v).hueMove.signal
@@ -329,20 +335,20 @@ ht = function(e) {
  * 处理透明度的更新
  * @param {MouseEvent} e - 鼠标事件对象
  */
-ct = function(e) {
-  var c, b, u;
-  if ((c = t(this, v).alphaMove) == null || c.abort(), (b = t(this, v).saturationMove) == null || b.abort(), (u = t(this, v).hueMove) == null || u.abort(), this.disabled) return;
+ut = function(e) {
+  var u, b, c;
+  if ((u = t(this, v).alphaMove) == null || u.abort(), (b = t(this, v).saturationMove) == null || b.abort(), (c = t(this, v).hueMove) == null || c.abort(), this.disabled) return;
   e.preventDefault(), t(this, v).alphaMove = new AbortController(), t(this, s).isDragging = !0;
-  const a = (p) => {
-    const V = t(this, A).getBoundingClientRect(), E = Math.max(0, Math.min(p.clientX - V.left, V.width)), C = Number((E / V.width).toFixed(2));
-    Math.abs(t(this, s).alpha - C) > 1e-3 && (t(this, s).alpha = C, t(this, s).color.setValue({
+  const i = (p) => {
+    const x = t(this, R).getBoundingClientRect(), E = Math.max(0, Math.min(p.clientX - x.left, x.width)), V = Number((E / x.width).toFixed(2));
+    Math.abs(t(this, s).alpha - V) > 1e-3 && (t(this, s).alpha = V, t(this, s).color.setValue({
       h: t(this, s).hue,
       s: t(this, s).saturation,
       v: t(this, s).value,
-      a: C
-    }), this.value = t(this, s).color.toString(this["color-format"]), i(this, o, T).call(this), t(this, q).style.left = C * V.width + "px");
+      a: V
+    }), this.value = t(this, s).color.toString(this["color-format"]), a(this, o, H).call(this), t(this, M).style.left = V * x.width + "px");
   };
-  a(e), window.addEventListener("mousemove", a, {
+  i(e), window.addEventListener("mousemove", i, {
     signal: t(this, v).alphaMove.signal
   }), window.addEventListener(
     "mouseup",
@@ -364,59 +370,59 @@ et = function() {
       t(this, s).color.toHsv(!0)
     );
     if (e) {
-      const a = parseInt(e.h), c = e.s, b = e.v, u = e.a ? parseFloat(e.a) : 1;
-      t(this, s).hue = a, t(this, s).saturation = c, t(this, s).value = b, t(this, s).alpha = u;
+      const i = parseInt(e.h), u = e.s, b = e.v, c = e.a ? parseFloat(e.a) : 1;
+      t(this, s).hue = i, t(this, s).saturation = u, t(this, s).value = b, t(this, s).alpha = c;
     }
     t(this, s).isFirstValueUpdate = !0;
   }
-  if (t(this, M) && t(this, x)) {
-    const e = t(this, s).saturation, a = t(this, s).value, c = t(this, x).getBoundingClientRect(), b = G.CSS.px2num(
+  if (t(this, m) && t(this, A)) {
+    const e = t(this, s).saturation, i = t(this, s).value, u = t(this, A).getBoundingClientRect(), b = G.CSS.px2num(
       this.style.getPropertyValue("--ea-color-picker-panel-svpanel-width")
-    ) || 280, u = G.CSS.px2num(
+    ) || 280, c = G.CSS.px2num(
       this.style.getPropertyValue("--ea-color-picker-panel-svpanel-height")
     ) || 180, p = Math.max(
       0,
-      Math.min(c.width, b),
+      Math.min(u.width, b),
       b
-    ), V = Math.max(
+    ), x = Math.max(
       0,
-      Math.min(c.height, u),
-      u
-    ), E = e * p, C = (1 - a) * V;
-    t(this, M).style.left = E + "px", t(this, M).style.top = C + "px";
+      Math.min(u.height, c),
+      c
+    ), E = e * p, V = (1 - i) * x;
+    t(this, m).style.left = E + "px", t(this, m).style.top = V + "px";
   }
-  if (t(this, P) && t(this, $)) {
-    const e = t(this, s).hue, a = t(this, $).getBoundingClientRect(), c = G.CSS.px2num(
+  if (t(this, k) && t(this, P)) {
+    const e = t(this, s).hue, i = t(this, P).getBoundingClientRect(), u = G.CSS.px2num(
       this.style.getPropertyValue(
         "--ea-color-picker-panel-hue-slider-height"
       )
-    ) || 180, b = Math.max(0, Math.min(a.height, c), c), u = (1 - e / 360) * b;
-    t(this, P).style.top = u + "px";
+    ) || 180, b = Math.max(0, Math.min(i.height, u), u), c = (1 - e / 360) * b;
+    t(this, k).style.top = c + "px";
   }
-  if (t(this, q) && t(this, A)) {
-    const e = t(this, s).alpha, a = t(this, A).getBoundingClientRect(), c = G.CSS.px2num(
+  if (t(this, M) && t(this, R)) {
+    const e = t(this, s).alpha, i = t(this, R).getBoundingClientRect(), u = G.CSS.px2num(
       this.style.getPropertyValue(
         "--ea-color-picker-panel-alpha-slider-width"
       )
-    ) || 280, b = Math.max(0, Math.min(a.width, c), c), u = e * b;
-    t(this, q).style.left = u + "px";
+    ) || 280, b = Math.max(0, Math.min(i.width, u), u), c = e * b;
+    t(this, M).style.left = c + "px";
   }
-}, I = new WeakMap(), /**
+}, D = new WeakMap(), /**
  * 处理颜色输入框变化事件
  * @param {Event} e - 事件对象
  */
-ut = function(e) {
-  const a = e.target.value;
+ct = function(e) {
+  const i = e.target.value;
   try {
-    const c = new H(a);
-    this.value = c.toString(this["color-format"]), i(this, o, T).call(this);
+    const u = new F(i);
+    this.value = u.toString(this["color-format"]), a(this, o, H).call(this);
   } catch {
-    t(this, f).value = this.value;
+    t(this, g).value = this.value;
   }
 }, /**
  * 触发颜色变化事件
  */
-T = function() {
+H = function() {
   this.dispatchEvent(
     new CustomEvent("change", {
       detail: {
@@ -427,7 +433,7 @@ T = function() {
       composed: !0
     })
   ), this.dispatchEvent(
-    new Pt({ value: this.value })
+    new Rt({ value: this.value })
   );
 }, /**
  * 渲染预设颜色列表
@@ -436,11 +442,11 @@ T = function() {
 dt = function(e) {
   !e || e.length === 0 || (t(this, L).innerHTML = this.html(
     e.map(
-      (a) => `
+      (i) => `
           <div class="${this.ns.e("predefine-color")}" 
             part="predefine-color" 
-            style="background-color: ${a}"
-            data-color="${a}"
+            style="background-color: ${i}"
+            data-color="${i}"
           ></div>
         `
     ).join("")
@@ -451,47 +457,47 @@ dt = function(e) {
  */
 pt = function(e) {
   if (this.disabled) return;
-  const a = e.target.closest(this.ns.ce("predefine-color"));
-  if (!a) return;
-  const c = a.getAttribute("data-color");
-  c && i(this, o, st).call(this, c);
+  const i = e.target.closest(this.ns.ce("predefine-color"));
+  if (!i) return;
+  const u = i.getAttribute("data-color");
+  u && a(this, o, st).call(this, u);
 }, /**
  * 根据颜色值更新所有相关状态
  * @param {string} colorValue - 颜色值字符串
  */
 st = function(e) {
-  i(this, o, Z).call(this), this.value = e, t(this, s).color.setValue(e);
-  const a = t(this, s).color.hsvStrToHsvObject(
+  a(this, o, Z).call(this), this.value = e, t(this, s).color.setValue(e);
+  const i = t(this, s).color.hsvStrToHsvObject(
     t(this, s).color.toHsv(!0)
   );
-  if (a) {
-    const c = parseInt(a.h), b = a.s, u = a.v, p = a.a ? parseFloat(a.a) : 1;
-    t(this, s).hue = c, t(this, s).saturation = b, t(this, s).value = u, t(this, s).alpha = p;
+  if (i) {
+    const u = parseInt(i.h), b = i.s, c = i.v, p = i.a ? parseFloat(i.a) : 1;
+    t(this, s).hue = u, t(this, s).saturation = b, t(this, s).value = c, t(this, s).alpha = p;
   }
-  i(this, o, et).call(this), t(this, I).call(this), i(this, o, T).call(this);
+  a(this, o, et).call(this), t(this, D).call(this), a(this, o, H).call(this);
 }, /**
  * 更新文字展示模式
  */
 it = function() {
-  !t(this, f) || !t(this, B) || (i(this, o, Z).call(this), this.updateContainerClasslist());
+  !t(this, g) || !t(this, B) || (a(this, o, Z).call(this), this.updateContainerClasslist());
 }, /**
  * 更新颜色输入框的值
  */
 Z = function() {
-  this.clearable && t(this, f) ? t(this, f).setAttribute("value", this.value) : !this.clearable && t(this, B) && (t(this, B).textContent = this.value);
+  this.clearable && t(this, g) ? t(this, g).setAttribute("value", this.value) : !this.clearable && t(this, B) && (t(this, B).textContent = this.value);
 }, /**
  * 处理颜色输入框blur事件
  * @param {FocusEvent} e - 焦点事件对象
  */
 vt = function(e) {
-  if (!t(this, f)) return;
-  const a = t(this, f).getAttribute("value") || "";
-  if (!a) {
+  if (!t(this, g)) return;
+  const i = t(this, g).getAttribute("value") || "";
+  if (!i) {
     this.value = "", t(this, s).lastValidValue = "";
     return;
   }
-  i(this, o, bt).call(this, a) ? (t(this, s).lastValidValue = a, i(this, o, st).call(this, a)) : (t(this, f).setAttribute("value", t(this, s).lastValidValue || ""), this.dispatchEvent(
-    new qt({ value: a })
+  a(this, o, bt).call(this, i) ? (t(this, s).lastValidValue = i, a(this, o, st).call(this, i)) : (t(this, g).setAttribute("value", t(this, s).lastValidValue || ""), this.dispatchEvent(
+    new qt({ value: i })
   ));
 }, /**
  * 验证颜色格式是否合法
@@ -499,7 +505,7 @@ vt = function(e) {
  * @returns {boolean} 是否合法
  */
 bt = function(e) {
-  return H.isValidColor(e);
+  return F.isValidColor(e);
 };
 customElements.get("ea-color-picker-panel") || customElements.define("ea-color-picker-panel", Lt);
 class Bt extends Event {
@@ -507,37 +513,37 @@ class Bt extends Event {
     super("ea-clear", { bubbles: !0, composed: !0 });
   }
 }
-var k, w, F, K, R, U, S, X, Y, _, y, g, N, r, gt, ft, mt, wt, yt, Ct, at, O, z, j, St, Vt;
-class Dt extends Mt {
+var $, w, I, K, q, U, C, X, Y, _, S, f, N, r, ft, gt, mt, yt, wt, Ct, at, O, z, j, St, Vt;
+class Dt extends kt {
   constructor() {
     super();
     l(this, r);
     /** @type {HTMLDivElement} */
-    l(this, k);
+    l(this, $);
     /** @type {import("@/common/ea-popper").EaPopper} */
     l(this, w);
     /** @type {HTMLDivElement} */
-    l(this, F);
+    l(this, I);
     /** @type {HTMLDivElement} */
     l(this, K);
     /** @type {HTMLDivElement} */
-    l(this, R);
+    l(this, q);
     /** @type {import("@/components/ea-icon").EaIcon} */
     l(this, U);
-    /** @type {import("@/components/ea-color-picker-panel").EaColorPickerPanel} */
-    l(this, S);
+    /** @type {import("@/components/ea-color-picker/components/ea-color-picker-panel").EaColorPickerPanel} */
+    l(this, C);
     /** @type {HTMLLabelElement} */
     l(this, X);
     /** @type {import("@/components/ea-button").EaButton} */
     l(this, Y);
     /** @type {import("@/components/ea-button").EaButton} */
     l(this, _);
-    l(this, y, new AbortController());
-    l(this, g, {
+    l(this, S, new AbortController());
+    l(this, f, {
       /** @type {boolean} 弹窗是否打开 */
       isOpen: !1,
       /** @type {import("@/utils/Color").Color} 当前颜色对象 */
-      color: new H(),
+      color: new F(),
       isPanelDefined: !1,
       /** @type {string} 打开面板前的颜色值 */
       previousValue: ""
@@ -546,7 +552,7 @@ class Dt extends Mt {
       /** @type {AbortController | null} 关闭弹窗的控制器 */
       close: null
     });
-    D(this, "state", this.properties({
+    T(this, "state", this.properties({
       label: {
         type: String,
         default: "",
@@ -558,7 +564,7 @@ class Dt extends Mt {
         type: String,
         default: "",
         observer: (e) => {
-          i(this, r, z).call(this), i(this, r, j).call(this, e), t(this, S).setAttribute("value", e);
+          a(this, r, z).call(this), a(this, r, j).call(this, e), t(this, C).setAttribute("value", e);
         }
       },
       disabled: {
@@ -572,7 +578,7 @@ class Dt extends Mt {
         type: Boolean,
         default: !1,
         observer: (e) => {
-          this.updateContainerClasslist();
+          this.updateContainerClasslist(), t(this, C).setAttribute("clearable", e);
         }
       },
       size: {
@@ -586,21 +592,14 @@ class Dt extends Mt {
         type: ["hsl", "hsv", "hex", "rgb"],
         default: "hex",
         observer: (e) => {
-          t(this, S).setAttribute("color-format", e);
+          t(this, C).setAttribute("color-format", e);
         }
       },
       "show-alpha": {
         type: Boolean,
         default: !1,
         observer: (e) => {
-          t(this, S).setAttribute("show-alpha", e);
-        }
-      },
-      clearable: {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          t(this, S).setAttribute("clearable", e);
+          t(this, C).setAttribute("show-alpha", e);
         }
       },
       tabindex: {
@@ -614,17 +613,17 @@ class Dt extends Mt {
         default: !1
       }
     }));
-    D(this, "propState", this.properties({
+    T(this, "propState", this.properties({
       predefine: {
         props: !0,
         type: Array,
         default: [],
         observer: async (e) => {
-          t(this, g).isPanelDefined || (await customElements.whenDefined("ea-color-picker-panel"), t(this, g).isPanelDefined = !0), t(this, S).predefine = e;
+          t(this, f).isPanelDefined || (await customElements.whenDefined("ea-color-picker-panel"), t(this, f).isPanelDefined = !0), t(this, C).predefine = e;
         }
       }
     }));
-    D(this, "popperState", this.properties({
+    T(this, "popperState", this.properties({
       placement: {
         type: [
           "top",
@@ -646,7 +645,7 @@ class Dt extends Mt {
         }
       }
     }));
-    this.stylesheet = kt, this.$render();
+    this.stylesheet = Mt, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -679,7 +678,7 @@ class Dt extends Mt {
               <div class="${e.e("inner")}" part="inner"></div>
             </div>
             <div class="${e.e("icon-wrapper")}" part="icon-wrapper">
-              <ea-icon class="${e.e("icon", "status")}" part="status-icon" icon="icon-cancel"></ea-icon>
+              <ea-icon class="${e.e("icon", "status")}" part="status-icon" name="xmark"></ea-icon>
             </div>
           </div>
           <ea-color-picker-panel class="${e.e("panel")}" part="panel">
@@ -690,11 +689,11 @@ class Dt extends Mt {
           </ea-color-picker-panel>
         </ea-popper>
       </div>
-    `), d(this, X, this.shadowRoot.querySelector(e.ce("form-label"))), d(this, k, this.shadowRoot.querySelector(e.cb())), d(this, w, this.shadowRoot.querySelector(e.ce("popper"))), d(this, F, this.shadowRoot.querySelector(e.ce("trigger"))), d(this, K, this.shadowRoot.querySelector(e.ce("outer"))), d(this, R, this.shadowRoot.querySelector(e.ce("inner"))), d(this, U, this.shadowRoot.querySelector(e.ce("icon", "status"))), d(this, S, this.shadowRoot.querySelector(e.ce("panel"))), d(this, Y, this.shadowRoot.querySelector(this.ns.ce("clear-btn"))), d(this, _, this.shadowRoot.querySelector(this.ns.ce("confirm-btn"))), this.updateContainerClasslist();
+    `), d(this, X, this.shadowRoot.querySelector(e.ce("form-label"))), d(this, $, this.shadowRoot.querySelector(e.cb())), d(this, w, this.shadowRoot.querySelector(e.ce("popper"))), d(this, I, this.shadowRoot.querySelector(e.ce("trigger"))), d(this, K, this.shadowRoot.querySelector(e.ce("outer"))), d(this, q, this.shadowRoot.querySelector(e.ce("inner"))), d(this, U, this.shadowRoot.querySelector(e.ce("icon", "status"))), d(this, C, this.shadowRoot.querySelector(e.ce("panel"))), d(this, Y, this.shadowRoot.querySelector(this.ns.ce("clear-btn"))), d(this, _, this.shadowRoot.querySelector(this.ns.ce("confirm-btn"))), this.updateContainerClasslist();
   }
   connectedCallback() {
     var e;
-    super.connectedCallback(), (e = t(this, y)) == null || e.abort(), d(this, y, new AbortController()), i(this, r, gt).call(this);
+    super.connectedCallback(), (e = t(this, S)) == null || e.abort(), d(this, S, new AbortController()), a(this, r, ft).call(this);
   }
   /**
    * 获取 classlist 列表
@@ -711,35 +710,35 @@ class Dt extends Mt {
         disabled: this.disabled
       }
     );
-    return t(this, k).className = e, e;
+    return t(this, $).className = e, e;
   }
   $beforeUnmounted() {
     var e;
-    (e = t(this, y)) == null || e.abort();
+    (e = t(this, S)) == null || e.abort();
   }
   /**
    * 手动显示颜色选择器面板
    */
   show() {
-    i(this, r, at).call(this);
+    a(this, r, at).call(this);
   }
   /**
    * 手动隐藏颜色选择器面板
    */
   hide() {
-    i(this, r, O).call(this);
+    a(this, r, O).call(this);
   }
   /**
    * 使颜色选择器获得焦点
    */
   focus() {
-    t(this, k) && t(this, k).focus();
+    t(this, $) && t(this, $).focus();
   }
   /**
    * 使颜色选择器失去焦点
    */
   blur() {
-    t(this, k) && t(this, k).blur();
+    t(this, $) && t(this, $).blur();
   }
   /**
    * 获取验证目标元素
@@ -773,59 +772,59 @@ class Dt extends Mt {
     return this.updateValidity(), this.internals.reportValidity();
   }
 }
-k = new WeakMap(), w = new WeakMap(), F = new WeakMap(), K = new WeakMap(), R = new WeakMap(), U = new WeakMap(), S = new WeakMap(), X = new WeakMap(), Y = new WeakMap(), _ = new WeakMap(), y = new WeakMap(), g = new WeakMap(), N = new WeakMap(), r = new WeakSet(), /**
+$ = new WeakMap(), w = new WeakMap(), I = new WeakMap(), K = new WeakMap(), q = new WeakMap(), U = new WeakMap(), C = new WeakMap(), X = new WeakMap(), Y = new WeakMap(), _ = new WeakMap(), S = new WeakMap(), f = new WeakMap(), N = new WeakMap(), r = new WeakSet(), /**
  * 绑定组件事件监听器
  */
-gt = function() {
-  !t(this, F) || !t(this, w) || (t(this, F).addEventListener("click", i(this, r, ft).bind(this), {
-    signal: t(this, y).signal
-  }), t(this, w).addEventListener("show", i(this, r, mt).bind(this), {
-    signal: t(this, y).signal
-  }), t(this, w).addEventListener("hide", i(this, r, wt).bind(this), {
-    signal: t(this, y).signal
-  }), t(this, S).addEventListener("change", i(this, r, yt).bind(this), {
-    signal: t(this, y).signal
-  }), t(this, Y).addEventListener("click", i(this, r, St).bind(this), {
-    signal: t(this, y).signal
+ft = function() {
+  !t(this, I) || !t(this, w) || (t(this, I).addEventListener("click", a(this, r, gt).bind(this), {
+    signal: t(this, S).signal
+  }), t(this, w).addEventListener("show", a(this, r, mt).bind(this), {
+    signal: t(this, S).signal
+  }), t(this, w).addEventListener("hide", a(this, r, yt).bind(this), {
+    signal: t(this, S).signal
+  }), t(this, C).addEventListener("change", a(this, r, wt).bind(this), {
+    signal: t(this, S).signal
+  }), t(this, Y).addEventListener("click", a(this, r, St).bind(this), {
+    signal: t(this, S).signal
   }), t(this, _).addEventListener(
     "click",
-    i(this, r, Vt).bind(this),
+    a(this, r, Vt).bind(this),
     {
-      signal: t(this, y).signal
+      signal: t(this, S).signal
     }
   ));
 }, /**
  * 处理触发器点击事件
  * @param {MouseEvent} e - 鼠标事件对象
  */
-ft = function(e) {
-  var a;
-  this.disabled || ((a = t(this, N).close) == null || a.abort(), t(this, N).close = new AbortController(), t(this, g).previousValue = this.value, i(this, r, at).call(this), document.addEventListener("click", i(this, r, Ct).bind(this), {
+gt = function(e) {
+  var i;
+  this.disabled || ((i = t(this, N).close) == null || i.abort(), t(this, N).close = new AbortController(), t(this, f).previousValue = this.value, a(this, r, at).call(this), document.addEventListener("click", a(this, r, Ct).bind(this), {
     signal: t(this, N).close.signal
   }));
 }, /**
  * 处理弹窗显示事件
  */
 mt = function() {
-  t(this, g).isOpen = !0, this.updateContainerClasslist();
+  t(this, f).isOpen = !0, this.updateContainerClasslist();
 }, /**
  * 处理弹窗隐藏事件
  */
-wt = function() {
-  t(this, g).isOpen = !1, this.updateContainerClasslist(), t(this, g).previousValue !== void 0 && t(this, g).previousValue !== this.value && (this.value = t(this, g).previousValue, i(this, r, z).call(this), i(this, r, j).call(this));
+yt = function() {
+  t(this, f).isOpen = !1, this.updateContainerClasslist(), t(this, f).previousValue !== void 0 && t(this, f).previousValue !== this.value && (this.value = t(this, f).previousValue, a(this, r, z).call(this), a(this, r, j).call(this));
 }, /**
  * 处理面板颜色变化事件
  * @param {CustomEvent} e - 自定义事件对象
  */
-yt = function(e) {
-  const { value: a } = e.detail;
-  this.value = a, i(this, r, z).call(this), i(this, r, j).call(this);
+wt = function(e) {
+  const { value: i } = e.detail;
+  this.value = i, a(this, r, z).call(this), a(this, r, j).call(this);
 }, /**
  * 处理文档点击事件（用于关闭弹窗）
  * @param {MouseEvent} e - 鼠标事件对象
  */
 Ct = function(e) {
-  t(this, g).isOpen && (!this.contains(e.target) || e.target !== this) && i(this, r, O).call(this);
+  t(this, f).isOpen && (!this.contains(e.target) || e.target !== this) && a(this, r, O).call(this);
 }, /**
  * 显示颜色选择器弹窗
  */
@@ -840,22 +839,22 @@ O = function() {
  * 更新触发元素的背景颜色
  */
 z = function() {
-  if (t(this, R)) {
+  if (t(this, q)) {
     if (!this.value) {
-      t(this, R).style.setProperty(
+      t(this, q).style.setProperty(
         "--ea-color-picker-inner-background-color",
         "transparent"
       );
       return;
     }
     try {
-      const e = new H(this.value);
-      t(this, R).style.setProperty(
+      const e = new F(this.value);
+      t(this, q).style.setProperty(
         "--ea-color-picker-inner-background-color",
         e.toRgb(!0)
       );
     } catch {
-      t(this, R).style.setProperty(
+      t(this, q).style.setProperty(
         "--ea-color-picker-inner-background-color",
         "transparent"
       );
@@ -866,20 +865,21 @@ z = function() {
  * @param {string} colorValue - 颜色值
  */
 j = function(e = this.value) {
-  t(this, U) && t(this, U).setAttribute(
-    "icon",
-    e ? "icon-angle-down" : "icon-cancel"
-  );
+  t(this, U) && t(this, U).setAttribute("name", e ? "angle-down" : "xmark");
 }, /**
  * 处理清除按钮点击事件
  */
 St = function() {
-  this.value = "", i(this, r, z).call(this), i(this, r, j).call(this), this.emit("change", { detail: { value: "" } }), this.dispatchEvent(new Bt()), t(this, g).previousValue = "", i(this, r, O).call(this);
+  var e, i;
+  this.value = "", t(this, C).style.setProperty(
+    "--ea-color-picker-panel-background-color",
+    "#ff0000"
+  ), (i = (e = t(this, C)).resetCursorPosition) == null || i.call(e), a(this, r, z).call(this), a(this, r, j).call(this), this.emit("change", { detail: { value: "" } }), this.dispatchEvent(new Bt()), t(this, f).previousValue = "", a(this, r, O).call(this);
 }, /**
  * 处理确认按钮点击事件
  */
 Vt = function() {
-  t(this, g).previousValue = this.value, i(this, r, O).call(this);
+  t(this, f).previousValue = this.value, a(this, r, O).call(this);
 };
 customElements.get("ea-color-picker") || customElements.define("ea-color-picker", Dt);
 export {