@intable/react 0.0.7

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,26 @@
+import './style.css';/* empty css      */
+import { createElement, useEffect, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import "intable/wc";
+import { onCleanup } from "solid-js";
+const Intable = (a) => {
+	let o = useRef(null);
+	return useEffect(() => {
+		o.current && (o.current.options = {
+			...a,
+			renderer: component,
+			plugins: [...a.plugins || []]
+		});
+	}, [a]), createElement("wc-table", {
+		ref: o,
+		style: { display: "contents" }
+	});
+}, component = (r) => (i) => {
+	let s = document.createElement("div");
+	s.remove ??= () => {};
+	let c = createRoot(s);
+	return flushSync(() => c.render(createElement(r, i))), onCleanup(() => c.unmount()), s;
+};
+var src_default = Intable;
+export { Intable, component, src_default as default };

package/dist/plugins/antd.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'intable';
+export declare const AntdPlugin: Plugin;

package/dist/plugins/antd.js

@@ -0,0 +1,42 @@
+import { createElement, useEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { resolveOptions } from "intable/utils";
+import { Checkbox, ColorPicker, DatePicker, Input, InputNumber, Rate, Select, Switch, TimePicker } from "antd";
+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 });
+	},
+	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), 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 [o, u] = useState(y), d = useRef(null);
+		return useEffect(() => {
+			b = d.current, l ? setTimeout(() => (getEl(d.current)?.click?.(), d.current?.focus?.()), 0) : d.current?.focus?.();
+		}, []), createElement(s, {
+			ref: d,
+			value: o,
+			onChange: (e) => {
+				y = c.transform ? c.transform(e) : e, u(y), l && setTimeout(m, 100);
+			},
+			onPointerDown: (e) => e.stopPropagation(),
+			onKeyDown: (e) => {
+				e.stopPropagation(), e.key === "Enter" && m(), e.key === "Escape" && h();
+			},
+			...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?.()
+	};
+}, editor = (e, a = {}) => createEditor(e, a, !1), selector = (e, a = {}) => createEditor(e, a, !0);
+export { AntdPlugin };

package/dist/style.css

@@ -0,0 +1 @@
+.antd .is-editing>.area{display:none}.antd .in-cell-edit-wrapper{align-items:center;padding:4px;display:flex}.antd .in-cell-edit-wrapper>.ant-input-affix-wrapper>.ant-input-prefix{display:none}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@intable/react",
+  "version": "0.0.7",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": {
+      "import": "./dist/*.js",
+      "types": "./dist/*.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "intable": "^0.0.7",
+    "solid-js": "^1.9.9"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0 || ^20.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0 || ^20.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "antd": "^5.22.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}