maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
328 lines (327 loc) • 12.4 kB
JavaScript
import { defineComponent as L, defineAsyncComponent as N, useAttrs as H, computed as s, openBlock as n, createBlock as p, resolveDynamicComponent as O, normalizeClass as z, normalizeStyle as J, withCtx as k, renderSlot as v, unref as g, createCommentVNode as I, createElementBlock as A, createVNode as d, createElementVNode as u, mergeProps as $, createTextVNode as V, toDisplayString as R, Fragment as K, renderList as Q } from "vue";
import '../assets/MazPagination.BGhtdKHn.css';const W = {
key: 0,
class: "m-btn-loader-container"
}, X = /* @__PURE__ */ L({
__name: "MazBtn",
props: {
variant: { default: "button" },
size: { default: "md" },
color: { default: "primary" },
type: { default: "button" },
rounded: { type: Boolean },
roundedSize: { default: "lg" },
noRounded: { type: Boolean },
outline: { type: Boolean },
pastel: { type: Boolean },
block: { type: Boolean },
noUnderline: { type: Boolean },
loading: { type: Boolean },
disabled: { type: Boolean },
fab: { type: Boolean },
icon: { type: [String, Function, Object], default: void 0 },
leftIcon: { type: [String, Function, Object], default: void 0 },
rightIcon: { type: [String, Function, Object], default: void 0 },
noPadding: { type: Boolean },
noElevation: { type: Boolean },
justify: { default: "center" }
},
setup(y) {
const o = y, e = N(() => import("./MazSpinner.u38Xp-ls.mjs")), c = N(() => import("./MazIcon.Cq1v4J3r.mjs")), { href: P, to: E } = H(), C = s(() => P ? "a" : E ? "router-link" : "button"), D = s(() => o.pastel ? `--${o.color}-pastel` : o.outline ? `--${o.color}-outline` : `--${o.color}`), i = s(
() => (o.loading || o.disabled) && C.value === "button"
), f = s(() => i.value ? "--cursor-default" : "--cursor-pointer"), b = s(() => `--is-${o.variant}`), S = s(() => o.loading && o.variant === "button"), F = s(() => C.value === "button" ? o.type : void 0), m = s(() => o.size === "xl" ? "maz-text-3xl" : o.size === "lg" ? "maz-text-2xl" : o.size === "md" ? "maz-text-xl" : o.size === "sm" ? "maz-text-lg" : o.size === "xs" ? "maz-text-base" : o.size === "mini" ? "maz-text-sm" : "maz-text-xl");
return (a, j) => (n(), p(O(C.value), {
disabled: i.value || void 0,
class: z(["m-btn m-reset-css", [
`--${a.size}`,
!a.fab && !a.rounded && a.roundedSize && `--rounded-${a.roundedSize}`,
D.value,
f.value,
b.value,
{
"--block": a.block,
"--no-underline": a.noUnderline,
"--fab": a.fab,
"--loading": a.loading,
"--disabled": i.value,
"--rounded": a.rounded,
"--no-rounded": a.noRounded,
"--no-padding": a.noPadding,
"--no-elevation": a.noElevation
}
]]),
style: J([`--justify: ${a.justify}`]),
type: F.value
}, {
default: k(() => [
v(a.$slots, "left-icon", {}, () => [
typeof a.leftIcon == "string" ? (n(), p(g(c), {
key: 0,
name: a.leftIcon,
class: z([m.value])
}, null, 8, ["name", "class"])) : a.leftIcon ? (n(), p(O(a.leftIcon), {
key: 1,
class: z([m.value])
}, null, 8, ["class"])) : I("v-if", !0)
], !0),
v(a.$slots, "icon", {}, () => [
typeof a.icon == "string" ? (n(), p(g(c), {
key: 0,
name: a.icon,
class: z([m.value])
}, null, 8, ["name", "class"])) : a.icon ? (n(), p(O(a.icon), {
key: 1,
class: z([m.value])
}, null, 8, ["class"])) : I("v-if", !0)
], !0),
v(a.$slots, "default", {}, void 0, !0),
v(a.$slots, "right-icon", {}, () => [
typeof a.rightIcon == "string" ? (n(), p(g(c), {
key: 0,
name: a.rightIcon,
class: z([m.value])
}, null, 8, ["name", "class"])) : a.rightIcon ? (n(), p(O(a.rightIcon), {
key: 1,
class: z([m.value])
}, null, 8, ["class"])) : I("v-if", !0)
], !0),
S.value ? (n(), A("div", W, [
d(g(e), {
size: "2em",
color: a.color
}, null, 8, ["color"])
])) : I("v-if", !0)
]),
_: 3
/* FORWARDED */
}, 8, ["disabled", "class", "style", "type"]));
}
}), T = (y, o) => {
const e = y.__vccOpts || y;
for (const [c, P] of o)
e[c] = P;
return e;
}, h = /* @__PURE__ */ T(X, [["__scopeId", "data-v-6b881156"]]), Y = {
class: "m-pagination m-reset-css",
role: "navigation",
"aria-label": "page navigation"
}, Z = { class: "maz-sr-only" }, _ = { class: "maz-sr-only" }, x = ["id"], ee = { class: "maz-sr-only" }, ae = { class: "maz-sr-only" }, le = { class: "maz-sr-only" }, te = /* @__PURE__ */ L({
__name: "MazPagination",
props: {
modelValue: { default: 1 },
buttonProps: { default: void 0 },
resultsSize: { default: void 0 },
activeColor: { default: "primary" },
size: { default: "md" },
totalPages: {},
pageRange: { default: 2 },
loading: { type: Boolean }
},
emits: ["update:model-value"],
setup(y, { emit: o }) {
const e = y, c = o, P = N(() => import("./chevron-left.BqVOLRdC.mjs")), E = N(() => import("./chevron-double-left.D4-NpyrF.mjs")), C = N(() => import("./ellipsis-horizontal.6n158ATI.mjs")), D = {
size: "md",
color: "theme",
outline: !0,
noElevation: !0,
fab: !0
}, i = s(() => ({
...D,
...e.buttonProps
})), f = s(() => e.modelValue > 1 ? e.modelValue - 1 : 1), b = s(
() => e.modelValue < e.totalPages ? e.modelValue + 1 : e.totalPages
), S = s(
() => Array.from({ length: e.totalPages }, (l, r) => {
const t = r + 1;
return {
number: t,
isActive: t === e.modelValue,
loading: t === e.modelValue && e.loading
};
})
), F = s(
() => e.modelValue - e.pageRange > 1 ? S.value.slice(0, 1) : []
), m = s(
() => e.modelValue < e.totalPages - e.pageRange ? S.value.slice(-1) : []
), a = s(() => e.modelValue - e.pageRange - 1 < 0 ? 0 : e.modelValue - e.pageRange - 1 > e.totalPages - e.pageRange ? e.totalPages - e.pageRange : e.modelValue - e.pageRange - 1), j = s(
() => e.modelValue + e.pageRange > e.totalPages ? e.totalPages : e.modelValue + e.pageRange < e.pageRange ? e.pageRange : e.modelValue + e.pageRange
), U = s(() => S.value.slice(a.value, j.value)), w = s(
() => e.modelValue - e.pageRange > 2 ? [{ divider: !0 }] : []
), q = s(
() => e.modelValue < e.totalPages - e.pageRange - 1 ? [{ divider: !0 }] : []
), G = s(() => [
...F.value,
...w.value,
...U.value,
...q.value,
...m.value
]);
function B(l) {
l !== e.modelValue && c("update:model-value", l);
}
return (l, r) => (n(), A("nav", Y, [
u("ul", null, [
u("li", null, [
d(h, $(i.value, {
disabled: l.modelValue === 1,
"aria-label": "First Page, Page 1",
"aria-setsize": l.resultsSize ?? void 0,
"aria-posinset": "1",
size: l.size,
onClick: r[0] || (r[0] = (t) => B(1))
}), {
default: k(() => [
u("span", Z, [
v(l.$slots, "first-page-sr", { page: 1 }, () => [
r[4] || (r[4] = V("First Page, page 1"))
], !0)
]),
d(g(E))
]),
_: 3
/* FORWARDED */
}, 16, ["disabled", "aria-setsize", "size"])
]),
u("li", null, [
d(h, $(i.value, {
disabled: l.modelValue === 1,
"aria-label": `Previous Page, Page ${f.value}`,
"aria-setsize": l.resultsSize ?? void 0,
"aria-posinset": f.value,
size: l.size,
onClick: r[1] || (r[1] = (t) => B(f.value))
}), {
default: k(() => [
u("span", _, [
v(l.$slots, "previous-page-sr", { page: f.value }, () => [
V(
" Previous Page, page " + R(f.value),
1
/* TEXT */
)
], !0)
]),
d(g(P))
]),
_: 3
/* FORWARDED */
}, 16, ["disabled", "aria-label", "aria-setsize", "aria-posinset", "size"])
]),
(n(!0), A(
K,
null,
Q(G.value, (t, M) => (n(), A("li", {
id: "number" in t ? `button-${M}-${t.number}` : `ellipsis-${M}`,
key: "number" in t ? `button-${M}-${t.number}` : `ellipsis-${M}`
}, [
"number" in t ? (n(), p(h, $({
key: 0,
ref_for: !0
}, {
...i.value,
color: t.isActive ? l.activeColor : i.value.color,
outline: t.isActive ? !1 : i.value.outline
}, {
size: l.size,
"aria-label": `Page ${t.number}`,
"aria-current": t.isActive ? "true" : "false",
"aria-setsize": l.resultsSize ?? void 0,
loading: t.loading,
"aria-posinset": t.number,
class: { active: t.isActive },
onClick: (oe) => t.isActive ? void 0 : B(t.number)
}), {
default: k(() => [
u("span", ee, [
v(l.$slots, "page-sr", {
page: t.number
}, () => [
V(
"Page " + R(t.number),
1
/* TEXT */
)
], !0)
]),
V(
" " + R(t.number),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1040, ["size", "aria-label", "aria-current", "aria-setsize", "loading", "aria-posinset", "class", "onClick"])) : t.divider ? (n(), A(
"div",
$({
key: 1,
ref_for: !0
}, i.value, { class: "flex p-2 flex-center" }),
[
d(g(C))
],
16
/* FULL_PROPS */
)) : I("v-if", !0)
], 8, x))),
128
/* KEYED_FRAGMENT */
)),
u("li", null, [
d(h, $(i.value, {
disabled: l.modelValue === l.totalPages,
"aria-label": `Next Page, Page ${b.value}`,
"aria-setsize": l.resultsSize ?? void 0,
"aria-posinset": b.value,
size: l.size,
onClick: r[2] || (r[2] = (t) => B(b.value))
}), {
default: k(() => [
u("span", ae, [
v(l.$slots, "next-page-sr", { page: b.value }, () => [
V(
"Next Page, page " + R(b.value),
1
/* TEXT */
)
], !0)
]),
d(g(P), { class: "-maz-rotate-180" })
]),
_: 3
/* FORWARDED */
}, 16, ["disabled", "aria-label", "aria-setsize", "aria-posinset", "size"])
]),
u("li", null, [
d(h, $(i.value, {
disabled: l.modelValue === l.totalPages,
"aria-label": `Next Page, Page ${l.totalPages}`,
"aria-setsize": l.resultsSize ?? void 0,
"aria-posinset": l.totalPages,
size: l.size,
onClick: r[3] || (r[3] = (t) => B(l.totalPages))
}), {
default: k(() => [
u("span", le, [
v(l.$slots, "last-page-sr", { page: l.totalPages }, () => [
V(
"Last Page, page " + R(l.totalPages),
1
/* TEXT */
)
], !0)
]),
d(g(E), { class: "-maz-rotate-180" })
]),
_: 3
/* FORWARDED */
}, 16, ["disabled", "aria-label", "aria-setsize", "aria-posinset", "size"])
])
])
]));
}
}), ne = /* @__PURE__ */ T(te, [["__scopeId", "data-v-77c62b42"]]);
export {
ne as M,
T as _
};