@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/actions/action-dialog.mjs

@@ -0,0 +1,559 @@
+"use client";
+
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { buildValidationSchema } from "../../builder/validation.mjs";
+import { AutoFormFields } from "../../views/collection/auto-form-fields.mjs";
+import { ResponsiveDialog, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle } from "../ui/responsive-dialog.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormProvider, useForm } from "react-hook-form";
+import { toast } from "sonner";
+
+//#region src/client/components/actions/action-dialog.tsx
+/**
+* Action Dialog
+*
+* Renders dialog-type and form-type actions.
+* Supports lazy-loaded components and inline form definitions.
+* Form actions use AutoFormFields for full field system support.
+*/
+/**
+* Create a custom resolver for action form validation
+* Uses buildValidationSchema and handles Zod v4 compatibility
+*/
+function createActionFormResolver(fields) {
+	const schema = buildValidationSchema(fields);
+	return async (values) => {
+		const result = schema.safeParse(values);
+		if (result.success) return {
+			values: result.data,
+			errors: {}
+		};
+		const errors = {};
+		for (const issue of result.error.issues) {
+			const path = issue.path.join(".");
+			if (path && !errors[path]) errors[path] = {
+				type: issue.code,
+				message: issue.message
+			};
+		}
+		return {
+			values: {},
+			errors
+		};
+	};
+}
+/**
+* Form Dialog content - renders form fields using AutoFormFields
+*
+* Uses buildValidationSchema for automatic Zod schema generation
+* from field definitions, providing full field system support.
+*/
+function FormDialogContent(t0) {
+	const $ = c(60);
+	const { action, ctx, onClose } = t0;
+	const { config } = action.handler;
+	const resolveText = useResolveText();
+	const { t } = useTranslation();
+	let t1;
+	if ($[0] !== config.fields) {
+		t1 = createActionFormResolver(config.fields);
+		$[0] = config.fields;
+		$[1] = t1;
+	} else t1 = $[1];
+	const resolver = t1;
+	let t2;
+	if ($[2] !== config.defaultValues) {
+		t2 = config.defaultValues || {};
+		$[2] = config.defaultValues;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== resolver || $[5] !== t2) {
+		t3 = {
+			defaultValues: t2,
+			resolver
+		};
+		$[4] = resolver;
+		$[5] = t2;
+		$[6] = t3;
+	} else t3 = $[6];
+	const form = useForm(t3);
+	const [isSubmitting, setIsSubmitting] = React.useState(false);
+	let t4;
+	if ($[7] !== config || $[8] !== ctx || $[9] !== form || $[10] !== onClose || $[11] !== t) {
+		let t5$1;
+		if ($[13] !== config || $[14] !== ctx || $[15] !== onClose || $[16] !== t) {
+			t5$1 = async (data) => {
+				setIsSubmitting(true);
+				const submitPromise = async () => {
+					await config.onSubmit(data, ctx);
+					return data;
+				};
+				toast.promise(submitPromise(), {
+					loading: t("toast.processing"),
+					success: () => {
+						onClose();
+						return t("toast.actionSuccess");
+					},
+					error: (error) => error instanceof Error ? error.message : t("toast.actionFailed"),
+					finally: () => {
+						setIsSubmitting(false);
+					}
+				});
+			};
+			$[13] = config;
+			$[14] = ctx;
+			$[15] = onClose;
+			$[16] = t;
+			$[17] = t5$1;
+		} else t5$1 = $[17];
+		t4 = form.handleSubmit(t5$1);
+		$[7] = config;
+		$[8] = ctx;
+		$[9] = form;
+		$[10] = onClose;
+		$[11] = t;
+		$[12] = t4;
+	} else t4 = $[12];
+	const handleSubmit = t4;
+	const t5 = config.fields;
+	let t6;
+	if ($[18] !== t5) {
+		t6 = { fields: t5 };
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	const collectionConfig = t6;
+	let t7;
+	if ($[20] !== config.title || $[21] !== resolveText) {
+		t7 = resolveText(config.title);
+		$[20] = config.title;
+		$[21] = resolveText;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== t7) {
+		t8 = /* @__PURE__ */ jsx(ResponsiveDialogTitle, { children: t7 });
+		$[23] = t7;
+		$[24] = t8;
+	} else t8 = $[24];
+	let t9;
+	if ($[25] !== config.description || $[26] !== resolveText) {
+		t9 = config.description && /* @__PURE__ */ jsx(ResponsiveDialogDescription, { children: resolveText(config.description) });
+		$[25] = config.description;
+		$[26] = resolveText;
+		$[27] = t9;
+	} else t9 = $[27];
+	let t10;
+	if ($[28] !== t8 || $[29] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(ResponsiveDialogHeader, { children: [t8, t9] });
+		$[28] = t8;
+		$[29] = t9;
+		$[30] = t10;
+	} else t10 = $[30];
+	let t11;
+	if ($[31] !== collectionConfig) {
+		t11 = /* @__PURE__ */ jsx(AutoFormFields, {
+			collection: "__action__",
+			config: collectionConfig
+		});
+		$[31] = collectionConfig;
+		$[32] = t11;
+	} else t11 = $[32];
+	let t12;
+	if ($[33] !== config.cancelLabel || $[34] !== resolveText || $[35] !== t) {
+		t12 = resolveText(config.cancelLabel, t("common.cancel"));
+		$[33] = config.cancelLabel;
+		$[34] = resolveText;
+		$[35] = t;
+		$[36] = t12;
+	} else t12 = $[36];
+	let t13;
+	if ($[37] !== isSubmitting || $[38] !== onClose || $[39] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "outline",
+			onClick: onClose,
+			disabled: isSubmitting,
+			children: t12
+		});
+		$[37] = isSubmitting;
+		$[38] = onClose;
+		$[39] = t12;
+		$[40] = t13;
+	} else t13 = $[40];
+	let t14;
+	if ($[41] !== config.submitLabel || $[42] !== isSubmitting || $[43] !== resolveText || $[44] !== t) {
+		t14 = isSubmitting ? t("common.loading") : resolveText(config.submitLabel, t("common.submit"));
+		$[41] = config.submitLabel;
+		$[42] = isSubmitting;
+		$[43] = resolveText;
+		$[44] = t;
+		$[45] = t14;
+	} else t14 = $[45];
+	let t15;
+	if ($[46] !== isSubmitting || $[47] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			disabled: isSubmitting,
+			children: t14
+		});
+		$[46] = isSubmitting;
+		$[47] = t14;
+		$[48] = t15;
+	} else t15 = $[48];
+	let t16;
+	if ($[49] !== t13 || $[50] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(ResponsiveDialogFooter, {
+			className: "mt-6",
+			children: [t13, t15]
+		});
+		$[49] = t13;
+		$[50] = t15;
+		$[51] = t16;
+	} else t16 = $[51];
+	let t17;
+	if ($[52] !== handleSubmit || $[53] !== t11 || $[54] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("form", {
+			onSubmit: handleSubmit,
+			className: "space-y-4",
+			children: [t11, t16]
+		});
+		$[52] = handleSubmit;
+		$[53] = t11;
+		$[54] = t16;
+		$[55] = t17;
+	} else t17 = $[55];
+	let t18;
+	if ($[56] !== form || $[57] !== t10 || $[58] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(FormProvider, {
+			...form,
+			children: [t10, t17]
+		});
+		$[56] = form;
+		$[57] = t10;
+		$[58] = t17;
+		$[59] = t18;
+	} else t18 = $[59];
+	return t18;
+}
+/**
+* Custom Dialog content - renders lazy-loaded component
+*/
+function CustomDialogContent(t0) {
+	const $ = c(26);
+	const { action, ctx, onClose } = t0;
+	const { t } = useTranslation();
+	const handler = action.handler;
+	const [Component, setComponent] = React.useState(null);
+	const [loading, setLoading] = React.useState(true);
+	const [error, setError] = React.useState(null);
+	let t1;
+	if ($[0] !== handler.component || $[1] !== t) {
+		t1 = () => {
+			let mounted = true;
+			(async function loadComponent() {
+				try {
+					const comp = handler.component;
+					if (typeof comp === "function") {
+						const lazyComp = comp;
+						if (lazyComp._payload !== void 0) {
+							const resolved = await lazyComp._payload();
+							if (mounted) {
+								let comp2;
+								if (resolved.default) comp2 = resolved.default;
+								else comp2 = resolved;
+								setComponent(() => comp2);
+							}
+						} else {
+							const result = comp();
+							let hasThen = false;
+							if (result != null) {
+								if (result.then) hasThen = true;
+							}
+							if (hasThen) {
+								const mod = await result;
+								if (mounted) {
+									let comp2_0;
+									if (mod.default) comp2_0 = mod.default;
+									else comp2_0 = mod;
+									setComponent(() => comp2_0);
+								}
+							} else if (mounted) setComponent(() => comp);
+						}
+					} else if (mounted) setComponent(() => comp);
+					if (mounted) setLoading(false);
+				} catch (t2$1) {
+					const err = t2$1;
+					if (mounted) {
+						if (err instanceof Error) setError(err);
+						else setError(new Error(t("error.failedToLoad")));
+						setLoading(false);
+					}
+				}
+			})();
+			return () => {
+				mounted = false;
+			};
+		};
+		$[0] = handler.component;
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== handler.component) {
+		t2 = [handler.component];
+		$[3] = handler.component;
+		$[4] = t2;
+	} else t2 = $[4];
+	React.useEffect(t1, t2);
+	if (loading) {
+		let t3$1;
+		if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+			t3$1 = /* @__PURE__ */ jsx("div", {
+				className: "flex h-32 items-center justify-center",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:spinner-gap",
+					className: "text-muted-foreground size-6 animate-spin"
+				})
+			});
+			$[5] = t3$1;
+		} else t3$1 = $[5];
+		return t3$1;
+	}
+	if (error) {
+		let t3$1;
+		if ($[6] !== error.message) {
+			t3$1 = /* @__PURE__ */ jsx("p", {
+				className: "text-destructive",
+				children: error.message
+			});
+			$[6] = error.message;
+			$[7] = t3$1;
+		} else t3$1 = $[7];
+		let t4$1;
+		if ($[8] !== onClose) {
+			t4$1 = /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				onClick: onClose,
+				className: "mt-4",
+				children: "Close"
+			});
+			$[8] = onClose;
+			$[9] = t4$1;
+		} else t4$1 = $[9];
+		let t5;
+		if ($[10] !== t3$1 || $[11] !== t4$1) {
+			t5 = /* @__PURE__ */ jsxs("div", {
+				className: "p-4 text-center",
+				children: [t3$1, t4$1]
+			});
+			$[10] = t3$1;
+			$[11] = t4$1;
+			$[12] = t5;
+		} else t5 = $[12];
+		return t5;
+	}
+	if (!Component) {
+		let t3$1;
+		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+			t3$1 = /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground",
+				children: "Component not found"
+			});
+			$[13] = t3$1;
+		} else t3$1 = $[13];
+		let t4$1;
+		if ($[14] !== onClose) {
+			t4$1 = /* @__PURE__ */ jsxs("div", {
+				className: "p-4 text-center",
+				children: [t3$1, /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					onClick: onClose,
+					className: "mt-4",
+					children: "Close"
+				})]
+			});
+			$[14] = onClose;
+			$[15] = t4$1;
+		} else t4$1 = $[15];
+		return t4$1;
+	}
+	let t3;
+	if ($[16] !== ctx.helpers || $[17] !== onClose) {
+		t3 = () => {
+			ctx.helpers.refresh();
+			onClose();
+		};
+		$[16] = ctx.helpers;
+		$[17] = onClose;
+		$[18] = t3;
+	} else t3 = $[18];
+	let t4;
+	if ($[19] !== Component || $[20] !== ctx.collection || $[21] !== ctx.item || $[22] !== ctx.items || $[23] !== onClose || $[24] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Component, {
+			item: ctx.item,
+			items: ctx.items,
+			collection: ctx.collection,
+			onClose,
+			onSuccess: t3
+		});
+		$[19] = Component;
+		$[20] = ctx.collection;
+		$[21] = ctx.item;
+		$[22] = ctx.items;
+		$[23] = onClose;
+		$[24] = t3;
+		$[25] = t4;
+	} else t4 = $[25];
+	return t4;
+}
+/**
+* ActionDialog - Renders dialog-type and form-type actions
+*
+* @example
+* ```tsx
+* <ActionDialog
+*   open={!!activeAction}
+*   onOpenChange={(open) => !open && setActiveAction(null)}
+*   action={activeAction}
+*   collection="users"
+*   item={selectedUser}
+*   helpers={actionHelpers}
+* />
+* ```
+*/
+function ActionDialog(t0) {
+	const $ = c(35);
+	const { open, onOpenChange, action, collection, item, items, helpers } = t0;
+	const queryClient = useQueryClient();
+	let t1;
+	if ($[0] !== onOpenChange) {
+		t1 = () => onOpenChange(false);
+		$[0] = onOpenChange;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== helpers || $[3] !== t1) {
+		t2 = {
+			...helpers,
+			closeDialog: t1
+		};
+		$[2] = helpers;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== queryClient) {
+		t3 = {
+			invalidateQueries: (filters) => queryClient.invalidateQueries(filters),
+			resetQueries: (filters_0) => queryClient.resetQueries(filters_0),
+			refetchQueries: (filters_1) => queryClient.refetchQueries(filters_1)
+		};
+		$[5] = queryClient;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== collection || $[8] !== item || $[9] !== items || $[10] !== t2 || $[11] !== t3) {
+		t4 = {
+			item,
+			items,
+			collection,
+			helpers: t2,
+			queryClient: t3
+		};
+		$[7] = collection;
+		$[8] = item;
+		$[9] = items;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	const ctx = t4;
+	let t5;
+	if ($[13] !== onOpenChange) {
+		t5 = () => onOpenChange(false);
+		$[13] = onOpenChange;
+		$[14] = t5;
+	} else t5 = $[14];
+	const handleClose = t5;
+	let t6;
+	if ($[15] !== action.handler) {
+		t6 = () => {
+			if (action.handler.type === "form") return {
+				sm: "sm:max-w-sm",
+				md: "sm:max-w-md",
+				lg: "sm:max-w-lg",
+				xl: "sm:max-w-xl"
+			}[action.handler.config.width || "md"];
+			if (action.handler.type === "dialog") return "sm:max-w-lg";
+			return "sm:max-w-md";
+		};
+		$[15] = action.handler;
+		$[16] = t6;
+	} else t6 = $[16];
+	const getDialogClassName = t6;
+	let t7;
+	if ($[17] !== getDialogClassName) {
+		t7 = cn("qa-action-dialog", getDialogClassName());
+		$[17] = getDialogClassName;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== action || $[20] !== ctx || $[21] !== handleClose) {
+		t8 = action.handler.type === "form" && /* @__PURE__ */ jsx(FormDialogContent, {
+			action,
+			ctx,
+			onClose: handleClose
+		});
+		$[19] = action;
+		$[20] = ctx;
+		$[21] = handleClose;
+		$[22] = t8;
+	} else t8 = $[22];
+	let t9;
+	if ($[23] !== action || $[24] !== ctx || $[25] !== handleClose) {
+		t9 = action.handler.type === "dialog" && /* @__PURE__ */ jsx(CustomDialogContent, {
+			action,
+			ctx,
+			onClose: handleClose
+		});
+		$[23] = action;
+		$[24] = ctx;
+		$[25] = handleClose;
+		$[26] = t9;
+	} else t9 = $[26];
+	let t10;
+	if ($[27] !== t7 || $[28] !== t8 || $[29] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(ResponsiveDialogContent, {
+			className: t7,
+			children: [t8, t9]
+		});
+		$[27] = t7;
+		$[28] = t8;
+		$[29] = t9;
+		$[30] = t10;
+	} else t10 = $[30];
+	let t11;
+	if ($[31] !== onOpenChange || $[32] !== open || $[33] !== t10) {
+		t11 = /* @__PURE__ */ jsx(ResponsiveDialog, {
+			open,
+			onOpenChange,
+			children: t10
+		});
+		$[31] = onOpenChange;
+		$[32] = open;
+		$[33] = t10;
+		$[34] = t11;
+	} else t11 = $[34];
+	return t11;
+}
+
+//#endregion
+export { ActionDialog };