intable 0.0.1

package/dist/plugins/RowSelectionPlugin.js

@@ -0,0 +1,69 @@
+import { Checkbox } from "./RenderPlugin/components.js";
+import { solidComponent } from "../components/utils.js";
+import { createComponent, insert, template } from "solid-js/web";
+import { createMemo, createRenderEffect, mergeProps as mergeProps$1, on } from "solid-js";
+import { createMutable, reconcile } from "solid-js/store";
+import { keyBy } from "es-toolkit";
+import { defaultsDeep } from "es-toolkit/compat";
+var _tmpl$ = /* @__PURE__ */ template(`<label>`);
+const RowSelectionPlugin = {
+	store: (store) => ({ rowSelectionCol: {
+		[store.internal]: 1,
+		id: Symbol("row-selection"),
+		fixed: "left",
+		class: "row-selection",
+		width: 45,
+		resizable: false,
+		render: solidComponent((o) => (() => {
+			var _el$ = _tmpl$();
+			insert(_el$, createComponent(Checkbox, {
+				style: "position: absolute",
+				get value() {
+					return store.commands.rowSelector.isSelected(o.data);
+				},
+				onChange: (v) => store.commands.rowSelector.select(o.data, v),
+				get disabled() {
+					return !store.props?.rowSelection?.selectable?.(o.data);
+				}
+			}));
+			return _el$;
+		})())
+	} }),
+	commands: (store) => ({ rowSelector: useSelector(mergeProps$1(() => ({
+		rowKey: store.props?.rowKey,
+		...store.props?.rowSelection
+	}))) }),
+	rewriteProps: {
+		rowSelection: ({ rowSelection }) => defaultsDeep(rowSelection, {
+			enable: false,
+			multiple: false,
+			selectable: () => true
+		}),
+		columns: ({ columns }, { store }) => store.props?.rowSelection?.enable ? [store.rowSelectionCol, ...columns] : columns
+	}
+};
+function useSelector(opt) {
+	const map = createMutable({});
+	const selected = createMemo(() => [...opt.value || []]);
+	const isSelected = (data) => !!map[id(data)];
+	const select = (data, bool = true) => {
+		if (!opt.selectable(data)) return;
+		if (opt.multiple) map[id(data)] = bool ? data : void 0;
+		else reconcile({ [id(data)]: bool ? data : void 0 })(map);
+		set(Object.values(map));
+	};
+	const clear = () => opt.onChange?.([]);
+	const set = (rows = []) => opt.onChange?.(rows);
+	const id = (data) => data[opt.rowKey];
+	createRenderEffect(on(selected, () => {
+		const keyed = keyBy(selected(), id);
+		reconcile(keyed)(map);
+	}));
+	return {
+		isSelected,
+		select,
+		clear,
+		set
+	};
+}
+export { RowSelectionPlugin };

package/dist/plugins/VirtualScrollPlugin.d.ts

@@ -0,0 +1,15 @@
+import { useVirtualizer } from '@/hooks/useVirtualizer';
+import { type Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+        virtual?: {
+            x?: Partial<Parameters<typeof useVirtualizer>[0]>;
+            y?: Partial<Parameters<typeof useVirtualizer>[0]>;
+        };
+    }
+    interface TableStore {
+        virtualizerY: ReturnType<typeof useVirtualizer>;
+        virtualizerX: ReturnType<typeof useVirtualizer>;
+    }
+}
+export declare const VirtualScrollPlugin: Plugin;

package/dist/plugins/VirtualScrollPlugin.js

