intable 0.0.1

package/dist/components/utils.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'solid-js';
+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;

package/dist/components/utils.js

@@ -0,0 +1,10 @@
+import { createComponent } from "solid-js/web";
+function solidComponent(comp) {
+	comp.__solid = 1;
+	return comp;
+}
+function renderComponent(Comp, props, renderer) {
+	if (!Comp.__solid) Comp = renderer(Comp);
+	return createComponent(Comp, props);
+}
+export { renderComponent, solidComponent };

package/dist/demo.d.ts

@@ -0,0 +1,2 @@
+import './index.scss';
+import 'virtual:uno.css';

package/dist/demo.js

@@ -0,0 +1,64 @@
+import { log } from "./utils.js";
+import { Table } from "./index.js";
+/* empty css       */
+/* empty css      */
+import { VirtualScrollPlugin } from "./plugins/VirtualScrollPlugin.js";
+import { createComponent, delegateEvents, effect, insert, render, template } from "solid-js/web";
+import { batch } from "solid-js";
+import { createMutable, reconcile } from "solid-js/store";
+import { range } from "es-toolkit";
+var _tmpl$ = /* @__PURE__ */ template(`<input type=checkbox>`), _tmpl$2 = /* @__PURE__ */ template(`<button>xxx`), _tmpl$3 = /* @__PURE__ */ template(`<div class=p-6>`);
+var root = document.getElementById("root");
+var state = createMutable({ bool: true });
+var cols = createMutable(range(5).map((e) => ({
+	name: "col_" + e,
+	id: "col_" + e,
+	width: 80
+})));
+var data = createMutable(range(100).map((e, i) => Object.fromEntries(cols.map((e$1) => [e$1.id, i + 1]))));
+render(() => (() => {
+	var _el$ = _tmpl$();
+	_el$.addEventListener("change", (e) => state.bool = e.currentTarget.checked);
+	effect(() => _el$.checked = state.bool);
+	return _el$;
+})(), root);
+render(() => (() => {
+	var _el$2 = _tmpl$2();
+	_el$2.$$click = () => data[0].col_1 = "xxx";
+	return _el$2;
+})(), root);
+cols[0].editor = "select";
+cols[0].enum = {
+	1: 1,
+	2: 2,
+	3: 3
+};
+cols.forEach((e) => (e.editable = true, e.editOnInput = true));
+cols.at(-3).width = void 0;
+cols.at(-1).width = void 0;
+data.forEach((e) => e.g = e.col_0 % 10);
+data.forEach((e) => e.n = e.col_0 % 3);
+render(() => createComponent(Table, {
+	"class": "w-50vw! h-40vh of-auto",
+	get index() {
+		return state.bool;
+	},
+	get stickyHeader() {
+		return state.bool;
+	},
+	columns: cols,
+	onColumnsChange: (o) => reconcile(o)(cols),
+	data,
+	border: true,
+	plugins: [VirtualScrollPlugin],
+	onDataChange: (v) => batch(() => (data.length = 0, data.push(...v))),
+	expand: { render: ({ data: data$1 }) => (() => {
+		var _el$3 = _tmpl$3();
+		insert(_el$3, () => JSON.stringify(data$1));
+		return _el$3;
+	})() },
+	diff: { onCommit: (...arg) => log(arg) },
+	virtual: {},
+	rowSelection: {}
+}), root);
+delegateEvents(["click"]);

package/dist/hooks/index.d.ts

