@object-ui/plugin-aggrid 4.0.1 → 4.0.4

package/dist/ObjectAgGridImpl-C-HQaIhp.js

@@ -0,0 +1,460 @@
+import { useCallback as e, useEffect as t, useMemo as n, useRef as r, useState as i } from "react";
+import { buildExpandFields as a } from "@object-ui/core";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { AgGridReact as c } from "ag-grid-react";
+import { createRoot as l } from "react-dom/client";
+import { AvatarField as u, BooleanField as d, CodeField as f, ColorField as p, CurrencyField as m, DateField as h, DateTimeField as g, EmailField as _, ImageField as v, LookupField as y, NumberField as b, PasswordField as x, PercentField as S, PhoneField as C, RatingField as w, SelectField as T, SliderField as E, TextAreaField as D, TextField as O, TimeField as k, UrlField as A } from "@object-ui/fields";
+//#region src/object-aggrid.types.ts
+var j = {
+	text: "agTextColumnFilter",
+	textarea: "agTextColumnFilter",
+	number: "agNumberColumnFilter",
+	currency: "agNumberColumnFilter",
+	percent: "agNumberColumnFilter",
+	boolean: "agSetColumnFilter",
+	date: "agDateColumnFilter",
+	datetime: "agDateColumnFilter",
+	time: "agTextColumnFilter",
+	email: "agTextColumnFilter",
+	phone: "agTextColumnFilter",
+	url: "agTextColumnFilter",
+	select: "agSetColumnFilter"
+}, M = {
+	text: O,
+	textarea: D,
+	number: b,
+	currency: m,
+	percent: S,
+	boolean: d,
+	select: T,
+	date: h,
+	datetime: g,
+	time: k,
+	email: _,
+	phone: C,
+	url: A,
+	password: x,
+	color: p,
+	rating: w,
+	image: v,
+	avatar: u,
+	lookup: y,
+	slider: E,
+	code: f
+};
+function N(e) {
+	return M[e] || null;
+}
+var P = class {
+	eGui;
+	root = null;
+	init(e) {
+		let { value: t, field: n } = e, r = N(n.type);
+		this.eGui = document.createElement("div"), this.eGui.className = "field-widget-cell", r ? (this.root = l(this.eGui), this.root.render(/* @__PURE__ */ o(r, {
+			value: t,
+			onChange: () => {},
+			field: n,
+			readonly: !0
+		}))) : this.eGui.textContent = t == null ? "" : String(t);
+	}
+	getGui() {
+		return this.eGui;
+	}
+	refresh(e) {
+		let { value: t, field: n } = e, r = N(n.type);
+		return r && this.root ? (this.root.render(/* @__PURE__ */ o(r, {
+			value: t,
+			onChange: () => {},
+			field: n,
+			readonly: !0
+		})), !0) : this.eGui ? (this.eGui.textContent = t == null ? "" : String(t), !0) : !1;
+	}
+	destroy() {
+		this.root && this.root.unmount();
+	}
+}, F = class {
+	eGui;
+	root = null;
+	currentValue;
+	params;
+	init(e) {
+		this.params = e, this.currentValue = e.value;
+		let { field: t } = e, n = N(t.type);
+		if (this.eGui = document.createElement("div"), this.eGui.className = "field-widget-editor", n) this.root = l(this.eGui), this.root.render(/* @__PURE__ */ o(n, {
+			value: this.currentValue,
+			onChange: (e) => {
+				this.currentValue = e;
+			},
+			field: t,
+			readonly: !1
+		}));
+		else {
+			let e = document.createElement("input");
+			e.value = this.currentValue == null ? "" : String(this.currentValue), e.className = "ag-input-field-input ag-text-field-input", e.addEventListener("input", (e) => {
+				this.currentValue = e.target.value;
+			}), this.eGui.appendChild(e), setTimeout(() => e.focus(), 0);
+		}
+	}
+	getGui() {
+		return this.eGui;
+	}
+	getValue() {
+		return this.currentValue;
+	}
+	destroy() {
+		this.root && this.root.unmount();
+	}
+	isPopup() {
+		return [
+			"date",
+			"datetime",
+			"select",
+			"lookup",
+			"color"
+		].includes(this.params.field.type);
+	}
+};
+function I(e) {
+	return class extends P {
+		init(t) {
+			super.init({
+				...t,
+				field: e
+			});
+		}
+		refresh(t) {
+			return super.refresh({
+				...t,
+				field: e
+			});
+		}
+	};
+}
+function L(e) {
+	return class extends F {
+		init(t) {
+			super.init({
+				...t,
+				field: e
+			});
+		}
+	};
+}
+//#endregion
+//#region src/ObjectAgGridImpl.tsx
+function R({ objectName: l, dataSource: u, fields: d, fieldNames: f, filters: p, sort: m, pageSize: h = 10, pagination: g = !0, domLayout: _ = "normal", animateRows: v = !0, rowSelection: y, theme: b = "quartz", height: x = 500, className: S = "", editable: C = !1, editType: w, singleClickEdit: T = !1, stopEditingWhenCellsLoseFocus: E = !0, exportConfig: D, statusBar: O, callbacks: k, columnConfig: A, enableRangeSelection: j = !1, enableCharts: M = !1, contextMenu: N }) {
+	let P = r(null), [F, I] = i(!0), [L, R] = i(null), [B, V] = i(null), [H, U] = i([]);
+	t(() => {
+		if (!u) {
+			R(/* @__PURE__ */ Error("DataSource is required")), I(!1);
+			return;
+		}
+		(async () => {
+			try {
+				I(!0), R(null), V(await u.getObjectSchema(l));
+			} catch (e) {
+				let t = e instanceof Error ? e : Error(String(e));
+				R(t), k?.onDataError?.(t);
+			} finally {
+				I(!1);
+			}
+		})();
+	}, [
+		l,
+		u,
+		k
+	]), t(() => {
+		!u || !B || (async () => {
+			try {
+				I(!0), R(null);
+				let e = {
+					$top: h,
+					$skip: 0
+				};
+				p && (e.$filter = p), m && (e.$orderby = m);
+				let t = a(B?.fields);
+				t.length > 0 && (e.$expand = t);
+				let n = await u.find(l, e);
+				U(n.data || []), k?.onDataLoaded?.(n.data || []);
+			} catch (e) {
+				let t = e instanceof Error ? e : Error(String(e));
+				R(t), k?.onDataError?.(t);
+			} finally {
+				I(!1);
+			}
+		})();
+	}, [
+		l,
+		u,
+		B,
+		p,
+		m,
+		h,
+		k
+	]);
+	let W = n(() => {
+		if (!B?.fields) return [];
+		let e = d || Object.values(B.fields);
+		return (f ? e.filter((e) => f.includes(e.name)) : e).map((e) => {
+			let t = {
+				field: e.name,
+				headerName: e.label || e.name,
+				sortable: e.sortable !== !1,
+				filter: ee(e),
+				editable: C && !e.readonly
+			};
+			return A && (A.resizable !== void 0 && (t.resizable = A.resizable), A.sortable !== void 0 && t.sortable === void 0 && (t.sortable = A.sortable)), z(t, e), t;
+		});
+	}, [
+		B,
+		d,
+		f,
+		C,
+		A
+	]), G = n(() => {
+		if (!O?.enabled) return;
+		let e = O.aggregations || [
+			"count",
+			"sum",
+			"avg"
+		], t = [];
+		return e.includes("count") && t.push({
+			statusPanel: "agAggregationComponent",
+			statusPanelParams: { aggFuncs: ["count"] }
+		}), e.includes("sum") && t.push({
+			statusPanel: "agAggregationComponent",
+			statusPanelParams: { aggFuncs: ["sum"] }
+		}), e.includes("avg") && t.push({
+			statusPanel: "agAggregationComponent",
+			statusPanelParams: { aggFuncs: ["avg"] }
+		}), e.includes("min") && t.push({
+			statusPanel: "agAggregationComponent",
+			statusPanelParams: { aggFuncs: ["min"] }
+		}), e.includes("max") && t.push({
+			statusPanel: "agAggregationComponent",
+			statusPanelParams: { aggFuncs: ["max"] }
+		}), t;
+	}, [O]), K = e(() => {
+		if (!P.current?.api) return;
+		let e = {
+			fileName: D?.fileName || `${l}-export.csv`,
+			skipColumnHeaders: D?.skipColumnHeaders || !1,
+			allColumns: D?.allColumns || !1,
+			onlySelected: D?.onlySelected || !1
+		};
+		if (P.current.api.exportDataAsCsv(e), k?.onExport) {
+			let e = D?.onlySelected ? P.current.api.getSelectedRows() : H;
+			k.onExport(e || [], "csv");
+		}
+	}, [
+		D,
+		k,
+		H,
+		l
+	]), q = e((e) => {
+		if (!N?.enabled) return [];
+		let t = [];
+		return (N.items || [
+			"copy",
+			"copyWithHeaders",
+			"separator",
+			"export"
+		]).forEach((e) => {
+			e === "export" ? t.push({
+				name: "Export CSV",
+				icon: "<span>📥</span>",
+				action: () => K()
+			}) : e === "autoSizeAll" ? t.push({
+				name: "Auto-size All Columns",
+				action: () => {
+					P.current?.api && P.current.api.autoSizeAllColumns();
+				}
+			}) : e === "resetColumns" ? t.push({
+				name: "Reset Columns",
+				action: () => {
+					P.current?.api && P.current.api.resetColumnState();
+				}
+			}) : t.push(e);
+		}), N.customItems && (t.length > 0 && t.push("separator"), N.customItems.forEach((n) => {
+			t.push({
+				name: n.name,
+				disabled: n.disabled,
+				action: () => {
+					k?.onContextMenuAction && k.onContextMenuAction(n.action, e.node?.data);
+				}
+			});
+		})), t;
+	}, [
+		N,
+		K,
+		k
+	]), J = e((e) => {
+		k?.onCellClicked?.(e);
+	}, [k]), Y = e((e) => {
+		k?.onRowClicked?.(e);
+	}, [k]), X = e((e) => {
+		k?.onSelectionChanged?.(e);
+	}, [k]), Z = e(async (e) => {
+		if (k?.onCellValueChanged?.(e), u && e.data && e.data.id) try {
+			await u.update(l, e.data.id, { [e.colDef.field]: e.newValue });
+		} catch (t) {
+			console.error("Failed to update record:", t), e.node.setDataValue(e.colDef.field, e.oldValue);
+		}
+	}, [
+		k,
+		u,
+		l
+	]), Q = e((e) => {
+		P.current = e;
+	}, []), te = n(() => ({
+		pagination: g,
+		paginationPageSize: h,
+		domLayout: _,
+		animateRows: v,
+		rowSelection: y,
+		editType: w,
+		singleClickEdit: T,
+		stopEditingWhenCellsLoseFocus: E,
+		statusBar: G ? { statusPanels: G } : void 0,
+		enableRangeSelection: j,
+		enableCharts: M,
+		getContextMenuItems: N?.enabled ? q : void 0,
+		suppressCellFocus: !C,
+		enableCellTextSelection: !0,
+		ensureDomOrder: !0,
+		onCellClicked: J,
+		onRowClicked: Y,
+		onSelectionChanged: X,
+		onCellValueChanged: Z,
+		onGridReady: Q
+	}), [
+		g,
+		h,
+		_,
+		v,
+		y,
+		w,
+		T,
+		E,
+		G,
+		j,
+		M,
+		N,
+		q,
+		C,
+		J,
+		Y,
+		X,
+		Z,
+		Q
+	]), $ = n(() => ({
+		height: typeof x == "number" ? `${x}px` : x,
+		width: "100%"
+	}), [x]), ne = [
+		`ag-theme-${b}`,
+		"rounded-xl",
+		"border",
+		"border-border",
+		"overflow-hidden",
+		"shadow-lg",
+		S
+	].filter(Boolean).join(" ");
+	return F ? /* @__PURE__ */ o("div", {
+		className: "flex items-center justify-center",
+		style: $,
+		children: /* @__PURE__ */ s("div", {
+			className: "text-muted-foreground",
+			children: [
+				"Loading ",
+				l,
+				"..."
+			]
+		})
+	}) : L ? /* @__PURE__ */ o("div", {
+		className: "flex items-center justify-center",
+		style: $,
+		children: /* @__PURE__ */ s("div", {
+			className: "text-destructive",
+			children: ["Error loading data: ", L.message]
+		})
+	}) : /* @__PURE__ */ s("div", {
+		className: "object-aggrid-container",
+		children: [D?.enabled && /* @__PURE__ */ o("div", {
+			className: "mb-2 flex gap-2",
+			children: /* @__PURE__ */ o("button", {
+				onClick: K,
+				className: "px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors",
+				children: "Export CSV"
+			})
+		}), /* @__PURE__ */ o("div", {
+			className: ne,
+			style: $,
+			children: /* @__PURE__ */ o(c, {
+				ref: P,
+				rowData: H,
+				columnDefs: W,
+				gridOptions: te
+			})
+		})]
+	});
+}
+function ee(e) {
+	return e.filterable === !1 ? !1 : j[e.type] || "agTextColumnFilter";
+}
+function z(e, t) {
+	if ([
+		"text",
+		"textarea",
+		"number",
+		"currency",
+		"percent",
+		"boolean",
+		"select",
+		"date",
+		"datetime",
+		"time",
+		"email",
+		"phone",
+		"url",
+		"password",
+		"color",
+		"rating",
+		"image",
+		"avatar",
+		"lookup",
+		"slider",
+		"code"
+	].includes(t.type)) e.cellRenderer = I(t), e.editable && (e.cellEditor = L(t), [
+		"date",
+		"datetime",
+		"select",
+		"lookup",
+		"color"
+	].includes(t.type) && (e.cellEditorPopup = !0));
+	else switch (t.type) {
+		case "master_detail":
+			e.valueFormatter = (e) => e.value ? typeof e.value == "object" ? e.value.name || e.value.label || e.value.id || "" : String(e.value) : "";
+			break;
+		case "object":
+			e.cellRenderer = () => {
+				let e = document.createElement("span");
+				return e.className = "text-gray-500 italic", e.textContent = "[Object]", e;
+			};
+			break;
+		case "vector":
+			e.cellRenderer = () => {
+				let e = document.createElement("span");
+				return e.className = "text-gray-500 italic", e.textContent = "[Vector]", e;
+			};
+			break;
+		case "grid":
+			e.cellRenderer = () => {
+				let e = document.createElement("span");
+				return e.className = "text-gray-500 italic", e.textContent = "[Grid]", e;
+			};
+			break;
+		default: e.valueFormatter = (e) => e.value == null ? "" : String(e.value);
+	}
+}
+//#endregion
+export { R as default };