@@ -0,0 +1,121 @@
+import { Ctx } from "../index.js";
+import { useVirtualizer } from "../hooks/useVirtualizer.js";
+import { createComponent, mergeProps } from "solid-js/web";
+import { createEffect, createMemo, mergeProps as mergeProps$1, useContext } from "solid-js";
+import { combineProps } from "@solid-primitives/props";
+import { defaultsDeep } from "es-toolkit/compat";
+import { defaultRangeExtractor } from "@tanstack/solid-virtual";
+var $ML = Symbol();
+const VirtualScrollPlugin = { rewriteProps: {
+	virtual: ({ virtual }) => defaultsDeep(virtual, {
+		x: {
+			batch: 3,
+			overscan: 2
+		},
+		y: {
+			batch: 5,
+			overscan: 5
+		}
+	}),
+	Table: ({ Table }, { store }) => (o) => {
+		let el;
+		const { props } = useContext(Ctx);
+		const virtualizerY = useVirtualizer(mergeProps$1(() => props.virtual?.y, {
+			getScrollElement: () => el,
+			get count() {
+				return props.data?.length || 0;
+			},
+			estimateSize: () => 32,
+			indexAttribute: "y"
+		}));
+		const virtualizerX = useVirtualizer(mergeProps$1(() => props.virtual?.x, {
+			horizontal: true,
+			getScrollElement: () => el,
+			get count() {
+				return props.columns?.length || 0;
+			},
+			estimateSize: (i) => props.columns?.[i].width ?? 40,
+			indexAttribute: "x",
+			rangeExtractor(range) {
+				return [...new Set([...props.columns?.map((e, i) => e.fixed ? i : void 0).filter((e) => e != null) || [], ...defaultRangeExtractor(range)])];
+			},
+			extras: () => props.columns?.map((e, i) => e.fixed ? i : void 0).filter((e) => e != null) || []
+		}));
+		store.virtualizerY = virtualizerY;
+		store.virtualizerX = virtualizerX;
+		store[$ML] = createMemo(() => {
+			const items = store.virtualizerX.getVirtualItems();
+			const ret = {};
+			for (let i = 1; i < items.length; i++) {
+				const item = items[i], prev = items[i - 1];
+				if (item.index - prev.index > 1) ret[item.index] = {
+					item,
+					offset: item.start - prev.end
+				};
+			}
+			return ret;
+		});
+		o = combineProps({
+			ref: (e) => el = e,
+			class: "virtual"
+		}, o);
+		createEffect(() => {
+			const { table, tbody } = store;
+			table.style.width = store.virtualizerX.getTotalSize() + "px";
+			table.style.height = store.virtualizerY.getTotalSize() + (store.thead?.offsetHeight || 0) + "px";
+		});
+		return createComponent(Table, o);
+	},
+	Thead: ({ Thead }, { store }) => (o) => {
+		o = combineProps({ get style() {
+			return `transform: translate(${store.virtualizerX.getVirtualItems()[0]?.start}px, 0px);`;
+		} }, o);
+		return createComponent(Thead, o);
+	},
+	Tbody: ({ Tbody }, { store }) => (o) => {
+		o = combineProps({ get style() {
+			return `transform: translate(${store.virtualizerX.getVirtualItems()[0]?.start}px, ${store.virtualizerY.getVirtualItems()[0]?.start}px)`;
+		} }, o);
+		return createComponent(Tbody, o);
+	},
+	Tr: ({ Tr }, { store }) => (o) => {
+		createEffect(() => store.trSizes[o.y] && store.virtualizerY.resizeItem(o.y, store.trSizes[o.y].height));
+		return createComponent(Tr, o);
+	},
+	Td: ({ Td }, { store }) => (o) => {
+		const ml = createMemo(() => store[$ML]()[o.x]);
+		const mo = combineProps({ get style() {
+			return `width: ${o.col.width || 80}px; margin-left: ${ml()?.offset ?? 0}px`;
+		} }, o);
+		return createComponent(Td, mo);
+	},
+	Th: ({ Th }, { store }) => (o) => {
+		createEffect(() => store.thSizes[o.x] && store.virtualizerX.resizeItem(o.x, store.thSizes[o.x].width));
+		const ml = createMemo(() => store[$ML]?.()[o.x]);
+		const mo = combineProps(() => ({ style: `width: ${o.col.width || 80}px; margin-left: ${ml()?.offset ?? 0}px` }), o);
+		return createComponent(Th, mo);
+	},
+	EachRows: ({ EachRows }, { store }) => (o) => {
+		const list = createMemo(() => store.virtualizerY.getVirtualItems().map((e) => o.each[e.index]));
+		return createComponent(EachRows, mergeProps(o, {
+			get each() {
+				return list();
+			},
+			children: (e, i) => {
+				return o.children(e, createMemo(() => store.virtualizerY.getVirtualItems()[i()]?.index));
+			}
+		}));
+	},
+	EachCells: ({ EachCells }, { store }) => (o) => {
+		const list = createMemo(() => store.virtualizerX.getVirtualItems().map((e) => o.each[e.index]));
+		return createComponent(EachCells, mergeProps(o, {
+			get each() {
+				return list();
+			},
+			children: (e, i) => {
+				return o.children(e, createMemo(() => store.virtualizerX.getVirtualItems()[i()]?.index));
+			}
+		}));
+	}
+} };
+export { VirtualScrollPlugin };

package/dist/plus.js

