intable 0.0.65 → 0.0.66

package/dist/plugins/OrmPlugin.d.ts

@@ -1,4 +1,4 @@
-import { type Plugin } from '..';
+import { type Plugin, type TableProps } from '..';
 declare module '../index' {
     interface TableProps {
     }
@@ -8,8 +8,16 @@ declare module '../index' {
          * 会自动将外键对象 组装到当前行数据中，便于在表格中显示外键对象中的其他属性。
          */
         foreignField?: string;
+        dialog?: boolean;
     }
     interface TableStore {
     }
 }
 export declare const OrmPlugin: Plugin;
+export declare const TableSelect: (o: {
+    value: any;
+    valueObject?: any;
+    onChange?: (value: any) => void;
+    table: TableProps;
+    [key: string]: any;
+}) => import("solid-js").JSX.Element;

package/dist/plugins/OrmPlugin.js

@@ -1,8 +1,9 @@
-import { toArr } from "../utils.js";
+import { isEmpty, toArr } from "../utils.js";
 import { Tags } from "./RenderPlugin/components.js";
 import { editors } from "./EditablePlugin.js";
 import { renders } from "./RenderPlugin/index.js";
 import { Dialog } from "../components/Dialog.js";
+import { Select } from "../components/Select.js";
 import { Intable } from "../index.js";
 import { createComponent, delegateEvents, insert, memo, mergeProps, template } from "solid-js/web";
 import { createComputed, createResource, createRoot, createSignal, mergeProps as mergeProps$1, splitProps, untrack } from "solid-js";
