@dialpad/dialtone-vue/dist/lib/pagination/pagination.js

Vue component library for Dialpad's design system Dialtone

import { DtIconMoreHorizontal as c, DtIconChevronRight as u, DtIconChevronLeft as l } from "@dialpad/dialtone-icons/vue2";
import { DialtoneLocalization as h } from "../../localization/index.js";
import { n as g } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import d from "../button/button.js";
const P = {
  name: "DtPagination",
  components: {
    DtButton: d,
    DtIconChevronLeft: l,
    DtIconChevronRight: u,
    DtIconMoreHorizontal: c
  },
  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 h()
    };
  },
  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 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 i = this.maxVisible - (3 - this.maxVisible % 2), a = Math.floor(i / 2);
      let r = this.currentPage - a, s = this.currentPage + a;
      this.hideEdges && (r = r - 1, s = s + 1);
      const o = ["...", ...this.range(r, s), "..."];
      return this.hideEdges ? o : [1, ...o, 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 (e) => e === this.totalPages ? `${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${e}` : `${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER", { page: e })}`;
    }
  },
  watch: {
    activePage() {
      this.currentPage = this.activePage;
    }
  },
  methods: {
    range(e, t) {
      const i = [];
      e = e > 0 ? e : 1;
      for (let a = e; a <= t; a++)
        i.push(a);
      return i;
    },
    changePage(e) {
      this.currentPage = e, this.$emit("change", this.currentPage);
    }
  }
};
var _ = function() {
  var t = this, i = t._self._c;
  return i("nav", { staticClass: "d-pagination", attrs: { "aria-label": t.ariaLabel } }, [i("dt-button", { staticClass: "d-pagination__button", attrs: { "data-qa": "dt-pagination-prev", "aria-label": t.prevAriaLabel, kind: "muted", importance: "clear", disabled: t.isFirstPage }, on: { click: function(a) {
    return t.changePage(t.currentPage - 1);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [i("dt-icon-chevron-left", { attrs: { size: "300" } })];
  }, proxy: !0 }]) }), t._l(t.pages, function(a, r) {
    return i("div", { key: `page-${a}-${r}`, class: { "d-pagination__separator": isNaN(Number(a)) } }, [isNaN(Number(a)) ? i("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [i("dt-icon-more-horizontal", { attrs: { size: "300" } })], 1) : i("dt-button", { attrs: { "aria-label": t.pageNumberAriaLabel(a), kind: t.currentPage === a ? "default" : "muted", importance: t.currentPage === a ? "primary" : "clear", "label-class": "" }, on: { click: function(s) {
      return t.changePage(a);
    } } }, [t._v(" " + t._s(a) + " ")])], 1);
  }), i("dt-button", { staticClass: "d-pagination__button", attrs: { "data-qa": "dt-pagination-next", "aria-label": t.nextAriaLabel, disabled: t.isLastPage, kind: "muted", importance: "clear" }, on: { click: function(a) {
    return t.changePage(t.currentPage + 1);
  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
    return [i("dt-icon-chevron-right", { attrs: { size: "300" } })];
  }, proxy: !0 }]) })], 2);
}, p = [], m = /* @__PURE__ */ g(
  P,
  _,
  p
);
const I = m.exports;
export {
  I as default
};
//# sourceMappingURL=pagination.js.map