@dialpad/dialtone/dist/vue3/lib/pagination/pagination.js

Dialpad's Dialtone design system monorepo

import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { DialtoneLocalization as t } from "../../localization/index.js";
import n from "../button/button.js";
import { Fragment as r, createBlock as i, createElementBlock as a, createTextVNode as o, createVNode as s, normalizeClass as c, openBlock as l, renderList as u, resolveComponent as d, toDisplayString as f, vShow as p, withCtx as m, withDirectives as h } from "vue";
import { DtIconChevronLeft as g, DtIconChevronRight as _, DtIconMoreHorizontal as v } from "@dialpad/dialtone-icons/vue3";
//#region components/pagination/pagination.vue
var y = {
	compatConfig: { MODE: 3 },
	name: "DtPagination",
	components: {
		DtButton: n,
		DtIconChevronLeft: g,
		DtIconChevronRight: _,
		DtIconMoreHorizontal: v
	},
	props: {
		ariaLabel: {
			type: String,
			required: !0
		},
		totalPages: {
			type: Number,
			required: !0
		},
		activePage: {
			type: Number,
			default: 1
		},
		maxVisible: {
			type: Number,
			default: 5
		},
		hideEdges: {
			type: Boolean,
			default: !1
		}
	},
	emits: ["change"],
	data() {
		return {
			currentPage: this.activePage,
			i18n: new t()
		};
	},
	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 e = this.maxVisible - 1, t = this.totalPages - e + 1;
			if (this.hideEdges && (e += 1, --t), this.currentPage < e) {
				let t = [...this.range(1, e), "..."];
				return this.hideEdges || t.push(this.totalPages), t;
			}
			if (this.currentPage > t) {
				let e = ["...", ...this.range(t, this.totalPages)];
				return this.hideEdges || e.unshift(1), e;
			}
			let n = this.maxVisible - (3 - this.maxVisible % 2), r = Math.floor(n / 2), i = this.currentPage - r, a = this.currentPage + r;
			this.hideEdges && (--i, a += 1);
			let o = [
				"...",
				...this.range(i, a),
				"..."
			];
			return this.hideEdges ? o : [
				1,
				...o,
				this.totalPages
			];
		},
		prevAriaLabel() {
			return this.isFirstPage ? this.i18n.$t("DIALTONE_PAGINATION_FIRST_PAGE") : this.i18n.$t("DIALTONE_PAGINATION_PREVIOUS_PAGE");
		},
		nextAriaLabel() {
			return this.isLastPage ? this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE") : this.i18n.$t("DIALTONE_PAGINATION_NEXT_PAGE");
		},
		pageNumberAriaLabel() {
			return (e) => e === this.totalPages ? `${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${e}` : `${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER", { page: e })}`;
		}
	},
	watch: {
		activePage() {
			this.currentPage = this.activePage;
		},
		totalPages(e) {
			(this.currentPage > e || this.currentPage <= 0) && (this.currentPage = e);
		}
	},
	methods: {
		range(e, t) {
			let n = [];
			e = e > 0 ? e : 1;
			for (let r = e; r <= t; r++) n.push(r);
			return n;
		},
		changePage(e) {
			this.currentPage = e, this.$emit("change", this.currentPage);
		}
	}
}, b = ["aria-label"], x = {
	key: 0,
	class: "d-pagination__separator-icon",
	"data-qa": "dt-pagination-separator"
};
function S(e, t, n, g, _, v) {
	let y = d("dt-icon-chevron-left"), S = d("dt-button"), C = d("dt-icon-more-horizontal"), w = d("dt-icon-chevron-right");
	return h((l(), a("nav", {
		"aria-label": n.ariaLabel,
		class: "d-pagination"
	}, [
		s(S, {
			class: "d-pagination__button",
			"data-qa": "dt-pagination-prev",
			"aria-label": v.prevAriaLabel,
			kind: "muted",
			importance: "clear",
			disabled: v.isFirstPage,
			onClick: t[0] || (t[0] = (e) => v.changePage(_.currentPage - 1))
		}, {
			icon: m(() => [s(y, { size: "300" })]),
			_: 1
		}, 8, ["aria-label", "disabled"]),
		(l(!0), a(r, null, u(v.pages, (e, t) => (l(), a("div", {
			key: `page-${e}-${t}`,
			class: c({ "d-pagination__separator": isNaN(Number(e)) })
		}, [isNaN(Number(e)) ? (l(), a("div", x, [s(C, { size: "300" })])) : (l(), i(S, {
			key: 1,
			"aria-label": v.pageNumberAriaLabel(e),
			kind: _.currentPage === e ? "default" : "muted",
			importance: _.currentPage === e ? "primary" : "clear",
			"label-class": "",
			onClick: (t) => v.changePage(e)
		}, {
			default: m(() => [o(f(e), 1)]),
			_: 2
		}, 1032, [
			"aria-label",
			"kind",
			"importance",
			"onClick"
		]))], 2))), 128)),
		s(S, {
			class: "d-pagination__button",
			"data-qa": "dt-pagination-next",
			"aria-label": v.nextAriaLabel,
			disabled: v.isLastPage,
			kind: "muted",
			importance: "clear",
			onClick: t[1] || (t[1] = (e) => v.changePage(_.currentPage + 1))
		}, {
			icon: m(() => [s(w, { size: "300" })]),
			_: 1
		}, 8, ["aria-label", "disabled"])
	], 8, b)), [[p, n.totalPages > 0]]);
}
var C = /* @__PURE__ */ e(y, [["render", S]]);
//#endregion
export { C as default };

//# sourceMappingURL=pagination.js.map