easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-pagination.js

@@ -1,481 +1,479 @@
-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) {
+import { E as x } from "../core/EaBase.ts.js";
+import { q as m, a as d, C as A, p as E, l as b } from "../core/decorator.js";
+import { h as _ } from "../utils/html.ts.js";
+import { E as $ } from "../utils/Enum.ts.js";
+import { i as v } from "../utils/I18nManager.ts.js";
+import { c as P } from "../utils/bem.ts.js";
+import { s as j } from "../css/ea-pagination.style.js";
+import "./ea-icon.js";
+const f = P("ea-pagination"), I = (t, e, i) => {
+  const a = t === e;
+  return `<span class="${a ? `${f.e("page")} ${f.s("active")}` : f.e("page")}" part="page" role="button" tabindex="${a ? "0" : "-1"}" data-page="${t}" aria-label="Page ${t}"${a ? ' aria-current="page"' : ""}>${i || t}</span>`;
+}, y = P("ea-pagination"), M = (t, e) => `<span class="${y.e("page")} ${y.e("more")}" part="more" role="button" aria-label="${e === "next" ? "Next 5 pages" : "Previous 5 pages"}" tabindex="-1" data-action="${e}">${t}</span>`;
+class R extends Event {
+  constructor(e) {
     super("ea-current-change", {
       bubbles: !0,
       cancelable: !0,
       composed: !0
-    }), this.detail = n;
+    }), this.detail = e;
   }
 }
-class Z extends Event {
-  constructor(n) {
+class C extends Event {
+  constructor(e) {
     super("ea-prev-click", {
       bubbles: !0,
       cancelable: !0,
       composed: !0
-    }), this.detail = n;
+    }), this.detail = e;
   }
 }
-class K extends Event {
-  constructor(n) {
+class z extends Event {
+  constructor(e) {
     super("ea-next-click", {
       bubbles: !0,
       cancelable: !0,
       composed: !0
-    }), this.detail = n;
+    }), this.detail = e;
   }
 }
-class Q extends Event {
-  constructor(n) {
+class N extends Event {
+  constructor(e) {
     super("ea-size-change", {
       bubbles: !0,
       cancelable: !0,
       composed: !0
-    }), this.detail = n;
+    }), this.detail = e;
   }
 }
