@intable/react 0.0.15 → 0.0.16

package/dist/index.js

@@ -16,8 +16,10 @@ const Intable = (e) => {
 		style: { display: "contents" }
 	});
 }, component = (o) => (s) => {
-	let c = document.createElement("div"), l = createRoot(c);
-	return createComputed(() => flushSync(() => l.render(createElement(o, s)))), onCleanup(() => l.unmount()), c;
+	let c = document.createElement("div");
+	c.style.display = "contents";
+	let l = createRoot(c);
+	return createComputed(() => flushSync(() => l.render(typeof o == "function" ? createElement(o, s) : o))), onCleanup(() => l.unmount()), c;
 };
 var src_default = Intable;
 export { Intable, component, src_default as default };

package/dist/intable/src/components/utils.d.ts

@@ -1,3 +1,4 @@
 import type { JSX } from 'solid-js';
+import type { TableStore } from '..';
 export declare function solidComponent<T extends (...arg: any[]) => JSX.Element>(comp: T): T;
-export declare function renderComponent(Comp: any, props: any, renderer: any): JSX.Element;
+export declare function renderComponent(Comp: any, props: any, store: TableStore): any;

package/dist/intable/src/index.d.ts

@@ -15,6 +15,7 @@ import './plugins/ExpandPlugin';
 import './plugins/CellMergePlugin';
 import './plugins/TreePlugin';
 import './plugins/HeaderGroup';
