@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
457 lines (456 loc) • 14.7 kB
JavaScript
import { isVNode as Pe, defineComponent as Ee, ref as g, reactive as Ce, toRef as Te, computed as m, watch as j, onMounted as ye, nextTick as W, onUpdated as ze, createVNode as u, renderSlot as q, mergeProps as E, Transition as ee } from "vue";
import "../icon/index.mjs";
import "../number-input/index.mjs";
import "../renderer/index.mjs";
import "../select/index.mjs";
import { useProps as Ie, createSizeProp as Se, useNameHelper as we, useIcons as je, useLocale as Ne, getCountWord as B, emitEvent as te, getCountWordOnly as Me } from "@vexip-ui/config";
import { useRtl as Re, useModifier as ke, createSlotRender as le } from "@vexip-ui/hooks";
import { decide as Le, isClient as ne, boundRange as $e, isNull as Ae, range as _ } from "@vexip-ui/utils";
import { paginationProps as Ke } from "./props.mjs";
import D from "../renderer/renderer.mjs";
import C from "../icon/icon.mjs";
import _e from "../select/select.vue2.mjs";
import Oe from "../number-input/number-input.vue2.mjs";
function T(p) {
return typeof p == "function" || Object.prototype.toString.call(p) === "[object Object]" && !Pe(p);
}
var h = /* @__PURE__ */ function(p) {
return p.LEFT = "left", p.CENTER = "center", p.RIGHT = "right", p;
}(h || {});
const Ze = /* @__PURE__ */ Ee({
name: "Pagination",
props: Ke,
emits: ["update:active", "update:page-size"],
setup(p, {
slots: y,
emit: Q,
expose: ae
}) {
const t = Ie("pagination", p, {
size: Se(),
locale: null,
total: {
default: 0,
validator: (e) => e >= 0,
static: !0
},
noBorder: !1,
background: !1,
pageSize: {
default: 10,
validator: (e) => e > 0
},
sizeOptions: () => [10, 20, 50, 100],
itemCount: {
default: 7,
validator: (e) => Number.isInteger(e) && e > 6
},
active: {
default: 1,
validator: (e) => e > 0,
static: !0
},
disabled: !1,
disableItem: {
default: () => !1,
isFunc: !0
},
turnPageCount: 5,
itemUnit: null,
plugins: {
default: () => [],
validator: (e) => Array.isArray(e)
},
noTitle: !1,
itemTag: "li",
listTag: null,
slots: () => ({})
}), {
isRtl: N
} = Re(), i = we("pagination"), v = je(), O = g([]), s = g(t.active), z = g(t.pageSize), I = g(h.LEFT), M = g(!1), R = g(!1), k = g(t.active), d = Ce([]), c = Ne("pagination", Te(t, "locale")), {
target: U
} = ke({
passive: !1,
onKeyDown: (e, l) => {
t.disabled || Le([[() => l.up || l.down || l.left || l.right, () => {
const n = l.up || l.left ? -1 : 1;
if (ne && document.activeElement) {
const a = d.findIndex((P) => P === document.activeElement);
if (!~a) return;
d[$e(a + n, 0, d.length - 1)].focus();
}
}], [() => l.enter || l.space, () => {
if (document && document.activeElement && !~d.findIndex((a) => a === document.activeElement)) {
const a = i.bem("item", "active"), o = d.find((P) => P.classList.contains(a));
o == null || o.focus();
}
}]], {
beforeMatchAny: () => e.preventDefault(),
afterMatchAny: l.resetAll
});
}
}), ie = m(() => ({
[i.b()]: !0,
[i.bs("vars")]: !0,
[i.bm("inherit")]: t.inherit,
[i.bm(t.size)]: t.size !== "default",
[i.bm("background")]: t.background,
[i.bm("no-border")]: t.noBorder,
[i.bm("disabled")]: t.disabled
})), r = m(() => Math.ceil(t.total / (z.value || 1)) || 1), L = m(() => r.value > t.itemCount), F = m(() => {
const e = f(1, 1);
return e >= r.value || s.value === e;
}), H = m(() => {
const e = f(r.value, -1);
return e <= 1 || s.value === e;
}), X = m(() => `${c.value.prev} ${B(c.value.page, t.turnPageCount)}`), Y = m(() => `${c.value.next} ${B(c.value.page, t.turnPageCount)}`), $ = m(() => {
if (!L.value) return 0;
let e = f(s.value - t.turnPageCount, -1);
return e < 1 && (e = f(1, 1), e >= s.value) ? 0 : e;
}), S = m(() => {
if (!L.value) return 0;
let e = f(s.value + t.turnPageCount, 1);
return e > r.value && (e = f(r.value, -1), e <= s.value) ? 0 : e;
}), ue = m(() => t.sizeOptions.map((e) => ({
value: e,
label: `${e} ${c.value.perPage}`
}))), x = m(() => {
const e = t.plugins, l = e.findIndex(Ae);
return {
total: e.findIndex((n) => n === "total") - l,
size: e.findIndex((n) => n === "size") - l,
jump: e.findIndex((n) => n === "jump") - l
};
}), re = m(() => {
if (!t.plugins.includes("jump")) return 0;
let e = 0;
return t.plugins.includes("size") ? e = Math.ceil(t.total / (Math.min(...t.sizeOptions) || 10)) : e = Math.ceil(t.total / (t.pageSize || 10)), e.toString().length * 10 + 30;
});
j(() => t.active, (e) => {
b(e, !1);
}), j(() => t.itemCount, w), j(r, w), j(() => t.pageSize, (e) => {
z.value = e;
}), j(z, (e, l) => {
Q("update:page-size", e), te(t.onPageSizeChange, e);
const n = Math.ceil((l * (s.value - 1) + 1) / e);
let a = f(n, 1);
a > r.value && (a = f(n - 1, -1), a < 1 && (a = 0)), s.value = a, w();
}), ae({
changeActive: b,
handlePrev: A,
handleNext: K
}), ye(() => {
W(w);
}), ze(() => {
U.value && (d.length = 0, d.push(...Array.from(U.value.querySelectorAll(`${i.cbe("item")}:not(${i.cbem("item", "disabled")})`))));
});
function f(e, l) {
for (l = l / Math.abs(l); t.disableItem(e) && (e += l, !(e < 1 || e > r.value)); )
;
return e;
}
function Z(e) {
s.value !== e && (s.value = e, k.value = e, w(), Q("update:active", e), te(t.onChange, e));
}
function b(e, l = !0) {
if (e = parseInt(e.toString()), !(t.disabled || e < 1 || e > r.value || t.disableItem(e)) && (Z(e), ne && l)) {
const n = d.find((a) => a === document.activeElement);
n == null || n.blur(), W(() => {
var a;
(a = d.find((o) => o.tabIndex >= 0)) == null || a.focus();
});
}
}
function A() {
if (!F.value && !t.disabled) {
const e = f(s.value - 1, -1);
e >= 1 && b(e);
}
}
function K() {
if (!H.value && !t.disabled) {
const e = f(s.value + 1, 1);
e <= r.value && b(e);
}
}
function w() {
let e;
if (r.value <= t.itemCount)
e = _(r.value);
else {
const l = t.itemCount - 2, n = Math.ceil(t.itemCount / 2);
if (s.value < n)
e = _(l), e.push(r.value), I.value = h.LEFT;
else if (s.value <= r.value - n) {
let a = l - 2;
a % 2 === 0 && (a -= 1), e = _(a, s.value - (a - 1) / 2), e.unshift(1), e.push(r.value), I.value = h.CENTER;
} else
e = _(l, r.value - l + 1), e.unshift(1), I.value = h.RIGHT;
}
e.length === 1 && (O.value = []), O.value = e.slice(1, -1);
}
function se() {
M.value = !0;
}
function oe() {
M.value = !1;
}
function J() {
!t.disabled && $.value && b($.value);
}
function de() {
R.value = !0;
}
function ce() {
R.value = !1;
}
function G() {
!t.disabled && S.value && b(S.value);
}
function ve(e) {
e = Math.max(Math.min(parseInt(e.toString()), r.value), 1);
const l = e;
if (e !== s.value) {
const n = e > s.value ? 1 : -1;
e = f(l, n), (n > 0 ? e > r.value : e < 1) && (e = f(l, -n), (n > 0 ? e < 1 : e > r.value) && (e = 0)), Z(e);
}
W(() => {
k.value = s.value;
});
}
function fe(e) {
let l;
const n = t.disabled || F.value, a = N.value ? v.value.angleRight : v.value.angleLeft;
return u(e, {
ref: (o) => o && !F.value && d.push(o),
class: [i.be("item"), i.bem("item", "prev"), n ? i.bem("item", "disabled") : ""],
title: t.noTitle ? void 0 : c.value.prevPage,
role: "menuitem",
tabindex: "-1",
"aria-label": c.value.prevPage,
"aria-hidden": n ? "true" : void 0,
onClick: A,
onKeydownEnter: A,
onKeydownSpace: A
}, T(l = q(y, "prev", {
disabled: n
}, () => [u(D, {
renderer: t.slots.prev,
data: {
disabled: n
}
}, {
default: () => [u(C, E(a, {
scale: +(a.scale || 1)
}), null)]
})])) ? l : {
default: () => [l]
});
}
function me(e) {
let l;
const n = t.disabled || H.value, a = N.value ? v.value.angleLeft : v.value.angleRight;
return u(e, {
ref: (o) => o && !H.value && d.push(o),
class: [i.be("item"), i.bem("item", "next"), n ? i.bem("item", "disabled") : ""],
title: t.noTitle ? void 0 : c.value.nextPage,
role: "menuitem",
tabindex: "-1",
"aria-label": c.value.nextPage,
"aria-hidden": n ? "true" : void 0,
onClick: K,
onKeydownEnter: K,
onKeydownSpace: K
}, T(l = q(y, "next", {
disabled: n
}, () => [u(D, {
renderer: t.slots.next,
data: {
disabled: n
}
}, {
default: () => [u(C, E(a, {
scale: +(a.scale || 1)
}), null)]
})])) ? l : {
default: () => [l]
});
}
function pe(e) {
let l;
if (!L.value || I.value === h.LEFT) return null;
const n = t.disabled || !$.value;
return u(e, {
ref: (a) => a && $.value && d.push(a),
class: {
[i.be("item")]: !0,
[i.bem("item", "more")]: !0,
[i.bem("item", "disabled")]: n
},
title: t.noTitle ? void 0 : X.value,
role: "menuitem",
tabindex: "-1",
"aria-label": X.value,
onClick: J,
onKeydownEnter: J,
onKeydownSpace: J,
onMouseenter: se,
onMouseleave: oe
}, T(l = le(y, ["prev-jump", "prevJump"], () => {
const a = N.value ? v.value.anglesRight : v.value.anglesLeft;
return u(ee, {
name: i.ns("fade")
}, {
default: () => [!n && M.value ? u(C, E(a, {
scale: +(a.scale || 1)
}), null) : u(C, E(v.value.ellipsis, {
scale: +(v.value.ellipsis.scale || 1),
style: "position: absolute"
}), null)]
});
})({
disabled: n,
entered: M.value
})) ? l : {
default: () => [l]
});
}
function be(e) {
let l;
if (!L.value || I.value === h.RIGHT) return null;
const n = t.disabled || !S.value;
return u(e, {
ref: (a) => a && S.value && d.push(a),
class: {
[i.be("item")]: !0,
[i.bem("item", "more")]: !0,
[i.bem("item", "disabled")]: n
},
title: t.noTitle ? void 0 : Y.value,
role: "menuitem",
tabindex: "-1",
"aria-label": Y.value,
onClick: G,
onKeydownEnter: G,
onKeydownSpace: G,
onMouseenter: de,
onMouseleave: ce
}, T(l = le(y, ["next-jump", "nextJump"], () => {
const a = N.value ? v.value.anglesLeft : v.value.anglesRight;
return u(ee, {
name: i.ns("fade")
}, {
default: () => [!n && R.value ? u(C, E(a, {
scale: +(a.scale || 1)
}), null) : u(C, E(v.value.ellipsis, {
scale: +(v.value.ellipsis.scale || 1),
style: "position: absolute"
}), null)]
});
})({
disabled: !S.value,
entered: R.value
})) ? l : {
default: () => [l]
});
}
function V(e, l) {
let n;
const a = t.disabled || t.disableItem(l), o = s.value === l;
return u(e, {
ref: (P) => P && d.push(P),
class: {
[i.be("item")]: !0,
[i.bem("item", "disabled")]: a,
[i.bem("item", "active")]: o
},
title: t.noTitle ? void 0 : l,
role: "menuitemradio",
tabindex: o ? "0" : "-1",
"aria-posinset": l,
"aria-setsize": r.value,
"aria-disabled": a ? "true" : void 0,
onClick: () => b(l),
onKeydownEnter: () => b(l),
onKeydownSpace: () => b(l)
}, T(n = q(y, "item", {
page: l,
disabled: a,
active: o
}, () => [u(D, {
renderer: t.slots.item,
data: {
page: l,
disabled: a,
active: o
}
}, T(l) ? l : {
default: () => [l]
})])) ? n : {
default: () => [n]
});
}
function ge() {
return t.plugins.includes("total") ? u("div", {
class: [i.be("total"), x.value.total < 0 && i.bem("total", "prefix")],
style: {
order: x.value.total
}
}, [`${c.value.total} ${B(t.itemUnit ?? c.value.itemUnit, t.total)}`]) : null;
}
function he() {
return t.plugins.includes("size") ? u("div", {
class: [i.be("size"), x.value.size < 0 && i.bem("size", "prefix")],
style: {
order: x.value.size
}
}, [u(_e, {
value: z.value,
"onUpdate:value": (e) => z.value = e,
inherit: !0,
class: i.be("size-select"),
options: ue.value,
filter: !1,
multiple: !1,
clearable: !1
}, null)]) : null;
}
function xe() {
return t.plugins.includes("jump") ? u("div", {
class: [i.be("jump"), x.value.jump < 0 && i.bem("jump", "prefix")],
style: {
order: x.value.jump
}
}, [c.value.jumpTo, u(Oe, {
value: k.value,
"onUpdate:value": (e) => k.value = e,
inherit: !0,
class: i.be("jump-input"),
clearable: !1,
sync: !1,
style: {
width: `${re.value}px`
},
onChange: ve
}, null), Me(c.value.page, 1)]) : null;
}
return () => {
const e = t.itemTag || "li", l = t.listTag || (e === "li" ? "ul" : "div");
return u("div", {
class: ie.value
}, [u(l, {
ref: U,
class: i.be("list"),
role: "menubar",
"aria-label": "Pagination",
"aria-disabled": t.disabled ? "true" : void 0
}, {
default: () => [fe(e), V(e, 1), pe(e), O.value.map((n) => V(e, n)), be(e), r.value > 1 && V(e, r.value), me(e)]
}), ge(), he(), xe()]);
};
}
});
export {
Ze as default
};
//# sourceMappingURL=pagination.mjs.map