intable 0.0.63 → 0.0.64

package/dist/plugins/OrmPlugin.js

@@ -0,0 +1,161 @@
+import { toArr } from "../utils.js";
+import { Tags } from "./RenderPlugin/components.js";
+import { editors } from "./EditablePlugin.js";
+import { renders } from "./RenderPlugin/index.js";
+import { Dialog } from "../components/Dialog.js";
+import { Intable } from "../index.js";
+import { createComponent, delegateEvents, insert, memo, mergeProps, template } from "solid-js/web";
+import { createComputed, createResource, createRoot, createSignal, mergeProps as mergeProps$1, splitProps, untrack } from "solid-js";
+import { createMutable } from "solid-js/store";
+import { get, set } from "es-toolkit/compat";
+var _tmpl$ = /* @__PURE__ */ template("<div class><div class=\"flex items-center p-3\"><div class=\"flex items-center gap-2\"><span class=\"text-sm text-gray-500\">已选择 <!> 项</span><button type=button class=\"text-xs text-gray-400 hover:text-red-500 transition-colors\">清空</button></div></div><div class=\"border-t border-gray/20 p-3\">");
+const OrmPlugin = {
+	name: "orm",
+	priority: -Infinity,
+	store: (e) => ({}),
+	rewriteProps: { Table: ({ Table: e }, { store: p }) => (m) => {
+		let h = createMutable({});
+		return createComputed(() => {
+			let e = p.props.columns?.filter((e) => (e.type == "fk" || e.type == "fks") && e.foreignField);
+			if (e.length) for (let m of e) for (let e of p.props.data) {
+				if (m.foreignField in e) continue;
+				Object.defineProperty(e, m.foreignField, {
+					get: () => get(h, [m.id, e[p.props.rowKey]]),
+					set: (g) => untrack(() => set(h, [m.id, e[p.props.rowKey]], g)),
+					enumerable: !0,
+					configurable: !0
+				});
+			}
+		}), createComponent(e, m);
+	} }
+};
+var createDialogEditor = (e, p) => (m) => createRoot((h) => {
+	let { eventKey: _, value: v, col: y, ok: b, cancel: x, props: S, onChange: C } = m, w = p?.out ?? ((e) => e), [E, D] = createSignal(_ || v), O = createComponent(e, mergeProps({
+		get value() {
+			return E();
+		},
+		onChange: (e) => (D(w(e)), C?.(E()), b())
+	}, p, S, { aaa: m }));
+	return {
+		el: createComponent(Dialog, {
+			get title() {
+				return `选择 ${y.name}`;
+			},
+			onCancel: x,
+			onOk: b,
+			class: "min-w-[40vw]",
+			children: O
+		}),
+		getValue: E,
+		destroy: h,
+		dialog: !0
+	};
+}), ObjTags = (m) => {
+	let h;
+	[m, h] = splitProps(m, [
+		"col",
+		"data",
+		"value",
+		"onChange",
+		"multiple"
+	]);
+	let g = () => m.col.table?.columns?.[0].id, _ = () => m.col.table?.rowKey ?? "id";
+	return createComponent(Tags, mergeProps({
+		get value() {
+			return toArr(m.value).map((e) => ({
+				label: e[g()],
+				value: e[_()]
+			}));
+		},
+		onChange: (e) => m.onChange?.(m.multiple ? e : e[0])
+	}, h));
+}, FKTags = (m) => {
+	let h;
+	[m, h] = splitProps(m, [
+		"col",
+		"data",
+		"value",
+		"onChange",
+		"multiple"
+	]);
+	let g = () => m.col.table?.columns?.[0].id, _ = () => m.col.table?.rowKey ?? "id", [v] = createResource(() => m.value, () => fetchDataByKeys(toArr(m.value).map((e) => e && typeof e != "object" ? e : e[_()]), m.col.table), { initialValue: [] });
+	return createComputed(() => {
+		v(), untrack(() => set(m.data, m.col.foreignField, m.multiple ? v() : v()[0]));
+	}), createComponent(Tags, mergeProps({
+		get value() {
+			return v().map((e) => ({
+				label: e[g()],
+				value: e[_()]
+			}));
+		},
+		onChange: (e) => m.onChange?.(m.multiple ? e : e[0])
+	}, h));
+}, ObjEditor = createDialogEditor((p) => {
+	let m = mergeProps$1(() => p.aaa.col), h = () => m.table?.rowKey ?? "id", g = () => m.type == "objs" || m.type == "fks", v = () => m.type == "fk" || m.type == "fks", x = () => v() ? toArr(p.value).map((e) => ({ [h()]: e })) : toArr(p.value), S = (e) => p.onChange(v() ? g() ? e.map((e) => e[h()]) : e?.[h()] ?? null : e);
+	return (() => {
+		var e = _tmpl$(), h = e.firstChild, C = h.firstChild, w = C.firstChild, T = w.firstChild, E = T.nextSibling;
+		E.nextSibling;
+		var D = w.nextSibling, O = h.nextSibling;
+		return insert(w, () => x().length, E), D.$$click = () => p.onChange?.(g() ? [] : null), insert(h, (() => {
+			var e = memo(() => !!v());
+			return () => e() ? createComponent(FKTags, mergeProps(p, {
+				class: "ml-2",
+				col: m,
+				get value() {
+					return x();
+				},
+				onChange: S,
+				get multiple() {
+					return g();
+				}
+			})) : createComponent(ObjTags, mergeProps(p, {
+				class: "ml-2",
+				col: m,
+				get value() {
+					return x();
+				},
+				onChange: S,
+				get multiple() {
+					return g();
+				}
+			}));
+		})(), null), insert(O, createComponent(Intable, mergeProps(() => p.aaa.col.table, { get rowSelection() {
+			return {
+				...p.aaa.col.table?.rowSelection,
+				enable: !0,
+				multiple: g(),
+				value: p.value,
+				onChange: S
+			};
+		} }))), e;
+	})();
+});
+editors.obj = ObjEditor, editors.objs = ObjEditor, editors.fk = ObjEditor, editors.fks = ObjEditor, renders.fk = (e) => createComponent(FKTags, mergeProps(e, { disabled: !0 })), renders.fks = (e) => createComponent(FKTags, mergeProps(e, {
+	disabled: !0,
+	multiple: !0
+})), renders.obj = (e) => createComponent(ObjTags, mergeProps(e, { disabled: !0 })), renders.objs = (e) => createComponent(ObjTags, mergeProps(e, {
+	disabled: !0,
+	multiple: !0
+}));
+var fetchDataByKeys = (() => {
+	let e = /* @__PURE__ */ new WeakMap(), p = (p) => {
+		let m = e.get(p.request) || e.set(p.request, {}).get(p.request);
+		return m[p.rowKey] ??= [{}, {}];
+	};
+	return async (e, m) => {
+		let [h, g] = p(m), _ = e.filter((e) => !h[e]);
+		if (_.length) {
+			let e = _.filter((e) => !g[e]), p = m.request?.({ filters: [{
+				field: m.rowKey,
+				op: "in",
+				value: e
+			}] });
+			e.forEach((e, m) => {
+				g[e] = p.then((p) => h[e] = p.data[m]).finally(() => delete g[e]);
+			}), await Promise.all(_.map((e) => g[e]));
+		}
+		return e.map((e) => h[e]);
+	};
+})();
+delegateEvents(["click"]);
+export { OrmPlugin };

