@aifuxi/semi-ui-vue 0.1.0-alpha.0

package/dist/Pagination-4JvS-gHR.js

@@ -0,0 +1,572 @@
+import "./src-DNBBthjO.js";
+import { t as e } from "./foundation-Cawx37mp.js";
+import { t } from "./env-BeIzjQx7.js";
+import { t as n } from "./Tooltip-Bq7HZwnS.js";
+import { t as r } from "./InputNumber-BaeViVtG.js";
+import { n as i, t as a } from "./SelectOption-Ce-Lst-e.js";
+import { t as o } from "./config-context-CyynTtDb.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, getCurrentInstance as ee, inject as te, markRaw as h, mergeProps as g, normalizeClass as _, normalizeStyle as v, onBeforeUnmount as ne, openBlock as y, renderList as b, renderSlot as x, resolveDynamicComponent as re, shallowReactive as ie, shallowRef as S, toDisplayString as C, unref as w, useAttrs as ae, useSlots as oe, watch as T, withCtx as E } from "vue";
+import { IconChevronLeft as se, IconChevronRight as ce } from "@aifuxi/semi-icons-vue";
+`${t}`;
+var D = {
+	PAGE_SHOW_MAX: 7,
+	REST_PAGE_SHOW_MAX: 5,
+	DEFAULT_PAGE_SIZE: 10,
+	PAGE_SIZE_OPTION: [
+		10,
+		20,
+		40,
+		100
+	],
+	REST_PAGE_MAX_SIZE: 1e6
+}, O = class extends e {
+	constructor(e) {
+		super({ ...e });
+	}
+	init() {
+		let { currentPage: e, total: t, pageSize: n } = this.getStates();
+		this._updateDisabled({
+			currentPage: e,
+			total: t,
+			pageSize: n
+		}), this._updatePageList({
+			currentPage: e,
+			total: t,
+			pageSize: n
+		}), this._registerEventHandler();
+	}
+	destroy() {
+		this._unregisterEventHandler();
+	}
+	_registerEventHandler() {
+		this._adapter.registerKeyDownHandler(this.handleKeyDown);
+	}
+	_unregisterEventHandler() {
+		this._adapter.unregisterKeyDownHandler(this.handleKeyDown);
+	}
+	_updateDisabled(e) {
+		let { currentPage: t, total: n, pageSize: r } = e, i = this._getTotalPageNumber(n, r), a = !1, o = !1;
+		t === 1 ? (a = !0, o = i < 2) : t === i && (a = !1, o = !0);
+		let { prevDisabled: s, nextDisabled: c } = this.getStates();
+		(a !== s || o !== c) && this._adapter.setDisabled(a, o);
+	}
+	goPage(e) {
+		if (e === "...") return;
+		let { pageSize: t, currentPage: n } = this.getStates(), r = this._isInProps("currentPage");
+		e !== n && (r ? (this._adapter.notifyPageChange(e), this._adapter.notifyChange(e, t)) : (this.updatePage(e), this._adapter.notifyPageChange(e), this._adapter.notifyChange(e, t)));
+	}
+	updatePage(e = 1, t, n) {
+		t ??= this.getState("total"), n ??= this.getState("pageSize"), this._updateDisabled({
+			currentPage: e,
+			total: t,
+			pageSize: n
+		}), this._updatePageList({
+			currentPage: e,
+			total: t,
+			pageSize: n
+		}), t !== this.getState("total") && this._adapter.updateTotal(t), e !== this.getState("currentPage") && this._adapter.setCurrentPage(e), n !== this.getState("pageSize") && this._adapter.updatePageSize(n);
+	}
+	updateAllPageNumbers(e, t) {
+		let { size: n, hoverShowPageSelect: r, disabled: i } = this.getProps();
+		if (!(n !== "small" || !r || i)) {
+			let n = Array.from({ length: Math.ceil(e / t) }, (e, t) => t + 1);
+			this._adapter.updateAllPageNumbers(n);
+		}
+	}
+	goPrev() {
+		let { currentPage: e } = this.getStates();
+		e > 1 && this.goPage(e - 1);
+	}
+	goNext() {
+		let { currentPage: e, total: t, pageSize: n } = this.getStates();
+		e <= this._getTotalPageNumber(t, n) - 1 && this.goPage(e + 1);
+	}
+	_updatePageList(e) {
+		let { currentPage: t, total: n, pageSize: r } = e, i = [], a = [], o = [], s = this._getTotalPageNumber(n, r), { PAGE_SHOW_MAX: c, REST_PAGE_MAX_SIZE: l } = D;
+		if (s <= c) i = Array.from({ length: s }, (e, t) => t + 1), a = [], o = [];
+		else switch (!0) {
+			case t < 4:
+				i = [
+					1,
+					2,
+					3,
+					4,
+					"...",
+					s - 1,
+					s
+				], o = Array.from({ length: Math.min(s - 6, l) }, (e, t) => t + 5), a = [];
+				break;
+			case t === 4:
+				i = [
+					1,
+					2,
+					3,
+					4,
+					5,
+					"...",
+					s
+				], o = Array.from({ length: Math.min(s - 6, l) }, (e, t) => t + 6), a = [];
+				break;
+			case 4 < t && t < s - 3:
+				let e = Array.from({ length: 3 }, (e, n) => t + (n - 1));
+				i = [1, "..."].concat(e, "...", s), o = Array.from({ length: Math.min(s - t - 2, l) }, (e, n) => t + n + 2), a = Array.from({ length: Math.min(t - 3, l) }, (e, t) => t + 2);
+				break;
+			case t - 3 <= t && t <= s:
+				let n = Array.from({ length: 5 }, (e, t) => s - (4 - t));
+				i = [1, "..."].concat(n), o = [], a = Array.from({ length: Math.min(n[0] - 2, l) }, (e, t) => t + 2);
+		}
+		this._adapter.setPageList({
+			pageList: i,
+			restLeftPageList: a,
+			restRightPageList: o
+		});
+	}
+	changePageSize(e) {
+		let { pageSize: t } = this.getStates();
+		this._adapter.updatePageSize(e), this._adapter.notifyPageSizeChange(e);
+		let { total: n, currentPage: r } = this.getStates(), { preventPageChangeOnPageSizeChange: i } = this.getProps(), a = r;
+		if (!i) {
+			let n = (r - 1) * t + 1;
+			a = Math.ceil(n / e);
+		}
+		this.updatePage(a, n, e), r !== a && this._adapter.notifyPageChange(a), this._adapter.notifyChange(a, e);
+	}
+	handleKeyDown() {}
+	pageSizeInOpts() {
+		let { pageSizeOpts: e } = this.getProps(), { pageSize: t } = this.getStates(), n = [...e];
+		if (n.indexOf(t) === -1) {
+			let e = n.findIndex((e) => e > t);
+			n.splice(e, 0, t);
+		}
+		return n;
+	}
+	handleQuickJumpNumberChange(e) {
+		this._adapter.updateQuickJumpPage(e);
+	}
+	_handleQuickJump(e) {
+		let t = Number(e), { pageSize: n, total: r } = this.getStates(), i = this._getTotalPageNumber(r, n);
+		Number.isNaN(t) || (t > i && (t = i), t <= 0 && (t = 1), this._adapter.updateQuickJumpPage(""), this.goPage(t));
+	}
+	handleQuickJumpBlur() {
+		let { quickJumpPage: e } = this.getStates();
+		(typeof e == "string" && e || typeof e == "number") && this._handleQuickJump(e);
+	}
+	handleQuickJumpEnterPress(e) {
+		this._handleQuickJump(e);
+	}
+	_getTotalPageNumber(e, t) {
+		return Math.ceil(e / t);
+	}
+}, k = m({
+	name: "PaginationNodeRenderer",
+	props: { content: {
+		type: null,
+		default: void 0
+	} },
+	setup(e) {
+		return () => e.content;
+	}
+}), A = { class: "semi-popover" }, j = { class: "semi-popover-content" }, M = /* @__PURE__ */ m({
+	__name: "PaginationPopover",
+	props: {
+		position: { default: "bottom" },
+		rePosKey: { default: void 0 },
+		zIndex: { default: 1030 }
+	},
+	setup(e) {
+		let t = e, r = c(() => ({
+			position: t.position,
+			...t.rePosKey === void 0 ? {} : { rePosKey: t.rePosKey },
+			zIndex: t.zIndex
+		}));
+		return (e, t) => (y(), l(n, g(r.value, {
+			"auto-adjust-overflow": "",
+			"guard-focus": "",
+			"prefix-cls": "semi-popover",
+			role: "tooltip",
+			"show-arrow": !1,
+			spacing: 4,
+			trigger: "hover"
+		}), {
+			content: E(() => [f("div", A, [f("div", j, [x(e.$slots, "content")])])]),
+			default: E(() => [x(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), N = ["aria-label", "onClick"], P = 32, F = 5, I = /* @__PURE__ */ m({
+	__name: "PaginationRestList",
+	props: {
+		direction: {},
+		pages: {}
+	},
+	emits: ["select"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = S(0), a = c(() => Math.min(n.pages.length, F) * P), o = c(() => Math.max(0, Math.floor(i.value / P) - 1)), l = c(() => Math.min(n.pages.length, o.value + F + 2)), u = c(() => n.pages.slice(o.value, l.value).map((e, t) => ({
+			index: o.value + t,
+			page: e
+		})));
+		function p(e) {
+			i.value = e.currentTarget.scrollTop;
+		}
+		return (e, t) => (y(), d("div", {
+			class: "semi-page-rest-list",
+			style: v({
+				direction: n.direction,
+				height: `${a.value}px`,
+				overflowY: n.pages.length > F ? "auto" : "hidden",
+				width: "78px"
+			}),
+			onScroll: p
+		}, [f("div", { style: v({
+			height: `${n.pages.length * P}px`,
+			maxHeight: `${n.pages.length * P}px`,
+			overflow: "hidden",
+			position: "relative",
+			width: "100%"
+		}) }, [(y(!0), d(s, null, b(u.value, (e) => (y(), d("div", {
+			key: e.page,
+			role: "listitem",
+			"aria-label": String(e.page),
+			class: "semi-page-rest-item",
+			style: v({
+				height: `${P}px`,
+				left: 0,
+				position: "absolute",
+				top: `${e.index * P}px`,
+				width: "100%"
+			}),
+			onClick: (t) => r("select", e.page)
+		}, C(e.page), 13, N))), 128))], 4)], 36));
+	}
+}), le = {
+	key: 0,
+	class: "semi-page-total"
+}, ue = ["aria-disabled"], de = { class: "semi-page-item semi-page-item-small" }, fe = [
+	"aria-label",
+	"aria-current",
+	"onClick"
+], pe = ["aria-disabled"], L = {
+	key: 3,
+	class: "semi-page-switch"
+}, R = /* @__PURE__ */ m({
+	name: "Pagination",
+	inheritAttrs: !1,
+	__name: "Pagination",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		className: {},
+		currentPage: {},
+		defaultCurrentPage: {},
+		disabled: { type: Boolean },
+		hideOnSinglePage: { type: Boolean },
+		hoverShowPageSelect: { type: Boolean },
+		modelValue: {},
+		nextText: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		pageSize: {},
+		pageSizeOpts: {},
+		popoverPosition: {},
+		popoverZIndex: {},
+		preventPageChangeOnPageSizeChange: { type: Boolean },
+		prevText: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		showQuickJumper: { type: Boolean },
+		showSizeChanger: { type: Boolean },
+		showTotal: { type: Boolean },
+		size: {},
+		style: {},
+		total: {}
+	},
+	emits: [
+		"change",
+		"pageChange",
+		"pageSizeChange",
+		"update:currentPage",
+		"update:modelValue",
+		"update:pageSize"
+	],
+	setup(e, { emit: t }) {
+		let n = Object.freeze({
+			pageSize: "每页条数：${pageSize}",
+			total: "总页数：${total}",
+			jumpTo: "跳至",
+			page: "页"
+		}), m = Object.freeze({
+			pageSize: "Items per page: ${pageSize}",
+			total: "Total pages: ${total}",
+			jumpTo: "Jump to",
+			page: " page"
+		}), v = Object.freeze([
+			10,
+			20,
+			40,
+			100
+		]), S = e, D = t, A = ae(), j = oe(), N = ee(), P = te(o, void 0), F = c(() => P ? P.value : {
+			direction: "ltr",
+			locale: { code: "zh-CN" }
+		});
+		function R(e) {
+			let t = N?.vnode.props, n = e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+			return !!(t && (Object.prototype.hasOwnProperty.call(t, e) || Object.prototype.hasOwnProperty.call(t, n)));
+		}
+		let z = c(() => R("modelValue")), me = c(() => R("currentPage")), B = c(() => z.value || me.value), V = c(() => z.value ? S.modelValue : S.currentPage), H = c(() => S.total ?? 1), U = c(() => S.pageSizeOpts ?? [...v]), W = S.pageSize || U.value[0] || 10, he = V.value || S.defaultCurrentPage || 1, G = ie({
+			total: H.value,
+			showTotal: S.showTotal ?? !1,
+			currentPage: he,
+			pageSize: W,
+			pageList: [],
+			prevDisabled: !1,
+			quickJumpPage: "",
+			nextDisabled: !1,
+			restLeftPageList: [],
+			restRightPageList: [],
+			allPageNumbers: S.size === "small" && S.hoverShowPageSelect && !S.disabled ? Array.from({ length: Math.ceil(H.value / W) }, (e, t) => t + 1) : []
+		}), K = /* @__PURE__ */ new Map();
+		function q() {
+			let e = {
+				...S,
+				currentPage: V.value,
+				disabled: S.disabled ?? !1,
+				hoverShowPageSelect: S.hoverShowPageSelect ?? !1,
+				pageSize: S.pageSize || G.pageSize,
+				pageSizeOpts: U.value,
+				preventPageChangeOnPageSizeChange: S.preventPageChangeOnPageSizeChange ?? !1,
+				size: S.size ?? "default",
+				total: H.value
+			};
+			return B.value || delete e.currentPage, e;
+		}
+		let J = h(new O({
+			getContext: () => void 0,
+			getContexts: () => void 0,
+			getProp: (e) => q()[e],
+			getProps: q,
+			getState: (e) => G[e],
+			getStates: () => G,
+			setState: (e, t) => {
+				Object.assign(G, e), t?.();
+			},
+			getCache: (e) => K.get(e),
+			getCaches: () => K,
+			setCache: (e, t) => K.set(e, t),
+			stopPropagation: (e) => e?.stopPropagation?.(),
+			persistEvent: () => void 0,
+			setPageList: (e) => Object.assign(G, e),
+			setDisabled: (e, t) => {
+				G.prevDisabled = e, G.nextDisabled = t;
+			},
+			updateTotal: (e) => {
+				G.total = e;
+			},
+			updatePageSize: (e) => {
+				G.pageSize = e;
+			},
+			updateQuickJumpPage: (e) => {
+				G.quickJumpPage = e;
+			},
+			updateAllPageNumbers: (e) => {
+				G.allPageNumbers = e;
+			},
+			setCurrentPage: (e) => {
+				G.currentPage = e;
+			},
+			registerKeyDownHandler: (e) => {
+				typeof document < "u" && document.addEventListener("keydown", e);
+			},
+			unregisterKeyDownHandler: (e) => {
+				typeof document < "u" && document.removeEventListener("keydown", e);
+			},
+			notifyPageChange: (e) => {
+				D("pageChange", e), D("update:currentPage", e), D("update:modelValue", e);
+			},
+			notifyPageSizeChange: (e) => {
+				D("pageSizeChange", e), D("update:pageSize", e);
+			},
+			notifyChange: (e, t) => D("change", e, t)
+		}));
+		J.init(), ne(() => J.destroy()), T(() => [
+			V.value,
+			H.value,
+			S.pageSize
+		], ([e, t, n]) => {
+			let r = B.value ? e || 1 : G.currentPage;
+			J.updatePage(r, t, n || G.pageSize), J.updateAllPageNumbers(t, n || G.pageSize);
+		}), T(() => [
+			S.size,
+			S.hoverShowPageSelect,
+			S.disabled
+		], () => J.updateAllPageNumbers(G.total, G.pageSize));
+		let Y = c(() => F.value.locale.Pagination ?? (F.value.locale.code === "en-US" ? m : n)), ge = c(() => [
+			"semi-page",
+			S.size === "small" ? "semi-page-small" : void 0,
+			S.disabled ? "semi-page-disabled" : void 0,
+			S.className,
+			A.class
+		]), _e = c(() => Object.fromEntries(Object.entries(A).filter(([e]) => e.startsWith("data-")))), X = c(() => Math.ceil(G.total / G.pageSize)), ve = c(() => X.value < 2 && !!S.hideOnSinglePage && !S.showSizeChanger), ye = c(() => Y.value.total.replace("${total}", String(X.value))), be = c(() => J.pageSizeInOpts()), Z = c(() => F.value.direction === "rtl" ? "bottomRight" : "bottomLeft");
+		function Q(e) {
+			return !!(S.disabled || (e === "prev" ? G.prevDisabled : G.nextDisabled));
+		}
+		function $(e) {
+			S.disabled || J.goPage(e);
+		}
+		function xe(e, t) {
+			return e === "..." ? t < 3 ? G.restLeftPageList : G.restRightPageList : [];
+		}
+		function Se() {
+			return {
+				...S.popoverPosition === void 0 ? {} : { position: S.popoverPosition },
+				...S.currentPage === void 0 ? {} : { rePosKey: S.currentPage },
+				zIndex: S.popoverZIndex ?? 1030
+			};
+		}
+		function Ce(e) {
+			J.handleQuickJumpNumberChange(e);
+		}
+		function we(e) {
+			e.key === "Enter" && J.handleQuickJumpEnterPress(e.target.value);
+		}
+		return (e, t) => ve.value ? u("", !0) : (y(), l(re(S.size === "small" ? "div" : "ul"), g({ key: 0 }, _e.value, {
+			class: ge.value,
+			style: S.style
+		}), {
+			default: E(() => [
+				S.size !== "small" && S.showTotal ? (y(), d("span", le, C(ye.value), 1)) : u("", !0),
+				f("li", {
+					role: "button",
+					"aria-disabled": Q("prev"),
+					"aria-label": "Previous",
+					class: _(["semi-page-item semi-page-prev", { "semi-page-item-disabled": Q("prev") }]),
+					"x-semi-prop": "prevText",
+					onClick: t[0] ||= (e) => !Q("prev") && w(J).goPrev()
+				}, [w(j).prev ? x(e.$slots, "prev", {}, void 0, void 0, 0) : S.prevText ? (y(), l(w(k), {
+					key: 1,
+					content: S.prevText
+				}, null, 8, ["content"])) : (y(), l(w(se), {
+					key: 2,
+					size: "large"
+				}))], 10, ue),
+				S.size === "small" ? (y(), d(s, { key: 1 }, [S.hoverShowPageSelect && !S.disabled ? (y(), l(M, { key: 0 }, {
+					content: E(() => [p(I, {
+						direction: F.value.direction,
+						pages: w(G).allPageNumbers,
+						onSelect: $
+					}, null, 8, ["direction", "pages"])]),
+					default: E(() => [f("div", de, [
+						p(w(k), { content: w(G).currentPage }, null, 8, ["content"]),
+						p(w(k), { content: "/" }),
+						p(w(k), { content: X.value }, null, 8, ["content"]),
+						p(w(k), { content: " " })
+					])]),
+					_: 1
+				})) : (y(), d("div", {
+					key: 1,
+					class: _(["semi-page-item semi-page-item-small", { "semi-page-item-all-disabled": S.disabled }])
+				}, [
+					p(w(k), { content: w(G).currentPage }, null, 8, ["content"]),
+					p(w(k), { content: "/" }),
+					p(w(k), { content: X.value }, null, 8, ["content"]),
+					p(w(k), { content: " " })
+				], 2))], 64)) : (y(!0), d(s, { key: 2 }, b(w(G).pageList, (e, n) => (y(), d(s, { key: `${e}-${n}` }, [e === "..." && !S.disabled ? (y(), l(M, g({
+					key: 0,
+					ref_for: !0
+				}, Se()), {
+					content: E(() => [p(I, {
+						direction: F.value.direction,
+						pages: xe(e, n),
+						onSelect: $
+					}, null, 8, ["direction", "pages"])]),
+					default: E(() => [t[4] ||= f("li", {
+						class: "semi-page-item",
+						"aria-label": "More"
+					}, "...", -1)]),
+					_: 2
+				}, 1040)) : (y(), d("li", {
+					key: 1,
+					class: _(["semi-page-item", {
+						"semi-page-item-active": w(G).currentPage === e,
+						"semi-page-item-all-disabled": S.disabled,
+						"semi-page-item-all-disabled-active": w(G).currentPage === e && S.disabled
+					}]),
+					"aria-label": e === "..." ? "More" : `Page ${e}`,
+					"aria-current": w(G).currentPage === e ? "page" : void 0,
+					onClick: (t) => $(e)
+				}, C(e), 11, fe))], 64))), 128)),
+				f("li", {
+					role: "button",
+					"aria-disabled": Q("next"),
+					"aria-label": "Next",
+					class: _(["semi-page-item semi-page-next", { "semi-page-item-disabled": Q("next") }]),
+					"x-semi-prop": "nextText",
+					onClick: t[1] ||= (e) => !Q("next") && w(J).goNext()
+				}, [w(j).next ? x(e.$slots, "next", {}, void 0, void 0, 0) : S.nextText ? (y(), l(w(k), {
+					key: 1,
+					content: S.nextText
+				}, null, 8, ["content"])) : (y(), l(w(ce), {
+					key: 2,
+					size: "large"
+				}))], 10, pe),
+				S.size !== "small" && S.showSizeChanger ? (y(), d("div", L, [p(i, {
+					"aria-label": "Page size selector",
+					"click-to-hide": "",
+					disabled: S.disabled,
+					"dropdown-class-name": "semi-page-select-dropdown",
+					position: S.popoverPosition ?? Z.value,
+					value: w(G).pageSize,
+					"z-index": S.popoverZIndex ?? 1030,
+					onChange: t[2] ||= (e) => w(J).changePageSize(Number(e))
+				}, {
+					default: E(() => [(y(!0), d(s, null, b(be.value, (e) => (y(), l(a, {
+						key: e,
+						value: e
+					}, {
+						default: E(() => [f("span", null, C(Y.value.pageSize.replace("${pageSize}", String(e))), 1)]),
+						_: 2
+					}, 1032, ["value"]))), 128))]),
+					_: 1
+				}, 8, [
+					"disabled",
+					"position",
+					"value",
+					"z-index"
+				])])) : u("", !0),
+				S.showQuickJumper ? (y(), d("div", {
+					key: 4,
+					class: _(["semi-page-quickjump", { "semi-page-quickjump-disabled": X.value === 1 || S.disabled }])
+				}, [
+					f("span", null, C(Y.value.jumpTo), 1),
+					p(r, {
+						"class-name": "semi-page-quickjump-input-number",
+						disabled: X.value === 1 || S.disabled,
+						"hide-buttons": "",
+						value: w(G).quickJumpPage,
+						onBlur: t[3] ||= (e) => w(J).handleQuickJumpBlur(),
+						onChange: Ce,
+						onKeydown: we
+					}, null, 8, ["disabled", "value"]),
+					f("span", null, C(Y.value.page), 1)
+				], 2)) : u("", !0)
+			]),
+			_: 3
+		}, 16, ["class", "style"]));
+	}
+});
+//#endregion
+export { R as t };