@middag-io/react 0.18.0 → 0.19.0

package/dist-lib/FormBuilderBlock-Yzy7KaAI.js

@@ -1,240 +0,0 @@
-import { n as e } from "./i18n-BMTYOmLT.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-DsdSKGdv.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 };