@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,506 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { Button } from "../ui/button.mjs";
+import { Input } from "../ui/input.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../ui/select.mjs";
+import { Textarea } from "../ui/textarea.mjs";
+import { LocaleBadge } from "./locale-badge.mjs";
+import { ObjectArrayField } from "./object-array-field.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
+
+//#region src/client/components/fields/array-field.tsx
+/**
+* ArrayField Component
+*
+* Handles arrays of primitive values or objects with optional ordering.
+* When `item` prop is provided, delegates to ObjectArrayField for object items.
+*/
+function ArrayItemInput(t0) {
+	const $ = c(44);
+	const { name, index, itemType, itemValue, placeholder, disabled, readOnly, options } = t0;
+	const resolveText = useResolveText();
+	const form = useFormContext();
+	const itemName = `${name}.${index}`;
+	const itemPlaceholder = placeholder || `Item ${index + 1}`;
+	if (itemType === "textarea") {
+		const t1$1 = disabled || readOnly;
+		const t2$1 = itemValue ?? "";
+		let t3$1;
+		if ($[0] !== form || $[1] !== itemName) {
+			t3$1 = form.register(itemName);
+			$[0] = form;
+			$[1] = itemName;
+			$[2] = t3$1;
+		} else t3$1 = $[2];
+		let t4$1;
+		if ($[3] !== itemName || $[4] !== itemPlaceholder || $[5] !== t1$1 || $[6] !== t2$1 || $[7] !== t3$1) {
+			t4$1 = /* @__PURE__ */ jsx(Textarea, {
+				id: itemName,
+				placeholder: itemPlaceholder,
+				disabled: t1$1,
+				defaultValue: t2$1,
+				...t3$1
+			});
+			$[3] = itemName;
+			$[4] = itemPlaceholder;
+			$[5] = t1$1;
+			$[6] = t2$1;
+			$[7] = t3$1;
+			$[8] = t4$1;
+		} else t4$1 = $[8];
+		return t4$1;
+	}
+	if (itemType === "select") {
+		const t1$1 = itemValue ?? "";
+		let t2$1;
+		if ($[9] !== form || $[10] !== itemName) {
+			t2$1 = (value) => form.setValue(itemName, value, {
+				shouldDirty: true,
+				shouldTouch: true
+			});
+			$[9] = form;
+			$[10] = itemName;
+			$[11] = t2$1;
+		} else t2$1 = $[11];
+		const t3$1 = disabled || readOnly;
+		let t4$1;
+		if ($[12] !== itemPlaceholder || $[13] !== itemValue || $[14] !== options || $[15] !== resolveText) {
+			t4$1 = options?.find((o_0) => o_0.value === itemValue)?.label ? resolveText(options.find((o) => o.value === itemValue)?.label) : itemPlaceholder;
+			$[12] = itemPlaceholder;
+			$[13] = itemValue;
+			$[14] = options;
+			$[15] = resolveText;
+			$[16] = t4$1;
+		} else t4$1 = $[16];
+		let t5$1;
+		if ($[17] !== t4$1) {
+			t5$1 = /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: t4$1
+			});
+			$[17] = t4$1;
+			$[18] = t5$1;
+		} else t5$1 = $[18];
+		let t6;
+		if ($[19] !== itemName || $[20] !== t5$1) {
+			t6 = /* @__PURE__ */ jsx(SelectTrigger, {
+				id: itemName,
+				children: t5$1
+			});
+			$[19] = itemName;
+			$[20] = t5$1;
+			$[21] = t6;
+		} else t6 = $[21];
+		let t7;
+		if ($[22] !== options || $[23] !== resolveText) {
+			t7 = options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				children: resolveText(option.label)
+			}, option.value));
+			$[22] = options;
+			$[23] = resolveText;
+			$[24] = t7;
+		} else t7 = $[24];
+		let t8;
+		if ($[25] !== t7) {
+			t8 = /* @__PURE__ */ jsx(SelectContent, { children: t7 });
+			$[25] = t7;
+			$[26] = t8;
+		} else t8 = $[26];
+		let t9;
+		if ($[27] !== t1$1 || $[28] !== t2$1 || $[29] !== t3$1 || $[30] !== t6 || $[31] !== t8) {
+			t9 = /* @__PURE__ */ jsxs(Select, {
+				value: t1$1,
+				onValueChange: t2$1,
+				disabled: t3$1,
+				children: [t6, t8]
+			});
+			$[27] = t1$1;
+			$[28] = t2$1;
+			$[29] = t3$1;
+			$[30] = t6;
+			$[31] = t8;
+			$[32] = t9;
+		} else t9 = $[32];
+		return t9;
+	}
+	const t1 = itemType === "email" ? "email" : itemType;
+	const t2 = disabled || readOnly;
+	const t3 = itemValue ?? "";
+	let t4;
+	if ($[33] !== form || $[34] !== itemName || $[35] !== itemType) {
+		t4 = form.register(itemName, itemType === "number" ? { valueAsNumber: true } : void 0);
+		$[33] = form;
+		$[34] = itemName;
+		$[35] = itemType;
+		$[36] = t4;
+	} else t4 = $[36];
+	let t5;
+	if ($[37] !== itemName || $[38] !== itemPlaceholder || $[39] !== t1 || $[40] !== t2 || $[41] !== t3 || $[42] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Input, {
+			id: itemName,
+			type: t1,
+			placeholder: itemPlaceholder,
+			disabled: t2,
+			defaultValue: t3,
+			...t4
+		});
+		$[37] = itemName;
+		$[38] = itemPlaceholder;
+		$[39] = t1;
+		$[40] = t2;
+		$[41] = t3;
+		$[42] = t4;
+		$[43] = t5;
+	} else t5 = $[43];
+	return t5;
+}
+function ArrayField(t0) {
+	const $ = c(89);
+	const { name, value, label, description, placeholder, required, disabled, readOnly, error, localized, locale, itemType: t1, options, orderable: t2, minItems, maxItems, item, mode, layout, columns, itemLabel } = t0;
+	const itemType = t1 === void 0 ? "text" : t1;
+	const orderable = t2 === void 0 ? false : t2;
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	let t3;
+	if ($[0] !== placeholder || $[1] !== resolveText) {
+		t3 = placeholder ? resolveText(placeholder) : void 0;
+		$[0] = placeholder;
+		$[1] = resolveText;
+		$[2] = t3;
+	} else t3 = $[2];
+	const resolvedPlaceholder = t3;
+	let t4;
+	if ($[3] !== description || $[4] !== resolveText) {
+		t4 = description ? resolveText(description) : void 0;
+		$[3] = description;
+		$[4] = resolveText;
+		$[5] = t4;
+	} else t4 = $[5];
+	const resolvedDescription = t4;
+	let emptyLabel;
+	let resolvedLabel;
+	let t5;
+	if ($[6] !== label || $[7] !== resolveText || $[8] !== t) {
+		resolvedLabel = label ? resolveText(label) : void 0;
+		const fallbackLabel = resolvedLabel || "item";
+		emptyLabel = t("array.empty", { name: fallbackLabel });
+		t5 = t("array.addItem", { name: fallbackLabel });
+		$[6] = label;
+		$[7] = resolveText;
+		$[8] = t;
+		$[9] = emptyLabel;
+		$[10] = resolvedLabel;
+		$[11] = t5;
+	} else {
+		emptyLabel = $[9];
+		resolvedLabel = $[10];
+		t5 = $[11];
+	}
+	const addLabel = t5;
+	const { control } = useFormContext();
+	let t6;
+	if ($[12] !== control || $[13] !== name) {
+		t6 = {
+			control,
+			name
+		};
+		$[12] = control;
+		$[13] = name;
+		$[14] = t6;
+	} else t6 = $[14];
+	const { fields, append, remove, move } = useFieldArray(t6);
+	const values = useWatch({
+		control,
+		name
+	}) ?? value;
+	const canAddMore = !maxItems || fields.length < maxItems;
+	const canRemove = !readOnly && (!minItems || fields.length > minItems);
+	let t7;
+	if ($[15] !== itemType || $[16] !== options?.[0]?.value) {
+		t7 = () => {
+			if (itemType === "number") return;
+			if (itemType === "select") return options?.[0]?.value ?? "";
+			return "";
+		};
+		$[15] = itemType;
+		$[16] = options?.[0]?.value;
+		$[17] = t7;
+	} else t7 = $[17];
+	const createEmptyItem = t7;
+	if (item) {
+		let t8$1;
+		if ($[18] !== columns || $[19] !== description || $[20] !== disabled || $[21] !== item || $[22] !== itemLabel || $[23] !== label || $[24] !== layout || $[25] !== locale || $[26] !== localized || $[27] !== maxItems || $[28] !== minItems || $[29] !== mode || $[30] !== name || $[31] !== orderable || $[32] !== placeholder || $[33] !== required) {
+			t8$1 = /* @__PURE__ */ jsx(ObjectArrayField, {
+				name,
+				label,
+				description,
+				placeholder,
+				required,
+				disabled,
+				localized,
+				locale,
+				item,
+				mode,
+				layout,
+				columns,
+				itemLabel,
+				orderable,
+				minItems,
+				maxItems
+			});
+			$[18] = columns;
+			$[19] = description;
+			$[20] = disabled;
+			$[21] = item;
+			$[22] = itemLabel;
+			$[23] = label;
+			$[24] = layout;
+			$[25] = locale;
+			$[26] = localized;
+			$[27] = maxItems;
+			$[28] = minItems;
+			$[29] = mode;
+			$[30] = name;
+			$[31] = orderable;
+			$[32] = placeholder;
+			$[33] = required;
+			$[34] = t8$1;
+		} else t8$1 = $[34];
+		return t8$1;
+	}
+	let t8;
+	if ($[35] !== append || $[36] !== canAddMore || $[37] !== createEmptyItem || $[38] !== disabled || $[39] !== readOnly) {
+		t8 = () => {
+			if (disabled || readOnly || !canAddMore) return;
+			append(createEmptyItem());
+		};
+		$[35] = append;
+		$[36] = canAddMore;
+		$[37] = createEmptyItem;
+		$[38] = disabled;
+		$[39] = readOnly;
+		$[40] = t8;
+	} else t8 = $[40];
+	const handleAdd = t8;
+	let t9;
+	if ($[41] !== canRemove || $[42] !== remove) {
+		t9 = (index) => {
+			if (!canRemove) return;
+			remove(index);
+		};
+		$[41] = canRemove;
+		$[42] = remove;
+		$[43] = t9;
+	} else t9 = $[43];
+	const handleRemove = t9;
+	let t10;
+	if ($[44] !== fields.length || $[45] !== move) {
+		t10 = (from, to) => {
+			if (to < 0 || to >= fields.length) return;
+			move(from, to);
+		};
+		$[44] = fields.length;
+		$[45] = move;
+		$[46] = t10;
+	} else t10 = $[46];
+	const handleMove = t10;
+	let t11;
+	if ($[47] !== fields.length || $[48] !== label || $[49] !== locale || $[50] !== localized || $[51] !== maxItems || $[52] !== name || $[53] !== required || $[54] !== resolvedLabel) {
+		t11 = label && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs("label", {
+				htmlFor: name,
+				className: "text-sm font-medium",
+				children: [
+					resolvedLabel,
+					required && /* @__PURE__ */ jsx("span", {
+						className: "text-destructive",
+						children: "*"
+					}),
+					maxItems && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground ml-2 text-xs",
+						children: [
+							"(",
+							fields.length,
+							"/",
+							maxItems,
+							")"
+						]
+					})
+				]
+			}), localized && /* @__PURE__ */ jsx(LocaleBadge, { locale: locale || "i18n" })]
+		});
+		$[47] = fields.length;
+		$[48] = label;
+		$[49] = locale;
+		$[50] = localized;
+		$[51] = maxItems;
+		$[52] = name;
+		$[53] = required;
+		$[54] = resolvedLabel;
+		$[55] = t11;
+	} else t11 = $[55];
+	let t12;
+	if ($[56] !== resolvedDescription) {
+		t12 = resolvedDescription && /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: resolvedDescription
+		});
+		$[56] = resolvedDescription;
+		$[57] = t12;
+	} else t12 = $[57];
+	let t13;
+	if ($[58] !== canRemove || $[59] !== disabled || $[60] !== emptyLabel || $[61] !== fields || $[62] !== handleMove || $[63] !== handleRemove || $[64] !== itemType || $[65] !== name || $[66] !== options || $[67] !== orderable || $[68] !== readOnly || $[69] !== resolvedPlaceholder || $[70] !== t || $[71] !== values) {
+		t13 = fields.length === 0 ? /* @__PURE__ */ jsx("div", {
+			className: "border border-dashed p-4 text-center",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: resolvedPlaceholder || emptyLabel
+			})
+		}) : fields.map((field, index_0) => {
+			const canMoveUp = orderable && index_0 > 0;
+			const canMoveDown = orderable && index_0 < fields.length - 1;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-2",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex-1",
+						children: /* @__PURE__ */ jsx(ArrayItemInput, {
+							name,
+							index: index_0,
+							itemType,
+							itemValue: values?.[index_0],
+							placeholder: resolvedPlaceholder,
+							disabled,
+							readOnly,
+							options
+						})
+					}),
+					orderable && !readOnly && /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							className: "h-6 w-6",
+							onClick: () => handleMove(index_0, index_0 - 1),
+							disabled: !canMoveUp || disabled,
+							title: t("field.moveUp"),
+							"aria-label": t("field.moveUp"),
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:caret-up",
+								className: "h-3 w-3"
+							})
+						}), /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							className: "h-6 w-6",
+							onClick: () => handleMove(index_0, index_0 + 1),
+							disabled: !canMoveDown || disabled,
+							title: t("field.moveDown"),
+							"aria-label": t("field.moveDown"),
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:caret-down",
+								className: "h-3 w-3"
+							})
+						})]
+					}),
+					!readOnly && canRemove && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						className: "h-6 w-6",
+						onClick: () => handleRemove(index_0),
+						disabled,
+						title: t("common.remove"),
+						"aria-label": t("field.removeItem"),
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:trash",
+							className: "h-3 w-3"
+						})
+					})
+				]
+			}, field.id);
+		});
+		$[58] = canRemove;
+		$[59] = disabled;
+		$[60] = emptyLabel;
+		$[61] = fields;
+		$[62] = handleMove;
+		$[63] = handleRemove;
+		$[64] = itemType;
+		$[65] = name;
+		$[66] = options;
+		$[67] = orderable;
+		$[68] = readOnly;
+		$[69] = resolvedPlaceholder;
+		$[70] = t;
+		$[71] = values;
+		$[72] = t13;
+	} else t13 = $[72];
+	let t14;
+	if ($[73] !== t13) {
+		t14 = /* @__PURE__ */ jsx("div", {
+			className: "space-y-2",
+			children: t13
+		});
+		$[73] = t13;
+		$[74] = t14;
+	} else t14 = $[74];
+	let t15;
+	if ($[75] !== addLabel || $[76] !== canAddMore || $[77] !== disabled || $[78] !== handleAdd || $[79] !== readOnly) {
+		t15 = !readOnly && canAddMore && /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			onClick: handleAdd,
+			disabled,
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:plus",
+				className: "h-4 w-4"
+			}), addLabel]
+		});
+		$[75] = addLabel;
+		$[76] = canAddMore;
+		$[77] = disabled;
+		$[78] = handleAdd;
+		$[79] = readOnly;
+		$[80] = t15;
+	} else t15 = $[80];
+	let t16;
+	if ($[81] !== error) {
+		t16 = error && /* @__PURE__ */ jsx("p", {
+			className: "text-destructive text-sm",
+			children: error
+		});
+		$[81] = error;
+		$[82] = t16;
+	} else t16 = $[82];
+	let t17;
+	if ($[83] !== t11 || $[84] !== t12 || $[85] !== t14 || $[86] !== t15 || $[87] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			className: "qa-array-field space-y-2",
+			children: [
+				t11,
+				t12,
+				t14,
+				t15,
+				t16
+			]
+		});
+		$[83] = t11;
+		$[84] = t12;
+		$[85] = t14;
+		$[86] = t15;
+		$[87] = t16;
+		$[88] = t17;
+	} else t17 = $[88];
+	return t17;
+}
+
+//#endregion
+export { ArrayField };

