@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/fields/relation/displays/list-display.mjs

@@ -0,0 +1,247 @@
+import { useTranslation } from "../../../../i18n/hooks.mjs";
+import { resolveIconElement } from "../../../component-renderer.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Skeleton } from "../../../ui/skeleton.mjs";
+import { getItemDisplayValue } from "./types.mjs";
+import { CollectionEditLink } from "../../../admin-link.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation/displays/list-display.tsx
+/**
+* List Display - vertical list with action buttons
+*/
+function ListSkeleton(t0) {
+	const $ = c(6);
+	const { count: t1, editable: t2 } = t0;
+	const count = t1 === void 0 ? 3 : t1;
+	const editable = t2 === void 0 ? false : t2;
+	let t3;
+	if ($[0] !== count) {
+		t3 = Array.from({ length: count }, _temp);
+		$[0] = count;
+		$[1] = t3;
+	} else t3 = $[1];
+	const skeletonKeys = t3;
+	if (editable) {
+		let t4$1;
+		if ($[2] !== skeletonKeys) {
+			t4$1 = /* @__PURE__ */ jsx("div", {
+				className: "border-border bg-card space-y-2 border p-3",
+				children: skeletonKeys.map(_temp2)
+			});
+			$[2] = skeletonKeys;
+			$[3] = t4$1;
+		} else t4$1 = $[3];
+		return t4$1;
+	}
+	let t4;
+	if ($[4] !== skeletonKeys) {
+		t4 = /* @__PURE__ */ jsx("ul", {
+			className: "space-y-1",
+			children: skeletonKeys.map(_temp3)
+		});
+		$[4] = skeletonKeys;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+}
+function _temp3(key_0) {
+	return /* @__PURE__ */ jsxs("li", {
+		className: "flex items-center gap-1",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-3 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32 rounded" })]
+	}, key_0);
+}
+function _temp2(key) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border bg-card flex items-center gap-2 border p-2",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-3.5 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 max-w-[200px] flex-1 rounded" })]
+	}, key);
+}
+function _temp() {
+	return crypto.randomUUID();
+}
+function ListDisplay(t0) {
+	const $ = c(37);
+	const { items, collection, collectionIcon, actions, editable: t1, orderable: t2, linkToDetail: t3, renderItem, isLoading: t4, loadingCount: t5 } = t0;
+	const editable = t1 === void 0 ? false : t1;
+	const orderable = t2 === void 0 ? false : t2;
+	const linkToDetail = t3 === void 0 ? false : t3;
+	const isLoading = t4 === void 0 ? false : t4;
+	const loadingCount = t5 === void 0 ? 3 : t5;
+	const { t } = useTranslation();
+	let t6;
+	if ($[0] !== collectionIcon) {
+		t6 = resolveIconElement(collectionIcon, { className: "size-3.5 text-muted-foreground shrink-0" });
+		$[0] = collectionIcon;
+		$[1] = t6;
+	} else t6 = $[1];
+	const iconElement = t6;
+	let t7;
+	if ($[2] !== collectionIcon) {
+		t7 = resolveIconElement(collectionIcon, { className: "size-3 text-muted-foreground" });
+		$[2] = collectionIcon;
+		$[3] = t7;
+	} else t7 = $[3];
+	const smallIconElement = t7;
+	if (isLoading && items.length === 0) {
+		let t8$1;
+		if ($[4] !== editable || $[5] !== loadingCount) {
+			t8$1 = /* @__PURE__ */ jsx(ListSkeleton, {
+				count: loadingCount,
+				editable
+			});
+			$[4] = editable;
+			$[5] = loadingCount;
+			$[6] = t8$1;
+		} else t8$1 = $[6];
+		return t8$1;
+	}
+	if (editable) {
+		let t8$1;
+		if ($[7] !== actions || $[8] !== iconElement || $[9] !== items || $[10] !== orderable || $[11] !== renderItem || $[12] !== t) {
+			let t9$2;
+			if ($[14] !== actions || $[15] !== iconElement || $[16] !== orderable || $[17] !== renderItem || $[18] !== t) {
+				t9$2 = (item, index) => /* @__PURE__ */ jsxs("div", {
+					className: "border-border bg-card flex items-center gap-2 border p-2",
+					children: [
+						orderable && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "text-muted-foreground hover:text-foreground cursor-grab",
+							"aria-label": t("field.dragToReorder"),
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:dots-six-vertical",
+								className: "h-4 w-4"
+							})
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-1 items-center gap-2",
+							children: [iconElement, renderItem ? renderItem(item, index) : /* @__PURE__ */ jsx("span", {
+								className: "truncate text-sm",
+								children: getItemDisplayValue(item)
+							})]
+						}),
+						actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							className: "h-7 w-7 shrink-0",
+							onClick: () => actions.onEdit?.(item),
+							title: t("common.edit"),
+							"aria-label": t("field.editItem"),
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:pencil",
+								className: "h-3 w-3"
+							})
+						}),
+						actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon",
+							className: "h-7 w-7 shrink-0",
+							onClick: () => actions.onRemove?.(item),
+							title: t("common.remove"),
+							"aria-label": t("field.removeItem"),
+							children: /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:x",
+								className: "h-3 w-3"
+							})
+						})
+					]
+				}, item.id);
+				$[14] = actions;
+				$[15] = iconElement;
+				$[16] = orderable;
+				$[17] = renderItem;
+				$[18] = t;
+				$[19] = t9$2;
+			} else t9$2 = $[19];
+			t8$1 = items.map(t9$2);
+			$[7] = actions;
+			$[8] = iconElement;
+			$[9] = items;
+			$[10] = orderable;
+			$[11] = renderItem;
+			$[12] = t;
+			$[13] = t8$1;
+		} else t8$1 = $[13];
+		let t9$1;
+		if ($[20] !== t8$1) {
+			t9$1 = /* @__PURE__ */ jsx("div", {
+				className: "border-border bg-card space-y-2 border p-3",
+				children: t8$1
+			});
+			$[20] = t8$1;
+			$[21] = t9$1;
+		} else t9$1 = $[21];
+		return t9$1;
+	}
+	let t8;
+	if ($[22] !== actions || $[23] !== collection || $[24] !== items || $[25] !== linkToDetail || $[26] !== renderItem || $[27] !== smallIconElement) {
+		let t9$1;
+		if ($[29] !== actions || $[30] !== collection || $[31] !== linkToDetail || $[32] !== renderItem || $[33] !== smallIconElement) {
+			t9$1 = (item_0, index_0) => {
+				const displayText = renderItem ? renderItem(item_0, index_0) : getItemDisplayValue(item_0);
+				if (actions?.onEdit) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => actions.onEdit?.(item_0),
+					className: "text-primary inline-flex items-center gap-1 text-sm hover:underline",
+					children: [
+						smallIconElement,
+						displayText,
+						/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:pencil",
+							className: "size-3"
+						})
+					]
+				}) }, item_0.id);
+				if (linkToDetail) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(CollectionEditLink, {
+					collection,
+					id: item_0.id,
+					className: "text-primary inline-flex items-center gap-1 text-sm hover:underline",
+					children: [
+						smallIconElement,
+						displayText,
+						/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:arrow-right",
+							className: "size-3"
+						})
+					]
+				}) }, item_0.id);
+				return /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-1 text-sm",
+					children: [smallIconElement, displayText]
+				}, item_0.id);
+			};
+			$[29] = actions;
+			$[30] = collection;
+			$[31] = linkToDetail;
+			$[32] = renderItem;
+			$[33] = smallIconElement;
+			$[34] = t9$1;
+		} else t9$1 = $[34];
+		t8 = items.map(t9$1);
+		$[22] = actions;
+		$[23] = collection;
+		$[24] = items;
+		$[25] = linkToDetail;
+		$[26] = renderItem;
+		$[27] = smallIconElement;
+		$[28] = t8;
+	} else t8 = $[28];
+	let t9;
+	if ($[35] !== t8) {
+		t9 = /* @__PURE__ */ jsx("ul", {
+			className: "space-y-1",
+			children: t8
+		});
+		$[35] = t8;
+		$[36] = t9;
+	} else t9 = $[36];
+	return t9;
+}
+
+//#endregion
+export { ListDisplay };

