@questpie/admin 3.2.4 → 3.2.5

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

@@ -5,255 +5,138 @@ 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 * as React from "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: "panel-surface space-y-2 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-2",
-			children: skeletonKeys.map(_temp3)
-		});
-		$[4] = skeletonKeys;
-		$[5] = t4;
-	} else t4 = $[5];
-	return t4;
+function ListSkeleton({ count = 3, editable = false }) {
+	const skeletonKeys = React.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]);
+	if (editable) return /* @__PURE__ */ jsx("div", {
+		className: "panel-surface space-y-2 p-3",
+		children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("div", {
+			className: "item-surface border-border bg-card flex items-center gap-2 px-3 py-2.5",
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "size-3.5"
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-4 max-w-[200px] flex-1"
+			})]
+		}, key))
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		className: "space-y-2",
+		children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("li", {
+			className: "item-surface border-border bg-card flex items-center gap-2 px-3 py-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "size-3.5"
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-4 w-32"
+			})]
+		}, key))
+	});
 }
-function _temp3(key_0) {
-	return /* @__PURE__ */ jsxs("li", {
-		className: "item-surface border-border bg-card flex items-center gap-2 px-3 py-2",
-		children: [/* @__PURE__ */ jsx(Skeleton, {
-			variant: "text",
-			className: "size-3.5"
-		}), /* @__PURE__ */ jsx(Skeleton, {
-			variant: "text",
-			className: "h-4 w-32"
-		})]
-	}, key_0);
-}
-function _temp2(key) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "item-surface border-border bg-card flex items-center gap-2 px-3 py-2.5",
-		children: [/* @__PURE__ */ jsx(Skeleton, {
-			variant: "text",
-			className: "size-3.5"
-		}), /* @__PURE__ */ jsx(Skeleton, {
-			variant: "text",
-			className: "h-4 max-w-[200px] flex-1"
-		})]
-	}, 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;
+function ListDisplay({ items, collection, collectionIcon, actions, editable = false, orderable = false, linkToDetail = false, renderItem, isLoading = false, loadingCount = 3 }) {
 	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.5 text-muted-foreground shrink-0" });
-		$[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: "item-surface border-border bg-card flex items-center gap-2 px-3 py-2.5",
-					children: [
-						orderable && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "text-muted-foreground hover:text-foreground flex shrink-0 cursor-grab items-center",
-							"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-xs",
-							className: "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-xs",
-							className: "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: "panel-surface space-y-2 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", {
+	const iconElement = resolveIconElement(collectionIcon, { className: "size-3.5 text-muted-foreground shrink-0" });
+	const smallIconElement = resolveIconElement(collectionIcon, { className: "size-3.5 text-muted-foreground shrink-0" });
+	if (isLoading && items.length === 0) return /* @__PURE__ */ jsx(ListSkeleton, {
+		count: loadingCount,
+		editable
+	});
+	if (editable) return /* @__PURE__ */ jsx("div", {
+		className: "panel-surface space-y-2 p-3",
+		children: items.map((item, index) => /* @__PURE__ */ jsxs("div", {
+			className: "item-surface border-border bg-card flex items-center gap-2 px-3 py-2.5",
+			children: [
+				orderable && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "text-muted-foreground hover:text-foreground flex shrink-0 cursor-grab items-center",
+					"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-xs",
+					className: "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",
-					onClick: () => actions.onEdit?.(item_0),
-					className: cn("item-surface border-border bg-card flex w-full items-center gap-2 px-3 py-2 text-sm", "hover:border-border hover:bg-accent hover:text-accent-foreground"),
-					children: [
-						smallIconElement,
-						displayText,
-						/* @__PURE__ */ jsx(Icon, {
-							icon: "ph:pencil",
-							className: "ml-auto size-3.5 shrink-0"
-						})
-					]
-				}) }, item_0.id);
-				if (linkToDetail) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(CollectionEditLink, {
-					collection,
-					id: item_0.id,
-					className: cn("item-surface border-border bg-card flex w-full items-center gap-2 px-3 py-2 text-sm", "hover:border-border hover:bg-accent hover:text-accent-foreground"),
-					children: [
-						smallIconElement,
-						displayText,
-						/* @__PURE__ */ jsx(Icon, {
-							icon: "ph:arrow-right",
-							className: "ml-auto size-3.5 shrink-0"
-						})
-					]
-				}) }, item_0.id);
-				return /* @__PURE__ */ jsxs("li", {
-					className: "item-surface border-border bg-card flex w-full items-center gap-2 px-3 py-2 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-2",
-			children: t8
-		});
-		$[35] = t8;
-		$[36] = t9;
-	} else t9 = $[36];
-	return t9;
+					variant: "ghost",
+					size: "icon-xs",
+					className: "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))
+	});
+	const itemSurfaceClass = "item-surface border-border bg-card flex w-full items-center gap-2 px-3 py-2 text-sm";
+	return /* @__PURE__ */ jsx("ul", {
+		className: "space-y-2",
+		children: items.map((item, index) => {
+			const displayText = renderItem ? renderItem(item, index) : getItemDisplayValue(item);
+			if (actions?.onEdit) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => actions.onEdit?.(item),
+				className: cn(itemSurfaceClass, "hover:border-border hover:bg-accent hover:text-accent-foreground"),
+				children: [
+					smallIconElement,
+					displayText,
+					/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:pencil",
+						className: "ml-auto size-3.5 shrink-0"
+					})
+				]
+			}) }, item.id);
+			if (linkToDetail) return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(CollectionEditLink, {
+				collection,
+				id: item.id,
+				className: cn(itemSurfaceClass, "hover:border-border hover:bg-accent hover:text-accent-foreground"),
+				children: [
+					smallIconElement,
+					displayText,
+					/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:arrow-right",
+						className: "ml-auto size-3.5 shrink-0"
+					})
+				]
+			}) }, item.id);
+			return /* @__PURE__ */ jsxs("li", {
+				className: itemSurfaceClass,
+				children: [smallIconElement, displayText]
+			}, item.id);
+		})
+	});
 }
 
 //#endregion