vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
262 lines (261 loc) • 11.3 kB
JavaScript
import { defineComponent as W, ref as m, computed as v, watch as O, createElementBlock as b, openBlock as p, normalizeStyle as X, normalizeClass as c, unref as y, createCommentVNode as C, createElementVNode as u, withDirectives as S, toDisplayString as $, withKeys as f, withModifiers as g, vShow as L, Fragment as Y, renderList as Z, createBlock as x, 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 le } from "../utils/index.js";
const te = {
key: 0,
class: "pagination-total-text"
}, ne = ["onKeydown", "onClick"], ie = {
key: 1,
class: "pagination-options"
}, oe = {
key: 1,
class: "pagination-jump-page"
}, ve = /* @__PURE__ */ W({
__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(J, { emit: E }) {
const n = J, l = m(n.page), s = m(n.pageSize), B = m(null), w = m(), k = m(!1), P = m(!1), { colorPalettes: M } = le("Pagination"), d = E, o = v(() => Math.ceil(n.total / s.value)), A = v(() => {
if (typeof n.showTotal == "boolean") {
if (n.showTotal)
return `共 ${n.total} 条`;
} else {
const e = (l.value - 1) * s.value + 1, a = l.value * s.value > n.total ? n.total : l.value * s.value;
return n.showTotal(n.total, [e, a]);
}
return null;
}), h = v(() => R(l.value).filter((e) => e !== 1 && e !== o.value)), K = v(() => typeof n.showSizeChanger == "boolean" ? n.showSizeChanger : n.total > 50), Q = v(() => {
const e = [s.value, ...n.pageSizeOptions].map(
(a) => Number(a)
);
return Array.from(new Set(e)).sort((a, t) => a - t).map((a) => ({
label: `${a} 条/页`,
value: a
}));
}), D = v(() => {
const e = {
small: 24,
middle: 28,
large: 32
};
return e[n.size] || e.large;
}), N = v(() => n.size === "small" ? "small" : "middle");
O(
() => n.page,
(e) => {
l.value = e;
}
), O(
() => n.pageSize,
(e) => {
s.value = e;
}
);
function R(e) {
var a = [], t = Math.floor(n.pageAmount / 2), i = {
start: e - t,
end: e + t
};
i.start < 1 && (i.end = i.end + (1 - i.start), i.start = 1), i.end > o.value && (i.start = i.start - (i.end - o.value), i.end = o.value), i.start < 1 && (i.start = 1), i.start > 1 ? k.value = !0 : k.value = !1, i.end < o.value ? P.value = !0 : P.value = !1;
for (let z = i.start; z <= i.end; z++)
a.push(z);
return a;
}
function V() {
l.value = l.value - n.pageAmount > 0 ? l.value - n.pageAmount : 1, d("update:page", l.value), d("change", l.value, s.value);
}
function j() {
l.value = l.value + n.pageAmount < o.value ? l.value + n.pageAmount : o.value, d("update:page", l.value), d("change", l.value, s.value);
}
async function T() {
let e = Number(w.value);
w.value && Number.isInteger(e) && (e < 1 && (e = 1), e > o.value && (e = o.value), r(e)), await F(), w.value = void 0;
}
async function U(e) {
var t;
await F();
const a = h.value.findIndex((i) => i === e);
(t = B.value) == null || t[a].focus();
}
function r(e, a = !1) {
if (e === 0 || e === o.value + 1)
return !1;
l.value !== e && (l.value = e, a && U(e), d("update:page", l.value), d("change", l.value, s.value));
}
function q(e, a) {
e.target.focus(), r(a);
}
function G(e) {
s.value = e;
const a = Math.ceil(n.total / e);
l.value > a && (l.value = a), d("update:page", l.value), d("update:pageSize", s.value), d("pageSizeChange", l.value, s.value), d("change", l.value, s.value);
}
return (e, a) => (p(), b("div", {
class: c(["m-pagination", [
`pagination-${e.placement}`,
{
"pagination-small": e.size === "small",
"pagination-middle": e.size === "middle",
"pagination-disabled": e.disabled,
"pagination-hidden": !e.total || e.hideOnSinglePage && e.total <= s.value
}
]]),
style: X(`--pagination-primary-color: ${y(M)[5]}; --pagination-primary-color-focus-visible: ${y(M)[2]};`)
}, [
A.value ? (p(), b("span", te, $(A.value), 1)) : C("", !0),
u("span", {
tabindex: "0",
class: c(["pagination-prev", { "pagination-item-disabled": l.value === 1 }]),
onKeydown: a[0] || (a[0] = f(g((t) => e.disabled ? () => !1 : r(l.value - 1), ["prevent"]), ["enter"])),
onClick: a[1] || (a[1] = (t) => e.disabled || l.value === 1 ? () => !1 : r(l.value - 1))
}, a[14] || (a[14] = [
u("svg", {
class: "arrow-svg",
viewBox: "64 64 896 896",
"data-icon": "left",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
focusable: "false"
}, [
u("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),
u("span", {
tabindex: "0",
class: c(["pagination-item", { "pagination-item-active": l.value === 1 }]),
onKeydown: a[2] || (a[2] = f(g((t) => e.disabled ? () => !1 : r(1), ["prevent"]), ["enter"])),
onClick: a[3] || (a[3] = (t) => e.disabled ? () => !1 : r(1))
}, " 1 ", 34),
S(u("span", {
tabindex: "0",
ref: "forward",
class: "pagintion-jump-prev",
onKeydown: a[4] || (a[4] = f(g((t) => e.disabled ? () => !1 : V(), ["prevent"]), ["enter"])),
onClick: a[5] || (a[5] = (t) => e.disabled ? () => !1 : V())
}, a[15] || (a[15] = [
u("span", { class: "ellipsis-character" }, "•••", -1),
u("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "double-left",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
u("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, k.value && h.value[0] - 1 > 1]
]),
(p(!0), b(Y, null, Z(h.value, (t, i) => (p(), b("span", {
ref_for: !0,
ref_key: "pageListRef",
ref: B,
tabindex: "0",
class: c(["pagination-item", { "pagination-item-active": l.value === t }]),
key: i,
onKeydown: f(g((z) => e.disabled ? () => !1 : r(t, !0), ["prevent"]), ["enter"]),
onClick: (z) => e.disabled ? () => !1 : r(t, !0)
}, $(t), 43, ne))), 128)),
S(u("span", {
tabindex: "0",
ref: "backward",
class: "pagintion-jump-next",
onKeydown: a[6] || (a[6] = f(g((t) => e.disabled ? () => !1 : j(), ["prevent"]), ["enter"])),
onClick: a[7] || (a[7] = (t) => e.disabled ? () => !1 : j())
}, a[16] || (a[16] = [
u("span", { class: "ellipsis-character" }, "•••", -1),
u("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "double-right",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
u("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 && h.value[h.value.length - 1] + 1 < o.value]
]),
S(u("span", {
tabindex: "0",
class: c(["pagination-item", { "pagination-item-active": l.value === o.value }]),
onKeydown: a[8] || (a[8] = f(g((t) => e.disabled ? () => !1 : r(o.value), ["prevent"]), ["enter"])),
onClick: a[9] || (a[9] = (t) => e.disabled ? () => !1 : r(o.value))
}, $(o.value), 35), [
[L, o.value !== 1]
]),
u("span", {
tabindex: "0",
class: c(["pagination-next", { "pagination-item-disabled": l.value === o.value }]),
onKeydown: a[10] || (a[10] = f(g((t) => e.disabled ? () => !1 : r(l.value + 1), ["prevent"]), ["enter"])),
onClick: a[11] || (a[11] = (t) => e.disabled || l.value === o.value ? () => !1 : q(t, l.value + 1))
}, a[17] || (a[17] = [
u("svg", {
class: "arrow-svg",
viewBox: "64 64 896 896",
"data-icon": "right",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
focusable: "false"
}, [
u("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 || e.showQuickJumper ? (p(), b("span", ie, [
K.value ? (p(), x(y(ae), H({
key: 0,
size: N.value,
height: D.value,
disabled: e.disabled,
options: Q.value,
modelValue: s.value,
"onUpdate:modelValue": a[12] || (a[12] = (t) => s.value = t),
onChange: G
}, e.changerProps), null, 16, ["size", "height", "disabled", "options", "modelValue"])) : C("", !0),
e.showQuickJumper ? (p(), b("span", oe, [
a[18] || (a[18] = I(" 跳至")),
_(y(ee), H({
width: 50,
size: N.value,
disabled: e.disabled,
value: w.value,
"onUpdate:value": a[13] || (a[13] = (t) => w.value = t),
valueModifiers: { lazy: !0 },
onChange: T,
onEnter: T
}, e.jumperProps), null, 16, ["size", "disabled", "value"]),
a[19] || (a[19] = I("页 "))
])) : C("", !0)
])) : C("", !0)
], 6));
}
});
export {
ve as default
};