package/dist/client/components/fields/relation/displays/table-display.mjs

@@ -0,0 +1,309 @@
+import { useTranslation } from "../../../../i18n/hooks.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Skeleton } from "../../../ui/skeleton.mjs";
+import { formatColumnHeader, resolveCellForColumn } from "./types.mjs";
+import { CollectionEditLink } from "../../../admin-link.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/fields/relation/displays/table-display.tsx
+/**
+* Table Display - table with columns
+*
+* Uses the same cell components as TableView for consistent rendering.
+*/
+function TableSkeleton(t0) {
+	const $ = c(18);
+	const { count: t1, columns: t2, hasActions: t3 } = t0;
+	const count = t1 === void 0 ? 3 : t1;
+	let t4;
+	if ($[0] !== t2) {
+		t4 = t2 === void 0 ? ["_title"] : t2;
+		$[0] = t2;
+		$[1] = t4;
+	} else t4 = $[1];
+	const columns = t4;
+	const hasActions = t3 === void 0 ? false : t3;
+	let t5;
+	if ($[2] !== count) {
+		t5 = Array.from({ length: count }, _temp);
+		$[2] = count;
+		$[3] = t5;
+	} else t5 = $[3];
+	const skeletonKeys = t5;
+	let t6;
+	if ($[4] !== columns) {
+		t6 = columns.map(_temp2);
+		$[4] = columns;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== hasActions) {
+		t7 = hasActions && /* @__PURE__ */ jsx("th", { className: "w-20 px-3 py-2" });
+		$[6] = hasActions;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== t6 || $[9] !== t7) {
+		t8 = /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+			className: "border-border bg-card border-b",
+			children: [t6, t7]
+		}) });
+		$[8] = t6;
+		$[9] = t7;
+		$[10] = t8;
+	} else t8 = $[10];
+	let t9;
+	if ($[11] !== columns || $[12] !== hasActions || $[13] !== skeletonKeys) {
+		t9 = /* @__PURE__ */ jsx("tbody", { children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("tr", {
+			className: "border-b last:border-0",
+			children: [columns.map(_temp3), hasActions && /* @__PURE__ */ jsx("td", {
+				className: "px-3 py-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-end gap-1",
+					children: /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-7 rounded" })
+				})
+			})]
+		}, key)) });
+		$[11] = columns;
+		$[12] = hasActions;
+		$[13] = skeletonKeys;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== t8 || $[16] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 overflow-x-auto border",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full text-sm",
+				children: [t8, t9]
+			})
+		});
+		$[15] = t8;
+		$[16] = t9;
+		$[17] = t10;
+	} else t10 = $[17];
+	return t10;
+}
+/**
+* Cell renderer that uses resolved cell components from field registry
+*/
+function _temp3(col_0) {
+	return /* @__PURE__ */ jsx("td", {
+		className: "px-3 py-2",
+		children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24 rounded" })
+	}, col_0);
+}
+function _temp2(col) {
+	return /* @__PURE__ */ jsx("th", {
+		className: "px-3 py-2 text-left font-medium",
+		children: formatColumnHeader(col)
+	}, col);
+}
+function _temp() {
+	return crypto.randomUUID();
+}
+function CellRenderer(t0) {
+	const $ = c(12);
+	const { item, column, collectionConfig } = t0;
+	let t1;
+	if ($[0] !== collectionConfig || $[1] !== column) {
+		t1 = resolveCellForColumn(column, collectionConfig);
+		$[0] = collectionConfig;
+		$[1] = column;
+		$[2] = t1;
+	} else t1 = $[2];
+	const resolved = t1;
+	const value = item[resolved.accessorKey];
+	const { component: CellComponent, fieldDef, needsFieldDef } = resolved;
+	if (needsFieldDef) {
+		let t2$1;
+		if ($[3] !== CellComponent || $[4] !== fieldDef || $[5] !== item || $[6] !== value) {
+			t2$1 = /* @__PURE__ */ jsx(CellComponent, {
+				value,
+				row: item,
+				fieldDef
+			});
+			$[3] = CellComponent;
+			$[4] = fieldDef;
+			$[5] = item;
+			$[6] = value;
+			$[7] = t2$1;
+		} else t2$1 = $[7];
+		return t2$1;
+	}
+	let t2;
+	if ($[8] !== CellComponent || $[9] !== item || $[10] !== value) {
+		t2 = /* @__PURE__ */ jsx(CellComponent, {
+			value,
+			row: item
+		});
+		$[8] = CellComponent;
+		$[9] = item;
+		$[10] = value;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+}
+function TableDisplay(t0) {
+	const $ = c(37);
+	const { items, collection, actions, editable: t1, columns: t2, linkToDetail: t3, collectionConfig, isLoading: t4, loadingCount: t5 } = t0;
+	const editable = t1 === void 0 ? false : t1;
+	let t6;
+	if ($[0] !== t2) {
+		t6 = t2 === void 0 ? ["_title"] : t2;
+		$[0] = t2;
+		$[1] = t6;
+	} else t6 = $[1];
+	const columns = t6;
+	const linkToDetail = t3 === void 0 ? false : t3;
+	const isLoading = t4 === void 0 ? false : t4;
+	const loadingCount = t5 === void 0 ? 3 : t5;
+	const { t } = useTranslation();
+	const hasActions = editable || linkToDetail || !!actions?.onEdit;
+	if (isLoading && items.length === 0) {
+		let t7$1;
+		if ($[2] !== columns || $[3] !== hasActions || $[4] !== loadingCount) {
+			t7$1 = /* @__PURE__ */ jsx(TableSkeleton, {
+				count: loadingCount,
+				columns,
+				hasActions
+			});
+			$[2] = columns;
+			$[3] = hasActions;
+			$[4] = loadingCount;
+			$[5] = t7$1;
+		} else t7$1 = $[5];
+		return t7$1;
+	}
+	let t7;
+	if ($[6] !== columns) {
+		t7 = columns.map(_temp4);
+		$[6] = columns;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== hasActions) {
+		t8 = hasActions && /* @__PURE__ */ jsx("th", { className: "w-20 px-3 py-2" });
+		$[8] = hasActions;
+		$[9] = t8;
+	} else t8 = $[9];
+	let t9;
+	if ($[10] !== t7 || $[11] !== t8) {
+		t9 = /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+			className: "border-border bg-card border-b",
+			children: [t7, t8]
+		}) });
+		$[10] = t7;
+		$[11] = t8;
+		$[12] = t9;
+	} else t9 = $[12];
+	let t10;
+	if ($[13] !== actions || $[14] !== collection || $[15] !== collectionConfig || $[16] !== columns || $[17] !== editable || $[18] !== hasActions || $[19] !== items || $[20] !== linkToDetail || $[21] !== t) {
+		let t11$1;
+		if ($[23] !== actions || $[24] !== collection || $[25] !== collectionConfig || $[26] !== columns || $[27] !== editable || $[28] !== hasActions || $[29] !== linkToDetail || $[30] !== t) {
+			t11$1 = (item) => /* @__PURE__ */ jsxs("tr", {
+				className: "border-b last:border-0",
+				children: [columns.map((col_0) => /* @__PURE__ */ jsx("td", {
+					className: "px-3 py-2",
+					children: /* @__PURE__ */ jsx(CellRenderer, {
+						item,
+						column: col_0,
+						collectionConfig
+					})
+				}, col_0)), hasActions && /* @__PURE__ */ jsx("td", {
+					className: "px-3 py-2",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-end gap-1",
+						children: [
+							actions?.onEdit && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								className: "h-7 w-7",
+								onClick: () => actions.onEdit?.(item),
+								"aria-label": t("field.editItem"),
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:pencil",
+									className: "size-4"
+								})
+							}),
+							editable && actions?.onRemove && /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								variant: "ghost",
+								size: "icon",
+								className: "h-7 w-7",
+								onClick: () => actions.onRemove?.(item),
+								"aria-label": t("field.removeItem"),
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:x",
+									className: "size-4"
+								})
+							}),
+							!editable && linkToDetail && !actions?.onEdit && /* @__PURE__ */ jsx(CollectionEditLink, {
+								collection,
+								id: item.id,
+								className: "text-primary hover:underline",
+								children: /* @__PURE__ */ jsx(Icon, {
+									icon: "ph:arrow-right",
+									className: "size-4"
+								})
+							})
+						]
+					})
+				})]
+			}, item.id);
+			$[23] = actions;
+			$[24] = collection;
+			$[25] = collectionConfig;
+			$[26] = columns;
+			$[27] = editable;
+			$[28] = hasActions;
+			$[29] = linkToDetail;
+			$[30] = t;
+			$[31] = t11$1;
+		} else t11$1 = $[31];
+		t10 = items.map(t11$1);
+		$[13] = actions;
+		$[14] = collection;
+		$[15] = collectionConfig;
+		$[16] = columns;
+		$[17] = editable;
+		$[18] = hasActions;
+		$[19] = items;
+		$[20] = linkToDetail;
+		$[21] = t;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[32] !== t10) {
+		t11 = /* @__PURE__ */ jsx("tbody", { children: t10 });
+		$[32] = t10;
+		$[33] = t11;
+	} else t11 = $[33];
+	let t12;
+	if ($[34] !== t11 || $[35] !== t9) {
+		t12 = /* @__PURE__ */ jsx("div", {
+			className: "min-w-0 overflow-x-auto border",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full text-sm",
+				children: [t9, t11]
+			})
+		});
+		$[34] = t11;
+		$[35] = t9;
+		$[36] = t12;
+	} else t12 = $[36];
+	return t12;
+}
+function _temp4(col) {
+	return /* @__PURE__ */ jsx("th", {
+		className: "px-3 py-2 text-left font-medium",
+		children: formatColumnHeader(col)
+	}, col);
+}
+
+//#endregion
+export { TableDisplay };