@@ -0,0 +1,38 @@
+import { type Signal } from 'solid-js';
+import { type Many, type MaybeAccessor } from '@solid-primitives/utils';
+interface UseDragOptions {
+    start?(e: PointerEvent, move: (cb: MoveCB) => void, end: (cb: EndCb) => void): void;
+}
+type MoveCB = (e: PointerEvent, o: {
+    sx: number;
+    sy: number;
+    ox: number;
+    oy: number;
+}) => void;
+type EndCb = (e: PointerEvent) => void;
+export declare function usePointerDrag(el: MaybeAccessor<HTMLElement | undefined>, options: UseDragOptions): void;
+export declare function model(el: any, value: () => [() => string, (v: string) => any]): void;
+export declare function toSignle<T extends Record<string, any>>(state: T, k: keyof T): ((v: any) => any)[];
+export declare function useDark(): [get: import("solid-js").Accessor<boolean>, set: import("solid-js").Setter<boolean>, init: string | Promise<string> | null];
+export declare function useMemoAsync<T>(fn: (prev?: T) => Promise<T> | T, init?: Awaited<T>): import("solid-js").Accessor<Awaited<T> | undefined>;
+export declare function useSignle2<T>(v: T | (() => T), opt?: {
+    before?: (v: T) => Promise<T | void> | T;
+}): Signal<T>;
+type Reactive<T extends object> = {
+    [K in keyof T]: T[K] extends () => infer V ? V : T[K];
+};
+export declare function toReactive<T extends object>(fn: (() => T) | T): Reactive<T>;
+export declare function useMemo<T>(fn: () => T): import("solid-js").Accessor<T>;
+export declare function useHover(el: MaybeAccessor<Many<HTMLElement | undefined>>): import("solid-js").Accessor<boolean>;
+export declare function useMouseDown(el: MaybeAccessor<Many<HTMLElement | undefined>>): import("solid-js").Accessor<boolean>;
+export declare function useClicked(el: MaybeAccessor<Many<HTMLElement | undefined>>): import("solid-js").Accessor<boolean>;
+export declare function useMutation<T>(initial: MaybeAccessor<Node | Node[]>, options: MutationObserverInit, cb: () => T): import("solid-js").Accessor<T>;
+export declare function useTinykeys(el: MaybeAccessor<HTMLElement | undefined>, handlers: any): void;
+export declare function useHistory([val, setVal]: [any, any]): {
+    undo: () => any;
+    redo: () => any;
+    clear: () => any[];
+    readonly index: number;
+    readonly history: any[];
+};
+export {};

package/dist/hooks/index.js

