maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
195 lines (194 loc) • 9.79 kB
JavaScript
import { defineComponent, computed, createElementBlock, openBlock, unref, createElementVNode, createVNode, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
import { MazChevronDoubleLeft, MazChevronLeft, MazEllipsisHorizontal } from "@maz-ui/icons";
import { useTranslations } from "@maz-ui/translations";
import MazBtn from "./MazBtn.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazPagination.BUhf2Qr7.css';const _hoisted_1 = ["aria-label"], _hoisted_2 = { class: "maz-sr-only" }, _hoisted_3 = { class: "maz-sr-only" }, _hoisted_4 = ["id"], _hoisted_5 = { class: "maz-sr-only" }, _hoisted_6 = { class: "maz-sr-only" }, _hoisted_7 = { class: "maz-sr-only" }, _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazPagination",
props: {
modelValue: { default: 1 },
buttonProps: {},
resultsSize: {},
activeColor: { default: "background" },
size: { default: "md" },
totalPages: {},
pageRange: { default: 1 },
loading: { type: Boolean }
},
emits: ["update:model-value"],
setup(__props, { emit: __emit }) {
const emits = __emit, DEFAULT_BUTTONS_PROPS = {
size: "md",
color: "background",
outlined: !0,
fab: !0
}, { t } = useTranslations(), buttonsPropsMerged = computed(() => ({
...DEFAULT_BUTTONS_PROPS,
...__props.buttonProps
})), previousPage = computed(() => __props.modelValue > 1 ? __props.modelValue - 1 : 1), nextPage = computed(
() => __props.modelValue < __props.totalPages ? __props.modelValue + 1 : __props.totalPages
), allPages = computed(
() => Array.from({ length: __props.totalPages }, (_, index) => {
const itemNumber = index + 1;
return {
number: itemNumber,
isActive: itemNumber === __props.modelValue,
loading: itemNumber === __props.modelValue && __props.loading
};
})
), firstOne = computed(
() => __props.modelValue - __props.pageRange > 1 ? allPages.value.slice(0, 1) : []
), lastOne = computed(
() => __props.modelValue < __props.totalPages - __props.pageRange ? allPages.value.slice(-1) : []
), rangeStartAt = computed(() => {
const baseStart = __props.modelValue - __props.pageRange - 1;
return baseStart < 0 ? 0 : baseStart > __props.totalPages - __props.pageRange ? __props.totalPages - __props.pageRange : baseStart;
}), rangeEndAt = computed(() => {
const baseEnd = __props.modelValue + __props.pageRange;
return baseEnd > __props.totalPages ? __props.totalPages : baseEnd < __props.pageRange ? __props.pageRange : baseEnd;
}), range = computed(() => allPages.value.slice(rangeStartAt.value, rangeEndAt.value)), firstDivider = computed(
() => __props.modelValue - __props.pageRange > 2 ? [{ divider: !0 }] : []
), lastDivider = computed(
() => __props.modelValue < __props.totalPages - __props.pageRange - 1 ? [{ divider: !0 }] : []
), pages = computed(() => [
...firstOne.value,
...firstDivider.value,
...range.value,
...lastDivider.value,
...lastOne.value
]);
function setPageNumber(page) {
page !== __props.modelValue && emits("update:model-value", page);
}
return (_ctx, _cache) => (openBlock(), createElementBlock("nav", {
class: "m-pagination m-reset-css",
role: "navigation",
"aria-label": unref(t)("pagination.navAriaLabel")
}, [
createElementVNode("ul", null, [
createElementVNode("li", null, [
createVNode(MazBtn, mergeProps(buttonsPropsMerged.value, {
disabled: __props.modelValue === 1,
"aria-label": "First Page, Page 1",
"aria-setsize": __props.resultsSize ?? void 0,
"aria-posinset": "1",
size: __props.size,
onClick: _cache[0] || (_cache[0] = ($event) => setPageNumber(1))
}), {
default: withCtx(() => [
createElementVNode("span", _hoisted_2, [
renderSlot(_ctx.$slots, "first-page-sr", { page: 1 }, () => [
createTextVNode(toDisplayString(unref(t)("pagination.screenReader.firstPage", { page: 1 })), 1)
], !0)
]),
createVNode(unref(MazChevronDoubleLeft))
]),
_: 3
}, 16, ["disabled", "aria-setsize", "size"])
]),
createElementVNode("li", null, [
createVNode(MazBtn, mergeProps(buttonsPropsMerged.value, {
disabled: __props.modelValue === 1,
"aria-label": `Previous Page, Page ${previousPage.value}`,
"aria-setsize": __props.resultsSize ?? void 0,
"aria-posinset": previousPage.value,
size: __props.size,
onClick: _cache[1] || (_cache[1] = ($event) => setPageNumber(previousPage.value))
}), {
default: withCtx(() => [
createElementVNode("span", _hoisted_3, [
renderSlot(_ctx.$slots, "previous-page-sr", { page: previousPage.value }, () => [
createTextVNode(toDisplayString(unref(t)("pagination.screenReader.previousPage", { page: previousPage.value })), 1)
], !0)
]),
createVNode(unref(MazChevronLeft))
]),
_: 3
}, 16, ["disabled", "aria-label", "aria-setsize", "aria-posinset", "size"])
]),
(openBlock(!0), createElementBlock(Fragment, null, renderList(pages.value, (page, i) => (openBlock(), createElementBlock("li", {
id: "number" in page ? `button-${i}-${page.number}` : `ellipsis-${i}`,
key: "number" in page ? `button-${i}-${page.number}` : `ellipsis-${i}`
}, [
"number" in page ? (openBlock(), createBlock(MazBtn, mergeProps({
key: 0,
ref_for: !0
}, {
...buttonsPropsMerged.value,
color: page.isActive ? __props.activeColor : buttonsPropsMerged.value.color,
outlined: page.isActive ? !1 : buttonsPropsMerged.value.outlined
}, {
size: __props.size,
"aria-label": `Page ${page.number}`,
"aria-current": page.isActive ? "true" : "false",
"aria-setsize": __props.resultsSize ?? void 0,
loading: page.loading,
"aria-posinset": page.number,
class: { active: page.isActive },
onClick: ($event) => page.isActive ? void 0 : setPageNumber(page.number)
}), {
default: withCtx(() => [
createElementVNode("span", _hoisted_5, [
renderSlot(_ctx.$slots, "page-sr", {
page: page.number
}, () => [
createTextVNode(toDisplayString(unref(t)("pagination.screenReader.page", { page: page.number })), 1)
], !0)
]),
createTextVNode(" " + toDisplayString(page.number), 1)
]),
_: 2
}, 1040, ["size", "aria-label", "aria-current", "aria-setsize", "loading", "aria-posinset", "class", "onClick"])) : page.divider ? (openBlock(), createElementBlock("div", mergeProps({
key: 1,
ref_for: !0
}, buttonsPropsMerged.value, { class: "flex-center flex p-2" }), [
createVNode(unref(MazEllipsisHorizontal))
], 16)) : createCommentVNode("", !0)
], 8, _hoisted_4))), 128)),
createElementVNode("li", null, [
createVNode(MazBtn, mergeProps(buttonsPropsMerged.value, {
disabled: __props.modelValue === __props.totalPages,
"aria-label": `Next Page, Page ${nextPage.value}`,
"aria-setsize": __props.resultsSize ?? void 0,
"aria-posinset": nextPage.value,
size: __props.size,
onClick: _cache[2] || (_cache[2] = ($event) => setPageNumber(nextPage.value))
}), {
default: withCtx(() => [
createElementVNode("span", _hoisted_6, [
renderSlot(_ctx.$slots, "next-page-sr", { page: nextPage.value }, () => [
createTextVNode(toDisplayString(unref(t)("pagination.screenReader.nextPage", { page: nextPage.value })), 1)
], !0)
]),
createVNode(unref(MazChevronLeft), { class: "-maz-rotate-180" })
]),
_: 3
}, 16, ["disabled", "aria-label", "aria-setsize", "aria-posinset", "size"])
]),
createElementVNode("li", null, [
createVNode(MazBtn, mergeProps(buttonsPropsMerged.value, {
disabled: __props.modelValue === __props.totalPages,
"aria-label": `Next Page, Page ${__props.totalPages}`,
"aria-setsize": __props.resultsSize ?? void 0,
"aria-posinset": __props.totalPages,
size: __props.size,
onClick: _cache[3] || (_cache[3] = ($event) => setPageNumber(__props.totalPages))
}), {
default: withCtx(() => [
createElementVNode("span", _hoisted_7, [
renderSlot(_ctx.$slots, "last-page-sr", { page: __props.totalPages }, () => [
createTextVNode(toDisplayString(unref(t)("pagination.screenReader.lastPage", { page: __props.totalPages })), 1)
], !0)
]),
createVNode(unref(MazChevronDoubleLeft), { class: "-maz-rotate-180" })
]),
_: 3
}, 16, ["disabled", "aria-label", "aria-setsize", "aria-posinset", "size"])
])
])
], 8, _hoisted_1));
}
}), MazPagination = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7b81246f"]]);
export {
MazPagination as default
};