@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
184 lines (183 loc) • 6.14 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue2 = require("@dialpad/dialtone-icons/vue2");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const button = require("../button/button.vue.cjs");
const _sfc_main = {
name: "DtPagination",
components: {
DtButton: button.default,
DtIconChevronLeft: vue2.DtIconChevronLeft,
DtIconChevronRight: vue2.DtIconChevronRight,
DtIconMoreHorizontal: vue2.DtIconMoreHorizontal
},
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
},
/**
* 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: false
}
},
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);
}
let start = this.maxVisible - 1;
let end = this.totalPages - start + 1;
if (this.hideEdges) {
start = start + 1;
end = end - 1;
}
if (this.currentPage < start) {
const pages2 = [...this.range(1, start), "..."];
if (!this.hideEdges) {
pages2.push(this.totalPages);
}
return pages2;
}
if (this.currentPage > end) {
const pages2 = ["...", ...this.range(end, this.totalPages)];
if (!this.hideEdges) {
pages2.unshift(1);
}
return pages2;
}
const total = this.maxVisible - (3 - this.maxVisible % 2);
const centerIndex = Math.floor(total / 2);
let left = this.currentPage - centerIndex;
let right = this.currentPage + centerIndex;
if (this.hideEdges) {
left = left - 1;
right = right + 1;
}
const pages = ["...", ...this.range(left, right), "..."];
if (!this.hideEdges) {
return [1, ...pages, this.totalPages];
}
return pages;
}
},
watch: {
activePage() {
this.currentPage = this.activePage;
}
},
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);
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("nav", { staticClass: "d-pagination", attrs: { "aria-label": _vm.ariaLabel } }, [_c("dt-button", { staticClass: "d-pagination__button", attrs: { "data-qa": "dt-pagination-prev", "aria-label": _vm.prevAriaLabel, "kind": "muted", "importance": "clear", "disabled": _vm.isFirstPage }, on: { "click": function($event) {
return _vm.changePage(_vm.currentPage - 1);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("dt-icon-chevron-left", { attrs: { "size": "300" } })];
}, proxy: true }]) }), _vm._l(_vm.pages, function(page, index) {
return _c("div", { key: `page-${page}-${index}`, class: { "d-pagination__separator": isNaN(Number(page)) } }, [isNaN(Number(page)) ? _c("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [_c("dt-icon-more-horizontal", { attrs: { "size": "300" } })], 1) : _c("dt-button", { attrs: { "aria-label": _vm.pageNumberAriaLabel(page), "kind": _vm.currentPage === page ? "default" : "muted", "importance": _vm.currentPage === page ? "primary" : "clear", "label-class": "" }, on: { "click": function($event) {
return _vm.changePage(page);
} } }, [_vm._v(" " + _vm._s(page) + " ")])], 1);
}), _c("dt-button", { staticClass: "d-pagination__button", attrs: { "data-qa": "dt-pagination-next", "aria-label": _vm.nextAriaLabel, "disabled": _vm.isLastPage, "kind": "muted", "importance": "clear" }, on: { "click": function($event) {
return _vm.changePage(_vm.currentPage + 1);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("dt-icon-chevron-right", { attrs: { "size": "300" } })];
}, proxy: true }]) })], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const pagination = __component__.exports;
exports.default = pagination;
//# sourceMappingURL=pagination.vue.cjs.map