easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-select.js

@@ -1,35 +1,35 @@
-var U = Object.defineProperty;
-var O = (a) => {
-  throw TypeError(a);
+var P = Object.defineProperty;
+var I = (r) => {
+  throw TypeError(r);
 };
-var W = (a, r, t) => r in a ? U(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
-var y = (a, r, t) => W(a, typeof r != "symbol" ? r + "" : r, t), I = (a, r, t) => r.has(a) || O("Cannot " + t);
-var e = (a, r, t) => (I(a, r, "read from private field"), t ? t.call(a) : r.get(a)), l = (a, r, t) => r.has(a) ? O("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), b = (a, r, t, s) => (I(a, r, "write to private field"), s ? s.call(a, t) : r.set(a, t), t);
-import { F as P } from "../core/FormBase.js";
+var W = (r, a, t) => a in r ? P(r, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[a] = t;
+var y = (r, a, t) => W(r, typeof a != "symbol" ? a + "" : a, t), O = (r, a, t) => a.has(r) || I("Cannot " + t);
+var e = (r, a, t) => (O(r, a, "read from private field"), t ? t.call(r) : a.get(r)), l = (r, a, t) => a.has(r) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(r) : a.set(r, t), v = (r, a, t, s) => (O(r, a, "write to private field"), s ? s.call(r, t) : a.set(r, t), t);
+import { F as G } from "../core/FormBase.js";
 import "./ea-input.js";
-import { s as G } from "../css/ea-select.style.js";
+import { s as K } from "../css/ea-select.style.js";
 import { E as N } from "../utils/Utils.js";
-import { E as K } from "../utils/Variables.js";
+import { E as Z } from "../utils/Variables.js";
 import { B as H } from "./Base.js";
-import { s as Z } from "../css/ea-option.style.js";
-import { s as j } from "../css/ea-option-gropu.style.js";
+import { s as j } from "../css/ea-option.style.js";
+import { s as J } from "../css/ea-option-gropu.style.js";
 class z extends Event {
-  constructor(r) {
-    super("ea-visible-change", { bubbles: !0, composed: !0 }), this.detail = r;
+  constructor(a) {
+    super("ea-visible-change", { bubbles: !0, composed: !0 }), this.detail = a;
   }
 }
-class J extends Event {
-  constructor(r) {
-    super("ea-remove-tag", { bubbles: !0, composed: !0 }), this.detail = r;
+class Q extends Event {
+  constructor(a) {
+    super("ea-remove-tag", { bubbles: !0, composed: !0 }), this.detail = a;
   }
 }
-class Q extends Event {
+class X extends Event {
   constructor() {
     super("ea-clear", { bubbles: !0, composed: !0 });
   }
 }
-var E, o, A, k, q, S, f, n, m, L, B, T, F, M, D;
-class X extends P {
+var E, o, w, k, q, S, f, n, m, L, B, T, F, M, D;
+class Y extends G {
   constructor() {
     super();
     /** @type {HTMLElement} */
@@ -37,7 +37,7 @@ class X extends P {
     /** @type {HTMLElement} */
     l(this, o);
     /** @type {HTMLElement} */
-    l(this, A);
+    l(this, w);
     /** @type {HTMLElement} */
     l(this, k);
     /** @type {HTMLElement} */
@@ -96,7 +96,12 @@ class X extends P {
           var s;
           if ((s = e(this, n).inputClearAbortController) == null || s.abort(), this.updateContainerClasslist(), t) {
             const i = () => {
-              this.value = this.multiple ? [] : "", this.dispatchEvent(new Q());
+              const u = this.multiple ? [] : "";
+              this.value = u, this.emit("change", {
+                detail: { value: u },
+                bubbles: !0,
+                composed: !0
+              }), this.dispatchEvent(new X());
             };
             e(this, n).inputClearAbortController = new AbortController(), e(this, S).addEventListener("click", i, {
               signal: e(this, n).inputClearAbortController.signal
@@ -105,7 +110,7 @@ class X extends P {
         }
       },
       size: {
-        type: K,
+        type: Z,
         default: "",
         observer: (t) => {
           e(this, o).setAttribute("size", t), this.updateContainerClasslist();
@@ -117,10 +122,10 @@ class X extends P {
         observer: async (t) => {
           var h;
           (h = e(this, n).tagRemoveAbortController) == null || h.abort(), await customElements.whenDefined("ea-input");
-          const s = e(this, o).shadowRoot.querySelector(".ea-input__inner"), i = e(this, o).shadowRoot.querySelector(".ea-input__prefix"), d = e(this, o).shadowRoot.querySelector(
+          const s = e(this, o).shadowRoot.querySelector(".ea-input__inner"), i = e(this, o).shadowRoot.querySelector(".ea-input__prefix"), u = e(this, o).shadowRoot.querySelector(
             ".ea-input__original-wrapper"
           );
-          t ? i.appendChild(d) : s.insertBefore(d, i.nextSibling), this.updateContainerClasslist(), t && (e(this, n).tagRemoveAbortController = new AbortController(), e(this, A).addEventListener(
+          t ? i.appendChild(u) : s.insertBefore(u, i.nextSibling), this.updateContainerClasslist(), t && (e(this, n).tagRemoveAbortController = new AbortController(), e(this, w).addEventListener(
             "ea-remove",
             e(this, D),
             {
@@ -146,25 +151,25 @@ class X extends P {
         default: !1,
         observer: async (t) => {
           var g;
-          const s = (u) => {
-            const { value: c } = u.detail;
-            typeof c == "string" && this.querySelectorAll("ea-option").forEach((v) => {
-              v.style.display = v.innerText.includes(c) ? "block" : "none";
+          const s = (c) => {
+            const { value: d } = c.detail;
+            typeof d == "string" && this.querySelectorAll("ea-option").forEach((p) => {
+              p.style.display = p.innerText.includes(d) ? "block" : "none";
             });
-          }, i = (u) => {
-            var v;
-            const { key: c } = u;
-            c === "Backspace" && e(this, o).value === "" && (this.value = (v = this.value) == null ? void 0 : v.slice(0, this.value.length - 1));
+          }, i = (c) => {
+            var p;
+            const { key: d } = c;
+            d === "Backspace" && e(this, o).value === "" && (this.value = (p = this.value) == null ? void 0 : p.slice(0, this.value.length - 1));
           };
           (g = e(this, n).inputFilterAbortController) == null || g.abort(), e(this, o).toggleAttribute("readonly", !t), this.updateContainerClasslist(), await customElements.whenDefined("ea-input");
-          const d = e(this, o).shadowRoot.querySelector(".ea-input__inner"), h = e(this, o).shadowRoot.querySelector(".ea-input__prefix"), p = e(this, o).shadowRoot.querySelector(
+          const u = e(this, o).shadowRoot.querySelector(".ea-input__inner"), h = e(this, o).shadowRoot.querySelector(".ea-input__prefix"), b = e(this, o).shadowRoot.querySelector(
             ".ea-input__original-wrapper"
           );
           t && (e(this, n).inputFilterAbortController = new AbortController(), e(this, o).addEventListener("input", s, {
             signal: e(this, n).inputFilterAbortController.signal
-          })), this.multiple && t ? (h.appendChild(p), e(this, o).addEventListener("keydown", i, {
+          })), this.multiple && t ? (h.appendChild(b), e(this, o).addEventListener("keydown", i, {
             signal: e(this, n).inputFilterAbortController.signal
-          })) : d.insertBefore(p, h.nextSibling);
+          })) : u.insertBefore(b, h.nextSibling);
         }
       }
     }));
@@ -194,11 +199,7 @@ class X extends P {
           this.setValue(t), this.multiple ? (this.filterable ? e(this, o).focus() : e(this, o).value = (t == null ? void 0 : t.length) > 0 ? " " : "", e(this, T).call(this, t || [])) : this.filterable ? (e(this, o).value = "", e(this, o).setAttribute(
             "placeholder",
             (t == null ? void 0 : t.length) > 0 ? t : this.placeholder
-          ), e(this, F).call(this, "")) : e(this, o).value = e(this, L).call(this, t), e(this, B).call(this, t), this.emit("change", {
-            detail: { value: t },
-            bubbles: !0,
-            composed: !0
-          }), this.updateContainerClasslist(), t || this.querySelectorAll("ea-option").forEach((s) => {
+          ), e(this, F).call(this, "")) : e(this, o).value = e(this, L).call(this, t), e(this, B).call(this, t), this.updateContainerClasslist(), t || this.querySelectorAll("ea-option").forEach((s) => {
             s.toggleAttribute("selected", !1);
           });
         }
@@ -235,7 +236,7 @@ class X extends P {
      */
     l(this, T, (t) => {
       let s = "";
-      const i = (h, p, g) => N.EaElement.h(
+      const i = (h, b, g) => N.EaElement.h(
         "ea-tag",
         "ea-select__tag",
         {
@@ -244,20 +245,20 @@ class X extends P {
           type: "info",
           "data-value": h ? g : null
         },
-        p
-      ), d = (h) => {
-        let p = "";
+        b
+      ), u = (h) => {
+        let b = "";
         return h.forEach((g) => {
-          const u = this.querySelector(`ea-option[value="${g}"]`);
-          u && (u.toggleAttribute("selected", !0), p += i(!0, u.innerText, u.value));
-        }), p;
+          const c = this.querySelector(`ea-option[value="${g}"]`);
+          c && (c.toggleAttribute("selected", !0), b += i(!0, c.innerText, c.value));
+        }), b;
       };
-      if (e(this, A).innerHTML = "", this["collapse-tags"] && Array.isArray(t)) {
-        const h = Math.max(0, Number(this["max-collapse-tags"]) || 1), p = Math.max(0, t.length - h);
-        h > 0 && (s += d(t.slice(0, h))), p > 0 && (s += i(!1, `+${p}`, null));
+      if (e(this, w).innerHTML = "", this["collapse-tags"] && Array.isArray(t)) {
+        const h = Math.max(0, Number(this["max-collapse-tags"]) || 1), b = Math.max(0, t.length - h);
+        h > 0 && (s += u(t.slice(0, h))), b > 0 && (s += i(!1, `+${b}`, null));
       } else
-        s += d(t);
-      e(this, A).innerHTML = s;
+        s += u(t);
+      e(this, w).innerHTML = s;
     });
     /**
      * 处理过滤选项样式
@@ -273,24 +274,30 @@ class X extends P {
      * @param {Event} e
      */
     l(this, M, async (t) => {
-      var p, g;
+      var b, g;
       const s = t.target === e(this, o).shadowRoot ? e(this, o) : t.target;
-      if ((p = s.classList) != null && p.contains("ea-select__clear-icon") || s.closest("ea-tag"))
+      if ((b = e(this, n).closeAbortController) == null || b.abort(), (g = s.classList) != null && g.contains("ea-select__clear-icon") || s.closest("ea-tag"))
         return;
-      (g = e(this, n).closeAbortController) == null || g.abort(), e(this, n).closeAbortController = new AbortController();
-      const i = (u) => {
-        const c = u.target.closest("ea-option");
-        c && (c.disabled || (this.multiple ? (Array.isArray(this.value) || (this.value = []), this.value.includes(c.value) ? this.value = this.value.filter((v) => v !== c.value) : this.value = [...this.value, c.value]) : (this.value = c.value, this.hide())));
-      }, d = (u) => {
-        var c;
-        this.contains(u.target) || (this.hide(), (c = e(this, n).closeAbortController) == null || c.abort());
-      }, h = (u) => {
-        var v;
-        (/* @__PURE__ */ new Set(["Escape", "ArrowUp", "ArrowDown"])).has(u.key) && (u.preventDefault(), u.key === "Escape" && (this.hide(), (v = e(this, n).closeAbortController) == null || v.abort()));
+      const i = (c) => {
+        c.stopImmediatePropagation();
+        const d = c.target.closest("ea-option");
+        if (!d || d.disabled) return;
+        let p;
+        this.multiple ? (Array.isArray(this.value) || (this.value = []), this.value.includes(d.value) ? p = this.value.filter((U) => U !== d.value) : p = [...this.value, d.value], this.value = p) : (p = d.value, this.value = p, this.hide()), this.emit("change", {
+          detail: { value: p },
+          bubbles: !0,
+          composed: !0
+        });
+      }, u = (c) => {
+        var d;
+        this.contains(c.target) || (this.hide(), (d = e(this, n).closeAbortController) == null || d.abort());
+      }, h = (c) => {
+        var p;
+        (/* @__PURE__ */ new Set(["Escape", "ArrowUp", "ArrowDown"])).has(c.key) && (c.preventDefault(), c.key === "Escape" && (this.hide(), (p = e(this, n).closeAbortController) == null || p.abort()));
       };
-      e(this, m).isFocus = !0, this.updateContainerClasslist(), this.dispatchEvent(new z({ visible: !0 })), await N.sleep(100), this.addEventListener("ea-option-click", i, {
+      e(this, m).isFocus = !0, this.updateContainerClasslist(), this.dispatchEvent(new z({ visible: !0 })), await N.sleep(100), e(this, n).closeAbortController = new AbortController(), this.addEventListener("ea-option-click", i, {
         signal: e(this, n).closeAbortController.signal
-      }), document.addEventListener("click", d, {
+      }), document.addEventListener("click", u, {
         signal: e(this, n).closeAbortController.signal
       }), this.addEventListener("keydown", h, {
         signal: e(this, n).closeAbortController.signal
@@ -301,9 +308,13 @@ class X extends P {
      * @param {Event} e
      */
     l(this, D, (t) => {
-      const s = t.target, i = s.getAttribute("data-value");
-      this.value = this.value.filter((d) => d !== i), this.dispatchEvent(
-        new J({ tag: s, tagValue: i })
+      const s = t.target, i = s.getAttribute("data-value"), u = this.value.filter((h) => h !== i);
+      this.value = u, this.emit("change", {
+        detail: { value: u },
+        bubbles: !0,
+        composed: !0
+      }), this.dispatchEvent(
+        new Q({ tag: s, tagValue: i })
       );
     });
     /**
@@ -327,7 +338,7 @@ class X extends P {
     y(this, "hide", () => {
       e(this, m).isFocus = !1, this.updateContainerClasslist(), this.dispatchEvent(new z({ visible: !1 }));
     });
-    this.stylesheet = G, this.$render();
+    this.stylesheet = K, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -350,7 +361,7 @@ class X extends P {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    var i, d, h;
+    var i, u, h;
     const t = e(this, o).shadowRoot.querySelector(".ea-input"), s = this.computedClasslist(
       "ea-select",
       {
@@ -360,7 +371,7 @@ class X extends P {
         focus: e(this, m).isFocus,
         disabled: this.disabled,
         clearable: this.clearable && ((i = this.value) == null ? void 0 : i.length) > 0,
-        multiple: this.multiple && ((d = this.value) == null ? void 0 : d.length) > 0 && Array.isArray(this.value),
+        multiple: this.multiple && ((u = this.value) == null ? void 0 : u.length) > 0 && Array.isArray(this.value),
         filterable: this.filterable,
         "has-value": ((h = this.value) == null ? void 0 : h.toString().length) > 0
       }
@@ -372,20 +383,20 @@ class X extends P {
       <div class='ea-select' part='container' tabindex='-1'>
         <ea-input class="ea-select__input" part="input" readonly>
           <section slot="prefix" class="ea-select__tag-wrap" part="tag-wrap"></section>
-          <ea-icon slot="suffix" class="ea-select__clear-icon" part="clear-icon" icon='icon-cancel'></ea-icon>
-          <ea-icon slot="suffix" class="ea-select__dropdown-icon" part="dropdown-icon" icon='icon-angle-down'></ea-icon>
+          <ea-icon slot="suffix" class="ea-select__clear-icon" part="clear-icon" name='xmark'></ea-icon>
+          <ea-icon slot="suffix" class="ea-select__dropdown-icon" part="dropdown-icon" name='angle-down'></ea-icon>
         </ea-input>
         <section class="ea-select__dropdown" part="dropdown">
           <slot></slot>
         </section>
       </div>
-    `, b(this, E, this.shadowRoot.querySelector(".ea-select")), b(this, o, this.shadowRoot.querySelector(".ea-select__input")), b(this, A, this.shadowRoot.querySelector(".ea-select__tag-wrap")), b(this, k, this.shadowRoot.querySelector(".ea-select__dropdown")), b(this, q, this.shadowRoot.querySelector(
+    `, v(this, E, this.shadowRoot.querySelector(".ea-select")), v(this, o, this.shadowRoot.querySelector(".ea-select__input")), v(this, w, this.shadowRoot.querySelector(".ea-select__tag-wrap")), v(this, k, this.shadowRoot.querySelector(".ea-select__dropdown")), v(this, q, this.shadowRoot.querySelector(
       ".ea-select__dropdown-icon"
-    )), b(this, S, this.shadowRoot.querySelector(".ea-select__clear-icon"));
+    )), v(this, S, this.shadowRoot.querySelector(".ea-select__clear-icon"));
   }
   async connectedCallback() {
     var t;
-    super.connectedCallback(), await customElements.whenDefined("ea-input"), await customElements.whenDefined("ea-option"), (t = e(this, f)) == null || t.abort(), b(this, f, new AbortController()), this.name || (this.name = Math.random().toString(36).substring(2, 15)), this.hasAttribute("value") && (this.value = this.getAttrString("value")), e(this, o).shadowRoot.addEventListener(
+    super.connectedCallback(), await customElements.whenDefined("ea-input"), await customElements.whenDefined("ea-option"), (t = e(this, f)) == null || t.abort(), v(this, f, new AbortController()), this.name || (this.name = Math.random().toString(36).substring(2, 15)), this.hasAttribute("value") && (this.value = this.getAttrString("value")), e(this, o).shadowRoot.addEventListener(
       "click",
       e(this, M),
       {
@@ -445,15 +456,15 @@ class X extends P {
     return this.updateValidity(), this.internals.reportValidity();
   }
 }
-E = new WeakMap(), o = new WeakMap(), A = new WeakMap(), k = new WeakMap(), q = new WeakMap(), S = new WeakMap(), f = new WeakMap(), n = new WeakMap(), m = new WeakMap(), L = new WeakMap(), B = new WeakMap(), T = new WeakMap(), F = new WeakMap(), M = new WeakMap(), D = new WeakMap();
-window.customElements.get("ea-select") || window.customElements.define("ea-select", X);
-class Y extends Event {
-  constructor(r) {
-    super("ea-option-click", { bubbles: !0, composed: !0 }), this.detail = r;
+E = new WeakMap(), o = new WeakMap(), w = new WeakMap(), k = new WeakMap(), q = new WeakMap(), S = new WeakMap(), f = new WeakMap(), n = new WeakMap(), m = new WeakMap(), L = new WeakMap(), B = new WeakMap(), T = new WeakMap(), F = new WeakMap(), M = new WeakMap(), D = new WeakMap();
+window.customElements.get("ea-select") || window.customElements.define("ea-select", Y);
+class V extends Event {
+  constructor(a) {
+    super("ea-option-click", { bubbles: !0, composed: !0 }), this.detail = a;
   }
 }
-var _, C, R;
-class V extends H {
+var _, C, x;
+class tt extends H {
   constructor() {
     super();
     /** @type {HTMLElement} */
@@ -490,15 +501,15 @@ class V extends H {
      * 选项选择事件
      * @param {MouseEvent | KeyboardEvent} e
      */
-    l(this, R, (t) => {
-      t.preventDefault(), !this.disabled && this.dispatchEvent(
-        new Y({
+    l(this, x, (t) => {
+      t.preventDefault(), t.stopImmediatePropagation(), !this.disabled && this.dispatchEvent(
+        new V({
           value: this.value,
           target: t.target
         })
       );
     });
-    this.stylesheet = Z, this.$render();
+    this.stylesheet = j, this.$render();
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "value", "selected", "disabled"];
@@ -523,15 +534,15 @@ class V extends H {
       <div class='ea-option' part='container'>
         <slot></slot>
       </div>
-    `, b(this, _, this.shadowRoot.querySelector(".ea-option"));
+    `, v(this, _, this.shadowRoot.querySelector(".ea-option"));
   }
   connectedCallback() {
     var s;
-    super.connectedCallback(), this.removeAttribute("tabindex"), (s = e(this, C)) == null || s.abort(), b(this, C, new AbortController());
+    super.connectedCallback(), this.removeAttribute("tabindex"), (s = e(this, C)) == null || s.abort(), v(this, C, new AbortController());
     const t = (i) => {
-      i.key === "Enter" && e(this, R).call(this, i);
+      i.key === "Enter" && e(this, x).call(this, i);
     };
-    this.addEventListener("click", e(this, R), {
+    this.addEventListener("click", e(this, x), {
       signal: e(this, C).signal
     }), this.addEventListener("keydown", t, {
       signal: e(this, C).signal
@@ -542,28 +553,28 @@ class V extends H {
     (t = e(this, C)) == null || t.abort();
   }
 }
-_ = new WeakMap(), C = new WeakMap(), R = new WeakMap();
-window.customElements.get("ea-option") || window.customElements.define("ea-option", V);
-var $, x, w;
-class tt extends H {
+_ = new WeakMap(), C = new WeakMap(), x = new WeakMap();
+window.customElements.get("ea-option") || window.customElements.define("ea-option", tt);
+var $, R, A;
+class et extends H {
   constructor() {
     super();
     /** @type {HTMLElement} */
     l(this, $);
     /** @type {HTMLSlotElement} */
-    l(this, x);
+    l(this, R);
     /** @type {AbortController} */
-    l(this, w, new AbortController());
+    l(this, A, new AbortController());
     y(this, "state", this.properties({
       label: {
         type: String,
         default: "",
         observer: (t) => {
-          e(this, x).textContent = t;
+          e(this, R).textContent = t;
         }
       }
     }));
-    this.stylesheet = j, this.$render();
+    this.stylesheet = J, this.$render();
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "label"];
@@ -578,21 +589,21 @@ class tt extends H {
           <slot></slot>
         </section>
       </div>
-    `, b(this, $, this.shadowRoot.querySelector(".ea-option-group")), b(this, x, this.shadowRoot.querySelector("slot[name='header']"));
+    `, v(this, $, this.shadowRoot.querySelector(".ea-option-group")), v(this, R, this.shadowRoot.querySelector("slot[name='header']"));
   }
   connectedCallback() {
     var t;
-    super.connectedCallback(), (t = e(this, w)) == null || t.abort(), b(this, w, new AbortController());
+    super.connectedCallback(), (t = e(this, A)) == null || t.abort(), v(this, A, new AbortController());
   }
   $beforeUnmounted() {
     var t;
-    (t = e(this, w)) == null || t.abort();
+    (t = e(this, A)) == null || t.abort();
   }
 }
-$ = new WeakMap(), x = new WeakMap(), w = new WeakMap();
-window.customElements.get("ea-option-group") || window.customElements.define("ea-option-group", tt);
+$ = new WeakMap(), R = new WeakMap(), A = new WeakMap();
+window.customElements.get("ea-option-group") || window.customElements.define("ea-option-group", et);
 export {
-  V as EaOption,
-  tt as EaOptionGroup,
-  X as EaSelect
+  tt as EaOption,
+  et as EaOptionGroup,
+  Y as EaSelect
 };