@@ -13,123 +14,176 @@ const OrmPlugin = {
 	name: "orm",
 	priority: -Infinity,
 	store: (e) => ({}),
-	rewriteProps: { Table: ({ Table: e }, { store: p }) => (m) => {
-		let h = createMutable({});
+	rewriteProps: { Table: ({ Table: e }, { store: g }) => (_) => {
+		let v = createMutable({});
 		return createComputed(() => {
-			let e = p.props.columns?.filter((e) => (e.type == "fk" || e.type == "fks") && e.foreignField);
-			if (e.length) for (let m of e) for (let e of p.props.data) {
-				if (m.foreignField in e) continue;
-				Object.defineProperty(e, m.foreignField, {
-					get: () => get(h, [m.id, e[p.props.rowKey]]),
-					set: (g) => untrack(() => set(h, [m.id, e[p.props.rowKey]], g)),
+			let e = g.props.columns?.filter((e) => (e.type == "fk" || e.type == "fks") && e.foreignField);
+			if (e.length) for (let _ of e) for (let e of g.props.data) {
+				if (_.foreignField in e) continue;
+				Object.defineProperty(e, _.foreignField, {
+					get: () => get(v, [_.id, e[g.props.rowKey]]),
+					set: (y) => untrack(() => set(v, [_.id, e[g.props.rowKey]], y)),
 					enumerable: !0,
 					configurable: !0
 				});
 			}
-		}), createComponent(e, m);
+		}), createComponent(e, _);
 	} }
 };
-var createDialogEditor = (e, p) => (m) => createRoot((h) => {
-	let { eventKey: _, value: v, col: y, ok: b, cancel: x, props: S, onChange: C } = m, w = p?.out ?? ((e) => e), [E, D] = createSignal(_ || v), O = createComponent(e, mergeProps({
-		get value() {
-			return E();
-		},
-		onChange: (e) => (D(w(e)), C?.(E()), b())
-	}, p, S, { aaa: m }));
-	return {
-		el: createComponent(Dialog, {
-			get title() {
-				return `选择 ${y.name}`;
+var createEditor = (e) => (g) => createRoot((_) => {
+	let { eventKey: v, value: y, col: b, ok: x, cancel: S, props: C, onChange: w } = g, [T, E] = createSignal(y), D;
+	return setTimeout(() => {
+		D?.showPicker?.();
+	}, 0), {
+		el: createComponent(e, mergeProps({
+			ref: (e) => D = e,
+			get value() {
+				return T();
 			},
-			onCancel: x,
-			onOk: b,
-			class: "min-w-[40vw]",
-			children: O
-		}),
-		getValue: E,
-		destroy: h,
-		dialog: !0
+			onChange: (e) => (E(e), w?.(T()), !Array.isArray(T()) && x())
+		}, C, { aaa: g })),
+		getValue: T,
+		destroy: _,
+		dialog: b.dialog
 	};
-}), ObjTags = (m) => {
-	let h;
-	[m, h] = splitProps(m, [
+}), ObjTags = (e) => {
+	let v;
+	[e, v] = splitProps(e, [
 		"col",
 		"data",
 		"value",
 		"onChange",
 		"multiple"
 	]);
-	let g = () => m.col.table?.columns?.[0].id, _ = () => m.col.table?.rowKey ?? "id";
+	let y = () => e.col.table?.columns?.[0].id, b = () => e.col.table?.rowKey ?? "id";
 	return createComponent(Tags, mergeProps({
 		get value() {
-			return toArr(m.value).map((e) => ({
-				label: e[g()],
-				value: e[_()]
+			return toArr(e.value).map((e) => ({
+				label: e[y()],
+				value: e[b()]
 			}));
 		},
-		onChange: (e) => m.onChange?.(m.multiple ? e : e[0])
-	}, h));
-}, FKTags = (m) => {
-	let h;
-	[m, h] = splitProps(m, [
+		onChange: (g) => e.onChange?.(e.multiple ? g : g[0])
+	}, v));
+}, FKTags = (e) => {
+	let v;
+	[e, v] = splitProps(e, [
 		"col",
 		"data",
 		"value",
 		"onChange",
 		"multiple"
 	]);
-	let g = () => m.col.table?.columns?.[0].id, _ = () => m.col.table?.rowKey ?? "id", [v] = createResource(() => m.value, () => fetchDataByKeys(toArr(m.value).map((e) => e && typeof e != "object" ? e : e[_()]), m.col.table), { initialValue: [] });
+	let y = () => e.col.table?.columns?.[0].id, b = () => e.col.table?.rowKey ?? "id", [x] = createResource(() => e.value, () => fetchDataByKeys(toArr(e.value).map((e) => e && typeof e != "object" ? e : e[b()]), e.col.table), { initialValue: [] });
 	return createComputed(() => {
-		v(), untrack(() => set(m.data, m.col.foreignField, m.multiple ? v() : v()[0]));
+		x(), untrack(() => set(e.data, e.col.foreignField, e.multiple ? x() : x()[0]));
 	}), createComponent(Tags, mergeProps({
 		get value() {
-			return v().map((e) => ({
-				label: e[g()],
-				value: e[_()]
+			return x().map((e) => ({
+				label: e[y()],
+				value: e[b()]
 			}));
 		},
-		onChange: (e) => m.onChange?.(m.multiple ? e : e[0])
-	}, h));
-}, ObjEditor = createDialogEditor((p) => {
-	let m = mergeProps$1(() => p.aaa.col), h = () => m.table?.rowKey ?? "id", g = () => m.type == "objs" || m.type == "fks", v = () => m.type == "fk" || m.type == "fks", x = () => v() ? toArr(p.value).map((e) => ({ [h()]: e })) : toArr(p.value), S = (e) => p.onChange(v() ? g() ? e.map((e) => e[h()]) : e?.[h()] ?? null : e);
-	return (() => {
-		var e = _tmpl$(), h = e.firstChild, C = h.firstChild, w = C.firstChild, T = w.firstChild, E = T.nextSibling;
-		E.nextSibling;
-		var D = w.nextSibling, O = h.nextSibling;
-		return insert(w, () => x().length, E), D.$$click = () => p.onChange?.(g() ? [] : null), insert(h, (() => {
-			var e = memo(() => !!v());
-			return () => e() ? createComponent(FKTags, mergeProps(p, {
-				class: "ml-2",
-				col: m,
-				get value() {
-					return x();
-				},
-				onChange: S,
-				get multiple() {
-					return g();
-				}
-			})) : createComponent(ObjTags, mergeProps(p, {
-				class: "ml-2",
-				col: m,
-				get value() {
-					return x();
-				},
-				onChange: S,
-				get multiple() {
-					return g();
+		onChange: (g) => e.onChange?.(e.multiple ? g : g[0])
+	}, v));
+}, ObjEditor = createEditor((e) => {
+	let _ = mergeProps$1(() => e.aaa.col), v = () => _.table?.rowKey ?? "id", y = () => _.type == "objs" || _.type == "fks", x = () => _.type == "fk" || _.type == "fks", C = () => x() ? toArr(e.value).map((e) => ({ [v()]: e })) : toArr(e.value), E = (g) => e.onChange(x() ? y() ? g.map((e) => e[v()]) : g?.[v()] ?? null : g);
+	return memo(() => memo(() => !!_.dialog)() ? createComponent(Dialog, {
+		get title() {
+			return `选择 ${_.name}`;
+		},
+		get onCancel() {
+			return e.aaa.cancel;
+		},
+		get onOk() {
+			return e.aaa.ok;
+		},
+		class: "min-w-[40vw]",
+		get children() {
+			var g = _tmpl$(), v = g.firstChild, b = v.firstChild, D = b.firstChild, O = D.firstChild, k = O.nextSibling;
+			k.nextSibling;
+			var A = D.nextSibling, j = v.nextSibling;
+			return insert(D, () => C().length, k), A.$$click = () => e.onChange?.(y() ? [] : null), insert(v, (() => {
+				var g = memo(() => !!x());
+				return () => g() ? createComponent(FKTags, mergeProps(e, {
+					class: "ml-2",
+					col: _,
+					get value() {
+						return C();
+					},
+					onChange: E,
+					get multiple() {
+						return y();
+					}
+				})) : createComponent(ObjTags, mergeProps(e, {
+					class: "ml-2",
+					col: _,
+					get value() {
+						return C();
+					},
+					onChange: E,
+					get multiple() {
+						return y();
+					}
+				}));
+			})(), null), insert(j, createComponent(Intable, mergeProps(() => e.aaa.col.table, {
+				class: "max-h-[65vh]",
+				get rowSelection() {
+					return {
+						...e.aaa.col.table?.rowSelection,
+						enable: !0,
+						multiple: y(),
+						value: C(),
+						onChange: E
+					};
 				}
-			}));
-		})(), null), insert(O, createComponent(Intable, mergeProps(() => p.aaa.col.table, { get rowSelection() {
-			return {
-				...p.aaa.col.table?.rowSelection,
-				enable: !0,
-				multiple: g(),
-				value: p.value,
-				onChange: S
-			};
-		} }))), e;
-	})();
+			}))), g;
+		}
+	}) : createComponent(TableSelect, mergeProps(e, {
+		col: _,
+		get table() {
+			return _.table;
+		},
+		get valueObject() {
+			return !x();
+		},
+		class: "min-h-full outline-1.5 outline-offset--1.5 outline-[--c-primary] bg-[--table-bg] py-1",
+		border: !1,
+		get multiple() {
+			return y();
+		}
+	})));
 });
+const TableSelect = (e) => {
+	let _ = () => e.table?.rowKey ?? "id", v = () => e.multiple, y = () => !e.valueObject, b = () => y() ? toArr(e.value) : toArr(e.value).map((e) => e[_()]), [S] = createResource(b, () => fetchDataByKeys(b(), e.table), { initialValue: [] });
+	return createComponent(Select, mergeProps(e, {
+		searchable: !0,
+		get options() {
+			return S().map((g) => ({
+				label: g[e.table?.columns?.[0].id],
+				value: y() ? g[_()] : g
+			}));
+		},
+		request: ({ keyword: g }) => e.table?.request?.({ filters: g ? [{
+			field: e.table?.columns?.[0].id,
+			op: "like",
+			value: g
+		}] : [] }).then((g) => g.data.map((g) => ({
+			label: g[e.table?.columns?.[0].id],
+			value: y() ? g[_()] : g
+		}))),
+		get valueKey() {
+			return memo(() => !!y())() ? void 0 : _();
+		},
+		get value() {
+			return e.value;
+		},
+		onChange: (g) => e.onChange?.(g),
+		get multiple() {
+			return v();
+		}
+	}));
+};
 editors.obj = ObjEditor, editors.objs = ObjEditor, editors.fk = ObjEditor, editors.fks = ObjEditor, renders.fk = (e) => createComponent(FKTags, mergeProps(e, { disabled: !0 })), renders.fks = (e) => createComponent(FKTags, mergeProps(e, {
 	disabled: !0,
 	multiple: !0
@@ -138,24 +192,26 @@ editors.obj = ObjEditor, editors.objs = ObjEditor, editors.fk = ObjEditor, edito
 	multiple: !0
 }));
 var fetchDataByKeys = (() => {
-	let e = /* @__PURE__ */ new WeakMap(), p = (p) => {
-		let m = e.get(p.request) || e.set(p.request, {}).get(p.request);
-		return m[p.rowKey] ??= [{}, {}];
+	let g = /* @__PURE__ */ new WeakMap(), _ = (e) => {
+		let _ = g.get(e.request) || g.set(e.request, {}).get(e.request);
+		return _[e.rowKey] ??= [{}, {}];
 	};
-	return async (e, m) => {
-		let [h, g] = p(m), _ = e.filter((e) => !h[e]);
-		if (_.length) {
-			let e = _.filter((e) => !g[e]), p = m.request?.({ filters: [{
-				field: m.rowKey,
+	return async (g, v) => {
+		if (!v.request) return [];
+		g = g.filter((g) => !isEmpty(g));
+		let [y, b] = _(v), x = g.filter((e) => !y[e]);
+		if (x.length) {
+			let e = x.filter((e) => !b[e]), g = v.request({ filters: [{
+				field: v.rowKey,
 				op: "in",
 				value: e
 			}] });
-			e.forEach((e, m) => {
-				g[e] = p.then((p) => h[e] = p.data[m]).finally(() => delete g[e]);
-			}), await Promise.all(_.map((e) => g[e]));
+			e.forEach((e, _) => {
+				b[e] = g.then((g) => y[e] = g.data[_]).finally(() => delete b[e]);
+			}), await Promise.all(x.map((e) => b[e]));
 		}
-		return e.map((e) => h[e]);
+		return g.map((e) => y[e]);
 	};
 })();
 delegateEvents(["click"]);
-export { OrmPlugin };
+export { OrmPlugin, TableSelect };

package/dist/plugins/PaginationPlugin.d.ts

@@ -7,16 +7,10 @@ declare module '..' {
             defaultValue?: number;
             value?: number;
             onChange?: (page: number) => void;
-            /** Server-side pagination: called on page change with (page, pageSize).
-             *  Parent should update `data` and `total` in response. */
-            request?: (page: number, pageSize: number) => void | Promise<void>;
-            /** Total record count (required for server-side pagination) */
             total?: number;
         };
     }
     interface TableStore {
-        _pgnTotal: number;
-        _pgnLoading: boolean;
     }
 }
 export declare const PaginationPlugin: Plugin;

package/dist/plugins/PaginationPlugin.js

@@ -5,41 +5,32 @@ import { For, Show, createMemo, mergeProps as mergeProps$1, runWithOwner, untrac
 var _tmpl$ = /* @__PURE__ */ template("<div class=\"data-table__pagination flex items-center justify-end gap-1 py-2 text-sm\"><span class=mr-2>共 <!> 条</span><button class=\"data-table__pagination-btn disabled:op-30\">‹</button><button class=\"data-table__pagination-btn disabled:op-30\">›"), _tmpl$2 = /* @__PURE__ */ template("<span class=\"px-1 select-none\">…"), _tmpl$3 = /* @__PURE__ */ template("<button>");
 const PaginationPlugin = {
 	name: "pagination",
-	store: (e) => ({
-		_pgnTotal: 0,
-		_pgnLoading: !1
-	}),
 	rewriteProps: {
-		loading: ({ loading: e }, { store: l }) => l._pgnLoading || e,
-		pagination: ({ pagination: l }, { store: u }) => {
-			l = mergeProps$1({
+		pagination: ({ pagination: c }, { store: l }) => {
+			c = mergeProps$1({
 				enable: !1,
 				pageSize: 20,
-				defaultValue: 1
-			}, l);
-			let d = untrack(() => u._pgn ??= runWithOwner(u.owner, () => useControlled(l)));
-			return u._pgn.$setOpt(l), d;
+				defaultValue: 1,
+				total: l.props.data.length
+			}, c);
+			let u = untrack(() => l._pgn ??= runWithOwner(l.owner, () => useControlled(c)));
+			return l._pgn.$setOpt(c), u;
 		},
-		data: ({ data: e }, { store: l }) => {
-			if (!e) return e;
-			let u = l.props.pagination;
-			return u?.enable ? typeof u.request == "function" ? (l._pgnTotal = u.total ?? e.length, e) : (l._pgnTotal = e.length, e) : e;
-		},
-		EachRows: ({ EachRows: e }, { store: l }) => l.props.pagination?.enable ? (u) => {
-			let f = mergeProps$1(() => l.props.pagination);
-			if (!f?.enable || typeof f.request == "function") return createComponent(e, u);
-			let p = () => (f.value - 1) * f.pageSize, m = () => u.each.slice(p(), p() + f.pageSize);
+		EachRows: ({ EachRows: e }, { store: c }) => c.props.pagination?.enable ? (l) => {
+			let d = mergeProps$1(() => c.props.pagination);
+			if (c.props.request) return createComponent(e, l);
+			let f = () => (d.value - 1) * d.pageSize, p = () => l.each.slice(f(), f() + d.pageSize);
 			return createComponent(e, {
 				get each() {
-					return m();
+					return p();
 				},
-				children: (e, l) => u.children(e, () => p() + l())
+				children: (e, c) => l.children(e, () => f() + c())
 			});
 		} : e,
-		Footer: ({ Footer: e }, { store: l }) => (u) => createComponent(e, mergeProps(u, { get children() {
-			return [memo(() => u.children), createComponent(Show, {
+		Footer: ({ Footer: e }, { store: c }) => (l) => createComponent(e, mergeProps(l, { get children() {
+			return [memo(() => l.children), createComponent(Show, {
 				get when() {
-					return l.props.pagination?.enable;
+					return c.props.pagination?.enable;
 				},
 				get children() {
 					return createComponent(PaginationFooter, {});
@@ -49,57 +40,47 @@ const PaginationPlugin = {
 	}
 };
 function PaginationFooter() {
-	let { store: e } = useContext(Ctx), f = mergeProps$1(() => e.props.pagination), h = () => f.value, g = () => f.pageSize, _ = () => Math.ceil(e._pgnTotal / g()), v = createMemo(() => pageNumbers(h(), _())), x = (l) => {
-		if (l < 1 || l > _()) return;
-		let u = e.props.pagination?.request;
-		if (u) {
-			if (e._pgnLoading) return;
-			e._pgnLoading = !0;
-			let d = u(l, g());
-			d && typeof d.then == "function" ? d.finally(() => {
-				e._pgnLoading = !1;
-			}) : e._pgnLoading = !1;
-		}
-		e.props.pagination?.onChange?.(l);
+	let { store: e } = useContext(Ctx), d = mergeProps$1(() => e.props.pagination), m = () => d.value, h = () => d.pageSize, g = () => Math.ceil(d.total / h()), _ = createMemo(() => pageNumbers(m(), g())), b = (c) => {
+		c < 1 || c > g() || e.props.pagination?.onChange?.(c);
 	};
 	return (() => {
-		var l = _tmpl$(), f = l.firstChild, g = f.firstChild, y = g.nextSibling;
+		var c = _tmpl$(), h = c.firstChild, v = h.firstChild, y = v.nextSibling;
 		y.nextSibling;
-		var b = f.nextSibling, S = b.nextSibling;
-		return insert(f, () => e._pgnTotal, y), b.$$click = () => x(h() - 1), insert(l, createComponent(For, {
+		var x = h.nextSibling, S = x.nextSibling;
+		return insert(h, () => d.total, y), x.$$click = () => b(m() - 1), insert(c, createComponent(For, {
 			get each() {
-				return v();
+				return _();
 			},
-			children: (l) => {
-				let d = () => l === h();
-				return l === "..." ? _tmpl$2() : (() => {
-					var f = _tmpl$3();
-					return f.$$click = () => x(l), insert(f, l), effect((l) => {
-						var p = `data-table__pagination-btn ${d() ? "is-active" : ""}`, m = e.props.loading;
-						return p !== l.e && className(f, l.e = p), m !== l.t && (f.disabled = l.t = m), l;
+			children: (c) => {
+				let u = () => c === m();
+				return c === "..." ? _tmpl$2() : (() => {
+					var d = _tmpl$3();
+					return d.$$click = () => b(c), insert(d, c), effect((c) => {
+						var f = `data-table__pagination-btn ${u() ? "is-active" : ""}`, p = e.props.loading;
+						return f !== c.e && className(d, c.e = f), p !== c.t && (d.disabled = c.t = p), c;
 					}, {
 						e: void 0,
 						t: void 0
-					}), f;
+					}), d;
 				})();
 			}
-		}), S), S.$$click = () => x(h() + 1), effect((l) => {
-			var u = h() <= 1 || e.props.loading, d = h() >= _() || e.props.loading;
-			return u !== l.e && (b.disabled = l.e = u), d !== l.t && (S.disabled = l.t = d), l;
+		}), S), S.$$click = () => b(m() + 1), effect((c) => {
+			var l = m() <= 1 || e.props.loading, u = m() >= g() || e.props.loading;
+			return l !== c.e && (x.disabled = c.e = l), u !== c.t && (S.disabled = c.t = u), c;
 		}, {
 			e: void 0,
 			t: void 0
-		}), l;
+		}), c;
 	})();
 }
-function pageNumbers(e, l) {
-	if (l <= 1) return [];
-	if (l <= 7) return Array.from({ length: l }, (e, l) => l + 1);
-	let u = [1];
-	e > 4 && u.push("...");
-	let d = Math.max(2, e - 1), f = Math.min(l - 1, e + 1);
-	for (let e = d; e <= f; e++) u.push(e);
-	return e < l - 3 && u.push("..."), u.push(l), u;
+function pageNumbers(e, c) {
+	if (c <= 1) return [];
+	if (c <= 7) return Array.from({ length: c }, (e, c) => c + 1);
+	let l = [1];
+	e > 4 && l.push("...");
+	let u = Math.max(2, e - 1), d = Math.min(c - 1, e + 1);
+	for (let e = u; e <= d; e++) l.push(e);
+	return e < c - 3 && l.push("..."), l.push(c), l;
 }
 delegateEvents(["click"]);
 export { PaginationPlugin };

package/dist/plugins/RenderPlugin/components.js

@@ -89,12 +89,12 @@ const Checkbox = (e) => {
 		}
 	}, S), (() => {
 		var w = _tmpl$2();
-		return spread(w, S, !1, !0), insert(w, () => e.children, null), insert(w, (() => {
+		return spread(w, S, !1, !0), insert(w, () => e.children ?? e.value, null), insert(w, (() => {
 			var S = memo(() => !e.disabled);
 			return () => S() && createComponent(x_default, {
 				class: "icon-clickable flex-shrink-0 size-4! ml-1 mr--1 op-75",
-				get onClick() {
-					return e.onDel;
+				"on:click": (x) => {
+					x.stopPropagation(), e.onDel?.(x);
 				}
 			});
 		})(), null), w;