@intable/react 0.0.16 → 0.0.18

package/dist/index.js

@@ -1,25 +1,26 @@
 import { createRoot, flushSync } from "./utils.js";
+import { solidComponent } from "./utils2.js";
 import './style.css';/* empty css      */
 import { createElement, useEffect, useRef } from "react";
 import "intable/wc";
 import { createComputed, onCleanup } from "solid-js";
 const Intable = (e) => {
-	let a = useRef(null);
+	let o = useRef(null);
 	return useEffect(() => {
-		a.current && (a.current.options = {
+		o.current && (o.current.options = {
 			class: e.className,
 			...e,
 			renderer: component
 		});
 	}, [e]), createElement("wc-table", {
-		ref: a,
+		ref: o,
 		style: { display: "contents" }
 	});
-}, component = (o) => (s) => {
-	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;
-};
+}, component = (c) => solidComponent((s) => {
+	let l = document.createElement("div");
+	l.style.display = "contents";
+	let u = createRoot(l);
+	return createComputed(() => flushSync(() => u.render(typeof c == "function" ? createElement(c, s) : c))), onCleanup(() => u.unmount()), l;
+});
 var src_default = Intable;
 export { Intable, component, src_default as default };

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

@@ -50,6 +50,11 @@ export interface Plugin {
 }
 export type Plugin$0 = Plugin | ((store: TableStore) => Plugin);
 export interface TableProps {
+    store?: {
+        value: TableStore;
+    } | {
+        current: TableStore;
+    } | ((store: TableStore) => void);
     columns?: TableColumn[];
     data?: any[];
     index?: boolean;

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

@@ -4,6 +4,7 @@ declare module '../index' {
     }
     interface TableStore {
         commands: Commands;
+        scrollToCell?: (x: number | object, y: number | object, opt?: ScrollIntoViewOptions) => void;
     }
     interface Plugin {
         commands?: (store: TableStore, commands: Partial<Commands>) => Partial<Commands> & Record<string, any>;

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

@@ -9,7 +9,11 @@ declare module '../index' {
     }
     interface TableStore {
         validateCell: (value: any, data: any, col: TableColumn) => Promise<void>;
+        validateRow: (data: any) => Promise<void>;
+        validate: () => Promise<void>;
         clearCellValidation: (data: any, col: TableColumn) => void;
+        clearRowValidation: (data: any) => void;
+        clearValidation: () => void;
         cellValidationErrors: {
             [row: Key]: {
                 [col: Key]: string | null;

package/dist/plugins/antd.js

@@ -1,64 +1,86 @@
 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 { Checkbox, ColorPicker, DatePicker, Input, InputNumber, Rate, Select, Switch, TimePicker, version as version$1 } from "antd";
 import dayjs from "dayjs";
+import weekday from "dayjs/plugin/weekday";
+import localeData from "dayjs/plugin/localeData";
+dayjs.extend(weekday), dayjs.extend(localeData);
 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) => ({
+		e.editors.text = editor(Input), e.editors.textarea = editor(Input.TextArea, (e) => ({ ...e })), 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)
+			onChange: (a) => e.onChange(a.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) => ({
+			onChangeComplete: (a) => e.onChange(a?.toHexString?.() || a)
+		})), e.editors.select = selector(Select, (e) => ({
+			style: { width: "100%" },
+			...e
+		})), e.editors.date = selector(DatePicker, (e) => ({
 			...e,
 			value: e.value && dayjs(e.value),
-			onChange: (i, a) => e.onChange(a)
+			onChange: (a, o) => e.onChange(o)
 		})), e.editors.time = selector(TimePicker, (e) => ({
 			...e,
 			value: e.value && dayjs(e.value, "HH:mm:ss"),
-			onChange: (i, a) => e.onChange(a)
+			onChange: (a, o) => e.onChange(o)
 		})), e.editors.datetime = selector(DatePicker, (e) => ({
 			...e,
 			showTime: !0,
 			value: e.value && dayjs(e.value),
-			onChange: (i, a) => e.onChange(a)
+			onChange: (a, o) => e.onChange(o)
 		}));
 	},
 	rewriteProps: { class: ({ class: e }) => `antd ${e}` }
-}, 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);
+}, createEditor = (s, c = (e) => e, l) => (f) => {
+	let { eventKey: p, value: m, col: h, ok: g, cancel: _, props: v } = f, y = document.createElement("div");
+	y.style.display = "contents";
+	let b = createRoot(y), x = [
+		Input,
+		InputNumber,
+		Input.TextArea
+	].includes(s) && p || m, S, C = () => {
+		let [e, u] = useState(x), [d, f] = useState(p), m = useRef(null);
 		return useEffect(() => {
-			y = u.current, u.current?.focus?.();
-		}, []), createElement(o, s({
-			ref: u,
+			S = m.current, m.current?.focus?.();
+		}, []), createElement(s, c({
+			ref: m,
 			value: e,
 			onChange: (e) => {
-				v = e.target instanceof Node ? e.target.value : e, l(v), c && !Array.isArray(v) && setTimeout(p, 100);
+				x = e.target instanceof Node ? e.target.value : e, u(x), l && !Array.isArray(x) && setTimeout(g, 100);
 			},
 			onPointerDown: (e) => e.stopPropagation(),
 			onKeyDown: (e) => {
-				e.stopPropagation(), e.key === "Enter" && p(), e.key === "Escape" && m();
+				e.stopPropagation(), e.key === "Enter" && !e.shiftKey && g(), e.key === "Escape" && _();
 			},
 			open: !0,
-			...f?.enum && { options: resolveOptions(f.enum) },
-			...h
+			...+version$1.split(".")[0] <= 5 ? {
+				showSearch: !0,
+				optionFilterProp: "label",
+				searchValue: d,
+				onSearch: f
+			} : { showSearch: {
+				optionFilterProp: "label",
+				searchValue: d,
+				onSearch: f
+			} },
+			...h?.enum && { options: resolveOptions(h.enum) },
+			...v
 		}));
-	})), {
-		el: g,
-		getValue: () => v,
-		destroy: () => _.unmount(),
-		focus: () => y?.focus?.(),
-		blur: () => y?.blur?.()
+	};
+	return setTimeout(() => {
+		b.render(createElement(C));
+	}, 0), {
+		el: y,
+		getValue: () => x,
+		destroy: () => b.unmount(),
+		focus: () => S?.focus?.(),
+		blur: () => S?.blur?.()
 	};
 };
-var editor = (e, i) => createEditor(e, i, !1), selector = (e, i) => createEditor(e, i, !0);
+var editor = (e, a) => createEditor(e, a, !1), selector = (e, a) => createEditor(e, a, !0);
 export { AntdPlugin, createEditor };

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

@@ -1,7 +1,7 @@
 import { type FC } from 'react';
-import { type TableProps } from 'intable';
 import '../../intable/src/wc';
 import 'intable/wc';
+import { type TableProps } from 'intable';
 import './style.scss';
 export declare const Intable: FC<TableProps>;
 export declare const component: <T extends Record<string, any>>(Comp: FC<T>) => (props: T) => HTMLDivElement;

package/dist/utils2.js

@@ -0,0 +1,5 @@
+import "solid-js/web";
+function solidComponent(e) {
+	return e.__solid = 1, e;
+}
+export { solidComponent };

package/package.json

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