@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/fields/object-field.mjs

@@ -0,0 +1,686 @@
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { selectAdmin, useAdminStore } from "../../runtime/provider.mjs";
+import { configureField } from "../../builder/field/field.mjs";
+import { gridColumnClasses } from "./field-utils.mjs";
+import { FieldWrapper } from "./field-wrapper.mjs";
+import { FieldLayoutRenderer } from "../layout/field-layout-renderer.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/object-field.tsx
+/**
+* ObjectField Component
+*
+* Renders nested fields for JSON object structures.
+* Supports wrapper modes (flat, collapsible) and layout modes (stack, inline, grid).
+*/
+function NestedFieldRenderer(t0) {
+	const $ = c(35);
+	const { fieldName, fieldDef, parentName, disabled } = t0;
+	const resolveText = useResolveText();
+	const fullName = `${parentName}.${fieldName}`;
+	let t1;
+	if ($[0] !== fieldDef) {
+		t1 = fieldDef["~options"] || {};
+		$[0] = fieldDef;
+		$[1] = t1;
+	} else t1 = $[1];
+	const options = t1;
+	const Component = fieldDef.component;
+	if (!Component) {
+		let t2$1;
+		if ($[2] !== fieldDef.name) {
+			t2$1 = /* @__PURE__ */ jsxs("div", {
+				className: "text-destructive text-sm",
+				children: ["No component for field type: ", fieldDef.name]
+			});
+			$[2] = fieldDef.name;
+			$[3] = t2$1;
+		} else t2$1 = $[3];
+		return t2$1;
+	}
+	let description;
+	let fieldSpecificOptions;
+	let label;
+	let locale;
+	let localized;
+	let optionsDisabled;
+	let placeholder;
+	let readOnly;
+	let required;
+	if ($[4] !== options) {
+		const { label: t2$1, description: t3$1, placeholder: t4$1, required: t5$1, disabled: t6$1, readOnly: t7, hidden, localized: t8, locale: t9, ...t10 } = options;
+		label = t2$1;
+		description = t3$1;
+		placeholder = t4$1;
+		required = t5$1;
+		optionsDisabled = t6$1;
+		readOnly = t7;
+		localized = t8;
+		locale = t9;
+		fieldSpecificOptions = t10;
+		$[4] = options;
+		$[5] = description;
+		$[6] = fieldSpecificOptions;
+		$[7] = label;
+		$[8] = locale;
+		$[9] = localized;
+		$[10] = optionsDisabled;
+		$[11] = placeholder;
+		$[12] = readOnly;
+		$[13] = required;
+	} else {
+		description = $[5];
+		fieldSpecificOptions = $[6];
+		label = $[7];
+		locale = $[8];
+		localized = $[9];
+		optionsDisabled = $[10];
+		placeholder = $[11];
+		readOnly = $[12];
+		required = $[13];
+	}
+	let t2;
+	if ($[14] !== label || $[15] !== resolveText) {
+		t2 = resolveText(label);
+		$[14] = label;
+		$[15] = resolveText;
+		$[16] = t2;
+	} else t2 = $[16];
+	let t3;
+	if ($[17] !== description || $[18] !== resolveText) {
+		t3 = resolveText(description);
+		$[17] = description;
+		$[18] = resolveText;
+		$[19] = t3;
+	} else t3 = $[19];
+	let t4;
+	if ($[20] !== placeholder || $[21] !== resolveText) {
+		t4 = resolveText(placeholder);
+		$[20] = placeholder;
+		$[21] = resolveText;
+		$[22] = t4;
+	} else t4 = $[22];
+	const t5 = disabled || optionsDisabled;
+	let t6;
+	if ($[23] !== Component || $[24] !== fieldSpecificOptions || $[25] !== fullName || $[26] !== locale || $[27] !== localized || $[28] !== readOnly || $[29] !== required || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Component, {
+			name: fullName,
+			label: t2,
+			description: t3,
+			placeholder: t4,
+			required,
+			disabled: t5,
+			readOnly,
+			localized,
+			locale,
+			...fieldSpecificOptions
+		});
+		$[23] = Component;
+		$[24] = fieldSpecificOptions;
+		$[25] = fullName;
+		$[26] = locale;
+		$[27] = localized;
+		$[28] = readOnly;
+		$[29] = required;
+		$[30] = t2;
+		$[31] = t3;
+		$[32] = t4;
+		$[33] = t5;
+		$[34] = t6;
+	} else t6 = $[34];
+	return t6;
+}
+function ObjectField(t0) {
+	const $ = c(136);
+	const { name, label, description, required, disabled, localized, locale, className, fields: fieldsProp, form: formProp, wrapper: t1, layout: t2, columns: t3, defaultCollapsed: t4 } = t0;
+	const wrapper = t1 === void 0 ? "collapsible" : t1;
+	const layout = t2 === void 0 ? "stack" : t2;
+	const columns = t3 === void 0 ? 2 : t3;
+	const defaultCollapsed = t4 === void 0 ? true : t4;
+	const resolveText = useResolveText();
+	const admin = useAdminStore(selectAdmin);
+	const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
+	let t5;
+	bb0: {
+		if (!fieldsProp) {
+			let t6$1;
+			if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+				t6$1 = {};
+				$[0] = t6$1;
+			} else t6$1 = $[0];
+			t5 = t6$1;
+			break bb0;
+		}
+		if (typeof fieldsProp === "function") {
+			let t6$1;
+			if ($[1] !== admin || $[2] !== fieldsProp) {
+				const registeredFields = admin.getFields();
+				const r = {};
+				for (const key in registeredFields) r[key] = (opts) => configureField(registeredFields[key], opts ?? {});
+				t6$1 = fieldsProp({ r });
+				$[1] = admin;
+				$[2] = fieldsProp;
+				$[3] = t6$1;
+			} else t6$1 = $[3];
+			t5 = t6$1;
+			break bb0;
+		}
+		t5 = fieldsProp;
+	}
+	const nestedFields = t5;
+	let t6;
+	if ($[4] !== nestedFields) {
+		t6 = Object.entries(nestedFields);
+		$[4] = nestedFields;
+		$[5] = t6;
+	} else t6 = $[5];
+	const fieldEntries = t6;
+	if (fieldEntries.length === 0) return null;
+	if (formProp?.fields?.length) {
+		let t7$1;
+		if ($[6] !== disabled || $[7] !== name || $[8] !== nestedFields) {
+			t7$1 = (fieldName, opts_0) => {
+				const fieldDef = nestedFields[fieldName];
+				if (!fieldDef) return null;
+				return /* @__PURE__ */ jsx(NestedFieldRenderer, {
+					fieldName,
+					fieldDef,
+					parentName: name,
+					disabled
+				}, fieldName);
+			};
+			$[6] = disabled;
+			$[7] = name;
+			$[8] = nestedFields;
+			$[9] = t7$1;
+		} else t7$1 = $[9];
+		let t8$1;
+		if ($[10] !== resolveText) {
+			t8$1 = (text, fallback) => resolveText(text, fallback);
+			$[10] = resolveText;
+			$[11] = t8$1;
+		} else t8$1 = $[11];
+		let t9$1;
+		if ($[12] !== t7$1 || $[13] !== t8$1) {
+			t9$1 = {
+				renderField: t7$1,
+				resolveText: t8$1
+			};
+			$[12] = t7$1;
+			$[13] = t8$1;
+			$[14] = t9$1;
+		} else t9$1 = $[14];
+		const layoutCtx = t9$1;
+		let t10;
+		if ($[15] !== formProp.fields || $[16] !== layoutCtx) {
+			t10 = /* @__PURE__ */ jsx(FieldLayoutRenderer, {
+				items: formProp.fields,
+				ctx: layoutCtx
+			});
+			$[15] = formProp.fields;
+			$[16] = layoutCtx;
+			$[17] = t10;
+		} else t10 = $[17];
+		const content = t10;
+		if (wrapper === "collapsible") {
+			let t11$1;
+			if ($[18] !== className) {
+				t11$1 = cn("qa-object-field border-border bg-card border", className);
+				$[18] = className;
+				$[19] = t11$1;
+			} else t11$1 = $[19];
+			let t12$1;
+			if ($[20] !== isCollapsed) {
+				t12$1 = () => setIsCollapsed(!isCollapsed);
+				$[20] = isCollapsed;
+				$[21] = t12$1;
+			} else t12$1 = $[21];
+			let t13;
+			if ($[22] !== isCollapsed) {
+				t13 = isCollapsed ? /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:caret-right",
+					className: "h-4 w-4"
+				}) : /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:caret-down",
+					className: "h-4 w-4"
+				});
+				$[22] = isCollapsed;
+				$[23] = t13;
+			} else t13 = $[23];
+			const t14 = label ?? name;
+			let t15;
+			if ($[24] !== resolveText || $[25] !== t14) {
+				t15 = resolveText(t14);
+				$[24] = resolveText;
+				$[25] = t14;
+				$[26] = t15;
+			} else t15 = $[26];
+			let t16;
+			if ($[27] !== t15) {
+				t16 = /* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: t15
+				});
+				$[27] = t15;
+				$[28] = t16;
+			} else t16 = $[28];
+			let t17;
+			if ($[29] !== required) {
+				t17 = required && /* @__PURE__ */ jsx("span", {
+					className: "text-destructive",
+					children: "*"
+				});
+				$[29] = required;
+				$[30] = t17;
+			} else t17 = $[30];
+			let t18;
+			if ($[31] !== t13 || $[32] !== t16 || $[33] !== t17) {
+				t18 = /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						t13,
+						t16,
+						t17
+					]
+				});
+				$[31] = t13;
+				$[32] = t16;
+				$[33] = t17;
+				$[34] = t18;
+			} else t18 = $[34];
+			let t19;
+			if ($[35] !== disabled || $[36] !== t12$1 || $[37] !== t18) {
+				t19 = /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: t12$1,
+					className: "hover:bg-muted flex w-full items-center justify-between p-3 text-left",
+					disabled,
+					children: t18
+				});
+				$[35] = disabled;
+				$[36] = t12$1;
+				$[37] = t18;
+				$[38] = t19;
+			} else t19 = $[38];
+			let t20;
+			if ($[39] !== content || $[40] !== isCollapsed) {
+				t20 = !isCollapsed && /* @__PURE__ */ jsx("div", {
+					className: "border-t p-4",
+					children: content
+				});
+				$[39] = content;
+				$[40] = isCollapsed;
+				$[41] = t20;
+			} else t20 = $[41];
+			let t21;
+			if ($[42] !== t11$1 || $[43] !== t19 || $[44] !== t20) {
+				t21 = /* @__PURE__ */ jsxs("div", {
+					className: t11$1,
+					children: [t19, t20]
+				});
+				$[42] = t11$1;
+				$[43] = t19;
+				$[44] = t20;
+				$[45] = t21;
+			} else t21 = $[45];
+			return t21;
+		}
+		if (label) {
+			let t11$1;
+			if ($[46] !== label || $[47] !== resolveText) {
+				t11$1 = resolveText(label);
+				$[46] = label;
+				$[47] = resolveText;
+				$[48] = t11$1;
+			} else t11$1 = $[48];
+			let t12$1;
+			if ($[49] !== className) {
+				t12$1 = cn("qa-object-field pt-1", className);
+				$[49] = className;
+				$[50] = t12$1;
+			} else t12$1 = $[50];
+			let t13;
+			if ($[51] !== content || $[52] !== t12$1) {
+				t13 = /* @__PURE__ */ jsx("div", {
+					className: t12$1,
+					children: content
+				});
+				$[51] = content;
+				$[52] = t12$1;
+				$[53] = t13;
+			} else t13 = $[53];
+			let t14;
+			if ($[54] !== description || $[55] !== disabled || $[56] !== locale || $[57] !== localized || $[58] !== name || $[59] !== required || $[60] !== t11$1 || $[61] !== t13) {
+				t14 = /* @__PURE__ */ jsx(FieldWrapper, {
+					name,
+					label: t11$1,
+					description,
+					required,
+					disabled,
+					localized,
+					locale,
+					children: t13
+				});
+				$[54] = description;
+				$[55] = disabled;
+				$[56] = locale;
+				$[57] = localized;
+				$[58] = name;
+				$[59] = required;
+				$[60] = t11$1;
+				$[61] = t13;
+				$[62] = t14;
+			} else t14 = $[62];
+			return t14;
+		}
+		let t11;
+		if ($[63] !== className) {
+			t11 = cn("qa-object-field", className);
+			$[63] = className;
+			$[64] = t11;
+		} else t11 = $[64];
+		let t12;
+		if ($[65] !== content || $[66] !== t11) {
+			t12 = /* @__PURE__ */ jsx("div", {
+				className: t11,
+				children: content
+			});
+			$[65] = content;
+			$[66] = t11;
+			$[67] = t12;
+		} else t12 = $[67];
+		return t12;
+	}
+	if (wrapper === "collapsible" || layout === "collapsible") {
+		let t7$1;
+		if ($[68] !== className) {
+			t7$1 = cn("qa-object-field border-border bg-card border", className);
+			$[68] = className;
+			$[69] = t7$1;
+		} else t7$1 = $[69];
+		let t8$1;
+		if ($[70] !== isCollapsed) {
+			t8$1 = () => setIsCollapsed(!isCollapsed);
+			$[70] = isCollapsed;
+			$[71] = t8$1;
+		} else t8$1 = $[71];
+		let t9$1;
+		if ($[72] !== isCollapsed) {
+			t9$1 = isCollapsed ? /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:caret-right",
+				className: "h-4 w-4"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:caret-down",
+				className: "h-4 w-4"
+			});
+			$[72] = isCollapsed;
+			$[73] = t9$1;
+		} else t9$1 = $[73];
+		const t10 = label ?? name;
+		let t11;
+		if ($[74] !== resolveText || $[75] !== t10) {
+			t11 = resolveText(t10);
+			$[74] = resolveText;
+			$[75] = t10;
+			$[76] = t11;
+		} else t11 = $[76];
+		let t12;
+		if ($[77] !== t11) {
+			t12 = /* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: t11
+			});
+			$[77] = t11;
+			$[78] = t12;
+		} else t12 = $[78];
+		let t13;
+		if ($[79] !== required) {
+			t13 = required && /* @__PURE__ */ jsx("span", {
+				className: "text-destructive",
+				children: "*"
+			});
+			$[79] = required;
+			$[80] = t13;
+		} else t13 = $[80];
+		let t14;
+		if ($[81] !== t12 || $[82] !== t13 || $[83] !== t9$1) {
+			t14 = /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					t9$1,
+					t12,
+					t13
+				]
+			});
+			$[81] = t12;
+			$[82] = t13;
+			$[83] = t9$1;
+			$[84] = t14;
+		} else t14 = $[84];
+		let t15;
+		if ($[85] !== disabled || $[86] !== t14 || $[87] !== t8$1) {
+			t15 = /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: t8$1,
+				className: "hover:bg-muted flex w-full items-center justify-between p-3 text-left",
+				disabled,
+				children: t14
+			});
+			$[85] = disabled;
+			$[86] = t14;
+			$[87] = t8$1;
+			$[88] = t15;
+		} else t15 = $[88];
+		let t16;
+		if ($[89] !== columns || $[90] !== description || $[91] !== disabled || $[92] !== fieldEntries || $[93] !== isCollapsed || $[94] !== layout || $[95] !== name || $[96] !== resolveText) {
+			t16 = !isCollapsed && /* @__PURE__ */ jsxs("div", {
+				className: "border-t p-4",
+				children: [description && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground mb-4 text-sm",
+					children: resolveText(description)
+				}), /* @__PURE__ */ jsx(NestedFieldsLayout, {
+					fieldEntries,
+					layout,
+					columns,
+					name,
+					disabled
+				})]
+			});
+			$[89] = columns;
+			$[90] = description;
+			$[91] = disabled;
+			$[92] = fieldEntries;
+			$[93] = isCollapsed;
+			$[94] = layout;
+			$[95] = name;
+			$[96] = resolveText;
+			$[97] = t16;
+		} else t16 = $[97];
+		let t17;
+		if ($[98] !== t15 || $[99] !== t16 || $[100] !== t7$1) {
+			t17 = /* @__PURE__ */ jsxs("div", {
+				className: t7$1,
+				children: [t15, t16]
+			});
+			$[98] = t15;
+			$[99] = t16;
+			$[100] = t7$1;
+			$[101] = t17;
+		} else t17 = $[101];
+		return t17;
+	}
+	if (label) {
+		let t7$1;
+		if ($[102] !== label || $[103] !== resolveText) {
+			t7$1 = resolveText(label);
+			$[102] = label;
+			$[103] = resolveText;
+			$[104] = t7$1;
+		} else t7$1 = $[104];
+		let t8$1;
+		if ($[105] !== className) {
+			t8$1 = cn("qa-object-field pt-1", className);
+			$[105] = className;
+			$[106] = t8$1;
+		} else t8$1 = $[106];
+		let t9$1;
+		if ($[107] !== columns || $[108] !== disabled || $[109] !== fieldEntries || $[110] !== layout || $[111] !== name) {
+			t9$1 = /* @__PURE__ */ jsx(NestedFieldsLayout, {
+				fieldEntries,
+				layout,
+				columns,
+				name,
+				disabled
+			});
+			$[107] = columns;
+			$[108] = disabled;
+			$[109] = fieldEntries;
+			$[110] = layout;
+			$[111] = name;
+			$[112] = t9$1;
+		} else t9$1 = $[112];
+		let t10;
+		if ($[113] !== t8$1 || $[114] !== t9$1) {
+			t10 = /* @__PURE__ */ jsx("div", {
+				className: t8$1,
+				children: t9$1
+			});
+			$[113] = t8$1;
+			$[114] = t9$1;
+			$[115] = t10;
+		} else t10 = $[115];
+		let t11;
+		if ($[116] !== description || $[117] !== disabled || $[118] !== locale || $[119] !== localized || $[120] !== name || $[121] !== required || $[122] !== t10 || $[123] !== t7$1) {
+			t11 = /* @__PURE__ */ jsx(FieldWrapper, {
+				name,
+				label: t7$1,
+				description,
+				required,
+				disabled,
+				localized,
+				locale,
+				children: t10
+			});
+			$[116] = description;
+			$[117] = disabled;
+			$[118] = locale;
+			$[119] = localized;
+			$[120] = name;
+			$[121] = required;
+			$[122] = t10;
+			$[123] = t7$1;
+			$[124] = t11;
+		} else t11 = $[124];
+		return t11;
+	}
+	let t7;
+	if ($[125] !== className) {
+		t7 = cn("qa-object-field", className);
+		$[125] = className;
+		$[126] = t7;
+	} else t7 = $[126];
+	let t8;
+	if ($[127] !== columns || $[128] !== disabled || $[129] !== fieldEntries || $[130] !== layout || $[131] !== name) {
+		t8 = /* @__PURE__ */ jsx(NestedFieldsLayout, {
+			fieldEntries,
+			layout,
+			columns,
+			name,
+			disabled
+		});
+		$[127] = columns;
+		$[128] = disabled;
+		$[129] = fieldEntries;
+		$[130] = layout;
+		$[131] = name;
+		$[132] = t8;
+	} else t8 = $[132];
+	let t9;
+	if ($[133] !== t7 || $[134] !== t8) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: t7,
+			children: t8
+		});
+		$[133] = t7;
+		$[134] = t8;
+		$[135] = t9;
+	} else t9 = $[135];
+	return t9;
+}
+function NestedFieldsLayout(t0) {
+	const $ = c(16);
+	const { fieldEntries, layout, columns, name, disabled } = t0;
+	let t1;
+	if ($[0] !== disabled || $[1] !== fieldEntries || $[2] !== name) {
+		let t2$1;
+		if ($[4] !== disabled || $[5] !== name) {
+			t2$1 = (t3) => {
+				const [fieldName, fieldDef] = t3;
+				return /* @__PURE__ */ jsx(NestedFieldRenderer, {
+					fieldName,
+					fieldDef,
+					parentName: name,
+					disabled
+				}, fieldName);
+			};
+			$[4] = disabled;
+			$[5] = name;
+			$[6] = t2$1;
+		} else t2$1 = $[6];
+		t1 = fieldEntries.map(t2$1);
+		$[0] = disabled;
+		$[1] = fieldEntries;
+		$[2] = name;
+		$[3] = t1;
+	} else t1 = $[3];
+	const fieldElements = t1;
+	if (layout === "inline") {
+		let t2$1;
+		if ($[7] !== fieldElements) {
+			t2$1 = /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap items-end gap-2",
+				children: fieldElements
+			});
+			$[7] = fieldElements;
+			$[8] = t2$1;
+		} else t2$1 = $[8];
+		return t2$1;
+	}
+	if (layout === "grid") {
+		const t2$1 = gridColumnClasses[columns] || "grid-cols-2";
+		let t3;
+		if ($[9] !== t2$1) {
+			t3 = cn("grid gap-4", t2$1);
+			$[9] = t2$1;
+			$[10] = t3;
+		} else t3 = $[10];
+		let t4;
+		if ($[11] !== fieldElements || $[12] !== t3) {
+			t4 = /* @__PURE__ */ jsx("div", {
+				className: t3,
+				children: fieldElements
+			});
+			$[11] = fieldElements;
+			$[12] = t3;
+			$[13] = t4;
+		} else t4 = $[13];
+		return t4;
+	}
+	let t2;
+	if ($[14] !== fieldElements) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "space-y-4",
+			children: fieldElements
+		});
+		$[14] = fieldElements;
+		$[15] = t2;
+	} else t2 = $[15];
+	return t2;
+}
+
+//#endregion
+export { ObjectField };