vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
261 lines (260 loc) • 11.3 kB
JavaScript
import { defineComponent as G, ref as c, computed as f, watch as O, createElementBlock as b, openBlock as g, normalizeStyle as W, normalizeClass as w, unref as C, createCommentVNode as k, createElementVNode as r, withDirectives as S, toDisplayString as $, withKeys as m, withModifiers as p, vShow as L, Fragment as X, renderList as Y, createBlock as Z, mergeProps as H, createTextVNode as I, createVNode as _, nextTick as F } from "vue";
import ee from "../input/index.js";
import ae from "../select/index.js";
import { useInject as te } from "../utils/index.js";
const le = {
key: 0,
class: "pagination-total-text"
}, ne = ["onKeydown", "onClick"], ie = {
key: 1,
class: "pagination-options"
}, oe = {
key: 1,
class: "pagination-jump-page"
}, ve = /* @__PURE__ */ G({
__name: "Pagination",
props: {
page: { default: 1 },
pageSize: { default: 10 },
total: { default: 0 },
disabled: { type: Boolean, default: !1 },
pageAmount: { default: 5 },
hideOnSinglePage: { type: Boolean, default: !1 },
showQuickJumper: { type: Boolean, default: !1 },
jumperProps: { default: () => ({}) },
showSizeChanger: { type: Boolean, default: void 0 },
changerProps: { default: () => ({}) },
pageSizeOptions: { default: () => [10, 20, 50, 100] },
showTotal: { type: [Boolean, Function], default: !1 },
placement: { default: "center" },
size: { default: "large" }
},
emits: ["update:page", "update:pageSize", "change", "pageSizeChange"],
setup(l, { emit: J }) {
const i = l, t = c(i.page), s = c(i.pageSize), B = c(null), h = c(), x = c(!1), P = c(!1), { colorPalettes: M } = te("Pagination"), v = J, o = f(() => Math.ceil(i.total / s.value)), A = f(() => {
if (typeof i.showTotal == "boolean") {
if (i.showTotal)
return `共 ${i.total} 条`;
} else {
const a = (t.value - 1) * s.value + 1, e = t.value * s.value > i.total ? i.total : t.value * s.value;
return i.showTotal(i.total, [a, e]);
}
return null;
}), z = f(() => D(t.value).filter((a) => a !== 1 && a !== o.value)), K = f(() => typeof i.showSizeChanger == "boolean" ? i.showSizeChanger : i.total > 50), E = f(() => {
const a = [s.value, ...i.pageSizeOptions].map(
(e) => Number(e)
);
return Array.from(new Set(a)).sort((e, n) => e - n).map((e) => ({
label: `${e} 条/页`,
value: e
}));
}), Q = f(() => {
const a = {
small: 24,
middle: 28,
large: 32
};
return a[i.size] || a.large;
}), N = f(() => i.size === "small" ? "small" : "middle");
O(
() => i.page,
(a) => {
t.value = a;
}
), O(
() => i.pageSize,
(a) => {
s.value = a;
}
);
function D(a) {
const e = [], n = Math.floor(i.pageAmount / 2), u = {
start: a - n,
end: a + n
};
u.start < 1 && (u.end = u.end + (1 - u.start), u.start = 1), u.end > o.value && (u.start = u.start - (u.end - o.value), u.end = o.value), u.start < 1 && (u.start = 1), u.start > 1 ? x.value = !0 : x.value = !1, u.end < o.value ? P.value = !0 : P.value = !1;
for (let y = u.start; y <= u.end; y++)
e.push(y);
return e;
}
function V() {
t.value = t.value - i.pageAmount > 0 ? t.value - i.pageAmount : 1, v("update:page", t.value), v("change", t.value, s.value);
}
function j() {
t.value = t.value + i.pageAmount < o.value ? t.value + i.pageAmount : o.value, v("update:page", t.value), v("change", t.value, s.value);
}
async function T() {
let a = Number(h.value);
h.value && Number.isInteger(a) && (a < 1 && (a = 1), a > o.value && (a = o.value), d(a)), await F(), h.value = void 0;
}
async function R(a) {
await F();
const e = z.value.findIndex((n) => n === a);
B.value?.[e].focus();
}
function d(a, e = !1) {
if (a === 0 || a === o.value + 1)
return !1;
t.value !== a && (t.value = a, e && R(a), v("update:page", t.value), v("change", t.value, s.value));
}
function U(a, e) {
a.target.focus(), d(e);
}
function q(a) {
s.value = a;
const e = Math.ceil(i.total / a);
t.value > e && (t.value = e), v("update:page", t.value), v("update:pageSize", s.value), v("pageSizeChange", t.value, s.value), v("change", t.value, s.value);
}
return (a, e) => (g(), b("div", {
class: w(["pagination-wrap", [
`pagination-${l.placement}`,
{
"pagination-small": l.size === "small",
"pagination-middle": l.size === "middle",
"pagination-disabled": l.disabled,
"pagination-hidden": !l.total || l.hideOnSinglePage && l.total <= s.value
}
]]),
style: W(`--pagination-primary-color: ${C(M)[5]}; --pagination-primary-color-focus-visible: ${C(M)[2]};`)
}, [
A.value ? (g(), b("span", le, $(A.value), 1)) : k("", !0),
r("span", {
tabindex: "0",
class: w(["pagination-prev", { "pagination-item-disabled": t.value === 1 }]),
onKeydown: e[0] || (e[0] = m(p((n) => l.disabled ? () => !1 : d(t.value - 1), ["prevent"]), ["enter"])),
onClick: e[1] || (e[1] = (n) => l.disabled || t.value === 1 ? () => !1 : d(t.value - 1))
}, [...e[14] || (e[14] = [
r("svg", {
class: "arrow-svg",
viewBox: "64 64 896 896",
"data-icon": "left",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
focusable: "false"
}, [
r("path", { d: "M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" })
], -1)
])], 34),
r("span", {
tabindex: "0",
class: w(["pagination-item", { "pagination-item-active": t.value === 1 }]),
onKeydown: e[2] || (e[2] = m(p((n) => l.disabled ? () => !1 : d(1), ["prevent"]), ["enter"])),
onClick: e[3] || (e[3] = (n) => l.disabled ? () => !1 : d(1))
}, " 1 ", 34),
S(r("span", {
tabindex: "0",
ref: "forward",
class: "pagintion-jump-prev",
onKeydown: e[4] || (e[4] = m(p((n) => l.disabled ? () => !1 : V(), ["prevent"]), ["enter"])),
onClick: e[5] || (e[5] = (n) => l.disabled ? () => !1 : V())
}, [...e[15] || (e[15] = [
r("span", { class: "ellipsis-character" }, "•••", -1),
r("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "double-left",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
r("path", { d: "M272.9 512l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512zm304 0l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3a31.99 31.99 0 000 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z" })
], -1)
])], 544), [
[L, x.value && z.value[0] - 1 > 1]
]),
(g(!0), b(X, null, Y(z.value, (n, u) => (g(), b("span", {
ref_for: !0,
ref_key: "pageListRef",
ref: B,
tabindex: "0",
class: w(["pagination-item", { "pagination-item-active": t.value === n }]),
key: u,
onKeydown: m(p((y) => l.disabled ? () => !1 : d(n, !0), ["prevent"]), ["enter"]),
onClick: (y) => l.disabled ? () => !1 : d(n, !0)
}, $(n), 43, ne))), 128)),
S(r("span", {
tabindex: "0",
ref: "backward",
class: "pagintion-jump-next",
onKeydown: e[6] || (e[6] = m(p((n) => l.disabled ? () => !1 : j(), ["prevent"]), ["enter"])),
onClick: e[7] || (e[7] = (n) => l.disabled ? () => !1 : j())
}, [...e[16] || (e[16] = [
r("span", { class: "ellipsis-character" }, "•••", -1),
r("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "double-right",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
r("path", { d: "M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 00188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 00492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z" })
], -1)
])], 544), [
[L, P.value && z.value[z.value.length - 1] + 1 < o.value]
]),
S(r("span", {
tabindex: "0",
class: w(["pagination-item", { "pagination-item-active": t.value === o.value }]),
onKeydown: e[8] || (e[8] = m(p((n) => l.disabled ? () => !1 : d(o.value), ["prevent"]), ["enter"])),
onClick: e[9] || (e[9] = (n) => l.disabled ? () => !1 : d(o.value))
}, $(o.value), 35), [
[L, o.value !== 1]
]),
r("span", {
tabindex: "0",
class: w(["pagination-next", { "pagination-item-disabled": t.value === o.value }]),
onKeydown: e[10] || (e[10] = m(p((n) => l.disabled ? () => !1 : d(t.value + 1), ["prevent"]), ["enter"])),
onClick: e[11] || (e[11] = (n) => l.disabled || t.value === o.value ? () => !1 : U(n, t.value + 1))
}, [...e[17] || (e[17] = [
r("svg", {
class: "arrow-svg",
viewBox: "64 64 896 896",
"data-icon": "right",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
focusable: "false"
}, [
r("path", { d: "M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z" })
], -1)
])], 34),
K.value || l.showQuickJumper ? (g(), b("span", ie, [
K.value ? (g(), Z(C(ae), H({
key: 0,
size: N.value,
height: Q.value,
disabled: l.disabled,
options: E.value,
modelValue: s.value,
"onUpdate:modelValue": e[12] || (e[12] = (n) => s.value = n),
onChange: q
}, l.changerProps), null, 16, ["size", "height", "disabled", "options", "modelValue"])) : k("", !0),
l.showQuickJumper ? (g(), b("span", oe, [
e[18] || (e[18] = I(" 跳至", -1)),
_(C(ee), H({
width: 50,
size: N.value,
disabled: l.disabled,
value: h.value,
"onUpdate:value": e[13] || (e[13] = (n) => h.value = n),
valueModifiers: { lazy: !0 },
onChange: T,
onEnter: T
}, l.jumperProps), null, 16, ["size", "disabled", "value"]),
e[19] || (e[19] = I("页 ", -1))
])) : k("", !0)
])) : k("", !0)
], 6));
}
});
export {
ve as default
};