package/dist/plugins/RenderPlugin/components.js

@@ -20,7 +20,10 @@ const Checkbox = (e) => {
 	})();
 }, Files = (e) => {
 	let x;
-	return [e, x] = splitProps(e, []), createComponent(Tags, mergeProps(x, { color: "" }));
+	return [e, x] = splitProps(e, []), createComponent(Tags, mergeProps(x, {
+		color: "",
+		addable: !0
+	}));
 }, Tags = (x) => {
 	let S;
 	[x, S] = splitProps(x, [
@@ -29,7 +32,8 @@ const Checkbox = (e) => {
 		"disabled",
 		"onChange",
 		"onAdd",
-		"color"
+		"color",
+		"addable"
 	]), S = combineProps({ class: "in-tags flex flex-wrap items-center gap-2 h-full" }, S);
 	let w = (e) => Array.isArray(e) ? e : e == null ? [] : [e];
 	return (() => {
@@ -54,7 +58,7 @@ const Checkbox = (e) => {
 				}
 			})
 		}), null), insert(T, (() => {
-			var S = memo(() => !x.disabled);
+			var S = memo(() => !!(!x.disabled && x.addable));
 			return () => S() && createComponent(Tag, {
 				disabled: !0,
 				get onClick() {

package/dist/plugins/RenderPlugin/index.d.ts

@@ -22,13 +22,4 @@ declare module '../../index' {
 export type Render = (props: TDProps) => JSX.Element | any;
 export declare const RenderPlugin: Plugin;
 export { text2colorMap } from './components';
-export declare const renders: {
-    text: Render;
-    switch: Render;
-    checkbox: Render;
-    file: Render;
-    rate: Render;
-    progress: Render;
-    obj: Render;
-    objs: Render;
-};
+export declare const renders: Record<string, Render>;

package/dist/plugins/RenderPlugin/index.js

@@ -9,19 +9,19 @@ const RenderPlugin = {
 	name: "render",
 	priority: -Infinity,
 	store: () => ({ renders: { ...renders } }),
-	rewriteProps: { Td: ({ Td: x }, { store: S }) => (C) => (S.props.cpu && (C = mergeProps$2(() => ({}), C)), createComponent(x, mergeProps$2(C, { children: createMemo(() => {
-		let x = ((e) => typeof e == "string" ? S.renders[e] : e)(C.col.render ?? (C.col.enum && text) ?? C.col.type) ?? text;
-		return x == text ? text(C) : renderComponent(x, C, S);
+	rewriteProps: { Td: ({ Td: _ }, { store: v }) => (y) => (v.props.cpu && (y = mergeProps$2(() => ({}), y)), createComponent(_, mergeProps$2(y, { children: createMemo(() => {
+		let _ = ((e) => typeof e == "string" ? v.renders[e] : e)(y.col.render ?? (y.col.enum && text) ?? y.col.type) ?? text;
+		return _ == text ? text(y) : renderComponent(_, y, v);
 	}) }))) }
 };
 var text = (e) => e.col.enum ? createComponent(Tags, {
 	disabled: !0,
 	get value() {
-		return toArr(e.value).map((x) => getOpt(e.col.enum, x) ?? x);
+		return toArr(e.value).map((_) => getOpt(e.col.enum, _) ?? _);
 	}
 }) : e.value, checkbox = (e) => (() => {
-	var x = _tmpl$();
-	return insert(x, createComponent(Checkbox, {
+	var _ = _tmpl$();
+	return insert(_, createComponent(Checkbox, {
 		class: "",
 		get value() {
 			return e.value;
@@ -29,54 +29,41 @@ var text = (e) => e.col.enum ? createComponent(Tags, {
 		get onChange() {
 			return e.onChange;
 		}
-	})), x;
-})(), file = (e) => createComponent(Files, {
-	get value() {
-		return e.value;
-	},
-	get onChange() {
-		return e.onChange;
-	},
-	disabled: !0
-}), rate = (e) => createComponent(Rate, {
-	get value() {
-		return e.value;
-	},
-	get max() {
-		return e.col.max ?? 5;
-	},
-	get onChange() {
-		return e.onChange;
-	},
-	disabled: !0
-}), progress = (e) => createComponent(Progress, {
-	get value() {
-		return e.value;
-	},
-	get onChange() {
-		return e.onChange;
-	}
-}), obj = (e) => {
-	let x = () => e.col.table?.columns?.[0].id, S = () => e.col.table?.rowKey ?? "id";
-	return createComponent(Tags, {
-		disabled: !0,
-		get value() {
-			return toArr(e.value).map((e) => ({
-				label: e[x()],
-				value: e[S()]
-			}));
-		}
-	});
-};
+	})), _;
+})();
 const renders = {
 	text,
 	switch: checkbox,
 	checkbox,
-	file,
-	rate,
-	progress,
-	obj,
-	objs: obj
+	file: (e) => createComponent(Files, {
+		get value() {
+			return e.value;
+		},
+		get onChange() {
+			return e.onChange;
+		},
+		disabled: !0
+	}),
+	rate: (e) => createComponent(Rate, {
+		get value() {
+			return e.value;
+		},
+		get max() {
+			return e.col.max ?? 5;
+		},
+		get onChange() {
+			return e.onChange;
+		},
+		disabled: !0
+	}),
+	progress: (e) => createComponent(Progress, {
+		get value() {
+			return e.value;
+		},
+		get onChange() {
+			return e.onChange;
+		}
+	})
 };
 for (let e in renders) renders[e] = solidComponent(renders[e]);
 export { RenderPlugin, renders, text2colorMap };

package/dist/plugins/ResizePlugin.js

@@ -1,24 +1,22 @@
 import { usePointerDrag } from "../hooks/index.js";
-import { unFn } from "../utils.js";
+import { deepChange2, unFn } from "../utils.js";
 import { mergeProps as mergeProps$2 } from "../mergeProps2.js";
 import { Ctx } from "../index.js";
 import { className, createComponent, delegateEvents, effect, memo, template, use } from "solid-js/web";
 import { batch, untrack, useContext } from "solid-js";
-import { reconcile } from "solid-js/store";
-import { clamp } from "es-toolkit";
+import { clamp, toMerged } from "es-toolkit";
 import { createEventListener } from "@solid-primitives/event-listener";
-import { defaultsDeep } from "es-toolkit/compat";
 var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW = Symbol("row_size"), findParentEl = (e, m) => {
 	for (; e = e.parentElement;) if (m(e)) return e;
 }, ColHandle = (m) => {
-	let { props: h, store: v } = useContext(Ctx), y;
-	return usePointerDrag(() => y, { start(e, g, _) {
+	let { props: h, store: g } = useContext(Ctx), y;
+	return usePointerDrag(() => y, { start(e, _, v) {
 		e.stopPropagation();
 		let b = m.x, { min: x, max: S } = h.resizable.col, C = findParentEl(y, (e) => e.tagName === "TH"), w = C.offsetWidth;
-		g((e, { ox: h }) => v[COL][m.x] = clamp(w + h, x, S)), _(() => {
-			let e = h.columns[b], m = [...v.rawProps.columns || []], g = m.findIndex((m) => m[v.ID] === e[v.ID]);
-			g > -1 && (m[g] = {
-				...m[g],
+		_((e, { ox: h }) => g[COL][m.x] = clamp(w + h, x, S)), v(() => {
+			let e = h.columns[b], m = [...g.rawProps.columns || []], _ = m.findIndex((m) => m[g.ID] === e[g.ID]);
+			_ > -1 && (m[_] = {
+				...m[_],
 				width: C.offsetWidth
 			}, h.onColumnsChange?.(m)), e.onWidthChange?.(C.offsetWidth);
 		});
@@ -29,13 +27,13 @@ var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW =
 		return typeof g == "function" ? use(g, e) : y = e, effect(() => className(e, `in-cell__resize-handle absolute top-0 right-0 flex justify-center w-10px! ${m.x == h.columns.length - 1 ? "justify-end!" : "w-10px! translate-x-1/2"} after:w-1 cursor-w-resize z-1`)), e;
 	})();
 }, RowHandle = (m) => {
-	let { props: h, store: v } = useContext(Ctx), y;
-	return usePointerDrag(() => y, { start(e, g, _) {
+	let { props: h, store: g } = useContext(Ctx), y;
+	return usePointerDrag(() => y, { start(e, _, v) {
 		e.stopPropagation();
 		let b = m.y, { min: x, max: S } = h.resizable.row, C = findParentEl(y, (e) => e.tagName === "TD").offsetHeight;
-		g((e, { oy: h }) => v[ROW][m.y] = clamp(C + h, x, S)), _(() => {
+		_((e, { oy: h }) => g[ROW][m.y] = clamp(C + h, x, S)), v(() => {
 			let e = h.data[b];
-			[...v.rawProps.data || []].findIndex((m) => m[v.ID] === e[v.ID]);
+			[...g.rawProps.data || []].findIndex((m) => m[g.ID] === e[g.ID]);
 		});
 	} }), createEventListener(() => y, "dblclick", () => m.data[COL] = void 0), (() => {
 		var e = _tmpl$(), g = y;
@@ -50,7 +48,7 @@ const ResizePlugin = {
 		[ROW]: []
 	}),
 	rewriteProps: {
-		resizable: ({ resizable: e }) => defaultsDeep(e, {
+		resizable: ({ resizable: e }) => toMerged(e ?? {}, {
 			col: {
 				enable: !0,
 				min: 45,
@@ -62,16 +60,16 @@ const ResizePlugin = {
 				max: 400
 			}
 		}),
-		columns: ({ columns: e }, { store: m }) => (e = e.map((e, h) => ({
+		columns: ({ columns: e }, { store: h }) => (e = e.map((e, m) => ({
 			...e,
-			[m.ID]: e[m.ID] ??= Symbol()
+			[h.ID]: e[h.ID] ??= Symbol()
 		})), e = e.map((e) => e.resizable === void 0 ? {
 			...e,
-			resizable: m.props?.resizable?.col.enable
-		} : e), e = e.map((e, h) => m[COL][h] ? {
+			resizable: h.props?.resizable?.col?.enable
+		} : e), e = e.map((e, m) => h[COL][m] ? {
 			...e,
-			width: m[COL][h]
-		} : e), untrack(() => batch(() => reconcile(e, { key: m.ID })(m.__resize__cols ??= [])))),
+			width: h[COL][m]
+		} : e), untrack(() => batch(() => deepChange2(h.__resize__cols ??= [], e)))),
 		Th: ({ Th: e }, { store: m }) => (m) => createComponent(e, mergeProps$2(m, {
 			get class() {
 				return `relative ${m.class}`;
@@ -80,15 +78,15 @@ const ResizePlugin = {
 				return [m.children, memo(() => memo(() => !!m.col.resizable)() && createComponent(ColHandle, m))];
 			}
 		})),
-		Td: ({ Td: e }, { store: m }) => m.props?.resizable?.row.enable ? (g) => createComponent(e, mergeProps$2(g, {
+		Td: ({ Td: e }, { store: m }) => m.props?.resizable?.row?.enable ? (h) => createComponent(e, mergeProps$2(h, {
 			get class() {
-				return `relative ${g.class}`;
+				return `relative ${h.class}`;
 			},
 			get children() {
-				return [g.children, memo(() => memo(() => !!(g.x == 0 && m.props?.resizable?.row.enable))() && createComponent(RowHandle, g))];
+				return [h.children, memo(() => memo(() => !!(h.x == 0 && m.props?.resizable?.row?.enable))() && createComponent(RowHandle, h))];
 			}
 		})) : e,
-		cellStyle: ({ cellStyle: e }, { store: h }) => (g) => `${unFn(e, g)};` + (h[ROW][g.y] ? `height: ${h[ROW][g.y]}px` : "")
+		cellStyle: ({ cellStyle: e }, { store: m }) => (g) => `${unFn(e, g)};` + (m[ROW][g.y] ? `height: ${m[ROW][g.y]}px` : "")
 	}
 };
 delegateEvents(["click"]);

package/dist/plugins/TreePlugin.d.ts

@@ -5,6 +5,10 @@ declare module '../index' {
         tree?: {
             /** Field name that holds children rows. Default: `'children'`. */
             children?: string;
+            /** Indentation width per tree level in px. Default: `16`. */
+            indent?: number;
+            /** Show vertical indent guide lines. Default: `false`. */
+            indentLine?: boolean;
         };
     }
     interface TableStore {

package/dist/plugins/TreePlugin.js

@@ -1,9 +1,9 @@
 import { mergeProps as mergeProps$1 } from "../mergeProps2.js";
 import { useSelector } from "../hooks/useSelector.js";
 import chevron_right_default from "../chevron-right.js";
-import { createComponent, effect, insert, memo, style, template } from "solid-js/web";
+import { createComponent, effect, insert, memo, setStyleProperty, style, template } from "solid-js/web";
 import { createLazyMemo } from "@solid-primitives/memo";
-var _tmpl$ = /* @__PURE__ */ template("<div class=\"flex items-center\">"), _tmpl$2 = /* @__PURE__ */ template("<span style=display:inline-block;width:16px;flex-shrink:0;margin-right:4px>");
+var _tmpl$ = /* @__PURE__ */ template("<span class=in-tree-indent-line>"), _tmpl$2 = /* @__PURE__ */ template("<div class=\"flex items-center\">"), _tmpl$3 = /* @__PURE__ */ template("<span>");
 function flattenTree(e, t, n, r, i = 0, a = null, o = [], s = /* @__PURE__ */ new Map()) {
 	for (let c of e || []) {
 		let e = c[n], l = c[t], u = Array.isArray(l) && l.length > 0;
@@ -19,8 +19,8 @@ function flattenTree(e, t, n, r, i = 0, a = null, o = [], s = /* @__PURE__ */ ne
 		meta: s
 	};
 }
-const TreePlugin = (c) => {
-	let p = createLazyMemo(() => c.props.columns?.findIndex((e) => !e[c.internal]) ?? -1);
+const TreePlugin = (l) => {
+	let h = createLazyMemo(() => l.props.columns?.findIndex((e) => !e[l.internal]) ?? -1);
 	return {
 		name: "tree",
 		store: (e) => ({
@@ -30,6 +30,8 @@ const TreePlugin = (c) => {
 		rewriteProps: {
 			tree: ({ tree: e }) => ({
 				children: "children",
+				indent: 16,
+				indentLine: !1,
 				...e
 			}),
 			data: ({ data: e }, { store: t }) => {
@@ -37,28 +39,35 @@ const TreePlugin = (c) => {
 				let n = t.props.tree.children || "children", r = t.props.rowKey, { flat: i, meta: a } = flattenTree(e, n, r, (e) => t.commands.tree.has(e));
 				return t._treeMeta = a, t._haschildren = Object.values(Object.fromEntries(a)).some((e) => e.hasChildren), i;
 			},
-			Td: ({ Td: t }, { store: c }) => c._haschildren ? (l) => {
-				let f = () => c.props.rowKey, m = () => c._treeMeta?.get(l.data?.[f()]);
-				return createComponent(t, mergeProps$1(l, {
-					onDblClick: (e) => {
-						l.onDblClick?.(e), l.x == p() && m()?.hasChildren && c.commands.tree.toggle(l.data);
-					},
+			Td: ({ Td: t }, { store: l }) => l._haschildren ? (u) => {
+				let m = () => l.props.rowKey, g = () => l._treeMeta?.get(u.data?.[m()]), _ = () => l.props.tree?.indent ?? 16, v = () => l.props.tree?.indentLine, y = (e) => {
+					u.onDblClick?.(e), u.x == h() && g()?.hasChildren && l.commands.tree.toggle(u.data);
+				}, b = (e) => !v() || e === 0 ? null : Array.from({ length: e }, (e, t) => (() => {
+					var e = _tmpl$();
+					return effect((n) => setStyleProperty(e, "left", `${t * _() + _() / 2 + 10}px`)), e;
+				})());
+				return createComponent(t, mergeProps$1(u, {
+					onDblClick: y,
+					class: "relative",
 					get children() {
-						return memo(() => !!(c._haschildren && l.x === p()))() ? (() => {
-							var e = _tmpl$();
+						return memo(() => !!(l._haschildren && u.x === h()))() ? [memo(() => b(g()?.depth ?? 0)), (() => {
+							var e = _tmpl$2();
 							return insert(e, (() => {
-								var e = memo(() => !!m()?.hasChildren);
+								var e = memo(() => !!g()?.hasChildren);
 								return () => e() ? createComponent(chevron_right_default, {
 									class: "icon-clickable mr-1",
 									get style() {
-										return `transform: rotate(${c.commands.tree.has(l.data) ? 90 : 0}deg); opacity: .6; flex-shrink: 0; transition: transform .15s`;
+										return `transform: rotate(${l.commands.tree.has(u.data) ? 90 : 0}deg); opacity: .6; flex-shrink: 0; transition: transform .15s`;
 									},
 									onClick: (e) => {
-										e.stopPropagation(), c.commands.tree.toggle(l.data);
+										e.stopPropagation(), l.commands.tree.toggle(u.data);
 									}
-								}) : _tmpl$2();
-							})(), null), insert(e, () => l.children, null), effect((t) => style(e, `padding-left: ${m()?.depth * 16}px`, t)), e;
-						})() : l.children;
+								}) : (() => {
+									var e = _tmpl$3();
+									return effect((t) => style(e, `display: inline-block; width: ${_()}px; flex-shrink: 0; margin-right: 4px`, t)), e;
+								})();
+							})(), null), insert(e, () => u.children, null), effect((t) => style(e, `padding-left: ${g()?.depth * _()}px`, t)), e;
+						})()] : u.children;
 					}
 				}));
 			} : t

package/dist/plugins/ValidatorPlugin.js

@@ -1,79 +1,94 @@
 import { isEmpty } from "../utils.js";
 import { mergeProps as mergeProps$1 } from "../mergeProps2.js";
-import { createComponent, insert, memo, template } from "solid-js/web";
-var _tmpl$ = /* @__PURE__ */ template("<div class=cell-validation-error>"), _tmpl$2 = /* @__PURE__ */ template("<span class=\"mr-1 c-red/75\">*");
+import { createComponent, insert, memo, mergeProps, template, use } from "solid-js/web";
+import { delay } from "es-toolkit";
+var _tmpl$ = /* @__PURE__ */ template("<input class=hidden placeholder=\"Intable 内部隐藏校验输入框\">"), _tmpl$2 = /* @__PURE__ */ template("<div class=cell-validation-error>"), _tmpl$3 = /* @__PURE__ */ template("<span class=\"mr-1 c-red/75\">*");
 const ValidatorPlugin = {
 	name: "validator",
-	store: (t) => ({
+	store: (o) => ({
 		cellValidationErrors: {},
-		validateCell: async (n, r, i, a) => {
-			if (r[t.internal] || i[t.internal]) return;
-			let o = [
+		validateCell: async (s, c, l, u) => {
+			if (c[o.internal] || l[o.internal]) return;
+			let d = [
 				() => {
-					if (i.required && isEmpty(n)) throw Error("Required");
+					if (l.required && isEmpty(s)) throw Error("Required");
 				},
-				i.validator,
-				t.props.validator
-			], s = r[t.props.rowKey];
-			for (let e of o) {
+				l.validator,
+				o.props.validator
+			], f = c[o.props.rowKey];
+			for (let e of d) {
 				if (!e) continue;
 				try {
-					await e(n, r, i);
+					await e(s, c, l);
 				} catch (e) {
-					let n = e.message || "Error";
-					throw t.cellValidationErrors[s] ??= {}, t.cellValidationErrors[s][i.id] = n, a && t.scrollToCell?.(i, r), Error(n);
+					let s = e.message || "Error";
+					throw o.cellValidationErrors[f] ??= {}, o.cellValidationErrors[f][l.id] = s, u && o.scrollToCell?.(l, c), Error(s);
 				}
 			}
-			t.cellValidationErrors[s] ??= {}, t.cellValidationErrors[s][i.id] = null;
+			o.cellValidationErrors[f] ??= {}, o.cellValidationErrors[f][l.id] = null;
 		},
-		validateRow: async (e, n) => {
-			let r = t.props.columns, i = r.map((n) => t.validateCell(e[n.id], e, n)), a = await Promise.all(i.map((e) => e.catch((e) => e))), o = a.map((e, t) => e instanceof Error ? [r[t].id, e] : null).filter((e) => e);
-			if (o.length) {
-				if (n) {
-					let n = r[a.findIndex((e) => e instanceof Error)];
-					t.scrollToCell?.(n, e);
+		validateRow: async (e, s) => {
+			let c = o.props.columns, l = c.map((s) => o.validateCell(e[s.id], e, s)), u = await Promise.all(l.map((e) => e.catch((e) => e))), d = u.map((e, o) => e instanceof Error ? [c[o].id, e] : null).filter((e) => e);
+			if (d.length) {
+				if (s) {
+					let s = c[u.findIndex((e) => e instanceof Error)];
+					o.scrollToCell?.(s, e);
 				}
-				throw Object.fromEntries(o);
+				throw Object.fromEntries(d);
 			}
 		},
 		validate: async () => {
-			let e = (t.rawProps.data || []).map((e) => t.validateRow(e)), n = (await Promise.all(e.map((e) => e.catch((e) => e)))).map((e, t) => e ? [t, e] : null).filter((e) => e);
-			if (n.length) throw t.scrollToCell?.(t.props.columns.findIndex((e) => e.id === Object.keys(n[0][1])[0]), t.props.data?.[n[0][0]]), n[0][1];
+			let e = (o.rawProps.data || []).map((e) => o.validateRow(e)), s = (await Promise.all(e.map((e) => e.catch((e) => e)))).map((e, o) => e ? [o, e] : null).filter((e) => e);
+			if (s.length) throw o.scrollToCell?.(o.props.columns.findIndex((e) => e.id === Object.keys(s[0][1])[0]), o.props.data?.[s[0][0]]), s[0][1];
 		},
-		clearCellValidation: (e, n) => {
-			let r = e[t.props.rowKey];
-			t.cellValidationErrors[r] && (t.cellValidationErrors[r][n.id] = null);
+		clearCellValidation: (e, s) => {
+			let c = e[o.props.rowKey];
+			o.cellValidationErrors[c] && (o.cellValidationErrors[c][s.id] = null);
 		},
 		clearRowValidation: (e) => {
-			let n = e[t.props.rowKey];
-			if (!t.cellValidationErrors[n]) return;
-			let r = t.props.columns;
-			for (let e of r) t.cellValidationErrors[n][e.id] = null;
+			let s = e[o.props.rowKey];
+			if (!o.cellValidationErrors[s]) return;
+			let c = o.props.columns;
+			for (let e of c) o.cellValidationErrors[s][e.id] = null;
 		},
 		clearValidation: () => {
-			t.cellValidationErrors = {};
+			o.cellValidationErrors = {};
 		}
 	}),
 	rewriteProps: {
-		Td: ({ Td: e }, { store: a }) => (s) => {
-			let c = () => a.cellValidationErrors[s.data[a.props.rowKey]]?.[s.col.id];
-			return createComponent(e, mergeProps$1(s, {
+		Table: ({ Table: e }, { store: o }) => (c) => createComponent(e, mergeProps(c, { get children() {
+			return [(() => {
+				var e = _tmpl$();
+				return e.addEventListener("invalid", ({ currentTarget: e }) => {
+					o.validate().then(() => {
+						e.setCustomValidity(""), e.reportValidity(), delay(0).then(() => e.form?.requestSubmit());
+					}).catch(() => {
+						e.setCustomValidity("error");
+					});
+				}), use((e) => {
+					e.setCustomValidity("……"), e.form?.addEventListener("submit", () => e.setCustomValidity("……"));
+				}, e), e;
+			})(), memo(() => c.children)];
+		} })),
+		Td: ({ Td: e }, { store: u }) => (d) => {
+			let f = () => u.cellValidationErrors[d.data[u.props.rowKey]]?.[d.col.id];
+			return createComponent(e, mergeProps$1(d, {
 				get class() {
-					return s.class + " " + (c() == null ? "" : "is-invalid");
+					return d.class + " " + (f() == null ? "" : "is-invalid");
 				},
 				get children() {
-					return [s.children, memo(() => memo(() => c() != null)() && (() => {
-						var e = _tmpl$();
+					return [d.children, memo(() => memo(() => f() != null)() && (() => {
+						var e = _tmpl$2();
 						return insert(e, () => {
-							let e = s.data[s.col.id];
-							return queueMicrotask(() => a.validateCell(e, s.data, s.col).catch(() => {})), c();
+							let e = d.data[d.col.id];
+							return queueMicrotask(() => u.validateCell(e, d.data, d.col).catch(() => {})), f();
 						}), e;
 					})())];
 				}
 			}));
 		},
-		Th: ({ Th: e }, { store: r }) => (r) => createComponent(e, mergeProps$1(r, { get children() {
-			return [memo(() => memo(() => !!r.col.required)() && _tmpl$2()), r.children];
+		Th: ({ Th: e }, { store: c }) => (c) => createComponent(e, mergeProps$1(c, { get children() {
+			return [memo(() => memo(() => !!c.col.required)() && _tmpl$3()), c.children];
 		} }))
 	}
 };