intable 0.0.21 → 0.0.23

package/dist/components/Filter.js

@@ -0,0 +1,97 @@
+import { Popover } from "./Popover.js";
+import { AndOrFields, RuleValueEditor, isValueFreeOp, newRule } from "./AndOrFields.js";
+import filter_default from "../filter.js";
+import { addEventListener, className, createComponent, delegateEvents, effect, insert, template, use } from "solid-js/web";
+import { Show } from "solid-js";
+import { isEqual } from "es-toolkit";
+import { autoPlacement, offset } from "floating-ui-solid";
+var _tmpl$ = /* @__PURE__ */ template("<div class=\"mt-1 flex gap-1.5\"><button aria-label=筛选 title=筛选>"), _tmpl$2 = /* @__PURE__ */ template("<div class=\"filter-input min-w-24 op-60 select-none\">"), _tmpl$3 = /* @__PURE__ */ template("<div class=\"tt-menu p-4! z-2\">");
+function isRuleNode(e) {
+	return e ? "field" in e : !1;
+}
+function firstRule(e) {
+	if (e) {
+		if (isRuleNode(e)) return e;
+		for (let _ of e.children ?? []) {
+			let e = firstRule(_);
+			if (e) return e;
+		}
+	}
+}
+const Filter = (y) => {
+	let b, x = () => y.tree, C = () => firstRule(x()), w = () => isValueFreeOp(C()?.op), T = (e) => {
+		if (isEqual({
+			...x(),
+			value: e
+		}, newRule(y.col))) {
+			y.setTree();
+			return;
+		}
+		if (!x()) {
+			y.setTree(newRule(y.col, { value: e }));
+			return;
+		}
+		let _ = firstRule(x());
+		_ && (_.value = e);
+	};
+	return (() => {
+		var v = _tmpl$(), S = v.firstChild;
+		v.$$click = (e) => e.stopPropagation(), addEventListener(v, "pointerdown", (e) => e.stopPropagation()), addEventListener(v, "keydown", (e) => e.stopPropagation()), insert(v, createComponent(Show, {
+			get when() {
+				return !w();
+			},
+			get fallback() {
+				return _tmpl$2();
+			},
+			get children() {
+				return createComponent(RuleValueEditor, {
+					get field() {
+						return y.col;
+					},
+					get op() {
+						return C()?.op;
+					},
+					class: "filter-input",
+					get value() {
+						return C()?.value ?? "";
+					},
+					get enum() {
+						return y.col.enum;
+					},
+					onChange: (e) => T(String(e ?? ""))
+				});
+			}
+		}), S);
+		var E = b;
+		return typeof E == "function" ? use(E, S) : b = S, insert(S, createComponent(filter_default, { class: "size-3.5 op-75" })), insert(v, createComponent(Popover, {
+			trigger: "click",
+			strategy: "fixed",
+			placement: "bottom",
+			get middleware() {
+				return [offset({ mainAxis: 6 }), autoPlacement({
+					boundary: document.body,
+					alignment: "start"
+				})];
+			},
+			reference: b,
+			get floating() {
+				return (() => {
+					var e = _tmpl$3();
+					return insert(e, createComponent(AndOrFields, {
+						get fields() {
+							return [y.col];
+						},
+						get value() {
+							return x() ?? newRule(y.col);
+						},
+						onChange: (e) => y.setTree(isEqual(e, newRule(y.col)) ? void 0 : e),
+						newRule: () => newRule(y.col),
+						hideFields: !0
+					})), e;
+				})();
+			}
+		}), null), effect(() => className(S, `filter-input w-a! flex items-center justify-center ${x() && "bg-blue/20! c-blue b-#00000000!"}`)), v;
+	})();
+};
+delegateEvents(["click"]);
+export { Filter };

package/dist/filter.js

@@ -0,0 +1,6 @@
+import { spread, template } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d=\"M22 3H2l8 9.46V19l4 2v-8.54z\">"), filter_default = (n = {}) => (() => {
+	var r = _tmpl$();
+	return spread(r, n, !0, !0), r;
+})();
+export { filter_default as default };

package/dist/hooks/index.js

