@questpie/admin 3.0.3 → 3.0.5

package/dist/client/components/widgets/quick-actions-widget.mjs

@@ -1,7 +1,8 @@
-import { useResolveText } from "../../i18n/hooks.mjs";
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
 import { cn, formatLabel } from "../../lib/utils.mjs";
 import { resolveIconElement } from "../component-renderer.mjs";
 import { WidgetCard } from "../../views/dashboard/widget-card.mjs";
+import { WidgetEmptyState } from "./widget-empty-state.mjs";
 import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -20,189 +21,280 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * of other dashboard widgets like recent-items.
 */
 function QuickActionsWidget(t0) {
-	const $ = c(29);
+	const $ = c(66);
 	const { config, basePath: t1, navigate } = t0;
 	const basePath = t1 === void 0 ? "/admin" : t1;
 	const resolveText = useResolveText();
-	const { quickActions, layout: t2 } = config;
+	const { t } = useTranslation();
+	const { layout: t2 } = config;
 	const layout = t2 === void 0 ? "list" : t2;
-	let t3;
-	if ($[0] !== config.title || $[1] !== resolveText) {
-		t3 = config.title ? resolveText(config.title) : "Quick Actions";
-		$[0] = config.title;
-		$[1] = resolveText;
-		$[2] = t3;
-	} else t3 = $[2];
-	const title = t3;
 	let T0;
+	let t3;
 	let t4;
 	let t5;
 	let t6;
 	let t7;
-	if ($[3] !== basePath || $[4] !== layout || $[5] !== navigate || $[6] !== quickActions || $[7] !== resolveText || $[8] !== title) {
-		t7 = Symbol.for("react.early_return_sentinel");
+	let t8;
+	let t9;
+	if ($[0] !== basePath || $[1] !== config.actions || $[2] !== config.cardVariant || $[3] !== config.className || $[4] !== config.description || $[5] !== config.label || $[6] !== config.quickActions || $[7] !== config.title || $[8] !== layout || $[9] !== navigate || $[10] !== resolveText || $[11] !== t) {
+		t9 = Symbol.for("react.early_return_sentinel");
 		bb0: {
-			let t8$1;
-			if ($[14] !== basePath || $[15] !== resolveText) {
-				t8$1 = (action, index) => {
-					if (typeof action === "string") {
-						const [collection, actionType] = action.split(".");
+			const quickActions = config.quickActions ?? config.actions ?? [];
+			let t10$1;
+			if ($[20] !== config.label || $[21] !== config.title || $[22] !== resolveText || $[23] !== t) {
+				t10$1 = config.title ? resolveText(config.title) : config.label ? resolveText(config.label) : t("dashboard.quickActions");
+				$[20] = config.label;
+				$[21] = config.title;
+				$[22] = resolveText;
+				$[23] = t;
+				$[24] = t10$1;
+			} else t10$1 = $[24];
+			const title = t10$1;
+			let t11$1;
+			if ($[25] !== basePath) {
+				t11$1 = (action, fallback) => {
+					if (!action) return fallback;
+					if (action.type === "create") return `${basePath}/collections/${action.collection}/create`;
+					if (action.type === "page") return `${basePath}/${action.pageId}`;
+					return action.href;
+				};
+				$[25] = basePath;
+				$[26] = t11$1;
+			} else t11$1 = $[26];
+			const resolveActionHref = t11$1;
+			let t12;
+			if ($[27] !== basePath || $[28] !== resolveActionHref || $[29] !== resolveText || $[30] !== t) {
+				t12 = (action_0, index) => {
+					if (typeof action_0 === "string") {
+						const [collection, actionType] = action_0.split(".");
 						return {
-							id: `${action}-${index}`,
-							label: `${actionType === "create" ? "New" : actionType} ${formatLabel(collection)}`,
+							id: `${action_0}-${index}`,
+							label: actionType === "create" ? t("collection.new", { name: formatLabel(collection) }) : `${actionType} ${formatLabel(collection)}`,
 							href: `${basePath}/collections/${collection}/${actionType === "create" ? "create" : ""}`,
 							icon: void 0,
 							variant: "default"
 						};
 					}
+					const serverAction = "action" in action_0 ? action_0.action : void 0;
 					return {
 						id: `action-${index}`,
-						label: resolveText(action.label),
-						href: action.href,
-						onClick: action.onClick,
-						icon: action.icon,
-						variant: action.variant || "default"
+						label: resolveText(action_0.label),
+						href: resolveActionHref(serverAction, action_0.href),
+						external: serverAction?.type === "link" ? serverAction.external : false,
+						onClick: action_0.onClick,
+						icon: action_0.icon,
+						variant: action_0.variant || "default"
 					};
 				};
-				$[14] = basePath;
-				$[15] = resolveText;
-				$[16] = t8$1;
-			} else t8$1 = $[16];
-			const parsedActions = quickActions.map(t8$1);
-			let t9$1;
-			if ($[17] !== navigate) {
-				t9$1 = (action_0) => {
-					if (action_0.onClick) action_0.onClick();
-					else if (action_0.href && navigate) navigate(action_0.href);
+				$[27] = basePath;
+				$[28] = resolveActionHref;
+				$[29] = resolveText;
+				$[30] = t;
+				$[31] = t12;
+			} else t12 = $[31];
+			const parsedActions = quickActions.map(t12);
+			let t13;
+			if ($[32] !== navigate) {
+				t13 = (action_1) => {
+					if (action_1.onClick) action_1.onClick();
+					else if (action_1.href && action_1.external) window.open(action_1.href, "_blank", "noopener,noreferrer");
+					else if (action_1.href && navigate) navigate(action_1.href);
 				};
-				$[17] = navigate;
-				$[18] = t9$1;
-			} else t9$1 = $[18];
-			const handleClick = t9$1;
+				$[32] = navigate;
+				$[33] = t13;
+			} else t13 = $[33];
+			const handleClick = t13;
 			const variantStyles = {
-				default: "hover:bg-muted cursor-pointer",
-				primary: "bg-primary/5 hover:bg-primary/10 border-primary/20 text-primary [&_svg]:text-primary cursor-pointer",
-				secondary: "hover:bg-secondary cursor-pointer",
-				outline: "border border-border hover:bg-muted cursor-pointer"
+				default: "border-border-subtle bg-surface-low/60 hover:border-border hover:bg-surface-high cursor-pointer",
+				primary: "border-primary/30 bg-primary/10 text-foreground hover:border-primary/45 hover:bg-primary/15 [&_svg]:text-primary cursor-pointer",
+				secondary: "border-border-subtle bg-secondary/60 hover:bg-secondary cursor-pointer",
+				outline: "border-border bg-background hover:bg-muted cursor-pointer"
 			};
 			const iconVariantStyles = {
 				default: "bg-muted text-muted-foreground",
-				primary: "bg-primary/10 text-primary",
+				primary: "bg-primary/15 text-primary",
 				secondary: "bg-secondary text-secondary-foreground",
 				outline: "bg-background text-muted-foreground"
 			};
 			if (parsedActions.length === 0) {
-				let t10;
-				if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-					t10 = /* @__PURE__ */ jsx("p", {
-						className: "text-muted-foreground text-sm",
-						children: "No actions configured"
+				let t14;
+				if ($[34] !== config.description || $[35] !== resolveText) {
+					t14 = config.description ? resolveText(config.description) : void 0;
+					$[34] = config.description;
+					$[35] = resolveText;
+					$[36] = t14;
+				} else t14 = $[36];
+				const t15 = config.cardVariant;
+				const t16 = config.className;
+				let t17;
+				if ($[37] !== t) {
+					t17 = t("widget.quickActions.emptyTitle");
+					$[37] = t;
+					$[38] = t17;
+				} else t17 = $[38];
+				let t18;
+				if ($[39] !== t) {
+					t18 = t("widget.quickActions.emptyDescription");
+					$[39] = t;
+					$[40] = t18;
+				} else t18 = $[40];
+				let t19;
+				if ($[41] !== t17 || $[42] !== t18) {
+					t19 = /* @__PURE__ */ jsx(WidgetEmptyState, {
+						iconName: "ph:lightning",
+						title: t17,
+						description: t18
 					});
-					$[19] = t10;
-				} else t10 = $[19];
-				let t11;
-				if ($[20] !== title) {
-					t11 = /* @__PURE__ */ jsx(WidgetCard, {
+					$[41] = t17;
+					$[42] = t18;
+					$[43] = t19;
+				} else t19 = $[43];
+				let t20;
+				if ($[44] !== config.cardVariant || $[45] !== config.className || $[46] !== t14 || $[47] !== t19 || $[48] !== title) {
+					t20 = /* @__PURE__ */ jsx(WidgetCard, {
 						title,
-						children: t10
+						description: t14,
+						variant: t15,
+						className: t16,
+						children: t19
 					});
-					$[20] = title;
-					$[21] = t11;
-				} else t11 = $[21];
-				t7 = t11;
+					$[44] = config.cardVariant;
+					$[45] = config.className;
+					$[46] = t14;
+					$[47] = t19;
+					$[48] = title;
+					$[49] = t20;
+				} else t20 = $[49];
+				t9 = t20;
 				break bb0;
 			}
 			if (layout === "grid") {
-				t7 = /* @__PURE__ */ jsx(WidgetCard, {
+				let t14;
+				if ($[50] !== config.description || $[51] !== resolveText) {
+					t14 = config.description ? resolveText(config.description) : void 0;
+					$[50] = config.description;
+					$[51] = resolveText;
+					$[52] = t14;
+				} else t14 = $[52];
+				t9 = /* @__PURE__ */ jsx(WidgetCard, {
 					title,
+					description: t14,
+					variant: config.cardVariant,
+					className: config.className,
 					children: /* @__PURE__ */ jsx("div", {
-						className: "grid grid-cols-2 gap-2",
-						children: parsedActions.map((action_1) => {
-							const iconElement = resolveIconElement(action_1.icon, { className: "h-4 w-4" });
+						className: "grid h-full grid-cols-2 gap-3",
+						children: parsedActions.map((action_2) => {
+							const iconElement = resolveIconElement(action_2.icon, { className: "h-4 w-4" });
 							return /* @__PURE__ */ jsxs("button", {
 								type: "button",
-								onClick: () => handleClick(action_1),
-								className: cn("flex flex-col items-center justify-center gap-2 p-3 text-center transition-colors", variantStyles[action_1.variant]),
+								onClick: () => handleClick(action_2),
+								className: cn("flex min-h-24 flex-col items-center justify-center gap-2 rounded-md border p-3 text-center", "transition-[background-color,border-color,transform] active:scale-[0.96]", variantStyles[action_2.variant]),
 								children: [iconElement && /* @__PURE__ */ jsx("div", {
-									className: cn("flex h-9 w-9 items-center justify-center", iconVariantStyles[action_1.variant]),
+									className: cn("flex h-9 w-9 items-center justify-center rounded-md", iconVariantStyles[action_2.variant]),
 									children: iconElement
 								}), /* @__PURE__ */ jsx("span", {
-									className: "text-xs font-medium",
-									children: action_1.label
+									className: "text-xs leading-tight font-medium text-balance",
+									children: action_2.label
 								})]
-							}, action_1.id);
+							}, action_2.id);
 						})
 					})
 				});
 				break bb0;
 			}
 			T0 = WidgetCard;
-			t6 = title;
-			t4 = "-mx-1 space-y-1";
-			t5 = parsedActions.map((action_2) => {
-				const iconElement_0 = resolveIconElement(action_2.icon, { className: "h-4 w-4" });
+			t5 = title;
+			if ($[53] !== config.description || $[54] !== resolveText) {
+				t6 = config.description ? resolveText(config.description) : void 0;
+				$[53] = config.description;
+				$[54] = resolveText;
+				$[55] = t6;
+			} else t6 = $[55];
+			t7 = config.cardVariant;
+			t8 = config.className;
+			t3 = "-mx-1 space-y-1";
+			t4 = parsedActions.map((action_3) => {
+				const iconElement_0 = resolveIconElement(action_3.icon, { className: "h-4 w-4" });
 				return /* @__PURE__ */ jsxs("button", {
 					type: "button",
-					onClick: () => handleClick(action_2),
-					className: cn("flex w-full items-center gap-3 px-2 py-2 text-left transition-colors", variantStyles[action_2.variant]),
+					onClick: () => handleClick(action_3),
+					className: cn("group flex min-h-10 w-full items-center gap-3 rounded-md px-2 py-2 text-left transition-[background-color,transform] active:scale-[0.96]", variantStyles[action_3.variant]),
 					children: [
 						iconElement_0 && /* @__PURE__ */ jsx("div", {
-							className: cn("flex h-8 w-8 shrink-0 items-center justify-center", iconVariantStyles[action_2.variant]),
+							className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-md", iconVariantStyles[action_3.variant]),
 							children: iconElement_0
 						}),
 						/* @__PURE__ */ jsx("span", {
 							className: "flex-1 truncate text-sm font-medium",
-							children: action_2.label
+							children: action_3.label
 						}),
 						/* @__PURE__ */ jsx(Icon, {
 							icon: "ph:arrow-right",
 							className: "text-muted-foreground h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100"
 						})
 					]
-				}, action_2.id);
+				}, action_3.id);
 			});
 		}
-		$[3] = basePath;
-		$[4] = layout;
-		$[5] = navigate;
-		$[6] = quickActions;
-		$[7] = resolveText;
-		$[8] = title;
-		$[9] = T0;
-		$[10] = t4;
-		$[11] = t5;
-		$[12] = t6;
-		$[13] = t7;
+		$[0] = basePath;
+		$[1] = config.actions;
+		$[2] = config.cardVariant;
+		$[3] = config.className;
+		$[4] = config.description;
+		$[5] = config.label;
+		$[6] = config.quickActions;
+		$[7] = config.title;
+		$[8] = layout;
+		$[9] = navigate;
+		$[10] = resolveText;
+		$[11] = t;
+		$[12] = T0;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t8;
+		$[19] = t9;
 	} else {
-		T0 = $[9];
-		t4 = $[10];
-		t5 = $[11];
-		t6 = $[12];
-		t7 = $[13];
+		T0 = $[12];
+		t3 = $[13];
+		t4 = $[14];
+		t5 = $[15];
+		t6 = $[16];
+		t7 = $[17];
+		t8 = $[18];
+		t9 = $[19];
 	}
-	if (t7 !== Symbol.for("react.early_return_sentinel")) return t7;
-	let t8;
-	if ($[22] !== t4 || $[23] !== t5) {
-		t8 = /* @__PURE__ */ jsx("div", {
-			className: t4,
-			children: t5
+	if (t9 !== Symbol.for("react.early_return_sentinel")) return t9;
+	let t10;
+	if ($[56] !== t3 || $[57] !== t4) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: t3,
+			children: t4
 		});
-		$[22] = t4;
-		$[23] = t5;
-		$[24] = t8;
-	} else t8 = $[24];
-	let t9;
-	if ($[25] !== T0 || $[26] !== t6 || $[27] !== t8) {
-		t9 = /* @__PURE__ */ jsx(T0, {
-			title: t6,
-			children: t8
+		$[56] = t3;
+		$[57] = t4;
+		$[58] = t10;
+	} else t10 = $[58];
+	let t11;
+	if ($[59] !== T0 || $[60] !== t10 || $[61] !== t5 || $[62] !== t6 || $[63] !== t7 || $[64] !== t8) {
+		t11 = /* @__PURE__ */ jsx(T0, {
+			title: t5,
+			description: t6,
+			variant: t7,
+			className: t8,
+			children: t10
 		});
-		$[25] = T0;
-		$[26] = t6;
-		$[27] = t8;
-		$[28] = t9;
-	} else t9 = $[28];
-	return t9;
+		$[59] = T0;
+		$[60] = t10;
+		$[61] = t5;
+		$[62] = t6;
+		$[63] = t7;
+		$[64] = t8;
+		$[65] = t11;
+	} else t11 = $[65];
+	return t11;
 }
 
 //#endregion