intable 0.0.28 → 0.0.30

package/dist/plugins/AutoFillPlugin.js

@@ -0,0 +1,132 @@
+import { usePointerDrag } from "../hooks/index.js";
+import { delegateEvents, effect, style, template, use } from "solid-js/web";
+import { createMemo, createSignal } from "solid-js";
+import { createScrollPosition } from "@solid-primitives/scroll";
+var _tmpl$ = /* @__PURE__ */ template("<div>"), _tmpl$2 = /* @__PURE__ */ template("<div title=\"Drag to fill\">");
+function inferFill(e, t, n = 1) {
+	if (!e.length) return Array(t).fill(null);
+	let r = e.map((e) => typeof e == "number" ? e : Number(e));
+	if (r.every(isFinite)) {
+		let i = e.length > 1 ? r.at(-1) - r.at(-2) : 1, a = n === 1 ? r.at(-1) : r[0];
+		return Array.from({ length: t }, (e, r) => +(n === 1 ? a + i * (r + 1) : a - i * (t - r)).toFixed(10));
+	}
+	if (e.every((e) => typeof e == "string" && /^\d{4}-\d{2}-\d{2}/.test(e))) {
+		let r = e.map((e) => new Date(e).getTime());
+		if (r.every(isFinite)) {
+			let e = r.length > 1 ? r.at(-1) - r.at(-2) : 864e5, i = n === 1 ? r.at(-1) : r[0];
+			return Array.from({ length: t }, (r, a) => new Date(n === 1 ? i + e * (a + 1) : i - e * (t - a)).toISOString().slice(0, 10));
+		}
+	}
+	return Array.from({ length: t }, (t, n) => e[n % e.length]);
+}
+function applyFill(e, t, n, r, i) {
+	let { internal: a } = i, { data: o, columns: s } = i.props, c = r > 0 ? 1 : -1, l = Math.abs(r), u = /* @__PURE__ */ new Map(), f = (e) => (u.has(e) || u.set(e, { ...o[e] }), u.get(e)), p, m;
+	if (n === "v") {
+		let n = o.slice(t[0], t[1] + 1);
+		for (let r = e[0]; r <= e[1] && r < s.length; r++) {
+			let e = s[r];
+			if (!e || e[a]) continue;
+			let i = inferFill(n.map((t) => t[e.id]), l, c);
+			for (let n = 0; n < l; n++) {
+				let r = c === 1 ? t[1] + 1 + n : t[0] - l + n;
+				r >= 0 && r < o.length && (f(r)[e.id] = i[n]);
+			}
+		}
+		p = [e[0], c === 1 ? t[0] : Math.max(t[0] - l, 0)], m = [e[1], c === 1 ? Math.min(t[1] + l, o.length - 1) : t[1]];
+	} else {
+		for (let n = t[0]; n <= t[1] && n < o.length; n++) {
+			let t = s.slice(e[0], e[1] + 1).filter((e) => e && !e[a]).map((e) => o[n][e.id]), r = inferFill(t, l, c);
+			for (let t = 0; t < l; t++) {
+				let i = c === 1 ? e[1] + 1 + t : e[0] - l + t;
+				if (i < 0 || i >= s.length) continue;
+				let o = s[i];
+				o && !o[a] && (f(n)[o.id] = r[t]);
+			}
+		}
+		p = [c === 1 ? e[0] : Math.max(e[0] - l, 0), t[0]], m = [c === 1 ? Math.min(e[1] + l, s.length - 1) : e[1], t[1]];
+	}
+	return {
+		rowsMap: u,
+		newStart: p,
+		newEnd: m
+	};
+}
+const AutoFillPlugin = {
+	name: "auto-fill",
+	layers: [(t) => {
+		let i = createScrollPosition(() => t.scroll_el), d = createMemo(() => {
+			let { start: e, end: n } = t.selected ?? {};
+			if (!e?.length || !n?.length) return null;
+			let r = [e[0], n[0]].sort((e, t) => e - t), i = [e[1], n[1]].sort((e, t) => e - t);
+			return Number.isFinite(r[1]) && Number.isFinite(i[1]) ? {
+				xs: r,
+				ys: i
+			} : null;
+		}), p = createMemo(() => {
+			let e = t.thSizes ?? [], n = t.trSizes ?? [], r = e[0]?.height ?? 30, a = i.x, o = i.y, s = (t) => e.slice(0, t).reduce((e, t) => e + (t?.width ?? 0), 0) - a, c = (t) => s(t) + (e[t]?.width ?? 0), l = (e) => r + n.slice(0, e).reduce((e, t) => e + (t?.height ?? 28), 0) - o;
+			return {
+				colX: s,
+				colR: c,
+				rowY: l,
+				rowB: (e) => l(e) + (n[e]?.height ?? 28)
+			};
+		}), m = createMemo(() => {
+			let e = t.props.autoFill;
+			return e === !0 || e?.enable === !0;
+		}), h = createMemo(() => {
+			if (!m()) return "display:none;position:absolute";
+			let e = d();
+			if (!e) return "display:none;position:absolute";
+			let { colR: t, rowB: n } = p(), r = t(e.xs[1]), i = n(e.ys[1]);
+			return `position:absolute;left:${r - 4}px;top:${i - 4}px;width:8px;height:8px;background:var(--c-primary);border:2px solid var(--table-bg);border-radius:1px;box-shadow:0 0 0 1px var(--c-primary);z-index:3;cursor:crosshair`;
+		}), [g, _] = createSignal(null), v = createMemo(() => {
+			let e = g(), n = d();
+			if (!e || !n || !e.delta) return "display:none;position:absolute";
+			let { xs: r, ys: i } = n, { colX: a, colR: o, rowY: s, rowB: c } = p(), l = e.delta > 0 ? 1 : -1, u = Math.abs(e.delta), f = t.props.data.length, m = t.props.columns.length, h, _, v, y;
+			e.axis === "v" ? (h = a(r[0]), v = o(r[1]), [_, y] = l > 0 ? [c(i[1]), c(Math.min(i[1] + u, f - 1))] : [s(Math.max(i[0] - u, 0)), s(i[0])]) : (_ = s(i[0]), y = c(i[1]), [h, v] = l > 0 ? [o(r[1]), o(Math.min(r[1] + u, m - 1))] : [a(Math.max(r[0] - u, 0)), a(r[0])]);
+			let b = v - h, x = y - _;
+			return b <= 0 || x <= 0 ? "display:none;position:absolute" : `position:absolute;left:${h}px;top:${_}px;width:${b}px;height:${x}px;border:1.5px dashed var(--c-primary);background:rgba(99,102,241,0.08);pointer-events:none;z-index:3`;
+		}), y, b = (e, n, r, i) => {
+			let { rowsMap: a, newStart: o, newEnd: s } = applyFill(e, n, r, i, t);
+			a.size && (t.commands.rowsChange([...a.values()]), t.selected.start = o, t.selected.end = s);
+		}, x = (e) => {
+			e.stopPropagation();
+			let n = d();
+			if (!n) return;
+			let { xs: r, ys: i } = n, { data: a, columns: o } = t.props, s = r[0] > 0 ? r[0] - 1 : r[1] < o.length - 1 ? r[1] + 1 : -1, c = a.length - 1;
+			if (s >= 0) {
+				let e = o[s];
+				if (e && !e[t.internal]) for (let t = i[1] + 1; t < a.length; t++) {
+					let n = a[t][e.id];
+					if (n != null && n !== "") c = t;
+					else break;
+				}
+			}
+			b(r, i, "v", c - i[1]);
+		};
+		return usePointerDrag(() => y, { start(e, n, r) {
+			e.stopPropagation(), e.preventDefault();
+			let i = d();
+			if (!i) return;
+			let { xs: a, ys: o } = i, s = 0, c = "v";
+			n((e, { ox: n, oy: r }) => {
+				Math.abs(r) >= Math.abs(n) ? (c = "v", s = Math.round(r / (t.trSizes?.[o[1]]?.height ?? 28))) : (c = "h", s = Math.round(n / (t.thSizes?.[a[1]]?.width ?? 100))), _(s ? {
+					axis: c,
+					delta: s
+				} : null);
+			}), r(() => {
+				_(null), b(a, o, c, s);
+			});
+		} }), [(() => {
+			var e = _tmpl$();
+			return effect((t) => style(e, v(), t)), e;
+		})(), (() => {
+			var e = _tmpl$2();
+			e.$$dblclick = x;
+			var t = y;
+			return typeof t == "function" ? use(t, e) : y = e, effect((t) => style(e, h() + ";pointer-events:auto", t)), e;
+		})()];
+	}]
+};
+delegateEvents(["dblclick"]);
+export { AutoFillPlugin };

