@dialpad/dialtone/dist/vue3/lib/pagination/pagination.js

Dialpad's Dialtone design system monorepo

import { DtIconChevronLeft as _, DtIconChevronRight as P, DtIconMoreHorizontal as f } from "@dialpad/dialtone-icons/vue3";
import { resolveComponent as d, openBlock as l, createElementBlock as u, createVNode as c, withCtx as h, Fragment as v, renderList as x, normalizeClass as k, createBlock as y, createTextVNode as N, toDisplayString as L } from "vue";
import { _ as C } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import q from "../button/button.js";
const E = {
  compatConfig: { MODE: 3 },
  name: "DtPagination",
  components: {
    DtButton: q,
    DtIconChevronLeft: _,
    DtIconChevronRight: P,
    DtIconMoreHorizontal: f
  },
  props: {
    /**
     * Descriptive label for the pagination content.
     */
    ariaLabel: {
      type: String,
      required: !0
    },
    /**
     * The total number of the pages
     */
    totalPages: {
      type: Number,
      required: !0
    },
    /**
     * Descriptive label for the previous button.
     */
    prevAriaLabel: {
      type: String,
      required: !0
    },
    /**
     * Descriptive label for the next button.
     */
    nextAriaLabel: {
      type: String,
      required: !0
    },
    /**
     * A method that will be called to get the aria label of each page.
     */
    pageNumberAriaLabel: {
      type: Function,
      required: !0
    },
    /**
     * The active current page in the list of pages, defaults to the first page
     */
    activePage: {
      type: Number,
      default: 1
    },
    /**
     * Determines the max pages to be shown in the list. Using an odd number is recommended.
     * If an even number is given, then it will be rounded down to the nearest odd number to always
     * keep current page in the middle when current page is in the mid-range.
     */
    maxVisible: {
      type: Number,
      default: 5
    },
    /**
     * Sometimes you may need to hide start and end page number buttons when moving in between.
     * This prop will be used to hide the first and last page buttons when not near the edges.
     * This is useful when your backend does not support offset and you can only use cursor based pagination.
     */
    hideEdges: {
      type: Boolean,
      default: !1
    }
  },
  emits: [
    /**
     * Page change event
     *
     * @event change
     * @type {Number}
     */
    "change"
  ],
  data() {
    return {
      currentPage: this.activePage
    };
  },
  computed: {
    isFirstPage() {
      return this.currentPage === 1;
    },
    isLastPage() {
      return this.currentPage === this.totalPages;
    },
    pages() {
      if (this.maxVisible === 0)
        return [];
      if (this.totalPages <= this.maxVisible)
        return this.range(1, this.totalPages);
      let e = this.maxVisible - 1, t = this.totalPages - e + 1;
      if (this.hideEdges && (e = e + 1, t = t - 1), this.currentPage < e) {
        const n = [...this.range(1, e), "..."];
        return this.hideEdges || n.push(this.totalPages), n;
      }
      if (this.currentPage > t) {
        const n = ["...", ...this.range(t, this.totalPages)];
        return this.hideEdges || n.unshift(1), n;
      }
      const r = this.maxVisible - (3 - this.maxVisible % 2), o = Math.floor(r / 2);
      let s = this.currentPage - o, a = this.currentPage + o;
      this.hideEdges && (s = s - 1, a = a + 1);
      const g = ["...", ...this.range(s, a), "..."];
      return this.hideEdges ? g : [1, ...g, this.totalPages];
    }
  },
  watch: {
    activePage() {
      this.currentPage = this.activePage;
    }
  },
  methods: {
    range(e, t) {
      const r = [];
      e = e > 0 ? e : 1;
      for (let o = e; o <= t; o++)
        r.push(o);
      return r;
    },
    changePage(e) {
      this.currentPage = e, this.$emit("change", this.currentPage);
    }
  }
}, V = ["aria-label"], z = {
  key: 0,
  class: "d-pagination__separator-icon",
  "data-qa": "dt-pagination-separator"
};
function D(e, t, r, o, s, a) {
  const g = d("dt-icon-chevron-left"), n = d("dt-button"), m = d("dt-icon-more-horizontal"), p = d("dt-icon-chevron-right");
  return l(), u("nav", {
    "aria-label": r.ariaLabel,
    class: "d-pagination"
  }, [
    c(n, {
      class: "d-pagination__button",
      "data-qa": "dt-pagination-prev",
      "aria-label": r.prevAriaLabel,
      kind: "muted",
      importance: "clear",
      disabled: a.isFirstPage,
      onClick: t[0] || (t[0] = (i) => a.changePage(s.currentPage - 1))
    }, {
      icon: h(() => [
        c(g, { size: "300" })
      ]),
      _: 1
    }, 8, ["aria-label", "disabled"]),
    (l(!0), u(v, null, x(a.pages, (i, b) => (l(), u("div", {
      key: `page-${i}-${b}`,
      class: k({ "d-pagination__separator": isNaN(Number(i)) })
    }, [
      isNaN(Number(i)) ? (l(), u("div", z, [
        c(m, { size: "300" })
      ])) : (l(), y(n, {
        key: 1,
        "aria-label": r.pageNumberAriaLabel(i),
        kind: s.currentPage === i ? "default" : "muted",
        importance: s.currentPage === i ? "primary" : "clear",
        "label-class": "",
        onClick: (A) => a.changePage(i)
      }, {
        default: h(() => [
          N(L(i), 1)
        ]),
        _: 2
      }, 1032, ["aria-label", "kind", "importance", "onClick"]))
    ], 2))), 128)),
    c(n, {
      class: "d-pagination__button",
      "data-qa": "dt-pagination-next",
      "aria-label": r.nextAriaLabel,
      disabled: a.isLastPage,
      kind: "muted",
      importance: "clear",
      onClick: t[1] || (t[1] = (i) => a.changePage(s.currentPage + 1))
    }, {
      icon: h(() => [
        c(p, { size: "300" })
      ]),
      _: 1
    }, 8, ["aria-label", "disabled"])
  ], 8, V);
}
const M = /* @__PURE__ */ C(E, [["render", D]]);
export {
  M as default
};
//# sourceMappingURL=pagination.js.map