intable 0.0.30 → 0.0.32

package/dist/plugins/AutoFillPlugin.js

@@ -1,8 +1,10 @@
 import { usePointerDrag } from "../hooks/index.js";
+import { useFloating } from "../components/Popover.js";
 import { delegateEvents, effect, style, template, use } from "solid-js/web";
 import { createMemo, createSignal } from "solid-js";
 import { createScrollPosition } from "@solid-primitives/scroll";
-var _tmpl$ = /* @__PURE__ */ template("<div>"), _tmpl$2 = /* @__PURE__ */ template("<div title=\"Drag to fill\">");
+import { offset } from "floating-ui-solid";
+var _tmpl$ = /* @__PURE__ */ template("<div>"), _tmpl$2 = /* @__PURE__ */ template("<div title=\"Drag to fill\"class=\"pointer-events-auto w-2.5 h-2.5 bg-[--c-primary] b-2px b-solid b-[--table-bg] cursor-crosshair\">");
 function inferFill(e, t, n = 1) {
 	if (!e.length) return Array(t).fill(null);
 	let r = e.map((e) => typeof e == "number" ? e : Number(e));
@@ -20,7 +22,7 @@ function inferFill(e, t, n = 1) {
 	return Array.from({ length: t }, (t, n) => e[n % e.length]);
 }
 function applyFill(e, t, n, r, i) {
-	let { internal: a } = i, { data: o, columns: s } = i.props, c = r > 0 ? 1 : -1, l = Math.abs(r), u = /* @__PURE__ */ new Map(), f = (e) => (u.has(e) || u.set(e, { ...o[e] }), u.get(e)), p, m;
+	let { internal: a } = i, { data: o, columns: s } = i.props, c = r > 0 ? 1 : -1, l = Math.abs(r), u = /* @__PURE__ */ new Map(), d = (e) => (u.has(e) || u.set(e, { ...o[e] }), u.get(e)), f, m;
 	if (n === "v") {
 		let n = o.slice(t[0], t[1] + 1);
 		for (let r = e[0]; r <= e[1] && r < s.length; r++) {
@@ -29,10 +31,10 @@ function applyFill(e, t, n, r, i) {
 			let i = inferFill(n.map((t) => t[e.id]), l, c);
 			for (let n = 0; n < l; n++) {
 				let r = c === 1 ? t[1] + 1 + n : t[0] - l + n;
-				r >= 0 && r < o.length && (f(r)[e.id] = i[n]);
+				r >= 0 && r < o.length && (d(r)[e.id] = i[n]);
 			}
 		}
-		p = [e[0], c === 1 ? t[0] : Math.max(t[0] - l, 0)], m = [e[1], c === 1 ? Math.min(t[1] + l, o.length - 1) : t[1]];
+		f = [e[0], c === 1 ? t[0] : Math.max(t[0] - l, 0)], m = [e[1], c === 1 ? Math.min(t[1] + l, o.length - 1) : t[1]];
 	} else {
 		for (let n = t[0]; n <= t[1] && n < o.length; n++) {
 			let t = s.slice(e[0], e[1] + 1).filter((e) => e && !e[a]).map((e) => o[n][e.id]), r = inferFill(t, l, c);
@@ -40,91 +42,96 @@ function applyFill(e, t, n, r, i) {
 				let i = c === 1 ? e[1] + 1 + t : e[0] - l + t;
 				if (i < 0 || i >= s.length) continue;
 				let o = s[i];
-				o && !o[a] && (f(n)[o.id] = r[t]);
+				o && !o[a] && (d(n)[o.id] = r[t]);
 			}
 		}
-		p = [c === 1 ? e[0] : Math.max(e[0] - l, 0), t[0]], m = [c === 1 ? Math.min(e[1] + l, s.length - 1) : e[1], t[1]];
+		f = [c === 1 ? e[0] : Math.max(e[0] - l, 0), t[0]], m = [c === 1 ? Math.min(e[1] + l, s.length - 1) : e[1], t[1]];
 	}
 	return {
 		rowsMap: u,
-		newStart: p,
+		newStart: f,
 		newEnd: m
 	};
 }
 const AutoFillPlugin = {
 	name: "auto-fill",
-	layers: [(t) => {
-		let i = createScrollPosition(() => t.scroll_el), d = createMemo(() => {
-			let { start: e, end: n } = t.selected ?? {};
-			if (!e?.length || !n?.length) return null;
-			let r = [e[0], n[0]].sort((e, t) => e - t), i = [e[1], n[1]].sort((e, t) => e - t);
+	layers: [(n) => {
+		let a = createScrollPosition(() => n.scroll_el), p = createMemo(() => {
+			let { start: e, end: t } = n.selected ?? {};
+			if (!e?.length || !t?.length) return null;
+			let r = [e[0], t[0]].sort((e, t) => e - t), i = [e[1], t[1]].sort((e, t) => e - t);
 			return Number.isFinite(r[1]) && Number.isFinite(i[1]) ? {
 				xs: r,
 				ys: i
 			} : null;
-		}), p = createMemo(() => {
-			let e = t.thSizes ?? [], n = t.trSizes ?? [], r = e[0]?.height ?? 30, a = i.x, o = i.y, s = (t) => e.slice(0, t).reduce((e, t) => e + (t?.width ?? 0), 0) - a, c = (t) => s(t) + (e[t]?.width ?? 0), l = (e) => r + n.slice(0, e).reduce((e, t) => e + (t?.height ?? 28), 0) - o;
+		}), h = createMemo(() => {
+			let e = n.thSizes ?? [], t = n.trSizes ?? [], r = e[0]?.height ?? 30, i = a.x, o = a.y, s = (t) => e.slice(0, t).reduce((e, t) => e + (t?.width ?? 0), 0) - i, c = (t) => s(t) + (e[t]?.width ?? 0), l = (e) => r + t.slice(0, e).reduce((e, t) => e + (t?.height ?? 28), 0) - o;
 			return {
 				colX: s,
 				colR: c,
 				rowY: l,
-				rowB: (e) => l(e) + (n[e]?.height ?? 28)
+				rowB: (e) => l(e) + (t[e]?.height ?? 28)
 			};
-		}), m = createMemo(() => {
-			let e = t.props.autoFill;
-			return e === !0 || e?.enable === !0;
-		}), h = createMemo(() => {
-			if (!m()) return "display:none;position:absolute";
-			let e = d();
-			if (!e) return "display:none;position:absolute";
-			let { colR: t, rowB: n } = p(), r = t(e.xs[1]), i = n(e.ys[1]);
-			return `position:absolute;left:${r - 4}px;top:${i - 4}px;width:8px;height:8px;background:var(--c-primary);border:2px solid var(--table-bg);border-radius:1px;box-shadow:0 0 0 1px var(--c-primary);z-index:3;cursor:crosshair`;
-		}), [g, _] = createSignal(null), v = createMemo(() => {
-			let e = g(), n = d();
-			if (!e || !n || !e.delta) return "display:none;position:absolute";
-			let { xs: r, ys: i } = n, { colX: a, colR: o, rowY: s, rowB: c } = p(), l = e.delta > 0 ? 1 : -1, u = Math.abs(e.delta), f = t.props.data.length, m = t.props.columns.length, h, _, v, y;
-			e.axis === "v" ? (h = a(r[0]), v = o(r[1]), [_, y] = l > 0 ? [c(i[1]), c(Math.min(i[1] + u, f - 1))] : [s(Math.max(i[0] - u, 0)), s(i[0])]) : (_ = s(i[0]), y = c(i[1]), [h, v] = l > 0 ? [o(r[1]), o(Math.min(r[1] + u, m - 1))] : [a(Math.max(r[0] - u, 0)), a(r[0])]);
-			let b = v - h, x = y - _;
-			return b <= 0 || x <= 0 ? "display:none;position:absolute" : `position:absolute;left:${h}px;top:${_}px;width:${b}px;height:${x}px;border:1.5px dashed var(--c-primary);background:rgba(99,102,241,0.08);pointer-events:none;z-index:3`;
-		}), y, b = (e, n, r, i) => {
-			let { rowsMap: a, newStart: o, newEnd: s } = applyFill(e, n, r, i, t);
-			a.size && (t.commands.rowsChange([...a.values()]), t.selected.start = o, t.selected.end = s);
-		}, x = (e) => {
+		}), g = createMemo(() => {
+			if (!p()) return;
+			let { xs: e, ys: t } = p();
+			if (n.props.columns[e[1]][n.internal] || n.props.data[t[1]][n.internal]) return;
+			let r = n.props.autoFill;
+			return r === !0 || r?.enable === !0;
+		}), [_, v] = createSignal(null), y = createMemo(() => {
+			let e = _(), t = p();
+			if (!e || !t || !e.delta) return "display:none;position:absolute";
+			let { xs: r, ys: i } = t, { colX: a, colR: o, rowY: s, rowB: c } = h(), l = e.delta > 0 ? 1 : -1, u = Math.abs(e.delta), d = n.props.data.length, f = n.props.columns.length, m, g, v, y;
+			e.axis === "v" ? (m = a(r[0]), v = o(r[1]), [g, y] = l > 0 ? [c(i[1]), c(Math.min(i[1] + u, d - 1))] : [s(Math.max(i[0] - u, 0)), s(i[0])]) : (g = s(i[0]), y = c(i[1]), [m, v] = l > 0 ? [o(r[1]), o(Math.min(r[1] + u, f - 1))] : [a(Math.max(r[0] - u, 0)), a(r[0])]);
+			let b = v - m, x = y - g;
+			return b <= 0 || x <= 0 ? "display:none;position:absolute" : `position:absolute;left:${m}px;top:${g}px;width:${b}px;height:${x}px;border:1.5px dashed var(--c-primary);background:rgba(99,102,241,0.08);pointer-events:none;z-index:3`;
+		}), [b, x] = createSignal(), S = (e, t, r, i) => {
+			let { rowsMap: a, newStart: o, newEnd: s } = applyFill(e, t, r, i, n);
+			a.size && (n.commands.rowsChange([...a.values()]), n.selected.start = o, n.selected.end = s);
+		};
+		useFloating({
+			reference: () => g() ? (n.ths[p()?.xs[1]], n.trs[p()?.ys[1]]?.querySelector(`[x="${p()?.xs[1]}"]`)) : null,
+			floating: b,
+			placement: "bottom-end",
+			middleware: [offset({
+				crossAxis: 5,
+				mainAxis: -5
+			})]
+		});
+		let C = (e) => {
 			e.stopPropagation();
-			let n = d();
-			if (!n) return;
-			let { xs: r, ys: i } = n, { data: a, columns: o } = t.props, s = r[0] > 0 ? r[0] - 1 : r[1] < o.length - 1 ? r[1] + 1 : -1, c = a.length - 1;
+			let t = p();
+			if (!t) return;
+			let { xs: r, ys: i } = t, { data: a, columns: o } = n.props, s = r[0] > 0 ? r[0] - 1 : r[1] < o.length - 1 ? r[1] + 1 : -1, c = a.length - 1;
 			if (s >= 0) {
 				let e = o[s];
-				if (e && !e[t.internal]) for (let t = i[1] + 1; t < a.length; t++) {
+				if (e && !e[n.internal]) for (let t = i[1] + 1; t < a.length; t++) {
 					let n = a[t][e.id];
 					if (n != null && n !== "") c = t;
 					else break;
 				}
 			}
-			b(r, i, "v", c - i[1]);
+			S(r, i, "v", c - i[1]);
 		};
-		return usePointerDrag(() => y, { start(e, n, r) {
+		return usePointerDrag(b, { start(e, t, n) {
 			e.stopPropagation(), e.preventDefault();
-			let i = d();
-			if (!i) return;
-			let { xs: a, ys: o } = i, s = 0, c = "v";
-			n((e, { ox: n, oy: r }) => {
-				Math.abs(r) >= Math.abs(n) ? (c = "v", s = Math.round(r / (t.trSizes?.[o[1]]?.height ?? 28))) : (c = "h", s = Math.round(n / (t.thSizes?.[a[1]]?.width ?? 100))), _(s ? {
-					axis: c,
-					delta: s
+			let r = p();
+			if (!r) return;
+			let { xs: i, ys: a } = r, o = 0, s = "v";
+			t((e, { ox: t, oy: n }) => {
+				Math.abs(n) >= Math.abs(t) ? (s = "v", o = e.composedPath().find((e) => e.tagName == "TD")?.getAttribute("y") - a[1]) : (s = "h", o = e.composedPath().find((e) => e.tagName == "TD")?.getAttribute("x") - i[1]), v(o ? {
+					axis: s,
+					delta: o
 				} : null);
-			}), r(() => {
-				_(null), b(a, o, c, s);
+			}), n(() => {
+				v(null), S(i, a, s, o);
 			});
 		} }), [(() => {
 			var e = _tmpl$();
-			return effect((t) => style(e, v(), t)), e;
+			return effect((t) => style(e, y(), t)), e;
 		})(), (() => {
 			var e = _tmpl$2();
-			e.$$dblclick = x;
-			var t = y;
-			return typeof t == "function" ? use(t, e) : y = e, effect((t) => style(e, h() + ";pointer-events:auto", t)), e;
+			return e.$$dblclick = C, use(x, e), e;
 		})()];
 	}]
 };

package/dist/plugins/DiffPlugin.d.ts

@@ -10,7 +10,7 @@ declare module '../index' {
             removed?: boolean;
             /** @default true */
             changed?: boolean;
-            onCommit?: (data: any, opt: {
+            onCommit?: (opt: {
                 added: any[];
                 removed: any[];
                 changed: any[];
@@ -22,7 +22,7 @@ declare module '../index' {
         diffDataKeyed: () => any;
     }
     interface Commands {
-        diffCommit(data?: any[]): Promise<void>;
+        diffCommit(): Promise<void>;
     }
 }
 export declare const DiffPlugin: Plugin;

package/dist/plugins/DiffPlugin.js

@@ -11,14 +11,14 @@ const DiffPlugin = {
 		diffData: () => e.props.diff?.data ?? [],
 		diffDataKeyed: createLazyMemo(() => keyBy(e.diffData(), (o) => o[e.props.rowKey]))
 	}),
-	commands: (e) => ({ async diffCommit(o = e.rawProps.data || []) {
-		let { rowKey: s } = e.props || {}, c = [], l = [], u = [], d = keyBy(o, (e) => e[s]);
+	commands: (e) => ({ async diffCommit() {
+		let o = e.rawProps.data || [], { rowKey: s } = e.props || {}, c = [], l = [], u = [], d = keyBy(o, (e) => e[s]);
 		for (let l of o) {
 			let o = e.diffDataKeyed()[l[s]];
 			o ? isEqual(l, o) || u.push(l) : c.push(l);
 		}
 		for (let o of e.diffData()) !d[o[s]] && l.push(o);
-		await e.props.diff?.onCommit?.(o, {
+		await e.props.diff?.onCommit?.({
 			added: c,
 			removed: l,
 			changed: u
@@ -26,7 +26,6 @@ const DiffPlugin = {
 	} }),
 	rewriteProps: {
 		diff: ({ diff: e }) => ({
-			enable: !1,
 			added: !0,
 			removed: !0,
 			changed: !0,

package/dist/plugins/FilterPlugin.d.ts

@@ -1,8 +1,12 @@
 import type { Plugin } from '..';
 import type { AndOrNode } from '../components/AndOr';
+import { useControlled } from '../hooks/useControlled';
 declare module '../index' {
     interface TableProps {
         filter?: {
+            value?: AndOrNode[];
+            defaultValue?: AndOrNode[];
+            initialValue?: AndOrNode[];
             onChange?: (value: AndOrNode[]) => void;
             /** @default true */
             autoMatch?: boolean;
@@ -12,7 +16,7 @@ declare module '../index' {
         filterable?: boolean;
     }
     interface TableStore {
-        filters: Record<string, AndOrNode>;
+        filter: ReturnType<typeof useControlled<Exclude<TableProps['filter'], undefined>>>;
     }
 }
 export declare const FilterPlugin: Plugin;

package/dist/plugins/FilterPlugin.js

@@ -1,38 +1,40 @@
-import { toArr } from "../utils.js";
+import { findret, toArr } from "../utils.js";
+import { useControlled } from "../hooks/useControlled.js";
 import { normalizeType } from "../components/AndOrFields.js";
-import { Filter } from "../components/Filter.js";
+import { Filter, firstRule, isRuleNode } from "../components/Filter.js";
 import { createComponent, memo, mergeProps } from "solid-js/web";
-import { Show } from "solid-js";
+import { Show, mergeProps as mergeProps$1 } from "solid-js";
+import { keyBy } from "es-toolkit";
 function isBlank(e) {
 	return e == null || String(e).trim() === "";
 }
 function toNum(e) {
-	let a = Number(e);
-	return Number.isNaN(a) ? null : a;
+	let m = Number(e);
+	return Number.isNaN(m) ? null : m;
 }
 function toDateTs(e) {
 	if (isBlank(e)) return null;
-	let a = new Date(String(e)).getTime();
-	return Number.isNaN(a) ? null : a;
+	let m = new Date(String(e)).getTime();
+	return Number.isNaN(m) ? null : m;
 }
 function toBool(e) {
 	if (typeof e == "boolean") return e;
 	if (typeof e == "number") return e !== 0;
-	let a = String(e ?? "").trim().toLowerCase();
+	let m = String(e ?? "").trim().toLowerCase();
 	return [
 		"1",
 		"true",
 		"yes",
 		"y",
 		"on"
-	].includes(a) ? !0 : [
+	].includes(m) ? !0 : [
 		"0",
 		"false",
 		"no",
 		"n",
 		"off",
 		""
-	].includes(a) ? !1 : !!e;
+	].includes(m) ? !1 : !!e;
 }
 function toList(e) {
 	return Array.isArray(e) ? e : e == null || String(e).trim() === "" ? [] : String(e).split(",").map((e) => e.trim()).filter(Boolean);
@@ -40,11 +42,8 @@ function toList(e) {
 function toPair(e) {
 	if (Array.isArray(e)) return [e[0], e[1]];
 	if (e == null || String(e).trim() === "") return [void 0, void 0];
-	let a = String(e).split(",").map((e) => e.trim());
-	return [a[0], a[1]];
-}
-function isRuleNode(e) {
-	return "field" in e;
+	let m = String(e).split(",").map((e) => e.trim());
+	return [m[0], m[1]];
 }
 function hasActiveRule(e) {
 	return !!e.op;
@@ -52,108 +51,109 @@ function hasActiveRule(e) {
 function hasActiveTree(e) {
 	return e ? isRuleNode(e) ? hasActiveRule(e) : (e.children ?? []).some(hasActiveTree) : !1;
 }
-function matchFilter(e, a, o) {
-	let s = a.op;
-	if (s === "blank") return isBlank(e);
-	if (s === "noblank") return !isBlank(e);
-	if (s === "true") return toBool(e);
-	if (s === "false") return !toBool(e);
-	let c = a.value;
-	if (o === "number") {
-		let a = toNum(e), o = toNum(c), l = toList(c).map(toNum).filter((e) => e != null), [u, d] = toPair(c), p = toNum(u), m = toNum(d);
-		if (a == null) return !1;
-		if (s === "eq") return a === o;
-		if (s === "ne") return a !== o;
-		if (s === "in") return l.includes(a);
-		if (s === "not_in") return !l.includes(a);
-		if (s === "between") return p != null && m != null && a >= Math.min(p, m) && a <= Math.max(p, m);
-		if (s === "not_between") return p != null && m != null && (a < Math.min(p, m) || a > Math.max(p, m));
-		if (o == null) return !1;
-		if (s === "lt") return a < o;
-		if (s === "gt") return a > o;
-		if (s === "lte") return a <= o;
-		if (s === "gte") return a >= o;
+function matchFilter(e, m, h) {
+	let g = m.op;
+	if (g === "blank") return isBlank(e);
+	if (g === "noblank") return !isBlank(e);
+	if (g === "true") return toBool(e);
+	if (g === "false") return !toBool(e);
+	let _ = m.value;
+	if (h === "number") {
+		let m = toNum(e), h = toNum(_), v = toList(_).map(toNum).filter((e) => e != null), [y, b] = toPair(_), x = toNum(y), S = toNum(b);
+		if (m == null) return !1;
+		if (g === "eq") return m === h;
+		if (g === "ne") return m !== h;
+		if (g === "in") return v.includes(m);
+		if (g === "not_in") return !v.includes(m);
+		if (g === "between") return x != null && S != null && m >= Math.min(x, S) && m <= Math.max(x, S);
+		if (g === "not_between") return x != null && S != null && (m < Math.min(x, S) || m > Math.max(x, S));
+		if (h == null) return !1;
+		if (g === "lt") return m < h;
+		if (g === "gt") return m > h;
+		if (g === "lte") return m <= h;
+		if (g === "gte") return m >= h;
 	}
-	if (o === "date") {
-		let a = toDateTs(e), o = toDateTs(c), l = toList(c).map(toDateTs).filter((e) => e != null), [u, d] = toPair(c), f = toDateTs(u), m = toDateTs(d);
-		if (a == null) return !1;
-		if (s === "eq") return a === o;
-		if (s === "ne") return a !== o;
-		if (s === "in") return l.includes(a);
-		if (s === "not_in") return !l.includes(a);
-		if (s === "between") return f != null && m != null && a >= Math.min(f, m) && a <= Math.max(f, m);
-		if (s === "not_between") return f != null && m != null && (a < Math.min(f, m) || a > Math.max(f, m));
-		if (o == null) return !1;
-		if (s === "lt") return a < o;
-		if (s === "gt") return a > o;
-		if (s === "lte") return a <= o;
-		if (s === "gte") return a >= o;
+	if (h === "date") {
+		let m = toDateTs(e), h = toDateTs(_), v = toList(_).map(toDateTs).filter((e) => e != null), [y, b] = toPair(_), x = toDateTs(y), S = toDateTs(b);
+		if (m == null) return !1;
+		if (g === "eq") return m === h;
+		if (g === "ne") return m !== h;
+		if (g === "in") return v.includes(m);
+		if (g === "not_in") return !v.includes(m);
+		if (g === "between") return x != null && S != null && m >= Math.min(x, S) && m <= Math.max(x, S);
+		if (g === "not_between") return x != null && S != null && (m < Math.min(x, S) || m > Math.max(x, S));
+		if (h == null) return !1;
+		if (g === "lt") return m < h;
+		if (g === "gt") return m > h;
+		if (g === "lte") return m <= h;
+		if (g === "gte") return m >= h;
 	}
-	let l = String(e ?? "").toLowerCase(), u = String(c ?? "").toLowerCase(), h = toList(c).map((e) => String(e).toLowerCase()), [g, _] = toPair(c), v = String(g ?? "").toLowerCase(), y = String(_ ?? "").toLowerCase();
-	return s === "eq" ? l === u : s === "ne" ? l !== u : s === "in" ? h.includes(l) : s === "not_in" ? !h.includes(l) : s === "between" ? v !== "" && y !== "" && l >= (v < y ? v : y) && l <= (v < y ? y : v) : s === "not_between" ? v !== "" && y !== "" && (l < (v < y ? v : y) || l > (v < y ? y : v)) : s === "startwith" ? l.startsWith(u) : s === "endwith" ? l.endsWith(u) : l.includes(u);
+	let v = String(e ?? "").toLowerCase(), y = String(_ ?? "").toLowerCase(), b = toList(_).map((e) => String(e).toLowerCase()), [x, S] = toPair(_), C = String(x ?? "").toLowerCase(), w = String(S ?? "").toLowerCase();
+	return g === "eq" ? v === y : g === "ne" ? v !== y : g === "in" ? b.includes(v) : g === "not_in" ? !b.includes(v) : g === "between" ? C !== "" && w !== "" && v >= (C < w ? C : w) && v <= (C < w ? w : C) : g === "not_between" ? C !== "" && w !== "" && (v < (C < w ? C : w) || v > (C < w ? w : C)) : g === "startwith" ? v.startsWith(y) : g === "endwith" ? v.endsWith(y) : v.includes(y);
 }
-function evaluateFilterTree(e, a, o) {
-	if (isRuleNode(a)) return hasActiveRule(a) ? matchFilter(e, a, o) : !0;
-	let s = (a.children ?? []).filter(hasActiveTree);
-	return s.length ? a.op === "or" ? s.some((a) => evaluateFilterTree(e, a, o)) : s.every((a) => evaluateFilterTree(e, a, o)) : !0;
+function evaluateFilterTree(e, m, h) {
+	if (isRuleNode(m)) return hasActiveRule(m) ? matchFilter(e[m.field], m, h(m)) : !0;
+	let g = (m.children ?? []).filter(hasActiveTree);
+	return g.length ? m.op === "or" ? g.some((m) => evaluateFilterTree(e, m, h)) : g.every((m) => evaluateFilterTree(e, m, h)) : !0;
 }
-function passesFilters(e, o, s, c) {
-	return s.every((s) => {
-		if (s[c] || !s.filterable) return !0;
-		let l = o[s.id];
-		return !l || !hasActiveTree(l) ? !0 : evaluateFilterTree(e[s.id], l, normalizeType(s));
-	});
+function passesFilters(e, m, h) {
+	let _ = keyBy(h, (e) => e.id);
+	return evaluateFilterTree(e, {
+		op: "and",
+		children: m
+	}, (e) => normalizeType(_[e.field]));
 }
 const FilterPlugin = {
 	name: "filter",
-	store: () => ({ filters: {} }),
 	rewriteProps: {
-		filter: ({ filter: e }) => ({
+		filter: ({ filter: e }, { store: m }) => (e = mergeProps$1({
 			autoMatch: !0,
+			initialValue: [],
 			...e
-		}),
-		newRow: ({ newRow: a }, { store: o }) => function(...s) {
-			let c = a(...s), { filters: l, props: u } = o, { columns: d } = u;
-			return d.forEach((a) => {
-				if (a[o.internal] || !a.filterable) return;
-				let s = l[a.id];
-				s && isRuleNode(s) && (c[a.id] = {
-					ne: `not ${s.value}`,
-					between: toArr(s.value)[0],
+		}, e), m.filter ??= useControlled(e, m.owner), m.filter.$setOpt(e), m.filter),
+		newRow: ({ newRow: e }, { store: h }) => function(...g) {
+			let _ = e(...g), { filters: v, props: b } = h, { columns: x } = b;
+			return x.forEach((e) => {
+				if (e[h.internal] || !e.filterable) return;
+				let g = v[e.id];
+				g && isRuleNode(g) && (_[e.id] = {
+					ne: `not ${g.value}`,
+					between: toArr(g.value)[0],
 					not_between: NaN,
-					in: toArr(s.value)[0],
+					in: toArr(g.value)[0],
 					not_in: "",
-					lt: s.value - 1,
-					gt: s.value + 1,
+					lt: g.value - 1,
+					gt: g.value + 1,
 					blank: "",
 					noblank: "default",
 					true: !0,
 					false: !1
-				}[s.op] ?? s.value);
-			}), c;
+				}[g.op] ?? g.value);
+			}), _;
 		},
-		data: ({ data: e }, { store: a }) => {
+		data: ({ data: e }, { store: m }) => {
 			if (!e) return e;
-			let { filters: o } = a, { columns: s, filter: c } = a.props;
-			return !c.autoMatch || !Object.values(o).some(hasActiveTree) ? e : e.filter((e) => passesFilters(e, o, s, a.internal));
+			let { columns: h } = m.props, g = m.props.filter;
+			return !g.autoMatch || !g.value.some(hasActiveTree) ? e : e.filter((e) => passesFilters(e, g.value, h));
 		},
-		Th: ({ Th: e }, { store: a }) => (d) => {
-			let f = () => !!d.col.filterable && !d.col[a.internal];
-			return createComponent(e, mergeProps(d, { get children() {
-				return [memo(() => d.children), createComponent(Show, {
+		Th: ({ Th: m }, { store: h }) => (g) => {
+			let y = () => !!g.col.filterable && !g.col[h.internal];
+			return createComponent(m, mergeProps(g, { get children() {
+				return [memo(() => g.children), createComponent(Show, {
 					get when() {
-						return f();
+						return y();
 					},
 					get children() {
 						return createComponent(Filter, {
 							get col() {
-								return d.col;
+								return g.col;
 							},
 							get tree() {
-								return a.filters[d.col.id];
+								return findret(h.props.filter.value, (e) => firstRule(e)?.field === g.col.id ? e : null);
 							},
 							setTree: (e) => {
-								e ? a.filters[d.col.id] = e : delete a.filters[d.col.id], a.props.filter?.onChange?.(Object.values(a.filters));
+								let m = [...h.props.filter.value], _ = m.findIndex((e) => firstRule(e)?.field == g.col.id);
+								e ? _ > -1 ? m[_] = e : m.push(e) : _ > -1 && m.splice(_, 1), h.props.filter?.onChange?.(m);
 							}
 						});
 					}

package/dist/plugins/ResizePlugin.js

@@ -1,40 +1,44 @@
 import { usePointerDrag } from "../hooks/index.js";
 import { unFn } from "../utils.js";
 import { Ctx } from "../index.js";
-import { className, createComponent, effect, memo, mergeProps, template, use } from "solid-js/web";
+import { className, createComponent, delegateEvents, effect, memo, mergeProps, template, use } from "solid-js/web";
 import { batch, untrack, useContext } from "solid-js";
 import { reconcile } from "solid-js/store";
 import { clamp } from "es-toolkit";
 import { createEventListener } from "@solid-primitives/event-listener";
 import { defaultsDeep } from "es-toolkit/compat";
-var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW = Symbol("row_size"), ColHandle = (f) => {
-	let { props: h, store: _ } = useContext(Ctx), v;
-	return usePointerDrag(() => v, { start(e, p, m) {
+var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW = Symbol("row_size"), findParentEl = (e, m) => {
+	for (; e = e.parentElement;) if (m(e)) return e;
+}, ColHandle = (m) => {
+	let { props: _, store: v } = useContext(Ctx), b;
+	return usePointerDrag(() => b, { start(e, h, g) {
 		e.stopPropagation();
-		let g = f.x, { min: y, max: b } = h.resizable.col, x = v.parentElement, S = x.offsetWidth;
-		p((e, { ox: p }) => _[COL][f.x] = clamp(S + p, y, b)), m(() => {
-			let e = h.columns[g], f = [..._.rawProps.columns || []], p = f.findIndex((f) => f[_.ID] === e[_.ID]);
-			p > -1 && (f[p] = {
-				...f[p],
-				width: x.offsetWidth
-			}, h.onColumnsChange?.(f)), e.onWidthChange?.(x.offsetWidth);
+		let y = m.x, { min: x, max: S } = _.resizable.col, C = findParentEl(b, (e) => e.tagName === "TH"), w = C.offsetWidth;
+		h((e, { ox: h }) => v[COL][m.x] = clamp(w + h, x, S)), g(() => {
+			let e = _.columns[y], m = [...v.rawProps.columns || []], h = m.findIndex((m) => m[v.ID] === e[v.ID]);
+			h > -1 && (m[h] = {
+				...m[h],
+				width: C.offsetWidth
+			}, _.onColumnsChange?.(m)), e.onWidthChange?.(C.offsetWidth);
 		});
 	} }), (() => {
-		var e = _tmpl$(), p = v;
-		return typeof p == "function" ? use(p, e) : v = e, effect(() => className(e, `in-cell__resize-handle absolute top-0 right-0 flex justify-center w-10px! ${f.x == h.columns.length - 1 ? "justify-end!" : "w-10px! translate-x-1/2"} after:w-1 cursor-w-resize z-1`)), e;
+		var e = _tmpl$();
+		e.$$click = (e) => e.stopPropagation();
+		var h = b;
+		return typeof h == "function" ? use(h, e) : b = e, effect(() => className(e, `in-cell__resize-handle absolute top-0 right-0 flex justify-center w-10px! ${m.x == _.columns.length - 1 ? "justify-end!" : "w-10px! translate-x-1/2"} after:w-1 cursor-w-resize z-1`)), e;
 	})();
-}, RowHandle = (f) => {
-	let { props: h, store: _ } = useContext(Ctx), v;
-	return usePointerDrag(() => v, { start(e, p, m) {
+}, RowHandle = (m) => {
+	let { props: _, store: v } = useContext(Ctx), b;
+	return usePointerDrag(() => b, { start(e, h, g) {
 		e.stopPropagation();
-		let g = f.y, { min: y, max: b } = h.resizable.row, x = v.parentElement.offsetHeight;
-		p((e, { oy: p }) => _[ROW][f.y] = clamp(x + p, y, b)), m(() => {
-			let e = h.data[g];
-			[..._.rawProps.data || []].findIndex((f) => f[_.ID] === e[_.ID]);
+		let y = m.y, { min: x, max: S } = _.resizable.row, C = findParentEl(b, (e) => e.tagName === "TD").offsetHeight;
+		h((e, { oy: h }) => v[ROW][m.y] = clamp(C + h, x, S)), g(() => {
+			let e = _.data[y];
+			[...v.rawProps.data || []].findIndex((m) => m[v.ID] === e[v.ID]);
 		});
-	} }), createEventListener(() => v, "dblclick", () => f.data[COL] = void 0), (() => {
-		var e = _tmpl$(), p = v;
-		return typeof p == "function" ? use(p, e) : v = e, effect(() => className(e, `in-cell__resize-handle absolute bottom-0 left-0 flex flex-col justify-center h-1! ${f.y == h.data.length - 1 ? "justify-end!" : ""} after:h-1 cursor-s-resize z-2`)), e;
+	} }), createEventListener(() => b, "dblclick", () => m.data[COL] = void 0), (() => {
+		var e = _tmpl$(), h = b;
+		return typeof h == "function" ? use(h, e) : b = e, effect(() => className(e, `in-cell__resize-handle absolute bottom-0 left-0 flex flex-col justify-center h-1! ${m.y == _.data.length - 1 ? "justify-end!" : ""} after:h-1 cursor-s-resize z-2`)), e;
 	})();
 };
 const ResizePlugin = {
@@ -57,33 +61,34 @@ const ResizePlugin = {
 				max: 400
 			}
 		}),
-		columns: ({ columns: e }, { store: f }) => (e = e.map((e, p) => ({
+		columns: ({ columns: e }, { store: m }) => (e = e.map((e, h) => ({
 			...e,
-			[f.ID]: e[f.ID] ??= Symbol()
+			[m.ID]: e[m.ID] ??= Symbol()
 		})), e = e.map((e) => e.resizable === void 0 ? {
 			...e,
-			resizable: f.props?.resizable?.col.enable
-		} : e), e = e.map((e, p) => f[COL][p] ? {
+			resizable: m.props?.resizable?.col.enable
+		} : e), e = e.map((e, h) => m[COL][h] ? {
 			...e,
-			width: f[COL][p]
-		} : e), untrack(() => batch(() => reconcile(e, { key: f.ID })(f.__resize__cols ??= [])))),
-		Th: ({ Th: e }, { store: f }) => (f) => createComponent(e, mergeProps(f, {
+			width: m[COL][h]
+		} : e), untrack(() => batch(() => reconcile(e, { key: m.ID })(m.__resize__cols ??= [])))),
+		Th: ({ Th: e }, { store: m }) => (m) => createComponent(e, mergeProps(m, {
 			get class() {
-				return `relative ${f.class}`;
+				return `relative ${m.class}`;
 			},
 			get children() {
-				return [f.children, memo(() => memo(() => !!f.col.resizable)() && createComponent(ColHandle, f))];
+				return [m.children, memo(() => memo(() => !!m.col.resizable)() && createComponent(ColHandle, m))];
 			}
 		})),
-		Td: ({ Td: e }, { store: f }) => f.props?.resizable?.row.enable ? (p) => createComponent(e, mergeProps(p, {
+		Td: ({ Td: e }, { store: m }) => m.props?.resizable?.row.enable ? (h) => createComponent(e, mergeProps(h, {
 			get class() {
-				return `relative ${p.class}`;
+				return `relative ${h.class}`;
 			},
 			get children() {
-				return [p.children, memo(() => memo(() => !!(p.x == 0 && f.props?.resizable?.row.enable))() && createComponent(RowHandle, p))];
+				return [h.children, memo(() => memo(() => !!(h.x == 0 && m.props?.resizable?.row.enable))() && createComponent(RowHandle, h))];
 			}
 		})) : e,
-		cellStyle: ({ cellStyle: e }, { store: p }) => (m) => `${unFn(e, m)};` + (p[ROW][m.y] ? `height: ${p[ROW][m.y]}px` : "")
+		cellStyle: ({ cellStyle: e }, { store: h }) => (g) => `${unFn(e, g)};` + (h[ROW][g.y] ? `height: ${h[ROW][g.y]}px` : "")
 	}
 };
+delegateEvents(["click"]);
 export { ResizePlugin };