package/dist/client/components/fields/relation/displays/types.mjs

@@ -0,0 +1,72 @@
+import { formatLabel } from "../../../../lib/utils.mjs";
+import { DefaultCell } from "../../../../views/collection/cells/primitive-cells.mjs";
+
+//#region src/client/components/fields/relation/displays/types.ts
+/**
+* Get display value from item (_title fallback chain)
+*/
+function getItemDisplayValue(item) {
+	return item?._title || item?.name || item?.title || item?.id || "";
+}
+/**
+* Format column header (camelCase to Title Case)
+*/
+function formatColumnHeader(column) {
+	if (column === "_title") return "Name";
+	return formatLabel(column);
+}
+/**
+* Format cell value for display
+*/
+function formatCellValue(value) {
+	if (value === null || value === void 0) return "-";
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (value instanceof Date) return value.toLocaleDateString();
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+}
+/**
+* Get image URL from item field
+*/
+function getImageUrl(item, imageField) {
+	if (!imageField) return null;
+	const imageValue = item[imageField];
+	if (typeof imageValue === "string") return imageValue;
+	if (imageValue?.url) return imageValue.url;
+	if (imageValue?.key) return imageValue.key;
+	return null;
+}
+/**
+* Field types that need fieldDef passed to their cell component
+*/
+const FIELD_TYPES_NEEDING_FIELD_DEF = new Set([
+	"object",
+	"array",
+	"relation",
+	"reverseRelation"
+]);
+/**
+* Resolve cell component for a column based on field config
+* Uses the same priority as buildColumns:
+* 1. Cell from field registry (fieldDef.cell.component)
+* 2. DefaultCell fallback
+*/
+function resolveCellForColumn(column, collectionConfig) {
+	const fieldDef = collectionConfig?.fields?.[column];
+	const fieldType = fieldDef?.name ?? "text";
+	const fieldOptions = fieldDef?.["~options"] ?? {};
+	let component;
+	if (fieldDef?.cell) component = fieldDef.cell;
+	else component = DefaultCell;
+	const needsFieldDef = FIELD_TYPES_NEEDING_FIELD_DEF.has(fieldType);
+	const accessorKey = fieldType === "relation" && fieldOptions.relationName ? fieldOptions.relationName : column;
+	return {
+		component,
+		fieldDef,
+		needsFieldDef,
+		accessorKey
+	};
+}
+
+//#endregion
+export { formatCellValue, formatColumnHeader, getImageUrl, getItemDisplayValue, resolveCellForColumn };