easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-button.js

@@ -1,20 +1,20 @@
-var f = Object.defineProperty;
-var p = (s) => {
-  throw TypeError(s);
+var m = Object.defineProperty;
+var b = (e) => {
+  throw TypeError(e);
 };
-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);
+var y = (e, s, t) => s in e ? m(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var c = (e, s, t) => y(e, typeof s != "symbol" ? s + "" : s, t), p = (e, s, t) => s.has(e) || b("Cannot " + t);
+var a = (e, s, t) => (p(e, s, "read from private field"), t ? t.call(e) : s.get(e)), u = (e, s, t) => s.has(e) ? b("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), d = (e, s, t, r) => (p(e, s, "write to private field"), r ? r.call(e, t) : s.set(e, 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 {
+import { s as A } from "../css/ea-button-group.style.js";
+var o, l, n, h;
+class w extends C {
   constructor() {
     super();
     /** @type {HTMLButtonElement | HTMLLinkElement} */
-    u(this, a);
+    u(this, o);
     /** @type {HTMLIconElement} */
     u(this, l);
     /** @type {AbortController} */
@@ -34,104 +34,104 @@ class A extends C {
      * @property {string} icon
      */
     /** @type {state} */
-    d(this, "state", this.properties({
+    c(this, "state", this.properties({
       disabled: {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          e(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       type: {
         type: ["normal", "primary", "success", "warning", "danger"],
         default: "normal",
         observer: (t) => {
-          e(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       text: {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          e(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       plain: {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          e(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       round: {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          e(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       circle: {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          e(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       link: {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          this.$render(), e(this, a).href = this.getAttribute("href"), e(this, a).className = this.updateContainerClasslist();
+          this.$render(), a(this, o).href = this.getAttribute("href"), this.updateContainerClasslist();
         }
       },
       href: {
         type: String,
         default: "",
         observer: (t) => {
-          e(this, a).className = this.updateContainerClasslist(), e(this, a).setAttribute("href", t);
+          this.updateContainerClasslist(), a(this, o).setAttribute("href", t);
         }
       },
       size: {
         type: ["small", "medium", "large"],
         default: "medium",
         observer: (t) => {
-          e(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       loading: {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          var o;
+          var r;
           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);
+            const i = document.createElement("ea-icon");
+            i.id = "ea-loading-icon", i.setAttribute("name", "spinner"), i.toggleAttribute("spin", !0), i.setAttribute("size", this.size), i.setAttribute("part", "loading-icon"), a(this, o).insertBefore(i, a(this, o).firstChild);
           } else {
-            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()));
+            const i = (r = a(this, o)) == null ? void 0 : r.querySelectorAll("#ea-loading-icon");
+            (i == null ? void 0 : i.length) > 0 && (i == null || i.forEach((f) => f.remove()));
           }
-          e(this, a).className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
         }
       },
       icon: {
         type: String,
         default: "",
         observer: (t) => {
-          e(this, l).setAttribute("icon", t), e(this, l).setAttribute("size", this.size), e(this, a).className = this.updateContainerClasslist();
+          a(this, l).setAttribute("name", t), a(this, l).setAttribute("size", this.size), this.updateContainerClasslist();
         }
       },
       "button-type": {
         type: ["button", "submit", "reset"],
         default: "button",
         observer: (t) => {
-          e(this, a).type = t;
+          a(this, o).type = t;
         }
       }
     }));
     /**
      * @param {KeyboardEvent} e
      */
-    u(this, c, (t) => {
+    u(this, h, (t) => {
       t.key === "Enter" && this.click();
     });
     this.stylesheet = g, this.$render();
@@ -158,8 +158,8 @@ class A extends C {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    var t;
-    return this.computedClasslist(
+    var r;
+    const t = this.computedClasslist(
       "ea-button",
       {
         ["--" + this.type]: this.type,
@@ -170,8 +170,9 @@ class A extends C {
         "--circle": this.circle,
         ["--" + this.size]: this.size
       },
-      { icon: (t = this.icon) == null ? void 0 : t.length }
+      { icon: (r = this.icon) == null ? void 0 : r.length }
     );
+    return a(this, o).className = t, t;
   }
   $render() {
     const t = this.getAttrBoolean("link") ? "a" : "button";
@@ -180,29 +181,29 @@ class A extends C {
         <ea-icon class="ea-button__icon" part="icon"></ea-icon>
         <slot></slot>
       </${t}>
-    `, h(this, a, this.shadowRoot.querySelector(".ea-button")), h(this, l, this.shadowRoot.querySelector(".ea-button__icon")), e(this, a).className = this.updateContainerClasslist();
+    `, d(this, o, this.shadowRoot.querySelector(".ea-button")), d(this, l, this.shadowRoot.querySelector(".ea-button__icon")), this.updateContainerClasslist();
   }
   connectedCallback() {
     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) => {
+    super.connectedCallback(), (t = a(this, n)) == null || t.abort(), d(this, n, new AbortController()), this.addEventListener("keypress", a(this, h), {
+      signal: a(this, n).signal
+    }), this.addEventListener("click", (r) => {
       if (this["button-type"] === "submit") {
-        const r = this.getForm();
-        r && (o.preventDefault(), r.dispatchEvent(new Event("submit")));
+        const i = this.getForm();
+        i && (r.preventDefault(), i.dispatchEvent(new Event("submit")));
       } else if (this["button-type"] === "reset") {
-        const r = this.getForm();
-        r && (o.preventDefault(), r.reset());
+        const i = this.getForm();
+        i && (r.preventDefault(), i.reset());
       }
     });
   }
   $beforeUnmounted() {
     var t;
-    (t = e(this, n)) == null || t.abort();
+    (t = a(this, n)) == null || t.abort();
   }
 }
-a = new WeakMap(), l = new WeakMap(), n = new WeakMap(), c = new WeakMap();
-window.customElements.get("ea-button") || window.customElements.define("ea-button", A);
+o = new WeakMap(), l = new WeakMap(), n = new WeakMap(), h = new WeakMap();
+window.customElements.get("ea-button") || window.customElements.define("ea-button", w);
 class E extends v {
   constructor() {
     super();
@@ -213,13 +214,13 @@ class E extends v {
      * @property {string} type
      */
     /** @type {Properties}   */
-    d(this, "state", this.properties({
+    c(this, "state", this.properties({
       disabled: {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          this.querySelectorAll("ea-button").forEach((o) => {
-            o.setAttribute("disabled", t);
+          this.querySelectorAll("ea-button").forEach((r) => {
+            r.setAttribute("disabled", t);
           });
         }
       },
@@ -227,8 +228,8 @@ class E extends v {
         type: ["small", "normal", "large"],
         default: "normal",
         observer: (t) => {
-          this.querySelectorAll("ea-button").forEach((o) => {
-            o.setAttribute("size", t);
+          this.querySelectorAll("ea-button").forEach((r) => {
+            r.setAttribute("size", t);
           });
         }
       },
@@ -236,13 +237,13 @@ class E extends v {
         type: ["primary", "success", "warning", "danger", "normal"],
         default: "normal",
         observer: (t) => {
-          this.querySelectorAll("ea-button").forEach((o) => {
-            o.setAttribute("type", t);
+          this.querySelectorAll("ea-button").forEach((r) => {
+            r.setAttribute("type", t);
           });
         }
       }
     }));
-    this.stylesheet = w, this.$render();
+    this.stylesheet = A, this.$render();
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "disabled", "size", "type"];
@@ -260,6 +261,6 @@ class E extends v {
 }
 window.customElements.get("ea-button-group") || window.customElements.define("ea-button-group", E);
 export {
-  A as EaButton,
+  w as EaButton,
   E as EaButtonGroup
 };

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>