@@ -0,0 +1,8 @@
+import { spread, template } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M5 12h14m-7-7v14">`);
+var plus_default = (props = {}) => (() => {
+	var _el$ = _tmpl$();
+	spread(_el$, props, true, true);
+	return _el$;
+})();
+export { plus_default as default };

package/dist/utils.d.ts

@@ -0,0 +1,29 @@
+export declare function file2base64(file: File): Promise<string>;
+export declare function chooseFile(opts: {
+    accept?: string;
+    multiple?: false;
+}): Promise<File>;
+export declare function chooseFile(opts: {
+    accept?: string;
+    multiple: true;
+}): Promise<File[]>;
+export declare function chooseImage(): Promise<File>;
+export declare function print(html: string): Promise<void>;
+export declare function mergeRect(rect1: DOMRect, rect2: DOMRect): DOMRect;
+export declare function getStyles(el?: ParentNode): string;
+export declare const unFn: (fn: any, ...args: any[]) => any;
+export declare const log: (...args: any[]) => any;
+export declare const parseStyle: (s: any) => any;
+export declare function findret<T, R>(arr: readonly T[], cb: (e: T, i: number) => R): R | undefined;
+export declare function emptyObject(o: any): any;
+type Fnable<T> = T | (() => T);
+type Awatable<T> = T | Promise<T>;
+type BaseType = string | number | boolean | null;
+export declare function resolveOptions(opts: Fnable<Awatable<Record<string, any> | ({
+    label: any;
+    value: any;
+} | BaseType)[]>>): {
+    label: any;
+    value: any;
+}[];
+export {};

package/dist/utils.js

@@ -0,0 +1,88 @@
+import { useMemoAsync } from "./hooks/index.js";
+import { delay, isFunction, isPlainObject, isPromise } from "es-toolkit";
+function file2base64(file) {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.readAsDataURL(file);
+		reader.onload = () => resolve(reader.result);
+	});
+}
+function chooseFile(opts) {
+	return new Promise((resolve, reject) => {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.accept = opts?.accept;
+		input.multiple = opts?.multiple;
+		input.onchange = () => {
+			if (input.files && input.files.length > 0) resolve(input.multiple ? [...input.files] : input.files[0]);
+		};
+		input.oncancel = reject;
+		input.click();
+	});
+}
+function chooseImage() {
+	return chooseFile({ accept: "image/*" });
+}
+async function print(html) {
+	const iframe = document.createElement("iframe");
+	iframe.srcdoc = `${[...document.querySelectorAll("style"), ...document.querySelectorAll("link[rel=\"stylesheet\"]")].map((e) => e.outerHTML).join("\n")}\n\n${html}`;
+	Object.assign(iframe.style, {
+		position: "fixed",
+		display: "none"
+	});
+	document.body.append(iframe);
+	await new Promise((resolve) => iframe.contentWindow.addEventListener("load", resolve, { once: true }));
+	await delay(300);
+	iframe.contentWindow.print();
+	iframe.remove();
+}
+function mergeRect(rect1, rect2) {
+	return DOMRect.fromRect({
+		x: Math.min(rect1.x, rect2.x),
+		y: Math.min(rect1.y, rect2.y),
+		width: Math.max(rect1.right, rect2.right) - Math.min(rect1.x, rect2.x),
+		height: Math.max(rect1.bottom, rect2.bottom) - Math.min(rect1.y, rect2.y)
+	});
+}
+function getStyles(el = document) {
+	return [...el.querySelectorAll("style"), ...el.querySelectorAll("link[rel=\"stylesheet\"]")].map((e) => e.outerHTML).join("\n");
+}
+const unFn = (fn, ...args) => typeof fn == "function" ? fn(...args) : fn;
+const log = (...args) => (console.log(...args), args[0]);
+const parseStyle = (s) => s ? s.split(";").reduce((o, e) => ((([k, v]) => o[k.trim()] = v.trim())(e.split(":")), o), {}) : {};
+function findret(arr, cb) {
+	for (let i = 0; i < arr.length; i++) {
+		const ret = cb(arr[i], i);
+		if (ret != null) return ret;
+	}
+}
+function emptyObject(o) {
+	for (const k of Object.keys(o)) delete o[k];
+	return o;
+}
+var cache = /* @__PURE__ */ new WeakMap();
+function resolveOptions(opts) {
+	let ret = opts;
+	if (isFunction(ret)) ret = ret();
+	if (isPromise(ret)) {
+		if (cache.has(ret)) return cache.get(ret)();
+		cache.set(ret, useMemoAsync(() => ret.then((e) => e.map((e$1) => resolveOptions(e$1)))));
+		return cache.get(ret)();
+	}
+	if (isPlainObject(ret)) ret = Object.entries(ret).map(([k, v]) => ({
+		value: k,
+		label: v,
+		...v
+	}));
+	return ret?.map((e) => resolveOpt(e)) || [];
+}
+function resolveOpt(opt) {
+	return isPlainObject(opt) ? opt : Array.isArray(opt) ? {
+		label: opt[0],
+		value: opt[1]
+	} : {
+		label: opt,
+		value: opt
+	};
+}
+export { chooseFile, chooseImage, emptyObject, file2base64, findret, getStyles, log, mergeRect, parseStyle, print, resolveOptions, unFn };

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/wc.d.ts