@@ -0,0 +1,182 @@
+import { unFn } from "../utils.js";
+import { $PROXY, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, on, onCleanup } from "solid-js";
+import { $RAW, createMutable } from "solid-js/store";
+import { isFunction, isPromise, mapValues } from "es-toolkit";
+import { createEventListener } from "@solid-primitives/event-listener";
+import { createPointerListeners } from "@solid-primitives/pointer";
+import { access } from "@solid-primitives/utils";
+import { makePersisted, storageSync } from "@solid-primitives/storage";
+import { createMutationObserver } from "@solid-primitives/mutation-observer";
+import { castArray } from "es-toolkit/compat";
+import { createKeybindingsHandler } from "tinykeys";
+function usePointerDrag(el, options) {
+	createPointerListeners({
+		target: el,
+		passive: false,
+		onDown(e) {
+			e.preventDefault();
+			const [sx, sy] = [e.x, e.y];
+			let move;
+			let end;
+			options.start?.(e, (cb) => move = cb, (cb) => end = cb);
+			createRoot((dispose) => {
+				createPointerListeners({
+					target: document,
+					onMove(e$1) {
+						const [ox, oy] = [e$1.x - sx, e$1.y - sy];
+						move?.(e$1, {
+							sx,
+							sy,
+							ox,
+							oy
+						});
+					},
+					onUp() {
+						end?.(e);
+						dispose();
+						move = void 0;
+						end = void 0;
+					}
+				});
+			});
+		}
+	});
+}
+function model(el, value) {
+	const [field, setField] = value();
+	createRenderEffect(() => el.value = field());
+	el.addEventListener("input", (e) => setField(e.target.value));
+}
+function toSignle(state, k) {
+	return [() => state[k], (v) => state[k] = v];
+}
+function useDark() {
+	const get = (v) => v == "dark" || prefersDark() && !v, set = (v) => v ? "dark" : "light";
+	const prefersDark = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
+	const dark = makePersisted(createSignal(prefersDark()), {
+		name: "color-schema",
+		storage: localStorage,
+		sync: storageSync,
+		serialize: set,
+		deserialize: get
+	});
+	createEffect(() => document.documentElement.classList[dark[0]() ? "add" : "remove"]("dark"));
+	createEffect(() => window.dispatchEvent(new StorageEvent("storage", {
+		key: "color-schema",
+		newValue: set(dark[0]())
+	})));
+	return dark;
+}
+function useMemoAsync(fn, init) {
+	const REJECT = Symbol();
+	const [val, setVal] = createSignal(init);
+	createComputed(async () => {
+		const ret = fn(val());
+		const v = ret instanceof Promise ? await new Promise((resolve) => {
+			ret.then(resolve);
+			onCleanup(() => resolve(REJECT));
+		}) : ret;
+		v == REJECT || setVal(() => v);
+	});
+	return val;
+}
+function useSignle2(v, opt) {
+	const state = createSignal(isFunction(v) ? void 0 : v);
+	const before = (v$1) => {
+		const v2 = opt?.before?.(v$1);
+		return isPromise(v2) ? v2.then((v3) => v3 === void 0 ? v$1 : v3) : v2 ?? v$1;
+	};
+	const val = useMemoAsync(() => before(state[0]()));
+	if (isFunction(v)) {
+		const fned = useMemoAsync(() => before(v()));
+		createComputed(() => state[1](fned()));
+	}
+	return [val, state[1]];
+}
+var $MEMO = Symbol();
+function toReactive(fn) {
+	const v = () => unFn(fn);
+	const trueFn = () => true;
+	const get = (k) => ((e) => typeof e == "function" && $MEMO in e ? e() : e)(v()[k]);
+	return new Proxy(Object.create(null), {
+		get: (o, k, r) => k == $PROXY ? r : k == $RAW ? r : ((v$1) => typeof v$1 == "function" && $MEMO in v$1 ? v$1() : v$1)(v()[k]),
+		set: trueFn,
+		defineProperty: (o, k, attributes) => Object.defineProperty(v(), k, attributes),
+		deleteProperty: trueFn,
+		getPrototypeOf: () => Object.getPrototypeOf(v()),
+		has: (o, p) => p == $PROXY || p in v(),
+		ownKeys: (o) => Object.keys(v()),
+		getOwnPropertyDescriptor: (o, k) => ({
+			enumerable: true,
+			configurable: true,
+			get() {
+				return get(k);
+			},
+			set: trueFn
+		})
+	});
+}
+function useMemo(fn) {
+	const ret = createMemo(fn);
+	ret[$MEMO] = 1;
+	return ret;
+}
+function useHover(el) {
+	const [hover, setHover] = createSignal(false);
+	createEventListener(el, "pointerenter", () => setHover(true));
+	createEventListener(el, "pointerleave", () => setHover(false));
+	return hover;
+}
+function useMouseDown(el) {
+	const [down, setDown] = createSignal(false);
+	createEventListener(el, "pointerdown", () => setDown(true));
+	createEventListener(document.body, "pointerup", () => setDown(false));
+	return down;
+}
+function useClicked(el) {
+	const [clicked, setClicked] = createSignal(false);
+	const els = () => castArray(access(el));
+	createEventListener(() => els().map((e) => e?.getRootNode()), "click", (e) => setClicked(els().some((el$1) => el$1?.contains(e.target))));
+	return clicked;
+}
+function useMutation(initial, options, cb) {
+	const ret = createSignal(cb());
+	createMutationObserver(initial, options, (ms) => ret[1](cb()));
+	return ret[0];
+}
+function useTinykeys(el, handlers) {
+	createEventListener(el, "keydown", createKeybindingsHandler({ ...mapValues(handlers, (cb) => (e) => {
+		e.preventDefault();
+		cb(e);
+	}) }));
+}
+function useHistory([val, setVal]) {
+	let bool = 1;
+	const state = createMutable({
+		index: -1,
+		history: []
+	});
+	const clear = () => (state.index = 0, state.history = [val()]);
+	const canUndo = () => state.index > 0;
+	const canRedo = () => state.index < state.history.length - 1;
+	const undo = () => canUndo() && ((bool = 0) || setVal(state.history[--state.index]));
+	const redo = () => canRedo() && ((bool = 0) || setVal(state.history[++state.index]));
+	createRenderEffect(on(val, (ret) => {
+		if (ret == null) return;
+		if (!bool) return bool = 1;
+		if (canRedo()) state.history = state.history.slice(0, state.index + 1);
+		state.history[++state.index] = ret;
+	}));
+	return {
+		undo,
+		redo,
+		clear,
+		get index() {
+			return state.index;
+		},
+		get history() {
+			return state.history;
+		}
+	};
+}
+export { model, toReactive, toSignle, useClicked, useDark, useHistory, useHover, useMemo, useMemoAsync, useMouseDown, useMutation, usePointerDrag, useSignle2, useTinykeys };

