intable 0.0.38 → 0.0.40

package/README.md

@@ -1,10 +1,97 @@
+# Intable
+
+> 🎯 一个组件搞定所有表格场景 — SolidJS / React / Vue 框架通用
+
+[![npm](https://img.shields.io/npm/v/intable)](https://www.npmjs.com/package/intable)
+[![license](https://img.shields.io/github/license/huodoushigemi/intable)](LICENSE)
+[![stars](https://img.shields.io/github/stars/huodoushigemi/intable)](https://github.com/huodoushigemi/intable/stargazers)
+
 ---
-name: intable
-description: A high-performance, plugin-based Excel-like table component for SolidJS with virtual scroll, cell editing, validation, copy/paste, row grouping, tree data, column/row drag, merge cells, diff view, and multi-framework support (Vue, React).
+
+## [🚀 在线体验 Demo](https://huodoushigemi.github.io/intable)
+
 ---
 
-# intable
+## 🎯 核心功能一览
 
-## [🚀 在线体验 Demo](https://huodoushigemi.github.io/intable)
+- ✅ **虚拟滚动** — 百万行数据流畅运行
+- ✅ **单元格编辑** — text / number / date / select / checkbox / range / color
+- ✅ **列筛选排序** — 内置 FilterPlugin / SortPlugin
+- ✅ **Excel 复制粘贴** — 多单元格选区 TSV 兼容
+- ✅ **撤销重做** — Ctrl+Z / Ctrl+Y
+- ✅ **Excel 导入导出** — 一键导出 xlsx
+- ✅ **数据校验** — Zod schema 集成
+- ✅ **变更比对** — DiffPlugin 高亮追踪
+
+---
+
+## 🤖 AI 时代的工作流
+
+**安装 Skill：**
+
+```bash
+npx skills add huodoushigemi/intable -y --skill intable
+```
+
+**效果：** 描述需求（如"加一个大数据量的可编辑表格"），Copilot 自动给出正确代码。
+
+---
+
+📈 真实项目对比，以「用户管理」模块为例：
+
+| 指标 | 使用前 | 使用后 |
+|------|--------|--------|
+| 代码行数 | 500+ | **200-** |
+| AI 消耗 | 100% | **<70%** |
+
+
+---
+
+## 🚀 快速开始
+
+```bash
+# SolidJS
+pnpm add intable
+
+# React
+pnpm add @intable/react
+
+# Vue 3
+pnpm add @intable/vue
+```
+
+**创建一个表格，只需几行代码：**
+
+```tsx
+import Intable from 'intable'
+// import Intable from '@intable/react'
+// import Intable from '@intable/vue'
+
+<Intable
+  columns={[
+    { id: 'name', name: '姓名', width: 120 },
+    { id: 'age',  name: '年龄', width: 80  },
+  ]}
+  data={[
+    { id: 1, name: 'Alice', age: 28 },
+    { id: 2, name: 'Bob',   age: 32 },
+  ]}
+  border
+/>
+```
+
+---
+
+## 🌟 为什么选择 Intable
+
+1. **插件化架构** — 责任链 `rewriteProps` 管道，插件完全可组合、可替换
+2. **框架通用** — SolidJS / React / Vue 共享同一套插件 API
+3. **性能优先** — 虚拟滚动，行/列双向渲染，百万行不卡顿
+4. **AI 集成** — Copilot Skill 让 AI 写出正确用法
+5. **渐进增强** — 从简单表格到复杂企业级需求，平滑升级
+
+---
+
+## License
 
-## [📃 文档 Docs](https://github.com/huodoushigemi/intable/blob/main/.github/instructions/intable-scenarios.instructions.md)
+MIT

package/dist/index.d.ts

@@ -21,6 +21,7 @@ import './plugins/AggregatePlugin';
 import './plugins/AutoFillPlugin';
 import './plugins/FilterPlugin';
 import './plugins/TooltipPlugin';
+import './plugins/KeyEachPlugin';
 export declare const Ctx: import("solid-js").Context<{
     props: TableProps2;
     store: TableStore;

package/dist/index.js

@@ -23,6 +23,7 @@ import { AutoFillPlugin } from "./plugins/AutoFillPlugin.js";
 import { FilterPlugin } from "./plugins/FilterPlugin.js";
 import { ImportExportPlugin } from "./plugins/ImportExportPlugin.js";
 import { TooltipPlugin } from "./plugins/TooltipPlugin.js";
+import { KeyEachPlugin } from "./plugins/KeyEachPlugin.js";
 import loading_bold_default from "./loading-bold.js";
 import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
 import { $PROXY, For, batch, createComputed, createContext, createEffect, createMemo, createRenderEffect, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, onMount, runWithOwner, untrack, useContext } from "solid-js";
@@ -426,6 +427,7 @@ const defaultsPlugins = [
 	AggregatePlugin,
 	AutoFillPlugin,
 	ImportExportPlugin,
-	TooltipPlugin
+	TooltipPlugin,
+	KeyEachPlugin
 ];
 export { Ctx, Intable, src_default as default, defaultsPlugins };

package/dist/plugins/EditablePlugin.js

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

package/dist/plugins/ExpandPlugin.js

@@ -32,7 +32,7 @@ const ExpandPlugin = {
 				}, h)), effect(() => setAttribute(m, "colspan", h.props.columns?.length)), m;
 			})();
 		} })) : m,