@@ -0,0 +1 @@
+export declare const TableElement: CustomElementConstructor;

package/dist/wc.js

@@ -0,0 +1,24 @@
+import { Table } from "./index.js";
+import { createComponent } from "solid-js/web";
+import { batch, createEffect, createSignal, untrack } from "solid-js";
+import { createMutable, reconcile } from "solid-js/store";
+import { customElement, noShadowDOM } from "solid-element";
+const TableElement = customElement("wc-table", {
+	options: {},
+	css: {
+		value: "",
+		attribute: "css",
+		notify: true,
+		reflect: false
+	},
+	theme: ""
+}, (attrs, { element }) => {
+	noShadowDOM();
+	const props = createMutable(attrs.options);
+	createEffect(() => {
+		const { options } = attrs;
+		untrack(() => batch(() => reconcile(options)(props)));
+	});
+	return createComponent(Table, props);
+});
+export { TableElement };

package/dist/web-component.d.ts

@@ -0,0 +1 @@
+export * from './wc';

package/dist/web-component.js

@@ -0,0 +1,2 @@
+import { TableElement } from "./wc.js";
+export { TableElement };

package/dist/x.js

@@ -0,0 +1,8 @@
+import { spread, template } from "solid-js/web";
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=1.2em height=1.2em><path fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M18 6L6 18M6 6l12 12">`);
+var x_default = (props = {}) => (() => {
+	var _el$ = _tmpl$();
+	spread(_el$, props, true, true);
+	return _el$;
+})();
+export { x_default as default };

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "intable",
+  "version": "0.0.1",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./*": {
+      "import": "./dist/*.js",
+      "types": "./dist/*.d.ts"
+    }
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
+    "@solid-primitives/bounds": "^0.1.3",
+    "@solid-primitives/deep": "^0.3.3",
+    "@solid-primitives/event-listener": "^2.4.3",
+    "@solid-primitives/history": "^0.2.2",
+    "@solid-primitives/keyboard": "^1.3.3",
+    "@solid-primitives/media": "^2.3.3",
+    "@solid-primitives/memo": "^1.4.3",
+    "@solid-primitives/mutation-observer": "^1.2.2",
+    "@solid-primitives/pointer": "^0.3.3",
+    "@solid-primitives/props": "^3.2.2",
+    "@solid-primitives/resize-observer": "^2.1.3",
+    "@solid-primitives/scroll": "^2.1.3",
+    "@solid-primitives/storage": "^4.3.3",
+    "@solid-primitives/utils": "^6.3.2",
+    "@tanstack/solid-virtual": "^3.13.12",
+    "diff": "^8.0.2",
+    "es-toolkit": "^1.39.10",
+    "floating-ui-solid": "^1.0.63",
+    "solid-element": "^1.9.1",
+    "solid-js": "^1.9.9",
+    "tinykeys": "^3.0.0",
+    "uuid": "^13.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-typescript": "^7.27.1",
+    "@iconify-json/lucide": "^1.2.63",
+    "@iconify-json/solar": "^1.2.4",
+    "@iconify-json/vscode-icons": "^1.2.29",
+    "@unocss/transformer-directives": "^66.4.2",
+    "babel-plugin-solid-undestructure": "^1.1.0",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "sass": "^1.90.0",
+    "tinyglobby": "^0.2.15",
+    "typescript": "~5.8.3",
+    "undestructure-macros": "^0.0.1",
+    "unocss": "^66.4.2",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-icons": "^22.2.0",
+    "vite": "npm:rolldown-vite@7.1.12",
+    "vite-plugin-solid": "^2.11.8",
+    "vue": "^3.5.24"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "node scripts/build.js",
+    "preview": "vite preview"
+  }
+}