easy-component-ui 3.0.12 → 3.0.13

package/dist/components/ea-container.js

@@ -1,93 +1,121 @@
-var u = Object.defineProperty;
-var h = (t) => {
+var b = Object.defineProperty;
+var f = (t) => {
   throw TypeError(t);
 };
-var p = (t, s, e) => s in t ? u(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var r = (t, s, e) => p(t, typeof s != "symbol" ? s + "" : s, e), m = (t, s, e) => s.has(t) || h("Cannot " + e);
-var i = (t, s, e) => s.has(t) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), n = (t, s, e, a) => (m(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
-import { B as o } from "./Base.js";
-import { s as f } from "../css/ea-container.style.js";
-import { s as w } from "../css/ea-header.style.js";
-import { s as y } from "../css/ea-main.style.js";
-import { s as b } from "../css/ea-footer.style.js";
-import { s as g } from "../css/ea-aside.style.js";
-var c;
-class E extends o {
+var g = (t, s, e) => s in t ? b(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var n = (t, s, e) => g(t, typeof s != "symbol" ? s + "" : s, e), y = (t, s, e) => s.has(t) || f("Cannot " + e);
+var r = (t, s, e) => (y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), a = (t, s, e, d) => (y(t, s, "write to private field"), d ? d.call(t, e) : s.set(t, e), e);
+import { B as c } from "./Base.js";
+import { s as w } from "../css/ea-container.style.js";
+import { s as C } from "../css/ea-header.style.js";
+import { s as E } from "../css/ea-main.style.js";
+import { s as $ } from "../css/ea-footer.style.js";
+import { s as v } from "../css/ea-aside.style.js";
+var h, l, i, u;
+class S extends c {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, c);
-    /** 
+    o(this, h);
+    /** @type {SlotElement} */
+    o(this, l);
+    /** @type {AbortController} */
+    o(this, i);
+    /**
      * @typedef {Object} State
      * @property {string} direction 排列方向
      */
     /** @type {State} */
-    r(this, "state", this.properties({
+    n(this, "state", this.properties({
       direction: {
         type: ["horizontal", "vertical"],
         default: "horizontal",
-        observer: (e) => {
-          this.style.setProperty("--ea-container-direction", e === "vertical" ? "column" : "row");
+        observer: () => {
+          this.updateContainerClasslist();
         }
       }
     }));
-    this.stylesheet = f, this.$render();
+    /**
+     * 处理槽位变化事件
+     */
+    o(this, u, () => {
+      const e = [...this.querySelectorAll("& > *")].map(
+        (d) => d.tagName.toLowerCase()
+      );
+      this.hasAttribute("direction") || (e.includes("ea-header") || e.includes("ea-footer") ? this.direction = "vertical" : this.direction = "horizontal");
+    });
+    this.stylesheet = w, this.$render();
   }
   static get observedAttributes() {
-    return ["direction"];
+    return [...super.observedAttributes, "direction"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist("ea-container", {
+      [`--${this.direction}`]: this.direction
+    });
+    return r(this, h).className = e, e;
   }
   $render() {
     this.shadowRoot.innerHTML = `
-            <div class="ea-container" part="container">
-                <slot></slot>
-            </div>
-        `, n(this, c, this.shadowRoot.querySelector(".ea-container"));
+        <div class="ea-container" part="container">
+            <slot></slot>
+        </div>
+    `, a(this, h, this.shadowRoot.querySelector(".ea-container")), a(this, l, this.shadowRoot.querySelector("slot"));
   }
   connectedCallback() {
-    super.connectedCallback();
-    const e = [...this.children].map((a) => a.tagName.toLowerCase());
-    e.includes("ea-header") || e.includes("ea-footer") ? this.direction = "vertical" : this.direction = "horizontal";
+    var e;
+    super.connectedCallback(), (e = r(this, i)) == null || e.abort(), a(this, i, new AbortController()), r(this, l).addEventListener("slotchange", r(this, u), {
+      signal: r(this, i).signal
+    });
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = r(this, i)) == null || e.abort();
   }
 }
-c = new WeakMap();
-customElements.get("ea-container") || customElements.define("ea-container", E);
-class $ extends o {
+h = new WeakMap(), l = new WeakMap(), i = new WeakMap(), u = new WeakMap();
+customElements.get("ea-container") || customElements.define("ea-container", S);
+class k extends c {
   constructor() {
     super();
-    /** 
+    /**
      * @typedef {Object} State
      * @property {string} height
      */
     /** @type {State} */
-    r(this, "state", this.properties({
+    n(this, "state", this.properties({
       height: {
         type: String,
         default: "60px",
         observer: (e) => {
-          this.style.setProperty("--ea-header-height", e);
+          e && CSS.supports("height", e) ? this.style.setProperty("--ea-header-height", e) : e ? this.style.setProperty("--ea-header-height", "60px") : this.style.setProperty("--ea-header-height", "auto");
         }
       }
     }));
-    this.stylesheet = w, this.$render();
+    this.stylesheet = C, this.$render();
   }
   static get observedAttributes() {
     return ["height"];
   }
   $render() {
     this.shadowRoot.innerHTML = `
-            <header class="ea-header" part="container">
-                <slot></slot>
-            </header>
-        `;
+      <header class="ea-header" part="container">
+        <slot></slot>
+      </header>
+    `;
   }
   connectedCallback() {
     super.connectedCallback();
   }
 }
-window.customElements.get("ea-header") || window.customElements.define("ea-header", $);
-class v extends o {
+window.customElements.get("ea-header") || window.customElements.define("ea-header", k);
+class x extends c {
   constructor() {
-    super(), this.stylesheet = y, this.$render();
+    super(), this.stylesheet = E, this.$render();
   }
   $render() {
     this.shadowRoot.innerHTML = `
@@ -100,27 +128,28 @@ class v extends o {
     super.connectedCallback();
   }
 }
-window.customElements.get("ea-main") || window.customElements.define("ea-main", v);
-var d;
-class C extends o {
+window.customElements.get("ea-main") || window.customElements.define("ea-main", x);
+var p;
+class A extends c {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, d);
-    /** 
+    o(this, p);
+    /**
      * @typedef {Object} State
+     * @property {string} height
      */
     /** @type {State} */
-    r(this, "state", this.properties({
+    n(this, "state", this.properties({
       height: {
         type: String,
         default: "60px",
         observer: (e) => {
-          this.style.setProperty("--ea-footer-height", e);
+          e && CSS.supports("height", e) ? this.style.setProperty("--ea-footer-height", e) : e ? this.style.setProperty("--ea-footer-height", "60px") : this.style.setProperty("--ea-footer-height", "auto");
         }
       }
     }));
-    this.stylesheet = b, this.$render();
+    this.stylesheet = $, this.$render();
   }
   static get observedAttributes() {
     return ["height"];
@@ -130,25 +159,25 @@ class C extends o {
             <footer class="ea-footer" part="container">
                 <slot></slot>
             </footer>
-        `, n(this, d, this.shadowRoot.querySelector(".ea-footer"));
+        `, a(this, p, this.shadowRoot.querySelector(".ea-footer"));
   }
   connectedCallback() {
     super.connectedCallback();
   }
 }
-d = new WeakMap();
-window.customElements.get("ea-footer") || window.customElements.define("ea-footer", C);
-var l;
-class k extends o {
+p = new WeakMap();
+window.customElements.get("ea-footer") || window.customElements.define("ea-footer", A);
+var m;
+class R extends c {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, l);
-    /** 
+    o(this, m);
+    /**
      * @typedef {Object} State
      */
     /** @type {State} */
-    r(this, "state", this.properties({
+    n(this, "state", this.properties({
       width: {
         type: String,
         default: "300px",
@@ -157,7 +186,7 @@ class k extends o {
         }
       }
     }));
-    this.stylesheet = g, this.$render();
+    this.stylesheet = v, this.$render();
   }
   static get observedAttributes() {
     return ["width"];
@@ -167,11 +196,11 @@ class k extends o {
             <aside class="ea-aside" part="container">
                 <slot></slot>
             </aside>
-        `, n(this, l, this.shadowRoot.querySelector(".ea-aside"));
+        `, a(this, m, this.shadowRoot.querySelector(".ea-aside"));
   }
   connectedCallback() {
     super.connectedCallback();
   }
 }
-l = new WeakMap();
-window.customElements.get("ea-aside") || window.customElements.define("ea-aside", k);
+m = new WeakMap();
+window.customElements.get("ea-aside") || window.customElements.define("ea-aside", R);

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

@@ -542,7 +542,7 @@ class Yt extends ft {
     this.shadowRoot.innerHTML = this.html(`
       <div class='${e.b()}' part='container'>
         <div class='${e.e("input-wrap")}' part='input-wrap'>
-          <ea-input class="${e.e("input")}" part='input' prefix-icon="icon-calendar-times-o" readonly></ea-input>
+          <ea-input class="${e.e("input")}" part='input' prefix-icon="calendar-xmark" readonly></ea-input>
         </div>
         <div class='${e.e("dropdown-wrap")}' part='dropdown-wrap'>
           <div class='${e.e("calendar-wrapper")}'>

package/dist/components/ea-dialog.js

@@ -9,7 +9,7 @@ import { EaOverlay as E } from "./ea-overlay.js";
 import { s as B } from "../css/ea-dialog.style.js";
 import { t as C } from "../utils/timeout.js";
 var n, h, c, p, r, i, b, f, g;
-class A extends E {
+class k extends E {
   constructor() {
     super();
     /** @type {HTMLElement} */
@@ -168,7 +168,7 @@ class A extends E {
         <header class='ea-dialog-main__header' part='header'>
           <slot name="header">
             <span class='ea-dialog-main__title' part='title'></span>
-            <ea-icon class='ea-dialog-main__close-icon' icon='icon-cancel' part='close-icon'></ea-icon>          
+            <ea-icon class='ea-dialog-main__close-icon' name='xmark' part='close-icon'></ea-icon>          
           </slot>
         </header>
         <main class='ea-dialog-main__content' part='content'>
@@ -243,7 +243,7 @@ class A extends E {
   }
 }
 n = new WeakMap(), h = new WeakMap(), c = new WeakMap(), p = new WeakMap(), r = new WeakMap(), i = new WeakMap(), b = new WeakMap(), f = new WeakMap(), g = new WeakMap();
-window.customElements.get("ea-dialog") || window.customElements.define("ea-dialog", A);
+window.customElements.get("ea-dialog") || window.customElements.define("ea-dialog", k);
 export {
-  A as EaDialog
+  k as EaDialog
 };

package/dist/components/ea-drawer.js

@@ -1,35 +1,35 @@
-var E = Object.defineProperty;
-var v = (s) => {
+var g = Object.defineProperty;
+var _ = (s) => {
   throw TypeError(s);
 };
-var g = (s, o, e) => o in s ? E(s, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[o] = e;
-var C = (s, o, e) => g(s, typeof o != "symbol" ? o + "" : o, e), _ = (s, o, e) => o.has(s) || v("Cannot " + e);
-var t = (s, o, e) => (_(s, o, "read from private field"), e ? e.call(s) : o.get(s)), r = (s, o, e) => o.has(s) ? v("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(s) : o.set(s, e), a = (s, o, e, l) => (_(s, o, "write to private field"), l ? l.call(s, e) : o.set(s, e), e);
-import { EaOverlay as S } from "./ea-overlay.js";
-import { s as k } from "../css/ea-drawer.style.js";
+var S = (s, o, e) => o in s ? g(s, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[o] = e;
+var C = (s, o, e) => S(s, typeof o != "symbol" ? o + "" : o, e), E = (s, o, e) => o.has(s) || _("Cannot " + e);
+var t = (s, o, e) => (E(s, o, "read from private field"), e ? e.call(s) : o.get(s)), a = (s, o, e) => o.has(s) ? _("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(s) : o.set(s, e), l = (s, o, e, i) => (E(s, o, "write to private field"), i ? i.call(s, e) : o.set(s, e), e);
+import { EaOverlay as k } from "./ea-overlay.js";
+import { s as A } from "../css/ea-drawer.style.js";
 import { E as q } from "../utils/Utils.js";
-import { t as A } from "../utils/timeout.js";
-var f, h, p, u, d, w, b, n, i, m, c, y;
-class R extends S {
+import { t as R } from "../utils/timeout.js";
+var p, c, u, f, n, w, b, h, r, m, d, y;
+class B extends k {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    r(this, f);
+    a(this, p);
     /** @type {HTMLElement} */
-    r(this, h);
+    a(this, c);
     /** @type {HTMLElement} */
-    r(this, p);
+    a(this, u);
     /** @type {HTMLElement} */
-    r(this, u);
+    a(this, f);
     /** @type {HTMLElement} */
-    r(this, d);
+    a(this, n);
     /** @type {HTMLElement} */
-    r(this, w);
+    a(this, w);
     /** @type {HTMLElement} */
-    r(this, b);
+    a(this, b);
     /** @type {AbortController} */
-    r(this, n);
-    r(this, i, {
+    a(this, h);
+    a(this, r, {
       /** @type {AbortController | null} */
       showClose: null,
       /** @type {AbortController | null} */
@@ -46,33 +46,33 @@ class R extends S {
         repeatable: !0,
         observer: (e) => {
           if (!e && this.beforeClose && this.status !== this.visible) {
-            this.visible = !e, t(this, c).call(this);
+            this.visible = !e, t(this, d).call(this);
             return;
           }
-          e && A(() => this.focus(), 0), (e || !this.beforeClose) && (this.status = e);
+          e && R(() => this.focus(), 0), (e || !this.beforeClose) && (this.status = e);
         }
       },
       "with-header": {
         type: Boolean,
         default: !0,
         observer: (e) => {
-          t(this, p).style.display = e ? "flex" : "none";
+          t(this, u).style.display = e ? "flex" : "none";
         }
       },
       title: {
         type: String,
         default: "",
         observer: (e) => {
-          this["with-header"] && (t(this, u).textContent = e);
+          this["with-header"] && (t(this, f).textContent = e);
         }
       },
       showClose: {
         type: Boolean,
         default: !0,
         observer: (e) => {
-          var l;
-          (l = t(this, i).showClose) == null || l.abort(), t(this, i).showClose = null, this["with-header"] && (t(this, d).style.display = e ? "block" : "none"), e && (t(this, i).showClose = new AbortController(), t(this, d).addEventListener("click", t(this, c), {
-            signal: t(this, i).showClose.signal
+          var i;
+          (i = t(this, r).showClose) == null || i.abort(), t(this, r).showClose = null, this["with-header"] && (t(this, n).style.display = e ? "block" : "none"), e && (t(this, r).showClose = new AbortController(), t(this, n).addEventListener("click", t(this, d), {
+            signal: t(this, r).showClose.signal
           }));
         }
       },
@@ -91,9 +91,9 @@ class R extends S {
         type: Boolean,
         default: !0,
         observer: (e) => {
-          var l;
-          (l = t(this, i).closeOnPressEscape) == null || l.abort(), t(this, i).closeOnPressEscape = null, e && (t(this, i).closeOnPressEscape = new AbortController(), document.addEventListener("keydown", t(this, y), {
-            signal: t(this, i).closeOnPressEscape.signal
+          var i;
+          (i = t(this, r).closeOnPressEscape) == null || i.abort(), t(this, r).closeOnPressEscape = null, e && (t(this, r).closeOnPressEscape = new AbortController(), document.addEventListener("keydown", t(this, y), {
+            signal: t(this, r).closeOnPressEscape.signal
           }));
         }
       }
@@ -110,14 +110,14 @@ class R extends S {
      * 初始化抽屉 DOM 结构
      * @param {HTMLElement} container - 抽屉内容容器
      */
-    r(this, m, (e) => {
+    a(this, m, (e) => {
       e.innerHTML = `
       <div class="ea-drawer-main" part="container">
         <header class="ea-drawer-main__header" part="header">
           <span class="ea-drawer-main__title" part="title">
             <slot name="title"></slot>
           </span>
-          <ea-icon class="ea-drawer-main__close-icon" icon="icon-cancel" part="close-icon"></ea-icon>
+          <ea-icon class="ea-drawer-main__close-icon" name="xmark" part="close-icon"></ea-icon>
         </header>
         <main class="ea-drawer-main__content" part="content">
           <slot></slot>
@@ -126,14 +126,14 @@ class R extends S {
           <slot name="footer"></slot>
         </footer>
       </div>
-    `, a(this, f, this.shadowRoot.querySelector(".ea-overlay")), a(this, h, this.shadowRoot.querySelector(".ea-drawer-main")), a(this, p, this.shadowRoot.querySelector(".ea-drawer-main__header")), a(this, u, this.shadowRoot.querySelector(".ea-drawer-main__title")), a(this, d, this.shadowRoot.querySelector(
+    `, l(this, p, this.shadowRoot.querySelector(".ea-overlay")), l(this, c, this.shadowRoot.querySelector(".ea-drawer-main")), l(this, u, this.shadowRoot.querySelector(".ea-drawer-main__header")), l(this, f, this.shadowRoot.querySelector(".ea-drawer-main__title")), l(this, n, this.shadowRoot.querySelector(
         ".ea-drawer-main__close-icon"
-      )), a(this, w, this.shadowRoot.querySelector(".ea-drawer-main__content")), a(this, b, this.shadowRoot.querySelector(".ea-drawer-main__footer"));
+      )), l(this, w, this.shadowRoot.querySelector(".ea-drawer-main__content")), l(this, b, this.shadowRoot.querySelector(".ea-drawer-main__footer"));
     });
     /**
      * 处理抽屉关闭前的回调
      */
-    r(this, c, () => {
+    a(this, d, () => {
       this.beforeClose ? this.beforeClose(() => {
         this.status = !1, this.visible = !1;
       }) : (this.status = !1, this.visible = !1);
@@ -142,8 +142,8 @@ class R extends S {
      * 处理键盘事件
      * @param {KeyboardEvent} e - 键盘事件对象
      */
-    r(this, y, (e) => {
-      e.key === "Escape" && this.visible && t(this, c).call(this);
+    a(this, y, (e) => {
+      e.key === "Escape" && this.visible && t(this, d).call(this);
     });
     this["append-to-body"] && document.body.appendChild(this);
     const e = this.shadowRoot.querySelector(
@@ -174,7 +174,7 @@ class R extends S {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    return `${super.updateContainerClasslist()} ${this.computedClasslist(
+    const e = `${super.updateContainerClasslist()} ${this.computedClasslist(
       "ea-drawer",
       {
         ["--" + this.direction]: this.direction
@@ -183,10 +183,11 @@ class R extends S {
         drawer: !0
       }
     )}`;
+    return t(this, p).className = e, e;
   }
   connectedCallback() {
-    var e;
-    (e = t(this, n)) == null || e.abort(), a(this, n, new AbortController()), t(this, h).ariaModal = !0, t(this, h).role = "dialog", this["close-on-click-modal"] = this.getAttrBoolean(
+    var e, i;
+    (e = t(this, h)) == null || e.abort(), l(this, h, new AbortController()), t(this, c).ariaModal = !0, t(this, c).role = "dialog", this["close-on-click-modal"] = this.getAttrBoolean(
       "close-on-click-modal",
       !0
     ), this.addEventListener(
@@ -195,17 +196,21 @@ class R extends S {
         this.visible = !1;
       },
       {
-        signal: t(this, n).signal
+        signal: t(this, h).signal
       }
-    ), super.connectedCallback(), this.assignedStyle(k);
+    ), this["show-close"] && ((i = t(this, r).showClose) == null || i.abort(), t(this, r).showClose = new AbortController(), t(this, n).addEventListener("click", t(this, d), {
+      signal: t(this, r).showClose.signal
+    })), super.connectedCallback(), this.assignedStyle(A);
   }
   $beforeUnmounted() {
-    var e;
-    (e = t(this, n)) == null || e.abort();
+    var e, i;
+    (e = t(this, h)) == null || e.abort();
+    for (const v in t(this, r))
+      (i = t(this, r)[v]) == null || i.abort(), t(this, r)[v] = null;
   }
 }
-f = new WeakMap(), h = new WeakMap(), p = new WeakMap(), u = new WeakMap(), d = new WeakMap(), w = new WeakMap(), b = new WeakMap(), n = new WeakMap(), i = new WeakMap(), m = new WeakMap(), c = new WeakMap(), y = new WeakMap();
-window.customElements.get("ea-drawer") || window.customElements.define("ea-drawer", R);
+p = new WeakMap(), c = new WeakMap(), u = new WeakMap(), f = new WeakMap(), n = new WeakMap(), w = new WeakMap(), b = new WeakMap(), h = new WeakMap(), r = new WeakMap(), m = new WeakMap(), d = new WeakMap(), y = new WeakMap();
+window.customElements.get("ea-drawer") || window.customElements.define("ea-drawer", B);
 export {
-  R as EaDrawer
+  B as EaDrawer
 };