@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/components/widgets/ActionConfigDialog.js

@@ -0,0 +1,671 @@
+import { memo as e, useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+import { Pencil as a, Plus as o, Zap as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Button as u, Checkbox as d, Dialog as ee, DialogContent as te, DialogDescription as ne, DialogFooter as re, DialogHeader as f, DialogTitle as p, Input as m, Select as h, SelectContent as g, SelectItem as _, SelectTrigger as v, SelectValue as y, Spinner as b, Textarea as ie } from "@burdenoff/fe-libs/ui";
+//#region src/bigconsole/components/widgets/ActionConfigDialog.tsx
+var ae = [
+	{
+		value: "BUTTON",
+		label: "Button"
+	},
+	{
+		value: "LINK",
+		label: "Link"
+	},
+	{
+		value: "EMIT_EVENT",
+		label: "Emit Event"
+	},
+	{
+		value: "CUSTOM",
+		label: "Custom"
+	}
+], x = [
+	{
+		value: "PRIMARY",
+		label: "Primary",
+		color: "var(--color-action-primary-bg)"
+	},
+	{
+		value: "SECONDARY",
+		label: "Secondary",
+		color: "var(--color-action-secondary-bg)"
+	},
+	{
+		value: "SUCCESS",
+		label: "Success",
+		color: "var(--color-status-success-bg)"
+	},
+	{
+		value: "WARNING",
+		label: "Warning",
+		color: "var(--color-status-warning-bg)"
+	},
+	{
+		value: "DANGER",
+		label: "Danger",
+		color: "var(--color-action-danger-bg)"
+	}
+], oe = [
+	{
+		value: "",
+		label: "No icon"
+	},
+	{
+		value: "refresh",
+		label: "Refresh"
+	},
+	{
+		value: "download",
+		label: "Download"
+	},
+	{
+		value: "upload",
+		label: "Upload"
+	},
+	{
+		value: "trash",
+		label: "Trash"
+	},
+	{
+		value: "edit",
+		label: "Edit"
+	},
+	{
+		value: "plus",
+		label: "Plus"
+	},
+	{
+		value: "check",
+		label: "Check"
+	},
+	{
+		value: "eye",
+		label: "View"
+	},
+	{
+		value: "copy",
+		label: "Copy"
+	},
+	{
+		value: "share",
+		label: "Share"
+	},
+	{
+		value: "settings",
+		label: "Settings"
+	},
+	{
+		value: "filter",
+		label: "Filter"
+	},
+	{
+		value: "search",
+		label: "Search"
+	}
+], S = e(function({ isOpen: e, action: S, isLoading: C = !1, onClose: w, onSave: T }) {
+	let E = !!S, D = r(null), [O, k] = i(""), [A, j] = i(""), [M, N] = i("BUTTON"), [P, F] = i("PRIMARY"), [I, L] = i(""), [R, z] = i(!1), [B, V] = i(!1), [H, U] = i(!1), [W, G] = i("Confirm Action"), [K, q] = i("Are you sure you want to proceed?"), [J, Y] = i("Confirm"), [X, Z] = i("Cancel"), [Q, $] = i(null);
+	n(() => {
+		e && (S ? (k(S.name), j(S.label), N(S.type), F(S.style), L(S.icon || ""), z(S.disabled), V(S.hidden), U(!!S.confirmation), S.confirmation && (G(S.confirmation.title), q(S.confirmation.message), Y(S.confirmation.confirmLabel || "Confirm"), Z(S.confirmation.cancelLabel || "Cancel"))) : (k(""), j(""), N("BUTTON"), F("PRIMARY"), L(""), z(!1), V(!1), U(!1), G("Confirm Action"), q("Are you sure you want to proceed?"), Y("Confirm"), Z("Cancel")), $(null), setTimeout(() => D.current?.focus(), 100));
+	}, [e, S]);
+	let se = t((e) => {
+		e.preventDefault();
+		let t = O.trim(), n = A.trim();
+		if (!t) {
+			$("Action name is required"), D.current?.focus();
+			return;
+		}
+		if (!n) {
+			$("Action label is required");
+			return;
+		}
+		let r = H ? {
+			title: W.trim() || "Confirm Action",
+			message: K.trim() || "Are you sure?",
+			confirmLabel: J.trim() || "Confirm",
+			cancelLabel: X.trim() || "Cancel"
+		} : void 0;
+		T(E && S ? {
+			id: S.id,
+			name: t,
+			label: n,
+			type: M,
+			style: P,
+			icon: I || void 0,
+			confirmation: H ? r : null,
+			disabled: R,
+			hidden: B
+		} : {
+			name: t,
+			label: n,
+			type: M,
+			style: P,
+			icon: I || void 0,
+			confirmation: r,
+			disabled: R,
+			hidden: B
+		});
+	}, [
+		O,
+		A,
+		M,
+		P,
+		I,
+		R,
+		B,
+		H,
+		W,
+		K,
+		J,
+		X,
+		E,
+		S,
+		T
+	]);
+	return /* @__PURE__ */ c(ee, {
+		open: e,
+		onOpenChange: (e) => !e && !C && w(),
+		children: /* @__PURE__ */ l(te, {
+			style: {
+				maxWidth: "500px",
+				padding: 0
+			},
+			children: [/* @__PURE__ */ c(f, {
+				style: { padding: "var(--space-pagePadding) var(--space-pagePadding) 0" },
+				children: /* @__PURE__ */ l("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: "var(--space-formGap)"
+					},
+					children: [/* @__PURE__ */ c("div", {
+						style: {
+							display: "flex",
+							height: "var(--size-controlHeight-lg)",
+							width: "var(--size-controlHeight-lg)",
+							alignItems: "center",
+							justifyContent: "center",
+							borderRadius: "var(--radius-card)",
+							backgroundColor: "var(--color-action-primary-bg)",
+							boxShadow: "var(--shadow-elevation-2)"
+						},
+						children: c(E ? a : s, { style: {
+							height: "var(--size-icon-lg)",
+							width: "var(--size-icon-lg)",
+							color: "var(--color-action-primary-text)"
+						} })
+					}), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c(p, {
+						style: {
+							fontSize: "var(--font-size-heading-h4)",
+							fontWeight: "var(--font-weight-bold)",
+							color: "var(--color-text-primary)",
+							margin: 0
+						},
+						children: E ? "Edit Action" : "Add Action"
+					}), /* @__PURE__ */ c(ne, {
+						style: {
+							fontSize: "var(--font-size-body-sm)",
+							color: "var(--color-text-secondary)",
+							margin: "var(--space-controlGap) 0 0 0"
+						},
+						children: E ? "Update the action configuration" : "Configure a new widget action"
+					})] })]
+				})
+			}), /* @__PURE__ */ l("form", {
+				onSubmit: se,
+				children: [/* @__PURE__ */ l("div", {
+					style: {
+						padding: "var(--space-pagePadding)",
+						maxHeight: "60vh",
+						overflowY: "auto"
+					},
+					children: [
+						Q && /* @__PURE__ */ c("div", {
+							style: {
+								padding: "var(--space-controlGap)",
+								backgroundColor: "var(--color-status-error-bgSubtle)",
+								border: "1px solid var(--color-status-error-border)",
+								borderRadius: "var(--radius-button)",
+								marginBottom: "var(--space-formGap)"
+							},
+							children: /* @__PURE__ */ c("p", {
+								style: {
+									fontSize: "var(--font-size-body-sm)",
+									color: "var(--color-status-error-text)",
+									margin: 0
+								},
+								children: Q
+							})
+						}),
+						/* @__PURE__ */ l("div", {
+							style: { marginBottom: "var(--space-formGap)" },
+							children: [
+								/* @__PURE__ */ l("label", {
+									style: {
+										display: "block",
+										fontSize: "var(--font-size-body-sm)",
+										fontWeight: "var(--font-weight-semibold)",
+										color: "var(--color-text-primary)",
+										marginBottom: "var(--space-controlGap)"
+									},
+									children: ["Name ", /* @__PURE__ */ c("span", {
+										style: { color: "var(--color-status-error-text)" },
+										children: "*"
+									})]
+								}),
+								/* @__PURE__ */ c(m, {
+									ref: D,
+									value: O,
+									onChange: (e) => {
+										k(e.target.value), Q && $(null);
+									},
+									placeholder: "e.g., refresh, export, delete",
+									disabled: C,
+									style: {
+										height: "var(--size-controlHeight-md)",
+										fontSize: "var(--font-size-body-sm)"
+									}
+								}),
+								/* @__PURE__ */ c("p", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										color: "var(--color-text-muted)",
+										marginTop: "var(--space-controlGap)"
+									},
+									children: "Unique identifier for this action (used in events)"
+								})
+							]
+						}),
+						/* @__PURE__ */ l("div", {
+							style: { marginBottom: "var(--space-formGap)" },
+							children: [
+								/* @__PURE__ */ l("label", {
+									style: {
+										display: "block",
+										fontSize: "var(--font-size-body-sm)",
+										fontWeight: "var(--font-weight-semibold)",
+										color: "var(--color-text-primary)",
+										marginBottom: "var(--space-controlGap)"
+									},
+									children: ["Label ", /* @__PURE__ */ c("span", {
+										style: { color: "var(--color-status-error-text)" },
+										children: "*"
+									})]
+								}),
+								/* @__PURE__ */ c(m, {
+									value: A,
+									onChange: (e) => j(e.target.value),
+									placeholder: "e.g., Refresh Data, Export CSV",
+									disabled: C,
+									style: {
+										height: "var(--size-controlHeight-md)",
+										fontSize: "var(--font-size-body-sm)"
+									}
+								}),
+								/* @__PURE__ */ c("p", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										color: "var(--color-text-muted)",
+										marginTop: "var(--space-controlGap)"
+									},
+									children: "Display text shown on the button"
+								})
+							]
+						}),
+						/* @__PURE__ */ l("div", {
+							style: {
+								display: "grid",
+								gridTemplateColumns: "1fr 1fr",
+								gap: "var(--space-formGap)",
+								marginBottom: "var(--space-formGap)"
+							},
+							children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+								style: {
+									display: "block",
+									fontSize: "var(--font-size-body-sm)",
+									fontWeight: "var(--font-weight-semibold)",
+									color: "var(--color-text-primary)",
+									marginBottom: "var(--space-controlGap)"
+								},
+								children: "Type"
+							}), /* @__PURE__ */ l(h, {
+								value: M,
+								onValueChange: (e) => N(e),
+								disabled: C,
+								children: [/* @__PURE__ */ c(v, {
+									style: {
+										height: "var(--size-controlHeight-md)",
+										fontSize: "var(--font-size-body-sm)"
+									},
+									children: /* @__PURE__ */ c(y, {})
+								}), /* @__PURE__ */ c(g, {
+									style: {
+										zIndex: 9999,
+										backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface, #ffffff))",
+										border: "1px solid var(--color-border)",
+										boxShadow: "var(--shadow-elevation-3)",
+										borderRadius: "var(--radius-button)"
+									},
+									children: ae.map((e) => /* @__PURE__ */ c(_, {
+										value: e.value,
+										children: e.label
+									}, e.value))
+								})]
+							})] }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+								style: {
+									display: "block",
+									fontSize: "var(--font-size-body-sm)",
+									fontWeight: "var(--font-weight-semibold)",
+									color: "var(--color-text-primary)",
+									marginBottom: "var(--space-controlGap)"
+								},
+								children: "Style"
+							}), /* @__PURE__ */ l(h, {
+								value: P,
+								onValueChange: (e) => F(e),
+								disabled: C,
+								children: [/* @__PURE__ */ c(v, {
+									style: {
+										height: "var(--size-controlHeight-md)",
+										fontSize: "var(--font-size-body-sm)"
+									},
+									children: /* @__PURE__ */ c(y, {})
+								}), /* @__PURE__ */ c(g, {
+									style: {
+										zIndex: 9999,
+										backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface, #ffffff))",
+										border: "1px solid var(--color-border)",
+										boxShadow: "var(--shadow-elevation-3)",
+										borderRadius: "var(--radius-button)"
+									},
+									children: x.map((e) => /* @__PURE__ */ c(_, {
+										value: e.value,
+										children: e.label
+									}, e.value))
+								})]
+							})] })]
+						}),
+						/* @__PURE__ */ l("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "var(--space-controlGap)",
+								marginBottom: "var(--space-formGap)",
+								padding: "var(--space-controlGap)",
+								backgroundColor: "var(--color-bg-sunken)",
+								borderRadius: "var(--radius-button)"
+							},
+							children: [/* @__PURE__ */ c("span", {
+								style: {
+									fontSize: "var(--font-size-body-sm)",
+									color: "var(--color-text-muted)"
+								},
+								children: "Preview:"
+							}), /* @__PURE__ */ c("button", {
+								type: "button",
+								style: {
+									padding: "var(--space-controlGap) var(--space-formGap)",
+									fontSize: "var(--font-size-body-sm)",
+									fontWeight: "var(--font-weight-medium)",
+									borderRadius: "var(--radius-button)",
+									backgroundColor: ((e) => x.find((t) => t.value === e)?.color || "var(--color-action-primary-bg)")(P),
+									color: "var(--color-action-primary-text)",
+									border: "none",
+									cursor: "default"
+								},
+								children: A || "Button"
+							})]
+						}),
+						/* @__PURE__ */ l("div", {
+							style: { marginBottom: "var(--space-formGap)" },
+							children: [/* @__PURE__ */ c("label", {
+								style: {
+									display: "block",
+									fontSize: "var(--font-size-body-sm)",
+									fontWeight: "var(--font-weight-semibold)",
+									color: "var(--color-text-primary)",
+									marginBottom: "var(--space-controlGap)"
+								},
+								children: "Icon"
+							}), /* @__PURE__ */ l(h, {
+								value: I,
+								onValueChange: L,
+								disabled: C,
+								children: [/* @__PURE__ */ c(v, {
+									style: {
+										height: "var(--size-controlHeight-md)",
+										fontSize: "var(--font-size-body-sm)"
+									},
+									children: /* @__PURE__ */ c(y, { placeholder: "No icon" })
+								}), /* @__PURE__ */ c(g, {
+									style: {
+										zIndex: 9999,
+										backgroundColor: "var(--color-overlay-popoverBg, var(--color-bg-surface, #ffffff))",
+										border: "1px solid var(--color-border)",
+										boxShadow: "var(--shadow-elevation-3)",
+										borderRadius: "var(--radius-button)",
+										maxHeight: "200px"
+									},
+									children: oe.map((e) => /* @__PURE__ */ c(_, {
+										value: e.value || "none",
+										children: e.label
+									}, e.value || "none"))
+								})]
+							})]
+						}),
+						/* @__PURE__ */ l("div", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "var(--space-sectionGap)",
+								marginBottom: "var(--space-formGap)"
+							},
+							children: [/* @__PURE__ */ l("label", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-controlGap)",
+									cursor: "pointer"
+								},
+								children: [/* @__PURE__ */ c(d, {
+									checked: R,
+									onCheckedChange: (e) => z(e === !0),
+									disabled: C
+								}), /* @__PURE__ */ c("span", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										color: "var(--color-text-primary)"
+									},
+									children: "Disabled"
+								})]
+							}), /* @__PURE__ */ l("label", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-controlGap)",
+									cursor: "pointer"
+								},
+								children: [/* @__PURE__ */ c(d, {
+									checked: B,
+									onCheckedChange: (e) => V(e === !0),
+									disabled: C
+								}), /* @__PURE__ */ c("span", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										color: "var(--color-text-primary)"
+									},
+									children: "Hidden"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ l("div", {
+							style: {
+								paddingTop: "var(--space-formGap)",
+								borderTop: "1px solid var(--color-border)"
+							},
+							children: [/* @__PURE__ */ l("label", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: "var(--space-controlGap)",
+									cursor: "pointer",
+									marginBottom: "var(--space-formGap)"
+								},
+								children: [/* @__PURE__ */ c(d, {
+									checked: H,
+									onCheckedChange: (e) => U(e === !0),
+									disabled: C
+								}), /* @__PURE__ */ c("span", {
+									style: {
+										fontSize: "var(--font-size-body-sm)",
+										fontWeight: "var(--font-weight-semibold)",
+										color: "var(--color-text-primary)"
+									},
+									children: "Require confirmation"
+								})]
+							}), H && /* @__PURE__ */ l("div", {
+								style: {
+									paddingLeft: "var(--space-formGap)",
+									borderLeft: "2px solid var(--color-border)",
+									display: "flex",
+									flexDirection: "column",
+									gap: "var(--space-controlGap)"
+								},
+								children: [
+									/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+										style: {
+											display: "block",
+											fontSize: "var(--font-size-body-sm)",
+											fontWeight: "var(--font-weight-medium)",
+											color: "var(--color-text-secondary)",
+											marginBottom: "var(--space-controlGap)"
+										},
+										children: "Dialog Title"
+									}), /* @__PURE__ */ c(m, {
+										value: W,
+										onChange: (e) => G(e.target.value),
+										disabled: C,
+										style: {
+											height: "var(--size-controlHeight-sm)",
+											fontSize: "var(--font-size-body-sm)"
+										}
+									})] }),
+									/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+										style: {
+											display: "block",
+											fontSize: "var(--font-size-body-sm)",
+											fontWeight: "var(--font-weight-medium)",
+											color: "var(--color-text-secondary)",
+											marginBottom: "var(--space-controlGap)"
+										},
+										children: "Message"
+									}), /* @__PURE__ */ c(ie, {
+										value: K,
+										onChange: (e) => q(e.target.value),
+										rows: 2,
+										disabled: C,
+										style: {
+											fontSize: "var(--font-size-body-sm)",
+											resize: "none"
+										}
+									})] }),
+									/* @__PURE__ */ l("div", {
+										style: {
+											display: "grid",
+											gridTemplateColumns: "1fr 1fr",
+											gap: "var(--space-controlGap)"
+										},
+										children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+											style: {
+												display: "block",
+												fontSize: "var(--font-size-body-sm)",
+												fontWeight: "var(--font-weight-medium)",
+												color: "var(--color-text-secondary)",
+												marginBottom: "var(--space-controlGap)"
+											},
+											children: "Confirm Button"
+										}), /* @__PURE__ */ c(m, {
+											value: J,
+											onChange: (e) => Y(e.target.value),
+											disabled: C,
+											style: {
+												height: "var(--size-controlHeight-sm)",
+												fontSize: "var(--font-size-body-sm)"
+											}
+										})] }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+											style: {
+												display: "block",
+												fontSize: "var(--font-size-body-sm)",
+												fontWeight: "var(--font-weight-medium)",
+												color: "var(--color-text-secondary)",
+												marginBottom: "var(--space-controlGap)"
+											},
+											children: "Cancel Button"
+										}), /* @__PURE__ */ c(m, {
+											value: X,
+											onChange: (e) => Z(e.target.value),
+											disabled: C,
+											style: {
+												height: "var(--size-controlHeight-sm)",
+												fontSize: "var(--font-size-body-sm)"
+											}
+										})] })]
+									})
+								]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ l(re, {
+					style: {
+						padding: "var(--space-formGap) var(--space-pagePadding)",
+						borderTop: "1px solid var(--color-border)",
+						backgroundColor: "var(--color-bg-sunken)",
+						display: "flex",
+						justifyContent: "flex-end",
+						gap: "var(--space-controlGap)"
+					},
+					children: [/* @__PURE__ */ c(u, {
+						type: "button",
+						variant: "outline",
+						onClick: w,
+						disabled: C,
+						style: { height: "var(--size-controlHeight-md)" },
+						children: "Cancel"
+					}), /* @__PURE__ */ c(u, {
+						type: "submit",
+						disabled: C || !O.trim() || !A.trim(),
+						style: {
+							height: "var(--size-controlHeight-md)",
+							backgroundColor: "var(--color-action-primary-bg)"
+						},
+						children: C ? /* @__PURE__ */ l("span", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "var(--space-iconGap)"
+							},
+							children: [/* @__PURE__ */ c(b, { style: {
+								height: "var(--size-icon-sm)",
+								width: "var(--size-icon-sm)"
+							} }), "Saving..."]
+						}) : /* @__PURE__ */ l("span", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: "var(--space-iconGap)"
+							},
+							children: [c(E ? a : o, { style: {
+								height: "var(--size-icon-sm)",
+								width: "var(--size-icon-sm)"
+							} }), E ? "Update Action" : "Add Action"]
+						})
+					})]
+				})]
+			})]
+		})
+	});
+});
+//#endregion
+export { S as default };
+
+//# sourceMappingURL=ActionConfigDialog.js.map