-		Td: ({ Td: e }, { store: m }) => (h) => (h = combineProps(h, { onClick: () => h.col.id == m.expandCol.id && m.commands.expand.toggle(h.data) }), createComponent(e, h)),
+		Td: ({ Td: e }, { store: m }) => m.props.expand?.enable ? (h) => (h = combineProps(h, { onClick: () => h.col.id == m.expandCol.id && m.commands.expand.toggle(h.data) }), createComponent(e, h)) : e,
 		data: ({ data: e }, { store: m }) => m.commands.expand.value.length ? e?.flatMap((e) => m.commands.expand.has(e) ? [e, { [m.expandCol.id]: e }] : e) : e
 	}
 };

package/dist/plugins/KeyEachPlugin.d.ts

@@ -0,0 +1,15 @@
+import type { Plugin } from '..';
+declare module '..' {
+    interface TableProps {
+        useRowKey?: boolean;
+        useColKey?: boolean;
+    }
+    interface TableColumn {
+    }
+    interface TableStore {
+        [COLUMNS]: TableColumn[];
+    }
+}
+declare const COLUMNS: unique symbol;
+export declare const KeyEachPlugin: Plugin;
+export {};

package/dist/plugins/KeyEachPlugin.js

@@ -0,0 +1,29 @@
+import { change2 } from "../utils.js";
+import { createComponent } from "solid-js/web";
+import { For, createMemo, untrack } from "solid-js";
+import { keyBy } from "es-toolkit";
+var COLUMNS = Symbol("columns");
+const KeyEachPlugin = {
+	name: "keyEach",
+	priority: -Infinity,
+	rewriteProps: {
+		columns: ({ columns: r }, { store: i }) => {
+			if (!i.props.useColKey) return r;
+			let a = untrack(() => keyBy(i[COLUMNS] ?? [], (e) => e.id));
+			return i[COLUMNS] = r.map((r) => a[r.id] ? change2(a[r.id], r) : { ...r }), i[COLUMNS];
+		},
+		EachRows: ({ EachRows: e }, { store: o }) => o.props.useRowKey ? (e) => {
+			let s = createMemo(() => ({
+				list: e.each.map((e) => e[o.props.rowKey]),
+				map: keyBy(e.each, (e) => e[o.props.rowKey])
+			}));
+			return createComponent(For, {
+				get each() {
+					return s().list;
+				},
+				children: (r, i) => e.children(() => s().map[r], i)
+			});
+		} : e
+	}
+};
+export { KeyEachPlugin };

package/dist/plugins/RowGroupPlugin.js

@@ -49,7 +49,7 @@ const RowGroupPlugin = {
 			}
 			return d;
 		},
-		Td: ({ Td: d }, { store: _ }) => (v) => {
+		Td: ({ Td: d }, { store: _ }) => _.props?.rowGroup?.fields ? (v) => {
 			if (!v.data?.[GROUP]) return d(v);
 			let { props: y } = useContext(Ctx), b = createMemo(() => _.rowGroup.isExpand(v.data));
 			return createComponent(d, mergeProps(v, { get children() {
@@ -64,7 +64,7 @@ const RowGroupPlugin = {
 					}), null), insert(l, () => v.data[GROUP].value, null), effect((e) => style(l, `padding-left: ${(v.data[GROUP].path.length - 1) * 16}px`, e)), l;
 				})() : v.children;
 			} }));
-		}
+		} : d
 	}
 };
 var GROUP = Symbol("row-group"), expandData = (e, l, u = []) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intable",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "license": "MIT",
   "type": "module",
   "files": [