easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-drawer.js

@@ -1,72 +1,79 @@
-var _ = Object.defineProperty;
-var y = (t) => {
-  throw TypeError(t);
+var g = Object.defineProperty;
+var _ = (s) => {
+  throw TypeError(s);
 };
-var C = (t, s, e) => s in t ? _(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var b = (t, s, e) => C(t, typeof s != "symbol" ? s + "" : s, e), v = (t, s, e) => s.has(t) || y("Cannot " + e);
-var o = (t, s, e) => (v(t, s, "read from private field"), e ? e.call(t) : s.get(t)), a = (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, p) => (v(t, s, "write to private field"), p ? p.call(t, e) : s.set(t, e), e);
-import { EaOverlay as g } from "./ea-overlay.js";
-import { s as S } from "../css/ea-drawer.style.js";
-import { E } from "../utils/Utils.js";
-import { t as k } from "../utils/timeout.js";
-var i, u, l, h, c, n, f, w, m, d;
-class q extends g {
+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 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 {AbortController} */
-    a(this, i);
-    /** @type {HTMLElement} */
-    a(this, u);
     /** @type {HTMLElement} */
-    a(this, l);
-    /** @type {HTMLElement} */
-    a(this, h);
+    a(this, p);
     /** @type {HTMLElement} */
     a(this, c);
     /** @type {HTMLElement} */
-    a(this, n);
+    a(this, u);
     /** @type {HTMLElement} */
     a(this, f);
     /** @type {HTMLElement} */
+    a(this, n);
+    /** @type {HTMLElement} */
     a(this, w);
-    b(this, "state", this.properties({
+    /** @type {HTMLElement} */
+    a(this, b);
+    /** @type {AbortController} */
+    a(this, h);
+    a(this, r, {
+      /** @type {AbortController | null} */
+      showClose: null,
+      /** @type {AbortController | null} */
+      closeOnPressEscape: null
+    });
+    C(this, "state", this.properties({
       direction: {
         type: ["rtl", "ltr", "ttb", "btt"],
-        default: "rtl",
-        observer: (e) => {
-        }
+        default: "rtl"
       },
       visible: {
         type: Boolean,
         default: !1,
         repeatable: !0,
         observer: (e) => {
-          if (!e && this["before-close"] && this.status !== this.visible)
-            return o(this, d).call(this);
-          e && k(() => {
-            this.focus();
-          }, 0), this.status = e;
+          if (!e && this.beforeClose && this.status !== this.visible) {
+            this.visible = !e, t(this, d).call(this);
+            return;
+          }
+          e && R(() => this.focus(), 0), (e || !this.beforeClose) && (this.status = e);
         }
       },
       "with-header": {
         type: Boolean,
         default: !0,
         observer: (e) => {
-          o(this, h).style.display = e ? "flex" : "none";
+          t(this, u).style.display = e ? "flex" : "none";
         }
       },
       title: {
         type: String,
         default: "",
         observer: (e) => {
-          this["with-header"] && (o(this, c).textContent = e);
+          this["with-header"] && (t(this, f).textContent = e);
         }
       },
       showClose: {
         type: Boolean,
         default: !0,
         observer: (e) => {
-          this["with-header"] && (o(this, n).style.display = e ? "block" : "none");
+          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
+          }));
         }
       },
       size: {
@@ -78,25 +85,39 @@ class q extends g {
       },
       "append-to-body": {
         type: Boolean,
-        default: !1,
-        observer: (e) => {
-        }
+        default: !1
       },
       "close-on-press-escape": {
         type: Boolean,
         default: !0,
         observer: (e) => {
+          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
+          }));
         }
       }
     }));
-    a(this, m, (e, p) => {
-      p.innerHTML = `
+    C(this, "funcStates", this.properties({
+      beforeClose: {
+        rawFunction: !0,
+        props: !0,
+        type: Function,
+        default: null
+      }
+    }));
+    /**
+     * 初始化抽屉 DOM 结构
+     * @param {HTMLElement} container - 抽屉内容容器
+     */
+    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>
@@ -105,44 +126,47 @@ class q extends g {
           <slot name="footer"></slot>
         </footer>
       </div>
-    `, r(this, u, this.shadowRoot.querySelector(".ea-overlay")), r(this, l, this.shadowRoot.querySelector(".ea-drawer-main")), r(this, h, this.shadowRoot.querySelector(".ea-drawer-main__header")), r(this, c, this.shadowRoot.querySelector(".ea-drawer-main__title")), r(this, n, 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"
-      )), r(this, f, this.shadowRoot.querySelector(".ea-drawer-main__content")), r(this, w, 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"));
     });
+    /**
+     * 处理抽屉关闭前的回调
+     */
     a(this, d, () => {
-      this["before-close"] ? this.emit("before-close", {
-        detail: {
-          done: () => this.status = !1
-        }
-      }) : this.status = !1;
+      this.beforeClose ? this.beforeClose(() => {
+        this.status = !1, this.visible = !1;
+      }) : (this.status = !1, this.visible = !1);
     });
+    /**
+     * 处理键盘事件
+     * @param {KeyboardEvent} e - 键盘事件对象
+     */
+    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(
       ".ea-overlay__content"
     );
-    o(this, m).call(this, this.direction, e), this["append-to-body"] && document.body.appendChild(this);
+    t(this, m).call(this, e);
   }
   static get observedAttributes() {
-    return E.Array.toLowerCamelCase([
+    return q.Array.toLowerCamelCase([
       ...super.observedAttributes,
       "direction",
       "visible",
       "append-to-body",
       "append-to",
-      // "lock-scroll",
-      "before-close",
       "close-on-click-modal",
       "close-on-press-escape",
-      // "open-delay",
-      // "close-delay",
-      // "destroy-on-close",
       "modal",
-      // "resizable",
       "show-close",
       "size",
       "title",
       "with-header",
       "z-index",
-      "header-aria-level "
+      "header-aria-level"
     ]);
   }
   /**
@@ -150,7 +174,7 @@ class q extends g {
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    return `${super.updateContainerClasslist()} ${this.computedClasslist(
+    const e = `${super.updateContainerClasslist()} ${this.computedClasslist(
       "ea-drawer",
       {
         ["--" + this.direction]: this.direction
@@ -159,9 +183,11 @@ class q extends g {
         drawer: !0
       }
     )}`;
+    return t(this, p).className = e, e;
   }
   connectedCallback() {
-    r(this, i, new AbortController()), o(this, l).ariaModal = !0, o(this, l).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(
@@ -170,25 +196,21 @@ class q extends g {
         this.visible = !1;
       },
       {
-        signal: o(this, i).signal
+        signal: t(this, h).signal
       }
-    ), this["show-close"] && o(this, n).addEventListener("click", o(this, d), {
-      signal: o(this, i).signal
-    }), this["close-on-press-escape"] && this.addEventListener(
-      "keydown",
-      (e) => {
-        e.key === "Escape" && o(this, d).call(this);
-      },
-      { signal: o(this, i).signal }
-    ), super.connectedCallback(), this.assignedStyle(S);
+    ), 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 = o(this, i)) == 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;
   }
 }
-i = new WeakMap(), u = new WeakMap(), l = new WeakMap(), h = new WeakMap(), c = new WeakMap(), n = new WeakMap(), f = new WeakMap(), w = new WeakMap(), m = new WeakMap(), d = new WeakMap();
-window.customElements.get("ea-drawer") || window.customElements.define("ea-drawer", q);
+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 {
-  q as EaDrawer
+  B as EaDrawer
 };

package/dist/components/ea-empty.js

@@ -1,36 +1,40 @@
-var y = Object.defineProperty;
-var m = (t) => {
+var u = Object.defineProperty;
+var d = (t) => {
   throw TypeError(t);
 };
-var u = (t, s, e) => s in t ? y(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var c = (t, s, e) => u(t, typeof s != "symbol" ? s + "" : s, e), h = (t, s, e) => s.has(t) || m("Cannot " + e);
-var n = (t, s, e) => (h(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? m("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), a = (t, s, e, d) => (h(t, s, "write to private field"), d ? d.call(t, e) : s.set(t, e), e);
-import { B as g } from "./Base.js";
-import { s as v } from "../css/ea-empty.style.js";
-const _ = `
+var g = (t, s, e) => s in t ? u(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var c = (t, s, e) => g(t, typeof s != "symbol" ? s + "" : s, e), h = (t, s, e) => s.has(t) || d("Cannot " + e);
+var a = (t, s, e) => (h(t, s, "read from private field"), e ? e.call(t) : s.get(t)), r = (t, s, e) => s.has(t) ? d("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), p = (t, s, e, m) => (h(t, s, "write to private field"), m ? m.call(t, e) : s.set(t, e), e);
+import { B as v } from "./Base.js";
+import { s as _ } from "../css/ea-empty.style.js";
+const y = `
 <svg viewBox="25 30 50 50" xmlns="http://www.w3.org/2000/svg">
     <path d="M30 50v21.5a2 2 0 0 0 1 1h39a2 2 0 0 0 1-1V50H61a10 10 0 0 1-20 0h-6.5z" class="front" part="default-image-front" />
     <path d="M30.5 50.5L34 39h32.5l4 11.5" fill="none" class="border" part="default-image-border" />
 </svg>
 `;
-var p, i, r, l;
-class b extends g {
+var l, i, o, n;
+class f extends v {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    o(this, p);
+    r(this, l);
     /** @type {HTMLElement} */
-    o(this, i);
+    r(this, i);
     /** @type {HTMLElement} */
-    o(this, r);
+    r(this, o);
     /** @type {HTMLElement} */
-    o(this, l);
+    r(this, n);
     c(this, "state", this.properties({
       image: {
         type: String,
         default: "",
         observer: (e) => {
-          n(this, i).innerHTML = `<img class="ea-empty__image" src="${e}" alt="empty image" part="image" />`;
+          e ? a(this, i).innerHTML = this.html(`
+            <img class="ea-empty__image" src="${e}" alt="empty image" part="image" />
+          `) : a(this, i).innerHTML = this.html(`
+            <section class="ea-empty__default">${y}</section>
+          `);
         }
       },
       "image-size": {
@@ -48,21 +52,21 @@ class b extends g {
         type: String,
         default: "",
         observer: (e) => {
-          n(this, r).textContent = e;
+          e ? a(this, o).textContent = e : a(this, o).innerText = "No Data";
         }
       }
     }));
-    this.stylesheet = v, this.$render();
+    this.stylesheet = _, this.$render();
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "image", "image-size", "description"];
   }
   $render() {
-    this.shadowRoot.innerHTML = `
+    this.shadowRoot.innerHTML = this.html(`
       <div class='ea-empty' part='container'>
         <div class="ea-empty__placeholder" part="placeholder">
             <slot name="image">
-                <section class="ea-empty__default">${_}</section>
+              <section class="ea-empty__default">${y}</section>
             </slot>
         </div>
         <div class="ea-empty__description" part="description">
@@ -72,14 +76,18 @@ class b extends g {
             <slot></slot>
         </div>
       </div>
-    `, a(this, p, this.shadowRoot.querySelector(".ea-empty")), a(this, i, this.shadowRoot.querySelector(".ea-empty__placeholder")), a(this, r, this.shadowRoot.querySelector(".ea-empty__description")), a(this, l, this.shadowRoot.querySelector(".ea-empty__bottom"));
+    `), p(this, l, this.shadowRoot.querySelector(".ea-empty")), p(this, i, this.shadowRoot.querySelector(
+      ".ea-empty__placeholder slot[name='image']"
+    )), p(this, o, this.shadowRoot.querySelector(
+      ".ea-empty__description slot[name='description']"
+    )), p(this, n, this.shadowRoot.querySelector(".ea-empty__bottom"));
   }
   connectedCallback() {
     super.connectedCallback();
   }
 }
-p = new WeakMap(), i = new WeakMap(), r = new WeakMap(), l = new WeakMap();
-window.customElements.get("ea-empty") || window.customElements.define("ea-empty", b);
+l = new WeakMap(), i = new WeakMap(), o = new WeakMap(), n = new WeakMap();
+window.customElements.get("ea-empty") || window.customElements.define("ea-empty", f);
 export {
-  b as EaEmpty
+  f as EaEmpty
 };