intable 0.0.22 → 0.0.24

package/dist/plugins/CommandPlugin.js

@@ -1,43 +1,41 @@
 import { createComponent } from "solid-js/web";
 import { createMemo, getOwner, runWithOwner } from "solid-js";
 import { combineProps } from "@solid-primitives/props";
+import { createLazyMemo } from "@solid-primitives/memo";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { createKeybindingsHandler } from "tinykeys";
 const CommandPlugin = {
 	name: "command",
 	priority: Infinity,
 	store: (e) => {
-		let a = getOwner(), o = createMemo(() => e.plugins.reduce((n, r) => Object.assign(n, runWithOwner(a, () => r.commands?.(e, { ...n }))), {}));
-		return {
-			get commands() {
-				return o();
-			},
-			scrollToCell(n, r, i) {
-				n = typeof n == "object" ? e.props.columns.indexOf(n) : n, r = typeof r == "object" ? e.props.data.indexOf(r) : r;
-				let a = e.table.querySelector(`[x="${n}"][y="${r}"]`);
-				a && a.scrollIntoView({
+		let r = getOwner(), o = createLazyMemo(() => e.plugins.reduce((i, o) => Object.assign(i, runWithOwner(r, () => o.commands?.(e, { ...i }))), {}));
+		return Object.defineProperty(e, "commands", { get: () => o() }), {
+			scrollToCell(r, i, a) {
+				r = typeof r == "object" ? e.props.columns.indexOf(r) : r, i = typeof i == "object" ? e.props.data.indexOf(i) : i;
+				let o = e.table.querySelector(`[x="${r}"][y="${i}"]`);
+				o && o.scrollIntoView({
 					behavior: "smooth",
-					...i
+					...a
 				});
 			},
-			scrollCellIfNeeded(n, r, i = !1) {
-				n = typeof n == "object" ? e.props.columns.indexOf(n) : n, r = typeof r == "object" ? e.props.data.indexOf(r) : r;
-				let a = e.table.querySelector(`[x="${n}"][y="${r}"]`);
-				a && (a.scrollIntoViewIfNeeded(i), a.focus());
+			scrollCellIfNeeded(r, i, a = !1) {
+				r = typeof r == "object" ? e.props.columns.indexOf(r) : r, i = typeof i == "object" ? e.props.data.indexOf(i) : i;
+				let o = e.table.querySelector(`[x="${r}"][y="${i}"]`);
+				o && (o.scrollIntoViewIfNeeded(a), o.focus());
 			}
 		};
 	},
 	rewriteProps: { Table: ({ Table: s }, { store: c }) => (l) => {
 		let u = getOwner(), d = createMemo(() => {
 			let e = {};
-			for (let n of c.plugins) {
-				let r = runWithOwner(u, () => n.keybindings?.(c));
-				r && Object.assign(e, r);
+			for (let r of c.plugins) {
+				let i = runWithOwner(u, () => r.keybindings?.(c));
+				i && Object.assign(e, i);
 			}
-			let n = c.props?.keybindings;
-			if (n) for (let [r, i] of Object.entries(n)) i === !1 ? delete e[r] : typeof i == "function" && (e[r] = i);
-			return createKeybindingsHandler(Object.fromEntries(Object.entries(e).map(([e, n]) => [e, (e) => {
-				e.preventDefault(), n(e);
+			let r = c.props?.keybindings;
+			if (r) for (let [i, a] of Object.entries(r)) a === !1 ? delete e[i] : typeof a == "function" && (e[i] = a);
+			return createKeybindingsHandler(Object.fromEntries(Object.entries(e).map(([e, r]) => [e, (e) => {
+				e.preventDefault(), r(e);
 			}])));
 		});
 		return createEventListener(() => c.scroll_el, "keydown", (e) => d()(e)), l = combineProps({ tabindex: -1 }, l), createComponent(s, l);

package/dist/plugins/EditablePlugin.js

@@ -19,7 +19,7 @@ const EditablePlugin = {
 		Td: ({ Td: e }, { store: h }) => (_) => {
 			let v, { props: x } = useContext(Ctx), S = createMemo(() => unFn(x.editable, _)), [w, T] = createSignal(!1), A = "", j = createMemo(() => (([e, h]) => _.x == e && _.y == h)(h.selected.start || [])), M = createMemo(() => j() && S() && !w()), [N, P] = createSignal(!1), F = createAsyncMemo(() => {
 				if (w()) {
-					let e = !1, g = _.data[_.col.id], v = ((e) => typeof e == "string" ? h.editors[e] : e)(_.col.editor || "text"), y = {
+					let e = !1, g = _.data[_.col.id], v = ((e) => typeof e == "string" ? h.editors[e] : e)(_.col.editor ?? _.col.type ?? "text"), y = {
 						props: _.col.editorProps,
 						col: _.col,
 						eventKey: A,
@@ -32,20 +32,16 @@ const EditablePlugin = {
 						onChange: (e) => w() && I(e).catch(() => {})
 					}, b = v(y);
 					return onCleanup(() => {
-						if (!e && b.getValue() !== g) {
-							let e = [...x.data];
-							e[_.y] = {
-								...e[_.y],
-								[_.col.id]: b.getValue()
-							}, x.onDataChange?.(e);
-						}
-						e || I(b.getValue()).catch(() => {}), b.destroy();
+						!e && b.getValue() !== g && h.commands.rowChange({
+							...x.data[_.y],
+							[_.col.id]: b.getValue()
+						}), e || I(b.getValue()).catch(() => {}), A = "", b.destroy();
 					}), [y, b];
 				}
 			});
 			async function I(e) {
 				try {
-					P(!0), console.log("validate", e), await h.validateCell(e, _.data, _.col);
+					P(!0), await h.validateCell(e, _.data, _.col);
 				} finally {
 					P(!1);
 				}

package/dist/plugins/FilterPlugin.d.ts

@@ -0,0 +1,18 @@
+import type { Plugin } from '..';
+import type { AndOrNode } from '../components/AndOr';
+declare module '../index' {
+    interface TableProps {
+        filter?: {
+            onChange?: (value: AndOrNode[]) => void;
+            /** @default true */
+            autoMatch?: boolean;
+        };
+    }
+    interface TableColumn {
+        filterable?: boolean;
+    }
+    interface TableStore {
+        filters: Record<string, AndOrNode>;
+    }
+}
+export declare const FilterPlugin: Plugin;

package/dist/plugins/FilterPlugin.js

@@ -0,0 +1,123 @@
+import { normalizeType } from "../components/AndOrFields.js";
+import { Filter } from "../components/Filter.js";
+import { createComponent, memo, mergeProps } from "solid-js/web";
+import { Show } from "solid-js";
+function isBlank(e) {
+	return e == null || String(e).trim() === "";
+}
+function toNum(e) {
+	let c = Number(e);
+	return Number.isNaN(c) ? null : c;
+}
+function toDateTs(e) {
+	if (isBlank(e)) return null;
+	let c = new Date(String(e)).getTime();
+	return Number.isNaN(c) ? null : c;
+}
+function toBool(e) {
+	if (typeof e == "boolean") return e;
+	if (typeof e == "number") return e !== 0;
+	let c = String(e ?? "").trim().toLowerCase();
+	return [
+		"1",
+		"true",
+		"yes",
+		"y",
+		"on"
+	].includes(c) ? !0 : [
+		"0",
+		"false",
+		"no",
+		"n",
+		"off",
+		""
+	].includes(c) ? !1 : !!e;
+}
+function isRuleNode(e) {
+	return "field" in e;
+}
+function hasActiveRule(e) {
+	return !!e.op;
+}
+function hasActiveTree(e) {
+	return e ? isRuleNode(e) ? hasActiveRule(e) : (e.children ?? []).some(hasActiveTree) : !1;
+}
+function matchFilter(e, c, l) {
+	let u = c.op;
+	if (u === "blank") return isBlank(e);
+	if (u === "noblank") return !isBlank(e);
+	if (u === "true") return toBool(e);
+	if (u === "false") return !toBool(e);
+	let d = c.value;
+	if (l === "number") {
+		let c = toNum(e), l = toNum(d);
+		if (c == null || l == null) return !1;
+		if (u === "eq") return c === l;
+		if (u === "lt") return c < l;
+		if (u === "gt") return c > l;
+		if (u === "lte") return c <= l;
+		if (u === "gte") return c >= l;
+	}
+	if (l === "date") {
+		let c = toDateTs(e), l = toDateTs(d);
+		if (c == null || l == null) return !1;
+		if (u === "eq") return c === l;
+		if (u === "lt") return c < l;
+		if (u === "gt") return c > l;
+		if (u === "lte") return c <= l;
+		if (u === "gte") return c >= l;
+	}
+	let f = String(e ?? "").toLowerCase(), g = String(d ?? "").toLowerCase();
+	return u === "eq" ? f === g : u === "neq" ? f !== g : u === "startwith" ? f.startsWith(g) : u === "endwith" ? f.endsWith(g) : f.includes(g);
+}
+function evaluateFilterTree(e, c, l) {
+	if (isRuleNode(c)) return hasActiveRule(c) ? matchFilter(e, c, l) : !0;
+	let u = (c.children ?? []).filter(hasActiveTree);
+	return u.length ? c.op === "or" ? u.some((c) => evaluateFilterTree(e, c, l)) : u.every((c) => evaluateFilterTree(e, c, l)) : !0;
+}
+function passesFilters(c, l, u, d) {
+	return u.every((u) => {
+		if (u[d] || !u.filterable) return !0;
+		let f = l[u.id];
+		return !f || !hasActiveTree(f) ? !0 : evaluateFilterTree(c[u.id], f, normalizeType(u));
+	});
+}
+const FilterPlugin = {
+	name: "filter",
+	store: () => ({ filters: {} }),
+	rewriteProps: {
+		filter: ({ filter: e }, { store: c }) => ({
+			autoMatch: !0,
+			...e
+		}),
+		data: ({ data: e }, { store: c }) => {
+			if (!e) return e;
+			let { filters: l } = c, { columns: u, filter: d } = c.props;
+			return !d.autoMatch || !Object.values(l).some(hasActiveTree) ? e : e.filter((e) => passesFilters(e, l, u, c.internal));
+		},
+		Th: ({ Th: e }, { store: p }) => (m) => {
+			let h = () => !!m.col.filterable && !m.col[p.internal];
+			return createComponent(e, mergeProps(m, { get children() {
+				return [memo(() => m.children), createComponent(Show, {
+					get when() {
+						return h();
+					},
+					get children() {
+						return createComponent(Filter, {
+							get col() {
+								return m.col;
+							},
+							get tree() {
+								return p.filters[m.col.id];
+							},
+							setTree: (e) => {
+								e ? p.filters[m.col.id] = e : delete p.filters[m.col.id], p.props.filter?.onChange?.(Object.values(p.filters));
+							}
+						});
+					}
+				})];
+			} }));
+		}
+	}
+};
+export { FilterPlugin };

package/dist/plugins/LoadMorePlugin.d.ts

@@ -0,0 +1,24 @@
+import { type Component } from 'solid-js';
+import type { Plugin } from '..';
+declare module '../index' {
+    interface TableProps {
+        loadMore?: {
+            enable?: boolean;
+            threshold?: number;
+            debounce?: number;
+            loading?: boolean;
+            hasMore?: boolean;
+            loadingText?: string;
+            noMoreText?: string;
+            onLoadMore?: () => void | Promise<void>;
+        };
+        LoadMore?: Component<TableProps['loadMore']>;
+    }
+    interface TableStore {
+        loadMore: {
+            pending: boolean;
+            lastTriggerAt: number;
+        };
+    }
+}
+export declare const LoadMorePlugin: Plugin;

package/dist/plugins/LoadMorePlugin.js

@@ -0,0 +1,62 @@
+import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
+import { Show, createEffect } from "solid-js";
+import { combineProps } from "@solid-primitives/props";
+import { delay } from "es-toolkit";
+import { createEventListener } from "@solid-primitives/event-listener";
+var _tmpl$ = /* @__PURE__ */ template("<div class=\"data-table__load-more sticky left-0\">");
+function isPromiseLike(e) {
+	return !!e && typeof e.then == "function";
+}
+var LoadMoreLayer = (s) => {
+	let c = () => !!s.enable && (s.loading || s.hasMore === !1), l = () => s.loading ? s.loadingText ?? "loading..." : s.noMoreText ?? "无更多数据";
+	return createComponent(Show, {
+		get when() {
+			return c();
+		},
+		get children() {
+			var e = _tmpl$();
+			return insert(e, l), e;
+		}
+	});
+};
+const LoadMorePlugin = {
+	name: "loadMore",
+	store: () => ({ loadMore: {
+		pending: !1,
+		lastTriggerAt: 0
+	} }),
+	rewriteProps: {
+		loadMore: ({ loadMore: e }, { store: o }) => ({
+			enable: !1,
+			threshold: 40,
+			debounce: 200,
+			...e
+		}),
+		LoadMore: ({ LoadMore: o = LoadMoreLayer }, { store: s }) => () => createComponent(o, mergeProps(() => s.props.loadMore)),
+		Footer: ({ Footer: o }, { store: l }) => (u) => createComponent(o, mergeProps(() => combineProps({ class: "contents" }, u), { get children() {
+			return [memo(() => u.children), createComponent(l.props.LoadMore, {})];
+		} }))
+	},
+	onMount: (e) => {
+		let o = () => {
+			let s = e.props.loadMore;
+			if (!s.enable || !s.onLoadMore || s.hasMore === !1 || s.loading || e.loadMore.pending) return;
+			let c = e.scroll_el;
+			if (!c) return;
+			let l = c.scrollHeight - c.scrollTop - c.clientHeight, u = s.threshold;
+			if (l > u) return;
+			let d = Date.now(), f = s.debounce;
+			if (d - e.loadMore.lastTriggerAt < f) return;
+			e.loadMore.lastTriggerAt = d;
+			let p = s.onLoadMore();
+			isPromiseLike(p) && (e.loadMore.pending = !0, p.finally(() => {
+				e.loadMore.pending = !1, delay(0).then(o);
+			}));
+		};
+		createEffect(() => {
+			let s = e.scroll_el, c = e.props.loadMore;
+			!s || !c.enable || (createEventListener(() => e.scroll_el, "scroll", o, { passive: !0 }), queueMicrotask(o));
+		});
+	}
+};
+export { LoadMorePlugin };

package/dist/plugins/MenuPlugin.js

@@ -71,15 +71,16 @@ const MenuPlugin = {
 		}
 	],
 	commands: (e) => ({
-		rowEquals(e, r) {
-			return e == r;
+		rowEquals(r, i) {
+			let a = e.props.rowKey;
+			return r == i || a != null && r?.[a] == i?.[a];
 		},
 		rowIndexOf(r, i) {
 			return r.findIndex((r) => e.commands.rowEquals(r, i));
 		},
 		rowChange(r, i) {
 			let a = [...e.rawProps.data || []];
-			i = i == null ? e.commands.rowIndexOf(a, r) : a.findIndex((r) => r == e.props.data[i]), i > -1 && (a[i] = r, e.props.onDataChange?.(a));
+			i = i == null ? e.commands.rowIndexOf(a, r) : a.findIndex((r) => e.commands.rowEquals(r, e.props.data[i])), i > -1 && (a[i] = r, e.props.onDataChange?.(a));
 		},
 		addRows(r, i, a = !0) {
 			addRows(e, r, i, a);

package/dist/plugins/RenderPlugin/index.d.ts

@@ -4,6 +4,7 @@ declare module '../../index' {
     interface TableProps {
     }
     interface TableColumn {
+        type?: string;
         render?: Render;
         enum?: Record<string, any> | {
             label?: string;

package/dist/plugins/RenderPlugin/index.js

@@ -10,7 +10,7 @@ const RenderPlugin = {
 	store: () => ({ renders: { ...renders } }),
 	rewriteProps: { Td: ({ Td: e }, { store: p }) => (m) => createComponent(e, mergeProps(m, { get children() {
 		return (() => {
-			let e = ((e) => typeof e == "string" ? p.renders[e] : e)(m.col.render) || text;
+			let e = ((e) => typeof e == "string" ? p.renders[e] : e)(m.col.render ?? m.col.type) || text;
 			return renderComponent(e, mergeProps$1(m, { onChange: (e) => p.commands.rowChange({
 				...m.data,
 				[m.col.id]: e

package/dist/plugins/ValidatorPlugin.js

@@ -1,72 +1,73 @@
+import { isEmpty } from "../utils.js";
 import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
 import { combineProps } from "@solid-primitives/props";
-var _tmpl$ = /* @__PURE__ */ template("<div class=cell-validation-error>"), _tmpl$2 = /* @__PURE__ */ template("<span class=\"mr-1 c-red/75\">*"), isEmpty = (e) => e == null || e === "" || Array.isArray(e) && e.length === 0 || typeof e == "object" && Object.keys(e).length === 0;
+var _tmpl$ = /* @__PURE__ */ template("<div class=cell-validation-error>"), _tmpl$2 = /* @__PURE__ */ template("<span class=\"mr-1 c-red/75\">*");
 const ValidatorPlugin = {
 	name: "validator",
-	store: (e) => ({
+	store: (t) => ({
 		cellValidationErrors: {},
-		validateCell: async (t, n, r, i) => {
-			if (n[e.internal] || r[e.internal]) return;
-			let a = [
+		validateCell: async (n, r, i, a) => {
+			if (r[t.internal] || i[t.internal]) return;
+			let o = [
 				() => {
-					if (r.required && isEmpty(t)) throw Error("Required");
+					if (i.required && isEmpty(n)) throw Error("Required");
 				},
-				r.validator,
-				e.props.validator
-			], o = n[e.props.rowKey];
-			for (let s of a) {
-				if (!s) continue;
+				i.validator,
+				t.props.validator
+			], s = r[t.props.rowKey];
+			for (let e of o) {
+				if (!e) continue;
 				try {
-					await s(t, n, r);
-				} catch (t) {
-					let a = t.message || "Error";
-					throw e.cellValidationErrors[o] ??= {}, e.cellValidationErrors[o][r.id] = a, i && e.scrollToCell?.(r, n), Error(a);
+					await e(n, r, i);
+				} catch (e) {
+					let n = e.message || "Error";
+					throw t.cellValidationErrors[s] ??= {}, t.cellValidationErrors[s][i.id] = n, a && t.scrollToCell?.(i, r), Error(n);
 				}
 			}
-			e.cellValidationErrors[o] ??= {}, e.cellValidationErrors[o][r.id] = null;
+			t.cellValidationErrors[s] ??= {}, t.cellValidationErrors[s][i.id] = null;
 		},
-		validateRow: async (t, n) => {
-			let r = e.props.columns, i = r.map((n) => e.validateCell(t[n.id], t, n)), a = await Promise.all(i.map((e) => e.catch((e) => e))), o = a.map((e, t) => e instanceof Error ? [r[t].id, e] : null).filter((e) => e);
+		validateRow: async (e, n) => {
+			let r = t.props.columns, i = r.map((n) => t.validateCell(e[n.id], e, n)), a = await Promise.all(i.map((e) => e.catch((e) => e))), o = a.map((e, t) => e instanceof Error ? [r[t].id, e] : null).filter((e) => e);
 			if (o.length) {
 				if (n) {
 					let n = r[a.findIndex((e) => e instanceof Error)];
-					e.scrollToCell?.(n, t);
+					t.scrollToCell?.(n, e);
 				}
 				throw Object.fromEntries(o);
 			}
 		},
 		validate: async () => {
-			let t = (e.rawProps.data || []).map((t) => e.validateRow(t)), n = (await Promise.all(t.map((e) => e.catch((e) => e)))).map((e, t) => e ? [t, e] : null).filter((e) => e);
-			if (n.length) throw e.scrollToCell?.(e.props.columns.findIndex((e) => e.id === Object.keys(n[0][1])[0]), e.props.data?.[n[0][0]]), n[0][1];
+			let e = (t.rawProps.data || []).map((e) => t.validateRow(e)), n = (await Promise.all(e.map((e) => e.catch((e) => e)))).map((e, t) => e ? [t, e] : null).filter((e) => e);
+			if (n.length) throw t.scrollToCell?.(t.props.columns.findIndex((e) => e.id === Object.keys(n[0][1])[0]), t.props.data?.[n[0][0]]), n[0][1];
 		},
-		clearCellValidation: (t, n) => {
-			let r = t[e.props.rowKey];
-			e.cellValidationErrors[r] && (e.cellValidationErrors[r][n.id] = null);
+		clearCellValidation: (e, n) => {
+			let r = e[t.props.rowKey];
+			t.cellValidationErrors[r] && (t.cellValidationErrors[r][n.id] = null);
 		},
-		clearRowValidation: (t) => {
-			let n = t[e.props.rowKey];
-			if (!e.cellValidationErrors[n]) return;
-			let r = e.props.columns;
-			for (let t of r) e.cellValidationErrors[n][t.id] = null;
+		clearRowValidation: (e) => {
+			let n = e[t.props.rowKey];
+			if (!t.cellValidationErrors[n]) return;
+			let r = t.props.columns;
+			for (let e of r) t.cellValidationErrors[n][e.id] = null;
 		},
 		clearValidation: () => {
-			e.cellValidationErrors = {};
+			t.cellValidationErrors = {};
 		}
 	}),
 	rewriteProps: {
-		Td: ({ Td: i }, { store: s }) => (c) => {
-			let l = () => s.cellValidationErrors[c.data[s.props.rowKey]]?.[c.col.id], u = combineProps(c, { get class() {
+		Td: ({ Td: e }, { store: a }) => (c) => {
+			let l = () => a.cellValidationErrors[c.data[a.props.rowKey]]?.[c.col.id], u = combineProps(c, { get class() {
 				return l() == null ? "" : "is-invalid";
 			} });
-			return createComponent(i, mergeProps(u, { get children() {
+			return createComponent(e, mergeProps(u, { get children() {
 				return [memo(() => c.children), memo(() => memo(() => l() != null)() && (() => {
 					var e = _tmpl$();
 					return insert(e, l), e;
 				})())];
 			} }));
 		},
-		Th: ({ Th: t }, { store: i }) => (i) => createComponent(t, mergeProps(i, { get children() {
-			return [memo(() => memo(() => !!i.col.required)() && _tmpl$2()), memo(() => i.children)];
+		Th: ({ Th: e }, { store: n }) => (n) => createComponent(e, mergeProps(n, { get children() {
+			return [memo(() => memo(() => !!n.col.required)() && _tmpl$2()), memo(() => n.children)];
 		} }))
 	}
 };