easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-pagination.js

@@ -0,0 +1,481 @@
+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: () => {
+          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);
+        }
+      },
+      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" 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"));
+  }
+  async connectedCallback() {
+    super.connectedCallback(), await C(this, v, E).call(this), t(this, g).isFirstRender = !1, this.updateContainerClasslist();
+  }
+  $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
+};