easy-component-ui 3.0.12 → 3.0.13

package/dist/components/Base.js

@@ -850,7 +850,7 @@ class Cn extends HTMLElement {
   }
   getAttrString(e, i) {
     const s = this.getAttribute(e);
-    return s || i || "";
+    return !s || s === "null" ? i || "" : s;
   }
   getAttrDate(e, i) {
     let s = this.getAttrNumber(e);
@@ -869,5 +869,6 @@ class Cn extends HTMLElement {
 }
 B = new WeakMap();
 export {
-  Cn as B
+  Cn as B,
+  Rn as h
 };

package/dist/components/ea-alert.js

@@ -3,56 +3,58 @@ var y = (t) => {
   throw TypeError(t);
 };
 var C = (t, s, e) => s in t ? w(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var m = (t, s, e) => C(t, typeof s != "symbol" ? s + "" : s, e), _ = (t, s, e) => s.has(t) || y("Cannot " + e);
-var o = (t, s, e) => (_(t, s, "read from private field"), e ? e.call(t) : s.get(t)), i = (t, s, e) => s.has(t) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), r = (t, s, e, c) => (_(t, s, "write to private field"), c ? c.call(t, e) : s.set(t, e), e);
+var _ = (t, s, e) => C(t, typeof s != "symbol" ? s + "" : s, e), v = (t, s, e) => s.has(t) || y("Cannot " + e);
+var a = (t, s, e) => (v(t, s, "read from private field"), e ? e.call(t) : s.get(t)), i = (t, s, e) => s.has(t) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), r = (t, s, e, c) => (v(t, s, "write to private field"), c ? c.call(t, e) : s.set(t, e), e);
 import { B as g } from "./Base.js";
-import { s as S } from "../css/ea-alert.style.js";
+import { s as x } from "../css/ea-alert.style.js";
 import { t as b } from "../utils/timeout.js";
-var a, h, f, p, d, l, n, u;
+var l, d, u, m, p, f, n, o, h;
 class L extends g {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, a);
+    i(this, l);
     /** @type {HTMLElement} */
-    i(this, h);
+    i(this, d);
     /** @type {HTMLElement} */
-    i(this, f);
+    i(this, u);
+    /** @type {HTMLSlotElement} */
+    i(this, m);
     /** @type {HTMLElement} */
     i(this, p);
     /** @type {HTMLElement} */
-    i(this, d);
+    i(this, f);
     /** @type {HTMLElement} */
-    i(this, l);
-    /** @type {AbortController} */
     i(this, n);