package/dist/plugins/ColumnVisibilityPlugin.d.ts

@@ -0,0 +1,16 @@
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+        columnVisibility?: {
+            /** Column IDs (string or number) to hide on initial render. */
+            defaultHidden?: (string | number)[];
+            /** Called whenever the hidden column list changes. */
+            onChange?: (hiddenIds: string[]) => void;
+        };
+    }
+    interface TableStore {
+        /** O(1) set of currently hidden column IDs (as strings). Mutate directly. */
+        hiddenCols: Record<string, true | undefined>;
+    }
+}
+export declare const ColumnVisibilityPlugin: Plugin;

package/dist/plugins/ColumnVisibilityPlugin.js

@@ -0,0 +1,60 @@
+import { Popover } from "../components/Popover.js";
+import { createComponent, delegateEvents, effect, insert, template } from "solid-js/web";
+import { For, Show } from "solid-js";
+import { offset } from "@floating-ui/dom";
+var _tmpl$ = /* @__PURE__ */ template("<div style=position:absolute;top:4px;right:4px;z-index:100;pointer-events:auto>"), _tmpl$2 = /* @__PURE__ */ template("<button class=\"flex items-center justify-center w-6.5 h-6.5 rd-1 shadow-sm b-(1 solid var(--table-b-c)) cursor-pointer bg-[--table-header-bg]\"title=\"Column Visibility\"><svg viewBox=\"0 0 24 24\"fill=none stroke=currentColor stroke-width=2 class=\"w-3.5 h-3.5\"><path stroke-linecap=round stroke-linejoin=round d=\"M4 6h16M4 12h16M4 18h7\">"), _tmpl$3 = /* @__PURE__ */ template("<div class=\"rd-1.5 shadow-xl py-1 min-w-44 bg-[--table-header-bg]\"style=\"border:1px solid var(--table-b-c);z-index:101\"><div class=\"flex items-center justify-between px-3 py-1.5\"style=\"border-bottom:1px solid var(--table-b-c)\"><span class=\"text-xs font-semibold uppercase tracking-wide\"style=color:var(--table-c)>Columns</span><button class=\"text-xs cursor-pointer hover:underline c-[--c-primary]\"></button></div><div class=\"max-h-60 of-y-auto\">"), _tmpl$4 = /* @__PURE__ */ template("<span class=text-xs style=opacity:0.6>hidden"), _tmpl$5 = /* @__PURE__ */ template("<label class=\"flex items-center gap-2 px-3 py-1.5 text-sm cursor-pointer select-none hover:bg-[--li-hover-bg]\"><input type=checkbox class=\"w-3.5 h-3.5 cursor-pointer\"><span class=\"truncate flex-1\">");
+const ColumnVisibilityPlugin = {
+	name: "column-visibility",
+	store: (e) => {
+		let s = {};
+		return (e.rawProps.columnVisibility?.defaultHidden ?? []).forEach((e) => {
+			s[String(e)] = !0;
+		}), { hiddenCols: s };
+	},
+	rewriteProps: { columns: ({ columns: e }, { store: s }) => (e ?? []).filter((e) => !s.hiddenCols[String(e.id)]) },
+	layers: [(c) => {
+		let l = () => (c.rawProps.columns ?? []).filter((e) => !e[c.internal]), m = (e) => !!c.hiddenCols[e], h = () => c.rawProps.columnVisibility?.onChange?.(Object.keys(c.hiddenCols).filter((e) => !!c.hiddenCols[e])), g = (e) => {
+			m(e) ? delete c.hiddenCols[e] : c.hiddenCols[e] = !0, h();
+		}, _ = () => l().every((e) => m(String(e.id))), v = () => {
+			_() ? l().forEach((e) => delete c.hiddenCols[String(e.id)]) : l().forEach((e) => {
+				c.hiddenCols[String(e.id)] = !0;
+			}), h();
+		};
+		return (() => {
+			var c = _tmpl$();
+			return insert(c, createComponent(Popover, {
+				trigger: "click",
+				placement: "bottom-end",
+				get middleware() {
+					return [offset({ mainAxis: 4 })];
+				},
+				get reference() {
+					return _tmpl$2();
+				},
+				get floating() {
+					return (() => {
+						var e = _tmpl$3(), c = e.firstChild, d = c.firstChild, f = d.nextSibling, p = c.nextSibling;
+						return f.$$click = v, insert(f, () => _() ? "Show all" : "Hide all"), insert(p, createComponent(For, {
+							get each() {
+								return l();
+							},
+							children: (e) => (() => {
+								var c = _tmpl$5(), l = c.firstChild, u = l.nextSibling;
+								return l.addEventListener("change", () => g(e.id)), insert(u, () => e.name ?? e.id), insert(c, createComponent(Show, {
+									get when() {
+										return m(e.id);
+									},
+									get children() {
+										return _tmpl$4();
+									}
+								}), null), effect(() => l.checked = !m(e.id)), c;
+							})()
+						})), e;
+					})();
+				}
+			})), c;
+		})();
+	}]
+};
+delegateEvents(["click"]);
+export { ColumnVisibilityPlugin };

