easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-pagination.js

@@ -0,0 +1,480 @@
+var F = Object.defineProperty;
+var q = (r) => {
+  throw TypeError(r);
+};
+var B = (r, n, e) => n in r ? F(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e;
+var T = (r, n, e) => B(r, typeof n != "symbol" ? n + "" : n, e), $ = (r, n, e) => n.has(r) || q("Cannot " + e);
+var t = (r, n, e) => ($(r, n, "read from private field"), e ? e.call(r) : n.get(r)), l = (r, n, e) => n.has(r) ? q("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, e), u = (r, n, e, i) => ($(r, n, "write to private field"), i ? i.call(r, e) : n.set(r, e), e), C = (r, n, e) => ($(r, n, "access private method"), e);
+import { B as H } from "./Base.js";
+import { s as J } from "../css/ea-pagination.style.js";
+import { E as R } from "../utils/Utils.js";
+import { E as O } from "../utils/Variables.js";
+const D = (r, n, e) => R.EaElement.h(
+  "span",
+  `ea-pagination__page ${r === n ? "is-active" : ""}`.trim(),
+  {
+    part: "page",
+    tabindex: 0,
+    "data-page": r,
+    "aria-label": `page ${r}`,
+    "aria-current": r === n
+  },
+  e || r
+), U = (r, n) => R.EaElement.h(
+  "span",
+  "ea-pagination__page ea-pagination__more",
+  {
+    part: "more",
+    "aria-label": n === "next" ? "Next 5 pages" : "Previous 5 pages",
+    tabindex: 0,
+    "data-action": n
+  },
+  r
+);
+class G extends Event {
+  constructor(n) {
+    super("ea-current-change", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = n;
+  }
+}
+class Z extends Event {
+  constructor(n) {
+    super("ea-prev-click", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = n;
+  }
+}
+class K extends Event {
+  constructor(n) {
+    super("ea-next-click", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = n;
+  }
+}
+class Q extends Event {
+  constructor(n) {
+    super("ea-size-change", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = n;
+  }
+}
+var z, c, b, m, p, y, d, g, h, S, P, A, k, I, M, j, L, N, v, E;
+class W extends H {
+  constructor() {
+    super();
+    l(this, v);
+    /** @type {HTMLElement} */
+    l(this, z);
+    /** @type {HTMLElement} */
+    l(this, c);
+    /** @type {HTMLElement} */
+    l(this, b);
+    /** @type {HTMLElement} */
+    l(this, m);
+    /** @type {HTMLElement} */
+    l(this, p);
+    /** @type {HTMLElement} */
+    l(this, y);
+    /** @type {HTMLElement} */
+    l(this, d);
+    l(this, g, {
+      isFirstRender: !0,
+      isEaInputImported: !1,
+      isEaSelectImported: !1
+    });
+    l(this, h, {
+      /** @type {AbortController | null} */
+      paginationAbortController: null,
+      /** @type {AbortController | null} */
+      prevAbortController: null,
+      /** @type {AbortController | null} */
+      nextAbortController: null,
+      /** @type {AbortController | null} */
+      jumperAbortController: null,
+      /** @type {AbortController | null} */
+      sizesAbortController: null
+    });
+    T(this, "state", this.properties({
+      "default-page-size": {
+        type: Number,
+        default: 10,
+        /** @param {number} newVal */
+        observer: () => {
+          t(this, g).isFirstRender || C(this, v, E).call(this);
+        }
+      },
+      "page-size": {
+        type: Number,
+        default: () => this["default-page-size"],
+        /** @param {number} newVal */
+        observer: (e) => {
+          t(this, g).isFirstRender || (C(this, v, E).call(this), this.dispatchEvent(
+            new Q({
+              pageSize: e
+            })
+          ));
+        }
+      },
+      "pager-count": {
+        type: Number,
+        default: 7,
+        /** @param {number} newVal */
+        observer: () => {
+        }
+      },
+      total: {
+        type: Number,
+        default: 0,
+        /** @param {number} newVal */
+        observer: () => {
+          t(this, c) && this.layout.includes("pager") && C(this, v, E).call(this), this["hide-on-single-page"] && this.updateContainerClasslist();
+        }
+      },
+      "current-page": {
+        type: Number,
+        default: 1,
+        /** @param {number} newVal */
+        observer: (e) => {
+          var i;
+          t(this, g).isFirstRender || (t(this, S).call(this, e), t(this, p) && ((i = this.layout) != null && i.includes("jumper")) && (t(this, p).value = e), this.emit("change", {
+            detail: {
+              currentPage: e,
+              pageSize: this["page-size"]
+            }
+          }), this.dispatchEvent(
+            new G({ value: e })
+          ), this.updateContainerClasslist());
+        }
+      },
+      background: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      size: {
+        type: O,
+        default: "",
+        observer: (e) => {
+          t(this, d) && t(this, d).setAttribute("size", e), t(this, p) && t(this, p).setAttribute("size", e), this.updateContainerClasslist();
+        }
+      },
+      "hide-on-single-page": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          t(this, c) && this.layout.includes("pager") && this.updateContainerClasslist();
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist(), this.layout.includes("jumper") && t(this, p) && (t(this, p).disabled = e);
+        }
+      }
+    }));
+    T(this, "propState", this.properties({
+      pageSizes: {
+        type: Array,
+        default: [10, 20, 30, 40, 50, 100],
+        /** @param {Array<number>} newVal */
+        observer: (e) => {
+          t(this, g).isFirstRender || C(this, v, E).call(this);
+        }
+      },
+      layout: {
+        props: !0,
+        type: Array,
+        default: ["prev", "pager", "next", "jumper", "->", "total"],
+        /** @param {Array<'prev' | 'pager' | 'next' | '->' | 'jumper' | 'total' | 'sizes'>} newVal */
+        observer: (e) => {
+          t(this, g).isFirstRender || C(this, v, E).call(this);
+        }
+      }
+    }));
+    /**
+     * 更新页码样式
+     * @param {Number} [currentPage]
+     */
+    l(this, S, (e = this["current-page"]) => {
+      var a;
+      if (!t(this, c) || !((a = this.layout) != null && a.includes("pager"))) return;
+      t(this, c).innerHTML = t(this, A).call(this, e);
+      const i = t(this, c).querySelectorAll(".ea-pagination__page"), s = t(this, c).querySelector(
+        `.ea-pagination__page[data-page="${e}"]`
+      );
+      i.forEach((o) => {
+        o.classList.toggle("is-active", o === s), o.setAttribute("aria-current", o === s);
+      });
+    });
+    /**
+     * 获取分页器范围
+     * @param {number} newVal 当前页码
+     * @return {Array<number | string>} 分页器范围
+     */
+    l(this, P, (e) => {
+      const i = Math.ceil(this.total / this["page-size"]), s = Math.floor(this["pager-count"] / 2), o = ((_, w) => {
+        const x = [];
+        for (let f = _; f <= w; f++)
+          x.push(f);
+        return x;
+      })(
+        Math.max(
+          2,
+          e + s > i ? (
+            /**
+             * 当 `endRange` 超出范围时，起始值 = 当前页 - （范围区间 + 1） - 后半多余区间
+             * 后半多余区间 = | 总页码数 - 当前页码 - 范围区间 |
+             */
+            e - s + 1 - Math.abs(i - e - s)
+          ) : (
+            // 因为单独处理开头，所以 `range` 起始要多一位
+            e - s + 1
+          )
+        ),
+        Math.min(
+          i - 1,
+          e - s < 2 ? (
+            /**
+             * 当 `startRange` 超出范围时，终止值 = 当前页 + （范围区间 - 1） - 前半多余区间
+             * 前半多余区间 = | 当前页码 - 范围区间 - 1 |
+             */
+            e + s - 1 + Math.abs(e - s - 1)
+          ) : (
+            // 因为单独处理结尾，所以 `range` 结束要少一位
+            e + s - 1
+          )
+        )
+      );
+      return o[0] > 2 || s === 0 ? o.unshift(1, "...") : o.unshift(1), s === 0 && e > 1 && e < i && o.push(e), o[o.length - 1] < i - 1 || s === 0 && e === i - 1 ? o.push("...", i) : i > 1 && o.push(i), o;
+    });
+    /**
+     * 获取页码模板
+     * @param {Number} currentPage 当前页码
+     * @returns {String}
+     */
+    l(this, A, (e = 1) => {
+      let i = "";
+      const s = t(this, P).call(this, e);
+      return s.forEach((a, o) => {
+        typeof a == "number" ? i += D(a, this["current-page"], a) : i += U(
+          "...",
+          s[o - 1] === s[0] ? "prev" : "next"
+        );
+      }), i;
+    });
+    /**
+     * 渲染页码部分
+     * @description 这里的事件监听采用的是，通过 `this.#pagination` 点击事件中，获取到的最近的 `页码元素` 来进行事件触发
+     */
+    l(this, k, () => {
+      if (!t(this, c)) return;
+      if (!this.layout.includes("pager")) {
+        t(this, c).innerHTML = "";
+        return;
+      }
+      const e = (i) => {
+        var _;
+        const s = i.target.closest(
+          ".ea-pagination__page:not(.ea-pagination__more)"
+        ), a = i.target.closest(".ea-pagination__more"), o = Number((_ = s == null ? void 0 : s.dataset) == null ? void 0 : _.page);
+        if (s && this["current-page"] !== o)
+          this["current-page"] = s.dataset.page;
+        else if (a) {
+          const w = a.dataset.action, x = Math.ceil(this.total / this["page-size"]);
+          let f = this["current-page"] + (w === "next" ? 5 : -5);
+          f < 1 ? f = 1 : f > x && (f = x), this["current-page"] = f;
+        }
+      };
+      t(this, c).innerHTML = t(this, A).call(this, 1), t(this, c).addEventListener("click", e, {
+        signal: t(this, h).paginationAbortController.signal
+      });
+    });
+    /**
+     * 渲染 prev 按钮
+     */
+    l(this, I, () => {
+      if (!t(this, b) || !this.layout.includes("prev")) return;
+      const e = (a = this["current-page"]) => {
+        t(this, b).classList.toggle(
+          "is-disabled",
+          a <= 1 || this.total <= 0
+        ), t(this, b).setAttribute(
+          "aria-disabled",
+          a <= 1 || this.total <= 0
+        ), t(this, b).setAttribute(
+          "tabindex",
+          a <= 1 || this.total <= 0 ? -1 : 0
+        );
+      }, i = (a) => {
+        const { currentPage: o } = a.detail;
+        e(o);
+      }, s = () => {
+        this["current-page"] <= 1 || this.total <= 0 || (this["current-page"]--, this.dispatchEvent(
+          new Z({ value: this["current-page"] })
+        ));
+      };
+      e(), this.addEventListener("change", i, {
+        signal: t(this, h).prevAbortController.signal
+      }), t(this, b).addEventListener("click", s, {
+        signal: t(this, h).prevAbortController.signal
+      });
+    });
+    /**
+     * 渲染 next 按钮
+     */
+    l(this, M, () => {
+      if (!this.layout.includes("next") || !t(this, m)) return;
+      const e = (o = this["current-page"]) => o >= Math.ceil(this.total / this["page-size"]), i = (o = e()) => {
+        t(this, m).classList.toggle("is-disabled", o), t(this, m).setAttribute("aria-disabled", o), t(this, m).setAttribute("tabindex", o ? -1 : 0);
+      }, s = (o) => {
+        const { currentPage: _ } = o.detail;
+        i(e(_));
+      }, a = () => {
+        e() || (this["current-page"]++, this.dispatchEvent(
+          new K({ value: this["current-page"] })
+        ));
+      };
+      i(), this.addEventListener("change", s, {
+        signal: t(this, h).nextAbortController.signal
+      }), t(this, m).addEventListener("click", a, {
+        signal: t(this, h).nextAbortController.signal
+      });
+    });
+    /**
+     * 渲染 total
+     */
+    l(this, j, () => {
+      !this.layout.includes("total") || !t(this, y) || (t(this, y).textContent = `Total ${this.total}`);
+    });
+    /**
+     * 渲染 jumper
+     */
+    l(this, L, async () => {
+      if (!this.layout.includes("jumper") || !t(this, p)) return;
+      const e = () => {
+        const a = t(this, p).value, o = Math.ceil(this.total / this["page-size"]);
+        R.Number.isNumber(a) && a !== "" && a <= o ? this["current-page"] = a : t(this, p).value = this["current-page"];
+      }, i = (a) => {
+        a.key === "Enter" && e();
+      }, s = (a) => {
+        t(this, p).value = a.detail.currentPage;
+      };
+      t(this, p).setAttribute("value", this["current-page"]), t(this, p).addEventListener("blur", e, {
+        signal: t(this, h).jumperAbortController.signal
+      }), t(this, p).addEventListener("keydown", i, {
+        signal: t(this, h).jumperAbortController.signal
+      }), this.addEventListener("change", s, {
+        signal: t(this, h).jumperAbortController.signal
+      });
+    });
+    /**
+     * 渲染页数组
+     */
+    l(this, N, async () => {
+      var s;
+      if (!this.layout.includes("sizes") || !t(this, d)) return;
+      const e = (a) => R.EaElement.h(
+        "ea-option",
+        null,
+        {
+          value: a,
+          selected: a === this["page-size"]
+        },
+        `${a}/page`
+      ), i = (a) => {
+        a.stopImmediatePropagation(), !t(this, g).isFirstRender && (this["page-size"] = a.target.value, this["current-page"] = Math.min(
+          this["current-page"],
+          Math.ceil(this.total / this["page-size"])
+        ));
+      };
+      (s = this.pageSizes) != null && s.includes(this["page-size"]) || (this["page-size"] = this.pageSizes[0]), t(this, d).innerHTML = this.pageSizes.map(e).join(""), t(this, d).value = this["page-size"], t(this, d).addEventListener("change", i, {
+        signal: t(this, h).sizesAbortController.signal
+      });
+    });
+    this.stylesheet = J;
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "default-page-size",
+      "page-size",
+      "pager-count",
+      "total",
+      "background",
+      "current-page",
+      "hide-on-single-page",
+      "size",
+      "disabled"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-pagination",
+      {
+        "--background": this.background,
+        [`--size-${this.size}`]: this.size
+      },
+      {
+        hide: this["hide-on-single-page"] && Math.ceil(this.total / this["page-size"]) <= 1,
+        disabled: this.disabled
+      }
+    );
+    return t(this, g).isFirstRender || (t(this, z).className = e), e;
+  }
+  $render() {
+    const e = this.layout.filter(
+      (s) => ["prev", "pager", "next", "jumper", "total", "sizes", "->"].includes(s)
+    ), i = {
+      prev: `<ea-icon class="ea-pagination__icon prev-icon" icon='icon-angle-left' part='icon prev-icon' tabindex="0"></ea-icon>`,
+      pager: "<section class='ea-pagination__pager' part='pager'></section>",
+      next: `<ea-icon class="ea-pagination__icon next-icon" icon='icon-angle-right' part='icon next-icon' tabindex="0"></ea-icon>`,
+      total: "<span class='ea-pagination__total' part='total'></span>",
+      jumper: `<span class="ea-pagination__wrapper" part='jumper-wrap'>Go to <ea-input class='ea-pagination__jumper' part='jumper'></ea-input> </span>`,
+      sizes: "<ea-select class='ea-pagination__sizes' part='sizes'></ea-select>",
+      "->": "<span class='ea-pagination__separator' part='separator'></span>"
+    };
+    this.shadowRoot.innerHTML = `
+      <div class='ea-pagination' part='container'>
+        ${e.map((s) => i[s]).join("")}
+      </div>
+    `, u(this, z, this.shadowRoot.querySelector(".ea-pagination")), u(this, c, this.shadowRoot.querySelector(".ea-pagination__pager")), u(this, b, this.shadowRoot.querySelector(
+      ".ea-pagination__icon.prev-icon"
+    )), u(this, m, this.shadowRoot.querySelector(
+      ".ea-pagination__icon.next-icon"
+    )), u(this, p, this.shadowRoot.querySelector(".ea-pagination__jumper")), u(this, y, this.shadowRoot.querySelector(".ea-pagination__total")), u(this, d, this.shadowRoot.querySelector(".ea-pagination__sizes")), this.updateContainerClasslist();
+  }
+  async connectedCallback() {
+    super.connectedCallback(), await C(this, v, E).call(this), t(this, g).isFirstRender = !1;
+  }
+  $beforeUnmounted() {
+    var e;
+    for (const i in t(this, h))
+      (e = t(this, h)[i]) == null || e.abort(), t(this, h)[i] = null;
+  }
+}
+z = new WeakMap(), c = new WeakMap(), b = new WeakMap(), m = new WeakMap(), p = new WeakMap(), y = new WeakMap(), d = new WeakMap(), g = new WeakMap(), h = new WeakMap(), S = new WeakMap(), P = new WeakMap(), A = new WeakMap(), k = new WeakMap(), I = new WeakMap(), M = new WeakMap(), j = new WeakMap(), L = new WeakMap(), N = new WeakMap(), v = new WeakSet(), E = async function() {
+  var e, i, s;
+  for (const a in t(this, h))
+    (e = t(this, h)[a]) == null || e.abort(), t(this, h)[a] = null, t(this, h)[a] = new AbortController();
+  (i = this.layout) != null && i.includes("jumper") && !t(this, g).isEaInputImported && (await import("./ea-input.js"), await customElements.whenDefined("ea-input"), t(this, g).isEaInputImported = !0), (s = this.layout) != null && s.includes("sizes") && !t(this, g).isEaSelectImported && (await import("./ea-select.js"), await customElements.whenDefined("ea-select"), t(this, g).isEaSelectImported = !0), u(this, z, null), u(this, c, null), u(this, b, null), u(this, m, null), u(this, p, null), u(this, y, null), u(this, d, null), this.$render(), t(this, N).call(this), t(this, k).call(this), t(this, I).call(this), t(this, M).call(this), t(this, j).call(this), t(this, L).call(this);
+};
+window.customElements.get("ea-pagination") || window.customElements.define("ea-pagination", W);
+export {
+  W as EaPagination
+};

package/dist/components/ea-popconfirm.js

@@ -0,0 +1,220 @@
+var I = Object.defineProperty;
+var $ = (e) => {
+  throw TypeError(e);
+};
+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 {
+  constructor() {
+    super();
+    i(this, S);
+    /** @type {HTMLElement} */
+    i(this, b);
+    /** @type {HTMLElement} */
+    i(this, l);
+    /** @type {HTMLElement} */
+    i(this, h);
+    /** @type {HTMLElement} */
+    i(this, w);
+    /** @type {HTMLElement} */
+    i(this, q);
+    /** @type {HTMLElement} */
+    i(this, y);
+    /** @type {HTMLElement} */
+    i(this, a);
+    /** @type {HTMLElement} */
+    i(this, p);
+    /** @type {HTMLElement} */
+    i(this, x);
+    /** @type {HTMLElement} */
+    i(this, g);
+    /** @type {HTMLElement} */
+    i(this, m);
+    /** @type {HTMLElement} */
+    i(this, f);
+    /** @type {AbortController} */
+    i(this, u);
+    B(this, "state", this.properties({
+      title: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          n(this, f).innerText = t;
+        }
+      },
+      visible: {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          this.status = t;
+        }
+      },
+      icon: {
+        type: String,
+        default: "icon-help",
+        observer: (t) => {
+          n(this, m).icon = t;
+        }
+      },
+      "icon-color": {
+        type: String,
+        default: "rgb(255, 153, 0)",
+        observer: (t) => {
+          if (!CSS.supports("color", t))
+            return console.warn(
+              `[EaPopconfirm] The color value ${t} is not supported.`
+            );
+          this.style.setProperty("--ea-popconfirm-title-icon-color", t);
+        }
+      },
+      "hide-icon": {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          this.style.setProperty(
+            "--ea-popconfirm-title-icon-display",
+            t ? "none" : "block"
+          );
+        }
+      },
+      "confirm-button-text": {
+        type: String,
+        default: "确定",
+        observer: (t) => {
+          n(this, p).textContent = t;
+        }
+      },
+      "cancel-button-text": {
+        type: String,
+        default: "取消",
+        observer: (t) => {
+          n(this, a).textContent = t;
+        }
+      },
+      "confirm-button-type": {
+        type: ["normal", "primary", "success", "warning", "danger"],
+        default: "primary",
+        observer: (t) => {
+          n(this, p).type = t;
+        }
+      },
+      "cancel-button-type": {
+        type: ["normal", "primary", "success", "warning", "danger"],
+        default: "normal",
+        observer: (t) => {
+          n(this, a).type = t;
+        }
+      }
+    }));
+    /**
+     *
+     * @returns {{
+     * titleContainer: HTMLElement,
+     * titleIcon: HTMLElement,
+     * titleContent: HTMLElement,
+     * }}
+     */
+    i(this, v, () => {
+      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), {
+        titleContainer: t,
+        titleIcon: t == null ? void 0 : 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
+     */
+    i(this, d, (t, r) => {
+      t && t.addEventListener(
+        "click",
+        () => {
+          this.dispatchEvent(new CustomEvent(r)), this.hide();
+        },
+        { signal: n(this, u).signal }
+      );
+    });
+    i(this, _, () => {
+      n(this, h).querySelector(
+        'slot[name="reference"]'
+      ).addEventListener(
+        "click",
+        () => {
+          const r = new AbortController();
+          this.toggle(), window.addEventListener(
+            "click",
+            (s) => {
+              this.contains(s.target) || (r.abort(), this.hide());
+            },
+            { signal: r.signal }
+          );
+        },
+        { signal: n(this, u).signal }
+      ), n(this, d).call(this, n(this, a), "cancel"), n(this, d).call(this, n(this, p), "confirm");
+    });
+    c(this, b, this.shadowRoot.querySelector(".ea-popper")), c(this, l, this.shadowRoot.querySelector(
+      ".ea-popper__original"
+    )), c(this, h, 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);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "title",
+      "visible",
+      "icon",
+      "icon-color",
+      "hide-icon",
+      "confirm-button-text",
+      "cancel-button-text",
+      "confirm-button-type",
+      "cancel-button-type"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), n(this, C).call(this), n(this, _).call(this);
+  }
+  $beforeUnmounted() {
+    var t;
+    super.$beforeUnmounted(), (t = n(this, u)) == null || t.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(), /**
+ * 渲染footer
+ * @return {{
+ *  footer: HTMLElement,
+ *  cancelButton: HTMLElement,
+ *  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]")
+  };
+}, C = new WeakMap(), d = new WeakMap(), _ = new WeakMap();
+window.customElements.get("ea-popconfirm") || window.customElements.define("ea-popconfirm", M);
+export {
+  M as EaPopconfirm
+};