intable 0.0.53 → 0.0.54

package/dist/plugins/EditablePlugin.js

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

package/dist/plugins/RenderPlugin/components.js

@@ -162,7 +162,7 @@ const Checkbox = (e) => {
 	archived: "#9ca3af"
 };
 var stringToColor = (e) => {
-	if (text2colorMap[e]) return text2colorMap[e];
+	if (e = e.trim().toLowerCase(), text2colorMap[e]) return text2colorMap[e];
 	let m = 0;
 	for (let h = 0; h < e.length; h++) m = (m << 5) - m + e.charCodeAt(h) | 0;
 	return `hsl(${Math.abs(m * 137) % 360} 55% 40%)`;

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

@@ -23,8 +23,7 @@ export declare const RenderPlugin: Plugin;
 export { text2colorMap } from './components';
 export declare const renders: {
     text: Render;
-    number: Render;
-    date: Render;
+    switch: Render;
     checkbox: Render;
     file: Render;
 };

package/dist/plugins/RenderPlugin/index.js

@@ -9,35 +9,32 @@ const RenderPlugin = {
 	name: "render",
 	priority: -Infinity,
 	store: () => ({ renders: { ...renders } }),
-	rewriteProps: { Td: ({ Td: m }, { store: h }) => (g) => (h.props.cpu && (g = mergeProps$2(() => ({}), g)), createComponent(m, mergeProps$2(g, { get children() {
-		return createMemo(() => {
-			let m = ((e) => typeof e == "string" ? h.renders[e] : e)(g.col.render ?? g.col.type ?? text);
-			return m == text ? text(g) : renderComponent(m, g, h);
-		});
-	} }))) }
+	rewriteProps: { Td: ({ Td: h }, { store: g }) => (_) => (g.props.cpu && (_ = mergeProps$2(() => ({}), _)), createComponent(h, mergeProps$2(_, { children: createMemo(() => {
+		let h = ((e) => typeof e == "string" ? g.renders[e] : e)(_.col.render ?? (_.col.enum && text) ?? _.col.type) ?? text;
+		return h == text ? text(_) : renderComponent(h, _, g);
+	}) }))) }
 };
 var text = (e) => e.col.enum ? createComponent(Tags, {
 	disabled: !0,
 	get value() {
-		return toArr(e.value).map((m) => getOpt(e.col.enum, m));
+		return toArr(e.value).map((h) => getOpt(e.col.enum, h) ?? h);
 	}
-}) : e.value;
+}) : e.value, checkbox = (e) => (() => {
+	var h = _tmpl$();
+	return insert(h, createComponent(Checkbox, {
+		class: "",
+		get value() {
+			return e.value;
+		},
+		get onChange() {
+			return e.onChange;
+		}
+	})), h;
+})();
 const renders = {
 	text,
-	number: text,
-	date: text,
-	checkbox: (e) => (() => {
-		var m = _tmpl$();
-		return insert(m, createComponent(Checkbox, {
-			class: "",
-			get value() {
-				return e.value;
-			},
-			get onChange() {
-				return e.onChange;
-			}
-		})), m;
-	})(),
+	switch: checkbox,
+	checkbox,
 	file: (e) => createComponent(Files, {
 		get value() {
 			return e.value;

package/dist/plugins/TreePlugin.js

@@ -37,7 +37,7 @@ const TreePlugin = (c) => {
 				let n = t.props.tree.children || "children", r = t.props.rowKey, { flat: i, meta: a } = flattenTree(e, n, r, (e) => t.tree.has(e));
 				return t._treeMeta = a, t._haschildren = Object.values(Object.fromEntries(a)).some((e) => e.hasChildren), i;
 			},
-			Td: ({ Td: t }, { store: c }) => (l) => {
+			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) => {
@@ -61,7 +61,7 @@ const TreePlugin = (c) => {
 						})() : l.children;
 					}
 				}));
-			}
+			} : t
 		},
 		commands: (e, { addRows: t }) => ({ addRows(n, r, i = !0) {
 			if (!e.props?.tree) return t?.(n, r, i);

package/package.json

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