@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      <!-- eslint-enable vue/no-bare-strings-in-template -->\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';\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     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\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    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\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\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","start","end","pages","total","centerIndex","left","right","from","to","range","i","page","_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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"}