package/dist/index.js

@@ -1,11 +1,16 @@
-import { t as e } from "./jsx-runtime-CXSCp6pT.js";
-import t, { Suspense as n } from "react";
-import { ComponentRegistry as r } from "@object-ui/core";
-import { Skeleton as i } from "@object-ui/components";
+import e, { Suspense as t } from "react";
+import { ComponentRegistry as n } from "@object-ui/core";
+import { Skeleton as r } from "@object-ui/components";
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-quartz.css";
+import "ag-grid-community/styles/ag-theme-alpine.css";
+import "ag-grid-community/styles/ag-theme-balham.css";
+import "ag-grid-community/styles/ag-theme-material.css";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/index.tsx
-var a = e(), o = t.lazy(() => import("./AgGridImpl-DiTsK8F6.js")), s = t.lazy(() => import("./ObjectAgGridImpl-Bz5whFec.js")), c = ({ schema: e }) => /* @__PURE__ */ (0, a.jsx)(n, {
-	fallback: /* @__PURE__ */ (0, a.jsx)(i, { className: "w-full h-[500px]" }),
-	children: /* @__PURE__ */ (0, a.jsx)(o, {
+var a = e.lazy(() => import("./AgGridImpl-CAfXf2vU.js")), o = e.lazy(() => import("./ObjectAgGridImpl-C-HQaIhp.js")), s = ({ schema: e }) => /* @__PURE__ */ i(t, {
+	fallback: /* @__PURE__ */ i(r, { className: "w-full h-[500px]" }),
+	children: /* @__PURE__ */ i(a, {
 		rowData: e.rowData,
 		columnDefs: e.columnDefs,
 		gridOptions: e.gridOptions,
@@ -33,7 +38,7 @@ var a = e(), o = t.lazy(() => import("./AgGridImpl-DiTsK8F6.js")), s = t.lazy(()
 		excelExport: e.excelExport
 	})
 });
-r.register("aggrid", c, {
+n.register("aggrid", s, {
 	namespace: "plugin-aggrid",
 	label: "AG Grid",
 	icon: "Table",
@@ -357,9 +362,9 @@ r.register("aggrid", c, {
 		domLayout: "normal"
 	}
 });
-var l = ({ schema: e }) => /* @__PURE__ */ (0, a.jsx)(n, {
-	fallback: /* @__PURE__ */ (0, a.jsx)(i, { className: "w-full h-[500px]" }),
-	children: /* @__PURE__ */ (0, a.jsx)(s, {
+var c = ({ schema: e }) => /* @__PURE__ */ i(t, {
+	fallback: /* @__PURE__ */ i(r, { className: "w-full h-[500px]" }),
+	children: /* @__PURE__ */ i(o, {
 		objectName: e.objectName,
 		dataSource: e.dataSource,
 		fields: e.fields,
@@ -386,11 +391,11 @@ var l = ({ schema: e }) => /* @__PURE__ */ (0, a.jsx)(n, {
 		enableCharts: e.enableCharts,
 		contextMenu: e.contextMenu
 	})
-}), u = {
-	aggrid: c,
-	"object-aggrid": l
+}), l = {
+	aggrid: s,
+	"object-aggrid": c
 };
-r.register("object-aggrid", l, {
+n.register("object-aggrid", c, {
 	namespace: "plugin-aggrid",
 	label: "Object AG Grid",
 	icon: "Table",
@@ -501,4 +506,4 @@ r.register("object-aggrid", l, {
 	]
 });
 //#endregion
-export { c as AgGridRenderer, l as ObjectAgGridRenderer, u as aggridComponents };
+export { s as AgGridRenderer, c as ObjectAgGridRenderer, l as aggridComponents };