-    m(this, "state", this.properties({
+    /** @type {AbortController} */
+    i(this, o);
+    _(this, "state", this.properties({
       title: {
         type: String,
         default: "",
         observer: (e) => {
-          o(this, p).innerHTML = e || '<slot name="title"></slot>';
+          a(this, p).innerHTML = e;
         }
       },
       description: {
         type: String,
         default: "",
         observer: (e) => {
-          o(this, d).innerHTML = e || "<slot></slot>";
+          a(this, f).innerHTML = e || "<slot></slot>";
         }
       },
       type: {
         type: ["primary", "info", "success", "warning", "error"],
         default: "info",
         observer: (e) => {
-          o(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       effect: {
         type: ["light", "dark"],
         default: "light",
         observer: (e) => {
-          o(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       "close-text": {
@@ -60,7 +62,7 @@ class L extends g {
         default: "",
         observer: (e) => {
           try {
-            o(this, l).textContent = e;
+            a(this, n).textContent = e;
           } catch {
           }
         }
@@ -69,36 +71,39 @@ class L extends g {
         type: Boolean,
         default: !0,
         observer: (e) => {
-          o(this, l).innerHTML = e ? this["close-text"] ? this["close-text"] : '<ea-icon class="ea-alert__close-icon" icon="icon-cancel" part="close-icon"></ea-icon>' : "";
+          var c;
+          (c = a(this, o)) == null || c.abort(), a(this, n).innerHTML = e ? this["close-text"] ? this["close-text"] : '<ea-icon class="ea-alert__close-icon" name="xmark" part="close-icon"></ea-icon>' : "", e && (r(this, o, new AbortController()), a(this, n).addEventListener("click", a(this, h), {
+            signal: a(this, o).signal
+          }));
         }
       },
       "show-icon": {
         type: Boolean,
         default: !1,
-        observer: (e) => {
-          const c = {
-            primary: "info",
-            success: "ok-circled",
-            info: "info",
-            warning: "attention-alt",
-            error: "cancel-circled"
-          }, v = this.querySelector("[slot=icon]");
-          o(this, h).innerHTML = e && !v ? `<ea-icon class="ea-alert__icon" icon="icon-${c[this.type]}" part="icon"></ea-icon>` : '<slot name="icon"></slot>';
+        observer: () => {
+          const e = {
+            primary: "circle-info",
+            success: "circle-check",
+            info: "circle-info",
+            warning: "triangle-exclamation",
+            error: "circle-xmark"
+          };
+          a(this, d).innerHTML = `<ea-icon class="ea-alert__icon" name="${e[this.type]}" part="icon"></ea-icon>`;
         }
       },
       center: {
         type: Boolean,
         default: !1,
         observer: () => {
-          o(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       "show-after": {
         type: Number,
         default: 0,
         observer: (e) => {
-          e = Math.abs(e), o(this, a).classList.toggle("ea-alert--hide", e > 0), b(() => {
-            this.emit("open"), o(this, a).classList.remove("ea-alert--hide");
+          e = Math.abs(e), a(this, l).classList.toggle("ea-alert--hide", e > 0), b(() => {
+            this.emit("open"), a(this, l).classList.remove("ea-alert--hide");
           }, e);
         }
       },
@@ -112,26 +117,29 @@ class L extends g {
         type: Number,
         default: 0,
         observer: (e) => {
-          e && this.isMounted && b(() => o(this, u).call(this), this["auto-close"]);
+          e && this.isMounted && b(() => a(this, h).call(this), this["auto-close"]);
         }
       }
     }));
-    i(this, u, (e) => {
+    /**
+     * 关闭事件
+     */
+    i(this, h, () => {
       b(() => {
-        o(this, n).abort(), o(this, a).classList.add("ea-alert--before-close"), o(this, a).addEventListener(
-          "transitionend",
-          () => {
-            this.emit("close", {
-              detail: {
-                visible: !1
-              }
-            }), this.remove();
-          },
-          { once: !0 }
-        );
+        a(this, l).classList.add("ea-alert--before-close");
+        const e = () => {
+          this.emit("close", {
+            detail: {
+              visible: !1
+            }
+          }), this.remove();
+        };
+        a(this, l).addEventListener("transitionend", e, {
+          once: !0
+        });
       }, this["hide-after"]);
     });
-    this.$render(), this.stylesheet = S;
+    this.$render(), this.stylesheet = x;
   }
   static get observedAttributes() {
     return [
@@ -154,11 +162,12 @@ class L extends g {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    return this.computedClasslist("ea-alert", {
+    const e = this.computedClasslist("ea-alert", {
       ["--" + this.type]: this.type,
       ["--" + this.effect]: this.effect,
       "--center": this.center
     });
+    return a(this, l).className = e, e;
   }
   $render() {
     this.shadowRoot.innerHTML = `
@@ -167,29 +176,37 @@ class L extends g {
           <slot name='icon'></slot>
         </span>
         <div class="ea-alert__content" part='content-wrap'>
-          <span class="ea-alert__title" part='title'></span>
+          <span class="ea-alert__title" part='title'>
+            <slot name="title"></slot>
+          </span>
           <p class="ea-alert__description" part='description'>
             <slot></slot>
           </p>
           <span class="ea-alert__close-btn" part="close-btn">
-            ${this.closable ? this["close-text"] ? this["close-text"] : '<ea-icon class="ea-alert__close-icon" icon="icon-cancel" part="close-icon"></ea-icon>' : ""}
+            ${this.closable ? this["close-text"] ? this["close-text"] : '<ea-icon class="ea-alert__close-icon" name="xmark" part="close-icon"></ea-icon>' : ""}
           </span>
         </div>
       </div>
-    `, r(this, a, this.shadowRoot.querySelector(".ea-alert")), r(this, h, this.shadowRoot.querySelector(".ea-alert__icon-wrap")), r(this, f, this.shadowRoot.querySelector(".ea-alert__content")), r(this, p, this.shadowRoot.querySelector(".ea-alert__title")), r(this, d, this.shadowRoot.querySelector(
-      ".ea-alert__description"
-    )), r(this, l, this.shadowRoot.querySelector(".ea-alert__close-btn"));
+    `, r(this, l, this.shadowRoot.querySelector(".ea-alert")), r(this, d, this.shadowRoot.querySelector(
+      ".ea-alert__icon-wrap slot[name=icon]"
+    )), r(this, u, this.shadowRoot.querySelector(".ea-alert__content")), r(this, p, this.shadowRoot.querySelector(
+      ".ea-alert__title slot[name=title]"
+    )), r(this, f, this.shadowRoot.querySelector(
+      ".ea-alert__description slot"
+    )), r(this, n, this.shadowRoot.querySelector(".ea-alert__close-btn"));
   }
   connectedCallback() {
-    super.connectedCallback(), r(this, n, new AbortController()), this.closable && o(this, l).addEventListener("click", o(this, u), {
-      signal: o(this, n).signal
-    });
+    var e;
+    super.connectedCallback(), (e = a(this, o)) == null || e.abort(), this.closable && (r(this, o, new AbortController()), a(this, n).addEventListener("click", a(this, h), {
+      signal: a(this, o).signal
+    }));
   }
   $beforeUnmounted() {
-    o(this, n).abort();
+    var e;
+    (e = a(this, o)) == null || e.abort();
   }
 }
-a = new WeakMap(), h = new WeakMap(), f = new WeakMap(), p = new WeakMap(), d = new WeakMap(), l = new WeakMap(), n = new WeakMap(), u = new WeakMap();
+l = new WeakMap(), d = new WeakMap(), u = new WeakMap(), m = new WeakMap(), p = new WeakMap(), f = new WeakMap(), n = new WeakMap(), o = new WeakMap(), h = new WeakMap();
 window.customElements.get("ea-alert") || window.customElements.define("ea-alert", L);
 export {
   L as EaAlert

package/dist/components/ea-avatar.js

@@ -1,14 +1,14 @@
-var u = Object.defineProperty;
+var m = Object.defineProperty;
 var v = (e) => {
   throw TypeError(e);
 };
-var g = (e, a, t) => a in e ? u(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
-var f = (e, a, t) => g(e, typeof a != "symbol" ? a + "" : a, t), p = (e, a, t) => a.has(e) || v("Cannot " + t);
-var r = (e, a, t) => (p(e, a, "read from private field"), t ? t.call(e) : a.get(e)), n = (e, a, t) => a.has(e) ? v("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), h = (e, a, t, s) => (p(e, a, "write to private field"), s ? s.call(e, t) : a.set(e, t), t);
-import { B as m } from "./Base.js";
-import { E as w } from "../utils/Utils.js";
-import { s as y } from "../css/ea-avatar.style.js";
-const b = `
+var g = (e, s, t) => s in e ? m(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), p = (e, s, t) => s.has(e) || v("Cannot " + t);
+var r = (e, s, t) => (p(e, s, "read from private field"), t ? t.call(e) : s.get(e)), n = (e, s, t) => s.has(e) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), h = (e, s, t, a) => (p(e, s, "write to private field"), a ? a.call(e, t) : s.set(e, t), t);
+import { B as y } from "./Base.js";
+import { E as b } from "../utils/Utils.js";
+import { s as w } from "../css/ea-avatar.style.js";
+const u = `
     <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <defs>
             <clipPath id="a">
@@ -28,44 +28,44 @@ const b = `
         <path d="M55 45L40 70h5 30z" fill="#c0c4cc" />
     </svg>
 `;
-var i, l;
-class C extends m {
+var o, i;
+class C extends y {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    n(this, i);
+    n(this, o);
     /** @type {AbortController} */
-    n(this, l);
+    n(this, i);
     f(this, "state", this.properties({
       icon: {
         type: String,
         default: "",
         observer: (t) => {
-          r(this, i).innerHTML = `<ea-icon class="ea-avatar__icon" icon="${t}" part="icon-avatar"></ea-icon>`;
+          t ? r(this, o).innerHTML = `<ea-icon class="ea-avatar__icon" name="${t}" part="icon-avatar"></ea-icon>` : r(this, o).innerHTML = `<slot>${u}</slot>`;
         }
       },
       shape: {
         type: ["circle", "square"],
         default: "circle",
         observer: () => {
-          r(this, i).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       size: {
         type: String,
         default: "default",
         observer: (t) => {
-          const s = w.Enum.hasEnum(
+          const a = b.Enum.hasEnum(
             ["default", "small", "large"],
             t
           ), c = CSS.supports("width", t);
-          if (!s && !c)
+          if (!a && !c)
             return this.size = "default", console.warn(
               "[ea-avatar] Please set size to one of [default, small, large] or a valid CSS width value"
             );
           this.style.setProperty(
             "--ea-avatar-size",
-            s ? `var(--ea-avatar-size-${t})` : t
+            a ? `var(--ea-avatar-size-${t})` : t
           );
         }
       },
@@ -74,23 +74,23 @@ class C extends m {
         default: "",
         observer: (t) => {
           var c;
-          (c = r(this, l)) == null || c.abort(), h(this, l, new AbortController());
-          const s = new Image();
-          s.src = t, s.addEventListener(
+          (c = r(this, i)) == null || c.abort(), h(this, i, new AbortController());
+          const a = new Image();
+          a.src = t, a.addEventListener(
             "load",
             () => {
-              var o;
-              r(this, i).innerHTML = `<img class="ea-avatar__img" src="${t}" alt="${this.alt}" srcset="${this["src-set"]}" part="img-avatar" />`, (o = r(this, l)) == null || o.abort();
+              var l;
+              r(this, o).innerHTML = `<img class="ea-avatar__img" src="${t}" alt="${this.alt}" srcset="${this["src-set"]}" part="img-avatar" />`, (l = r(this, i)) == null || l.abort();
             },
-            { signal: r(this, l).signal }
-          ), s.addEventListener(
+            { signal: r(this, i).signal }
+          ), a.addEventListener(
             "error",
             () => {
               var d;
-              const o = r(this, i).querySelector("slot");
-              o && (o.innerHTML = S), this.emit("error"), (d = r(this, l)) == null || d.abort();
+              const l = r(this, o).querySelector("slot");
+              l && (l.innerHTML = S), this.emit("error"), (d = r(this, i)) == null || d.abort();
             },
-            { signal: r(this, l).signal }
+            { signal: r(this, i).signal }
           );
         }
       },
@@ -98,16 +98,16 @@ class C extends m {
         type: String,
         default: "",
         observer: (t) => {
-          const s = this.shadowRoot.querySelector(".ea-avatar__img");
-          s && (s.srcset = t);
+          const a = this.shadowRoot.querySelector(".ea-avatar__img");
+          a && (a.srcset = t);
         }
       },
       alt: {
         type: String,
         default: "",
         observer: (t) => {
-          const s = this.shadowRoot.querySelector(".ea-avatar__img");
-          s && (s.alt = t);
+          const a = this.shadowRoot.querySelector(".ea-avatar__img");
+          a && (a.alt = t);
         }
       },
       fit: {
@@ -118,7 +118,7 @@ class C extends m {
         }
       }
     }));
-    this.stylesheet = y, this.$render();
+    this.stylesheet = w, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -137,22 +137,27 @@ class C extends m {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    return this.computedClasslist("ea-avatar", {
+    const t = this.computedClasslist("ea-avatar", {
       ["--" + this.shape]: this.shape
     });
+    return r(this, o).className = t, t;
   }
   $render() {
     this.shadowRoot.innerHTML = `
       <div class="ea-avatar" part='container'>
-        <slot>${b}</slot>
+        <slot>${u}</slot>
       </div>
-    `, h(this, i, this.shadowRoot.querySelector(".ea-avatar"));
+    `, h(this, o, this.shadowRoot.querySelector(".ea-avatar")), this.updateContainerClasslist();
   }
   connectedCallback() {
-    super.connectedCallback(), r(this, i).className = this.updateContainerClasslist();
+    super.connectedCallback();
+  }
+  $beforeUnmounted() {
+    var t;
+    (t = r(this, i)) == null || t.abort();
   }
 }
-i = new WeakMap(), l = new WeakMap();
+o = new WeakMap(), i = new WeakMap();
 window.customElements.get("ea-avatar") || window.customElements.define("ea-avatar", C);
 export {
   C as EaAvatar