@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/pagination.cjs

@@ -1,2 +1,206 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),g=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),d=require("./button.cjs"),b=require("./icon.cjs");require("./utils.cjs");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const m={name:"DtPagination",components:{DtButton:d.DtButton,DtIcon:b.DtIcon},props:{ariaLabel:{type:String,required:!0},totalPages:{type:Number,required:!0},prevAriaLabel:{type:String,required:!0},nextAriaLabel:{type:String,required:!0},pageNumberAriaLabel:{type:Function,required:!0},activePage:{type:Number,default:1},maxVisible:{type:Number,default:5}},emits:["change"],data(){return{currentPage:this.activePage}},computed:{isFirstPage(){return this.currentPage===1},isLastPage(){return this.currentPage===this.totalPages},pages(){if(this.maxVisible===0)return[];if(this.totalPages<=this.maxVisible)return this.range(1,this.totalPages);const a=this.maxVisible-1,i=this.totalPages-a+1;if(this.currentPage<a)return[...this.range(1,a),"...",this.totalPages];if(this.currentPage>i)return[1,"...",...this.range(i,this.totalPages)];const n=this.maxVisible-(3-this.maxVisible%2),s=Math.floor(n/2),c=this.currentPage-s,t=this.currentPage+s;return[1,"...",...this.range(c,t),"...",this.totalPages]}},methods:{range(a,i){const n=[];a=a>0?a:1;for(let s=a;s<=i;s++)n.push(s);return n},changePage(a){this.currentPage=a,this.$emit("change",this.currentPage)}}},h=["aria-label"],P={key:0,class:"d-pagination__separator-icon","data-qa":"dt-pagination-separator"};function p(a,i,n,s,c,t){const l=e.resolveComponent("dt-icon"),o=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("nav",{"aria-label":n.ariaLabel,class:"d-pagination"},[e.createVNode(o,{class:e.normalizeClass(["d-pagination__button",t.isFirstPage?"d-fc-black-300 d-bgc-transparent":"d-fc-tertiary"]),"data-qa":"dt-pagination-prev","aria-label":n.prevAriaLabel,kind:t.isFirstPage?"default":"muted",importance:t.isFirstPage?"primary":"clear",disabled:t.isFirstPage,onClick:i[0]||(i[0]=r=>t.changePage(c.currentPage-1))},{icon:e.withCtx(()=>[e.createVNode(l,{name:"chevron-left",size:"300"})]),_:1},8,["aria-label","kind","importance","disabled","class"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.pages,(r,u)=>(e.openBlock(),e.createElementBlock("div",{key:`page-${r}-${u}`,class:e.normalizeClass({"d-pagination__separator":isNaN(Number(r))})},[isNaN(Number(r))?(e.openBlock(),e.createElementBlock("div",P,[e.createVNode(l,{name:"more-horizontal",size:"300"})])):(e.openBlock(),e.createBlock(o,{key:1,"aria-label":n.pageNumberAriaLabel(r),kind:c.currentPage===r?"default":"muted",importance:c.currentPage===r?"primary":"clear","label-class":"",onClick:k=>t.changePage(r)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r),1)]),_:2},1032,["aria-label","kind","importance","onClick"]))],2))),128)),e.createVNode(o,{class:e.normalizeClass(["d-pagination__button",t.isLastPage?"d-fc-black-300 d-bgc-transparent":"d-fc-tertiary"]),"data-qa":"dt-pagination-next","aria-label":n.nextAriaLabel,disabled:t.isLastPage,kind:"muted",importance:t.isLastPage?"primary":"clear",onClick:i[1]||(i[1]=r=>t.changePage(c.currentPage+1))},{icon:e.withCtx(()=>[e.createVNode(l,{name:"chevron-right",size:"300"})]),_:1},8,["aria-label","disabled","importance","class"])],8,h)}const _=g._(m,[["render",p]]);exports.DtPagination=_;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const lib_button = require("./button.cjs");
+const lib_icon = require("./icon.cjs");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const _sfc_main = {
+  name: "DtPagination",
+  components: {
+    DtButton: lib_button.DtButton,
+    DtIcon: lib_icon.DtIcon
+  },
+  props: {
+    /**
+     * Descriptive label for the pagination content.
+     */
+    ariaLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * The total number of the pages
+     */
+    totalPages: {
+      type: Number,
+      required: true
+    },
+    /**
+     * Descriptive label for the previous button.
+     */
+    prevAriaLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * Descriptive label for the next button.
+     */
+    nextAriaLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * A method that will be called to get the aria label of each page.
+     */
+    pageNumberAriaLabel: {
+      type: Function,
+      required: true
+    },
+    /**
+     * 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
+    }
+  },
+  emits: [
+    /**
+     * Page change event
+     *
+     * @event change
+     * @type {Number}
+     */
+    "change"
+  ],
+  data() {
+    return {
+      currentPage: this.activePage
+    };
+  },
+  computed: {
+    isFirstPage() {
+      return this.currentPage === 1;
+    },
+    isLastPage() {
+      return this.currentPage === this.totalPages;
+    },
+    pages() {
+      if (this.maxVisible === 0) {
+        return [];
+      }
+      if (this.totalPages <= this.maxVisible) {
+        return this.range(1, this.totalPages);
+      }
+      const start = this.maxVisible - 1;
+      const end = this.totalPages - start + 1;
+      if (this.currentPage < start) {
+        return [...this.range(1, start), "...", this.totalPages];
+      }
+      if (this.currentPage > end) {
+        return [1, "...", ...this.range(end, this.totalPages)];
+      }
+      const total = this.maxVisible - (3 - this.maxVisible % 2);
+      const centerIndex = Math.floor(total / 2);
+      const left = this.currentPage - centerIndex;
+      const right = this.currentPage + centerIndex;
+      return [1, "...", ...this.range(left, right), "...", this.totalPages];
+    }
+  },
+  methods: {
+    range(from, to) {
+      const range = [];
+      from = from > 0 ? from : 1;
+      for (let i = from; i <= to; i++) {
+        range.push(i);
+      }
+      return range;
+    },
+    changePage(page) {
+      this.currentPage = page;
+      this.$emit("change", this.currentPage);
+    }
+  }
+};
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
+  key: 0,
+  class: "d-pagination__separator-icon",
+  "data-qa": "dt-pagination-separator"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  return vue.openBlock(), vue.createElementBlock("nav", {
+    "aria-label": $props.ariaLabel,
+    class: "d-pagination"
+  }, [
+    vue.createVNode(_component_dt_button, {
+      class: vue.normalizeClass(["d-pagination__button", $options.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
+      "data-qa": "dt-pagination-prev",
+      "aria-label": $props.prevAriaLabel,
+      kind: $options.isFirstPage ? "default" : "muted",
+      importance: $options.isFirstPage ? "primary" : "clear",
+      disabled: $options.isFirstPage,
+      onClick: _cache[0] || (_cache[0] = ($event) => $options.changePage($data.currentPage - 1))
+    }, {
+      icon: vue.withCtx(() => [
+        vue.createVNode(_component_dt_icon, {
+          name: "chevron-left",
+          size: "300"
+        })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "kind", "importance", "disabled", "class"]),
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.pages, (page, index) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        key: `page-${page}-${index}`,
+        class: vue.normalizeClass({ "d-pagination__separator": isNaN(Number(page)) })
+      }, [
+        isNaN(Number(page)) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.createVNode(_component_dt_icon, {
+            name: "more-horizontal",
+            size: "300"
+          })
+        ])) : (vue.openBlock(), vue.createBlock(_component_dt_button, {
+          key: 1,
+          "aria-label": $props.pageNumberAriaLabel(page),
+          kind: $data.currentPage === page ? "default" : "muted",
+          importance: $data.currentPage === page ? "primary" : "clear",
+          "label-class": "",
+          onClick: ($event) => $options.changePage(page)
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(page), 1)
+          ]),
+          _: 2
+        }, 1032, ["aria-label", "kind", "importance", "onClick"]))
+      ], 2);
+    }), 128)),
+    vue.createVNode(_component_dt_button, {
+      class: vue.normalizeClass(["d-pagination__button", $options.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
+      "data-qa": "dt-pagination-next",
+      "aria-label": $props.nextAriaLabel,
+      disabled: $options.isLastPage,
+      kind: "muted",
+      importance: $options.isLastPage ? "primary" : "clear",
+      onClick: _cache[1] || (_cache[1] = ($event) => $options.changePage($data.currentPage + 1))
+    }, {
+      icon: vue.withCtx(() => [
+        vue.createVNode(_component_dt_icon, {
+          name: "chevron-right",
+          size: "300"
+        })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "disabled", "importance", "class"])
+  ], 8, _hoisted_1);
+}
+const pagination = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtPagination = pagination;
 //# sourceMappingURL=pagination.cjs.map

package/dist/lib/pagination.cjs.map

@@ -1 +1 @@
-{"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=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"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\n          name=\"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=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\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  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\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  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      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\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      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\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","DtIcon","start","end","total","centerIndex","left","right","from","to","range","i","page","_createElementBlock","$props","_createVNode","_component_dt_button","_normalizeClass","$options","_cache","$event","$data","_component_dt_icon","_openBlock","_Fragment","_renderList","index","_hoisted_2","_createBlock"],"mappings":"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"}
+{"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=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"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\n          name=\"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=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\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  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\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  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      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\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      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\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":["DtButton","DtIcon","_createElementBlock","_createVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":"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"}

package/dist/lib/pagination.js

@@ -1,18 +1,18 @@
-import { resolveComponent as b, openBlock as c, createElementBlock as o, createVNode as l, normalizeClass as d, withCtx as m, Fragment as p, renderList as P, createBlock as _, createTextVNode as f, toDisplayString as k } from "vue";
-import { _ as y } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtButton as x } from "./button.js";
-import { DtIcon as v } from "./icon.js";
-import "./utils.js";
-import "./constants.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import { resolveComponent, openBlock, createElementBlock, createVNode, normalizeClass, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtButton } from "./button.js";
+import { DtIcon } from "./icon.js";
+import "../common/utils.js";
+import "../common/constants.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-const L = {
+const _sfc_main = {
   name: "DtPagination",
   components: {
-    DtButton: x,
-    DtIcon: v
+    DtButton,
+    DtIcon
   },
   props: {
     /**
@@ -20,35 +20,35 @@ const L = {
      */
     ariaLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * The total number of the pages
      */
     totalPages: {
       type: Number,
-      required: !0
+      required: true
     },
     /**
      * Descriptive label for the previous button.
      */
     prevAriaLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Descriptive label for the next button.
      */
     nextAriaLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * A method that will be called to get the aria label of each page.
      */
     pageNumberAriaLabel: {
       type: Function,
-      required: !0
+      required: true
     },
     /**
      * The active current page in the list of pages, defaults to the first page
@@ -89,103 +89,118 @@ const L = {
       return this.currentPage === this.totalPages;
     },
     pages() {
-      if (this.maxVisible === 0)
+      if (this.maxVisible === 0) {
         return [];
-      if (this.totalPages <= this.maxVisible)
+      }
+      if (this.totalPages <= this.maxVisible) {
         return this.range(1, this.totalPages);
-      const t = this.maxVisible - 1, r = this.totalPages - t + 1;
-      if (this.currentPage < t)
-        return [...this.range(1, t), "...", this.totalPages];
-      if (this.currentPage > r)
-        return [1, "...", ...this.range(r, this.totalPages)];
-      const i = this.maxVisible - (3 - this.maxVisible % 2), n = Math.floor(i / 2), s = this.currentPage - n, e = this.currentPage + n;
-      return [1, "...", ...this.range(s, e), "...", this.totalPages];
+      }
+      const start = this.maxVisible - 1;
+      const end = this.totalPages - start + 1;
+      if (this.currentPage < start) {
+        return [...this.range(1, start), "...", this.totalPages];
+      }
+      if (this.currentPage > end) {
+        return [1, "...", ...this.range(end, this.totalPages)];
+      }
+      const total = this.maxVisible - (3 - this.maxVisible % 2);
+      const centerIndex = Math.floor(total / 2);
+      const left = this.currentPage - centerIndex;
+      const right = this.currentPage + centerIndex;
+      return [1, "...", ...this.range(left, right), "...", this.totalPages];
     }
   },
   methods: {
-    range(t, r) {
-      const i = [];
-      t = t > 0 ? t : 1;
-      for (let n = t; n <= r; n++)
-        i.push(n);
-      return i;
+    range(from, to) {
+      const range = [];
+      from = from > 0 ? from : 1;
+      for (let i = from; i <= to; i++) {
+        range.push(i);
+      }
+      return range;
     },
-    changePage(t) {
-      this.currentPage = t, this.$emit("change", this.currentPage);
+    changePage(page) {
+      this.currentPage = page;
+      this.$emit("change", this.currentPage);
     }
   }
-}, N = ["aria-label"], q = {
+};
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
   key: 0,
   class: "d-pagination__separator-icon",
   "data-qa": "dt-pagination-separator"
 };
-function V(t, r, i, n, s, e) {
-  const g = b("dt-icon"), u = b("dt-button");
-  return c(), o("nav", {
-    "aria-label": i.ariaLabel,
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_button = resolveComponent("dt-button");
+  return openBlock(), createElementBlock("nav", {
+    "aria-label": $props.ariaLabel,
     class: "d-pagination"
   }, [
-    l(u, {
-      class: d(["d-pagination__button", e.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
+    createVNode(_component_dt_button, {
+      class: normalizeClass(["d-pagination__button", $options.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
       "data-qa": "dt-pagination-prev",
-      "aria-label": i.prevAriaLabel,
-      kind: e.isFirstPage ? "default" : "muted",
-      importance: e.isFirstPage ? "primary" : "clear",
-      disabled: e.isFirstPage,
-      onClick: r[0] || (r[0] = (a) => e.changePage(s.currentPage - 1))
+      "aria-label": $props.prevAriaLabel,
+      kind: $options.isFirstPage ? "default" : "muted",
+      importance: $options.isFirstPage ? "primary" : "clear",
+      disabled: $options.isFirstPage,
+      onClick: _cache[0] || (_cache[0] = ($event) => $options.changePage($data.currentPage - 1))
     }, {
-      icon: m(() => [
-        l(g, {
+      icon: withCtx(() => [
+        createVNode(_component_dt_icon, {
           name: "chevron-left",
           size: "300"
         })
       ]),
       _: 1
     }, 8, ["aria-label", "kind", "importance", "disabled", "class"]),
-    (c(!0), o(p, null, P(e.pages, (a, h) => (c(), o("div", {
-      key: `page-${a}-${h}`,
-      class: d({ "d-pagination__separator": isNaN(Number(a)) })
-    }, [
-      isNaN(Number(a)) ? (c(), o("div", q, [
-        l(g, {
-          name: "more-horizontal",
-          size: "300"
-        })
-      ])) : (c(), _(u, {
-        key: 1,
-        "aria-label": i.pageNumberAriaLabel(a),
-        kind: s.currentPage === a ? "default" : "muted",
-        importance: s.currentPage === a ? "primary" : "clear",
-        "label-class": "",
-        onClick: (C) => e.changePage(a)
-      }, {
-        default: m(() => [
-          f(k(a), 1)
-        ]),
-        _: 2
-      }, 1032, ["aria-label", "kind", "importance", "onClick"]))
-    ], 2))), 128)),
-    l(u, {
-      class: d(["d-pagination__button", e.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.pages, (page, index) => {
+      return openBlock(), createElementBlock("div", {
+        key: `page-${page}-${index}`,
+        class: normalizeClass({ "d-pagination__separator": isNaN(Number(page)) })
+      }, [
+        isNaN(Number(page)) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(_component_dt_icon, {
+            name: "more-horizontal",
+            size: "300"
+          })
+        ])) : (openBlock(), createBlock(_component_dt_button, {
+          key: 1,
+          "aria-label": $props.pageNumberAriaLabel(page),
+          kind: $data.currentPage === page ? "default" : "muted",
+          importance: $data.currentPage === page ? "primary" : "clear",
+          "label-class": "",
+          onClick: ($event) => $options.changePage(page)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(page), 1)
+          ]),
+          _: 2
+        }, 1032, ["aria-label", "kind", "importance", "onClick"]))
+      ], 2);
+    }), 128)),
+    createVNode(_component_dt_button, {
+      class: normalizeClass(["d-pagination__button", $options.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
       "data-qa": "dt-pagination-next",
-      "aria-label": i.nextAriaLabel,
-      disabled: e.isLastPage,
+      "aria-label": $props.nextAriaLabel,
+      disabled: $options.isLastPage,
       kind: "muted",
-      importance: e.isLastPage ? "primary" : "clear",
-      onClick: r[1] || (r[1] = (a) => e.changePage(s.currentPage + 1))
+      importance: $options.isLastPage ? "primary" : "clear",
+      onClick: _cache[1] || (_cache[1] = ($event) => $options.changePage($data.currentPage + 1))
     }, {
-      icon: m(() => [
-        l(g, {
+      icon: withCtx(() => [
+        createVNode(_component_dt_icon, {
           name: "chevron-right",
           size: "300"
         })
       ]),
       _: 1
     }, 8, ["aria-label", "disabled", "importance", "class"])
-  ], 8, N);
+  ], 8, _hoisted_1);
 }
-const T = /* @__PURE__ */ y(L, [["render", V]]);
+const pagination = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  T as DtPagination
+  pagination as DtPagination
 };
 //# sourceMappingURL=pagination.js.map

package/dist/lib/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","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=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"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\n          name=\"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=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\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  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\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  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      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\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      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\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","DtIcon","start","end","total","centerIndex","left","right","from","to","range","i","page","_createElementBlock","$props","_createVNode","_component_dt_button","_normalizeClass","$options","_cache","$event","$data","_component_dt_icon","_openBlock","_Fragment","_renderList","index","_hoisted_2","_createBlock"],"mappings":"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"}
+{"version":3,"file":"pagination.js","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=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"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\n          name=\"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=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\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  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\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  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      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\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      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\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":["_createElementBlock","_createVNode","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":"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"}