package/dist/hooks/useDir.d.ts

@@ -0,0 +1,11 @@
+import { type MaybeAccessor } from '@solid-primitives/utils';
+interface UseDirOptions {
+    ref: MaybeAccessor<HTMLElement | undefined>;
+    list?: MaybeAccessor<HTMLElement | undefined>;
+    loop?: boolean;
+    options?: EventListenerOptions;
+    defaultFirst?: boolean;
+}
+export declare function useDir(options: UseDirOptions): void;
+export declare function VDir(el: HTMLElement, options: any): void;
+export {};

package/dist/hooks/useDir.js

@@ -0,0 +1,59 @@
+import { createEffect, mergeProps } from "solid-js";
+import { createEventListener } from "@solid-primitives/event-listener";
+import { access } from "@solid-primitives/utils";
+import { createMutationObserver } from "@solid-primitives/mutation-observer";
+function useDir(options) {
+	options = mergeProps({ loop: true }, options);
+	const list = () => access(options.list) ?? access(options.ref);
+	const ref = () => access(options.ref) ?? access(options.list);
+	createEffect(() => {
+		if (ref().tabIndex > -1) return;
+		ref().tabIndex = 0;
+	});
+	createEventListener(ref, "keydown", (e) => {
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Enter"
+		].includes(e.key)) return;
+		e.stopPropagation();
+		e.preventDefault();
+		let hover = list()?.querySelector(".hover");
+		if (e.key == "Enter") {
+			hover?.click();
+			return;
+		}
+		let index = e.key == "ArrowDown" ? hover ? +hover?.getAttribute("data-index") + 1 : 0 : e.key == "ArrowUp" ? hover ? +hover?.getAttribute("data-index") - 1 : -1 : 0;
+		const el = list()?.querySelector(`[data-index='${index}']`);
+		if (!el) {
+			if (options.loop) {
+				hover?.classList.remove("hover");
+				index >= 0 ? list()?.querySelector(`[data-index='0']`)?.classList.add("hover") : [...list()?.querySelectorAll(`[data-index]`)].at(-1)?.classList.add("hover");
+			}
+		} else {
+			hover?.classList.remove("hover");
+			el.classList.add("hover");
+		}
+	}, options.options);
+	createEffect(() => {
+		if (!options.defaultFirst) return;
+		const el = list();
+		if (!el) return;
+		const hover = () => {
+			if (el.querySelector(".hover")) return;
+			el.querySelector(`[data-index]`)?.classList.add("hover");
+		};
+		createMutationObserver(el, { childList: true }, hover);
+		hover();
+	});
+	createEventListener(list, "mouseover", () => {
+		list()?.querySelector(".hover")?.classList.remove("hover");
+	});
+}
+function VDir(el, options) {
+	useDir({
+		...options(),
+		list: el
+	});
+}
+export { VDir, useDir };

package/dist/hooks/useVirtualizer.d.ts

@@ -0,0 +1,25 @@
+interface VirtualizerOptions {
+    enable?: boolean;
+    overscan?: number;
+    batch?: number;
+    getScrollElement: () => Element;
+    horizontal?: boolean;
+    count: number;
+    estimateSize: (i: number) => number;
+}
+export declare function useVirtualizer(opt: VirtualizerOptions): {
+    options: VirtualizerOptions;
+    getTotalSize: () => number;
+    resizeItem: (i: any, size: any) => void;
+    getVirtualItems: import("solid-js").Accessor<{
+        start: number;
+        end: number;
+        index: number;
+    }[]>;
+    getVirtualItem: (i: any) => {
+        start: number;
+        end: number;
+        index: number;
+    };
+};
+export {};