package/dist/plugins/EditablePlugin.js

@@ -12,36 +12,36 @@ 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: v }) => (b) => {
+			let x = [b.col.editable, e].filter((e) => e != null);
+			return !!x.length && x.every((e) => unFn(e, b)) && !b.data[v.internal] && !b.col[v.internal];
 		},
-		Td: ({ Td: e }, { store: _ }) => (y) => {
-			let b, { props: C } = useContext(Ctx), [w, E] = createSignal(!1), D = "", j = () => unFn(C.editable, y), M = () => (([e, _]) => y.x == e && y.y == _)(_.selected.start || []), N = () => M() && j() && !w(), [P, F] = createSignal(!1), I = createAsyncMemo(() => {
-				if (w()) {
-					let e = !1, v = y.data[y.col.id], b = ((e) => typeof e == "string" ? _.editors[e] : e)(y.col.editor ?? y.col.type ?? "text"), x = {
-						props: y.col.editorProps,
-						col: y.col,
-						eventKey: D,
-						data: y.data,
-						value: v,
+		Td: ({ Td: e }, { store: v }) => (b) => {
+			let x, { props: w } = useContext(Ctx), [T, D] = createSignal(!1), O = "", j = () => unFn(w.editable, b), M = () => (([e, v]) => b.x == e && b.y == v)(v.selected.start || []), N = () => M() && j() && !T(), [P, F] = createSignal(!1), I = createAsyncMemo(() => {
+				if (T()) {
+					let e = !1, y = b.data[b.col.id], x = ((e) => typeof e == "string" ? v.editors[e] : e)(b.col.editor ?? b.col.type ?? "text"), S = {
+						props: b.col.editorProps,
+						col: b.col,
+						eventKey: O,
+						data: b.data,
+						value: y,
 						ok: async () => {
-							await L(S.getValue()), E(!1);
+							await L(C.getValue()), D(!1);
 						},
-						cancel: () => (e = !0, E(!1)),
-						onChange: (e) => w() && L(e).catch(() => {})
-					}, S = b(x);
+						cancel: () => (e = !0, D(!1)),
+						onChange: (e) => T() && L(e).catch(() => {})
+					}, C = x(S);
 					return onCleanup(() => {
-						!e && S.getValue() !== v && _.commands.rowChange({
-							...C.data[y.y],
-							[y.col.id]: S.getValue()
-						}), e || L(S.getValue()).catch(() => {}), D = "", S.destroy();
-					}), [x, S];
+						!e && C.getValue() !== y && v.commands.rowChange({
+							...w.data[b.y],
+							[b.col.id]: C.getValue()
+						}), e || L(C.getValue()).catch(() => {}), O = "", C.destroy();
+					}), [S, C];
 				}
 			});
 			async function L(e) {
 				try {
-					F(!0), await _.validateCell(e, y.data, y.col);
+					F(!0), await v.validateCell(e, b.data, b.col);
 				} finally {
 					F(!1);
 				}
@@ -49,39 +49,41 @@ const EditablePlugin = {
 			createEffect(() => {
 				I()?.[1]?.focus?.();
 			}), createEffect(() => {
-				if (w()) {
-					let e = createMemo(() => JSON.stringify(_.selected ?? "{}"));
-					createEffect(on(e, () => E(!1), { defer: !0 }));
+				if (T()) {
+					let e = createMemo(() => JSON.stringify(v.selected ?? "{}"));
+					createEffect(on(e, () => D(!1), { defer: !0 }));
 				}
 			});
 			let R, z = createMutable({
 				w: 0,
 				h: 0
 			});
-			return createComputed(() => w() && (z.w = b.getBoundingClientRect().width, z.h = b.getBoundingClientRect().height)), y = combineProps(y, {
-				ref: (e) => b = e,
+			return createComputed(() => T() && (z.w = x.getBoundingClientRect().width, z.h = x.getBoundingClientRect().height)), b = combineProps(b, {
+				ref: (e) => x = e,
 				get class() {
-					return w() ? "is-editing" : "";
+					return T() ? "is-editing" : "";
 				},
 				get style() {
-					return w() ? `width: ${z.w}px; height: ${z.h}px; padding: 0; ` : "";
+					return T() ? `width: ${z.w}px; height: ${z.h}px; padding: 0; ` : "";
 				},
 				onClick: () => R?.focus?.(),
-				onDblClick: () => E(j()),
+				onDblClick: () => D(j()),
 				onKeyDown: (e) => e.key == "Escape" && I()?.[0].cancel()
-			}), createComponent(e, mergeProps(y, { get children() {
+			}), createComponent(e, mergeProps(b, { get children() {
 				return [memo(() => memo(() => !!I()?.[1]?.el)() ? (() => {
 					var e = _tmpl$();
-					return addEventListener(e, "keydown", (e) => e.stopPropagation()), insert(e, () => I()?.[1]?.el, null), insert(e, (() => {
+					return addEventListener(e, "keydown", (e) => {
+						e.stopPropagation(), e.key == "Enter" && !e.shiftKey && I()?.[0].ok(), e.key == "Escape" && I()?.[0].cancel();
+					}), addEventListener(e, "pointerdown", (e) => e.stopPropagation()), insert(e, () => I()?.[1]?.el, null), insert(e, (() => {
 						var e = memo(() => !!P());
 						return () => e() && _tmpl$2();
 					})(), null), e;
-				})() : y.children), memo(() => memo(() => !!N())() && (() => {
+				})() : b.children), memo(() => memo(() => !!N())() && (() => {
 					var e = _tmpl$3();
 					return e.addEventListener("compositionend", () => {
-						E(!0);
+						D(!0);
 					}), e.$$input = (e) => {
-						D = e.target.value, E(!e.isComposing);
+						O = e.target.value, D(!e.isComposing);
 					}, e.$$keydown = (e) => {
 						e.key == " " && e.preventDefault();
 					}, use((e) => {
@@ -92,38 +94,34 @@ const EditablePlugin = {
 		}
 	}
 };
-var createEditor = (e, v, y) => ({ eventKey: b, value: x, col: S, ok: C, cancel: w, props: T, onChange: E }) => createRoot((D) => {
-	let [O, k] = createSignal(b || x), A;
+var createEditor = (e, y, b) => ({ eventKey: x, value: S, col: C, ok: w, cancel: T, props: E, onChange: D }) => createRoot((T) => {
+	let [O, k] = createSignal(x || S), A;
 	return createComponent(e, mergeProps({
 		ref: (e) => A = e,
 		class: "relative block px-2 size-full z-9 box-border resize-none outline-0",
 		get value() {
 			return O();
 		},
-		onInput: (e) => (k(e instanceof Event ? e.target.value : e), E?.(O())),
-		onChange: (e) => (k(e instanceof Event ? e.target.value : e), E?.(O()), y && C()),
-		"on:pointerdown": (e) => e.stopPropagation(),
-		"on:keydown": (e) => {
-			e.stopPropagation(), e.key == "Enter" && !e.shiftKey && C(), e.key == "Escape" && w();
-		},
+		onInput: (e) => (k(e instanceof Event ? e.target.value : e), D?.(O())),
+		onChange: (e) => (k(e instanceof Event ? e.target.value : e), D?.(O()), b && w()),
 		get options() {
-			return memo(() => !!S.enum)() ? resolveOptions(S.enum ?? []) : void 0;
+			return memo(() => !!C.enum)() ? resolveOptions(C.enum ?? []) : void 0;
 		}
-	}, v, T)), {
+	}, y, E)), {
 		el: A,
 		getValue: O,
 		focus: () => A.focus(),
-		destroy: D
+		destroy: T
 	};
 }), Input = (e) => (() => {
-	var _ = _tmpl$4();
-	return spread(_, e, !1, !1), _;
+	var v = _tmpl$4();
+	return spread(v, e, !1, !1), v;
 })();
 const editors = {
 	text: createEditor(Input),
 	textarea: createEditor((e) => (() => {
-		var _ = _tmpl$5();
-		return spread(_, e, !1, !1), _;
+		var v = _tmpl$5();
+		return spread(v, e, !1, !1), v;
 	})()),
 	number: createEditor(Input, { type: "number" }),
 	range: createEditor(Input, { type: "range" }),
@@ -133,27 +131,27 @@ const editors = {
 	color: createEditor(Input, { type: "color" }),
 	tel: createEditor(Input, { type: "tel" }),
 	password: createEditor(Input, { type: "password" }),
-	file: createEditor((_) => createComponent(Files, mergeProps(_, {
+	file: createEditor((v) => createComponent(Files, mergeProps(v, {
 		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) => v.onChange([...v.value || [], ...e.map((e) => ({
 			name: e.name,
 			size: e.size
 		}))]))
 	}))),
 	checkbox: createEditor((e) => (() => {
-		var _ = _tmpl$6(), v = e.ref;
-		return typeof v == "function" ? use(v, _) : e.ref = _, insert(_, createComponent(Checkbox, mergeProps(e, {
+		var v = _tmpl$6(), y = e.ref;
+		return typeof y == "function" ? use(y, v) : e.ref = v, insert(v, createComponent(Checkbox, mergeProps(e, {
 			ref: () => {},
 			onInput: () => {},
 			class: "mx-3!"
-		}))), _;
+		}))), v;
 	})()),
 	select: createEditor((e) => (() => {
-		var _ = _tmpl$7();
-		return spread(_, e, !1, !0), insert(_, () => e.options?.map((e) => (() => {
-			var _ = _tmpl$8();
-			return insert(_, () => e.label), effect(() => _.value = e.value), _;
-		})())), _;
+		var v = _tmpl$7();
+		return spread(v, e, !1, !0), insert(v, () => e.options?.map((e) => (() => {
+			var v = _tmpl$8();
+			return insert(v, () => e.label), effect(() => v.value = e.value), v;
+		})())), v;
 	})(), {}, !0)
 };
 delegateEvents(["keydown", "input"]);

package/dist/plugins/ImportExportPlugin.js

@@ -27,7 +27,7 @@ const ImportExportPlugin = {
 		},
 		readExcel: async (n) => {
 			n ??= await chooseFile({ accept: ".xlsx,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" });
-			let i = await readFileAsArrayBuffer(n), a = await import("xlsx"), o = a.read(i, { type: "array" }), s = o.Sheets[o.SheetNames[0]], c = a.utils.sheet_to_json(s, { header: 1 });
+			let i = await readFileAsArrayBuffer(n), a = await import("xlsx"), o = a.read(i, { type: "array" }), s = o.Sheets[o.SheetNames[0]], c = a.utils.sheet_to_json(s);
 			if (c.length < 1) return;
 			let l = r.props.columns.filter((e) => !e[r.internal]);
 			return c.slice(1).map((e) => Object.fromEntries(l.map((t) => [t.id, e[t.name]])));

package/dist/plugins/MenuPlugin.d.ts

@@ -10,7 +10,7 @@ declare module '../index' {
     interface Commands {
         rowEquals: (a: any, b: any) => boolean;
         rowIndexOf: (data: any[], row: any) => number;
-        rowChange: (row: any, i?: any) => void;
+        rowChange: (row: any) => void;
         rowsChange: (rows: any) => void;
         addRows: (i: number, rows: any[], before?: boolean) => void;
         deleteRows: (i: number[]) => void;

package/dist/plugins/MenuPlugin.js

@@ -2,9 +2,8 @@ import { useMemoAsync } from "../hooks/index.js";
 import { findParent } from "../tree.js";
 import "../utils.js";
 import { Menu } from "../components/Menu.js";
-import { createComponent, memo, mergeProps } from "solid-js/web";
+import { createComponent, memo } from "solid-js/web";
 import { batch, createMemo, createSignal, mapArray } from "solid-js";
-import { combineProps } from "@solid-primitives/props";
 import { delay, range, remove } from "es-toolkit";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { autoPlacement, computePosition } from "@floating-ui/dom";
@@ -12,50 +11,47 @@ const MenuPlugin = {
 	name: "menu",
 	priority: Infinity,
 	store: (e) => ({}),
-	rewriteProps: { Table: ({ Table: r }, { store: c }) => (p) => {
-		let [m, h] = createSignal(), _ = mapArray(() => c.plugins || [], (e) => createMemo(() => e.menus?.(c))), v = createMemo(() => _().flatMap((e) => e() || [])), [y, b] = createSignal();
-		function x(e) {
-			e.preventDefault(), c.table.contains(e.target) && b({
+	layers: [(t) => {
+		let [a, l] = createSignal(), u = mapArray(() => t.plugins || [], (e) => createMemo(() => e.menus?.(t))), d = createMemo(() => u().flatMap((e) => e() || [])), [h, g] = createSignal();
+		createEventListener(() => t.table, "contextmenu", _);
+		function _(e) {
+			e.preventDefault(), t.table.contains(e.target) && g({
 				x: e.x,
 				y: e.y
 			});
 		}
 		createEventListener(document, "pointerdown", (e) => {
-			m()?.contains(e.target) || b();
+			a()?.contains(e.target) || g();
 		});
-		let S = useMemoAsync(() => {
-			let e = m();
-			if (e) return computePosition({ getBoundingClientRect: () => DOMRect.fromRect(y()) }, e, {
+		let v = useMemoAsync(() => {
+			let e = a();
+			if (e) return computePosition({ getBoundingClientRect: () => DOMRect.fromRect(h()) }, e, {
 				strategy: "fixed",
 				placement: "top-start",
 				middleware: [autoPlacement({
 					boundary: document.body,
 					alignment: "start"
 				})]
-			}).then(({ x: e, y: r }) => ({
+			}).then(({ x: e, y: t }) => ({
 				position: "fixed",
-				transform: `translate(${e}px, ${r}px)`,
+				transform: `translate(${e}px, ${t}px)`,
 				top: 0,
 				left: 0,
 				"z-index": 10
 			}));
 		});
-		return p = combineProps({
-			tabindex: -1,
-			onContextMenu: x
-		}, p), createComponent(r, mergeProps(p, { get children() {
-			return [memo(() => memo(() => !!y())() && createComponent(Menu, {
-				ref: h,
-				get style() {
-					return S() || "position: fixed";
-				},
-				get items() {
-					return v();
-				},
-				onAction: () => b()
-			})), memo(() => p.children)];
-		} }));
-	} },
+		return memo(() => memo(() => !!h())() && createComponent(Menu, {
+			ref: l,
+			class: "pointer-events-auto",
+			get style() {
+				return v() || "position: fixed";
+			},
+			get items() {
+				return d();
+			},
+			onAction: () => g()
+		}));
+	}],
 	menus: (e) => [
 		{
 			label: "新增行 ↑",
@@ -67,74 +63,74 @@ const MenuPlugin = {
 		},
 		{
 			label: "删除行",
-			cb: () => e.commands.deleteRows(range(...((e) => [e[0], e[1] + 1])([e.selected.start[1], e.selected.end[1]].sort((e, r) => e - r))))
+			cb: () => e.commands.deleteRows(range(...((e) => [e[0], e[1] + 1])([e.selected.start[1], e.selected.end[1]].sort((e, t) => e - t))))
 		}
 	],
 	commands: (e) => ({
-		rowEquals(r, i) {
-			let a = e.props.rowKey;
-			return r == i || a != null && r?.[a] == i?.[a];
+		rowEquals(t, n) {
+			let r = e.props.rowKey;
+			return t == n || r != null && t?.[r] == n?.[r];
 		},
-		rowIndexOf(r, i) {
-			return r.findIndex((r) => e.commands.rowEquals(r, i));
+		rowIndexOf(t, n) {
+			return t.findIndex((t) => e.commands.rowEquals(t, n));
 		},
-		rowChange(r, i) {
-			let a = [...e.rawProps.data || []];
-			i = i == null ? e.commands.rowIndexOf(a, r) : a.findIndex((r) => e.commands.rowEquals(r, e.props.data[i])), i > -1 && (a[i] = r, e.props.onDataChange?.(a));
+		rowChange(t) {
+			let n = [...e.rawProps.data || []], r = e.commands.rowIndexOf(n, t);
+			r > -1 && (n[r] = t, e.props.onDataChange?.(n));
 		},
-		rowsChange(r) {
-			let i = [...e.rawProps.data || []];
-			r.forEach((r) => {
-				let a = e.commands.rowIndexOf(i, r);
-				a > -1 && (i[a] = r);
-			}), e.props.onDataChange?.(i);
+		rowsChange(t) {
+			let n = [...e.rawProps.data || []];
+			t.forEach((t) => {
+				let r = e.commands.rowIndexOf(n, t);
+				r > -1 && (n[r] = t);
+			}), e.props.onDataChange?.(n);
 		},
-		addRows(r, i, a = !0) {
-			addRows(e, r, i, a);
+		addRows(t, n, r = !0) {
+			addRows(e, t, n, r);
 		},
-		deleteRows(r) {
-			let { rowKey: i, data: a } = e.props, o = [...e.rawProps.data || []], s = new Set(r.map((e) => a[e]));
-			remove(o, (e) => s.has(e)), e.props?.onDataChange?.(o);
+		deleteRows(t) {
+			let { rowKey: n, data: r } = e.props, i = [...e.rawProps.data || []], a = new Set(t.map((e) => r[e]));
+			remove(i, (e) => a.has(e)), e.props?.onDataChange?.(i);
 		},
-		moveRows(i, a) {
-			let { data: o } = e.props, s = i.map((e) => o[e]).filter((r) => r && !r?.[e.internal]);
-			if (!s.length) return;
-			let c = a >= 0 && a < o.length ? o[a] : null, { rowKey: l } = e.props, u = e.props.tree?.children || Symbol(), d = new Set(s.map((e) => e[l])), f = [];
-			function p(e) {
-				return e.reduce((e, r) => {
-					if (d.has(r[l])) return f.push(r), e;
-					if (Array.isArray(r[u]) && r[u].length) {
-						let e = p(r[u]);
-						r = e.length === r[u].length ? r : {
-							...r,
-							[u]: e
+		moveRows(n, r) {
+			let { data: i } = e.props, a = n.map((e) => i[e]).filter((t) => t && !t?.[e.internal]);
+			if (!a.length) return;
+			let o = r >= 0 && r < i.length ? i[r] : null, { rowKey: s } = e.props, c = e.props.tree?.children || Symbol(), l = new Set(a.map((e) => e[s])), u = [];
+			function d(e) {
+				return e.reduce((e, t) => {
+					if (l.has(t[s])) return u.push(t), e;
+					if (Array.isArray(t[c]) && t[c].length) {
+						let e = d(t[c]);
+						t = e.length === t[c].length ? t : {
+							...t,
+							[c]: e
 						};
 					}
-					return e.push(r), e;
+					return e.push(t), e;
 				}, []);
 			}
-			let m = p([...e.rawProps.data || []]), h = findParent(m, (e) => e[l] === c?.[l])?.children ?? m, g = c ? h.findIndex((e) => e[l] === c[l]) : -1;
-			if (g > -1 ? h.splice(g, 0, f) : h.push(...f), e.selected) {
-				let r = Math.max(0, a - s.length);
-				e.selected.start = [0, r], e.selected.end = [Infinity, r + f.length - 1];
+			let f = d([...e.rawProps.data || []]), p = findParent(f, (e) => e[s] === o?.[s])?.children ?? f, m = o ? p.findIndex((e) => e[s] === o[s]) : -1;
+			if (m > -1 ? p.splice(m, 0, u) : p.push(...u), e.selected) {
+				let t = Math.max(0, r - a.length);
+				e.selected.start = [0, t], e.selected.end = [Infinity, t + u.length - 1];
 			}
-			e.props?.onDataChange?.(m);
+			e.props?.onDataChange?.(f);
 		}
 	})
 };
-function addRows(e, r, i, a) {
-	let { data: o } = e.props, s = (r) => {
-		for (a = !1; --r >= 0 && o[r]?.[e.internal];);
-		return r >= 0 ? o[r] : null;
-	}, l = (r) => {
-		for (a = !0; ++r < o.length && o[r]?.[e.internal];);
-		return r < o.length ? o[r] : null;
-	}, u = o[r]?.[e.internal] ? a ? s(r) || l(r) : l(r) || s(r) : o[r];
-	u && batch(() => {
-		r = e.commands.rowIndexOf(o, u), e.selected && (e.selected.start = [0, r + (a ? 0 : 1)], e.selected.end = [Infinity, r + i.length - 1 + (a ? 0 : 1)]);
+function addRows(e, t, n, r) {
+	let { data: i } = e.props, o = (t) => {
+		for (r = !1; --t >= 0 && i[t]?.[e.internal];);
+		return t >= 0 ? i[t] : null;
+	}, s = (t) => {
+		for (r = !0; ++t < i.length && i[t]?.[e.internal];);
+		return t < i.length ? i[t] : null;
+	}, c = i[t]?.[e.internal] ? r ? o(t) || s(t) : s(t) || o(t) : i[t];
+	c && batch(() => {
+		t = e.commands.rowIndexOf(i, c), e.selected && (e.selected.start = [0, t + (r ? 0 : 1)], e.selected.end = [Infinity, t + n.length - 1 + (r ? 0 : 1)]);
 	}), (() => {
-		let r = [...e.rawProps.data || []], o = u ? e.commands.rowIndexOf(r, u) + (a ? 0 : 1) : r.length;
-		r.splice(o, 0, ...i), e.props?.onDataChange?.(r);
+		let t = [...e.rawProps.data || []], i = c ? e.commands.rowIndexOf(t, c) + (r ? 0 : 1) : t.length;
+		t.splice(i, 0, ...n), e.props?.onDataChange?.(t);
 	})(), delay(0).then(() => {
 		e.scrollCellIfNeeded(e.selected.start[0], e.selected.start[1]);
 	});