@middag-io/react 0.12.0 → 0.13.0

package/dist-lib/FormBuilderBlock-B_LPQ4oN.js

@@ -0,0 +1,240 @@
+import { n as e } from "./i18n-CP5eDOjK.js";
+import { _ as t, a as n, c as r, h as i, l as a, n as o, o as s, p as c, s as l, t as u, u as d, v as f } from "./sortable.esm-0nILrm98.js";
+import { useCallback as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region node_modules/@dnd-kit/modifiers/dist/modifiers.esm.js
+var _ = (e) => {
+	let { transform: t } = e;
+	return {
+		...t,
+		x: 0
+	};
+}, v = {
+	text: "Aa",
+	textarea: "≡",
+	select: "▾",
+	checkbox: "☑",
+	date: "📅",
+	file: "📎",
+	rating: "★",
+	email: "@",
+	number: "#"
+};
+function y(e) {
+	return v[e] ?? "?";
+}
+function b({ field: t, onRemove: n }) {
+	let { t: r } = e(), { attributes: i, listeners: a, setNodeRef: o, transform: c, transition: l, isDragging: u } = s({ id: t.id });
+	return /* @__PURE__ */ g("div", {
+		ref: o,
+		style: {
+			transform: c ? `translate3d(${String(c.x)}px, ${String(c.y)}px, 0)` : void 0,
+			transition: l ?? void 0,
+			opacity: u ? .4 : 1
+		},
+		className: `flex items-center gap-3 rounded-md border p-3 ${u ? "border-accent bg-background shadow-md" : "border-border bg-background"}`,
+		children: [
+			/* @__PURE__ */ h("button", {
+				type: "button",
+				className: "text-muted-foreground flex-none cursor-grab text-base leading-none select-none",
+				"aria-label": r("middag.ui.form_builder.drag_field"),
+				...i,
+				...a,
+				children: "⠇"
+			}),
+			/* @__PURE__ */ h("span", {
+				className: "bg-muted flex h-8 w-8 flex-none items-center justify-center rounded text-sm",
+				children: y(t.type)
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ h("span", {
+						className: "text-foreground truncate text-sm font-medium",
+						children: t.label
+					}),
+					t.required && /* @__PURE__ */ h("span", {
+						className: "text-destructive ml-0.5 text-sm",
+						"aria-label": r("middag.ui.form.required_label"),
+						children: "*"
+					}),
+					/* @__PURE__ */ h("span", {
+						className: "text-muted-foreground ml-2 text-xs",
+						children: t.type
+					})
+				]
+			}),
+			/* @__PURE__ */ h("button", {
+				type: "button",
+				onClick: () => {
+					n(t.id);
+				},
+				className: "text-muted-foreground hover:text-destructive flex h-6 w-6 flex-none items-center justify-center rounded text-sm transition-colors",
+				"aria-label": r("middag.ui.form_builder.remove_field"),
+				children: "×"
+			})
+		]
+	});
+}
+function x({ field: e }) {
+	return /* @__PURE__ */ g("div", {
+		className: "border-accent bg-background flex items-center gap-3 rounded-md border p-3 shadow-md",
+		children: [
+			/* @__PURE__ */ h("span", {
+				className: "text-muted-foreground flex-none text-base leading-none select-none",
+				children: "⠇"
+			}),
+			/* @__PURE__ */ h("span", {
+				className: "bg-muted flex h-8 w-8 flex-none items-center justify-center rounded text-sm",
+				children: y(e.type)
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ h("span", {
+					className: "text-foreground text-sm font-medium",
+					children: e.label
+				}), e.required && /* @__PURE__ */ h("span", {
+					className: "text-destructive ml-0.5 text-sm",
+					children: "*"
+				})]
+			})
+		]
+	});
+}
+function S({ field: e }) {
+	let t = /* @__PURE__ */ g("label", {
+		className: "text-foreground mb-1 block text-xs font-medium",
+		children: [e.label, e.required && /* @__PURE__ */ h("span", {
+			className: "text-destructive ml-0.5",
+			children: "*"
+		})]
+	});
+	switch (e.type) {
+		case "textarea": return /* @__PURE__ */ g("div", { children: [t, /* @__PURE__ */ h("div", { className: "border-border bg-background h-16 rounded-md border px-2 py-1 text-xs" })] });
+		case "select": return /* @__PURE__ */ g("div", { children: [t, /* @__PURE__ */ g("div", {
+			className: "border-border bg-background text-muted-foreground flex items-center justify-between rounded-md border px-2 py-1.5 text-xs",
+			children: [/* @__PURE__ */ h("span", { children: "Selecione..." }), /* @__PURE__ */ h("span", {
+				className: "text-[10px]",
+				children: "▾"
+			})]
+		})] });
+		case "checkbox": return /* @__PURE__ */ g("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ h("div", { className: "border-border h-4 w-4 rounded border" }), /* @__PURE__ */ h("span", {
+				className: "text-foreground text-xs",
+				children: e.label
+			})]
+		});
+		case "rating": return /* @__PURE__ */ g("div", { children: [t, /* @__PURE__ */ h("div", {
+			className: "flex gap-1",
+			children: [
+				1,
+				2,
+				3,
+				4,
+				5
+			].map((e) => /* @__PURE__ */ h("span", {
+				className: "text-muted-foreground/40 text-sm",
+				children: "★"
+			}, e))
+		})] });
+		case "file": return /* @__PURE__ */ g("div", { children: [t, /* @__PURE__ */ h("div", {
+			className: "border-border text-muted-foreground flex items-center justify-center rounded-md border border-dashed px-2 py-3 text-xs",
+			children: "Clique ou arraste um arquivo"
+		})] });
+		default: return /* @__PURE__ */ g("div", { children: [t, /* @__PURE__ */ h("div", {
+			className: "border-border bg-background rounded-md border px-2 py-1.5 text-xs",
+			children: e.placeholder ? /* @__PURE__ */ h("span", {
+				className: "text-muted-foreground",
+				children: e.placeholder
+			}) : /* @__PURE__ */ h("span", { children: "\xA0" })
+		})] });
+	}
+}
+function C({ block: s }) {
+	let { t: v } = e(), { data: y } = s, [C, w] = m(y.fields), [T, E] = m(null), D = f(t(c, { activationConstraint: { distance: 5 } }), t(d, { coordinateGetter: n })), O = p((e) => {
+		E(String(e.active.id));
+	}, []), k = p((e) => {
+		E(null);
+		let { active: t, over: n } = e;
+		n && t.id !== n.id && w((e) => o(e, e.findIndex((e) => e.id === t.id), e.findIndex((e) => e.id === n.id)));
+	}, []), A = p((e) => {
+		w((t) => t.filter((t) => t.id !== e));
+	}, []), j = T ? C.find((e) => e.id === T) : null;
+	return /* @__PURE__ */ g("div", {
+		className: "flex min-h-[400px] gap-4",
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "w-[200px] flex-none",
+				children: [/* @__PURE__ */ h("h3", {
+					className: "text-foreground mb-3 text-sm font-semibold",
+					children: "Campos Disponíveis"
+				}), /* @__PURE__ */ h("div", {
+					className: "grid grid-cols-2 gap-2",
+					children: y.availableTypes.map((e) => /* @__PURE__ */ g("div", {
+						className: "bg-background hover:border-accent cursor-grab rounded-md border p-2 text-center text-xs transition-colors",
+						children: [/* @__PURE__ */ h("div", {
+							className: "mb-1 text-base leading-none",
+							children: e.icon
+						}), /* @__PURE__ */ h("span", {
+							className: "text-foreground",
+							children: e.label
+						})]
+					}, e.type))
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "min-w-0 flex-1",
+				children: [/* @__PURE__ */ g("div", {
+					className: "mb-3 flex items-center justify-between",
+					children: [/* @__PURE__ */ h("h3", {
+						className: "text-foreground text-sm font-semibold",
+						children: "Campos do Formulário"
+					}), /* @__PURE__ */ g("span", {
+						className: "text-muted-foreground text-xs",
+						children: [
+							C.length,
+							" ",
+							C.length === 1 ? "campo" : "campos"
+						]
+					})]
+				}), /* @__PURE__ */ g(r, {
+					sensors: D,
+					collisionDetection: i,
+					modifiers: [_],
+					onDragStart: O,
+					onDragEnd: k,
+					children: [/* @__PURE__ */ h(u, {
+						items: C.map((e) => e.id),
+						strategy: l,
+						children: C.length > 0 ? /* @__PURE__ */ h("div", {
+							className: "space-y-2",
+							children: C.map((e) => /* @__PURE__ */ h(b, {
+								field: e,
+								onRemove: A
+							}, e.id))
+						}) : /* @__PURE__ */ h("div", {
+							className: "border-border text-muted-foreground flex min-h-[200px] items-center justify-center rounded-lg border border-dashed text-sm",
+							children: v("middag.ui.form_builder.drop_hint")
+						})
+					}), /* @__PURE__ */ h(a, { children: j ? /* @__PURE__ */ h(x, { field: j }) : null })]
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "w-[280px] flex-none",
+				children: [/* @__PURE__ */ h("h3", {
+					className: "text-foreground mb-3 text-sm font-semibold",
+					children: v("middag.ui.form_builder.preview")
+				}), /* @__PURE__ */ h("div", {
+					className: "bg-muted/30 space-y-3 rounded-lg border p-4",
+					children: C.length > 0 ? C.map((e) => /* @__PURE__ */ h(S, { field: e }, e.id)) : /* @__PURE__ */ h("p", {
+						className: "text-muted-foreground text-center text-xs",
+						children: v("middag.ui.form_builder.no_fields")
+					})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { C as FormBuilderBlock };