@object-ui/plugin-form 3.3.0 → 3.3.2

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @object-ui/plugin-form
 
+## 3.3.2
+
+### Patch Changes
+
+- @object-ui/types@3.3.2
+- @object-ui/core@3.3.2
+- @object-ui/react@3.3.2
+- @object-ui/components@3.3.2
+- @object-ui/fields@3.3.2
+
+## 3.3.1
+
+### Patch Changes
+
+- Updated dependencies [b429568]
+  - @object-ui/components@3.3.1
+  - @object-ui/fields@3.3.1
+  - @object-ui/types@3.3.1
+  - @object-ui/core@3.3.1
+  - @object-ui/react@3.3.1
+
 ## 3.3.0
 
 ### Patch Changes

package/README.md

@@ -251,6 +251,26 @@ The plugin includes these field components:
 - Date picker
 - File upload
 
+<!-- release-metadata:v3.3.0 -->
+
+## Compatibility
+
+- **React:** 18.x or 19.x
+- **Node.js:** ≥ 18
+- **TypeScript:** ≥ 5.0 (strict mode)
+- **`@objectstack/spec`:** ^3.3.0
+- **`@objectstack/client`:** ^3.3.0
+- **Tailwind CSS:** ≥ 3.4 (for packages with UI)
+
+## Links
+
+- 📚 [Documentation](https://www.objectui.org/docs/plugins/plugin-form)
+- 📦 [npm package](https://www.npmjs.com/package/@object-ui/plugin-form)
+- 📝 [Changelog](./CHANGELOG.md)
+- 🐛 [Report an issue](https://github.com/objectstack-ai/objectui/issues)
+- 🤝 [Contributing Guide](https://github.com/objectstack-ai/objectui/blob/main/CONTRIBUTING.md)
+- 🗺️ [Roadmap](https://github.com/objectstack-ai/objectui/blob/main/ROADMAP.md)
+
 ## License
 
-MIT
+MIT — see [LICENSE](./LICENSE).

package/dist/index.js

@@ -5,7 +5,7 @@ import { buildValidationRules as l, evaluateCondition as u, formatFileSize as d,
 import { Button as p, Card as m, CardContent as h, CardDescription as g, CardHeader as _, CardTitle as v, Dialog as y, DialogDescription as b, DialogHeader as x, DialogTitle as S, MobileDialogContent as C, ResizableHandle as w, ResizablePanel as T, ResizablePanelGroup as E, Sheet as D, SheetContent as O, SheetDescription as k, SheetHeader as A, SheetTitle as j, Skeleton as M, Tabs as N, TabsContent as P, TabsList as F, TabsTrigger as I, cn as L } from "@object-ui/components";
 import { Check as R, ChevronDown as z, ChevronLeft as B, ChevronRight as V, Loader2 as ee } from "lucide-react";
 //#region \0rolldown/runtime.js
-var H = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), U = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+var H = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), U = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
 	if (typeof require < "u") return require.apply(this, arguments);
 	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
 }), W = /* @__PURE__ */ H(((e) => {
@@ -719,6 +719,12 @@ var H = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), U
 		})
 	});
 }, ne = new Set([
+	"field:formula",
+	"field:summary",
+	"field:auto_number",
+	"field:autonumber",
+	"field:master_detail"
+]), re = new Set([
 	"field:textarea",
 	"field:markdown",
 	"field:html",
@@ -729,43 +735,64 @@ var H = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), U
 	"html",
 	"grid",
 	"rich-text"
-]), re = new Set([
+]), ie = new Set([
 	"formula",
 	"summary",
 	"auto_number",
-	"autonumber"
+	"autonumber",
+	"master_detail",
+	"masterDetail"
 ]);
