@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/media/media-grid.mjs

@@ -0,0 +1,314 @@
+import { cn } from "../../lib/utils.mjs";
+import { Skeleton } from "../ui/skeleton.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/media/media-grid.tsx
+/**
+* MediaGrid Component
+*
+* Reusable grid display for assets with selection support.
+* Used in MediaPickerDialog and potentially in assets table view.
+*
+* Features:
+* - Responsive columns (2-5)
+* - Single/multiple/no selection modes
+* - Loading skeleton
+* - Click handling
+*
+* @example
+* ```tsx
+* <MediaGrid
+*   assets={assets}
+*   selectedIds={selectedIds}
+*   onSelectionChange={setSelectedIds}
+*   selectionMode="multiple"
+* />
+* ```
+*/
+/**
+* Get file icon color based on MIME type
+*/
+function getAssetTypeColor(mimeType) {
+	if (!mimeType) return "bg-muted";
+	const type = mimeType.toLowerCase();
+	if (type.startsWith("image/")) return "bg-info/10";
+	if (type.startsWith("video/")) return "bg-primary/10";
+	if (type.startsWith("audio/")) return "bg-success/10";
+	if (type === "application/pdf") return "bg-destructive/10";
+	return "bg-muted";
+}
+/**
+* Check if MIME type is an image
+*/
+function isImage(mimeType) {
+	return !!mimeType?.toLowerCase().startsWith("image/");
+}
+function MediaGridSkeleton(t0) {
+	const $ = c(9);
+	const { columns: t1 } = t0;
+	const columns = t1 === void 0 ? 4 : t1;
+	const count = columns * 3;
+	let t2;
+	if ($[0] !== count) {
+		t2 = Array.from({ length: count }, _temp);
+		$[0] = count;
+		$[1] = t2;
+	} else t2 = $[1];
+	const skeletonKeys = t2;
+	const gridClass = columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-2 sm:grid-cols-3" : columns === 5 ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4";
+	let t3;
+	if ($[2] !== gridClass) {
+		t3 = cn("grid gap-3", gridClass);
+		$[2] = gridClass;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== skeletonKeys) {
+		t4 = skeletonKeys.map(_temp2);
+		$[4] = skeletonKeys;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== t3 || $[7] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t3,
+			children: t4
+		});
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
+}
+function _temp2(key) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" })]
+	}, key);
+}
+function _temp() {
+	return crypto.randomUUID();
+}
+function AssetItem(t0) {
+	const $ = c(26);
+	const { asset, selected, selectionMode, onToggle, onClick } = t0;
+	const [imageError, setImageError] = React.useState(false);
+	const thumbnailUrl = asset.url;
+	let t1;
+	if ($[0] !== asset.mimeType) {
+		t1 = isImage(asset.mimeType);
+		$[0] = asset.mimeType;
+		$[1] = t1;
+	} else t1 = $[1];
+	const isImageType = t1;
+	const showCheckbox = selectionMode !== "none";
+	let t2;
+	if ($[2] !== onClick || $[3] !== onToggle || $[4] !== selectionMode) {
+		t2 = () => {
+			if (selectionMode !== "none") onToggle();
+			onClick?.();
+		};
+		$[2] = onClick;
+		$[3] = onToggle;
+		$[4] = selectionMode;
+		$[5] = t2;
+	} else t2 = $[5];
+	const handleClick = t2;
+	const t3 = selected ? "ring-primary border-primary ring-2" : "border-border hover:border-border";
+	let t4;
+	if ($[6] !== t3) {
+		t4 = cn("group relative aspect-square w-full overflow-hidden border", "focus-visible:ring-ring transition-all focus-visible:ring-2 focus-visible:outline-none", t3, "bg-muted");
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== asset.alt || $[9] !== asset.filename || $[10] !== asset.mimeType || $[11] !== imageError || $[12] !== isImageType || $[13] !== thumbnailUrl) {
+		t5 = thumbnailUrl && isImageType && !imageError ? /* @__PURE__ */ jsx("img", {
+			src: thumbnailUrl,
+			alt: asset.alt || asset.filename || "Asset",
+			className: "h-full w-full object-cover",
+			onError: () => setImageError(true)
+		}) : /* @__PURE__ */ jsx("div", {
+			className: cn("flex h-full w-full items-center justify-center", getAssetTypeColor(asset.mimeType)),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs font-medium uppercase",
+				children: asset.mimeType?.split("/")[1]?.slice(0, 4) || "FILE"
+			})
+		});
+		$[8] = asset.alt;
+		$[9] = asset.filename;
+		$[10] = asset.mimeType;
+		$[11] = imageError;
+		$[12] = isImageType;
+		$[13] = thumbnailUrl;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== selected || $[16] !== showCheckbox) {
+		t6 = showCheckbox && /* @__PURE__ */ jsx("div", {
+			className: cn("absolute top-2 right-2 flex size-5 items-center justify-center rounded-full border-2 transition-all", selected ? "bg-primary border-primary" : "border-white bg-black/20 group-hover:bg-black/40"),
+			children: selected && /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:check-bold",
+				className: "size-3 text-white"
+			})
+		});
+		$[15] = selected;
+		$[16] = showCheckbox;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== asset.filename) {
+		t7 = asset.filename && /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "truncate text-xs text-white",
+				title: asset.filename,
+				children: asset.filename
+			})
+		});
+		$[18] = asset.filename;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== handleClick || $[21] !== t4 || $[22] !== t5 || $[23] !== t6 || $[24] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: handleClick,
+			className: t4,
+			children: [
+				t5,
+				t6,
+				t7
+			]
+		});
+		$[20] = handleClick;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+		$[24] = t7;
+		$[25] = t8;
+	} else t8 = $[25];
+	return t8;
+}
+const EMPTY_SET = /* @__PURE__ */ new Set();
+function MediaGrid(t0) {
+	const $ = c(31);
+	const { assets, selectedIds: t1, onSelectionChange, selectionMode: t2, loading: t3, onAssetClick, columns: t4, className } = t0;
+	const selectedIds = t1 === void 0 ? EMPTY_SET : t1;
+	const selectionMode = t2 === void 0 ? "none" : t2;
+	const loading = t3 === void 0 ? false : t3;
+	const columns = t4 === void 0 ? 4 : t4;
+	let t5;
+	if ($[0] !== onSelectionChange || $[1] !== selectedIds || $[2] !== selectionMode) {
+		t5 = (assetId) => {
+			if (!onSelectionChange) return;
+			const newSelection = new Set(selectedIds);
+			if (selectionMode === "single") {
+				newSelection.clear();
+				newSelection.add(assetId);
+			} else if (newSelection.has(assetId)) newSelection.delete(assetId);
+			else newSelection.add(assetId);
+			onSelectionChange(newSelection);
+		};
+		$[0] = onSelectionChange;
+		$[1] = selectedIds;
+		$[2] = selectionMode;
+		$[3] = t5;
+	} else t5 = $[3];
+	const handleToggle = t5;
+	if (loading) {
+		let t6$1;
+		if ($[4] !== columns) {
+			t6$1 = /* @__PURE__ */ jsx(MediaGridSkeleton, { columns });
+			$[4] = columns;
+			$[5] = t6$1;
+		} else t6$1 = $[5];
+		let t7$1;
+		if ($[6] !== className || $[7] !== t6$1) {
+			t7$1 = /* @__PURE__ */ jsx("div", {
+				className,
+				children: t6$1
+			});
+			$[6] = className;
+			$[7] = t6$1;
+			$[8] = t7$1;
+		} else t7$1 = $[8];
+		return t7$1;
+	}
+	if (assets.length === 0) {
+		let t6$1;
+		if ($[9] !== className) {
+			t6$1 = cn("flex flex-col items-center justify-center border border-dashed p-12", "bg-muted text-muted-foreground", className);
+			$[9] = className;
+			$[10] = t6$1;
+		} else t6$1 = $[10];
+		let t7$1;
+		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+			t7$1 = /* @__PURE__ */ jsx("p", {
+				className: "text-sm",
+				children: "No assets found"
+			});
+			$[11] = t7$1;
+		} else t7$1 = $[11];
+		let t8$1;
+		if ($[12] !== t6$1) {
+			t8$1 = /* @__PURE__ */ jsx("div", {
+				className: t6$1,
+				children: t7$1
+			});
+			$[12] = t6$1;
+			$[13] = t8$1;
+		} else t8$1 = $[13];
+		return t8$1;
+	}
+	const gridClass = columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-2 sm:grid-cols-3" : columns === 5 ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4";
+	let t6;
+	if ($[14] !== className || $[15] !== gridClass) {
+		t6 = cn("grid gap-3", gridClass, className);
+		$[14] = className;
+		$[15] = gridClass;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== assets || $[18] !== handleToggle || $[19] !== onAssetClick || $[20] !== selectedIds || $[21] !== selectionMode) {
+		let t8$1;
+		if ($[23] !== handleToggle || $[24] !== onAssetClick || $[25] !== selectedIds || $[26] !== selectionMode) {
+			t8$1 = (asset) => /* @__PURE__ */ jsx(AssetItem, {
+				asset,
+				selected: selectedIds.has(asset.id),
+				selectionMode,
+				onToggle: () => handleToggle(asset.id),
+				onClick: onAssetClick ? () => onAssetClick(asset) : void 0
+			}, asset.id);
+			$[23] = handleToggle;
+			$[24] = onAssetClick;
+			$[25] = selectedIds;
+			$[26] = selectionMode;
+			$[27] = t8$1;
+		} else t8$1 = $[27];
+		t7 = assets.map(t8$1);
+		$[17] = assets;
+		$[18] = handleToggle;
+		$[19] = onAssetClick;
+		$[20] = selectedIds;
+		$[21] = selectionMode;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[28] !== t6 || $[29] !== t7) {
+		t8 = /* @__PURE__ */ jsx("div", {
+			className: t6,
+			children: t7
+		});
+		$[28] = t6;
+		$[29] = t7;
+		$[30] = t8;
+	} else t8 = $[30];
+	return t8;
+}
+
+//#endregion
+export { MediaGrid };