package/dist/hooks/useVirtualizer.js

@@ -0,0 +1,92 @@
+import { createComputed, createMemo, createRenderEffect, createSignal, mergeProps, untrack } from "solid-js";
+import { createMutable } from "solid-js/store";
+import { keyBy, uniqBy } from "es-toolkit";
+import { createElementSize } from "@solid-primitives/resize-observer";
+import { createScrollPosition } from "@solid-primitives/scroll";
+function useVirtualizer(opt) {
+	opt = mergeProps({
+		overscan: 0,
+		batch: 0,
+		enable: true
+	}, opt);
+	const size = createElementSize(opt.getScrollElement);
+	const pos = createScrollPosition(opt.getScrollElement);
+	const y = createMemo(() => opt.horizontal ? pos.x : pos.y);
+	const h = createMemo(() => opt.horizontal ? size.width : size.height);
+	const y2 = createMemo(() => y() + h());
+	const sizes = createMutable(Array(opt.count));
+	createComputed(() => {
+		const { count } = opt;
+		untrack(() => {
+			for (let i = 0; i < count; i++) sizes[i] ||= opt.estimateSize(i);
+		});
+	});
+	const [items, setItems] = createSignal([]);
+	createRenderEffect(() => {
+		const { count } = opt;
+		let arr = Array(count);
+		let t = 0;
+		for (let i = 0; i < count; i++) {
+			arr[i] = {
+				start: t,
+				end: t + sizes[i],
+				index: i
+			};
+			t = arr[i].end;
+		}
+		setItems(arr);
+	});
+	const start = createMemo((prev) => {
+		const { batch: batch$1, overscan = 0 } = opt;
+		let i = findClosestIndex(items(), (e) => e.start > y() ? -1 : e.end < y() ? 1 : 0);
+		i -= overscan;
+		if (batch$1) if (i > prev) i = i <= prev + batch$1 ? prev : i > prev + batch$1 * 2 ? i : prev + batch$1;
+		else i -= batch$1;
+		return Math.max(i, 0);
+	}, 0);
+	const end = createMemo((prev) => {
+		const { batch: batch$1, overscan = 0 } = opt;
+		let i = findClosestIndex(items(), (e) => e.start > y2() ? -1 : e.end < y2() ? 1 : 0);
+		i += overscan;
+		if (batch$1) if (i < prev) i = i >= prev - batch$1 ? prev : i < prev - batch$1 * 2 ? i : prev - batch$1;
+		else i += batch$1;
+		return Math.min(i, opt.count - 1);
+	}, 0);
+	const items2 = createMemo(() => {
+		if (!opt.enable) return items();
+		let arr = items().slice(start(), end() + 1);
+		if (opt.extras) {
+			arr.push(...opt.extras()?.map((i) => items()[i]) || []);
+			arr = uniqBy(arr, (e) => e.index).sort((a, b) => a.index - b.index);
+		}
+		return arr;
+	});
+	function findClosestIndex(arr, fn) {
+		let l = 0, r = arr.length - 1;
+		while (l < r) {
+			const m = l + Math.floor((r - l) / 2);
+			const v = fn(arr[m]);
+			if (v < 0 && r != m) r = m;
+			else if (v > 0 && l != m) l = m;
+			else return m;
+		}
+		return l;
+	}
+	return {
+		options: opt,
+		getTotalSize: () => items()[items().length - 1]?.end || 0,
+		resizeItem: (i, size$1) => {
+			if (i <= start() && size$1 != sizes[i]) {
+				const el = opt.getScrollElement();
+				if ((opt.horizontal ? el.scrollLeft : el.scrollTop) != 0) opt.horizontal ? el.scrollLeft += size$1 - sizes[i] : el.scrollTop += size$1 - sizes[i];
+			}
+			sizes[i] = size$1;
+		},
+		getVirtualItems: items2,
+		getVirtualItem: (() => {
+			const keybyed = createMemo(() => keyBy(items2(), (e) => e.index));
+			return (i) => keybyed()[i];
+		})()
+	};
+}
+export { useVirtualizer };

