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

Dialpad's Dialtone design system monorepo

import { DtIconMoreHorizontal as b, DtIconChevronRight as p, DtIconChevronLeft as N } from "@dialpad/dialtone-icons/vue3";
import { DialtoneLocalization as A } from "../../localization/index.js";
import { resolveComponent as h, createElementBlock as d, openBlock as l, createVNode as c, withCtx as u, Fragment as f, renderList as I, normalizeClass as E, createBlock as L, createTextVNode as v, toDisplayString as T } from "vue";
import { _ as x } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import k from "../button/button.js";
const D = {
  compatConfig: { MODE: 3 },
  name: "DtPagination",
  components: {
    DtButton: k,
    DtIconChevronLeft: N,
    DtIconChevronRight: p,
    DtIconMoreHorizontal: b
  },
  props: {
    /**
     * Descriptive label for the pagination content.
     */
    ariaLabel: {
      type: String,
      required: !0
    },
    /**
     * The total number of the pages
     */
    totalPages: {
      type: Number,
      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,
      i18n: new A()
    };
  },
  computed: {
    isFirstPage() {
      return this.currentPage === 1;
    },
    isLastPage() {
      return this.currentPage === this.totalPages;
    },
    // eslint-disable-next-line complexity
    pages() {
      if (this.maxVisible === 0)
        return [];
      if (this.totalPages <= this.maxVisible)
        return this.range(1, this.totalPages);
      let t = this.maxVisible - 1, a = this.totalPages - t + 1;
      if (this.hideEdges && (t = t + 1, a = a - 1), this.currentPage < t) {
        const r = [...this.range(1, t), "..."];
        return this.hideEdges || r.push(this.totalPages), r;
      }
      if (this.currentPage > a) {
        const r = ["...", ...this.range(a, this.totalPages)];
        return this.hideEdges || r.unshift(1), r;
      }
      const o = this.maxVisible - (3 - this.maxVisible % 2), s = Math.floor(o / 2);
      let n = this.currentPage - s, e = this.currentPage + s;
      this.hideEdges && (n = n - 1, e = e + 1);
      const g = ["...", ...this.range(n, e), "..."];
      return this.hideEdges ? g : [1, ...g, this.totalPages];
    },
    prevAriaLabel() {
      return this.isFirstPage ? this.i18n.$t("DIALTONE_PAGINATION_FIRST_PAGE") : this.i18n.$t("DIALTONE_PAGINATION_PREVIOUS_PAGE");
    },
    nextAriaLabel() {
      return this.isLastPage ? this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE") : this.i18n.$t("DIALTONE_PAGINATION_NEXT_PAGE");
    },
    pageNumberAriaLabel() {
      return (t) => t === this.totalPages ? `${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${t}` : `${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER", { page: t })}`;
    }
  },
  watch: {
    activePage() {
      this.currentPage = this.activePage;
    }
  },
  methods: {
    range(t, a) {
      const o = [];
      t = t > 0 ? t : 1;
      for (let s = t; s <= a; s++)
        o.push(s);
      return o;
    },
    changePage(t) {
      this.currentPage = t, this.$emit("change", this.currentPage);
    }
  }
}, O = ["aria-label"], G = {
  key: 0,
  class: "d-pagination__separator-icon",
  "data-qa": "dt-pagination-separator"
};
function y(t, a, o, s, n, e) {
  const g = h("dt-icon-chevron-left"), r = h("dt-button"), _ = h("dt-icon-more-horizontal"), P = h("dt-icon-chevron-right");
  return l(), d("nav", {
    "aria-label": o.ariaLabel,
    class: "d-pagination"
  }, [
    c(r, {
      class: "d-pagination__button",
      "data-qa": "dt-pagination-prev",
      "aria-label": e.prevAriaLabel,
      kind: "muted",
      importance: "clear",
      disabled: e.isFirstPage,
      onClick: a[0] || (a[0] = (i) => e.changePage(n.currentPage - 1))
    }, {
      icon: u(() => [
        c(g, { size: "300" })
      ]),
      _: 1
    }, 8, ["aria-label", "disabled"]),
    (l(!0), d(f, null, I(e.pages, (i, m) => (l(), d("div", {
      key: `page-${i}-${m}`,
      class: E({ "d-pagination__separator": isNaN(Number(i)) })
    }, [
      isNaN(Number(i)) ? (l(), d("div", G, [
        c(_, { size: "300" })
      ])) : (l(), L(r, {
        key: 1,
        "aria-label": e.pageNumberAriaLabel(i),
        kind: n.currentPage === i ? "default" : "muted",
        importance: n.currentPage === i ? "primary" : "clear",
        "label-class": "",
        onClick: (C) => e.changePage(i)
      }, {
        default: u(() => [
          v(T(i), 1)
        ]),
        _: 2
      }, 1032, ["aria-label", "kind", "importance", "onClick"]))
    ], 2))), 128)),
    c(r, {
      class: "d-pagination__button",
      "data-qa": "dt-pagination-next",
      "aria-label": e.nextAriaLabel,
      disabled: e.isLastPage,
      kind: "muted",
      importance: "clear",
      onClick: a[1] || (a[1] = (i) => e.changePage(n.currentPage + 1))
    }, {
      icon: u(() => [
        c(P, { size: "300" })
      ]),
      _: 1
    }, 8, ["aria-label", "disabled"])
  ], 8, O);
}
const F = /* @__PURE__ */ x(D, [["render", y]]);
export {
  F as default
};
//# sourceMappingURL=pagination.js.map