intable 0.0.58 → 0.0.59

package/dist/plugins/EditablePlugin.js

@@ -2,9 +2,8 @@ import { chooseFile, resolveOptions, unFn } from "../utils.js";
 import { mergeProps as mergeProps$2 } from "../mergeProps2.js";
 import { Checkbox, Files } from "./RenderPlugin/components.js";
 import Textarea_default from "../components/Textarea.js";
-import { Ctx } from "../index.js";
 import { addEventListener, createComponent, delegateEvents, effect, insert, memo, spread, template, use } from "solid-js/web";
-import { createEffect, createMemo, createRoot, createSignal, on, onCleanup, useContext } from "solid-js";
+import { createEffect, createMemo, createRoot, createSignal, on, onCleanup } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { createAsyncMemo } from "@solid-primitives/memo";
 import { delay } from "es-toolkit";
@@ -13,109 +12,109 @@ const EditablePlugin = {
 	name: "editable",
 	store: () => ({ editors: { ...editors } }),
 	rewriteProps: {
-		editable: ({ editable: e }, { store: _ }) => (y) => {
-			let b = [y.col.editable, e].filter((e) => e != null);
-			return !!b.length && b.every((e) => unFn(e, y)) && !y.data[_.internal] && !y.col[_.internal];
+		editable: ({ editable: e }, { store: h }) => (_) => {
+			let v = [_.col.editable, e].filter((e) => e != null);
+			return !!v.length && v.every((e) => unFn(e, _)) && !_.data[h.internal] && !_.col[h.internal];
 		},
-		Td: ({ Td: e }, { store: _ }) => (b) => {
-			let x, { props: S } = useContext(Ctx), E = () => unFn(S.editable, b);
-			return createMemo(() => E() ? unFn(() => {
-				let v = "", [C, D] = createSignal(!1), k = () => (([e, _]) => b.x == e && b.y == _)(_.selected.start || []), A = () => E() && !C() && k(), [M, N] = createSignal(!1), P = createAsyncMemo(() => {
+		Td: ({ Td: e }, { store: h }) => (v) => {
+			let y, b = () => unFn(h.props.editable, v);
+			return createMemo(() => b() ? unFn(() => {
+				let g = "", [C, w] = createSignal(!1), E = () => (([e, h]) => v.x == e && v.y == h)(h.selected.start || []), D = () => b() && !C() && E(), [A, j] = createSignal(!1), M = createAsyncMemo(() => {
 					if (C()) {
-						let e = createMemo(() => JSON.stringify(_.selected ?? "{}"));
-						createEffect(on(e, () => D(!1), { defer: !0 })), L.w = x.getBoundingClientRect().width, L.h = x.getBoundingClientRect().height;
-						let y = !1, w = b.data[b.col.id], T = ((e) => typeof e == "string" ? _.editors[e] : e)(b.col.editor ?? b.col.type ?? (b.col.enum ? "select" : "text")), E = {
-							props: b.col.editorProps,
-							col: b.col,
-							eventKey: v,
-							data: b.data,
-							value: w,
+						let e = createMemo(() => JSON.stringify(h.selected ?? "{}"));
+						createEffect(on(e, () => w(!1), { defer: !0 })), F.w = y.getBoundingClientRect().width, F.h = y.getBoundingClientRect().height;
+						let _ = !1, b = v.data[v.col.id], x = ((e) => typeof e == "string" ? h.editors[e] : e)(v.col.editor ?? v.col.type ?? (v.col.enum ? "select" : "text")), S = {
+							props: v.col.editorProps,
+							col: v.col,
+							eventKey: g,
+							data: v.data,
+							value: b,
 							ok: async () => {
-								await F(O.getValue()), D(!1);
+								await N(T.getValue()), w(!1);
 							},
-							cancel: () => (y = !0, D(!1)),
-							onChange: (e) => C() && F(e).catch(() => {})
-						}, O = T(E);
-						return queueMicrotask(() => O.focus?.()), onCleanup(() => {
-							!y && O.getValue() !== w && _.commands.rowChange({
-								...S.data[b.y],
-								[b.col.id]: O.getValue()
-							}), y || F(O.getValue()).catch(() => {}), v = "", O.destroy();
-						}), [E, O];
+							cancel: () => (_ = !0, w(!1)),
+							onChange: (e) => C() && N(e).catch(() => {})
+						}, T = x(S);
+						return queueMicrotask(() => T.focus?.()), onCleanup(() => {
+							!_ && T.getValue() !== b && h.commands.rowChange({
+								...props.data[v.y],
+								[v.col.id]: T.getValue()
+							}), _ || N(T.getValue()).catch(() => {}), g = "", T.destroy();
+						}), [S, T];
 					}
 				});
-				async function F(e) {
+				async function N(e) {
 					try {
-						N(!0), await _.validateCell(e, b.data, b.col);
+						j(!0), await h.validateCell(e, v.data, v.col);
 					} finally {
-						N(!1);
+						j(!1);
 					}
 				}
-				let I, L = createMutable({
+				let P, F = createMutable({
 					w: 0,
 					h: 0
-				}), R = mergeProps$2(b, {
-					ref: (e) => (x = e, b.ref?.(e)),
+				}), I = mergeProps$2(v, {
+					ref: (e) => (y = e, v.ref?.(e)),
 					get class() {
-						return [C() ? "is-editing" : "", b.class].filter(Boolean).join(" ");
+						return [C() ? "is-editing" : "", v.class].filter(Boolean).join(" ");
 					},
 					get style() {
-						return [C() ? `width: ${L.w}px; height: ${L.h}px; padding: 0; ` : "", b.style].filter(Boolean).join(" ");
+						return [C() ? `width: ${F.w}px; height: ${F.h}px; padding: 0; ` : "", v.style].filter(Boolean).join(" ");
 					},
-					onClick: (e) => (I?.focus?.(), b.onClick?.(e)),
-					onDblClick: (e) => (D(E()), b.onDblClick?.(e)),
-					onKeyDown: (e) => (e.key == "Escape" && P()?.[0].cancel(), b.onKeyDown?.(e))
+					onClick: (e) => (P?.focus?.(), v.onClick?.(e)),
+					onDblClick: (e) => (w(b()), v.onDblClick?.(e)),
+					onKeyDown: (e) => (e.key == "Escape" && M()?.[0].cancel(), v.onKeyDown?.(e))
 				});
-				return createComponent(e, mergeProps$2(R, { get children() {
-					return [() => P()?.[1]?.el ? (() => {
+				return createComponent(e, mergeProps$2(I, { get children() {
+					return [() => M()?.[1]?.el ? (() => {
 						var e = _tmpl$();
 						return addEventListener(e, "keydown", (e) => {
-							e.stopPropagation(), e.key == "Enter" && !e.shiftKey && (P()?.[0].ok(), e.preventDefault()), e.key == "Escape" && P()?.[0].cancel();
-						}), addEventListener(e, "pointerdown", (e) => e.stopPropagation()), insert(e, () => P()?.[1]?.el, null), insert(e, (() => {
-							var e = memo(() => !!M());
+							e.stopPropagation(), e.key == "Enter" && !e.shiftKey && (M()?.[0].ok(), e.preventDefault()), e.key == "Escape" && M()?.[0].cancel();
+						}), addEventListener(e, "pointerdown", (e) => e.stopPropagation()), insert(e, () => M()?.[1]?.el, null), insert(e, (() => {
+							var e = memo(() => !!A());
 							return () => e() && _tmpl$2();
 						})(), null), e;
-					})() : b.children, () => A() && (() => {
+					})() : v.children, () => D() && (() => {
 						var e = _tmpl$3();
 						return e.addEventListener("compositionend", () => {
-							D(!0);
+							w(!0);
 						}), e.$$input = (e) => {
-							v = e.target.value, D(!e.isComposing);
+							g = e.target.value, w(!e.isComposing);
 						}, e.$$keydown = (e) => {
 							e.key == " " && e.preventDefault();
 						}, use((e) => {
-							I = e, delay(0).then(() => e.focus({ preventScroll: !0 }));
+							P = e, delay(0).then(() => e.focus({ preventScroll: !0 }));
 						}, e), e;
 					})()];
 				} }));
-			}) : createComponent(e, b));
+			}) : createComponent(e, v));
 		}
 	}
 };
-var createEditor = (e, v, b) => ({ eventKey: x, value: S, col: C, ok: w, cancel: E, props: D, onChange: O }) => createRoot((E) => {
-	let [k, A] = createSignal(x || S), j;
+var createEditor = (e, g, v) => ({ eventKey: y, value: b, col: x, ok: C, cancel: w, props: T, onChange: E }) => createRoot((w) => {
+	let [D, O] = createSignal(y || b), k;
 	return createComponent(e, mergeProps$2({
-		ref: (e) => j = e,
+		ref: (e) => k = e,
 		class: "relative block px-2 size-full z-9 box-border resize-none outline-0",
 		get value() {
-			return k();
+			return D();
 		},
-		onInput: (e) => (A(e instanceof Event ? e.target.value : e), O?.(k())),
-		onChange: (e) => (A(e instanceof Event ? e.target.value : e), O?.(k()), b && w()),
+		onInput: (e) => (O(e instanceof Event ? e.target.value : e), E?.(D())),
+		onChange: (e) => (O(e instanceof Event ? e.target.value : e), E?.(D()), v && C()),
 		get options() {
-			return memo(() => !!C.enum)() ? resolveOptions(C.enum ?? []) : void 0;
+			return memo(() => !!x.enum)() ? resolveOptions(x.enum ?? []) : void 0;
 		}
-	}, v, D)), setTimeout(() => {
-		b && j?.showPicker?.();
+	}, g, T)), setTimeout(() => {
+		v && k?.showPicker?.();
 	}, 0), {
-		el: j,
-		getValue: k,
-		focus: () => j.focus(),
-		destroy: E
+		el: k,
+		getValue: D,
+		focus: () => k.focus(),
+		destroy: w
 	};
 }), Input = (e) => (() => {
-	var _ = _tmpl$4();
-	return spread(_, e, !1, !1), _;
+	var h = _tmpl$4();
+	return spread(h, e, !1, !1), h;
 })();
 const editors = {
 	text: createEditor(Input),
@@ -133,30 +132,30 @@ const editors = {
 	color: createEditor(Input, { type: "color" }),
 	tel: createEditor(Input, { type: "tel" }),
 	password: createEditor(Input, { type: "password" }),
-	file: createEditor((_) => createComponent(Files, mergeProps$2(_, {
+	file: createEditor((h) => createComponent(Files, mergeProps$2(h, {
 		class: "relative z-9 outline-2 outline-blue min-h-a! h-a! p-1 bg-#fff",
-		onAdd: () => chooseFile({ multiple: !0 }).then((e) => _.onChange([..._.value || [], ...e.map((e) => ({
+		onAdd: () => chooseFile({ multiple: !0 }).then((e) => h.onChange([...h.value || [], ...e.map((e) => ({
 			name: e.name,
 			size: e.size
 		}))]))
 	}))),
 	checkbox: createEditor((e) => (() => {
-		var _ = _tmpl$5(), v = e.ref;
-		return typeof v == "function" ? use(v, _) : e.ref = _, insert(_, createComponent(Checkbox, mergeProps$2(e, {
+		var h = _tmpl$5(), g = e.ref;
+		return typeof g == "function" ? use(g, h) : e.ref = h, insert(h, createComponent(Checkbox, mergeProps$2(e, {
 			ref: () => {},
 			onInput: () => {},
 			class: "mx-3!"
-		}))), _;
+		}))), h;
 	})()),
 	select: createEditor((e) => (() => {
-		var _ = _tmpl$6();
-		return spread(_, e, !1, !0), insert(_, (() => {
-			var _ = memo(() => !e.multiple);
-			return () => _() && _tmpl$7();
-		})(), null), insert(_, () => e.options?.map((e) => (() => {
-			var _ = _tmpl$8();
-			return insert(_, () => e.label), effect(() => _.value = e.value), _;
-		})()), null), effect(() => _.value = e.value), _;
+		var h = _tmpl$6();
+		return spread(h, e, !1, !0), insert(h, (() => {
+			var h = memo(() => !e.multiple);
+			return () => h() && _tmpl$7();
+		})(), null), insert(h, () => e.options?.map((e) => (() => {
+			var h = _tmpl$8();
+			return insert(h, () => e.label), effect(() => h.value = e.value), h;
+		})()), null), effect(() => h.value = e.value), h;
 	})(), {}, !0)
 };
 delegateEvents(["keydown", "input"]);

package/dist/plugins/ExpandPlugin.js

@@ -19,7 +19,10 @@ const ExpandPlugin = {
 		})),
 		[e.internal]: 1
 	} }),
-	commands: (e) => ({ expand: useSelector({ multiple: !0 }) }),
+	commands: (e) => ({ expand: useSelector({
+		multiple: !0,
+		key: e.props.rowKey
+	}) }),
 	rewriteProps: {
 		expand: ({ expand: e }) => mergeProps$1({ enable: !1 }, e),
 		columns: ({ columns: e }, { store: m }) => m.props.expand?.enable ? [m.expandCol, ...e] : e,

package/dist/plugins/HeaderGroup.js

@@ -1,6 +1,5 @@
-import { Ctx } from "../index.js";
 import { createComponent, memo, mergeProps } from "solid-js/web";
-import { For, Show, createEffect, createMemo, createSignal, useContext } from "solid-js";
+import { For, Show, createEffect, createMemo, createSignal } from "solid-js";
 function leafCount(e) {
 	return e.children?.length ? e.children.reduce((e, t) => e + leafCount(t), 0) : 1;
 }
@@ -14,12 +13,12 @@ function flatLeaves(e, t = [], n) {
 	return t;
 }
 function buildFlatGrid(e, t, n, r, i, a) {
-	let o = n.length, s = Array.from({ length: t }, () => Array(o).fill(null)), c = 0;
-	function l(e, o) {
+	let o = n.length, s = Array.from({ length: t }, () => Array(o).fill(null)), l = 0;
+	function u(e, o) {
 		for (let d of e) {
-			let e = !!d.children?.length, f = leafCount(d), p = e ? 1 : t - o, m = e ? i[c] : d, h = r.get(m[a.ID]);
+			let e = !!d.children?.length, f = leafCount(d), p = e ? 1 : t - o, m = e ? i[l] : d, h = r.get(m[a.ID]);
 			if (h == null) {
-				e || c++;
+				e || l++;
 				continue;
 			}
 			s[o][h] = {
@@ -40,10 +39,10 @@ function buildFlatGrid(e, t, n, r, i, a) {
 				colspan: 1,
 				rowspan: 1
 			};
-			e ? l(d.children, o + 1) : c++;
+			e ? u(d.children, o + 1) : l++;
 		}
 	}
-	c = 0, l(e, 0);
+	l = 0, u(e, 0);
 	for (let e = 0; e < o; e++) {
 		if (s[0][e] != null) continue;
 		let r = n[e];
@@ -71,76 +70,76 @@ const HeaderGroupPlugin = {
 		if (!r.some((e) => e.children?.length) || maxDepth(r) <= 1) return [];
 		let i = e.props.columns || [], a = flatLeaves(r, [], e), o = /* @__PURE__ */ new Map();
 		for (let t = 0; t < i.length; t++) o.set(i[t][e.ID], t);
-		let s = [], c = 0;
-		function l(r) {
+		let s = [], d = 0;
+		function f(r) {
 			for (let i of r) if (i.children?.length) {
-				let r = leafCount(i), d = a[c];
-				if (d) {
-					let i = o.get(d[e.ID]);
+				let r = leafCount(i), l = a[d];
+				if (l) {
+					let i = o.get(l[e.ID]);
 					if (i != null) {
 						let e = i + r - 1;
 						i <= n && e >= t && s.push(i);
 					}
 				}
-				l(i.children);
-			} else c++;
+				f(i.children);
+			} else d++;
 		}
-		return l(r), s;
+		return f(r), s;
 	} }),
 	rewriteProps: {
 		columns: ({ columns: e }, { store: t }) => flatLeaves(e, [], t),
-		Thead: ({ Thead: u }, { store: m }) => (h) => {
-			let { props: g } = useContext(Ctx), _ = createMemo(() => {
-				let e = m.rawProps.columns || [], t = maxDepth(e);
+		Thead: ({ Thead: c }, { store: f }) => (p) => {
+			let { props: m } = f, h = createMemo(() => {
+				let e = f.rawProps.columns || [], t = maxDepth(e);
 				if (t <= 1) return null;
-				let n = g.columns || [], r = flatLeaves(e, [], m), i = /* @__PURE__ */ new Map();
-				for (let e = 0; e < n.length; e++) i.set(n[e][m.ID], e);
+				let n = m.columns || [], r = flatLeaves(e, [], f), i = /* @__PURE__ */ new Map();
+				for (let e = 0; e < n.length; e++) i.set(n[e][f.ID], e);
 				return {
-					grid: buildFlatGrid(e, t, n, i, r, m),
+					grid: buildFlatGrid(e, t, n, i, r, f),
 					depth: t
 				};
-			}), [v, y] = createSignal(24);
+			}), [g, _] = createSignal(24);
 			createEffect(() => {
-				let e = m.thead;
+				let e = f.thead;
 				if (!e) return;
 				let t = e.querySelectorAll(":scope > tr"), n = t[t.length - 1];
-				n && y(n.offsetHeight || 24);
+				n && _(n.offsetHeight || 24);
 			});
-			let b = () => !!m.virtualizerX;
+			let v = () => !!f.virtualizerX;
 			return createComponent(Show, {
 				get when() {
-					return _();
+					return h();
 				},
 				get fallback() {
-					return createComponent(u, h);
+					return createComponent(c, p);
 				},
-				children: (e) => createComponent(u, mergeProps(h, { get children() {
+				children: (i) => createComponent(c, mergeProps(p, { get children() {
 					return createComponent(For, {
 						get each() {
-							return e().grid;
+							return i().grid;
 						},
-						children: (r, i) => createComponent(g.Tr, {
+						children: (n, r) => createComponent(m.Tr, {
 							get style() {
-								return memo(() => !!b())() ? `height:${v()}px;overflow:visible;position:relative;z-index:${e().depth - i()}` : "";
+								return memo(() => !!v())() ? `height:${g()}px;overflow:visible;position:relative;z-index:${i().depth - r()}` : "";
 							},
 							get children() {
-								return createComponent(g.EachCells, {
+								return createComponent(m.EachCells, {
 									get each() {
-										return g.columns;
+										return m.columns;
 									},
-									children: (e, i) => {
-										let a = () => r[i()];
+									children: (r, i) => {
+										let a = () => n[i()];
 										if (!a()) return null;
 										let o = () => {
 											let e = a();
-											return e.kind === "anchor" ? b() && e.rowspan > 1 && v() ? `height:${e.rowspan * v()}px;position:relative;` : "" : e.kind === "colspan-hidden" ? "display:none" : e.kind === "rowspan-hidden" ? b() ? "visibility:hidden" : "display:none" : "";
+											return e.kind === "anchor" ? v() && e.rowspan > 1 && g() ? `height:${e.rowspan * g()}px;position:relative;` : "" : e.kind === "colspan-hidden" ? "display:none" : e.kind === "rowspan-hidden" ? v() ? "visibility:hidden" : "display:none" : "";
 										}, s = () => a().kind === "anchor";
-										return createComponent(g.Th, {
+										return createComponent(m.Th, {
 											get x() {
 												return i();
 											},
 											get col() {
-												return memo(() => !!s())() ? a().anchorCol : e();
+												return memo(() => !!s())() ? a().anchorCol : r();
 											},
 											get colspan() {
 												return memo(() => !!(s() && a().colspan > 1))() ? a().colspan : void 0;

package/dist/plugins/LoadMorePlugin.d.ts

@@ -12,7 +12,7 @@ declare module '../index' {
             noMoreText?: string;
             onLoadMore?: () => void | Promise<void>;
         };
-        LoadMore?: Component<TableProps['loadMore']>;
+        LoadMore?: Component<Exclude<TableProps['loadMore'], undefined>>;
     }
     interface TableStore {
         loadMore: {

package/dist/plugins/LoadMorePlugin.js

@@ -7,18 +7,6 @@ var _tmpl$ = /* @__PURE__ */ template("<div class=\"data-table__load-more sticky
 function isPromiseLike(e) {
 	return !!e && typeof e.then == "function";
 }
-var LoadMoreLayer = (s) => {
-	let c = () => !!s.enable && (s.loading || s.hasMore === !1), l = () => s.loading ? s.loadingText ?? "loading..." : s.noMoreText ?? "无更多数据";
-	return createComponent(Show, {
-		get when() {
-			return c();
-		},
-		get children() {
-			var e = _tmpl$();
-			return insert(e, l), e;
-		}
-	});
-};
 const LoadMorePlugin = {
 	name: "loadMore",
 	store: () => ({ loadMore: {
@@ -26,36 +14,47 @@ const LoadMorePlugin = {
 		lastTriggerAt: 0
 	} }),
 	rewriteProps: {
-		loadMore: ({ loadMore: e }, { store: o }) => ({
+		loadMore: ({ loadMore: e }, { store: a }) => ({
 			enable: !1,
 			threshold: 100,
 			debounce: 200,
 			...e
 		}),
-		LoadMore: ({ LoadMore: o = LoadMoreLayer }, { store: s }) => () => createComponent(o, mergeProps(() => s.props.loadMore)),
-		Footer: ({ Footer: o }, { store: l }) => (u) => createComponent(o, mergeProps(() => combineProps({ class: "contents" }, u), { get children() {
-			return [memo(() => u.children), createComponent(l.props.LoadMore, {})];
+		LoadMore: ({ LoadMore: o }, { store: s }) => o ?? ((o) => {
+			let s = () => !!o.enable && (o.loading || o.hasMore === !1), c = () => o.loading ? o.loadingText ?? "loading..." : o.noMoreText ?? "无更多数据";
+			return createComponent(Show, {
+				get when() {
+					return s();
+				},
+				get children() {
+					var e = _tmpl$();
+					return insert(e, c), e;
+				}
+			});
+		}),
+		ScrollFooter: ({ ScrollFooter: a }, { store: c }) => (l) => createComponent(a, mergeProps(() => combineProps({ class: "contents" }, l), { get children() {
+			return [memo(() => l.children), createComponent(c.props.LoadMore, mergeProps(() => c.props.loadMore))];
 		} }))
 	},
 	onMount: (e) => {
-		let o = () => {
-			let s = e.props.loadMore;
-			if (!s.enable || !s.onLoadMore || s.hasMore === !1 || s.loading || e.loadMore.pending) return;
-			let c = e.scroll_el;
-			if (!c) return;
-			let l = c.scrollHeight - c.scrollTop - c.clientHeight, u = s.threshold;
-			if (l > u) return;
-			let d = Date.now(), f = s.debounce;
-			if (d - e.loadMore.lastTriggerAt < f) return;
-			e.loadMore.lastTriggerAt = d;
-			let p = s.onLoadMore();
-			isPromiseLike(p) && (e.loadMore.pending = !0, p.finally(() => {
-				e.loadMore.pending = !1, delay(0).then(o);
+		let a = () => {
+			let o = e.props.loadMore;
+			if (!o.enable || !o.onLoadMore || o.hasMore === !1 || o.loading || e.loadMore.pending) return;
+			let s = e.scroll_el;
+			if (!s) return;
+			let c = s.scrollHeight - s.scrollTop - s.clientHeight, l = o.threshold;
+			if (c > l) return;
+			let u = Date.now(), d = o.debounce;
+			if (u - e.loadMore.lastTriggerAt < d) return;
+			e.loadMore.lastTriggerAt = u;
+			let f = o.onLoadMore();
+			isPromiseLike(f) && (e.loadMore.pending = !0, f.finally(() => {
+				e.loadMore.pending = !1, delay(0).then(a);
 			}));
 		};
 		createEffect(() => {
-			let s = e.scroll_el, c = e.props.loadMore;
-			!s || !c.enable || (createEventListener(() => e.scroll_el, "scroll", o, { passive: !0 }), queueMicrotask(o));
+			let o = e.scroll_el, s = e.props.loadMore;
+			!o || !s.enable || (createEventListener(() => e.scroll_el, "scroll", a, { passive: !0 }), queueMicrotask(a));
 		});
 	}
 };

package/dist/plugins/PaginationPlugin.d.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from '..';
+declare module '..' {
+    interface TableProps {
+        pagination?: {
+            enable?: boolean;
+            pageSize?: number;
+            defaultValue?: number;
+            value?: number;
+            onChange?: (page: number) => void;
+            /** Server-side pagination: called on page change with (page, pageSize).
+             *  Parent should update `data` and `total` in response. */
+            request?: (page: number, pageSize: number) => void | Promise<void>;
+            /** Total record count (required for server-side pagination) */
+            total?: number;
+        };
+    }
+    interface TableStore {
+        _pgnTotal: number;
+        _pgnLoading: boolean;
+    }
+}
+export declare const PaginationPlugin: Plugin;

package/dist/plugins/PaginationPlugin.js

@@ -0,0 +1,105 @@
+import { useControlled } from "../hooks/useControlled.js";
+import { Ctx } from "../index.js";
+import { className, createComponent, delegateEvents, effect, insert, memo, mergeProps, template } from "solid-js/web";
+import { For, Show, createMemo, mergeProps as mergeProps$1, runWithOwner, untrack, useContext } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ template("<div class=\"data-table__pagination flex items-center justify-end gap-1 py-2 text-sm\"><span class=mr-2>共 <!> 条</span><button class=\"data-table__pagination-btn disabled:op-30\">‹</button><button class=\"data-table__pagination-btn disabled:op-30\">›"), _tmpl$2 = /* @__PURE__ */ template("<span class=\"px-1 select-none\">…"), _tmpl$3 = /* @__PURE__ */ template("<button>");
+const PaginationPlugin = {
+	name: "pagination",
+	store: (e) => ({
+		_pgnTotal: 0,
+		_pgnLoading: !1
+	}),
+	rewriteProps: {
+		loading: ({ loading: e }, { store: l }) => l._pgnLoading || e,
+		pagination: ({ pagination: l }, { store: u }) => {
+			l = mergeProps$1({
+				enable: !1,
+				pageSize: 20,
+				defaultValue: 1
+			}, l);
+			let d = untrack(() => u._pgn ??= runWithOwner(u.owner, () => useControlled(l)));
+			return u._pgn.$setOpt(l), d;
+		},
+		data: ({ data: e }, { store: l }) => {
+			if (!e) return e;
+			let u = l.props.pagination;
+			return u?.enable ? typeof u.request == "function" ? (l._pgnTotal = u.total ?? e.length, e) : (l._pgnTotal = e.length, e) : e;
+		},
+		EachRows: ({ EachRows: e }, { store: l }) => l.props.pagination?.enable ? (u) => {
+			let f = mergeProps$1(() => l.props.pagination);
+			if (!f?.enable || typeof f.request == "function") return createComponent(e, u);
+			let p = () => (f.value - 1) * f.pageSize, m = () => u.each.slice(p(), p() + f.pageSize);
+			return createComponent(e, {
+				get each() {
+					return m();
+				},
+				children: (e, l) => u.children(e, () => p() + l())
+			});
+		} : e,
+		Footer: ({ Footer: e }, { store: l }) => (u) => createComponent(e, mergeProps(u, { get children() {
+			return [memo(() => u.children), createComponent(Show, {
+				get when() {
+					return l.props.pagination?.enable;
+				},
+				get children() {
+					return createComponent(PaginationFooter, {});
+				}
+			})];
+		} }))
+	}
+};
+function PaginationFooter() {
+	let { store: e } = useContext(Ctx), f = mergeProps$1(() => e.props.pagination), h = () => f.value, g = () => f.pageSize, _ = () => Math.ceil(e._pgnTotal / g()), v = createMemo(() => pageNumbers(h(), _())), x = (l) => {
+		if (l < 1 || l > _()) return;
+		let u = e.props.pagination?.request;
+		if (u) {
+			if (e._pgnLoading) return;
+			e._pgnLoading = !0;
+			let d = u(l, g());
+			d && typeof d.then == "function" ? d.finally(() => {
+				e._pgnLoading = !1;
+			}) : e._pgnLoading = !1;
+		}
+		e.props.pagination?.onChange?.(l);
+	};
+	return (() => {
+		var l = _tmpl$(), f = l.firstChild, g = f.firstChild, y = g.nextSibling;
+		y.nextSibling;
+		var b = f.nextSibling, S = b.nextSibling;
+		return insert(f, () => e._pgnTotal, y), b.$$click = () => x(h() - 1), insert(l, createComponent(For, {
+			get each() {
+				return v();
+			},
+			children: (l) => {
+				let d = () => l === h();
+				return l === "..." ? _tmpl$2() : (() => {
+					var f = _tmpl$3();
+					return f.$$click = () => x(l), insert(f, l), effect((l) => {
+						var p = `data-table__pagination-btn ${d() ? "is-active" : ""}`, m = e.props.loading;
+						return p !== l.e && className(f, l.e = p), m !== l.t && (f.disabled = l.t = m), l;
+					}, {
+						e: void 0,
+						t: void 0
+					}), f;
+				})();
+			}
+		}), S), S.$$click = () => x(h() + 1), effect((l) => {
+			var u = h() <= 1 || e.props.loading, d = h() >= _() || e.props.loading;
+			return u !== l.e && (b.disabled = l.e = u), d !== l.t && (S.disabled = l.t = d), l;
+		}, {
+			e: void 0,
+			t: void 0
+		}), l;
+	})();
+}
+function pageNumbers(e, l) {
+	if (l <= 1) return [];
+	if (l <= 7) return Array.from({ length: l }, (e, l) => l + 1);
+	let u = [1];
+	e > 4 && u.push("...");
+	let d = Math.max(2, e - 1), f = Math.min(l - 1, e + 1);
+	for (let e = d; e <= f; e++) u.push(e);
+	return e < l - 3 && u.push("..."), u.push(l), u;
+}
+delegateEvents(["click"]);
+export { PaginationPlugin };