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

Dialpad's Dialtone design system monorepo

{"version":3,"file":"pagination.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\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\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"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","DialtoneLocalization","start","end","pages","total","centerIndex","left","right","page","from","to","range","i","_hoisted_1","_createElementBlock","$props","_createVNode","_component_dt_button","$options","_cache","$event","$data","_component_dt_icon_chevron_left","_openBlock","_Fragment","_renderList","index","_normalizeClass","_hoisted_2","_component_dt_icon_more_horizontal","_createBlock","_withCtx","_createTextVNode","_toDisplayString","_component_dt_icon_chevron_right"],"mappings":"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"}