@questpie/admin 1.1.1 → 3.0.0

package/dist/client/views/collection/cells/shared/relation-chip.mjs

@@ -0,0 +1,121 @@
+import { useResolveText } from "../../../../i18n/hooks.mjs";
+import { cn } from "../../../../lib/utils.mjs";
+import { getRelationItemAvatarUrl, getRelationItemId, getRelationItemLabelWithField } from "./cell-helpers.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/cells/shared/relation-chip.tsx
+/**
+* Clickable relation chip component
+* Shows label and navigates to related item on click (or opens sheet if onClick provided)
+*/
+function RelationChip(t0) {
+	const $ = c(31);
+	const { item, targetCollection, onClick, className, showAvatar: t1, avatarField, labelField } = t0;
+	const showAvatar = t1 === void 0 ? false : t1;
+	const resolveText = useResolveText();
+	let t2;
+	if ($[0] !== item || $[1] !== labelField || $[2] !== resolveText) {
+		t2 = resolveText(getRelationItemLabelWithField(item, labelField));
+		$[0] = item;
+		$[1] = labelField;
+		$[2] = resolveText;
+		$[3] = t2;
+	} else t2 = $[3];
+	const label = t2;
+	let t3;
+	if ($[4] !== avatarField || $[5] !== item) {
+		t3 = getRelationItemAvatarUrl(item, avatarField);
+		$[4] = avatarField;
+		$[5] = item;
+		$[6] = t3;
+	} else t3 = $[6];
+	const avatarUrl = t3;
+	let t4;
+	if ($[7] !== item) {
+		t4 = getRelationItemId(item);
+		$[7] = item;
+		$[8] = t4;
+	} else t4 = $[8];
+	const id = t4;
+	const canInteract = targetCollection && id;
+	let t5;
+	if ($[9] !== avatarUrl || $[10] !== label || $[11] !== showAvatar) {
+		t5 = showAvatar && avatarUrl ? /* @__PURE__ */ jsx("img", {
+			src: avatarUrl,
+			alt: label,
+			className: "border-border size-4 rounded-full border object-cover"
+		}) : null;
+		$[9] = avatarUrl;
+		$[10] = label;
+		$[11] = showAvatar;
+		$[12] = t5;
+	} else t5 = $[12];
+	const avatar = t5;
+	let t6;
+	if ($[13] !== id || $[14] !== onClick || $[15] !== targetCollection) {
+		t6 = (e) => {
+			e.stopPropagation();
+			if (onClick && id && targetCollection) {
+				e.preventDefault();
+				onClick(id, targetCollection);
+			}
+		};
+		$[13] = id;
+		$[14] = onClick;
+		$[15] = targetCollection;
+		$[16] = t6;
+	} else t6 = $[16];
+	const handleClick = t6;
+	if (canInteract) {
+		const href = `/admin/collections/${targetCollection}/${id}`;
+		let t7$1;
+		if ($[17] !== className) {
+			t7$1 = cn("qa-relation-chip inline-flex items-center gap-1 px-2 py-0.5 text-xs", "bg-primary/10 text-primary hover:bg-primary/20", "cursor-pointer transition-colors", "border-primary/20 hover:border-primary/40 border", className);
+			$[17] = className;
+			$[18] = t7$1;
+		} else t7$1 = $[18];
+		const chipClassName = t7$1;
+		let t8$1;
+		if ($[19] !== avatar || $[20] !== chipClassName || $[21] !== handleClick || $[22] !== href || $[23] !== label) {
+			t8$1 = /* @__PURE__ */ jsxs("a", {
+				href,
+				onClick: handleClick,
+				onPointerDown: _temp,
+				className: chipClassName,
+				children: [avatar, label]
+			});
+			$[19] = avatar;
+			$[20] = chipClassName;
+			$[21] = handleClick;
+			$[22] = href;
+			$[23] = label;
+			$[24] = t8$1;
+		} else t8$1 = $[24];
+		return t8$1;
+	}
+	let t7;
+	if ($[25] !== className) {
+		t7 = cn("qa-relation-chip inline-flex items-center gap-1 px-2 py-0.5 text-xs", "bg-muted text-muted-foreground", "border-border border", className);
+		$[25] = className;
+		$[26] = t7;
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== avatar || $[28] !== label || $[29] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("span", {
+			className: t7,
+			children: [avatar, label]
+		});
+		$[27] = avatar;
+		$[28] = label;
+		$[29] = t7;
+		$[30] = t8;
+	} else t8 = $[30];
+	return t8;
+}
+function _temp(e_0) {
+	return e_0.stopPropagation();
+}
+
+//#endregion
+export { RelationChip };