-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 {
+var k = Object.defineProperty, L = Object.getOwnPropertyDescriptor, o = (t, e, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? L(e, i) : e, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (s = (a ? c(e, i, s) : c(s)) || s);
+  return a && s && k(e, i, s), s;
+};
+const S = "ea-pagination", r = P(S), T = {
+  prev: `<ea-icon class="${r.e("icon")} ${r.e("icon")}--prev" name="angle-left" part="icon prev-icon" tabindex="0" aria-label="Previous page"></ea-icon>`,
+  pager: `<section class="${r.e("pager")}" part="pager"></section>`,
+  next: `<ea-icon class="${r.e("icon")} ${r.e("icon")}--next" name="angle-right" part="icon next-icon" tabindex="0" aria-label="Next page"></ea-icon>`,
+  total: `<span class="${r.e("total")}" part="total"></span>`,
+  jumper: `<span class="${r.e("wrapper")}" part="jumper-wrap">Go to <ea-input-number class="${r.e("jumper")}" part="jumper" controls="false" min="1"></ea-input-number> </span>`,
+  sizes: `<ea-select class="${r.e("sizes")}" part="sizes"></ea-select>`,
+  "->": `<span class="${r.e("separator")}" part="separator"></span>`
+};
+let n = class extends x {
   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: () => {
-          console.log(1, this), 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: {
-        props: !0,
-        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);
-        }
+    super(...arguments), this._isFirstRender = !0, this._isEaInputImported = !1, this._isEaSelectImported = !1, this._jumperAbortController = null, this._sizesAbortController = null, this.defaultPageSize = 10, this.pageSize = 10, this.pagerCount = 7, this.total = 0, this.currentPage = 1, this.background = !1, this.size = "", this.hideOnSinglePage = !1, this.disabled = !1, this.pageSizes = [10, 20, 30, 40, 50, 100], this.layout = [
+      "prev",
+      "pager",
+      "next",
+      "jumper",
+      "->",
+      "total"
+    ];
+  }
+  updateContainerClasslist() {
+    const t = r(
+      {
+        background: this.background,
+        size: this.size || !1
       },
-      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);
-        }
+      {
+        hide: this.hideOnSinglePage && Math.ceil(this.total / this.pageSize) <= 1,
+        disabled: this.disabled
       }
-    }));
-    /**
-     * 更新页码样式
-     * @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);
-      });
+    );
+    return !this._isFirstRender && this._container && (this._container.className = t), t;
+  }
+  /** 生成分页布局 HTML */
+  _getLayoutHTML() {
+    return this.layout.filter(
+      (e) => ["prev", "pager", "next", "jumper", "total", "sizes", "->"].includes(
+        e
+      )
+    ).map((e) => T[e] || "").join("");
+  }
+  html() {
+    return `
+      <nav class="${r()}" part="container" aria-label="Pagination">
+        ${this._getLayoutHTML()}
+      </nav>
+    `;
+  }
+  /** 更新分页器样式和激活状态 */
+  _updatePaginationStyle(t = this.currentPage) {
+    var a;
+    if (!this._pagination || !((a = this.layout) != null && a.includes("pager"))) return;
+    this._pagination.innerHTML = _(this._getPagerTemplate(t));
+    const e = this._pagination.querySelectorAll(r.ce("page")), i = this._pagination.querySelector(
+      `${r.ce("page")}[data-page="${t}"]`
+    );
+    e.forEach((s) => {
+      const l = s === i;
+      s.classList.toggle(r.s("active"), l), l ? (s.setAttribute("aria-current", "page"), s.setAttribute("tabindex", "0")) : (s.removeAttribute("aria-current"), s.setAttribute("tabindex", "-1"));
     });
-    /**
-     * 获取分页器范围
-     * @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
-          )
-        )
+  }
+  /** 计算分页器显示的页码范围 */
+  _getPagerRange(t) {
+    const e = Math.ceil(this.total / this.pageSize), i = Math.floor(this.pagerCount / 2), s = ((l, c) => {
+      const g = [];
+      for (let h = l; h <= c; h++)
+        g.push(h);
+      return g;
+    })(
+      Math.max(
+        2,
+        t + i > e ? t - i + 1 - Math.abs(e - t - i) : t - i + 1
+      ),
+      Math.min(
+        e - 1,
+        t - i < 2 ? t + i - 1 + Math.abs(t - i - 1) : t + i - 1
+      )
+    );
+    return s[0] > 2 || i === 0 ? s.unshift(1, "...") : s.unshift(1), i === 0 && t > 1 && t < e && s.push(t), s[s.length - 1] < e - 1 || i === 0 && t === e - 1 ? s.push("...", e) : e > 1 && s.push(e), s;
+  }
+  /** 生成分页器 HTML 模板 */
+  _getPagerTemplate(t = 1) {
+    let e = "";
+    const i = this._getPagerRange(t);
+    return i.forEach((a, s) => {
+      typeof a == "number" ? e += I(a, this.currentPage, a) : e += M(
+        "...",
+        i[s - 1] === i[0] ? "prev" : "next"
       );
-      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;
+    }), e;
+  }
+  /** 更新上一页/下一页按钮的禁用状态 */
+  _updatePrevNextState() {
+    if (this._prevIcon && this.layout.includes("prev")) {
+      const t = this.currentPage <= 1 || this.total <= 0;
+      this._prevIcon.classList.toggle(r.s("disabled"), t), this._prevIcon.setAttribute("aria-disabled", String(t)), this._prevIcon.setAttribute("tabindex", t ? "-1" : "0");
+    }
+    if (this._nextIcon && this.layout.includes("next")) {
+      const t = this.currentPage >= Math.ceil(this.total / this.pageSize);
+      this._nextIcon.classList.toggle(r.s("disabled"), t), this._nextIcon.setAttribute("aria-disabled", String(t)), this._nextIcon.setAttribute("tabindex", t ? "-1" : "0");
+    }
+  }
+  /** 渲染分页器内容 */
+  _handlePagerRender() {
+    if (this._pagination) {
       if (!this.layout.includes("pager")) {
-        t(this, c).innerHTML = "";
+        this._pagination.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
-      });
+      this._pagination.innerHTML = _(this._getPagerTemplate(this.currentPage));
+    }
+  }
+  /** 渲染总数文本 */
+  _handleTotalRender() {
+    !this.layout.includes("total") || !this._total || (this._total.textContent = v.t("pagination.total", {
+      total: this.total
+    }));
+  }
+  /** 渲染跳转输入框并绑定事件 */
+  async _handleJumperRender() {
+    var a;
+    if (!this.layout.includes("jumper") || !this._jumper) return;
+    (a = this._jumperAbortController) == null || a.abort(), this._jumperAbortController = new AbortController();
+    const t = Math.ceil(this.total / this.pageSize);
+    this._jumper.value = this.currentPage, this._jumper.min = 1, this._jumper.max = t || 1, this.disabled && (this._jumper.disabled = !0);
+    const e = (s) => {
+      const l = s.detail;
+      l && typeof l.currentValue == "number" && l.currentValue !== this.currentPage && (this.currentPage = l.currentValue);
+    }, i = (s) => {
+      s.key === "Enter" && this._jumper.blur();
+    };
+    this._jumper.addEventListener("ea-change", e, {
+      signal: this._jumperAbortController.signal
+    }), this._jumper.addEventListener("keydown", i, {
+      signal: this._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
-      });
+  }
+  /** 渲染每页条数选择器并绑定事件 */
+  async _handleSizesRender() {
+    var i, a;
+    if (!this.layout.includes("sizes") || !this._sizes) return;
+    (i = this._sizesAbortController) == null || i.abort(), this._sizesAbortController = new AbortController();
+    const t = (s) => `<ea-option value="${s}" ${s === this.pageSize ? "selected" : ""}>${v.t("pagination.itemsPerPage", { size: s })}</ea-option>`, e = (s) => {
+      var l;
+      (l = s.stopImmediatePropagation) == null || l.call(s), !this._isFirstRender && (this.pageSize = s.target.value, this.currentPage = Math.min(
+        this.currentPage,
+        Math.ceil(this.total / this.pageSize)
+      ));
+    };
+    (a = this.pageSizes) != null && a.includes(this.pageSize) || (this.pageSize = this.pageSizes[0]), this._sizes.innerHTML = _(this.pageSizes.map(t).join("")), this._sizes.value = this.pageSize, this.disabled && (this._sizes.disabled = !0), this._sizes.addEventListener("change", e, {
+      signal: this._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"
-    ];
+  /** 重新渲染分页组件内容 */
+  async _handlePaginationItemChange(t = !1) {
+    var e, i, a, s;
+    (e = this._jumperAbortController) == null || e.abort(), this._jumperAbortController = null, (i = this._sizesAbortController) == null || i.abort(), this._sizesAbortController = null, (a = this.layout) != null && a.includes("jumper") && !this._isEaInputImported && (await import("./ea-input-number.js"), await customElements.whenDefined("ea-input-number"), this._isEaInputImported = !0), (s = this.layout) != null && s.includes("sizes") && !this._isEaSelectImported && (await import("./ea-select.js"), await customElements.whenDefined("ea-select"), this._isEaSelectImported = !0), this._container && !t && (this._container.innerHTML = _(this._getLayoutHTML())), this._handleSizesRender(), this._handlePagerRender(), this._handleTotalRender(), this._handleJumperRender(), this._updatePrevNextState();
   }
-  /**
-   * 获取 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
+  _handlePagerClick(t) {
+    var g;
+    const e = t.composedPath(), i = e.find(
+      (h) => {
+        var u;
+        return h instanceof Element && ((u = h.closest) == null ? void 0 : u.call(h, `${r.ce("page")}:not(${r.ce("more")})`));
       }
-    );
-    return t(this, g).isFirstRender || (t(this, z).className = e), e;
+    ), a = e.find(
+      (h) => {
+        var u;
+        return h instanceof Element && ((u = h.closest) == null ? void 0 : u.call(h, r.ce("more")));
+      }
+    ), s = i == null ? void 0 : i.closest(
+      `${r.ce("page")}:not(${r.ce("more")})`
+    ), l = a == null ? void 0 : a.closest(r.ce("more")), c = Number((g = s == null ? void 0 : s.dataset) == null ? void 0 : g.page);
+    if (s && this.currentPage !== c)
+      this.currentPage = c;
+    else if (l) {
+      const h = l.dataset.action, u = Math.ceil(this.total / this.pageSize);
+      let p = this.currentPage + (h === "next" ? 5 : -5);
+      p < 1 ? p = 1 : p > u && (p = u), this.currentPage = p;
+    }
   }
-  $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" name='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" name='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"));
+  _handlePrevClick(t) {
+    t.composedPath().find(
+      (a) => {
+        var s;
+        return a instanceof Element && ((s = a.closest) == null ? void 0 : s.call(a, `${r.ce("icon")}--prev`));
+      }
+    ) && (this.currentPage <= 1 || this.total <= 0 || this.disabled || (this.currentPage--, this.dispatchEvent(
+      new C({ value: this.currentPage })
+    )));
   }
-  async connectedCallback() {
-    super.connectedCallback(), await C(this, v, E).call(this), t(this, g).isFirstRender = !1, this.updateContainerClasslist();
+  _handleNextClick(t) {
+    t.composedPath().find(
+      (a) => {
+        var s;
+        return a instanceof Element && ((s = a.closest) == null ? void 0 : s.call(a, `${r.ce("icon")}--next`));
+      }
+    ) && (this.currentPage >= Math.ceil(this.total / this.pageSize) || this.disabled || (this.currentPage++, this.dispatchEvent(
+      new z({ value: this.currentPage })
+    )));
   }
-  $beforeUnmounted() {
-    var e;
-    for (const i in t(this, h))
-      (e = t(this, h)[i]) == null || e.abort(), t(this, h)[i] = null;
+  _handleKeydown(t) {
+    var c, g, h, u;
+    const e = t.target, i = (c = e.closest) == null ? void 0 : c.call(e, r.ce("page")), a = (g = e.closest) == null ? void 0 : g.call(e, `${r.ce("icon")}--prev`), s = (h = e.closest) == null ? void 0 : h.call(e, `${r.ce("icon")}--next`);
+    if (!i && !a && !s) return;
+    const l = Math.ceil(this.total / this.pageSize);
+    switch (t.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        t.preventDefault(), this._moveFocusToPage(this.currentPage - 1);
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        t.preventDefault(), this._moveFocusToPage(this.currentPage + 1);
+        break;
+      case "Home":
+        t.preventDefault(), this._moveFocusToPage(1);
+        break;
+      case "End":
+        t.preventDefault(), this._moveFocusToPage(l);
+        break;
+      case "Enter":
+      case " ":
+        if (t.preventDefault(), a)
+          this._handlePrevAction();
+        else if (s)
+          this._handleNextAction();
+        else if (i && !e.closest(r.ce("more"))) {
+          const p = Number((u = e.dataset) == null ? void 0 : u.page);
+          p && p !== this.currentPage && (this.currentPage = p);
+        }
+        break;
+    }
+  }
+  /** 将焦点移动到指定页码 */
+  _moveFocusToPage(t) {
+    var i;
+    const e = Math.ceil(this.total / this.pageSize);
+    if (!(t < 1 || t > e)) {
+      if (t === this.currentPage) {
+        const a = (i = this._pagination) == null ? void 0 : i.querySelector(
+          `${r.ce("page")}[data-page="${t}"]`
+        );
+        a == null || a.focus();
+        return;
+      }
+      this.currentPage = t, requestAnimationFrame(() => {
+        var s;
+        const a = (s = this._pagination) == null ? void 0 : s.querySelector(
+          `${r.ce("page")}[data-page="${t}"]`
+        );
+        a == null || a.focus();
+      });
+    }
+  }
+  /** 执行上一页操作 */
+  _handlePrevAction() {
+    this.currentPage <= 1 || this.total <= 0 || this.disabled || (this.currentPage--, this.dispatchEvent(
+      new C({ value: this.currentPage })
+    ));
+  }
+  /** 执行下一页操作 */
+  _handleNextAction() {
+    this.currentPage >= Math.ceil(this.total / this.pageSize) || this.disabled || (this.currentPage++, this.dispatchEvent(
+      new z({ value: this.currentPage })
+    ));
+  }
+  async $mount() {
+    await this._handlePaginationItemChange(), this._isFirstRender = !1, this.updateContainerClasslist();
+  }
+  $beforeUnmount() {
+    var t, e;
+    (t = this._jumperAbortController) == null || t.abort(), this._jumperAbortController = null, (e = this._sizesAbortController) == null || e.abort(), this._sizesAbortController = 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);
+o([
+  m(r.cb())
+], n.prototype, "_container", 2);
+o([
+  m(r.ce("pager"))
+], n.prototype, "_pagination", 2);
+o([
+  m(`${r.ce("icon")}--prev`)
+], n.prototype, "_prevIcon", 2);
+o([
+  m(`${r.ce("icon")}--next`)
+], n.prototype, "_nextIcon", 2);
+o([
+  m(r.ce("jumper"))
+], n.prototype, "_jumper", 2);
+o([
+  m(r.ce("total"))
+], n.prototype, "_total", 2);
+o([
+  m(r.ce("sizes"))
+], n.prototype, "_sizes", 2);
+o([
+  d({
+    type: Number,
+    default: 10,
+    observer() {
+      this._isFirstRender || this._handlePaginationItemChange();
+    }
+  })
+], n.prototype, "defaultPageSize", 2);
+o([
+  d({
+    type: Number,
+    default: function() {
+      return this.defaultPageSize;
+    },
+    observer(t) {
+      this._isFirstRender || (this._handlePaginationItemChange(!0), this.dispatchEvent(new N({ pageSize: t })));
+    }
+  })
+], n.prototype, "pageSize", 2);
+o([
+  d({
+    type: Number,
+    default: 7
+  })
+], n.prototype, "pagerCount", 2);
+o([
+  d({
+    type: Number,
+    default: 0,
+    observer() {
+      this._pagination && this.layout.includes("pager") && this._handlePaginationItemChange(), this.hideOnSinglePage && this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "total", 2);
+o([
+  d({
+    type: Number,
+    default: 1,
+    observer(t) {
+      var e;
+      if (!this._isFirstRender) {
+        if (this._updatePaginationStyle(t), this._updatePrevNextState(), this._jumper && ((e = this.layout) != null && e.includes("jumper"))) {
+          this._jumper.value !== t && (this._jumper.value = t);
+          const i = Math.ceil(this.total / this.pageSize);
+          this._jumper.max = i || 1;
+        }
+        this.dispatchEvent(new R({ value: t })), this.updateContainerClasslist();
+      }
+    }
+  })
+], n.prototype, "currentPage", 2);
+o([
+  d({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "background", 2);
+o([
+  d({
+    type: $(["large", "default", "small"]),
+    default: "",
+    observer(t) {
+      this._sizes && t && this._sizes.setAttribute("size", t), this._jumper && t && this._jumper.setAttribute("size", t), this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "size", 2);
+o([
+  d({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "hideOnSinglePage", 2);
+o([
+  d({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
+    },
+    observer(t) {
+      this.updateContainerClasslist(), this.layout.includes("jumper") && this._jumper && (this._jumper.disabled = t), this.layout.includes("sizes") && this._sizes && (this._sizes.disabled = t);
+    }
+  })
+], n.prototype, "disabled", 2);
+o([
+  E({
+    type: Array,
+    default: [10, 20, 30, 40, 50, 100],
+    observer() {
+      this._isFirstRender || this._handlePaginationItemChange();
+    }
+  })
+], n.prototype, "pageSizes", 2);
+o([
+  E({
+    type: Array,
+    default: ["prev", "pager", "next", "jumper", "->", "total"],
+    observer() {
+      this._isFirstRender || this._handlePaginationItemChange();
+    }
+  })
+], n.prototype, "layout", 2);
+o([
+  b("click", "shadowRoot")
+], n.prototype, "_handlePagerClick", 1);
+o([
+  b("click", "shadowRoot")
+], n.prototype, "_handlePrevClick", 1);
+o([
+  b("click", "shadowRoot")
+], n.prototype, "_handleNextClick", 1);
+o([
+  b("keydown", "shadowRoot")
+], n.prototype, "_handleKeydown", 1);
+n = o([
+  A(S, { styles: [j] })
+], n);
+const K = n;
 export {
-  W as EaPagination
+  n as EaPagination,
+  K as default
 };