easy-component-ui 3.0.12 → 3.0.13

package/dist/components/ea-card.js

@@ -1,23 +1,29 @@
-var p = Object.defineProperty;
-var h = (e) => {
+var b = Object.defineProperty;
+var y = (e) => {
   throw TypeError(e);
 };
-var f = (e, s, t) => s in e ? p(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var l = (e, s, t) => f(e, typeof s != "symbol" ? s + "" : s, t), u = (e, s, t) => s.has(e) || h("Cannot " + t);
-var d = (e, s, t) => (u(e, s, "read from private field"), t ? t.call(e) : s.get(e)), i = (e, s, t) => s.has(e) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), n = (e, s, t, c) => (u(e, s, "write to private field"), c ? c.call(e, t) : s.set(e, t), t);
-import { B as m } from "./Base.js";
-import { s as v } from "../css/ea-card.style.js";
-var a, r, o;
-class w extends m {
+var g = (e, s, t) => s in e ? b(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var f = (e, s, t) => g(e, typeof s != "symbol" ? s + "" : s, t), v = (e, s, t) => s.has(e) || y("Cannot " + t);
+var a = (e, s, t) => (v(e, s, "read from private field"), t ? t.call(e) : s.get(e)), o = (e, s, t) => s.has(e) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), h = (e, s, t, l) => (v(e, s, "write to private field"), l ? l.call(e, t) : s.set(e, t), t);
+import { B as E } from "./Base.js";
+import { s as _ } from "../css/ea-card.style.js";
+var c, i, n, r, d, p;
+class S extends E {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, a);
+    o(this, c);
     /** @type {HTMLElement} */
-    i(this, r);
+    o(this, i);
     /** @type {HTMLElement} */
-    i(this, o);
-    l(this, "state", this.properties({
+    o(this, n);
+    /** @type {AbortController} */
+    o(this, r, null);
+    o(this, d, {
+      isHeaderEmpty: !0,
+      isFooterEmpty: !0
+    });
+    f(this, "state", this.properties({
       shadow: {
         type: ["always", "never", "hover"],
         default: "always",
@@ -29,18 +35,31 @@ class w extends m {
         type: String,
         default: "",
         observer: (t) => {
-          d(this, r).innerText = t;
+          a(this, i).innerText = t;
         }
       },
       footer: {
         type: String,
         default: "",
         observer: (t) => {
-          d(this, o).innerText = t;
+          a(this, n).innerText = t;
         }
       }
     }));
-    this.stylesheet = v, this.$render();
+    /**
+     * 更新空状态
+     * @param {Event} e 事件
+     */
+    o(this, p, (t) => {
+      const l = t.target;
+      let m = l.getAttribute("name") || "";
+      m = m.split("").map(
+        (u, C) => C === 0 ? u.toUpperCase() : u.toLowerCase()
+      ).join("");
+      const w = l.assignedElements().length === 0;
+      a(this, d)[`is${m}Empty`] = w, this.updateContainerClasslist();
+    });
+    this.stylesheet = _, this.$render();
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "shadow", "header", "footer"];
@@ -50,10 +69,18 @@ class w extends m {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    const t = this.computedClasslist("ea-card", {
-      [`--${this.shadow}-shadow`]: this.shadow
-    });
-    return d(this, a).className = t, t;
+    const t = this.computedClasslist(
+      "ea-card",
+      {
+        [`--${this.shadow}-shadow`]: this.shadow
+      },
+      // 因为在 vue 下，某些场景会出现 css 的 ::slotted 选择器无效，因此这里使用 js 来更新空状态
+      {
+        "header-empty": a(this, d).isHeaderEmpty,
+        "footer-empty": a(this, d).isFooterEmpty
+      }
+    );
+    return a(this, c).className = t, t;
   }
   $render() {
     this.shadowRoot.innerHTML = `
@@ -68,18 +95,27 @@ class w extends m {
           <slot name="footer"></slot>
         </div>
       </div>
-    `, n(this, a, this.shadowRoot.querySelector(".ea-card")), n(this, r, this.shadowRoot.querySelector(
+    `, h(this, c, this.shadowRoot.querySelector(".ea-card")), h(this, i, this.shadowRoot.querySelector(
       ".ea-card__header > slot[name='header']"
-    )), n(this, o, this.shadowRoot.querySelector(
+    )), h(this, n, this.shadowRoot.querySelector(
       ".ea-card__footer > slot[name='footer']"
-    ));
+    )), this.updateContainerClasslist();
   }
   connectedCallback() {
-    super.connectedCallback();
+    var t;
+    super.connectedCallback(), (t = a(this, r)) == null || t.abort(), h(this, r, new AbortController()), a(this, i).addEventListener("slotchange", a(this, p), {
+      signal: a(this, r).signal
+    }), a(this, n).addEventListener("slotchange", a(this, p), {
+      signal: a(this, r).signal
+    });
+  }
+  $beforeUnmounted() {
+    var t;
+    (t = a(this, r)) == null || t.abort();
   }
 }
-a = new WeakMap(), r = new WeakMap(), o = new WeakMap();
-window.customElements.get("ea-card") || window.customElements.define("ea-card", w);
+c = new WeakMap(), i = new WeakMap(), n = new WeakMap(), r = new WeakMap(), d = new WeakMap(), p = new WeakMap();
+window.customElements.get("ea-card") || window.customElements.define("ea-card", S);
 export {
-  w as EaCard
+  S as EaCard
 };

package/dist/components/ea-carousel.js

@@ -299,10 +299,10 @@ class F extends N {
     this.shadowRoot.innerHTML = `
       <div class='ea-carousel' part='container'>
         <button class="ea-carousel__arrow arrow-left" part="arrow-left">
-          <ea-icon icon="icon-angle-left" part="arrow-left-icon"></ea-icon>
+          <ea-icon name="angle-left" part="arrow-left-icon"></ea-icon>
         </button>
         <button class="ea-carousel__arrow arrow-right" part="arrow-right">
-          <ea-icon icon="icon-angle-right" part="arrow-right-icon"></ea-icon>
+          <ea-icon name="angle-right" part="arrow-right-icon"></ea-icon>
         </button>
         <ul class="ea-carousel__content" part="content">
             <slot name="clone-last"></slot>

package/dist/components/ea-collapse.js

@@ -4,7 +4,7 @@ var x = (s) => {
 };
 var N = (s, i, t) => i in s ? k(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
 var p = (s, i, t) => N(s, typeof i != "symbol" ? i + "" : i, t), R = (s, i, t) => i.has(s) || x("Cannot " + t);
-var e = (s, i, t) => (R(s, i, "read from private field"), t ? t.call(s) : i.get(s)), a = (s, i, t) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), r = (s, i, t, o) => (R(s, i, "write to private field"), o ? o.call(s, t) : i.set(s, t), t);
+var e = (s, i, t) => (R(s, i, "read from private field"), t ? t.call(s) : i.get(s)), o = (s, i, t) => i.has(s) ? x("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), r = (s, i, t, a) => (R(s, i, "write to private field"), a ? a.call(s, t) : i.set(s, t), t);
 import { B as $ } from "./Base.js";
 import { s as B } from "../css/ea-collapse.style.js";
 import { s as L } from "../css/ea-collapse-item.style.js";
@@ -13,9 +13,9 @@ class P extends $ {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    a(this, g);
+    o(this, g);
     /** @type {AbortController} */
-    a(this, c);
+    o(this, c);
     p(this, "state", this.properties({
       accordion: {
         type: Boolean,
@@ -38,8 +38,8 @@ class P extends $ {
         type: ["left", "right"],
         default: "right",
         observer: (t) => {
-          this.querySelectorAll("ea-collapse-item").forEach((o) => {
-            o["expand-icon-position"] = t;
+          this.querySelectorAll("ea-collapse-item").forEach((a) => {
+            a["expand-icon-position"] = t;
           });
         }
       }
@@ -58,7 +58,7 @@ class P extends $ {
      * 更新手风琴模式下的折叠状态
      * @param {string} [activeName]
      */
-    a(this, d, (t = this.active) => {
+    o(this, d, (t = this.active) => {
       [...this.querySelectorAll("ea-collapse-item")].forEach(
         (l) => l.toggleAttribute("active", l.getAttribute("name") === t)
       );
@@ -67,7 +67,7 @@ class P extends $ {
      * 更新普通模式下的折叠状态
      * @param {string[]} [activeNames]
      */
-    a(this, y, (t = this.active) => {
+    o(this, y, (t = this.active) => {
       [...this.querySelectorAll("ea-collapse-item")].forEach(
         (l) => l.toggleAttribute(
           "active",
@@ -79,20 +79,20 @@ class P extends $ {
      * 折叠项点击事件处理
      * @param {CustomEvent} e
      */
-    a(this, C, async (t) => {
+    o(this, C, async (t) => {
       t.preventDefault(), t.stopImmediatePropagation(), t.stopPropagation();
-      const { name: o, el: l } = t.detail;
+      const { name: a, el: l } = t.detail;
       if (typeof this.beforeCollapse == "function")
         try {
-          if (!await this.beforeCollapse({ name: o, el: l })) return;
+          if (!await this.beforeCollapse({ name: a, el: l })) return;
         } catch {
           return;
         }
       if (this.accordion)
-        e(this, d).call(this, o), this.active = o;
+        e(this, d).call(this, a), this.active = a;
       else
         try {
-          this.active.includes(o) ? (this.active = this.active.filter((q) => q !== o), l.toggleAttribute("active", !1)) : (this.active = [...this.active, o], l.toggleAttribute("active", this.active.includes(o)));
+          this.active.includes(a) ? (this.active = this.active.filter((q) => q !== a), l.toggleAttribute("active", !1)) : (this.active = [...this.active, a], l.toggleAttribute("active", this.active.includes(a)));
         } catch {
           console.error(
             `${this.tagName}: When 'accordion' is false, 'active' should be an Array type.`,
@@ -101,7 +101,7 @@ class P extends $ {
         }
       this.emit("change", {
         detail: {
-          name: o,
+          name: a,
           target: l,
           active: this.active
         },
@@ -111,9 +111,9 @@ class P extends $ {
     /**
      * 初始化折叠项的唯一标识及折叠状态
      */
-    a(this, w, () => {
-      [...this.querySelectorAll("ea-collapse-item")].forEach((o, l) => {
-        o.getAttribute("name") || o.setAttribute("name", l);
+    o(this, w, () => {
+      [...this.querySelectorAll("ea-collapse-item")].forEach((a, l) => {
+        a.getAttribute("name") || a.setAttribute("name", l);
       });
     });
     /**
@@ -153,21 +153,21 @@ class H extends $ {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    a(this, h);
+    o(this, h);
     /** @type {HTMLElement} */
-    a(this, u);
+    o(this, u);
     /** @type {HTMLElement} */
-    a(this, A);
+    o(this, A);
     /** @type {HTMLSlotElement} */
-    a(this, m);
+    o(this, m);
     /** @type {HTMLElement} */
-    a(this, S);
+    o(this, S);
     /** @type {HTMLElement} */
-    a(this, b);
+    o(this, b);
     /** @type {HTMLSlotElement} */
-    a(this, v);
+    o(this, v);
     /** @type {AbortController} */
-    a(this, n);
+    o(this, n);
     p(this, "state", this.properties({
       title: {
         type: String,
@@ -208,7 +208,7 @@ class H extends $ {
      * 更新折叠面板高度
      * @param {boolean} isActive
      */
-    a(this, f, (t = this.active) => {
+    o(this, f, (t = this.active) => {
       queueMicrotask(() => {
         e(this, h).style.setProperty(
           "--ea-collapse-item-content-height",
@@ -220,7 +220,7 @@ class H extends $ {
      * 折叠面板 展开/收起 事件处理
      * @param {Event} e
      */
-    a(this, _, (t) => {
+    o(this, _, (t) => {
       t.preventDefault(), t.stopImmediatePropagation(), !this.disabled && this.emit("collapse-item-click", {
         detail: {
           name: this.name,
@@ -233,7 +233,7 @@ class H extends $ {
     /**
      * 插槽变化事件处理
      */
-    a(this, E, () => {
+    o(this, E, () => {
       e(this, h).style.setProperty(
         "--ea-collapse-item-content-height",
         "auto"
@@ -276,7 +276,7 @@ class H extends $ {
           </span>
           <span class="ea-collapse-item__indicator" part="indicator">
             <slot name="icon">
-              <ea-icon class="default-expand-icon" icon="icon-angle-down" part="icon"></ea-icon>
+              <ea-icon class="default-expand-icon" name="angle-down" part="icon"></ea-icon>
             </slot>
           </span>
         </div>

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

@@ -1,14 +1,14 @@
-var Et = Object.defineProperty;
+var xt = Object.defineProperty;
 var ot = (h) => {
   throw TypeError(h);
 };
-var xt = (h, n, e) => n in h ? Et(h, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[n] = e;
-var T = (h, n, e) => xt(h, typeof n != "symbol" ? n + "" : n, e), tt = (h, n, e) => n.has(h) || ot("Cannot " + e);
+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 Mt } from "../core/FormBase.js";
+import { F as kt } from "../core/FormBase.js";
 import { n as rt } from "./ea-calendar2.js";
 import { C as F } from "../utils/Color.js";
-import { s as kt } from "../css/ea-color-picker.style.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 Pt } from "../css/ea-color-picker-panel.style.js";
@@ -33,7 +33,7 @@ class qt extends Event {
     }), this.detail = n;
   }
 }
-var W, A, m, P, M, R, J, k, L, g, B, y, v, s, o, lt, ht, nt, ct, et, D, ut, H, 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();
@@ -47,13 +47,13 @@ class Lt extends At {
     /** @type {HTMLDivElement} */
     l(this, P);
     /** @type {HTMLDivElement} */
-    l(this, M);
+    l(this, k);
     /** @type {HTMLDivElement} */
     l(this, R);
     /** @type {HTMLDivElement} */
     l(this, J);
     /** @type {HTMLDivElement} */
-    l(this, k);
+    l(this, M);
     /** @type {HTMLDivElement} */
     l(this, L);
     /** @type {HTMLInputElement} */
@@ -215,9 +215,9 @@ class Lt extends At {
       </div>
     `), 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, P, this.shadowRoot.querySelector(e.ce("hue-slider"))), d(this, M, this.shadowRoot.querySelector(e.ce("hue-slider-thumb"))), d(this, R, 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, k, 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, 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);
   }
@@ -233,10 +233,10 @@ class Lt extends At {
    * 重置光标和滑块位置到初始状态
    */
   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, M) && (t(this, M).style.top = ""), t(this, k) && (t(this, k).style.left = ""), t(this, D).call(this);
+    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(), A = new WeakMap(), m = new WeakMap(), P = new WeakMap(), M = new WeakMap(), R = new WeakMap(), J = new WeakMap(), k = new WeakMap(), L = new WeakMap(), g = new WeakMap(), B = new WeakMap(), y = 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() {
@@ -250,13 +250,13 @@ lt = function() {
     signal: t(this, y).signal
   }), t(this, R).addEventListener(
     "mousedown",
-    a(this, o, ct).bind(this),
+    a(this, o, ut).bind(this),
     {
       signal: t(this, y).signal
     }
   ), t(this, g).addEventListener(
     "change",
-    a(this, o, ut).bind(this),
+    a(this, o, ct).bind(this),
     {
       signal: t(this, y).signal
     }
@@ -278,11 +278,11 @@ lt = function() {
  * @param {MouseEvent} e - 鼠标事件对象
  */
 ht = 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;
+  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 i = (u) => {
-    const p = t(this, A).getBoundingClientRect(), E = Math.max(0, Math.min(u.clientX - p.left, p.width)), x = Math.max(0, Math.min(u.clientY - p.top, p.height)), V = E / p.width, Q = 1 - x / p.height;
+  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: V,
@@ -295,8 +295,8 @@ ht = function(e) {
   }), 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
@@ -307,25 +307,25 @@ ht = function(e) {
  * @param {MouseEvent} e - 鼠标事件对象
  */
 nt = 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;
+  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 i = (u) => {
-    const p = t(this, P).getBoundingClientRect(), x = (1 - Math.max(0.01, Math.min(u.clientY - p.top, p.height)) / p.height) * 360;
-    t(this, s).hue = x, t(this, s).color.setValue({
-      h: x,
+  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"]), a(this, o, H).call(this), t(this, M).style.top = (1 - x / 360) * p.height + "px", t(this, D).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);
   };
   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
@@ -335,18 +335,18 @@ nt = 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 i = (p) => {
-    const E = t(this, R).getBoundingClientRect(), x = Math.max(0, Math.min(p.clientX - E.left, E.width)), V = Number((x / E.width).toFixed(2));
+    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: V
-    }), this.value = t(this, s).color.toString(this["color-format"]), a(this, o, H).call(this), t(this, k).style.left = V * E.width + "px");
+    }), 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");
   };
   i(e), window.addEventListener("mousemove", i, {
     signal: t(this, v).alphaMove.signal
@@ -370,52 +370,52 @@ et = function() {
       t(this, s).color.toHsv(!0)
     );
     if (e) {
-      const i = parseInt(e.h), c = e.s, b = e.v, u = e.a ? parseFloat(e.a) : 1;
-      t(this, s).hue = i, 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, A)) {
-    const e = t(this, s).saturation, i = t(this, s).value, c = t(this, A).getBoundingClientRect(), b = G.CSS.px2num(
+    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
-    ), E = Math.max(
+    ), x = Math.max(
       0,
-      Math.min(c.height, u),
-      u
-    ), x = e * p, V = (1 - i) * E;
-    t(this, m).style.left = x + "px", t(this, m).style.top = V + "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, M) && t(this, P)) {
-    const e = t(this, s).hue, i = t(this, P).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(i.height, c), c), u = (1 - e / 360) * b;
-    t(this, M).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, k) && t(this, R)) {
-    const e = t(this, s).alpha, i = t(this, R).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(i.width, c), c), u = e * b;
-    t(this, k).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";
   }
 }, D = new WeakMap(), /**
  * 处理颜色输入框变化事件
  * @param {Event} e - 事件对象
  */
-ut = function(e) {
+ct = function(e) {
   const i = e.target.value;
   try {
-    const c = new F(i);
-    this.value = c.toString(this["color-format"]), a(this, o, H).call(this);
+    const u = new F(i);
+    this.value = u.toString(this["color-format"]), a(this, o, H).call(this);
   } catch {
     t(this, g).value = this.value;
   }
@@ -459,8 +459,8 @@ pt = function(e) {
   if (this.disabled) return;
   const i = e.target.closest(this.ns.ce("predefine-color"));
   if (!i) return;
-  const c = i.getAttribute("data-color");
-  c && a(this, o, st).call(this, c);
+  const u = i.getAttribute("data-color");
+  u && a(this, o, st).call(this, u);
 }, /**
  * 根据颜色值更新所有相关状态
  * @param {string} colorValue - 颜色值字符串
@@ -471,8 +471,8 @@ st = function(e) {
     t(this, s).color.toHsv(!0)
   );
   if (i) {
-    const c = parseInt(i.h), b = i.s, u = i.v, p = i.a ? parseFloat(i.a) : 1;
-    t(this, s).hue = c, t(this, s).saturation = b, t(this, s).value = u, t(this, s).alpha = p;
+    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;
   }
   a(this, o, et).call(this), t(this, D).call(this), a(this, o, H).call(this);
 }, /**
@@ -514,7 +514,7 @@ class Bt extends Event {
   }
 }
 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 Mt {
+class Dt extends kt {
   constructor() {
     super();
     l(this, r);
@@ -645,7 +645,7 @@ class Dt extends Mt {
         }
       }
     }));
-    this.stylesheet = kt, this.$render();
+    this.stylesheet = Mt, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -678,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">
@@ -865,10 +865,7 @@ 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");
 }, /**
  * 处理清除按钮点击事件
  */