easy-component-ui 3.0.10 → 3.0.12

package/dist/components/ea-overlay.js

@@ -1,42 +1,42 @@
 var b = Object.defineProperty;
-var f = (e) => {
+var v = (e) => {
   throw TypeError(e);
 };
-var w = (e, s, t) => s in e ? b(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var y = (e, s, t) => w(e, typeof s != "symbol" ? s + "" : s, t), p = (e, s, t) => s.has(e) || f("Cannot " + t);
-var o = (e, s, t) => (p(e, s, "read from private field"), t ? t.call(e) : s.get(e)), i = (e, s, t) => s.has(e) ? f("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), d = (e, s, t, n) => (p(e, s, "write to private field"), n ? n.call(e, t) : s.set(e, t), t);
-import { B as C } from "./Base.js";
+var C = (e, s, t) => s in e ? b(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var p = (e, s, t) => C(e, typeof s != "symbol" ? s + "" : s, t), y = (e, s, t) => s.has(e) || v("Cannot " + t);
+var o = (e, s, t) => (y(e, s, "read from private field"), t ? t.call(e) : s.get(e)), r = (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), d = (e, s, t, n) => (y(e, s, "write to private field"), n ? n.call(e, t) : s.set(e, t), t);
+import { B as w } from "./Base.js";
 import { s as k } from "../css/ea-overlay.style.js";
 import { t as g } from "../utils/timeout.js";
-var a, m, l, c, r, h, v;
-class E extends C {
+var a, u, l, c, i, f, m;
+class E extends w {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, a);
+    r(this, a);
     /** @type {HTMLElement} */
-    i(this, m);
+    r(this, u);
     /** @type {HTMLElement} */
-    i(this, l);
+    r(this, l);
     /** @type {AbortController} */
-    i(this, c);
-    y(this, "state", this.properties({
+    r(this, c);
+    p(this, "state", this.properties({
       status: {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          t ? (o(this, a).className = this.updateContainerClasslist(), o(this, r).call(this, "open"), requestAnimationFrame(() => {
+          t ? (o(this, a).className = this.updateContainerClasslist(), o(this, i).call(this, "open"), requestAnimationFrame(() => {
             o(this, a).classList.add("ea-overlay--is-show"), o(this, a).addEventListener(
               "transitionend",
               () => {
-                o(this, r).call(this, "opened");
+                o(this, i).call(this, "opened");
               },
               { once: !0 }
             );
-          })) : (o(this, a).classList.add("ea-overlay--before-close"), o(this, r).call(this, "close"), o(this, a).addEventListener(
+          })) : (o(this, a).classList.add("ea-overlay--before-close"), o(this, i).call(this, "close"), o(this, a).addEventListener(
             "transitionend",
             () => {
-              o(this, a).className = this.updateContainerClasslist(), o(this, r).call(this, "closed");
+              o(this, a).className = this.updateContainerClasslist(), o(this, i).call(this, "closed");
             },
             { once: !0 }
           ));
@@ -75,25 +75,31 @@ class E extends C {
       ].reduce((t, n) => (t[n] = {
         type: String,
         default: "",
-        observer: (u) => {
-          this.style.setProperty(`--ea-overlay-${n}`, u);
+        observer: (h) => {
+          this.style.setProperty(`--ea-overlay-${n}`, h);
         }
       }, t), {})
     }));
-    i(this, r, (t, n) => {
+    p(this, "funcStates", this.properties({
+      beforeClose: {
+        rawFunction: !0,
+        props: !0,
+        type: Function,
+        default: null
+      }
+    }));
+    r(this, i, (t, n) => {
       this.emit(t, {
         detail: n
         // bubbles: true,
         // composed: true,
       });
     });
-    i(this, h, () => this.status = !1);
-    i(this, v, (t) => {
+    r(this, f, () => this.status = !1);
+    r(this, m, (t) => {
       [...this.children].find(
-        (u) => u === t.target || u.contains(t.target)
-      ) || o(this, l) === t.target || o(this, l).contains(t.target) || (this["before-close"] ? this.emit("before-close", {
-        detail: { done: () => o(this, h).call(this) }
-      }) : o(this, h).call(this));
+        (h) => h === t.target || h.contains(t.target)
+      ) || o(this, l) === t.target || o(this, l).contains(t.target) || (this.beforeClose ? this.beforeClose(() => this.status = !1) : o(this, f).call(this));
     });
     this.stylesheet = k, this.$render(), document.activeElement.blur(), g(() => {
       this.focus();
@@ -103,7 +109,7 @@ class E extends C {
     return [
       "status",
       "modal",
-      "before-close",
+      // "before-close",
       "close-on-click-modal",
       "z-index",
       "background-color",
@@ -141,12 +147,12 @@ class E extends C {
                     <slot></slot>
                 </div>
             </div>
-        `, d(this, a, this.shadowRoot.querySelector(".ea-overlay")), d(this, m, this.shadowRoot.querySelector(".ea-overlay__mask")), d(this, l, this.shadowRoot.querySelector(
+        `, d(this, a, this.shadowRoot.querySelector(".ea-overlay")), d(this, u, this.shadowRoot.querySelector(".ea-overlay__mask")), d(this, l, this.shadowRoot.querySelector(
       ".ea-overlay__content"
     ));
   }
   connectedCallback() {
-    super.connectedCallback(), d(this, c, new AbortController()), this["close-on-click-modal"] && this.shadowRoot.addEventListener("click", o(this, v), {
+    super.connectedCallback(), d(this, c, new AbortController()), this["close-on-click-modal"] && this.shadowRoot.addEventListener("click", o(this, m), {
       signal: o(this, c).signal
     });
   }
@@ -154,7 +160,7 @@ class E extends C {
     o(this, c).abort();
   }
 }
-a = new WeakMap(), m = new WeakMap(), l = new WeakMap(), c = new WeakMap(), r = new WeakMap(), h = new WeakMap(), v = new WeakMap();
+a = new WeakMap(), u = new WeakMap(), l = new WeakMap(), c = new WeakMap(), i = new WeakMap(), f = new WeakMap(), m = new WeakMap();
 window.customElements.get("ea-overlay") || window.customElements.define("ea-overlay", E);
 export {
   E as EaOverlay

package/dist/components/ea-pagination.js

@@ -186,6 +186,7 @@ class W extends H {
     }));
     T(this, "propState", this.properties({
       pageSizes: {
+        props: !0,
         type: Array,
         default: [10, 20, 30, 40, 50, 100],
         /** @param {Array<number>} newVal */

package/dist/components/ea-popconfirm.js

@@ -1,49 +1,55 @@
-var I = Object.defineProperty;
-var $ = (e) => {
-  throw TypeError(e);
+var F = Object.defineProperty;
+var z = (n) => {
+  throw TypeError(n);
 };
-var R = (e, o, t) => o in e ? I(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t;
-var B = (e, o, t) => R(e, typeof o != "symbol" ? o + "" : o, t), E = (e, o, t) => o.has(e) || $("Cannot " + t);
-var n = (e, o, t) => (E(e, o, "read from private field"), t ? t.call(e) : o.get(e)), i = (e, o, t) => o.has(e) ? $("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, t), c = (e, o, t, r) => (E(e, o, "write to private field"), r ? r.call(e, t) : o.set(e, t), t), L = (e, o, t) => (E(e, o, "access private method"), t);
-import { EaPopper as z } from "./ea-popper.js";
-import { s as H } from "../css/ea-popconfirm.style.js";
-var b, l, h, w, q, y, a, p, x, g, m, f, u, v, S, k, C, d, _;
-class M extends z {
+var j = (n, i, t) => i in n ? F(n, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[i] = t;
+var H = (n, i, t) => j(n, typeof i != "symbol" ? i + "" : i, t), x = (n, i, t) => i.has(n) || z("Cannot " + t);
+var e = (n, i, t) => (x(n, i, "read from private field"), t ? t.call(n) : i.get(n)), s = (n, i, t) => i.has(n) ? z("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(n) : i.set(n, t), a = (n, i, t, o) => (x(n, i, "write to private field"), o ? o.call(n, t) : i.set(n, t), t), M = (n, i, t) => (x(n, i, "access private method"), t);
+import { EaPopper as D } from "./ea-popper.js";
+import { s as G } from "../css/ea-popconfirm.style.js";
+var v, p, f, B, L, d, u, m, $, C, b, y, h, c, S, _, U, g, w, q;
+class J extends D {
   constructor() {
     super();
-    i(this, S);
+    s(this, _);
     /** @type {HTMLElement} */
-    i(this, b);
+    s(this, v);
     /** @type {HTMLElement} */
-    i(this, l);
+    s(this, p);
     /** @type {HTMLElement} */
-    i(this, h);
+    s(this, f);
     /** @type {HTMLElement} */
-    i(this, w);
+    s(this, B);
     /** @type {HTMLElement} */
-    i(this, q);
+    s(this, L);
     /** @type {HTMLElement} */
-    i(this, y);
+    s(this, d);
     /** @type {HTMLElement} */
-    i(this, a);
+    s(this, u);
     /** @type {HTMLElement} */
-    i(this, p);
+    s(this, m);
     /** @type {HTMLElement} */
-    i(this, x);
+    s(this, $);
     /** @type {HTMLElement} */
-    i(this, g);
+    s(this, C);
     /** @type {HTMLElement} */
-    i(this, m);
+    s(this, b);
     /** @type {HTMLElement} */
-    i(this, f);
+    s(this, y);
     /** @type {AbortController} */
-    i(this, u);
-    B(this, "state", this.properties({
+    s(this, h);
+    s(this, c, {
+      /** @type {AbortController | null} */
+      globalClose: null,
+      /** @type {AbortController | null} */
+      customActions: null
+    });
+    H(this, "state", this.properties({
       title: {
         type: String,
         default: "",
         observer: (t) => {
-          n(this, f).innerText = t;
+          e(this, y).innerText = t;
         }
       },
       visible: {
@@ -57,7 +63,7 @@ class M extends z {
         type: String,
         default: "icon-help",
         observer: (t) => {
-          n(this, m).icon = t;
+          e(this, b).icon = t;
         }
       },
       "icon-color": {
@@ -85,93 +91,117 @@ class M extends z {
         type: String,
         default: "确定",
         observer: (t) => {
-          n(this, p).textContent = t;
+          e(this, m).textContent = t;
         }
       },
       "cancel-button-text": {
         type: String,
         default: "取消",
         observer: (t) => {
-          n(this, a).textContent = t;
+          e(this, u).textContent = t;
         }
       },
       "confirm-button-type": {
         type: ["normal", "primary", "success", "warning", "danger"],
         default: "primary",
         observer: (t) => {
-          n(this, p).type = t;
+          e(this, m).type = t;
         }
       },
       "cancel-button-type": {
         type: ["normal", "primary", "success", "warning", "danger"],
         default: "normal",
         observer: (t) => {
-          n(this, a).type = t;
+          e(this, u).type = t;
         }
       }
     }));
     /**
-     *
+     * 渲染title
      * @returns {{
      * titleContainer: HTMLElement,
      * titleIcon: HTMLElement,
      * titleContent: HTMLElement,
      * }}
      */
-    i(this, v, () => {
+    s(this, S, () => {
       const t = document.createElement("section");
       return t.classList.add("ea-popconfirm__title"), t.part = "title", t.innerHTML = `
-            ${this.icon ? `<ea-icon icon="${this.icon}" part="icon"></ea-icon>` : ""}
-            <span class="ea-popconfirm__title-content" part="title-content">${this.title}</span>
-        `, n(this, l).appendChild(t), {
+      ${this.icon ? `<ea-icon icon="${this.icon}" part="icon"></ea-icon>` : ""}
+      <span class="ea-popconfirm__title-content" part="title-content">${this.title}</span>
+    `, e(this, p).appendChild(t), {
         titleContainer: t,
-        titleIcon: t == null ? void 0 : t.querySelector("ea-icon"),
+        titleIcon: t.querySelector("ea-icon"),
         titleContent: t.querySelector(".ea-popconfirm__title-content")
       };
     });
-    i(this, C, () => {
-      const t = new AbortController();
-      c(this, u, t), n(this, l).querySelector("slot").remove(), this.assignedStyle(H);
-    });
     /**
-     *
+     * 初始化关闭事件
      * @param {HTMLElement} el
-     * @param {'cancel' | 'confirm'} closeEventName
+     * @param {'cancel' | 'confirm'} closeEventName 关闭事件名称
      */
-    i(this, d, (t, r) => {
+    s(this, g, (t, o) => {
       t && t.addEventListener(
         "click",
         () => {
-          this.dispatchEvent(new CustomEvent(r)), this.hide();
+          this.dispatchEvent(new CustomEvent(o)), this.hide();
         },
-        { signal: n(this, u).signal }
+        { signal: e(this, h).signal }
       );
     });
-    i(this, _, () => {
-      n(this, h).querySelector(
+    /**
+     * 初始化触发事件
+     */
+    s(this, w, () => {
+      const t = e(this, f).querySelector(
         'slot[name="reference"]'
-      ).addEventListener(
+      ), o = e(this, d).querySelector('slot[name="actions"]');
+      t.addEventListener(
         "click",
         () => {
-          const r = new AbortController();
-          this.toggle(), window.addEventListener(
+          this.open();
+        },
+        { signal: e(this, h).signal }
+      ), o.assignedElements().length ? e(this, q).call(this) : (e(this, g).call(this, e(this, u), "cancel"), e(this, g).call(this, e(this, m), "confirm"));
+    });
+    /**
+     * 初始化自定义 actions slot 的事件监听
+     */
+    s(this, q, () => {
+      var l;
+      const t = e(this, d).querySelector('slot[name="actions"]');
+      if (!t) return;
+      (l = e(this, c).customActions) == null || l.abort(), e(this, c).customActions = new AbortController();
+      const o = () => {
+        t.assignedElements().forEach((r) => {
+          var T, P, I, R;
+          const E = ((T = r.querySelector) == null ? void 0 : T.call(r, "[data-cancel]")) || ((P = r.matches) != null && P.call(r, "[data-cancel]") ? r : null), k = ((I = r.querySelector) == null ? void 0 : I.call(r, "[data-confirm]")) || ((R = r.matches) != null && R.call(r, "[data-confirm]") ? r : null);
+          E && E.addEventListener(
             "click",
-            (s) => {
-              this.contains(s.target) || (r.abort(), this.hide());
+            () => {
+              this.close(), this.dispatchEvent(new CustomEvent("cancel"));
             },
-            { signal: r.signal }
+            { signal: e(this, c).customActions.signal }
+          ), k && k.addEventListener(
+            "click",
+            () => {
+              this.close(), this.dispatchEvent(new CustomEvent("confirm"));
+            },
+            { signal: e(this, c).customActions.signal }
           );
-        },
-        { signal: n(this, u).signal }
-      ), n(this, d).call(this, n(this, a), "cancel"), n(this, d).call(this, n(this, p), "confirm");
+        });
+      };
+      t.addEventListener("slotchange", o, {
+        signal: e(this, c).customActions.signal
+      });
     });
-    c(this, b, this.shadowRoot.querySelector(".ea-popper")), c(this, l, this.shadowRoot.querySelector(
+    a(this, v, this.shadowRoot.querySelector(".ea-popper")), a(this, p, this.shadowRoot.querySelector(
       ".ea-popper__original"
-    )), c(this, h, this.shadowRoot.querySelector(
+    )), a(this, f, this.shadowRoot.querySelector(
       ".ea-popper__reference"
     ));
-    const { titleContainer: t, titleIcon: r, titleContent: s } = n(this, v).call(this), { footer: T, cancelButton: P, confirmButton: A } = L(this, S, k).call(this);
-    c(this, y, T), c(this, a, P), c(this, p, A), c(this, g, t), c(this, m, r), c(this, f, s);
+    const { titleContainer: t, titleIcon: o, titleContent: l } = e(this, S).call(this), { footer: A, cancelButton: r, confirmButton: E } = M(this, _, U).call(this);
+    a(this, d, A), a(this, u, r), a(this, m, E), a(this, C, t), a(this, b, o), a(this, y, l);
   }
   static get observedAttributes() {
     return [
@@ -187,15 +217,40 @@ class M extends z {
       "cancel-button-type"
     ];
   }
+  /**
+   * 打开 popconfirm
+   * @public
+   */
+  open() {
+    var o;
+    const t = (l) => {
+      var r;
+      this.contains(l.target) || ((r = e(this, c).globalClose) == null || r.abort(), this.hide());
+    };
+    this.show(), (o = e(this, c).globalClose) == null || o.abort(), e(this, c).globalClose = new AbortController(), window.addEventListener("click", t, {
+      signal: e(this, c).globalClose.signal
+    });
+  }
+  /**
+   * 关闭 popconfirm
+   * @public
+   */
+  close() {
+    var t;
+    this.hide(), (t = e(this, c).globalClose) == null || t.abort();
+  }
   connectedCallback() {
-    super.connectedCallback(), n(this, C).call(this), n(this, _).call(this);
+    var t, o;
+    super.connectedCallback(), (t = e(this, h)) == null || t.abort(), a(this, h, new AbortController()), (o = e(this, p).querySelector("slot")) == null || o.remove(), this.assignedStyle(G), e(this, w).call(this);
   }
   $beforeUnmounted() {
-    var t;
-    super.$beforeUnmounted(), (t = n(this, u)) == null || t.abort();
+    var t, o;
+    super.$beforeUnmounted(), (t = e(this, h)) == null || t.abort();
+    for (const l in e(this, c))
+      (o = e(this, c)[l]) == null || o.abort();
   }
 }
-b = new WeakMap(), l = new WeakMap(), h = new WeakMap(), w = new WeakMap(), q = new WeakMap(), y = new WeakMap(), a = new WeakMap(), p = new WeakMap(), x = new WeakMap(), g = new WeakMap(), m = new WeakMap(), f = new WeakMap(), u = new WeakMap(), v = new WeakMap(), S = new WeakSet(), /**
+v = new WeakMap(), p = new WeakMap(), f = new WeakMap(), B = new WeakMap(), L = new WeakMap(), d = new WeakMap(), u = new WeakMap(), m = new WeakMap(), $ = new WeakMap(), C = new WeakMap(), b = new WeakMap(), y = new WeakMap(), h = new WeakMap(), c = new WeakMap(), S = new WeakMap(), _ = new WeakSet(), /**
  * 渲染footer
  * @return {{
  *  footer: HTMLElement,
@@ -203,18 +258,18 @@ b = new WeakMap(), l = new WeakMap(), h = new WeakMap(), w = new WeakMap(), q =
  *  confirmButton: HTMLElement,
  * }}
  */
-k = function() {
-  const t = '<slot name="actions"></slot>', r = `
-            <ea-button type="${this["cancel-button-type"]}" class="ea-popconfirm__cancel" size="small" part="cancel-button" text>${this["cancel-button-text"]}</ea-button>
-            <ea-button type="${this["confirm-button-type"]}" class="ea-popconfirm__confirm" part="confirm-button" size="small">${this["confirm-button-text"]}</ea-button>
-        `, s = document.createElement("footer");
-  return s.classList.add("ea-popconfirm__footer"), s.part = "footer", s.innerHTML = this.querySelector('[slot="actions"]') ? t : r, n(this, l).appendChild(s), {
-    footer: s,
-    cancelButton: s.querySelector(".ea-popconfirm__cancel") || this.querySelector("[data-cancel]"),
-    confirmButton: s.querySelector(".ea-popconfirm__confirm") || this.querySelector("[data-confirm]")
+U = function() {
+  const t = `<slot name="actions">
+      <ea-button type="${this["cancel-button-type"]}" class="ea-popconfirm__cancel" size="small" part="cancel-button" text>${this["cancel-button-text"]}</ea-button>
+      <ea-button type="${this["confirm-button-type"]}" class="ea-popconfirm__confirm" part="confirm-button" size="small">${this["confirm-button-text"]}</ea-button>
+    </slot>`, o = document.createElement("footer");
+  return o.classList.add("ea-popconfirm__footer"), o.part = "footer", o.innerHTML = t, e(this, p).appendChild(o), {
+    footer: o,
+    cancelButton: o.querySelector(".ea-popconfirm__cancel"),
+    confirmButton: o.querySelector(".ea-popconfirm__confirm")
   };
-}, C = new WeakMap(), d = new WeakMap(), _ = new WeakMap();
-window.customElements.get("ea-popconfirm") || window.customElements.define("ea-popconfirm", M);
+}, g = new WeakMap(), w = new WeakMap(), q = new WeakMap();
+window.customElements.get("ea-popconfirm") || window.customElements.define("ea-popconfirm", J);
 export {
-  M as EaPopconfirm
+  J as EaPopconfirm
 };

package/dist/components/ea-popper.js

@@ -169,15 +169,15 @@ class R extends C {
   }
   $render() {
     this.shadowRoot.innerHTML = `
-            <div class='ea-popper' part='container' tabindex='-1'>
-                <div class='ea-popper__reference' part='reference' tabindex='-1'>
-                    <div class='ea-popper__original' part='original' tabindex='0'>
-                        <slot></slot>
-                    </div>
-                    <slot name='reference'></slot>
-                </div>
-            </div>
-        `, c(this, o, this.shadowRoot.querySelector(".ea-popper")), c(this, a, this.shadowRoot.querySelector(
+      <div class='ea-popper' part='container' tabindex='-1'>
+        <div class='ea-popper__reference' part='reference' tabindex='-1'>
+          <div class='ea-popper__original' part='original' tabindex='0'>
+            <slot></slot>
+          </div>
+          <slot name='reference'></slot>
+        </div>
+      </div>
+    `, c(this, o, this.shadowRoot.querySelector(".ea-popper")), c(this, a, this.shadowRoot.querySelector(
       ".ea-popper__original"
     )), c(this, f, this.shadowRoot.querySelector(
       ".ea-popper__reference"