@@ -111,7 +111,10 @@ function useMouseDown(h) {
 }
 function useClicked(h) {
 	let [B, V] = createSignal(!1), H = () => castArray(access(h));
-	return createEventListener(() => H().map((h) => h?.getRootNode()), "click", (h) => V(H().some((B) => B?.contains(h.target)))), B;
+	return createEventListener(() => H().map((h) => h?.getRootNode()), "click", (h) => {
+		let B = h.composedPath();
+		V(H().some((h) => B.includes(h)));
+	}), B;
 }
 function useMutation(h, B, V) {
 	let H = createSignal(V());

package/dist/hooks/useVirtualizer.js

@@ -1,96 +1,92 @@
+import { throttlePromise } from "../utils.js";
 import { createComputed, createMemo, createSignal, mergeProps, untrack } from "solid-js";
 import { createElementSize } from "@solid-primitives/resize-observer";
 import { createScrollPosition } from "@solid-primitives/scroll";
-import { uniqBy } from "es-toolkit";
+import { keyBy, uniqBy } from "es-toolkit";
 var FenwickTree = class e {
 	constructor(e) {
 		this.n = e, this.tree = new Float64Array(e + 1);
 	}
-	add(e, a) {
-		for (e += 1; e <= this.n; e += e & -e) this.tree[e] += a;
+	add(e, s) {
+		for (e += 1; e <= this.n; e += e & -e) this.tree[e] += s;
 	}
 	sum(e) {
-		let a = 0;
-		for (e += 1; e > 0; e -= e & -e) a += this.tree[e];
-		return a;
+		let s = 0;
+		for (e += 1; e > 0; e -= e & -e) s += this.tree[e];
+		return s;
 	}
 	total() {
 		return this.n > 0 ? this.sum(this.n - 1) : 0;
 	}
 	findByOffset(e) {
-		let a = 0;
-		for (let o = 1 << Math.floor(Math.log2(this.n || 1)); o > 0; o >>= 1) a + o <= this.n && this.tree[a + o] <= e && (a += o, e -= this.tree[a]);
-		return Math.min(a, this.n - 1);
+		let s = 0;
+		for (let c = 1 << Math.floor(Math.log2(this.n || 1)); c > 0; c >>= 1) s + c <= this.n && this.tree[s + c] <= e && (s += c, e -= this.tree[s]);
+		return Math.min(s, this.n - 1);
 	}
-	static build(a) {
-		let o = a.length, s = new e(o);
-		for (let e = 0; e < o; e++) {
-			s.tree[e + 1] += a[e];
-			let c = e + 1 + (e + 1 & -(e + 1));
-			c <= o && (s.tree[c] += s.tree[e + 1]);
+	static build(s) {
+		let c = s.length, l = new e(c);
+		for (let e = 0; e < c; e++) {
+			l.tree[e + 1] += s[e];
+			let u = e + 1 + (e + 1 & -(e + 1));
+			u <= c && (l.tree[u] += l.tree[e + 1]);
 		}
-		return s;
+		return l;
 	}
 };
-function useVirtualizer(l) {
-	l = mergeProps({
+function useVirtualizer(d) {
+	d = mergeProps({
 		overscan: 0,
 		batch: 0,
 		enable: !0
-	}, l);
-	let u = createElementSize(l.getScrollElement), d = createScrollPosition(l.getScrollElement), f = createMemo(() => l.horizontal ? d.x : d.y), p = createMemo(() => l.horizontal ? u.width : u.height), m = [], h = new FenwickTree(0), [g, _] = createSignal(void 0, { equals: !1 });
+	}, d);
+	let f = createElementSize(d.getScrollElement), p = createScrollPosition(d.getScrollElement), m = createMemo(() => d.horizontal ? p.x : p.y), h = createMemo(() => d.horizontal ? f.width : f.height), g = [], _ = new FenwickTree(0), [v, y] = createSignal(void 0, { equals: !1 }), b = throttlePromise(queueMicrotask), x = () => b().then(y);
 	createComputed(() => {
-		let { count: e } = l;
+		let { count: e } = d;
 		untrack(() => {
-			if (e !== m.length) {
-				if (e > m.length) for (let a = m.length; a < e; a++) m.push(l.estimateSize(a));
-				else m.length = e;
-				h = FenwickTree.build(m.slice(0, e)), _();
+			if (e !== g.length) {
+				if (e > g.length) for (let s = g.length; s < e; s++) g.push(d.estimateSize(s));
+				else g.length = e;
+				_ = FenwickTree.build(g.slice(0, e)), x();
 			}
 		});
 	});
-	let v = (e) => ({
+	let S = (e) => ({
 		index: e,
-		start: e > 0 ? h.sum(e - 1) : 0,
-		end: h.sum(e)
-	}), y = createMemo((e) => {
-		g();
-		let { batch: a, overscan: o = 0 } = l, s = h.findByOffset(f()) - o;
-		return a && (s > e ? s = s <= e + a ? e : s > e + a * 2 ? s : e + a : s -= a), Math.max(s, 0);
-	}, 0), b = createMemo((e) => {
-		g();
-		let { batch: a, overscan: o = 0 } = l, s = h.findByOffset(f() + p()) + o;
-		return a && (s < e ? s = s >= e - a ? e : s < e - a * 2 ? s : e - a : s += a), Math.min(s, l.count - 1);
-	}, 0), x = createMemo(() => {
-		if (g(), !l.enable) return Array.from({ length: l.count }, (e, a) => v(a));
+		start: _.sum(e - 1),
+		end: _.sum(e)
+	}), C = createMemo((e) => {
+		v();
+		let { batch: s, overscan: c = 0 } = d, l = _.findByOffset(m()) - c;
+		return s && (l > e ? l = l <= e + s ? e : l > e + s * 2 ? l : e + s : l -= s), Math.max(l, 0);
+	}, 0), w = createMemo((e) => {
+		v();
+		let { batch: s, overscan: c = 0 } = d, l = _.findByOffset(m() + h()) + c;
+		return s && (l < e ? l = l >= e - s ? e : l < e - s * 2 ? l : e - s : l += s), Math.min(l, d.count - 1);
+	}, 0), T = createMemo(() => {
+		if (v(), !d.enable) return Array.from({ length: d.count }, (e, s) => S(s));
 		let e = [];
-		for (let a = y(); a <= b(); a++) e.push(v(a));
-		return l.extras && (e.push(...l.extras(y(), b())?.map((e) => v(e)) || []), e = uniqBy(e, (e) => e.index).sort((e, a) => e.index - a.index)), e;
+		for (let s = C(); s <= w(); s++) e.push(S(s));
+		return d.extras && (e.push(...d.extras(C(), w())?.map((e) => S(e)) || []), e = uniqBy(e, (e) => e.index)), e;
 	});
 	return {
-		options: l,
-		startIdx: y,
-		endIdx: b,
-		getTotalSize: () => (g(), h.total()),
-		resizeItem: (e, a) => {
-			let o = m[e] ?? 0;
-			if (o !== a) {
-				if (e < y()) {
-					let e = l.getScrollElement();
-					(l.horizontal ? e.scrollLeft : e.scrollTop) !== 0 && (l.horizontal ? e.scrollLeft += a - o : e.scrollTop += a - o);
+		options: d,
+		startIdx: C,
+		endIdx: w,
+		getTotalSize: () => (v(), _.total()),
+		resizeItem: (e, s) => {
+			let c = g[e] ?? 0;
+			if (c !== s) {
+				if (e < C()) {
+					let e = d.getScrollElement();
+					(d.horizontal ? e.scrollLeft : e.scrollTop) !== 0 && (d.horizontal ? e.scrollLeft += s - c : e.scrollTop += s - c);
 				}
-				h.add(e, a - o), m[e] = a, _();
+				_.add(e, s - c), g[e] = s, x();
 			}
 		},
-		getVirtualItems: x,
+		getVirtualItems: T,
 		getVirtualItem: (() => {
-			let e = createMemo(() => {
-				g();
-				let e = {};
-				for (let a of x()) e[a.index] = a;
-				return e;
-			});
-			return (a) => e()[a];
+			let e = createMemo(() => keyBy(T(), (e) => e.index));
+			return (s) => e()[s];
 		})()
 	};
 }

package/dist/index.d.ts

@@ -116,7 +116,7 @@ export type TDProps = {
 export type TD = Component<TDProps>;
 type Obj = Record<string | symbol, any>;
 export interface TableColumn extends Obj {
-    id?: any;
+    id: any;
     name?: string;
     width?: number;
     fixed?: 'left' | 'right';

package/dist/index.js

@@ -18,7 +18,7 @@ import { TreePlugin } from "./plugins/TreePlugin.js";
 import { HeaderGroupPlugin } from "./plugins/HeaderGroup.js";
 import { ValidatorPlugin } from "./plugins/ValidatorPlugin.js";
 import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import { $PROXY, For, batch, createComputed, createContext, createEffect, createMemo, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, onMount, runWithOwner, untrack, useContext } from "solid-js";
+import { $PROXY, For, batch, createContext, createEffect, createMemo, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, onMount, runWithOwner, untrack, useContext } from "solid-js";
 import { createMutable, reconcile } from "solid-js/store";
 import { combineProps } from "@solid-primitives/props";
 import { createLazyMemo } from "@solid-primitives/memo";
@@ -38,17 +38,17 @@ const Ctx = createContext({
 		get plugins() {
 			return Z();
 		}
-	}), X = memoize((q) => runWithOwner(J, () => unFn(q, Y))), Z = createMemo(() => [
-		...defaultsPlugins,
-		...q.plugins || [],
-		RenderPlugin
-	].map(X).sort((v, q) => (q.priority || 0) - (v.priority || 0)));
-	createComputed((v) => {
-		let q = difference(Z(), v);
+	}), X = memoize((q) => runWithOwner(J, () => unFn(q, Y))), Z = createMemo((v) => {
+		let Z = [
+			...defaultsPlugins,
+			...q.plugins || [],
+			RenderPlugin
+		].map(X).sort((v, q) => (q.priority || 0) - (v.priority || 0)), $ = difference(Z, v);
 		return runWithOwner(J, () => {
-			q.forEach((v) => Object.assign(Y, v.store?.(Y)));
-		}), Z();
-	}, []), Y.props = (() => {
+			$.forEach((v) => Object.assign(Y, v.store?.(Y)));
+		}), Z;
+	}, []);
+	Y.props = (() => {
 		let v = getOwner(), J = {}, X = (q) => J[q] ??= runWithOwner(v, () => createMemo(() => Q(q)));
 		function Q(v) {
 			return createMemo(() => Z().map((q) => q.rewriteProps?.[v]).filter((v) => v), void 0, { equals: isEqual })().reduce((q, J) => J({ [v]: q }, { store: Y }), q[v]);
@@ -167,21 +167,25 @@ function BasePlugin() {
 		priority: Infinity,
 		store: (v) => {
 			let q = makeResizeObserver((q) => {
-				for (let J of q) {
-					let q = J.target, { inlineSize: Y, blockSize: X } = J.borderBoxSize[0], Z = v.ths.indexOf(q);
-					Z >= 0 && q.parentElement && (v.thSizes[Z] = {
-						width: Y,
-						height: X
-					});
-				}
-			}), J = makeResizeObserver((q) => {
-				for (let J of q) {
-					let q = J.target, { inlineSize: Y, blockSize: X } = J.borderBoxSize[0], Z = v.trs.indexOf(q);
-					Z >= 0 && q.parentElement && (v.trSizes[Z] = {
-						width: Y,
-						height: X
-					});
-				}
+				batch(() => {
+					for (let J of q) {
+						let q = J.target, { inlineSize: Y, blockSize: X } = J.borderBoxSize[0], Z = q.getAttribute("x");
+						Z >= 0 && q.parentElement && (v.thSizes[Z] = {
+							width: Y,
+							height: X
+						});
+					}
+				});
+			}), J = makeResizeObserver(async (q) => {
+				batch(() => {
+					for (let J of q) {
+						let q = J.target, { inlineSize: Y, blockSize: X } = J.borderBoxSize[0], Z = q.getAttribute("y");
+						Z >= 0 && q.parentElement && (v.trSizes[Z] = {
+							width: Y,
+							height: X
+						});
+					}
+				});
 			});
 			return {
 				thObs: q,

package/dist/plugins/CellSelectionPlugin.js

@@ -104,6 +104,10 @@ const CellSelectionPlugin = {
 		ArrowDown: () => {
 			let { start: i, end: a } = e.selected;
 			i.length && (i[1] = a[1] = Math.min(i[1] + 1, e.props.data.length - 1), a[0] = i[0], e.scrollCellIfNeeded(i[0], i[1]));
+		},
+		"$mod+a": () => {
+			let { columns: i, data: a } = e.props;
+			!i?.length || !a?.length || (e.selected.start = [0, 0], e.selected.end = [i.length - 1, a.length - 1], e.scrollCellIfNeeded(e.selected.start[0], e.selected.start[1]));
 		}
 	})
 };

package/dist/plugins/CommandPlugin.js

@@ -1,43 +1,41 @@
 import { createComponent } from "solid-js/web";
 import { createMemo, getOwner, runWithOwner } from "solid-js";
 import { combineProps } from "@solid-primitives/props";
+import { createLazyMemo } from "@solid-primitives/memo";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { createKeybindingsHandler } from "tinykeys";
 const CommandPlugin = {
 	name: "command",
 	priority: Infinity,
 	store: (e) => {
-		let a = getOwner(), o = createMemo(() => e.plugins.reduce((n, r) => Object.assign(n, runWithOwner(a, () => r.commands?.(e, { ...n }))), {}));
-		return {
-			get commands() {
-				return o();
-			},
-			scrollToCell(n, r, i) {
-				n = typeof n == "object" ? e.props.columns.indexOf(n) : n, r = typeof r == "object" ? e.props.data.indexOf(r) : r;
-				let a = e.table.querySelector(`[x="${n}"][y="${r}"]`);
-				a && a.scrollIntoView({
+		let r = getOwner(), o = createLazyMemo(() => e.plugins.reduce((i, o) => Object.assign(i, runWithOwner(r, () => o.commands?.(e, { ...i }))), {}));
+		return Object.defineProperty(e, "commands", { get: () => o() }), {
+			scrollToCell(r, i, a) {
+				r = typeof r == "object" ? e.props.columns.indexOf(r) : r, i = typeof i == "object" ? e.props.data.indexOf(i) : i;
+				let o = e.table.querySelector(`[x="${r}"][y="${i}"]`);
+				o && o.scrollIntoView({
 					behavior: "smooth",
-					...i
+					...a
 				});
 			},
-			scrollCellIfNeeded(n, r, i = !1) {
-				n = typeof n == "object" ? e.props.columns.indexOf(n) : n, r = typeof r == "object" ? e.props.data.indexOf(r) : r;
-				let a = e.table.querySelector(`[x="${n}"][y="${r}"]`);
-				a && (a.scrollIntoViewIfNeeded(i), a.focus());
+			scrollCellIfNeeded(r, i, a = !1) {
+				r = typeof r == "object" ? e.props.columns.indexOf(r) : r, i = typeof i == "object" ? e.props.data.indexOf(i) : i;
+				let o = e.table.querySelector(`[x="${r}"][y="${i}"]`);
+				o && (o.scrollIntoViewIfNeeded(a), o.focus());
 			}
 		};
 	},
 	rewriteProps: { Table: ({ Table: s }, { store: c }) => (l) => {
 		let u = getOwner(), d = createMemo(() => {
 			let e = {};
-			for (let n of c.plugins) {
-				let r = runWithOwner(u, () => n.keybindings?.(c));
-				r && Object.assign(e, r);
+			for (let r of c.plugins) {
+				let i = runWithOwner(u, () => r.keybindings?.(c));
+				i && Object.assign(e, i);
 			}
-			let n = c.props?.keybindings;
-			if (n) for (let [r, i] of Object.entries(n)) i === !1 ? delete e[r] : typeof i == "function" && (e[r] = i);
-			return createKeybindingsHandler(Object.fromEntries(Object.entries(e).map(([e, n]) => [e, (e) => {
-				e.preventDefault(), n(e);
+			let r = c.props?.keybindings;
+			if (r) for (let [i, a] of Object.entries(r)) a === !1 ? delete e[i] : typeof a == "function" && (e[i] = a);
+			return createKeybindingsHandler(Object.fromEntries(Object.entries(e).map(([e, r]) => [e, (e) => {
+				e.preventDefault(), r(e);
 			}])));
 		});
 		return createEventListener(() => c.scroll_el, "keydown", (e) => d()(e)), l = combineProps({ tabindex: -1 }, l), createComponent(s, l);

package/dist/plugins/CopyPastePlugin.js

@@ -1,5 +1,22 @@
 import { unFn } from "../utils.js";
 import { createEffect } from "solid-js";
+function formatTSVCell(e) {
+	return /[\t\r\n"]/.test(e) ? "\"" + e.replace(/"/g, "\"\"") + "\"" : e;
+}
+function parseTSV(e) {
+	let t = [], n = [], r = "", i = 0;
+	for (; i < e.length;) {
+		let a = e[i];
+		if (a === "\"") for (i++; i < e.length;) if (e[i] === "\"") if (e[i + 1] === "\"") r += "\"", i += 2;
+		else {
+			i++;
+			break;
+		}
+		else e[i] === "\r" && e[i + 1] === "\n" ? (r += "\n", i += 2) : e[i] === "\r" ? (r += "\n", i++) : r += e[i++];
+		else a === "	" ? (n.push(r), r = "", i++) : a === "\r" && e[i + 1] === "\n" ? (n.push(r), t.push(n), n = [], r = "", i += 2) : a === "\r" || a === "\n" ? (n.push(r), t.push(n), n = [], r = "", i++) : (r += a, i++);
+	}
+	return (r || n.length) && (n.push(r), t.push(n)), t.length && t[t.length - 1].length === 1 && t[t.length - 1][0] === "" && t.pop(), t;
+}
 const ClipboardPlugin = {
 	name: "clipboard",
 	keybindings: (e) => ({
@@ -16,43 +33,40 @@ const ClipboardPlugin = {
 	menus: (e) => [],
 	commands: (t) => ({
 		copy: () => {
-			let { start: e, end: n } = t.selected;
+			let { start: e, end: r } = t.selected;
 			if (!e?.length) return;
-			let [r, i] = [e[0], n[0]].sort((e, t) => e - t), [a, o] = [e[1], n[1]].sort((e, t) => e - t), s = t.props.columns.slice(r, i + 1).filter((e) => !e[t.internal]), c = t.props.data.slice(a, o + 1).map((e) => s.map((t) => {
-				let n = e[t.id] ?? "";
-				return String(n).replace(/[\t\r\n]/g, " ");
-			}).join("	")).join("\n");
-			navigator.clipboard.writeText(c);
+			let [i, a] = [e[0], r[0]].sort((e, t) => e - t), [o, s] = [e[1], r[1]].sort((e, t) => e - t), c = t.props.columns.slice(i, a + 1).filter((e) => !e[t.internal]), l = t.props.data.slice(o, s + 1).map((e) => c.map((t) => formatTSVCell(String(e[t.id] ?? ""))).join("	")).join("\r\n");
+			navigator.clipboard.writeText(l);
 		},
 		paste: async () => {
-			let { start: n, end: r } = t.selected;
+			let { start: n, end: i } = t.selected;
 			if (!n?.length) return;
-			let i = (await navigator.clipboard.readText()).replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\n$/, "").split("\n").map((e) => e.split("	")), a = i.length, o = i[0].length, [s, c] = [n[0], r[0]].sort((e, t) => e - t), [l, u] = [n[1], r[1]].sort((e, t) => e - t), d = u - l + 1, f = c - s + 1, p = d > a && d % a === 0 ? d : a, m = f > o && f % o === 0 ? f : o, h = t.props.columns, g = [];
-			for (let e = s; e < h.length && g.length < m; e++) h[e][t.internal] || g.push(h[e]);
-			let _ = t.props.data.slice(), v = l + p;
-			if (v > _.length) for (let e = _.length; e < v; e++) {
+			let a = await navigator.clipboard.readText(), o = parseTSV(a), s = o.length, c = o[0].length, [l, u] = [n[0], i[0]].sort((e, t) => e - t), [d, f] = [n[1], i[1]].sort((e, t) => e - t), p = f - d + 1, m = u - l + 1, h = p > s && p % s === 0 ? p : s, g = m > c && m % c === 0 ? m : c, _ = t.props.columns, v = [];
+			for (let e = l; e < _.length && v.length < g; e++) _[e][t.internal] || v.push(_[e]);
+			let y = t.props.data.slice(), b = d + h;
+			if (b > y.length) for (let e = y.length; e < b; e++) {
 				let n = t.props.newRow?.(e) || {};
-				_.push(n);
+				y.push(n);
 			}
-			let y = l + p - 1;
-			for (let n = 0; n <= y - l; n++) {
+			let x = d + h - 1;
+			for (let n = 0; n <= x - d; n++) {
 				let r = {};
-				g.forEach((s, c) => {
-					let u = _[l + n];
+				v.forEach((i, a) => {
+					let l = y[d + n];
 					unFn(t.props.editable, {
-						col: s,
-						data: u,
-						x: h.indexOf(s),
-						y: l + n
-					}) && (r[s.id] = i[n % a][c % o]);
-				}), _[l + n] = {
-					..._[l + n],
+						col: i,
+						data: l,
+						x: _.indexOf(i),
+						y: d + n
+					}) && (r[i.id] = o[n % s][a % c]);
+				}), y[d + n] = {
+					...y[d + n],
 					...r
 				};
 			}
-			let b = s, x = 0;
-			for (let e = s; e < h.length && x < g.length; e++) h[e][t.internal] || (b = e, x++);
-			t.selected.end = [b, y], t.props.onDataChange?.(_);
+			let S = l, C = 0;
+			for (let e = l; e < _.length && C < v.length; e++) _[e][t.internal] || (S = e, C++);
+			t.selected.end = [S, x], t.props.onDataChange?.(y);
 		}
 	})
 };

package/dist/plugins/DiffPlugin.js

@@ -1,32 +1,28 @@
 import { className, createComponent, effect, memo, mergeProps, template } from "solid-js/web";
 import { createMemo } from "solid-js";
-import { unwrap } from "solid-js/store";
 import { createLazyMemo } from "@solid-primitives/memo";
 import { isEqual, keyBy } from "es-toolkit";
-import { v4 } from "uuid";
 import { diffArrays } from "diff";
 var _tmpl$ = /* @__PURE__ */ template("<div>"), DEL = Symbol("del"), NEW = Symbol("new");
 const DiffPlugin = {
 	name: "diff",
 	priority: Infinity,
-	store: (e) => ((e.rawProps.data || []).forEach((c) => unwrap(c)[e.rawProps.rowKey] ??= v4()), {
+	store: (e) => ({
 		diffData: () => e.props.diff?.data ?? [],
-		diffDataKeyed: createLazyMemo(() => keyBy(e.diffData(), (c) => c[e.props.rowKey]))
+		diffDataKeyed: createLazyMemo(() => keyBy(e.diffData(), (o) => o[e.props.rowKey]))
 	}),
-	commands: (e) => ({ async diffCommit(c = e.rawProps.data || []) {
-		let { rowKey: l } = e.props || {};
-		c.forEach((e) => unwrap(e)[l] ??= v4()), c = structuredClone(unwrap(c));
-		let u = [], d = [], f = [], p = keyBy(c, (e) => e[l]);
-		for (let d of c) {
-			let c = e.diffDataKeyed()[d[l]];
-			c ? isEqual(d, c) || f.push(d) : u.push(d);
+	commands: (e) => ({ async diffCommit(o = e.rawProps.data || []) {
+		let { rowKey: s } = e.props || {}, c = [], l = [], u = [], d = keyBy(o, (e) => e[s]);
+		for (let l of o) {
+			let o = e.diffDataKeyed()[l[s]];
+			o ? isEqual(l, o) || u.push(l) : c.push(l);
 		}
-		for (let c of e.diffData()) !p[c[l]] && d.push(c);
-		await e.props.diff?.onCommit?.(c, {
-			added: u,
-			removed: d,
-			changed: f
-		}), u[NEW] = 0;
+		for (let o of e.diffData()) !d[o[s]] && l.push(o);
+		await e.props.diff?.onCommit?.(o, {
+			added: c,
+			removed: l,
+			changed: u
+		}), c[NEW] = 0;
 	} }),
 	rewriteProps: {
 		diff: ({ diff: e }) => ({
@@ -36,40 +32,40 @@ const DiffPlugin = {
 			changed: !0,
 			...e
 		}),
-		data: ({ data: e }, { store: c }) => {
-			if (!c.props.diff?.enable) return e;
-			let { rowKey: l, diff: u } = c.props || {}, d = c.diffData();
-			if (e.length === d.length && e.length > 0) {
-				let c = !0;
-				for (let u = 0; u < e.length; u++) if (e[u]?.[l] !== d[u]?.[l]) {
-					c = !1;
+		data: ({ data: e }, { store: o }) => {
+			if (!o.props.diff?.enable) return e;
+			let { rowKey: s, diff: c } = o.props || {}, l = o.diffData();
+			if (e.length === l.length && e.length > 0) {
+				let o = !0;
+				for (let c = 0; c < e.length; c++) if (e[c]?.[s] !== l[c]?.[s]) {
+					o = !1;
 					break;
 				}
-				if (c) return e;
+				if (o) return e;
 			}
-			return diffArrays(d, e, { comparator: (e, c) => e == c || e[l] == c[l] }).flatMap((e) => e.added ? e.value.map((e) => (e[NEW] = 1, e)) : e.removed ? u.removed ? e.value.map((e) => ({
+			return diffArrays(l, e, { comparator: (e, o) => e == o || e[s] == o[s] }).flatMap((e) => e.added ? e.value.map((e) => (e[NEW] = 1, e)) : e.removed ? c.removed ? e.value.map((e) => ({
 				...e,
 				[DEL]: 1,
-				[c.internal]: 1
+				[o.internal]: 1
 			})) : [] : e.value);
 		},
-		Td: ({ Td: f }, { store: m }) => m.props.diff?.enable ? (h) => {
-			let g = createMemo(() => {
-				let { diff: e } = m.props, c = h.data[m.props.rowKey];
-				return [h.data[NEW] ? "bg-green!" : h.data[DEL] ? "bg-red!" : h.data[m.internal] ? "" : e.changed && h.data[h.col.id] != m.diffDataKeyed()[c]?.[h.col.id] ? "bg-green!" : ""].join(" ");
+		Td: ({ Td: u }, { store: f }) => f.props.diff?.enable ? (p) => {
+			let m = createMemo(() => {
+				let { diff: e } = f.props, o = p.data[f.props.rowKey];
+				return [p.data[NEW] ? "bg-green!" : p.data[DEL] ? "bg-red!" : p.data[f.internal] ? "" : e.changed && p.data[p.col.id] != f.diffDataKeyed()[o]?.[p.col.id] ? "bg-green!" : ""].join(" ");
 			});
-			return createComponent(f, mergeProps(h, {
+			return createComponent(u, mergeProps(p, {
 				get class() {
-					return h.class + (g() ? " relative z-1" : "");
+					return p.class + (m() ? " relative z-1" : "");
 				},
 				get children() {
-					return [memo(() => h.children), memo(() => memo(() => !!g())() && (() => {
-						var c = _tmpl$();
-						return effect(() => className(c, g() + " absolute inset-0 z--1 op-20 pointer-events-none")), c;
+					return [memo(() => p.children), memo(() => memo(() => !!m())() && (() => {
+						var o = _tmpl$();
+						return effect(() => className(o, m() + " absolute inset-0 z--1 op-15 pointer-events-none")), o;
 					})())];
 				}
 			}));
-		} : f
+		} : u
 	},
 	keybindings: (e) => ({ "$mod+S": () => e.commands.diffCommit() })
 };