package/dist/client/components/fields/asset-preview-field.mjs

@@ -0,0 +1,159 @@
+import { cn } from "../../lib/utils.mjs";
+import { AssetThumbnail } from "../../views/collection/cells/shared/asset-thumbnail.mjs";
+import { FieldWrapper } from "./field-wrapper.mjs";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { useFormContext, useWatch } from "react-hook-form";
+
+//#region src/client/components/fields/asset-preview-field.tsx
+function AssetPreviewField(t0) {
+	const $ = c(37);
+	const { name: t1, label: t2, description, className, urlField: t3, mimeTypeField: t4, filenameField: t5, altField: t6 } = t0;
+	const name = t1 === void 0 ? "preview" : t1;
+	const label = t2 === void 0 ? "Preview" : t2;
+	const urlField = t3 === void 0 ? "url" : t3;
+	const mimeTypeField = t4 === void 0 ? "mimeType" : t4;
+	const filenameField = t5 === void 0 ? "filename" : t5;
+	const altField = t6 === void 0 ? "alt" : t6;
+	const form = useFormContext();
+	const t7 = form?.control;
+	let t8;
+	if ($[0] !== t7 || $[1] !== urlField) {
+		t8 = {
+			control: t7,
+			name: urlField
+		};
+		$[0] = t7;
+		$[1] = urlField;
+		$[2] = t8;
+	} else t8 = $[2];
+	const url = useWatch(t8);
+	const t9 = form?.control;
+	let t10;
+	if ($[3] !== mimeTypeField || $[4] !== t9) {
+		t10 = {
+			control: t9,
+			name: mimeTypeField
+		};
+		$[3] = mimeTypeField;
+		$[4] = t9;
+		$[5] = t10;
+	} else t10 = $[5];
+	const mimeType = useWatch(t10);
+	const t11 = form?.control;
+	let t12;
+	if ($[6] !== filenameField || $[7] !== t11) {
+		t12 = {
+			control: t11,
+			name: filenameField
+		};
+		$[6] = filenameField;
+		$[7] = t11;
+		$[8] = t12;
+	} else t12 = $[8];
+	const filename = useWatch(t12);
+	const t13 = form?.control;
+	let t14;
+	if ($[9] !== altField || $[10] !== t13) {
+		t14 = {
+			control: t13,
+			name: altField
+		};
+		$[9] = altField;
+		$[10] = t13;
+		$[11] = t14;
+	} else t14 = $[11];
+	const alt = useWatch(t14);
+	let t15;
+	if ($[12] !== alt || $[13] !== filename || $[14] !== mimeType || $[15] !== url) {
+		t15 = url ? {
+			url,
+			mimeType,
+			filename,
+			alt
+		} : null;
+		$[12] = alt;
+		$[13] = filename;
+		$[14] = mimeType;
+		$[15] = url;
+		$[16] = t15;
+	} else t15 = $[16];
+	const asset = t15;
+	if (!asset) {
+		let t16$1;
+		if ($[17] !== className) {
+			t16$1 = cn("qa-asset-preview-field flex items-center justify-center border border-dashed p-8", "bg-muted text-muted-foreground", className);
+			$[17] = className;
+			$[18] = t16$1;
+		} else t16$1 = $[18];
+		let t17$1;
+		if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+			t17$1 = /* @__PURE__ */ jsx("p", {
+				className: "text-sm",
+				children: "No preview available"
+			});
+			$[19] = t17$1;
+		} else t17$1 = $[19];
+		let t18$1;
+		if ($[20] !== t16$1) {
+			t18$1 = /* @__PURE__ */ jsx("div", {
+				className: t16$1,
+				children: t17$1
+			});
+			$[20] = t16$1;
+			$[21] = t18$1;
+		} else t18$1 = $[21];
+		let t19;
+		if ($[22] !== description || $[23] !== label || $[24] !== name || $[25] !== t18$1) {
+			t19 = /* @__PURE__ */ jsx(FieldWrapper, {
+				name,
+				label,
+				description,
+				children: t18$1
+			});
+			$[22] = description;
+			$[23] = label;
+			$[24] = name;
+			$[25] = t18$1;
+			$[26] = t19;
+		} else t19 = $[26];
+		return t19;
+	}
+	let t16;
+	if ($[27] !== className) {
+		t16 = cn("qa-asset-preview-field", className);
+		$[27] = className;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== asset || $[30] !== t16) {
+		t17 = /* @__PURE__ */ jsx(AssetThumbnail, {
+			asset,
+			size: "lg",
+			showControls: true,
+			className: t16
+		});
+		$[29] = asset;
+		$[30] = t16;
+		$[31] = t17;
+	} else t17 = $[31];
+	let t18;
+	if ($[32] !== description || $[33] !== label || $[34] !== name || $[35] !== t17) {
+		t18 = /* @__PURE__ */ jsx(FieldWrapper, {
+			name,
+			label,
+			description,
+			children: t17
+		});
+		$[32] = description;
+		$[33] = label;
+		$[34] = name;
+		$[35] = t17;
+		$[36] = t18;
+	} else t18 = $[36];
+	return t18;
+}
+
+//#endregion
+export { AssetPreviewField };