easy-component-ui 3.0.4 → 3.0.6

package/dist/components/ea-button.js

@@ -1,22 +1,24 @@
-var m = Object.defineProperty;
-var c = (t) => {
-  throw TypeError(t);
+var f = Object.defineProperty;
+var p = (s) => {
+  throw TypeError(s);
 };
-var f = (t, i, e) => i in t ? m(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e;
-var d = (t, i, e) => f(t, typeof i != "symbol" ? i + "" : i, e), p = (t, i, e) => i.has(t) || c("Cannot " + e);
-var s = (t, i, e) => (p(t, i, "read from private field"), e ? e.call(t) : i.get(t)), l = (t, i, e) => i.has(t) ? c("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), h = (t, i, e, r) => (p(t, i, "write to private field"), r ? r.call(t, e) : i.set(t, e), e);
-import { F as y } from "../core/FormBase.js";
-import { s as C } from "../css/ea-button.style.js";
-import { B as g } from "./Base.js";
-import { s as v } from "../css/ea-button-group.style.js";
-var a, n, u;
-class w extends y {
+var y = (s, i, t) => i in s ? f(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
+var d = (s, i, t) => y(s, typeof i != "symbol" ? i + "" : i, t), b = (s, i, t) => i.has(s) || p("Cannot " + t);
+var e = (s, i, t) => (b(s, i, "read from private field"), t ? t.call(s) : i.get(s)), u = (s, i, t) => i.has(s) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), h = (s, i, t, o) => (b(s, i, "write to private field"), o ? o.call(s, t) : i.set(s, t), t);
+import { F as C } from "../core/FormBase.js";
+import { s as g } from "../css/ea-button.style.js";
+import { B as v } from "./Base.js";
+import { s as w } from "../css/ea-button-group.style.js";
+var a, l, n, c;
+class A extends C {
   constructor() {
     super();
     /** @type {HTMLButtonElement | HTMLLinkElement} */
-    l(this, a);
+    u(this, a);
+    /** @type {HTMLIconElement} */
+    u(this, l);
     /** @type {AbortController} */
-    l(this, n);
+    u(this, n);
     /**
      * @typedef {Object} state
      * @property {boolean} disabled
@@ -30,113 +32,109 @@ class w extends y {
      * @property {string} size
      * @property {boolean} loading
      * @property {string} icon
-     * @property {boolean} loading
      */
     /** @type {state} */
     d(this, "state", this.properties({
       disabled: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          s(this, a).className = this.updateContainerClasslist();
+        observer: (t) => {
+          e(this, a).className = this.updateContainerClasslist();
         }
       },
       type: {
         type: ["normal", "primary", "success", "warning", "danger"],
         default: "normal",
-        observer: (e) => {
-          s(this, a).className = this.updateContainerClasslist();
+        observer: (t) => {
+          e(this, a).className = this.updateContainerClasslist();
         }
       },
       text: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          s(this, a).className = this.updateContainerClasslist();
+        observer: (t) => {
+          e(this, a).className = this.updateContainerClasslist();
         }
       },
       plain: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          s(this, a).className = this.updateContainerClasslist();
+        observer: (t) => {
+          e(this, a).className = this.updateContainerClasslist();
         }
       },
       round: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          s(this, a).className = this.updateContainerClasslist();
+        observer: (t) => {
+          e(this, a).className = this.updateContainerClasslist();
         }
       },
       circle: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          s(this, a).className = this.updateContainerClasslist();
+        observer: (t) => {
+          e(this, a).className = this.updateContainerClasslist();
         }
       },
       link: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          s(this, a).className = this.updateContainerClasslist();
+        observer: (t) => {
+          this.$render(), e(this, a).href = this.getAttribute("href"), e(this, a).className = this.updateContainerClasslist();
         }
       },
       href: {
         type: String,
         default: "",
-        observer: (e) => {
-          s(this, a).className = this.updateContainerClasslist(), s(this, a).setAttribute("href", e);
+        observer: (t) => {
+          e(this, a).className = this.updateContainerClasslist(), e(this, a).setAttribute("href", t);
         }
       },
       size: {
         type: ["small", "medium", "large"],
         default: "medium",
-        observer: (e) => {
-          s(this, a).className = this.updateContainerClasslist();
+        observer: (t) => {
+          e(this, a).className = this.updateContainerClasslist();
         }
       },
       loading: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          var r;
-          if (e = e === "true" || e === !0, this.toggleAttribute("disabled", e), e) {
-            const o = document.createElement("ea-icon");
-            o.id = "ea-loading-icon", o.icon = "icon-spin6 animate-spin", o.size = this.size, o.part = "loading-icon", s(this, a).insertBefore(o, s(this, a).firstChild);
+        observer: (t) => {
+          var o;
+          if (t = t === "true" || t === !0, this.toggleAttribute("disabled", t), t) {
+            const r = document.createElement("ea-icon");
+            r.id = "ea-loading-icon", r.icon = "icon-cw animate-spin", r.size = this.size, r.part = "loading-icon", e(this, a).insertBefore(r, e(this, a).firstChild);
           } else {
-            const o = (r = s(this, a)) == null ? void 0 : r.querySelectorAll("#ea-loading-icon");
-            (o == null ? void 0 : o.length) > 0 && (o == null || o.forEach((b) => b.remove()));
+            const r = (o = e(this, a)) == null ? void 0 : o.querySelectorAll("#ea-loading-icon");
+            (r == null ? void 0 : r.length) > 0 && (r == null || r.forEach((m) => m.remove()));
           }
-          s(this, a).className = this.updateContainerClasslist();
+          e(this, a).className = this.updateContainerClasslist();
         }
       },
       icon: {
         type: String,
         default: "",
-        observer: (e) => {
-          if (e && !s(this, a).querySelector("ea-icon")) {
-            const r = document.createElement("ea-icon");
-            r.size = this.size, r.icon = e, r.part = "icon", s(this, a).insertBefore(r, s(this, a).firstChild);
-          }
+        observer: (t) => {
+          e(this, l).setAttribute("icon", t), e(this, l).setAttribute("size", this.size), e(this, a).className = this.updateContainerClasslist();
         }
       },
       "button-type": {
         type: ["button", "submit", "reset"],
         default: "button",
-        observer: (e) => {
-          s(this, a).type = e;
+        observer: (t) => {
+          e(this, a).type = t;
         }
       }
     }));
     /**
      * @param {KeyboardEvent} e
      */
-    l(this, u, (e) => {
-      e.key === "Enter" && this.click();
+    u(this, c, (t) => {
+      t.key === "Enter" && this.click();
     });
-    this.stylesheet = C, this.$render();
+    this.stylesheet = g, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -160,46 +158,52 @@ class w extends y {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    return this.computedClasslist("ea-button", {
-      ["--" + this.type]: this.type,
-      "--disabled": this.disabled || this.loading,
-      "--text": this.text || this.link,
-      "--plain": this.plain,
-      "--round": this.round,
-      "--circle": this.circle,
-      ["--" + this.size]: this.size
-    });
+    var t;
+    return this.computedClasslist(
+      "ea-button",
+      {
+        ["--" + this.type]: this.type,
+        "--disabled": this.disabled || this.loading,
+        "--text": this.text || this.link,
+        "--plain": this.plain,
+        "--round": this.round,
+        "--circle": this.circle,
+        ["--" + this.size]: this.size
+      },
+      { icon: (t = this.icon) == null ? void 0 : t.length }
+    );
   }
   $render() {
-    const e = this.getAttrBoolean("link") ? "a" : "button";
+    const t = this.getAttrBoolean("link") ? "a" : "button";
     this.shadowRoot.innerHTML = `
-      <${e} class="ea-button" part="container" tabindex="-1">
+      <${t} class="ea-button" part="container" tabindex="-1">
+        <ea-icon class="ea-button__icon" part="icon"></ea-icon>
         <slot></slot>
-      </${e}>
-    `, h(this, a, this.shadowRoot.querySelector(".ea-button"));
+      </${t}>
+    `, h(this, a, this.shadowRoot.querySelector(".ea-button")), h(this, l, this.shadowRoot.querySelector(".ea-button__icon")), e(this, a).className = this.updateContainerClasslist();
   }
   connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = s(this, n)) == null || e.abort(), h(this, n, new AbortController()), this.addEventListener("keypress", s(this, u), {
-      signal: s(this, n).signal
-    }), this.addEventListener("click", (r) => {
+    var t;
+    super.connectedCallback(), (t = e(this, n)) == null || t.abort(), h(this, n, new AbortController()), this.addEventListener("keypress", e(this, c), {
+      signal: e(this, n).signal
+    }), this.addEventListener("click", (o) => {
       if (this["button-type"] === "submit") {
-        const o = this.getForm();
-        o && (r.preventDefault(), o.dispatchEvent(new Event("submit")));
+        const r = this.getForm();
+        r && (o.preventDefault(), r.dispatchEvent(new Event("submit")));
       } else if (this["button-type"] === "reset") {
-        const o = this.getForm();
-        o && (r.preventDefault(), o.reset());
+        const r = this.getForm();
+        r && (o.preventDefault(), r.reset());
       }
-    }), this.emit("ea-button-ready");
+    });
   }
   $beforeUnmounted() {
-    var e;
-    (e = s(this, n)) == null || e.abort();
+    var t;
+    (t = e(this, n)) == null || t.abort();
   }
 }
-a = new WeakMap(), n = new WeakMap(), u = new WeakMap();
-window.customElements.get("ea-button") || window.customElements.define("ea-button", w);
-class E extends g {
+a = new WeakMap(), l = new WeakMap(), n = new WeakMap(), c = new WeakMap();
+window.customElements.get("ea-button") || window.customElements.define("ea-button", A);
+class E extends v {
   constructor() {
     super();
     /**
@@ -213,32 +217,32 @@ class E extends g {
       disabled: {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          this.querySelectorAll("ea-button").forEach((r) => {
-            r.setAttribute("disabled", e);
+        observer: (t) => {
+          this.querySelectorAll("ea-button").forEach((o) => {
+            o.setAttribute("disabled", t);
           });
         }
       },
       size: {
         type: ["small", "normal", "large"],
         default: "normal",
-        observer: (e) => {
-          this.querySelectorAll("ea-button").forEach((r) => {
-            r.setAttribute("size", e);
+        observer: (t) => {
+          this.querySelectorAll("ea-button").forEach((o) => {
+            o.setAttribute("size", t);
           });
         }
       },
       type: {
         type: ["primary", "success", "warning", "danger", "normal"],
         default: "normal",
-        observer: (e) => {
-          this.querySelectorAll("ea-button").forEach((r) => {
-            r.setAttribute("type", e);
+        observer: (t) => {
+          this.querySelectorAll("ea-button").forEach((o) => {
+            o.setAttribute("type", t);
           });
         }
       }
     }));
-    this.stylesheet = v, this.$render();
+    this.stylesheet = w, this.$render();
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "disabled", "size", "type"];
@@ -256,6 +260,6 @@ class E extends g {
 }
 window.customElements.get("ea-button-group") || window.customElements.define("ea-button-group", E);
 export {
-  w as EaButton,
+  A as EaButton,
   E as EaButtonGroup
 };