+import './plugins/ValidatorPlugin';
 export declare const Ctx: import("solid-js").Context<{
     props: TableProps2;
     store: TableStore;
@@ -26,7 +27,7 @@ type Pri<T> = {
 type TableProps2 = Requireds<TableProps, ('Table' | 'Thead' | 'Tbody' | 'Tr' | 'Th' | 'Td' | 'EachRows' | 'EachCells' | 'rowKey' | 'data' | 'columns' | 'newRow')>;
 type Each<T = any> = (props: {
     each: T[];
-    children: (e: () => any, i: () => number) => JSX.Element;
+    children: (e: () => T, i: () => number) => JSX.Element;
 }) => JSX.Element;
 type ProcessProps = {
     [K in keyof TableProps]?: (prev: TableProps2, ctx: {

package/dist/intable/src/plugins/EditablePlugin.d.ts

@@ -1,15 +1,11 @@
 import { type JSX } from 'solid-js';
 import { type Plugin, type TableColumn } from '..';
 declare module '../index' {
-    interface TableProps {
-        validator?: (value: any, data: any, col: TableColumn) => string | boolean | Promise<string | boolean>;
-    }
     interface TableColumn {
         editable?: boolean;
         editor?: string | Editor;
         editorProps?: any;
         editorPopup?: boolean;
-        validator?: (value: any, rowData: any, col: TableColumn) => boolean | string | Promise<boolean | string>;
     }
     interface TableStore {
         editors: {

package/dist/intable/src/plugins/ValidatorPlugin.d.ts

@@ -0,0 +1,21 @@
+import type { Plugin } from '..';
+type Key = string | symbol;
+declare module '../index' {
+    interface TableProps {
+        validator?: (value: any, data: any, col: TableColumn) => void | Promise<void>;
+    }
+    interface TableColumn {
+        validator?: (value: any, rowData: any, col: TableColumn) => void | Promise<void>;
+    }
+    interface TableStore {
+        validateCell: (value: any, data: any, col: TableColumn) => Promise<void>;
+        clearCellValidation: (data: any, col: TableColumn) => void;
+        cellValidationErrors: {
+            [row: Key]: {
+                [col: Key]: string | null;
+            } | null;
+        };
+    }
+}
+export declare const ValidatorPlugin: Plugin;
+export {};

package/dist/plugins/antd.js

@@ -2,44 +2,63 @@ import { createRoot } from "../utils.js";
 import { createElement, useEffect, useRef, useState } from "react";
 import { resolveOptions } from "intable/utils";
 import { Checkbox, ColorPicker, DatePicker, Input, InputNumber, Rate, Select, Switch, TimePicker } from "antd";
+import dayjs from "dayjs";
 const AntdPlugin = {
 	name: "antd",
 	store(e) {
-		e.editors.text = editor(Input), e.editors.number = editor(InputNumber), e.editors.rate = editor(Rate), e.editors.switch = editor(Switch), e.editors.checkbox = editor(Checkbox), e.editors.color = selector(ColorPicker, { transform: (e) => e?.toHexString?.() || e }), e.editors.select = selector(Select), e.editors.date = selector(DatePicker), e.editors.time = selector(TimePicker), e.editors.datetime = selector(DatePicker, { showTime: !0 });
+		e.editors.text = editor(Input), e.editors.number = editor(InputNumber), e.editors.rate = editor(Rate), e.editors.switch = editor(Switch), e.editors.checkbox = editor(Checkbox, (e) => ({
+			...e,
+			checked: e.value,
+			onChange: (i) => e.onChange(i.target.checked)
+		})), e.editors.color = selector(ColorPicker, (e) => ({
+			...e,
+			onChange: void 0,
+			onChangeComplete: (i) => e.onChange(i?.toHexString?.() || i)
+		})), e.editors.select = selector(Select), e.editors.date = selector(DatePicker, (e) => ({
+			...e,
+			value: e.value && dayjs(e.value),
+			onChange: (i, a) => e.onChange(a)
+		})), e.editors.time = selector(TimePicker, (e) => ({
+			...e,
+			value: e.value && dayjs(e.value, "HH:mm:ss"),
+			onChange: (i, a) => e.onChange(a)
+		})), e.editors.datetime = selector(DatePicker, (e) => ({
+			...e,
+			showTime: !0,
+			value: e.value && dayjs(e.value),
+			onChange: (i, a) => e.onChange(a)
+		}));
 	},
 	rewriteProps: { class: ({ class: e }) => `antd ${e}` }
-};
-var getEl = (e) => e && (e instanceof Text && (e = e.nextElementSibling), e?.querySelector("input") ?? e?.querySelector("button") ?? e?.querySelector("[class*=trigger]") ?? e);
-const createEditor = (s, c, l) => (u) => {
-	let { eventKey: d, value: f, col: p, ok: m, cancel: h, props: g } = u, _ = document.createElement("div"), v = createRoot(_), y = d || f, b;
-	v.render(createElement(() => {
-		let [e, u] = useState(y), d = useRef(null);
+}, createEditor = (o, s = (e) => e, c) => (l) => {
+	let { eventKey: u, value: d, col: f, ok: p, cancel: m, props: h } = l, g = document.createElement("div");
+	g.style.display = "contents";
+	let _ = createRoot(g), v = u || d, y;
+	return _.render(createElement(() => {
+		let [e, l] = useState(v), u = useRef(null);
 		return useEffect(() => {
-			b = d.current, l ? setTimeout(() => (getEl(d.current)?.click?.(), d.current?.focus?.()), 0) : d.current?.focus?.();
-		}, []), createElement(s, {
-			ref: d,
+			y = u.current, u.current?.focus?.();
+		}, []), createElement(o, s({
+			ref: u,
 			value: e,
 			onChange: (e) => {
-				let o = e instanceof Event ? e.target?.value : e;
-				y = c.transform ? c.transform(o) : o, u(y), l && !Array.isArray(y) && setTimeout(m, 100);
+				v = e.target instanceof Node ? e.target.value : e, l(v), c && !Array.isArray(v) && setTimeout(p, 100);
 			},
 			onPointerDown: (e) => e.stopPropagation(),
 			onKeyDown: (e) => {
-				e.stopPropagation(), e.key === "Enter" && m(), e.key === "Escape" && h();
+				e.stopPropagation(), e.key === "Enter" && p(), e.key === "Escape" && m();
 			},
-			...p?.enum && { options: resolveOptions(p.enum) },
-			...c,
-			...g
-		});
-	}));
-	let x = document.createDocumentFragment();
-	return x.appendChild(_), {
-		el: x,
-		getValue: () => y,
-		destroy: () => v.unmount(),
-		focus: () => (l && getEl(b)?.click?.(), b?.focus?.()),
-		blur: () => b?.blur?.()
+			open: !0,
+			...f?.enum && { options: resolveOptions(f.enum) },
+			...h
+		}));
+	})), {
+		el: g,
+		getValue: () => v,
+		destroy: () => _.unmount(),
+		focus: () => y?.focus?.(),
+		blur: () => y?.blur?.()
 	};
 };
-var editor = (e, o = {}) => createEditor(e, o, !1), selector = (e, o = {}) => createEditor(e, o, !0);
+var editor = (e, i) => createEditor(e, i, !1), selector = (e, i) => createEditor(e, i, !0);
 export { AntdPlugin, createEditor };

package/dist/react/src/plugins/antd.d.ts

@@ -2,4 +2,4 @@ import type { Plugin } from 'intable';
 import type { Editor } from 'intable/plugins/EditablePlugin';
 import { type FC } from 'react';
 export declare const AntdPlugin: Plugin;
-export declare const createEditor: (Comp: FC<any>, opts: any, isSelector?: boolean) => Editor;
+export declare const createEditor: (Comp: FC<any>, opts?: (v: any) => any, isSelector?: boolean) => Editor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intable/react",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -17,8 +17,9 @@
     "dist"
   ],
   "dependencies": {
+    "dayjs": "^1.11.20",
     "solid-js": "^1.9.9",
-    "intable": "^0.0.15"
+    "intable": "^0.0.16"
   },
   "peerDependencies": {
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0",