@rytass/bpm-core-react 0.4.0 → 0.5.0

package/dist/chunks/FormBuilderView-D8DrQOXD.js

@@ -0,0 +1,1090 @@
+"use client";
+import { t as e } from "./bpm-form-field-Cao0rMol.js";
+import { t } from "./FormRendererView-DrHsuSVo.js";
+import { useEffect as n, useMemo as r, useState as i } from "react";
+import { Accordion as a, Badge as o, BaseCard as s, Button as c, DatePicker as l, DateTimePicker as u, Icon as d, Input as f, Section as ee, SectionGroup as te, Select as p, Tab as ne, TabItem as m, Table as re, Textarea as ie, Toggle as ae, Typography as h } from "@mezzanine-ui/react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { AlignLeftIcon as oe, CalendarIcon as y, CheckedIcon as se, CheckedOutlineIcon as b, CurrencyDollarIcon as x, DotDragVerticalIcon as ce, DotGridIcon as S, FileAttachmentIcon as C, FileIcon as w, ListIcon as le, PlusIcon as ue, TrashIcon as de } from "@mezzanine-ui/icons";
+import { buildConditionExpression as T, buildFormRendererValues as fe, clampOptionalNumber as pe, createFieldDefinition as me, formatDatePickerValue as he, formatDateTimePickerValue as ge, isDateFieldDefinition as E, isNumberFieldDefinition as D, isSelectFieldDefinition as O, parseConditionRule as _e, parseOptionalNumberInput as ve, readConditionOperatorOption as ye, readConditionOperatorOptions as be, readDatePickerValue as xe, readDefaultConditionOperator as k, readDefaultConditionValue as A, readFieldOptionAsSelectOption as j, readSelectOption as M } from "@rytass/bpm-core-client/form";
+import { DragDropContext as Se, Draggable as Ce, Droppable as we } from "@hello-pangea/dnd";
+import N from "next/dynamic";
+import { json as Te } from "@codemirror/lang-json";
+import { EditorView as P } from "@codemirror/view";
+//#region src/views/forms/builder/json-code-editor.tsx
+var Ee = {
+	alignItems: "center",
+	border: "1px solid var(--mzn-color-border-neutral)",
+	borderRadius: 4,
+	color: "var(--mzn-color-text-neutral)",
+	display: "flex",
+	minHeight: 160,
+	padding: 12,
+	width: "100%"
+}, F = [
+	Te(),
+	P.lineWrapping,
+	P.theme({
+		"&": {
+			border: "1px solid var(--mzn-color-border-neutral)",
+			borderRadius: "4px",
+			fontSize: "13px",
+			width: "100%"
+		},
+		"&.cm-focused": { outline: "1px solid var(--mzn-color-border-primary)" },
+		".cm-content": {
+			fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
+			minHeight: "100%"
+		},
+		".cm-editor": { width: "100%" },
+		".cm-gutters": { borderRight: "1px solid var(--mzn-color-border-neutral)" },
+		".cm-scroller": { fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace" }
+	})
+], I = N(() => import("@uiw/react-codemirror"), {
+	loading: () => /* @__PURE__ */ _("div", {
+		style: Ee,
+		children: "載入 JSON 編輯器"
+	}),
+	ssr: !1
+});
+function De({ disabled: e = !1, height: t, name: n, onChange: r, placeholder: i, value: a }) {
+	return /* @__PURE__ */ _(I, {
+		"aria-label": n,
+		basicSetup: {
+			autocompletion: !0,
+			bracketMatching: !0,
+			closeBrackets: !0,
+			defaultKeymap: !0,
+			foldGutter: !0,
+			highlightActiveLine: !0,
+			highlightSelectionMatches: !0,
+			lineNumbers: !0,
+			syntaxHighlighting: !0
+		},
+		editable: !e,
+		extensions: [...F],
+		height: t,
+		indentWithTab: !1,
+		onChange: r,
+		placeholder: i,
+		readOnly: e,
+		theme: "light",
+		value: a,
+		width: "100%"
+	});
+}
+//#endregion
+//#region src/views/forms/builder/FormBuilderView.tsx
+var Oe = [
+	{
+		description: "單行文字、姓名、編號",
+		icon: oe,
+		label: "文字",
+		type: "text"
+	},
+	{
+		description: "多行補充內容",
+		icon: w,
+		label: "長文字",
+		type: "textarea"
+	},
+	{
+		description: "金額、數量、分數",
+		icon: x,
+		label: "數字",
+		type: "number"
+	},
+	{
+		description: "金額與費用",
+		icon: x,
+		label: "金額",
+		type: "money"
+	},
+	{
+		description: "日期或到期日",
+		icon: y,
+		label: "日期",
+		type: "date"
+	},
+	{
+		description: "日期與時間",
+		icon: y,
+		label: "日期時間",
+		type: "datetime"
+	},
+	{
+		description: "是 / 否狀態",
+		icon: se,
+		label: "開關",
+		type: "boolean"
+	},
+	{
+		description: "固定選項擇一",
+		icon: le,
+		label: "下拉選單",
+		type: "select"
+	},
+	{
+		description: "固定選項單選",
+		icon: S,
+		label: "單選",
+		type: "radio"
+	},
+	{
+		description: "固定選項複選",
+		icon: b,
+		label: "複選",
+		type: "checkbox"
+	},
+	{
+		description: "附件或佐證資料",
+		icon: C,
+		label: "附件",
+		type: "file_upload"
+	}
+], ke = {
+	alignItems: "start",
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 16
+}, Ae = {
+	flex: "0.55 1 300px",
+	minWidth: 0
+}, je = {
+	flex: "1.45 1 720px",
+	minWidth: 620
+}, L = {
+	display: "grid",
+	gap: 12
+}, Me = {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 6
+}, Ne = {
+	flex: "0 0 auto",
+	whiteSpace: "nowrap"
+}, Pe = {
+	display: "grid",
+	gap: 8
+}, Fe = {
+	alignItems: "center",
+	cursor: "grab",
+	display: "flex",
+	gap: 12,
+	touchAction: "none"
+}, Ie = {
+	display: "grid",
+	flex: "1 1 auto",
+	gap: 2,
+	minWidth: 0
+}, Le = {
+	alignItems: "center",
+	display: "flex",
+	flex: "0 0 auto",
+	gap: 4
+}, Re = {
+	alignItems: "center",
+	display: "flex",
+	gap: 6
+}, ze = {
+	cursor: "pointer",
+	userSelect: "none"
+}, Be = { filter: "drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12))" }, Ve = {
+	backgroundColor: "color-mix(in srgb, var(--mzn-color-primary) 8%, var(--mzn-color-bg-surface))",
+	boxShadow: "inset 0 0 0 1px var(--mzn-color-border-primary)"
+}, He = {
+	alignItems: "center",
+	border: "1px dashed var(--mzn-color-border-neutral)",
+	borderRadius: 6,
+	display: "grid",
+	gap: 12,
+	minHeight: 240,
+	padding: 32,
+	textAlign: "center"
+}, Ue = {
+	display: "flex",
+	gap: 8,
+	justifyContent: "center"
+}, We = {
+	display: "grid",
+	gap: 14
+}, Ge = {
+	display: "grid",
+	columnGap: 16,
+	gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+	rowGap: 8
+}, Ke = { gridColumn: "1 / -1" }, qe = {
+	alignItems: "center",
+	display: "flex",
+	gap: 8,
+	gridColumn: "1 / -1",
+	justifyContent: "flex-end"
+}, Je = { gridColumn: "1 / -1" }, Ye = {
+	alignItems: "start",
+	display: "block",
+	width: "100%"
+}, Xe = {
+	...Ye,
+	gridColumn: "1 / -1"
+}, Ze = {
+	minWidth: 0,
+	width: "100%"
+}, Qe = {
+	minWidth: "100%",
+	width: "100%"
+}, $e = {
+	display: "grid",
+	gap: 14
+}, et = {
+	alignItems: "start",
+	display: "block",
+	width: "100%"
+}, tt = {
+	minWidth: 0,
+	width: "100%"
+}, nt = { gridColumn: "2 / -1" }, rt = {
+	display: "grid",
+	gap: 10,
+	width: "100%"
+}, it = {
+	display: "grid",
+	gap: 8,
+	gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))"
+}, at = { display: "inline-flex" }, ot = {
+	display: "grid",
+	gap: 16
+}, st = {
+	display: "grid",
+	gap: 8
+}, ct = {
+	display: "flex",
+	justifyContent: "flex-end"
+}, lt = {
+	color: "var(--mzn-color-text-error)",
+	fontSize: "0.72em",
+	lineHeight: 0,
+	marginLeft: 2,
+	verticalAlign: "super"
+};
+function ut(e) {
+	e && (e.style.width = "100%");
+}
+var dt = {
+	fields: [],
+	schemaVersion: 1
+}, ft = {
+	layout: [],
+	schemaVersion: 1
+}, pt = [
+	{
+		id: "unset",
+		name: "不預設"
+	},
+	{
+		id: "true",
+		name: "是"
+	},
+	{
+		id: "false",
+		name: "否"
+	}
+], mt = [{
+	id: "true",
+	name: "是"
+}, {
+	id: "false",
+	name: "否"
+}], ht = [
+	{
+		label: "顯示",
+		name: "fieldVisibleWhen",
+		supportingText: "符合條件時才顯示這個欄位。",
+		target: "visibleWhen"
+	},
+	{
+		label: "必填",
+		name: "fieldRequiredWhen",
+		supportingText: "符合條件時才要求填寫這個欄位。",
+		target: "requiredWhen"
+	},
+	{
+		label: "唯讀",
+		name: "fieldReadonlyWhen",
+		supportingText: "符合條件時不允許修改這個欄位。",
+		target: "readonlyWhen"
+	}
+];
+function R({ onChange: oe, value: y }) {
+	let se = y?.schema ?? dt, b = y?.uiSchema ?? ft, [x, S] = i(se), [C, w] = i(b), [le, N] = i(B(se)), [Te, P] = i(B(b)), [Ee, F] = i({}), [I, R] = i(null), [V, Tt] = i("design"), [H, U] = i(null);
+	n(() => {
+		x.fields.some((e) => e.fieldKey === H) || U(x.fields[0]?.fieldKey ?? null);
+	}, [x.fields, H]), n(() => {
+		F((e) => fe(x.fields, e));
+	}, [x.fields]), n(() => {
+		V !== "advanced" && (N(B(x)), P(B(C)));
+	}, [
+		V,
+		x,
+		C
+	]);
+	let W = r(() => x.fields.find((e) => e.fieldKey === H) ?? x.fields[0] ?? null, [x.fields, H]);
+	n(() => {
+		oe?.({
+			schema: x,
+			uiSchema: C
+		});
+	}, [x, C]);
+	function G(e) {
+		let t = me(e, x.fields.length + 1);
+		S({
+			...x,
+			fields: [...x.fields, t]
+		}), w({
+			...C,
+			layout: [...C.layout, {
+				fieldKey: t.fieldKey,
+				width: e === "textarea" || e === "file_upload" ? "FULL" : "HALF"
+			}]
+		}), U(t.fieldKey), Tt("design"), R(null);
+	}
+	function Et(e) {
+		let t = e;
+		t === "advanced" && V !== "advanced" && (N(B(x)), P(B(C))), Tt(t);
+	}
+	function Dt(e) {
+		let t = x.fields.filter((t) => t.fieldKey !== e);
+		S({
+			...x,
+			fields: t
+		}), w({
+			...C,
+			layout: C.layout.filter((t) => t.fieldKey !== e)
+		}), U(H === e ? t[0]?.fieldKey ?? null : H), R(null);
+	}
+	function Ot(e) {
+		let t = e.destination;
+		t && e.source.index !== t.index && (S((n) => ({
+			...n,
+			fields: wt(n.fields, e.source.index, t.index)
+		})), w((n) => ({
+			...n,
+			layout: wt(n.layout, e.source.index, t.index)
+		})), R(null));
+	}
+	function K(e) {
+		q((t) => ({
+			...t,
+			...e
+		}));
+	}
+	function q(e) {
+		if (!W) return;
+		let t = W.fieldKey, n = e(W), r = n.fieldKey;
+		S({
+			...x,
+			fields: x.fields.map((e) => e.fieldKey === t ? n : e)
+		}), w({
+			...C,
+			layout: C.layout.map((e) => e.fieldKey === t ? {
+				...e,
+				fieldKey: r
+			} : e)
+		}), U(r), R(null);
+	}
+	function J(e) {
+		q((t) => yt(t) ? {
+			...t,
+			...e
+		} : t);
+	}
+	function Y(e) {
+		q((t) => D(t) ? {
+			...t,
+			...e
+		} : t);
+	}
+	function kt(e) {
+		q((t) => E(t) ? {
+			...t,
+			...e
+		} : t);
+	}
+	function X(e) {
+		q((t) => O(t) ? {
+			...t,
+			...e
+		} : t);
+	}
+	function At(e) {
+		q((t) => t.type === "boolean" ? {
+			...t,
+			...e
+		} : t);
+	}
+	function jt(e) {
+		q((t) => t.type === "file_upload" ? {
+			...t,
+			...e
+		} : t);
+	}
+	function Mt(e) {
+		F(e);
+	}
+	function Nt(e, t) {
+		S((n) => ({
+			...n,
+			fields: n.fields.map((n) => n.fieldKey === e ? {
+				...n,
+				required: t
+			} : n)
+		})), R(null);
+	}
+	function Pt(e) {
+		N(e);
+		try {
+			S(JSON.parse(e)), R(null);
+		} catch {
+			R("Form Schema JSON 格式不正確");
+		}
+	}
+	function Ft(e) {
+		P(e);
+		try {
+			w(JSON.parse(e)), R(null);
+		} catch {
+			R("UI Schema JSON 格式不正確");
+		}
+	}
+	return /* @__PURE__ */ _(g, { children: /* @__PURE__ */ _(g, { children: /* @__PURE__ */ _(te, { children: /* @__PURE__ */ _(ee, { children: /* @__PURE__ */ v("div", {
+		style: ot,
+		children: [
+			/* @__PURE__ */ v(ne, {
+				activeKey: V,
+				onChange: Et,
+				size: "sub",
+				children: [
+					/* @__PURE__ */ _(m, { children: "設計" }, "design"),
+					/* @__PURE__ */ _(m, { children: "預覽" }, "preview"),
+					/* @__PURE__ */ _(m, { children: "進階" }, "advanced")
+				]
+			}),
+			V === "design" ? It() : null,
+			V === "preview" ? tn() : null,
+			V === "advanced" ? nn() : null
+		]
+	}) }) }) }) });
+	function It() {
+		return /* @__PURE__ */ v("div", {
+			style: L,
+			children: [/* @__PURE__ */ v("div", {
+				style: Pe,
+				children: [/* @__PURE__ */ _(h, {
+					component: "h2",
+					variant: "label-primary",
+					children: "新增欄位"
+				}), /* @__PURE__ */ _("div", {
+					style: Me,
+					children: Oe.map((e) => /* @__PURE__ */ _(c, {
+						icon: e.icon,
+						iconType: "leading",
+						onClick: () => G(e.type),
+						size: "sub",
+						style: Ne,
+						type: "button",
+						variant: "base-secondary",
+						children: e.label
+					}, e.type))
+				})]
+			}), /* @__PURE__ */ v("div", {
+				style: ke,
+				children: [/* @__PURE__ */ v("div", {
+					style: {
+						...L,
+						...Ae
+					},
+					children: [/* @__PURE__ */ _(h, {
+						component: "h2",
+						variant: "label-primary",
+						children: "表單畫布"
+					}), x.fields.length > 0 ? /* @__PURE__ */ _(Se, {
+						onDragEnd: Ot,
+						children: /* @__PURE__ */ _(we, {
+							droppableId: "form-builder-fields",
+							children: (e) => /* @__PURE__ */ v("div", {
+								...e.droppableProps,
+								ref: e.innerRef,
+								style: L,
+								children: [x.fields.map((e, t) => /* @__PURE__ */ _(Ce, {
+									draggableId: e.fieldKey,
+									index: t,
+									children: (t, n) => $t(e, t, n.isDragging)
+								}, e.fieldKey)), e.placeholder]
+							})
+						})
+					}) : /* @__PURE__ */ v("div", {
+						style: He,
+						children: [/* @__PURE__ */ v("div", {
+							style: L,
+							children: [/* @__PURE__ */ _(h, {
+								component: "h3",
+								variant: "h3",
+								children: "尚未建立欄位"
+							}), /* @__PURE__ */ _(h, {
+								color: "text-neutral",
+								variant: "body",
+								children: "從上方新增第一個欄位，或直接建立常用文字欄位開始設計。"
+							})]
+						}), /* @__PURE__ */ v("div", {
+							style: Ue,
+							children: [/* @__PURE__ */ _(c, {
+								onClick: () => G("text"),
+								variant: "base-primary",
+								children: "新增文字欄位"
+							}), /* @__PURE__ */ _(c, {
+								onClick: () => G("textarea"),
+								variant: "base-secondary",
+								children: "新增長文字"
+							})]
+						})]
+					})]
+				}), /* @__PURE__ */ v("div", {
+					style: {
+						...L,
+						...je
+					},
+					children: [/* @__PURE__ */ _(h, {
+						component: "h2",
+						variant: "label-primary",
+						children: "欄位設定"
+					}), W ? Lt(W) : /* @__PURE__ */ _(h, {
+						color: "text-neutral",
+						variant: "body",
+						children: "請先新增或選取欄位。"
+					})]
+				})]
+			})]
+		});
+	}
+	function Lt(e) {
+		return /* @__PURE__ */ v("div", {
+			style: We,
+			children: [Rt(e), zt(e)]
+		});
+	}
+	function Rt(e) {
+		return /* @__PURE__ */ v("div", {
+			style: Ge,
+			children: [
+				/* @__PURE__ */ _("div", {
+					style: qe,
+					children: /* @__PURE__ */ _(o, {
+						size: "main",
+						text: gt(e.type),
+						variant: "text-info"
+					})
+				}),
+				$("標題", "fieldLabel", /* @__PURE__ */ _(f, {
+					onChange: (e) => K({ label: e.target.value }),
+					placeholder: "例如：申請金額",
+					value: e.label,
+					variant: "base"
+				})),
+				$("欄位 Key", "fieldKey", /* @__PURE__ */ _(f, {
+					onChange: (e) => K({ fieldKey: e.target.value }),
+					placeholder: "例如：amount",
+					value: e.fieldKey,
+					variant: "base"
+				})),
+				$("提示文字", "fieldPlaceholder", /* @__PURE__ */ _(f, {
+					onChange: (e) => K({ placeholder: e.target.value || void 0 }),
+					placeholder: "例如：請輸入申請金額",
+					value: e.placeholder ?? "",
+					variant: "base"
+				})),
+				Bt(e)
+			]
+		});
+	}
+	function zt(e) {
+		return /* @__PURE__ */ _(a, {
+			defaultExpanded: _t(e),
+			size: "sub",
+			title: "進階設定",
+			children: /* @__PURE__ */ v("div", {
+				style: Ge,
+				children: [
+					/* @__PURE__ */ _(h, {
+						component: "h3",
+						style: Ke,
+						variant: "label-primary",
+						children: "條件規則"
+					}),
+					/* @__PURE__ */ _(h, {
+						color: "text-neutral",
+						style: Je,
+						variant: "body",
+						children: "只有需要根據其他欄位改變顯示、必填或唯讀狀態時才需要設定。"
+					}),
+					qt(e)
+				]
+			})
+		});
+	}
+	function Bt(e) {
+		return yt(e) ? Vt(e) : D(e) ? Ht(e) : E(e) ? Ut(e) : O(e) ? Wt(e) : e.type === "boolean" ? Gt(e) : Kt(e);
+	}
+	function Vt(e) {
+		return /* @__PURE__ */ v(g, { children: [
+			$("預設值", "fieldDefaultValue", e.type === "textarea" ? Xt({
+				name: "fieldDefaultValue",
+				onChange: (e) => J({ defaultValue: e || void 0 }),
+				placeholder: "輸入此欄位的預設文字",
+				rows: 3,
+				value: z(e.defaultValue)
+			}) : /* @__PURE__ */ _(f, {
+				onChange: (e) => J({ defaultValue: e.target.value || void 0 }),
+				placeholder: "輸入此欄位的預設文字",
+				value: z(e.defaultValue),
+				variant: "base"
+			})),
+			$("最小長度", "fieldMinLength", Q(e.minLength, (e) => J({ minLength: e }), "例如：2", { min: 0 })),
+			$("最大長度", "fieldMaxLength", Q(e.maxLength, (e) => J({ maxLength: e }), "例如：100", { min: 1 }))
+		] });
+	}
+	function Ht(e) {
+		return /* @__PURE__ */ v(g, { children: [
+			$("預設值", "fieldDefaultValue", Q(typeof e.defaultValue == "number" ? e.defaultValue : void 0, (e) => Y({ defaultValue: e }), e.type === "money" ? "例如：1000" : "輸入預設數值", {
+				max: e.maximum,
+				min: e.minimum
+			})),
+			$("最小值", "fieldMinimum", Q(e.minimum, (e) => Y({ minimum: e }), "例如：0")),
+			$("最大值", "fieldMaximum", Q(e.maximum, (e) => Y({ maximum: e }), "例如：999999"))
+		] });
+	}
+	function Ut(e) {
+		return $("預設值", "fieldDefaultValue", Zt(e, z(e.defaultValue), (e) => kt({ defaultValue: e })));
+	}
+	function Wt(e) {
+		let t = Array.isArray(e.defaultValue) ? e.defaultValue : [], n = e.options.filter((e) => t.includes(e.value)).map(j);
+		return /* @__PURE__ */ v(g, { children: [$("預設值", "fieldDefaultValue", e.type === "checkbox" ? /* @__PURE__ */ _(p, {
+			clearable: !0,
+			mode: "multiple",
+			onChange: (e) => X({ defaultValue: e.length ? e.map((e) => e.id) : void 0 }),
+			options: e.options.map(j),
+			placeholder: "選擇一或多個預設選項",
+			value: n
+		}) : /* @__PURE__ */ _(p, {
+			clearable: !0,
+			onChange: (e) => X({ defaultValue: e?.id || void 0 }),
+			options: e.options.map(j),
+			placeholder: "選擇預設選項",
+			value: typeof e.defaultValue == "string" ? M(e.options.map(j), e.defaultValue) : null
+		})), $("選項", "fieldOptions", Qt(e), !0)] });
+	}
+	function Gt(e) {
+		let t = typeof e.defaultValue == "boolean" ? String(e.defaultValue) : "unset";
+		return $("預設值", "fieldDefaultValue", /* @__PURE__ */ _(p, {
+			clearable: !1,
+			onChange: (e) => At({ defaultValue: e?.id === "true" ? !0 : e?.id === "false" ? !1 : void 0 }),
+			options: [...pt],
+			placeholder: "選擇預設狀態",
+			value: M(pt, t)
+		}));
+	}
+	function Kt(e) {
+		return /* @__PURE__ */ v(g, { children: [$("檔案數", "fieldMaxFiles", Q(e.maxFiles, (e) => jt({ maxFiles: e }), "例如：1", { min: 1 })), $("MIME", "fieldAcceptedMimeTypes", Xt({
+			name: "fieldAcceptedMimeTypes",
+			onChange: (e) => jt({ acceptedMimeTypes: bt(e) }),
+			placeholder: "每行一個 MIME type，例如：application/pdf",
+			rows: 3,
+			value: xt(e.acceptedMimeTypes)
+		}), !1)] });
+	}
+	function qt(e) {
+		let t = x.fields.filter((t) => t.fieldKey !== e.fieldKey);
+		return t.length ? /* @__PURE__ */ _(g, { children: ht.map((n) => Jt(e, n, t)) }) : /* @__PURE__ */ _(h, {
+			color: "text-neutral",
+			style: Je,
+			variant: "body",
+			children: "目前沒有其他欄位可作為條件來源。新增更多欄位後即可設定條件規則。"
+		});
+	}
+	function Jt(e, t, n) {
+		let r = e[t.target], i = r ? _e(r) : null, a = n.find((e) => e.fieldKey === i?.fieldKey), o = a ?? n[0], s = n.map(vt), c = be(o), l = i && c.some((e) => e.id === i.operator) ? i.operator : k(o), u = i?.value ?? A(o), d = !!r, f = d && (!i || !a);
+		return $(t.label, t.name, /* @__PURE__ */ v("div", {
+			style: rt,
+			children: [/* @__PURE__ */ _(ae, {
+				checked: d,
+				label: d ? "已啟用" : "不啟用",
+				onChange: (e) => Z(t.target, e.target.checked ? T(o, k(o), A(o)) : void 0),
+				size: "sub",
+				supportingText: t.supportingText
+			}), d ? f ? /* @__PURE__ */ _(h, {
+				color: "text-warning",
+				variant: "body",
+				children: "這個規則不是目前 UI 支援的格式。重新選擇條件後會取代既有規則。"
+			}) : /* @__PURE__ */ v("div", {
+				style: it,
+				children: [
+					/* @__PURE__ */ _(p, {
+						clearable: !1,
+						onChange: (e) => {
+							let r = n.find((t) => t.fieldKey === e?.id) ?? o;
+							Z(t.target, T(r, k(r), A(r)));
+						},
+						options: s,
+						placeholder: "選擇欄位",
+						value: M(s, o.fieldKey)
+					}),
+					/* @__PURE__ */ _(p, {
+						clearable: !1,
+						onChange: (e) => Z(t.target, T(o, ye(e?.id) ?? l, u)),
+						options: [...c],
+						placeholder: "判斷方式",
+						value: M(c, l)
+					}),
+					Yt(o, u, (e) => Z(t.target, T(o, l, e)))
+				]
+			}) : null]
+		}), !0);
+	}
+	function Z(e, t) {
+		K({ [e]: t });
+	}
+	function Yt(e, t, n) {
+		if (e.type === "boolean") return /* @__PURE__ */ _(p, {
+			clearable: !1,
+			onChange: (e) => n(e?.id ?? "true"),
+			options: [...mt],
+			placeholder: "比較值",
+			value: M(mt, t === "false" ? "false" : "true")
+		});
+		if (O(e)) {
+			let r = e.options.map(j);
+			return /* @__PURE__ */ _(p, {
+				clearable: !1,
+				onChange: (e) => n(e?.id ?? r[0]?.id ?? ""),
+				options: r,
+				placeholder: "比較值",
+				value: M(r, t)
+			});
+		}
+		return D(e) ? Q(ve(t), (e) => n(String(e ?? 0)), "比較值") : E(e) ? Zt(e, t, (e) => n(e ?? "")) : /* @__PURE__ */ _(f, {
+			onChange: (e) => n(e.target.value),
+			placeholder: "比較值",
+			value: t,
+			variant: "base"
+		});
+	}
+	function Xt({ name: e, onChange: t, placeholder: n, rows: r, value: i }) {
+		return /* @__PURE__ */ _(ie, {
+			"aria-label": e,
+			onChange: (e) => t(e.target.value),
+			placeholder: n,
+			ref: ut,
+			resize: "vertical",
+			rows: r,
+			style: Qe,
+			value: i
+		});
+	}
+	function Q(e, t, n, r = {}) {
+		return /* @__PURE__ */ _(f, {
+			max: r.max,
+			min: r.min,
+			onChange: (e) => t(pe(ve(e.target.value), r)),
+			placeholder: n,
+			showSpinner: !0,
+			step: r.step ?? 1,
+			value: typeof e == "number" ? String(e) : "",
+			variant: "measure"
+		});
+	}
+	function Zt(e, t, n) {
+		return e.type === "datetime" ? /* @__PURE__ */ _(u, {
+			formatDate: "YYYY-MM-DD",
+			formatTime: "HH:mm",
+			hideSecond: !0,
+			onChange: (e) => n(ge(e)),
+			placeholderLeft: "選擇日期",
+			placeholderRight: "選擇時間",
+			value: xe(t)
+		}) : /* @__PURE__ */ _(l, {
+			format: "YYYY-MM-DD",
+			onChange: (e) => n(he(e)),
+			placeholder: "選擇日期",
+			value: xe(t)
+		});
+	}
+	function Qt(e) {
+		return /* @__PURE__ */ v("div", {
+			style: st,
+			children: [/* @__PURE__ */ _(re, {
+				actions: {
+					render: (t) => [{
+						disabled: () => e.options.length <= 1,
+						icon: de,
+						iconType: "icon-only",
+						name: "移除選項",
+						onClick: () => X({ options: e.options.filter((e, n) => n !== t.index) }),
+						variant: "destructive-ghost"
+					}],
+					width: 56
+				},
+				columns: [{
+					key: "label",
+					render: (t) => /* @__PURE__ */ _(f, {
+						onChange: (n) => X({ options: St(e.options, t.index, { label: n.target.value }) }),
+						placeholder: "例如：主管",
+						size: "sub",
+						value: t.label,
+						variant: "base"
+					}),
+					title: "Label"
+				}, {
+					key: "value",
+					render: (t) => /* @__PURE__ */ _(f, {
+						onChange: (n) => X({ options: St(e.options, t.index, { value: n.target.value }) }),
+						placeholder: "例如：manager",
+						size: "sub",
+						value: t.value,
+						variant: "base"
+					}),
+					title: "Value"
+				}],
+				dataSource: e.options.map((t, n) => ({
+					index: n,
+					key: `${e.fieldKey}-${n}`,
+					label: t.label,
+					value: t.value
+				})),
+				showHeader: !0,
+				size: "sub"
+			}), /* @__PURE__ */ _("div", {
+				style: ct,
+				children: /* @__PURE__ */ _(c, {
+					icon: ue,
+					iconType: "leading",
+					onClick: () => X({ options: [...e.options, Ct(e.options)] }),
+					variant: "base-secondary",
+					children: "新增選項"
+				})
+			})]
+		});
+	}
+	function $t(e, t, n) {
+		return /* @__PURE__ */ _("div", {
+			...t.draggableProps,
+			"data-form-builder-field-key": e.fieldKey,
+			ref: t.innerRef,
+			style: {
+				...ze,
+				...n ? Be : null,
+				...t.draggableProps.style
+			},
+			children: /* @__PURE__ */ _(s, {
+				style: e.fieldKey === W?.fieldKey ? Ve : void 0,
+				children: en(e, t, n)
+			})
+		});
+	}
+	function $(t, n, r, i = !1) {
+		return /* @__PURE__ */ _("div", {
+			style: i ? Xe : Ye,
+			children: /* @__PURE__ */ _("div", {
+				style: Ze,
+				children: /* @__PURE__ */ _(e, {
+					label: t,
+					name: n,
+					children: r
+				})
+			})
+		});
+	}
+	function en(e, t, n) {
+		return /* @__PURE__ */ v("div", {
+			...t.dragHandleProps ?? {},
+			"aria-label": "選取或拖曳排序欄位",
+			onClick: () => U(e.fieldKey),
+			style: Fe,
+			title: "點擊選取，拖曳排序",
+			children: [
+				/* @__PURE__ */ _("span", {
+					"aria-label": "拖曳排序",
+					role: "img",
+					style: at,
+					title: "拖曳排序",
+					children: /* @__PURE__ */ _(d, {
+						icon: ce,
+						size: 20
+					})
+				}),
+				/* @__PURE__ */ v("div", {
+					style: Ie,
+					children: [/* @__PURE__ */ v(h, {
+						component: "span",
+						ellipsis: !0,
+						variant: "label-primary",
+						children: [e.label, e.required ? /* @__PURE__ */ _("sup", {
+							"aria-label": "必填",
+							style: lt,
+							children: "*"
+						}) : null]
+					}), /* @__PURE__ */ v(h, {
+						color: "text-neutral",
+						component: "span",
+						ellipsis: !0,
+						variant: "caption",
+						children: [
+							gt(e.type),
+							" ·",
+							e.required ? " 必填" : " 選填",
+							" ·",
+							e.fieldKey
+						]
+					})]
+				}),
+				/* @__PURE__ */ v("div", {
+					onClick: (e) => e.stopPropagation(),
+					style: Le,
+					children: [/* @__PURE__ */ _("div", {
+						style: Re,
+						children: /* @__PURE__ */ _(ae, {
+							checked: !!e.required,
+							disabled: n,
+							label: "必填",
+							onChange: (t) => Nt(e.fieldKey, t.target.checked)
+						})
+					}), /* @__PURE__ */ _(c, {
+						disabled: n,
+						icon: de,
+						iconType: "icon-only",
+						onClick: () => Dt(e.fieldKey),
+						variant: "destructive-ghost",
+						children: "移除欄位"
+					})]
+				})
+			]
+		});
+	}
+	function tn() {
+		return /* @__PURE__ */ v("div", {
+			style: L,
+			children: [/* @__PURE__ */ _(h, {
+				component: "h2",
+				variant: "h3",
+				children: "填寫預覽"
+			}), /* @__PURE__ */ _(t, {
+				onChange: Mt,
+				schema: x,
+				uiSchema: C,
+				value: Ee
+			})]
+		});
+	}
+	function nn() {
+		return /* @__PURE__ */ v("div", {
+			style: L,
+			children: [/* @__PURE__ */ _(h, {
+				component: "h2",
+				variant: "h3",
+				children: "Schema"
+			}), /* @__PURE__ */ v("div", {
+				style: $e,
+				children: [
+					rn("Form Schema", "schemaJson", /* @__PURE__ */ _(De, {
+						height: "360px",
+						name: "schemaJson",
+						onChange: Pt,
+						placeholder: "輸入 Form Schema JSON",
+						value: le
+					})),
+					rn("UI Schema", "uiSchemaJson", /* @__PURE__ */ _(De, {
+						height: "240px",
+						name: "uiSchemaJson",
+						onChange: Ft,
+						placeholder: "輸入 UI Schema JSON",
+						value: Te
+					})),
+					I ? /* @__PURE__ */ _(h, {
+						color: "text-error",
+						style: nt,
+						variant: "body",
+						children: I
+					}) : null
+				]
+			})]
+		});
+	}
+	function rn(t, n, r) {
+		return /* @__PURE__ */ _("div", {
+			style: et,
+			children: /* @__PURE__ */ _("div", {
+				style: tt,
+				children: /* @__PURE__ */ _(e, {
+					label: t,
+					name: n,
+					children: r
+				})
+			})
+		});
+	}
+}
+function gt(e) {
+	return Oe.find((t) => t.type === e)?.label ?? e;
+}
+function _t(e) {
+	return !!(e.visibleWhen || e.requiredWhen || e.readonlyWhen);
+}
+function vt(e) {
+	return {
+		id: e.fieldKey,
+		name: e.label
+	};
+}
+function yt(e) {
+	return e.type === "text" || e.type === "textarea";
+}
+function z(e) {
+	return typeof e == "string" ? e : "";
+}
+function bt(e) {
+	let t = e.split(/[\n,]/u).map((e) => e.trim()).filter(Boolean);
+	return t.length ? t : void 0;
+}
+function xt(e) {
+	return e?.join("\n") ?? "";
+}
+function B(e) {
+	return JSON.stringify(e, null, 2);
+}
+function St(e, t, n) {
+	return e.map((e, r) => r === t ? {
+		...e,
+		...n
+	} : e);
+}
+function Ct(e) {
+	let t = e.length + 1;
+	return {
+		label: `選項 ${t}`,
+		value: V(e, t)
+	};
+}
+function V(e, t) {
+	let n = `option_${t}`;
+	return e.some((e) => e.value === n) ? V(e, t + 1) : n;
+}
+function wt(e, t, n) {
+	let r = e[t];
+	if (!r || t === n) return [...e];
+	let i = e.filter((e, n) => n !== t);
+	return [
+		...i.slice(0, n),
+		r,
+		...i.slice(n)
+	];
+}
+//#endregion
+export { R as t };
+
+//# sourceMappingURL=FormBuilderView-D8DrQOXD.js.map