package/dist/client/views/collection/cells/upload-cells.mjs

@@ -0,0 +1,28 @@
+import { AssetThumbnail } from "./shared/asset-thumbnail.mjs";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/cells/upload-cells.tsx
+/**
+* Upload cell - displays single asset thumbnail or file info
+* Uses AssetThumbnail with size="sm"
+*/
+function UploadCell(t0) {
+	const $ = c(2);
+	const { value } = t0;
+	let t1;
+	if ($[0] !== value) {
+		t1 = /* @__PURE__ */ jsx(AssetThumbnail, {
+			asset: value,
+			size: "sm",
+			showFilename: true
+		});
+		$[0] = value;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+
+//#endregion
+export { UploadCell };

package/dist/client/views/collection/columns/build-columns.mjs

@@ -0,0 +1,195 @@
+import { useResolveText } from "../../../i18n/hooks.mjs";
+import { useSafeContentLocales } from "../../../runtime/content-locales-provider.mjs";
+import { useScopedLocale } from "../../../runtime/locale-scope.mjs";
+import { DefaultCell, TextCell } from "../cells/primitive-cells.mjs";
+import { LocaleSwitcher } from "../../../components/locale-switcher.mjs";
+import { normalizeColumnConfig } from "../../../builder/types/collection-types.mjs";
+import { computeDefaultColumns, formatHeader } from "./column-defaults.mjs";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/columns/build-columns.tsx
+/**
+* Column header component that resolves I18nText labels
+*/
+function ColumnHeader(t0) {
+	const $ = c(17);
+	const { label, fallback, localized } = t0;
+	const resolveText = useResolveText();
+	const contentLocales = useSafeContentLocales();
+	const { locale: contentLocale, setLocale: setContentLocale } = useScopedLocale();
+	const resolvedLocale = contentLocale ?? contentLocales?.defaultLocale ?? contentLocales?.locales[0]?.code;
+	let t1;
+	if ($[0] !== contentLocales || $[1] !== resolvedLocale) {
+		t1 = contentLocales?.locales?.length ? contentLocales.locales : resolvedLocale ? [{ code: resolvedLocale }] : [];
+		$[0] = contentLocales;
+		$[1] = resolvedLocale;
+		$[2] = t1;
+	} else t1 = $[2];
+	const localeOptions = t1;
+	const showLocaleSwitcher = localized && localeOptions.length > 0;
+	let t2;
+	if ($[3] !== fallback || $[4] !== label || $[5] !== resolveText) {
+		t2 = resolveText(label, fallback);
+		$[3] = fallback;
+		$[4] = label;
+		$[5] = resolveText;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", { children: t2 });
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== localeOptions || $[10] !== resolvedLocale || $[11] !== setContentLocale || $[12] !== showLocaleSwitcher) {
+		t4 = showLocaleSwitcher && /* @__PURE__ */ jsx(LocaleSwitcher, {
+			locales: localeOptions,
+			value: resolvedLocale,
+			onChange: setContentLocale,
+			labelMode: "code"
+		});
+		$[9] = localeOptions;
+		$[10] = resolvedLocale;
+		$[11] = setContentLocale;
+		$[12] = showLocaleSwitcher;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1.5",
+			children: [t3, t4]
+		});
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+/**
+* Field types that need fieldDef passed to their cell component
+* (for nested field definitions, labels, etc.)
+*/
+const FIELD_TYPES_NEEDING_FIELD_DEF = new Set([
+	"object",
+	"array",
+	"relation",
+	"reverseRelation"
+]);
+/**
+* Build column definitions from collection config
+*
+* Simplified cell resolution:
+* 1. Custom from .list() config
+* 2. From field registry (.cell)
+* 3. Ultra-simple DefaultCell fallback
+*
+* NO getCellForFieldType() switch statement needed!
+*
+* @param options - Build options with config and fallbacks
+* @returns Array of TanStack Table column definitions
+*
+* @example
+* ```tsx
+* const columns = buildColumns({
+*   config: collectionsConfig.posts,
+*   fallbackColumns: ['id', 'title', 'createdAt'],
+*   meta: collectionMeta,
+* });
+*
+* <CollectionList collection="posts" columns={columns} />
+* ```
+*/
+function buildColumns(options) {
+	const { config, fallbackColumns = ["id"], buildAllColumns = false, meta } = options;
+	const fields = config?.fields ?? {};
+	const listConfig = config?.list;
+	const isLocalizedField = (field, definition) => {
+		const fieldOptions = definition?.["~options"] ?? {};
+		return fieldOptions.localized !== void 0 ? !!fieldOptions.localized : meta?.localizedFields?.includes(field) ?? false;
+	};
+	const titleFieldName = meta?.title?.fieldName;
+	const titleType = meta?.title?.type;
+	const titleColumn = titleType === "field" && titleFieldName ? titleFieldName : "_title";
+	let columnConfigs;
+	if (buildAllColumns) {
+		const allFields = Object.keys(fields);
+		columnConfigs = [titleColumn, ...titleColumn === "_title" ? allFields : allFields.filter((f) => f !== titleColumn)];
+	} else if (listConfig?.columns && listConfig.columns.length > 0) columnConfigs = listConfig.columns;
+	else if (Object.keys(fields).length > 0) columnConfigs = computeDefaultColumns(fields, { meta });
+	else columnConfigs = [titleColumn, ...fallbackColumns.filter((c$1) => c$1 !== titleColumn && c$1 !== "_title")];
+	return columnConfigs.map((colConfig) => {
+		const normalized = normalizeColumnConfig(colConfig);
+		const fieldName = normalized.field;
+		const fieldDef = fields[fieldName];
+		if (fieldName === "_title") {
+			titleFieldName && isLocalizedField(titleFieldName, fields[titleFieldName]);
+			let titleLabel = "Title";
+			let titleFallback = "Title";
+			if (titleType === "virtual" && titleFieldName && fields[titleFieldName]) {
+				titleLabel = (fields[titleFieldName]?.["~options"] ?? {}).label;
+				titleFallback = formatHeader(titleFieldName);
+			}
+			return {
+				accessorKey: "_title",
+				header: normalized.header ? () => /* @__PURE__ */ jsx(ColumnHeader, {
+					label: normalized.header,
+					fallback: "Title"
+				}) : () => /* @__PURE__ */ jsx(ColumnHeader, {
+					label: titleLabel,
+					fallback: titleFallback
+				}),
+				cell: ({ row }) => {
+					return /* @__PURE__ */ jsx(TextCell, { value: row.getValue("_title") });
+				},
+				enableSorting: false
+			};
+		}
+		const fieldType = fieldDef?.name ?? "text";
+		const fieldOptions = fieldDef?.["~options"] ?? {};
+		isLocalizedField(fieldName, fieldDef);
+		let CellComponent;
+		if (normalized.cell) CellComponent = normalized.cell;
+		else if (fieldDef?.cell) CellComponent = fieldDef.cell;
+		else CellComponent = DefaultCell;
+		const needsFieldDef = FIELD_TYPES_NEEDING_FIELD_DEF.has(fieldType);
+		const accessorKey = fieldType === "relation" && fieldOptions.relationName ? fieldOptions.relationName : fieldName;
+		const headerLabel = normalized.header ?? fieldOptions.label;
+		const headerFallback = formatHeader(fieldName);
+		const computeFn = fieldOptions.compute;
+		const isComputed = typeof computeFn === "function";
+		const columnDef = {
+			id: fieldName,
+			accessorKey: isComputed ? void 0 : accessorKey,
+			header: () => /* @__PURE__ */ jsx(ColumnHeader, {
+				label: headerLabel,
+				fallback: headerFallback
+			}),
+			cell: ({ row, getValue }) => {
+				const value = isComputed ? computeFn(row.original) : getValue();
+				return needsFieldDef ? /* @__PURE__ */ jsx(CellComponent, {
+					value,
+					row,
+					fieldDef
+				}) : /* @__PURE__ */ jsx(CellComponent, {
+					value,
+					row
+				});
+			},
+			enableSorting: isComputed ? false : normalized.sortable !== false
+		};
+		if (normalized.width) columnDef.size = typeof normalized.width === "number" ? normalized.width : Number.parseInt(normalized.width, 10) || void 0;
+		if (normalized.minWidth) columnDef.minSize = typeof normalized.minWidth === "number" ? normalized.minWidth : Number.parseInt(normalized.minWidth, 10) || void 0;
+		if (normalized.maxWidth) columnDef.maxSize = typeof normalized.maxWidth === "number" ? normalized.maxWidth : Number.parseInt(normalized.maxWidth, 10) || void 0;
+		if (normalized.align || normalized.className) columnDef.meta = {
+			align: normalized.align,
+			className: normalized.className
+		};
+		return columnDef;
+	});
+}
+
+//#endregion
+export { buildColumns };

package/dist/client/views/collection/columns/column-defaults.mjs

@@ -0,0 +1,123 @@
+import { formatFieldLabel } from "../cells/shared/cell-helpers.mjs";
+
+//#region src/client/views/collection/columns/column-defaults.ts
+/**
+* System fields that are typically auto-generated and not user-editable
+*/
+const SYSTEM_FIELDS = new Set([
+	"id",
+	"createdAt",
+	"updatedAt",
+	"deletedAt",
+	"createdBy",
+	"updatedBy"
+]);
+/**
+* Compute sane default visible columns for a collection
+*
+* Default columns are selected with the following logic:
+* 1. If configuredColumns is provided (from .list()), use those + title
+* 2. Otherwise, auto-detect:
+*    - Title field first
+*    - Up to 4 content fields (non-system, non-relation, non-upload)
+*    - `createdAt` at the end (if timestamps enabled)
+*
+* @param fields - Field definitions from collection config
+* @param options - Optional metadata and configured columns
+* @returns Array of field names for default visible columns
+*/
+function computeDefaultColumns(fields, options) {
+	const titleFieldName = options?.meta?.title?.fieldName;
+	const useTitleField = options?.meta?.title?.type === "field" && titleFieldName;
+	const titleColumn = useTitleField ? titleFieldName : "_title";
+	if (options?.configuredColumns && options.configuredColumns.length > 0) {
+		const configuredNames = options.configuredColumns.map((col) => typeof col === "string" ? col : col.field);
+		const defaultCols$1 = [titleColumn];
+		for (const colName of configuredNames) if (colName !== titleColumn) defaultCols$1.push(colName);
+		return defaultCols$1;
+	}
+	const defaultCols = [titleColumn];
+	if (!fields || Object.keys(fields).length === 0) return defaultCols;
+	const contentFields = [];
+	const systemFields = [];
+	for (const [key, fieldDef] of Object.entries(fields)) {
+		if (useTitleField && key === titleFieldName) continue;
+		if (SYSTEM_FIELDS.has(key)) systemFields.push(key);
+		else contentFields.push(key);
+	}
+	defaultCols.push(...contentFields);
+	if ((options?.meta?.timestamps ?? !!fields.createdAt) && fields.createdAt && !defaultCols.includes("createdAt")) defaultCols.push("createdAt");
+	return defaultCols;
+}
+/**
+* Get all available fields for the column picker
+*
+* Includes all fields (both content and system fields) so users can
+* choose to display any field in their view.
+*
+* @param fields - Field definitions from collection config
+* @param options - Optional metadata from backend
+* @returns Array of available field info for the column picker
+*/
+function getAllAvailableFields(fields, options) {
+	const availableFields = [];
+	const titleFieldName = options?.meta?.title?.fieldName;
+	const titleType = options?.meta?.title?.type;
+	if (!(titleType === "field" && titleFieldName)) if (titleType === "virtual" && titleFieldName && fields?.[titleFieldName]) {
+		const titleLabel = (fields[titleFieldName]?.["~options"] ?? {}).label ?? formatFieldLabel(titleFieldName);
+		availableFields.push({
+			name: "_title",
+			label: titleLabel,
+			type: "text",
+			isSystem: false,
+			options: void 0
+		});
+	} else availableFields.push({
+		name: "_title",
+		label: "Title",
+		type: "text",
+		isSystem: false,
+		options: void 0
+	});
+	if (!fields) return availableFields;
+	for (const [key, fieldDef] of Object.entries(fields)) {
+		if (titleType === "virtual" && key === titleFieldName) continue;
+		const fieldType = fieldDef?.name ?? "text";
+		const fieldOptions = fieldDef?.["~options"] ?? {};
+		const label = fieldOptions.label ?? formatFieldLabel(key);
+		const isSystem = SYSTEM_FIELDS.has(key);
+		availableFields.push({
+			name: key,
+			label,
+			type: fieldType,
+			isSystem,
+			options: fieldOptions
+		});
+	}
+	if (options?.meta?.timestamps) {
+		if (!fields?.createdAt) availableFields.push({
+			name: "createdAt",
+			label: "Created At",
+			type: "date",
+			isSystem: true,
+			options: void 0
+		});
+		if (!fields?.updatedAt) availableFields.push({
+			name: "updatedAt",
+			label: "Updated At",
+			type: "date",
+			isSystem: true,
+			options: void 0
+		});
+	}
+	return availableFields;
+}
+/**
+* Format field name as header (camelCase to Title Case)
+*/
+function formatHeader(fieldName) {
+	return formatFieldLabel(fieldName);
+}
+
+//#endregion
+export { computeDefaultColumns, formatHeader, getAllAvailableFields };

package/dist/client/views/collection/field-context.mjs

@@ -0,0 +1,126 @@
+//#region src/client/views/collection/field-context.ts
+/**
+* Get field type from FieldInstance
+* FieldInstance.name contains the type name (e.g., "text", "relation")
+*/
+function getFieldType(fieldDef) {
+	if (!fieldDef) return void 0;
+	return fieldDef.name;
+}
+/**
+* Get field options from FieldInstance
+* Options are stored in "~options" property
+*/
+function getFieldOptions(fieldDef) {
+	if (!fieldDef) return {};
+	return fieldDef["~options"] || {};
+}
+/**
+* Get field component from FieldInstance
+* Component is stored directly on the instance
+*/
+function getFieldComponent(fieldDef) {
+	if (!fieldDef?.component) return void 0;
+	return fieldDef.component;
+}
+function resolveValue(value, formValues, defaultValue) {
+	if (value === void 0) return defaultValue;
+	if (typeof value === "function") return value(formValues);
+	return value;
+}
+/**
+* Get form values for conditional field logic.
+*
+* @deprecated This is a legacy fallback. All callers should now use useWatch()
+* hook in their component and pass the watched values to getFieldContext via
+* the `formValues` parameter. This function uses form.watch() which doesn't
+* properly integrate with React's render cycle.
+*
+* Best practice pattern:
+* ```tsx
+* const watchedValues = useWatch({ control: form.control });
+* const context = getFieldContext({ ..., formValues: watchedValues });
+* ```
+*/
+function getFormValues(form, fieldPrefix) {
+	if (!form?.watch) return {};
+	return (fieldPrefix ? form.watch(fieldPrefix) : form.watch()) ?? {};
+}
+function getFullFieldName(fieldName, fieldPrefix) {
+	return fieldPrefix ? `${fieldPrefix}.${fieldName}` : fieldName;
+}
+/**
+* Create a FieldContext object from field definition and form context.
+* Contains all information needed to render a field component.
+*/
+function getFieldContext({ fieldName, fieldDef, collection, form, fieldPrefix, locale, formValues: formValuesProp, entityMeta }) {
+	const formValues = formValuesProp ?? getFormValues(form, fieldPrefix);
+	const fullFieldName = getFullFieldName(fieldName, fieldPrefix);
+	const fieldError = (form?.getFieldState ? form.getFieldState(fullFieldName) : void 0)?.error?.message;
+	const fieldValue = formValues[fieldName];
+	const options = getFieldOptions(fieldDef);
+	const type = getFieldType(fieldDef);
+	const component = getFieldComponent(fieldDef);
+	const label = options.label;
+	const description = options.description;
+	const placeholder = options.placeholder;
+	const isHidden = !resolveValue(options.visible, formValues, true) || resolveValue(options.hidden, formValues, false);
+	const isComputed = typeof options.compute === "function";
+	const isReadOnly = isComputed || resolveValue(options.readOnly, formValues, false);
+	const isDisabled = resolveValue(options.disabled, formValues, false);
+	const isRequired = resolveValue(options.required, formValues, false);
+	const isLocalized = options.localized !== void 0 ? !!options.localized : entityMeta?.localizedFields?.includes(fieldName) ?? false;
+	const selectOptions = options.options ? typeof options.options === "function" ? options.options(formValues) : options.options : void 0;
+	const updateValue = (nextValue) => {
+		if (form?.setValue) form.setValue(fullFieldName, nextValue, {
+			shouldDirty: true,
+			shouldTouch: true
+		});
+	};
+	return {
+		fieldName,
+		fullFieldName,
+		collection,
+		fieldDef,
+		fieldValue,
+		label,
+		description,
+		placeholder,
+		options: selectOptions,
+		isHidden,
+		isReadOnly,
+		isDisabled,
+		isRequired,
+		isLocalized,
+		isComputed,
+		locale,
+		fieldError,
+		updateValue,
+		type,
+		component,
+		compute: options.compute
+	};
+}
+/**
+* Build props for a FieldInstance component (field.component).
+* Returns raw props with I18nText - resolve before passing to component.
+*/
+function buildComponentProps(context) {
+	return {
+		name: context.fullFieldName,
+		value: context.fieldValue,
+		onChange: context.updateValue,
+		label: context.label,
+		description: context.description,
+		placeholder: context.placeholder,
+		required: context.isRequired,
+		disabled: context.isDisabled,
+		readOnly: context.isReadOnly,
+		error: context.fieldError,
+		localized: context.isLocalized,
+		locale: context.locale
+	};
+}
+
+//#endregion
+export { buildComponentProps, getFieldContext, getFieldOptions, getFullFieldName, resolveValue };