easy-component-ui 3.0.13 → 3.0.14

package/dist/components/ea-pagination.js

@@ -1,481 +0,0 @@
-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
-};