@dialpad/dialtone/dist/vue3/lib/pagination/pagination.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"pagination.cjs","names":[],"sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    v-show=\"totalPages > 0\"\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    // eslint-disable-next-line complexity\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n\n    prevAriaLabel () {\n      return this.isFirstPage ? this.i18n.$t('DIALTONE_PAGINATION_FIRST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_PREVIOUS_PAGE');\n    },\n\n    nextAriaLabel () {\n      return this.isLastPage ? this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_NEXT_PAGE');\n    },\n\n    pageNumberAriaLabel () {\n      return (page) => {\n        return page === this.totalPages ? `${this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE')} ${page}` : `${this.i18n.$t('DIALTONE_PAGINATION_PAGE_NUMBER', { page })}`;\n      };\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n\n    totalPages (pages) {\n      if (this.currentPage > pages || this.currentPage <= 0){\n        this.currentPage = pages;\n      }\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}