package/dist/index.d.ts

@@ -0,0 +1,116 @@
+import { For, type JSX, type Component } from 'solid-js';
+import './styles/index.scss';
+import './plugins/CellSelectionPlugin';
+import './plugins/CopyPastePlugin';
+import './plugins/EditablePlugin';
+import './plugins/RenderPlugin';
+import './plugins/MenuPlugin';
+import './plugins/CommandPlugin';
+import './plugins/RowSelectionPlugin';
+import './plugins/ResizePlugin';
+export declare const Ctx: import("solid-js").Context<{
+    props: TableProps2;
+}>;
+type Requireds<T, K extends keyof T> = Pri<Omit<T, K> & Required<Pick<T, K>>>;
+type Pri<T> = {
+    [K in keyof T]: T[K];
+};
+type TableProps2 = Requireds<TableProps, ('Table' | 'Thead' | 'Tbody' | 'Tr' | 'Th' | 'Td' | 'EachRows' | 'EachCells' | 'rowKey' | 'data' | 'columns' | 'newRow')>;
+type ProcessProps = {
+    [K in keyof TableProps]?: (prev: TableProps2, ctx: {
+        store: TableStore;
+    }) => TableProps[K];
+};
+export interface Plugin {
+    priority?: number;
+    store?: (store: TableStore) => Partial<TableStore> | void;
+    rewriteProps?: ProcessProps;
+    layers?: Component<TableStore>[];
+}
+export interface TableProps {
+    columns?: TableColumn[];
+    data?: any[];
+    index?: boolean;
+    border?: boolean;
+    stickyHeader?: boolean;
+    class?: any;
+    style?: any;
+    rowKey?: any;
+    size?: string;
+    newRow?: (i: number) => any;
+    Table?: Component<any>;
+    Thead?: Component<any>;
+    Tbody?: Component<any>;
+    Td?: TD;
+    Th?: Component<THProps>;
+    Tr?: Component<{
+        y?: number;
+        data?: any;
+        children: JSX.Element;
+    }>;
+    EachRows?: typeof For;
+    EachCells?: typeof For<TableColumn[], JSX.Element>;
+    cellClass?: ((props: Omit<TDProps, 'y'> & {
+        y?: number;
+    }) => string) | string;
+    cellStyle?: ((props: Omit<TDProps, 'y'> & {
+        y?: number;
+    }) => string) | string;
+    renderer?: (comp: (props: any) => JSX.Element) => ((props: any) => JSX.Element);
+    plugins?: Plugin[];
+    onDataChange?: (data: any[]) => void;
+}
+type THProps = {
+    x: number;
+    col: TableColumn;
+    children: JSX.Element;
+};
+type TDProps = {
+    x: number;
+    y: number;
+    data: any;
+    col: TableColumn;
+    children: JSX.Element;
+};
+export type TD = Component<{
+    x: number;
+    y: number;
+    data: any;
+    col: TableColumn;
+    children: JSX.Element;
+}>;
+type Obj = Record<string | symbol, any>;
+export interface TableColumn extends Obj {
+    id?: any;
+    name?: string;
+    width?: number;
+    fixed?: 'left' | 'right';
+    class?: any;
+    style?: any;
+    props?: (props: any) => JSX.HTMLAttributes<any>;
+}
+type Nullable<T> = T | undefined;
+export interface TableStore extends Obj {
+    scroll_el?: HTMLElement;
+    table: HTMLElement;
+    thead: HTMLElement;
+    tbody: HTMLElement;
+    ths: Nullable<Element>[];
+    thSizes: Nullable<{
+        width: number;
+        height: number;
+    }>[];
+    trs: Nullable<Element>[];
+    trSizes: Nullable<{
+        width: number;
+        height: number;
+    }>[];
+    internal: symbol;
+    props?: TableProps2;
+    rawProps: TableProps;
+    plugins: Plugin[];
+}
+export declare const Table: (props: TableProps) => JSX.Element;
+export declare const ScrollPlugin: Plugin;
+export declare const defaultsPlugins: Plugin[];
+export {};