-function ie(e) {
-	return ne.has(e);
-}
 function ae(e) {
 	return re.has(e);
 }
 function oe(e) {
+	return ie.has(e);
+}
+function se(e) {
 	return e <= 3 ? 1 : 2;
 }
 function X(e, t) {
-	return t <= 1 ? e : e.map((e) => e.colSpan === void 0 && e.type && ie(e.type) ? {
+	return t <= 1 ? e : e.map((e) => e.colSpan === void 0 && e.type && ae(e.type) ? {
 		...e,
 		colSpan: t
 	} : e);
 }
-function se(e, t) {
-	return t?.fields ? e.filter((e) => {
+var ce = new Set([
+	"id",
+	"created_at",
+	"createdAt",
+	"updated_at",
+	"updatedAt",
+	"deleted_at",
+	"deletedAt",
+	"created_by",
+	"createdBy",
+	"updated_by",
+	"updatedBy",
+	"owner",
+	"owner_id",
+	"_version",
+	"_rev"
+]);
+function le(e, t) {
+	return e.filter((e) => {
+		if (ce.has(e.name) || e.type && ne.has(e.type)) return !1;
+		if (!t?.fields) return !0;
 		let n = t.fields[e.name];
-		return n ? !ae(n.type) : !0;
-	}) : e;
+		return n ? n.readonly === !0 ? !1 : !oe(n.type) : !0;
+	});
 }
 function Z(e) {
 	return e <= 1 ? "default" : e === 2 ? "xl" : "full";
 }
 function Q(e, t, n, r) {
 	let i = [...e];
-	if (r === "create" && (i = se(i, t)), n !== void 0) return i = X(i, n), {
+	if (r === "create" && (i = le(i, t)), n !== void 0) return i = X(i, n), {
 		fields: i,
 		columns: n
 	};
-	let a = oe(i.length);
+	let a = se(i.length);
 	return i = X(i, a), {
 		fields: i,
 		columns: a
@@ -773,13 +800,19 @@ function Q(e, t, n, r) {
 }
 //#endregion
 //#region src/DrawerForm.tsx
-var ce = {
+var ue = {
 	1: void 0,
 	2: "grid gap-4 grid-cols-1 @md:grid-cols-2",
 	3: "grid gap-4 grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3",
 	4: "grid gap-4 grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 @4xl:grid-cols-4"
-}, le = ({ schema: e, dataSource: r, className: o }) => {
-	let { fieldLabel: u } = c(), [d, p] = a(null), [m, h] = a([]), [g, _] = a({}), [v, y] = a(!0), [b, x] = a(null), S = e.open !== !1, C = e.drawerSide || "right";
+}, de = ({ schema: e, dataSource: r, className: o }) => {
+	let { fieldLabel: u } = c(), [d, p] = a(null), [m, h] = a([]), [g, _] = a({}), [v, y] = a(!0), [b, x] = a(null), S = e.open !== !1, C = e.drawerSide || "right", [w, T] = a(() => {
+		let t = {};
+		return e.sections?.forEach((e, n) => {
+			let r = e.name || String(n);
+			e.collapsed && (t[r] = !0);
+		}), t;
+	});
 	n(() => {
 		(async () => {
 			if (!r) {
@@ -819,7 +852,7 @@ var ce = {
 		r,
 		e.objectName
 	]);
-	let w = t((t) => {
+	let E = t((t) => {
 		let n = [];
 		for (let r of t.fields) {
 			let t = typeof r == "string" ? r : r.name;
@@ -891,7 +924,7 @@ var ce = {
 		e.mode,
 		r
 	]);
-	let T = t(async (t) => {
+	let M = t(async (t) => {
 		if (!r) return e.onSuccess && await e.onSuccess(t), e.onOpenChange?.(!1), t;
 		try {
 			let n;
@@ -899,9 +932,9 @@ var ce = {
 		} catch (t) {
 			throw e.onError && e.onError(t), t;
 		}
-	}, [e, r]), E = t(() => {
+	}, [e, r]), N = t(() => {
 		e.onCancel && e.onCancel(), e.onOpenChange?.(!1);
-	}, [e]), M = i(() => {
+	}, [e]), P = i(() => {
 		if (e.drawerWidth) return C === "left" || C === "right" ? {
 			width: e.drawerWidth,
 			maxWidth: e.drawerWidth
@@ -909,7 +942,7 @@ var ce = {
 			height: e.drawerWidth,
 			maxHeight: e.drawerWidth
 		};
-	}, [e.drawerWidth, C]), N = {
+	}, [e.drawerWidth, C]), F = {
 		type: "form",
 		layout: e.layout === "vertical" || e.layout === "horizontal" ? e.layout : "vertical",
 		defaultValues: g,
@@ -917,8 +950,8 @@ var ce = {
 		cancelLabel: e.cancelText,
 		showSubmit: e.showSubmit !== !1 && e.mode !== "view",
 		showCancel: e.showCancel !== !1,
-		onSubmit: T,
-		onCancel: E
+		onSubmit: M,
+		onCancel: N
 	};
 	return /* @__PURE__ */ (0, K.jsx)(D, {
 		open: S,
@@ -926,7 +959,7 @@ var ce = {
 		children: /* @__PURE__ */ (0, K.jsxs)(O, {
 			side: C,
 			className: L("overflow-y-auto", o, e.className),
-			style: M,
+			style: P,
 			children: [(e.title || e.description) && /* @__PURE__ */ (0, K.jsxs)(A, { children: [e.title && /* @__PURE__ */ (0, K.jsx)(j, { children: e.title }), e.description && /* @__PURE__ */ (0, K.jsx)(k, { children: e.description })] }), /* @__PURE__ */ (0, K.jsx)("div", {
 				className: "@container py-4",
 				children: (() => {
@@ -947,27 +980,35 @@ var ce = {
 							children: "Loading form..."
 						})]
 					});
-					if (e.sections?.length) return /* @__PURE__ */ (0, K.jsx)("div", {
-						className: "space-y-6",
-						children: e.sections.map((t, n) => {
-							let r = t.columns || 1;
-							return /* @__PURE__ */ (0, K.jsx)(q, {
-								label: t.label,
-								description: t.description,
-								columns: r,
-								gridClassName: ce[r],
-								children: /* @__PURE__ */ (0, K.jsx)(s, { schema: {
-									...N,
-									fields: w(t),
-									showSubmit: n === e.sections.length - 1 && N.showSubmit,
-									showCancel: n === e.sections.length - 1 && N.showCancel
-								} })
-							}, t.name || t.label || n);
-						})
-					});
-					let t = Q(m, d, e.columns, e.mode), n = ce[t.columns || 1];
+					if (e.sections?.length) {
+						let t = [];
+						return e.sections.forEach((e, n) => {
+							let r = e.name || String(n), i = w[r] ?? e.collapsed ?? !1;
+							t.push({
+								name: `__section_${r}`,
+								label: e.label || "",
+								type: "section-divider",
+								colSpan: 4,
+								collapsible: e.collapsible,
+								collapsed: i,
+								onToggle: e.collapsible ? () => T((e) => ({
+									...e,
+									[r]: !i
+								})) : void 0
+							});
+							let a = E(e);
+							i ? t.push(...a.map((e) => ({
+								...e,
+								hidden: !0
+							}))) : t.push(...a);
+						}), /* @__PURE__ */ (0, K.jsx)(s, { schema: {
+							...F,
+							fields: t
+						} });
+					}
+					let t = Q(m, d, e.columns, e.mode), n = ue[t.columns || 1];
 					return /* @__PURE__ */ (0, K.jsx)(s, { schema: {
-						...N,
+						...F,
 						fields: t.fields,
 						columns: t.columns,
 						...n ? { fieldContainerClass: n } : {}
@@ -976,18 +1017,18 @@ var ce = {
 			})]
 		})
 	});
-}, ue = {
+}, fe = {
 	sm: "sm:max-w-sm",
 	default: "sm:max-w-lg",
 	lg: "sm:max-w-2xl",
 	xl: "sm:max-w-5xl",
 	full: "sm:max-w-[95vw] sm:w-full"
-}, de = {
+}, pe = {
 	1: void 0,
 	2: "grid gap-4 grid-cols-1 @md:grid-cols-2",
 	3: "grid gap-4 grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3",
 	4: "grid gap-4 grid-cols-1 @md:grid-cols-2 @2xl:grid-cols-3 @4xl:grid-cols-4"
-}, fe = ({ schema: e, dataSource: o, className: u }) => {
+}, me = ({ schema: e, dataSource: o, className: u }) => {
 	let { fieldLabel: d } = c(), [m, h] = a(null), [g, _] = a([]), [v, w] = a({}), [T, E] = a(!0), [D, O] = a(null), [k, A] = a(!1), j = e.open !== !1, N = r(), P = i(() => e.sections?.length || e.customFields?.length ? null : Q(g, m, e.columns, e.mode), [
 		g,
 		m,
@@ -995,7 +1036,7 @@ var ce = {
 		e.mode,
 		e.sections,
 		e.customFields
-	]), F = ue[i(() => {
+	]), F = fe[i(() => {
 		if (e.modalSize) return e.modalSize;
 		if (P?.columns && P.columns > 1) return Z(P.columns);
 		if (e.sections?.length) {
@@ -1007,7 +1048,7 @@ var ce = {
 		e.modalSize,
 		P,
 		e.sections
-	])] || ue.default;
+	])] || fe.default;
 	n(() => {
 		(async () => {
 			if (!o) {
@@ -1175,7 +1216,7 @@ var ce = {
 					label: e.label,
 					description: e.description,
 					columns: n,
-					gridClassName: de[n],
+					gridClassName: pe[n],
 					children: /* @__PURE__ */ (0, K.jsx)(s, { schema: {
 						...G,
 						fields: I(e)
@@ -1183,7 +1224,7 @@ var ce = {
 				}, e.name || e.label || t);
 			})
 		});
-		let t = P ?? Q(g, m, e.columns, e.mode), n = de[t.columns || 1];
+		let t = P ?? Q(g, m, e.columns, e.mode), n = pe[t.columns || 1];
 		return /* @__PURE__ */ (0, K.jsx)(s, { schema: {
 			...G,
 			fields: t.fields,
@@ -1287,7 +1328,7 @@ var ce = {
 	});
 	if (e.formType === "drawer") {
 		let { layout: n, ...r } = e, i = e.layout === "vertical" || e.layout === "horizontal" ? e.layout : void 0;
-		return /* @__PURE__ */ (0, K.jsx)(le, {
+		return /* @__PURE__ */ (0, K.jsx)(de, {
 			schema: {
 				...r,
 				layout: i,
@@ -1297,7 +1338,9 @@ var ce = {
 					label: e.label,
 					description: e.description,
 					columns: e.columns,
-					fields: e.fields
+					fields: e.fields,
+					collapsible: e.collapsible,
+					collapsed: e.collapsed
 				})),
 				open: e.open,
 				onOpenChange: e.onOpenChange,
@@ -1310,7 +1353,7 @@ var ce = {
 	}
 	if (e.formType === "modal") {
 		let { layout: n, ...r } = e, i = e.layout === "vertical" || e.layout === "horizontal" ? e.layout : void 0;
-		return /* @__PURE__ */ (0, K.jsx)(fe, {
+		return /* @__PURE__ */ (0, K.jsx)(me, {
 			schema: {
 				...r,
 				layout: i,
@@ -1331,11 +1374,11 @@ var ce = {
 			className: e.className
 		});
 	}
-	return /* @__PURE__ */ (0, K.jsx)(pe, {
+	return /* @__PURE__ */ (0, K.jsx)(he, {
 		schema: e,
 		dataSource: t
 	});
-}, pe = ({ schema: r, dataSource: i }) => {
+}, he = ({ schema: r, dataSource: i }) => {
 	let { fieldLabel: o } = c(), [p, m] = a(null), [h, g] = a([]), [_, v] = a(null), [y, b] = a(!0), [x, S] = a(null), C = r.customFields && r.customFields.length > 0;
 	n(() => {
 		C && (v(r.initialData || r.initialValues || {}), b(!1));
@@ -1530,7 +1573,7 @@ var ce = {
 			className: r.className
 		} })
 	});
-}, me = ({ config: e, dataSource: n, prefillParams: r, className: o }) => {
+}, ge = ({ config: e, dataSource: n, prefillParams: r, className: o }) => {
 	let [s, c] = a(!1), [l, u] = a(!1), [d, f] = a(null), p = i(() => {
 		let e = {};
 		if (r) for (let [t, n] of Object.entries(r)) e[t] = n;
@@ -1651,10 +1694,10 @@ var ce = {
 };
 //#endregion
 //#region src/FormAnalytics.tsx
-function he(e) {
+function _e(e) {
 	return e < 60 ? `${Math.round(e)}s` : e < 3600 ? `${Math.floor(e / 60)}m ${Math.round(e % 60)}s` : `${Math.floor(e / 3600)}h ${Math.floor(e % 3600 / 60)}m`;
 }
-var ge = ({ formId: e, formTitle: t, metrics: n, className: r }) => {
+var ve = ({ formId: e, formTitle: t, metrics: n, className: r }) => {
 	let a = i(() => {
 		if (!n.abandonedSubmissions) return 100;
 		let e = n.totalSubmissions + n.abandonedSubmissions;
@@ -1697,7 +1740,7 @@ var ge = ({ formId: e, formTitle: t, metrics: n, className: r }) => {
 						className: "pb-2",
 						children: [/* @__PURE__ */ (0, K.jsx)(g, { children: "Avg. Completion Time" }), /* @__PURE__ */ (0, K.jsx)(v, {
 							className: "text-2xl",
-							children: n.avgCompletionTime ? he(n.avgCompletionTime) : "—"
+							children: n.avgCompletionTime ? _e(n.avgCompletionTime) : "—"
 						})]
 					}) })
 				]
@@ -1749,8 +1792,8 @@ var ge = ({ formId: e, formTitle: t, metrics: n, className: r }) => {
 			}) })] })
 		]
 	});
-}, _e = ({ schema: e }) => /* @__PURE__ */ (0, K.jsx)($, { schema: e });
-o.register("object-form", _e, {
+}, ye = ({ schema: e }) => /* @__PURE__ */ (0, K.jsx)($, { schema: e });
+o.register("object-form", ye, {
 	namespace: "plugin-form",
 	label: "Object Form",
 	category: "plugin",
@@ -1891,7 +1934,7 @@ o.register("object-form", _e, {
 			]
 		}
 	]
-}), o.register("form", _e, {
+}), o.register("form", ye, {
 	namespace: "view",
 	skipFallback: !0,
 	label: "Data Form View",
@@ -1919,7 +1962,7 @@ o.register("object-form", _e, {
 			]
 		}
 	]
-}), o.register("embeddable-form", ({ schema: e }) => /* @__PURE__ */ (0, K.jsx)(me, { config: e }), {
+}), o.register("embeddable-form", ({ schema: e }) => /* @__PURE__ */ (0, K.jsx)(ge, { config: e }), {
 	namespace: "plugin-form",
 	label: "Embeddable Form",
 	category: "plugin",
@@ -1957,7 +2000,7 @@ o.register("object-form", _e, {
 			label: "Allow Multiple Submissions"
 		}
 	]
-}), o.register("form-analytics", ({ schema: e }) => /* @__PURE__ */ (0, K.jsx)(ge, {
+}), o.register("form-analytics", ({ schema: e }) => /* @__PURE__ */ (0, K.jsx)(ve, {
 	formId: e.formId,
 	formTitle: e.formTitle,
 	metrics: e.metrics || { totalSubmissions: 0 }
@@ -1985,4 +2028,4 @@ o.register("object-form", _e, {
 	]
 });
 //#endregion
-export { le as DrawerForm, me as EmbeddableForm, ge as FormAnalytics, q as FormSection, fe as ModalForm, $ as ObjectForm, te as SplitForm, J as TabbedForm, Y as WizardForm, X as applyAutoColSpan, Q as applyAutoLayout, se as filterCreateModeFields, oe as inferColumns, Z as inferModalSize, ae as isAutoGeneratedFieldType, ie as isWideFieldType };
+export { de as DrawerForm, ge as EmbeddableForm, ve as FormAnalytics, q as FormSection, me as ModalForm, $ as ObjectForm, te as SplitForm, J as TabbedForm, Y as WizardForm, X as applyAutoColSpan, Q as applyAutoLayout, le as filterCreateModeFields, se as inferColumns, Z as inferModalSize, oe as isAutoGeneratedFieldType, ae as isWideFieldType };