intable 0.0.2 → 0.0.4

package/dist/plugins/CellSelectionPlugin.js

@@ -3,147 +3,111 @@ import { Ctx } from "../index.js";
 import { createComponent, memo, mergeProps, template } from "solid-js/web";
 import { batch, createMemo, useContext } from "solid-js";
 import { combineProps } from "@solid-primitives/props";
-var _tmpl$ = /* @__PURE__ */ template(`<div class=area>`);
-var inrange = (v, min, max) => v <= max && v >= min;
+var _tmpl$ = /* @__PURE__ */ template("<div class=area>"), inrange = (e, a, o) => e <= o && e >= a;
 const CellSelectionPlugin = {
 	store: () => ({ selected: {
 		start: [],
 		end: []
 	} }),
-	commands: (store) => ({ getAreaRows() {
-		const { start, end } = store.selected;
-		const [y1, y2] = [start[1], end[1]].sort((a, b) => a - b);
-		return store.props.data.slice(y1, y2 + 1);
+	commands: (e) => ({ getAreaRows() {
+		let { start: a, end: o } = e.selected, [s, c] = [a[1], o[1]].sort((e, a) => e - a);
+		return e.props.data.slice(s, c + 1);
 	} }),
 	rewriteProps: {
-		Th: ({ Th }, { store }) => (o) => {
-			const clazz = createMemo(() => {
-				const { start, end } = store.selected;
-				return inrange(o.x, ...[start[0], end[0]].sort((a, b) => a - b)) ? "col-range-highlight" : "";
+		Table: ({ Table: c }, { store: l }) => (u) => {
+			let { props: f } = useContext(Ctx);
+			l.cellSelectionRect ??= createMemo(() => {
+				let { start: e, end: a } = l.selected, o = [e[0], a[0]].sort((e, a) => e - a), s = [e[1], a[1]].sort((e, a) => e - a);
+				return {
+					xs: o,
+					ys: s
+				};
+			}), usePointerDrag(() => l.table, {
+				preventDefault: !1,
+				start(e, a, o) {
+					batch(() => {
+						let o = (e) => e.composedPath().find((e) => e.tagName == "TH" || e.tagName == "TD"), s = (e) => [e.getAttribute("x"), e.getAttribute("y")], c = o(e);
+						if (c && !(e.buttons != 1 && c.classList.contains("range-selected"))) {
+							if (c.tagName == "TH") {
+								let [e, u] = s(c);
+								if (e == null) return;
+								l.selected.start = [+e, 0], l.selected.end = [+e, Infinity], a((e) => {
+									let a = o(e);
+									if (!a) return;
+									let [c, u] = s(a);
+									c != null && (l.selected.end = [+c, Infinity]);
+								});
+							}
+							if (c.classList.contains("index")) {
+								let [e, u] = s(c);
+								if (e == null || u == null) return;
+								l.selected.start = [0, +u], l.selected.end = [Infinity, +u], a((e) => {
+									let a = o(e);
+									if (!a) return;
+									let [c, u] = s(a);
+									c == null || u == null || (l.selected.end = [Infinity, +u]);
+								});
+							} else if (c.tagName == "TD") {
+								let [e, u] = s(c);
+								if (e == null || u == null) return;
+								l.selected.start = [+e, +u], l.selected.end = [...l.selected.start], a((e) => {
+									let a = o(e);
+									if (!a) return;
+									let [c, u] = s(a);
+									c == null || u == null || (l.selected.end = [+c, +u]);
+								});
+							}
+						}
+					});
+				}
+			}), useTinykeys(() => l.table, {
+				ArrowLeft: () => {
+					let { start: e, end: a } = l.selected;
+					e[0] = a[0] = Math.max(e[0] - 1, 0), a[1] = e[1], p();
+				},
+				ArrowRight: () => {
+					let { start: e, end: a } = l.selected;
+					e[0] = a[0] = Math.min(e[0] + 1, f.columns.length - 1), a[1] = e[1], p();
+				},
+				ArrowUp: () => {
+					let { start: e, end: a } = l.selected;
+					e[1] = a[1] = Math.max(e[1] - 1, 0), a[0] = e[0], p();
+				},
+				ArrowDown: () => {
+					let { start: e, end: a } = l.selected;
+					e[1] = a[1] = Math.min(e[1] + 1, f.data.length - 1), a[0] = e[0], p();
+				}
 			});
-			const mo = combineProps(o, { get class() {
-				return clazz();
+			let p = () => {
+				let e = l.table.querySelector(`td[x="${l.selected.start[0]}"][y="${l.selected.start[1]}"]`);
+				e?.scrollIntoViewIfNeeded(!1), e?.focus();
+			};
+			return u = combineProps({ class: "select-none" }, u), createComponent(c, u);
+		},
+		Th: ({ Th: e }, { store: a }) => (o) => {
+			let u = createMemo(() => {
+				let { start: e, end: s } = a.selected;
+				return inrange(o.x, ...[e[0], s[0]].sort((e, a) => e - a)) ? "col-range-highlight" : "";
+			}), d = combineProps(o, { get class() {
+				return u();
 			} });
-			return createComponent(Th, mergeProps(mo, { get children() {
-				return [memo(() => mo.children), memo(() => memo(() => !!clazz())() && _tmpl$())];
+			return createComponent(e, mergeProps(d, { get children() {
+				return [memo(() => d.children), memo(() => memo(() => !!u())() && _tmpl$())];
 			} }));
 		},
-		Td: ({ Td }, { store }) => (o) => {
-			const clazz = createMemo(() => {
-				let clazz$1 = "";
-				const { xs, ys } = store.cellSelectionRect();
-				const inx = inrange(o.x, xs[0], xs[1]);
-				const iny = inrange(o.y, ys[0], ys[1]);
-				if (inx && iny) {
-					clazz$1 += "range-selected ";
-					if (o.x == xs[0]) clazz$1 += "range-selected-l ";
-					if (o.x == xs[1]) clazz$1 += "range-selected-r ";
-					if (o.y == ys[0]) clazz$1 += "range-selected-t ";
-					if (o.y == ys[1]) clazz$1 += "range-selected-b ";
-				}
-				if (o.x == 0 && iny) clazz$1 += "row-range-highlight ";
-				return clazz$1;
-			});
-			const mo = combineProps(o, {
+		Td: ({ Td: e }, { store: a }) => (o) => {
+			let u = createMemo(() => {
+				let e = "", { xs: s, ys: c } = a.cellSelectionRect(), l = inrange(o.x, s[0], s[1]), u = inrange(o.y, c[0], c[1]);
+				return l && u && (e += "range-selected ", o.x == s[0] && (e += "range-selected-l "), o.x == s[1] && (e += "range-selected-r "), o.y == c[0] && (e += "range-selected-t "), o.y == c[1] && (e += "range-selected-b ")), o.x == 0 && u && (e += "row-range-highlight "), e;
+			}), d = combineProps(o, {
 				get class() {
-					return clazz();
+					return u();
 				},
 				tabindex: -1
 			});
-			return createComponent(Td, mergeProps(mo, { get children() {
-				return [memo(() => mo.children), memo(() => memo(() => !!clazz())() && _tmpl$())];
+			return createComponent(e, mergeProps(d, { get children() {
+				return [memo(() => d.children), memo(() => memo(() => !!u())() && _tmpl$())];
 			} }));
-		},
-		Table: ({ Table }, { store }) => (o) => {
-			const { props } = useContext(Ctx);
-			store.cellSelectionRect ??= createMemo(() => {
-				const { start, end } = store.selected;
-				const xs = [start[0], end[0]].sort((a, b) => a - b);
-				const ys = [start[1], end[1]].sort((a, b) => a - b);
-				return {
-					xs,
-					ys
-				};
-			});
-			usePointerDrag(() => store.table, { start(e, move, end) {
-				batch(() => {
-					const findCell = (e$1) => e$1.composedPath().find((e$2) => e$2.tagName == "TH" || e$2.tagName == "TD");
-					const getXY = (cell$1) => [cell$1.getAttribute("x"), cell$1.getAttribute("y")];
-					const cell = findCell(e);
-					if (!cell) return;
-					if (e.buttons != 1 && cell.classList.contains("range-selected")) return;
-					if (cell.tagName == "TH") {
-						const [x, y] = getXY(cell);
-						if (x == null) return;
-						store.selected.start = [+x, 0];
-						store.selected.end = [+x, Infinity];
-						move((e$1) => {
-							const cell$1 = findCell(e$1);
-							if (!cell$1) return;
-							const [x$1, y$1] = getXY(cell$1);
-							if (x$1 == null) return;
-							store.selected.end = [+x$1, Infinity];
-						});
-					}
-					if (cell.classList.contains("index")) {
-						const [x, y] = getXY(cell);
-						if (x == null || y == null) return;
-						store.selected.start = [0, +y];
-						store.selected.end = [Infinity, +y];
-						move((e$1) => {
-							const cell$1 = findCell(e$1);
-							if (!cell$1) return;
-							const [x$1, y$1] = getXY(cell$1);
-							if (x$1 == null || y$1 == null) return;
-							store.selected.end = [Infinity, +y$1];
-						});
-					} else if (cell.tagName == "TD") {
-						const [x, y] = getXY(cell);
-						if (x == null || y == null) return;
-						store.selected.start = [+x, +y];
-						store.selected.end = [...store.selected.start];
-						move((e$1) => {
-							const cell$1 = findCell(e$1);
-							if (!cell$1) return;
-							const [x$1, y$1] = getXY(cell$1);
-							if (x$1 == null || y$1 == null) return;
-							store.selected.end = [+x$1, +y$1];
-						});
-					}
-				});
-			} });
-			useTinykeys(() => store.table, {
-				"ArrowLeft": () => {
-					const { start, end } = store.selected;
-					start[0] = end[0] = Math.max(start[0] - 1, 0);
-					end[1] = start[1];
-					scrollIntoView();
-				},
-				"ArrowRight": () => {
-					const { start, end } = store.selected;
-					start[0] = end[0] = Math.min(start[0] + 1, props.columns.length - 1);
-					end[1] = start[1];
-					scrollIntoView();
-				},
-				"ArrowUp": () => {
-					const { start, end } = store.selected;
-					start[1] = end[1] = Math.max(start[1] - 1, 0);
-					end[0] = start[0];
-					scrollIntoView();
-				},
-				"ArrowDown": () => {
-					const { start, end } = store.selected;
-					start[1] = end[1] = Math.min(start[1] + 1, props.data.length - 1);
-					end[0] = start[0];
-					scrollIntoView();
-				}
-			});
-			const scrollIntoView = () => {
-				const cell = store.table.querySelector(`td[x="${store.selected.start[0]}"][y="${store.selected.start[1]}"]`);
-				cell?.scrollIntoViewIfNeeded(false);
-				cell?.focus();
-			};
-			return createComponent(Table, o);
 		}
 	}
 };

package/dist/plugins/CommandPlugin.js

@@ -1,9 +1,6 @@
 import { createComponent } from "solid-js/web";
 import { createComputed } from "solid-js";
-const CommandPlugin = { rewriteProps: { Table: ({ Table }, { store }) => (o) => {
-	createComputed(() => {
-		store.commands = store.plugins.reduce((o$1, e) => Object.assign(o$1, e.commands?.(store, { ...o$1 })), {});
-	});
-	return createComponent(Table, o);
-} } };
+const CommandPlugin = { rewriteProps: { Table: ({ Table: n }, { store: r }) => (i) => (createComputed(() => {
+	r.commands = r.plugins.reduce((e, t) => Object.assign(e, t.commands?.(r, { ...e })), {});
+}), createComponent(n, i)) } };
 export { CommandPlugin };

package/dist/plugins/CopyPastePlugin.js

@@ -3,51 +3,38 @@ import { createComponent } from "solid-js/web";
 import { createEffect } from "solid-js";
 import { combineProps } from "@solid-primitives/props";
 const ClipboardPlugin = {
-	rewriteProps: { Table: ({ Table }, { store }) => (o) => {
-		let el;
-		useTinykeys(() => el, {
+	rewriteProps: { Table: ({ Table: i }, { store: a }) => (o) => {
+		let s;
+		return useTinykeys(() => s, {
 			"Control+C": () => {
-				store.commands.copy();
-				el.classList.add("copied");
+				a.commands.copy(), s.classList.add("copied");
 			},
-			"Control+V": () => store.commands.paste()
-		});
-		createEffect(() => {
-			JSON.stringify(store.selected);
-			el.classList.remove("copied");
-		});
-		o = combineProps({
-			ref: (e) => el = e,
+			"Control+V": () => a.commands.paste()
+		}), createEffect(() => {
+			JSON.stringify(a.selected), s.classList.remove("copied");
+		}), o = combineProps({
+			ref: (e) => s = e,
 			tabindex: -1
-		}, o);
-		return createComponent(Table, o);
+		}, o), createComponent(i, o);
 	} },
-	menus: (store) => [],
-	commands: (store) => ({
+	menus: (e) => [],
+	commands: (e) => ({
 		copy: () => {
-			const { start, end } = store.selected;
-			if (start.length == 0) return;
-			const [x1, x2] = [start[0], end[0]].sort((a, b) => a - b);
-			const [y1, y2] = [start[1], end[1]].sort((a, b) => a - b);
-			const cols = store.props.columns.slice(x1, x2 + 1);
-			const text = store.props.data.slice(y1, y2 + 1).map((row) => cols.map((col) => row[col.id])).map((row) => row.join("	")).join("\n");
-			navigator.clipboard.writeText(text);
+			let { start: t, end: n } = e.selected;
+			if (t.length == 0) return;
+			let [r, i] = [t[0], n[0]].sort((e, t) => e - t), [a, o] = [t[1], n[1]].sort((e, t) => e - t), s = e.props.columns.slice(r, i + 1), c = e.props.data.slice(a, o + 1).map((e) => s.map((t) => e[t.id])).map((e) => e.join("	")).join("\n");
+			navigator.clipboard.writeText(c);
 		},
 		paste: async () => {
-			const { start, end } = store.selected;
-			if (start.length == 0) return;
-			const arr2 = (await navigator.clipboard.readText()).split("\n").map((row) => row.split("	"));
-			const cols = store.props.columns.slice(start[0], start[0] + arr2[0].length);
-			const data = store.props.data.slice();
-			arr2.forEach((row, y) => {
-				row = Object.fromEntries(cols.map((col, x) => [col.id, row[x]]));
-				data[start[1] + y] = {
-					...data[start[1] + y],
-					...row
+			let { start: t, end: n } = e.selected;
+			if (t.length == 0) return;
+			let r = (await navigator.clipboard.readText()).split("\n").map((e) => e.split("	")), i = e.props.columns.slice(t[0], t[0] + r[0].length), a = e.props.data.slice();
+			r.forEach((e, n) => {
+				e = Object.fromEntries(i.map((t, n) => [t.id, e[n]])), a[t[1] + n] = {
+					...a[t[1] + n],
+					...e
 				};
-			});
-			store.selected.end = [start[0] + cols.length - 1, Math.min(start[1] + arr2.length - 1, ctx.props.data.length - 1)];
-			store.props.onDataChange?.(data);
+			}), e.selected.end = [t[0] + i.length - 1, Math.min(t[1] + r.length - 1, ctx.props.data.length - 1)], e.props.onDataChange?.(a);
 		}
 	})
 };

package/dist/plugins/DiffPlugin.js

@@ -6,62 +6,50 @@ import { isEqual, keyBy } from "es-toolkit";
 import { createLazyMemo } from "@solid-primitives/memo";
 import { v4 } from "uuid";
 import { diffArrays } from "diff";
-var DEL = Symbol("del");
-var NEW = Symbol("new");
+var DEL = Symbol("del"), NEW = Symbol("new");
 const DiffPlugin = {
 	priority: Infinity,
-	store: (store) => {
-		const data = store.rawProps.data || [];
-		data.forEach((row) => unwrap(row)[store.rawProps.rowKey] ??= v4());
-		return {
-			diffData: structuredClone(unwrap(data || [])),
-			diffDataKeyed: createLazyMemo(() => keyBy(store.diffData, (e) => e[store.props.rowKey]))
+	store: (e) => {
+		let r = e.rawProps.data || [];
+		return r.forEach((r) => unwrap(r)[e.rawProps.rowKey] ??= v4()), {
+			diffData: structuredClone(unwrap(r || [])),
+			diffDataKeyed: createLazyMemo(() => keyBy(e.diffData, (r) => r[e.props.rowKey]))
 		};
 	},
-	commands: (store) => ({ async diffCommit(data = store.rawProps.data || []) {
-		const { rowKey } = store.props || {};
-		data.forEach((row) => unwrap(row)[rowKey] ??= v4());
-		data = structuredClone(unwrap(data));
-		const added = [], removed = [], changed = [];
-		const keyed = keyBy(data, (e) => e[rowKey]);
-		for (const e of data) {
-			const old = store.diffDataKeyed()[e[rowKey]];
-			if (!old) added.push(e);
-			else if (!isEqual(e, old)) changed.push(e);
+	commands: (e) => ({ async diffCommit(r = e.rawProps.data || []) {
+		let { rowKey: a } = e.props || {};
+		r.forEach((e) => unwrap(e)[a] ??= v4()), r = structuredClone(unwrap(r));
+		let c = [], l = [], u = [], d = keyBy(r, (e) => e[a]);
+		for (let i of r) {
+			let r = e.diffDataKeyed()[i[a]];
+			r ? isEqual(i, r) || u.push(i) : c.push(i);
 		}
-		for (const e of store.diffData) !keyed[e[rowKey]] && removed.push(e);
-		await store.props.diff?.onCommit?.(data, {
-			added,
-			removed,
-			changed
-		});
-		added[NEW] = 0;
-		store.diffData = data;
+		for (let r of e.diffData) !d[r[a]] && l.push(r);
+		await e.props.diff?.onCommit?.(r, {
+			added: c,
+			removed: l,
+			changed: u
+		}), c[NEW] = 0, e.diffData = r;
 	} }),
 	rewriteProps: {
-		diff: ({ diff }) => ({
-			added: true,
-			removed: true,
-			changed: true,
-			...diff
+		diff: ({ diff: e }) => ({
+			added: !0,
+			removed: !0,
+			changed: !0,
+			...e
 		}),
-		data: ({ data }, { store }) => {
-			const { rowKey, diff } = store.props || {};
-			return diffArrays(store.diffData || [], data, { comparator: (a, b) => a[rowKey] == b[rowKey] }).flatMap((e) => e.added ? e.value.map((e$1) => (e$1[NEW] = 1, e$1)) : e.removed ? diff.removed ? e.value.map((e$1) => ({
-				...e$1,
+		data: ({ data: e }, { store: r }) => {
+			let { rowKey: i, diff: a } = r.props || {};
+			return diffArrays(r.diffData || [], e, { comparator: (e, r) => e[i] == r[i] }).flatMap((e) => e.added ? e.value.map((e) => (e[NEW] = 1, e)) : e.removed ? a.removed ? e.value.map((e) => ({
+				...e,
 				[DEL]: 1,
-				[store.internal]: 1
+				[r.internal]: 1
 			})) : [] : e.value);
 		},
-		Table: ({ Table }, { store }) => (o) => {
-			useTinykeys(() => store.table, { "Control+S": () => store.commands.diffCommit() });
-			o = combineProps({ tabindex: -1 }, o);
-			return createComponent(Table, o);
-		},
-		tdProps: ({ tdProps }, { store }) => (o) => combineProps(tdProps?.(o) || {}, { get class() {
-			const { diff } = store.props || {};
-			const id = unwrap(o.data)[store.props.rowKey];
-			return [o.data[NEW] ? diff?.added ? "bg-#dafaea" : "" : o.data[DEL] ? "bg-#ffe8e8" : o.data[store.internal] ? "" : diff.changed && o.data[o.col.id] != store.diffDataKeyed()[id][o.col.id] ? "bg-#dafaea" : ""].join(" ");
+		Table: ({ Table: i }, { store: o }) => (s) => (useTinykeys(() => o.table, { "Control+S": () => o.commands.diffCommit() }), s = combineProps({ tabindex: -1 }, s), createComponent(i, s)),
+		tdProps: ({ tdProps: e }, { store: r }) => (o) => combineProps(e?.(o) || {}, { get class() {
+			let { diff: e } = r.props || {}, a = unwrap(o.data)[r.props.rowKey];
+			return [o.data[NEW] ? e?.added ? "bg-#dafaea" : "" : o.data[DEL] ? "bg-#ffe8e8" : o.data[r.internal] ? "" : e.changed && o.data[o.col.id] != r.diffDataKeyed()[a][o.col.id] ? "bg-#dafaea" : ""].join(" ");
 		} })
 	}
 };

package/dist/plugins/DragPlugin.d.ts

@@ -0,0 +1,14 @@
+import { type Plugin } from "../index";
+declare module '../index' {
+    interface TableProps {
+        colDrag?: boolean;
+        rowDrag?: boolean;
+    }
+    interface TableColumn {
+    }
+    interface TableStore {
+    }
+    interface Commands {
+    }
+}
+export declare const DragPlugin: Plugin;

package/dist/plugins/DragPlugin.js

@@ -0,0 +1,47 @@
+import { useSort } from "../hooks/useSort.js";
+import { delay } from "es-toolkit";
+import { isMatch } from "es-toolkit/compat";
+const DragPlugin = {
+	rewriteProps: {
+		colDrag: ({ colDrag: e = !1 }) => e,
+		rowDrag: ({ rowDrag: e = !1 }) => e
+	},
+	onMount(r) {
+		let i = useSort(() => r.scroll_el, {
+			get enable() {
+				return r.props?.colDrag;
+			},
+			guideLine: { class: "col__guide-line" },
+			draggable: (e) => ((i, a) => e.tagName == "TH" && isMatch(r.selected, { start: [i, 0] }) && !r.props?.columns[i][r.internal] && r.thead.contains(e) && delay(300).then(() => !0))(+e.getAttribute("x"), +e.getAttribute("y")),
+			dragover: (e) => e.tagName == "THEAD",
+			children: (e) => [...i.drag.parentElement.children].filter((e) => !r.props?.columns[e.getAttribute("x")][r.internal]),
+			dragend: o
+		}), a = useSort(() => r.scroll_el, {
+			get enable() {
+				return r.props?.rowDrag;
+			},
+			guideLine: { class: "row__guide-line" },
+			draggable: (e) => ((i, a) => e.tagName == "TD" && isMatch(r.selected, { start: [0, a] }) && i == 0 && !r.props?.data[a][r.internal] && r.tbody.contains(e) && delay(300).then(() => !0))(+e.getAttribute("x"), +e.getAttribute("y")),
+			dragover: (e) => e.tagName == "TBODY",
+			children: (e) => [...a.over.children].filter((e) => !r.props.data[e.getAttribute("y")][r.internal]),
+			dragend: s
+		});
+		async function o() {
+			if (i.drag == i.rel) return;
+			let [e, t] = [r.props.columns, [...r.rawProps.columns || []]], n = ((e) => e[r.raw] ?? e)(e[i.drag.getAttribute("x")]), a = ((e) => e[r.raw] ?? e)(e[i.rel.getAttribute("x")]), o = t.indexOf(n), s = t.indexOf(a);
+			if (o < 0 || s < 0) return;
+			t[o].fixed = t[s].fixed, t.splice(s - (o > s ? 0 : 1) + (i.type == "before" ? 0 : 1), 0, t.splice(o, 1)[0]), r.props.onColumnsChange?.(t), await Promise.resolve();
+			let c = r.props.columns.findIndex((e) => e == n || e[r.raw] == n);
+			c < 0 || (r.selected.start[0] = r.selected.end[0] = c);
+		}
+		async function s() {
+			if (a.drag == a.rel) return;
+			let [e, t] = [r.props.data, [...r.rawProps.data || []]], n = ((e) => e[r.raw] ?? e)(e[a.drag.getAttribute("y")]), i = ((e) => e[r.raw] ?? e)(e[a.rel.getAttribute("y")]), o = t.indexOf(n), s = t.indexOf(i);
+			if (o < 0 || s < 0) return;
+			t.splice(s - (o > s ? 0 : 1) + (a.type == "before" ? 0 : 1), 0, t.splice(o, 1)[0]), r.props.onDataChange?.(t), await Promise.resolve();
+			let c = r.props.data.findIndex((e) => e == n || e[r.raw] == n);
+			c < 0 || (r.selected.start[1] = r.selected.end[1] = c);
+		}
+	}
+};
+export { DragPlugin };