@rytass/bpm-core-react 0.11.0 → 0.12.0

package/dist/chunks/FormBuilderView-D4xIuPYB.js

@@ -0,0 +1,1960 @@
+"use client";
+import { t as e } from "./bpm-form-field-Cao0rMol.js";
+import { t } from "./FormRendererView-DUceSOXe.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, Modal as ee, Section as te, SectionGroup as ne, Select as p, Tab as re, TabItem as m, Table as ie, Tag as ae, Textarea as oe, Toggle as se, Typography as h } from "@mezzanine-ui/react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { FormFieldLayout as ce } from "@mezzanine-ui/core/form";
+import { AlignLeftIcon as le, CalendarIcon as y, CheckedIcon as ue, CheckedOutlineIcon as de, CurrencyDollarIcon as b, DotDragVerticalIcon as fe, DotGridIcon as x, FileAttachmentIcon as S, FileIcon as C, ListIcon as pe, PlusIcon as me, TrashIcon as he } from "@mezzanine-ui/icons";
+import { buildConditionExpression as w, buildFormRendererValues as ge, clampOptionalNumber as _e, createFieldDefinition as ve, createTableColumnDefinition as ye, formatDatePickerValue as be, formatDateTimePickerValue as xe, isDateFieldDefinition as Se, isFormDataSourceDescriptorCompatible as Ce, isNumberFieldDefinition as we, isSelectFieldDefinition as Te, lintFormSchema as Ee, listFormDataSources as De, parseConditionRule as Oe, parseOptionalNumberInput as ke, readCompatibleFormDataSourceBindingFields as Ae, readCompatibleFormDataSourceDescriptors as je, readCompatibleFormTableColumnBindingFields as Me, readConditionOperatorOption as Ne, readConditionOperatorOptions as Pe, readDatePickerValue as Fe, readDefaultConditionOperator as Ie, readDefaultConditionValue as Le, readFieldOptionAsSelectOption as Re, readFormDataSourceBinding as T, readFormDataSourceBindingValue as ze, readFormDataSourceBindingValueKind as Be, readFormDataSourceFieldDependencyKeys as Ve, readFormSchemaLintMessage as He, readFormTableRowBounds as Ue, readSelectOption as E, renameFormDataSourceFieldBindings as We, renameFormTableColumnBindings as Ge, upsertFormDataSourceFieldBinding as Ke } from "@rytass/bpm-core-client/form";
+import { FORM_TABLE_MAX_ROWS as qe, isFormDataSourceFieldDefinition as D, isFormOptionFieldDefinition as Je, isFormStaticOptionFieldDefinition as O, isTableColumnFieldType as Ye, isTableFieldDefinition as k, readFormFieldSelectionMode as A } from "@rytass/bpm-core-shared/form";
+import { DragDropContext as Xe, Draggable as Ze, Droppable as Qe } from "@hello-pangea/dnd";
+import $e from "next/dynamic";
+import { json as j } from "@codemirror/lang-json";
+import { EditorView as M } from "@codemirror/view";
+//#region src/views/forms/builder/json-code-editor.tsx
+var N = {
+	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%"
+}, et = [
+	j(),
+	M.lineWrapping,
+	M.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" }
+	})
+], P = $e(() => import("@uiw/react-codemirror"), {
+	loading: () => /* @__PURE__ */ _("div", {
+		style: N,
+		children: "載入 JSON 編輯器"
+	}),
+	ssr: !1
+});
+function tt({ disabled: e = !1, height: t, name: n, onChange: r, placeholder: i, value: a }) {
+	return /* @__PURE__ */ _(P, {
+		"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: [...et],
+		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 F = [
+	{
+		description: "單行文字、姓名、編號",
+		icon: le,
+		label: "文字",
+		type: "text"
+	},
+	{
+		description: "多行補充內容",
+		icon: C,
+		label: "長文字",
+		type: "textarea"
+	},
+	{
+		description: "金額、數量、分數",
+		icon: b,
+		label: "數字",
+		type: "number"
+	},
+	{
+		description: "金額與費用",
+		icon: b,
+		label: "金額",
+		type: "money"
+	},
+	{
+		description: "日期或到期日",
+		icon: y,
+		label: "日期",
+		type: "date"
+	},
+	{
+		description: "日期與時間",
+		icon: y,
+		label: "日期時間",
+		type: "datetime"
+	},
+	{
+		description: "是 / 否狀態",
+		icon: ue,
+		label: "開關",
+		type: "boolean"
+	},
+	{
+		description: "固定選項擇一",
+		icon: pe,
+		label: "下拉選單",
+		type: "select"
+	},
+	{
+		description: "可搜尋的固定選項",
+		icon: pe,
+		label: "自動完成",
+		type: "autocomplete"
+	},
+	{
+		description: "固定選項單選",
+		icon: x,
+		label: "單選",
+		type: "radio"
+	},
+	{
+		description: "固定選項複選",
+		icon: de,
+		label: "複選",
+		type: "checkbox"
+	},
+	{
+		description: "附件或佐證資料",
+		icon: S,
+		label: "附件",
+		type: "file_upload"
+	},
+	{
+		description: "多列多欄明細",
+		icon: x,
+		label: "表格",
+		type: "table"
+	}
+], I = F.filter((e) => Ye(e.type)).map((e) => ({
+	id: e.type,
+	name: e.label
+})), nt = {
+	alignItems: "start",
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 16
+}, rt = {
+	flex: "0.55 1 300px",
+	minWidth: 0
+}, it = {
+	flex: "1.45 1 720px",
+	minWidth: 620,
+	paddingBottom: 260
+}, at = 240, ot = {
+	BOOLEAN: "開關",
+	NUMBER: "數字",
+	STRING: "文字或選單",
+	STRING_ARRAY: "多選"
+}, st = /^schema\.fields\[(\d+)\](?:\.columns\[(\d+)\])?\.dataSource\.bindings missing required parameter: (.+)$/u, ct = /^schema\.fields\[(\d+)\](?:\.columns\[(\d+)\])?\.dataSource\.bindings unknown parameter: (.+)$/u, L = {
+	display: "grid",
+	gap: 12
+}, lt = {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 6
+}, ut = {
+	flex: "0 0 auto",
+	whiteSpace: "nowrap"
+}, dt = {
+	display: "grid",
+	gap: 8
+}, ft = {
+	alignItems: "center",
+	cursor: "grab",
+	display: "flex",
+	gap: 12,
+	touchAction: "none"
+}, pt = {
+	display: "grid",
+	flex: "1 1 auto",
+	gap: 2,
+	minWidth: 0
+}, mt = {
+	alignItems: "center",
+	display: "flex",
+	flex: "0 0 auto",
+	gap: 4
+}, ht = {
+	alignItems: "center",
+	display: "flex",
+	gap: 6
+}, gt = {
+	cursor: "pointer",
+	userSelect: "none"
+}, _t = { filter: "drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12))" }, vt = {
+	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)"
+}, yt = {
+	alignItems: "center",
+	border: "1px dashed var(--mzn-color-border-neutral)",
+	borderRadius: 6,
+	display: "grid",
+	gap: 12,
+	minHeight: 240,
+	padding: 32,
+	textAlign: "center"
+}, bt = {
+	display: "flex",
+	gap: 8,
+	justifyContent: "center"
+}, xt = {
+	display: "grid",
+	gap: 14
+}, St = {
+	display: "grid",
+	columnGap: 16,
+	gridTemplateColumns: "repeat(auto-fit, minmax(280px, 360px))",
+	justifyContent: "start",
+	maxWidth: 736,
+	rowGap: 8
+}, Ct = { gridColumn: "1 / -1" }, wt = {
+	alignItems: "center",
+	display: "flex",
+	gap: 8,
+	gridColumn: "1 / -1",
+	justifyContent: "flex-end"
+}, Tt = { gridColumn: "1 / -1" }, Et = {
+	alignItems: "start",
+	display: "block",
+	width: "100%"
+}, Dt = {
+	...Et,
+	gridColumn: "1 / -1"
+}, Ot = {
+	minWidth: 0,
+	width: "100%"
+}, kt = {
+	minWidth: "100%",
+	width: "100%"
+}, At = {
+	display: "grid",
+	gap: 14
+}, jt = {
+	alignItems: "start",
+	display: "block",
+	width: "100%"
+}, Mt = {
+	minWidth: 0,
+	width: "100%"
+}, Nt = { gridColumn: "2 / -1" }, Pt = {
+	display: "grid",
+	gap: 10,
+	width: "100%"
+}, Ft = {
+	display: "grid",
+	gap: 8,
+	gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))"
+}, It = { display: "inline-flex" }, Lt = {
+	display: "grid",
+	gap: 16
+}, Rt = {
+	display: "grid",
+	gap: 8
+}, zt = {
+	display: "flex",
+	justifyContent: "flex-end"
+}, Bt = {
+	color: "var(--mzn-color-text-error)",
+	fontSize: "0.72em",
+	lineHeight: 0,
+	marginLeft: 2,
+	verticalAlign: "super"
+}, Vt = {
+	display: "grid",
+	gap: 10,
+	gridColumn: "1 / -1"
+}, Ht = {
+	display: "grid",
+	gap: 2
+}, Ut = {
+	display: "grid",
+	gap: 8
+}, Wt = {
+	display: "flex",
+	justifyContent: "flex-start"
+}, Gt = {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 4
+}, Kt = {
+	backgroundColor: "var(--mzn-color-bg-surface-secondary)",
+	borderRadius: 6,
+	display: "grid",
+	gap: 4,
+	padding: 10
+}, qt = {
+	...St,
+	gridTemplateColumns: "minmax(280px, 520px)",
+	padding: "4px 0 8px"
+}, Jt = {
+	display: "grid",
+	gap: 8,
+	gridColumn: "1 / -1"
+}, Yt = {
+	alignItems: "center",
+	display: "flex",
+	gap: 12,
+	justifyContent: "space-between"
+}, Xt = {
+	alignItems: "baseline",
+	display: "flex",
+	gap: 2
+}, Zt = {
+	display: "grid",
+	gap: 4
+};
+function Qt(e) {
+	e && (e.style.width = "100%");
+}
+var $t = {
+	fields: [],
+	schemaVersion: 1
+}, en = {
+	layout: [],
+	schemaVersion: 1
+}, tn = "__STATIC_OPTIONS__", nn = "__CONSTANT__", rn = "__ROW_FIELD__:", an = "__UNBOUND__", on = [{
+	id: tn,
+	name: "靜態選項"
+}], sn = [{
+	id: "single",
+	name: "單選"
+}, {
+	id: "multiple",
+	name: "複選"
+}], cn = [
+	{
+		id: "unset",
+		name: "不預設"
+	},
+	{
+		id: "true",
+		name: "是"
+	},
+	{
+		id: "false",
+		name: "否"
+	}
+], ln = [{
+	id: "true",
+	name: "是"
+}, {
+	id: "false",
+	name: "否"
+}], un = [
+	{
+		label: "顯示",
+		name: "fieldVisibleWhen",
+		supportingText: "符合條件時才顯示這個欄位。",
+		target: "visibleWhen"
+	},
+	{
+		label: "必填",
+		name: "fieldRequiredWhen",
+		supportingText: "符合條件時才要求填寫這個欄位。",
+		target: "requiredWhen"
+	},
+	{
+		label: "唯讀",
+		name: "fieldReadonlyWhen",
+		supportingText: "符合條件時不允許修改這個欄位。",
+		target: "readonlyWhen"
+	}
+];
+function R({ onChange: le, value: y }) {
+	let ue = y?.schema ?? $t, de = y?.uiSchema ?? en, [b, x] = i(ue), [S, C] = i(de), [pe, O] = i(V(ue)), [$e, j] = i(V(de)), [M, N] = i({}), [et, P] = i(null), [R, gn] = i("design"), [z, B] = i(null), [H, jn] = i([]), [Mn, Nn] = i(null), [Pn, Fn] = i("loading"), [In, U] = i(null), [Ln, Rn] = i(!1), [W, G] = i(null), [zn, K] = i(null);
+	n(() => {
+		let e = !0;
+		return De().then((t) => {
+			e && (jn(t), Nn(null), Fn("ready"));
+		}).catch((t) => {
+			e && (jn([]), Nn("目前無法載入 DataSource Catalog，請稍後重試。"), Fn("unavailable"));
+		}), () => {
+			e = !1;
+		};
+	}, []), n(() => {
+		b.fields.some((e) => e.fieldKey === z) || B(b.fields[0]?.fieldKey ?? null);
+	}, [b.fields, z]), n(() => {
+		N((e) => ge(b.fields, e));
+	}, [b.fields]), n(() => {
+		R !== "advanced" && (O(V(b)), j(V(S)));
+	}, [
+		R,
+		b,
+		S
+	]);
+	let q = r(() => b.fields.find((e) => e.fieldKey === z) ?? b.fields[0] ?? null, [b.fields, z]);
+	n(() => {
+		le?.({
+			schema: b,
+			uiSchema: S
+		});
+	}, [b, S]);
+	function Bn(e) {
+		let t = b.fields.length + 1, n = ve(e, t);
+		x({
+			...b,
+			fields: [...b.fields, n]
+		}), C({
+			...S,
+			layout: [...S.layout, {
+				fieldKey: n.fieldKey,
+				width: e === "textarea" || e === "file_upload" || e === "table" ? "FULL" : "HALF"
+			}]
+		}), B(n.fieldKey), gn("design"), P(null);
+	}
+	function Vn(e) {
+		let t = e;
+		t === "advanced" && R !== "advanced" && (O(V(b)), j(V(S))), gn(t);
+	}
+	function Hn(e) {
+		let t = b.fields.flatMap((t) => k(t) ? t.columns.flatMap((n) => D(n) && Ve(n).includes(e) ? [`${t.fieldKey}.${n.fieldKey}`] : []) : D(t) && Ve(t).includes(e) ? [t.fieldKey] : []);
+		if (t.length > 0) {
+			G({
+				affectedFieldKeys: t,
+				fieldKey: e,
+				kind: "remove-field"
+			});
+			return;
+		}
+		Un(e);
+	}
+	function Un(e) {
+		let t = b.fields.filter((t) => t.fieldKey !== e);
+		x({
+			...b,
+			fields: t
+		}), C({
+			...S,
+			layout: S.layout.filter((t) => t.fieldKey !== e)
+		}), B(z === e ? t[0]?.fieldKey ?? null : z), P(null), U(null);
+	}
+	function Wn(e) {
+		let t = e.destination;
+		t && e.source.index !== t.index && (x((n) => ({
+			...n,
+			fields: An(n.fields, e.source.index, t.index)
+		})), C((n) => ({
+			...n,
+			layout: An(n.layout, e.source.index, t.index)
+		})), P(null));
+	}
+	function J(e) {
+		Gn((t) => ({
+			...t,
+			...e
+		}));
+	}
+	function Gn(e) {
+		if (!q) return;
+		let t = q.fieldKey, n = e(q), r = n.fieldKey, i = {
+			...b,
+			fields: b.fields.map((e) => e.fieldKey === t ? n : e)
+		}, a = t === r ? i : We(i, t, r);
+		x(a), C({
+			...S,
+			layout: S.layout.map((e) => e.fieldKey === t ? {
+				...e,
+				fieldKey: r
+			} : e)
+		}), B(r), P(null), U(null);
+	}
+	function Kn(e) {
+		Gn(() => e);
+	}
+	function Y(e, t) {
+		x((n) => ({
+			...n,
+			fields: n.fields.map((n) => n.fieldKey === e && k(n) ? t(n) : n)
+		})), P(null), U(null);
+	}
+	function X(e, t, n) {
+		let r = e.columns[t]?.fieldKey;
+		Y(e.fieldKey, (e) => {
+			let i = {
+				...e,
+				columns: e.columns.map((e, r) => r === t ? n : e)
+			};
+			return typeof r == "string" && r !== n.fieldKey ? Ge(i, r, n.fieldKey) : i;
+		});
+	}
+	function qn(e) {
+		let t = ye(e.columns, "text");
+		Y(e.fieldKey, (e) => ({
+			...e,
+			columns: [...e.columns, t]
+		})), K(e.columns.length);
+	}
+	function Jn(e, t) {
+		Y(e, (e) => ({
+			...e,
+			columns: e.columns.filter((e, n) => n !== t)
+		})), K((e) => e === null || e < t ? e : e === t ? null : e - 1);
+	}
+	function Yn(e, t, n) {
+		Y(e.fieldKey, (e) => ({
+			...e,
+			columns: An(e.columns, t, n)
+		})), K((e) => e === null ? e : e === t ? n : e > t && e <= n ? e - 1 : e < t && e >= n ? e + 1 : e);
+	}
+	function Xn(e, t, n) {
+		if (e.type !== "select" && e.type !== "autocomplete" || A(e) === t) return;
+		let r = e.defaultValue, i = t === "multiple" ? typeof r == "string" ? [r] : r : Array.isArray(r) ? r[0] : r;
+		n(e, {
+			...e,
+			defaultValue: i,
+			mode: t
+		}, "選擇模式變更可能轉換或捨棄既有預設值。");
+	}
+	function Zn(e, t, n = "此變更會替換目前選項來源；既有 options、dynamic reference 或 bindings 可能失效。") {
+		JSON.stringify(e) !== JSON.stringify(t) && G({
+			fieldKey: e.fieldKey,
+			impact: n,
+			kind: "replace-field",
+			nextField: t
+		});
+	}
+	function Qn(e, t, n) {
+		if (!t) return;
+		if (t === tn) {
+			if (!D(e)) return;
+			let { dataSource: t, defaultValue: r, ...i } = e;
+			n({
+				...i,
+				options: []
+			});
+			return;
+		}
+		let r = H.find((e) => fn(e) === t);
+		if (!r) return;
+		if (D(e)) {
+			let t = new Set(r.parameters.map((e) => e.key)), i = e.dataSource.bindings.filter((e) => t.has(e.parameter));
+			n({
+				...e,
+				dataSource: {
+					bindings: i,
+					key: r.key,
+					version: r.version
+				}
+			});
+			return;
+		}
+		let { options: i, defaultValue: a, ...o } = e;
+		n({
+			...o,
+			dataSource: {
+				bindings: [],
+				key: r.key,
+				version: r.version
+			}
+		});
+	}
+	function $n() {
+		W && (er(W), G(null));
+	}
+	function er(e) {
+		if (e.kind === "remove-field") {
+			Un(e.fieldKey);
+			return;
+		}
+		if (e.kind === "remove-column") {
+			Jn(e.fieldKey, e.columnIndex);
+			return;
+		}
+		if (e.kind === "replace-column") {
+			Y(e.fieldKey, (t) => ({
+				...t,
+				columns: t.columns.map((t) => t.fieldKey === e.columnKey ? e.nextColumn : t)
+			})), K(e.columnIndex);
+			return;
+		}
+		x({
+			...b,
+			fields: b.fields.map((t) => t.fieldKey === e.fieldKey ? e.nextField : t)
+		}), P(null), U(null);
+	}
+	async function tr() {
+		Rn(!0);
+		try {
+			let e = await Ee(b, S);
+			U(e.errors.map(nr));
+		} catch {
+			U(["目前無法完成 DataSource schema 驗證。"]);
+		} finally {
+			Rn(!1);
+		}
+	}
+	function nr(e) {
+		let t = st.exec(e);
+		if (t?.[1] && t[3]) return `${rr(t[1], t[2])}尚未指定必要參數「${ir(t[1], t[2], t[3])}」的來源`;
+		let n = ct.exec(e);
+		return n?.[1] && n[3] ? `${rr(n[1], n[2])}綁定了來源沒有的參數「${n[3]}」` : He(e);
+	}
+	function rr(e, t) {
+		let n = b.fields[Number(e)];
+		if (!n) return "";
+		let r = n.label || n.fieldKey, i = ar(n, t);
+		return i ? `「${r}」表格的「${i.label || i.fieldKey}」欄` : `「${r}」欄位`;
+	}
+	function ir(e, t, n) {
+		let r = b.fields[Number(e)];
+		if (!r) return n;
+		let i = ar(r, t) ?? r, a = D(i) ? i.dataSource : null;
+		return (a ? H.find((e) => e.key === a.key && e.version === a.version) : void 0)?.parameters.find((e) => e.key === n)?.label || n;
+	}
+	function ar(e, t) {
+		return typeof t == "string" && k(e) ? e.columns[Number(t)] : void 0;
+	}
+	function or(e) {
+		N(e);
+	}
+	function sr(e, t) {
+		x((n) => ({
+			...n,
+			fields: n.fields.map((n) => n.fieldKey === e ? {
+				...n,
+				required: t
+			} : n)
+		})), P(null);
+	}
+	function cr(e) {
+		O(e);
+		try {
+			x(JSON.parse(e)), P(null);
+		} catch {
+			P("Form Schema JSON 格式不正確");
+		}
+	}
+	function lr(e) {
+		j(e);
+		try {
+			C(JSON.parse(e)), P(null);
+		} catch {
+			P("UI Schema JSON 格式不正確");
+		}
+	}
+	return /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _(g, { children: /* @__PURE__ */ _(ne, { children: /* @__PURE__ */ _(te, { children: /* @__PURE__ */ v("div", {
+		style: Lt,
+		children: [
+			/* @__PURE__ */ v(re, {
+				activeKey: R,
+				onChange: Vn,
+				size: "sub",
+				children: [
+					/* @__PURE__ */ _(m, { children: "設計" }, "design"),
+					/* @__PURE__ */ _(m, { children: "預覽" }, "preview"),
+					/* @__PURE__ */ _(m, { children: "進階" }, "advanced")
+				]
+			}),
+			R === "design" ? ur() : null,
+			R === "preview" ? Yr() : null,
+			R === "advanced" ? Xr() : null
+		]
+	}) }) }) }), W ? /* @__PURE__ */ _(ee, {
+		cancelText: "返回",
+		confirmText: "確認變更",
+		modalType: "standard",
+		onCancel: () => G(null),
+		onClose: () => G(null),
+		onConfirm: $n,
+		open: !0,
+		showModalFooter: !0,
+		showModalHeader: !0,
+		title: yn(W),
+		children: W.kind === "remove-field" ? /* @__PURE__ */ v("div", {
+			style: Rt,
+			children: [/* @__PURE__ */ _(h, {
+				variant: "body",
+				children: "此欄位仍被下列 DataSource binding 使用；移除後請重新設定這些欄位。"
+			}), /* @__PURE__ */ _(h, {
+				color: "text-warning",
+				variant: "body",
+				children: W.affectedFieldKeys.join("、")
+			})]
+		}) : W.kind === "remove-column" ? /* @__PURE__ */ v(h, {
+			variant: "body",
+			children: [
+				"移除欄「",
+				W.columnKey,
+				"」後，既有案件仍保留原本的表單版本，但新版本的這一欄資料將不再被填寫。"
+			]
+		}) : /* @__PURE__ */ _(h, {
+			variant: "body",
+			children: W.impact
+		})
+	}) : null] });
+	function ur() {
+		return /* @__PURE__ */ v("div", {
+			style: L,
+			children: [/* @__PURE__ */ v("div", {
+				style: dt,
+				children: [/* @__PURE__ */ _(h, {
+					component: "h2",
+					variant: "label-primary",
+					children: "新增欄位"
+				}), /* @__PURE__ */ _("div", {
+					style: lt,
+					children: F.map((e) => /* @__PURE__ */ _(c, {
+						icon: e.icon,
+						iconType: "leading",
+						onClick: () => Bn(e.type),
+						size: "sub",
+						style: ut,
+						type: "button",
+						variant: "base-secondary",
+						children: e.label
+					}, e.type))
+				})]
+			}), /* @__PURE__ */ v("div", {
+				style: nt,
+				children: [/* @__PURE__ */ v("div", {
+					style: {
+						...L,
+						...rt
+					},
+					children: [/* @__PURE__ */ _(h, {
+						component: "h2",
+						variant: "label-primary",
+						children: "表單畫布"
+					}), b.fields.length > 0 ? /* @__PURE__ */ _(Xe, {
+						onDragEnd: Wn,
+						children: /* @__PURE__ */ _(Qe, {
+							droppableId: "form-builder-fields",
+							children: (e) => /* @__PURE__ */ v("div", {
+								...e.droppableProps,
+								ref: e.innerRef,
+								style: L,
+								children: [b.fields.map((e, t) => /* @__PURE__ */ _(Ze, {
+									draggableId: e.fieldKey,
+									index: t,
+									children: (t, n) => qr(e, t, n.isDragging)
+								}, e.fieldKey)), e.placeholder]
+							})
+						})
+					}) : /* @__PURE__ */ v("div", {
+						style: yt,
+						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: bt,
+							children: [/* @__PURE__ */ _(c, {
+								onClick: () => Bn("text"),
+								variant: "base-primary",
+								children: "新增文字欄位"
+							}), /* @__PURE__ */ _(c, {
+								onClick: () => Bn("textarea"),
+								variant: "base-secondary",
+								children: "新增長文字"
+							})]
+						})]
+					})]
+				}), /* @__PURE__ */ v("div", {
+					style: {
+						...L,
+						...it
+					},
+					children: [/* @__PURE__ */ _(h, {
+						component: "h2",
+						variant: "label-primary",
+						children: "欄位設定"
+					}), q ? dr(q) : /* @__PURE__ */ _(h, {
+						color: "text-neutral",
+						variant: "body",
+						children: "請先新增或選取欄位。"
+					})]
+				})]
+			})]
+		});
+	}
+	function dr(e) {
+		return /* @__PURE__ */ v("div", {
+			style: xt,
+			children: [
+				fr(e),
+				k(e) ? gr(e) : null,
+				pr(e)
+			]
+		});
+	}
+	function fr(e) {
+		return /* @__PURE__ */ v("div", {
+			style: St,
+			children: [
+				/* @__PURE__ */ _("div", {
+					style: wt,
+					children: /* @__PURE__ */ _(o, {
+						size: "main",
+						text: dn(e.type),
+						variant: "text-info"
+					})
+				}),
+				$("標題", "fieldLabel", /* @__PURE__ */ _(f, {
+					onChange: (e) => J({ label: e.target.value }),
+					placeholder: "例如：申請金額",
+					value: e.label,
+					variant: "base"
+				})),
+				$("欄位 Key", "fieldKey", /* @__PURE__ */ _(f, {
+					onChange: (e) => J({ fieldKey: e.target.value }),
+					placeholder: "例如：amount",
+					value: e.fieldKey,
+					variant: "base"
+				})),
+				k(e) ? null : $("提示文字", "fieldPlaceholder", /* @__PURE__ */ _(f, {
+					onChange: (e) => J({ placeholder: e.target.value || void 0 }),
+					placeholder: "例如：請輸入申請金額",
+					value: e.placeholder ?? "",
+					variant: "base"
+				})),
+				mr(e, Kn, Zn)
+			]
+		});
+	}
+	function pr(e) {
+		return /* @__PURE__ */ _(a, {
+			defaultExpanded: Sn(e),
+			size: "sub",
+			title: "進階設定",
+			children: /* @__PURE__ */ v("div", {
+				style: St,
+				children: [
+					/* @__PURE__ */ _(h, {
+						component: "h3",
+						style: Ct,
+						variant: "label-primary",
+						children: "條件規則"
+					}),
+					/* @__PURE__ */ _(h, {
+						color: "text-neutral",
+						style: Tt,
+						variant: "body",
+						children: "只有需要根據其他欄位改變顯示、必填或唯讀狀態時才需要設定。"
+					}),
+					Vr(e)
+				]
+			})
+		});
+	}
+	function mr(e, t, n, r) {
+		return wn(e) ? Sr(e, t) : we(e) ? Cr(e, t) : Se(e) ? wr(e, t) : Je(e) ? Tr(e, t, n, r) : e.type === "boolean" ? zr(e, t) : e.type === "file_upload" ? Br(e, t) : k(e) ? hr(e) : null;
+	}
+	function hr(e) {
+		let t = Ue(e);
+		return /* @__PURE__ */ v(g, { children: [
+			$("最少列數", "fieldMinRows", Q(e.minRows, (t) => Y(e.fieldKey, (e) => ({
+				...e,
+				minRows: t
+			})), "例如：1", {
+				max: t.maxRows,
+				min: 0
+			})),
+			$("最多列數", "fieldMaxRows", Q(e.maxRows, (t) => Y(e.fieldKey, (e) => ({
+				...e,
+				maxRows: t
+			})), `未設定即為 ${qe}`, {
+				max: qe,
+				min: Math.max(t.minRows, 1)
+			})),
+			$("新增列按鈕文字", "fieldAddRowLabel", /* @__PURE__ */ _(f, {
+				onChange: (t) => Y(e.fieldKey, (e) => ({
+					...e,
+					addRowLabel: t.target.value || void 0
+				})),
+				placeholder: "預設為「新增一列」",
+				value: e.addRowLabel ?? "",
+				variant: "base"
+			}))
+		] });
+	}
+	function gr(e) {
+		return /* @__PURE__ */ v("div", {
+			style: Jt,
+			children: [/* @__PURE__ */ v("div", {
+				style: Yt,
+				children: [/* @__PURE__ */ v(h, {
+					component: "h3",
+					variant: "label-primary",
+					children: [
+						"欄（",
+						e.columns.length,
+						"）"
+					]
+				}), /* @__PURE__ */ _(c, {
+					icon: me,
+					iconType: "leading",
+					onClick: () => qn(e),
+					size: "sub",
+					type: "button",
+					variant: "base-secondary",
+					children: "新增欄"
+				})]
+			}), _r(e)]
+		});
+	}
+	function _r(e) {
+		let t = e.columns.map((t, n) => ({
+			fieldKey: t.fieldKey,
+			index: n,
+			key: `${e.fieldKey}-column-${n}`,
+			label: t.label,
+			type: t.type
+		})), n = [
+			{
+				key: "label",
+				render: (t) => /* @__PURE__ */ _(f, {
+					fullWidth: !0,
+					onChange: (n) => X(e, t.index, {
+						...xr(e, t.index),
+						label: n.target.value
+					}),
+					placeholder: "例如：數量",
+					size: "sub",
+					value: t.label,
+					variant: "base"
+				}),
+				title: "標題"
+			},
+			{
+				key: "type",
+				render: (t) => /* @__PURE__ */ _(p, {
+					fullWidth: !0,
+					clearable: !1,
+					menuMaxHeight: at,
+					onChange: (n) => yr(e, t.index, n?.id),
+					options: [...I],
+					size: "sub",
+					value: E(I, t.type)
+				}),
+				title: "型別"
+			},
+			{
+				key: "required",
+				render: (t) => /* @__PURE__ */ _(se, {
+					checked: xr(e, t.index).required === !0,
+					inputProps: { "aria-label": `${t.label || t.fieldKey} 必填` },
+					onChange: (n) => X(e, t.index, {
+						...xr(e, t.index),
+						required: n.target.checked
+					}),
+					size: "sub"
+				}),
+				title: "必填"
+			}
+		], r = {
+			render: (t) => [{
+				disabled: () => e.columns.length <= 1,
+				icon: he,
+				iconType: "leading",
+				name: "移除此欄",
+				onClick: () => G({
+					columnIndex: t.index,
+					columnKey: t.fieldKey,
+					fieldKey: e.fieldKey,
+					kind: "remove-column"
+				}),
+				variant: "destructive-ghost"
+			}],
+			width: 104
+		}, i = zn === null ? void 0 : t[zn]?.key;
+		return /* @__PURE__ */ _(ie, {
+			actions: r,
+			columns: n,
+			dataSource: t,
+			draggable: {
+				enabled: !0,
+				onDragEnd: (t, n) => Yn(e, n.fromIndex, n.toIndex)
+			},
+			expandable: {
+				expandedRowKeys: i ? [i] : [],
+				expandedRowRender: (t) => vr(e, t.index),
+				onExpand: (e, t) => K(e ? t.index : null)
+			},
+			fullWidth: !0,
+			rowHeightPreset: "roomy",
+			showHeader: !0,
+			size: "sub"
+		});
+	}
+	function vr(e, t) {
+		let n = e.columns[t];
+		return n ? /* @__PURE__ */ v("div", {
+			style: qt,
+			children: [
+				$("欄位 Key", "columnFieldKey", /* @__PURE__ */ _(f, {
+					onChange: (r) => X(e, t, {
+						...n,
+						fieldKey: r.target.value
+					}),
+					placeholder: "例如：qty",
+					value: n.fieldKey,
+					variant: "base"
+				})),
+				$("提示文字", "columnPlaceholder", /* @__PURE__ */ _(f, {
+					onChange: (r) => X(e, t, {
+						...n,
+						placeholder: r.target.value || void 0
+					}),
+					placeholder: "例如：請輸入數量",
+					value: n.placeholder ?? "",
+					variant: "base"
+				})),
+				mr(n, (n) => {
+					Ye(n.type) && X(e, t, n);
+				}, (n, r) => {
+					Ye(r.type) && X(e, t, r);
+				}, e.columns)
+			]
+		}) : null;
+	}
+	function yr(e, t, n) {
+		let r = e.columns[t], i = I.find((e) => e.id === n)?.id;
+		if (!r || !i || r.type === i) return;
+		let a = xn(r, i), o = bn(r);
+		if (o.length === 0) {
+			X(e, t, a), K(t);
+			return;
+		}
+		G({
+			columnIndex: t,
+			columnKey: r.fieldKey,
+			fieldKey: e.fieldKey,
+			impact: `「${r.label || r.fieldKey}」改為${br(i)}後，這一欄的${o.join("、")}會被捨棄。`,
+			kind: "replace-column",
+			nextColumn: a
+		});
+	}
+	function br(e) {
+		return I.find((t) => t.id === e)?.name ?? e;
+	}
+	function xr(e, t) {
+		let n = e.columns[t];
+		if (!n) throw Error(`Table ${e.fieldKey} has no column at index ${t}.`);
+		return n;
+	}
+	function Sr(e, t) {
+		return /* @__PURE__ */ v(g, { children: [
+			$("預設值", "fieldDefaultValue", e.type === "textarea" ? Wr({
+				name: "fieldDefaultValue",
+				onChange: (n) => t({
+					...e,
+					defaultValue: n || void 0
+				}),
+				placeholder: "輸入此欄位的預設文字",
+				rows: 3,
+				value: Tn(e.defaultValue)
+			}) : /* @__PURE__ */ _(f, {
+				onChange: (n) => t({
+					...e,
+					defaultValue: n.target.value || void 0
+				}),
+				placeholder: "輸入此欄位的預設文字",
+				value: Tn(e.defaultValue),
+				variant: "base"
+			})),
+			$("最小長度", "fieldMinLength", Q(e.minLength, (n) => t({
+				...e,
+				minLength: n
+			}), "例如：2", { min: 0 })),
+			$("最大長度", "fieldMaxLength", Q(e.maxLength, (n) => t({
+				...e,
+				maxLength: n
+			}), "例如：100", { min: 1 }))
+		] });
+	}
+	function Cr(e, t) {
+		return /* @__PURE__ */ v(g, { children: [
+			$("預設值", "fieldDefaultValue", Q(typeof e.defaultValue == "number" ? e.defaultValue : void 0, (n) => t({
+				...e,
+				defaultValue: n
+			}), e.type === "money" ? "例如：1000" : "輸入預設數值", {
+				max: e.maximum,
+				min: e.minimum
+			})),
+			$("最小值", "fieldMinimum", Q(e.minimum, (n) => t({
+				...e,
+				minimum: n
+			}), "例如：0")),
+			$("最大值", "fieldMaximum", Q(e.maximum, (n) => t({
+				...e,
+				maximum: n
+			}), "例如：999999"))
+		] });
+	}
+	function wr(e, t) {
+		return $("預設值", "fieldDefaultValue", Gr(e, Tn(e.defaultValue), (n) => t({
+			...e,
+			defaultValue: n
+		})));
+	}
+	function Tr(e, t, n, r) {
+		let i = je(e.type, H), a = {
+			commit: (e) => t(e),
+			rowColumns: r
+		}, o = D(e) ? fn(e.dataSource) : tn, s = D(e) ? H.find((t) => t.key === e.dataSource.key && t.version === e.dataSource.version) : null, c = s ? i.some((e) => e.key === s.key && e.version === s.version) : !1, l = [
+			...on,
+			...i.map(mn),
+			...D(e) && !c ? [{
+				id: o,
+				name: `${e.dataSource.key} v${e.dataSource.version}（目前不可用或不支援）`
+			}] : []
+		], u = A(e);
+		return /* @__PURE__ */ v(g, { children: [
+			e.type === "select" || e.type === "autocomplete" ? $("選擇模式", "fieldSelectionMode", /* @__PURE__ */ _(p, {
+				clearable: !1,
+				onChange: (t) => {
+					(t?.id === "single" || t?.id === "multiple") && Xn(e, t.id, n);
+				},
+				options: [...sn],
+				value: E(sn, u)
+			})) : $("選擇模式", "fieldSelectionMode", /* @__PURE__ */ _(h, {
+				color: "text-neutral",
+				variant: "body",
+				children: u === "multiple" ? "固定複選" : "固定單選"
+			})),
+			$("選項來源", "fieldOptionSource", /* @__PURE__ */ _(p, {
+				clearable: !1,
+				disabled: Pn === "loading" && !D(e),
+				onChange: (n) => Qn(e, n?.id, t),
+				options: l,
+				placeholder: "選擇選項來源",
+				value: E(l, o)
+			})),
+			D(e) ? Er(e, i, a) : Rr(e, t)
+		] });
+	}
+	function Er(e, t, n) {
+		let r = H.find((t) => t.key === e.dataSource.key && t.version === e.dataSource.version), i = r && !Ce(r, e.type);
+		return /* @__PURE__ */ v("div", {
+			style: Vt,
+			children: [
+				Pn === "loading" ? /* @__PURE__ */ _(h, {
+					color: "text-neutral",
+					variant: "body",
+					children: "正在載入可用的選項來源…"
+				}) : null,
+				Mn ? /* @__PURE__ */ _(h, {
+					color: "text-error",
+					variant: "body",
+					children: Mn
+				}) : null,
+				r ? null : /* @__PURE__ */ _(h, {
+					color: "text-warning",
+					variant: "body",
+					children: "找不到目前設定的來源版本。設定會保留，但這張表單在來源恢復前無法發布。"
+				}),
+				i ? /* @__PURE__ */ _(h, {
+					color: "text-error",
+					variant: "body",
+					children: "這個來源不支援目前的控制項，請改選其他來源。"
+				}) : null,
+				r ? Dr(r) : null,
+				r && r.parameters.length > 0 ? Or(e, r, n) : null,
+				t.length === 0 && !Mn ? /* @__PURE__ */ _(h, {
+					color: "text-warning",
+					variant: "body",
+					children: "沒有支援目前控制項的已註冊來源。"
+				}) : null,
+				/* @__PURE__ */ _("div", {
+					style: Wt,
+					children: /* @__PURE__ */ _(c, {
+						disabled: Ln,
+						loading: Ln,
+						onClick: () => void tr(),
+						size: "sub",
+						type: "button",
+						variant: "base-secondary",
+						children: "檢查全部動態選項設定"
+					})
+				}),
+				In ? /* @__PURE__ */ _("div", {
+					style: Ht,
+					children: In.length > 0 ? In.map((e) => /* @__PURE__ */ _(h, {
+						color: "text-error",
+						variant: "caption",
+						children: e
+					}, e)) : /* @__PURE__ */ _(h, {
+						color: "text-success",
+						variant: "caption",
+						children: "這張表單的動態選項設定都可以使用。"
+					})
+				}) : null
+			]
+		});
+	}
+	function Dr(e) {
+		return /* @__PURE__ */ v("div", {
+			style: Kt,
+			children: [
+				e.description ? /* @__PURE__ */ _(h, {
+					variant: "body",
+					children: e.description
+				}) : null,
+				/* @__PURE__ */ _("div", {
+					style: Gt,
+					children: pn(e).map((e) => /* @__PURE__ */ _(ae, {
+						label: e,
+						readOnly: !0,
+						size: "minor"
+					}, e))
+				}),
+				/* @__PURE__ */ v(h, {
+					color: "text-neutral",
+					variant: "caption",
+					children: [
+						"來源代號：",
+						e.key,
+						" · v",
+						e.version
+					]
+				})
+			]
+		});
+	}
+	function Or(e, t, n) {
+		let r = t.parameters.map((e, t) => ({
+			key: e.key,
+			index: t,
+			parameter: e
+		}));
+		return /* @__PURE__ */ v("div", {
+			style: Ut,
+			children: [/* @__PURE__ */ _(h, {
+				color: "text-neutral",
+				variant: "label-secondary",
+				children: "這個來源需要的條件"
+			}), /* @__PURE__ */ _(ie, {
+				columns: [
+					{
+						key: "parameter",
+						render: (e) => /* @__PURE__ */ v("div", {
+							style: Xt,
+							children: [/* @__PURE__ */ _(h, {
+								variant: "input",
+								children: e.parameter.label ?? e.parameter.key
+							}), e.parameter.required ? /* @__PURE__ */ _(h, {
+								color: "text-error",
+								variant: "input",
+								children: "*"
+							}) : null]
+						}),
+						title: "條件",
+						width: 100
+					},
+					{
+						key: "binding",
+						width: 268,
+						render: (t) => Ar(e, t.parameter, n),
+						title: "值從哪裡來"
+					},
+					{
+						key: "constant",
+						width: 140,
+						render: (t) => Be(T(e, t.parameter.key)) === "CONSTANT" ? Pr(e, t.parameter.key, t.parameter.type, T(e, t.parameter.key), n) : /* @__PURE__ */ _(h, {
+							color: "text-neutral",
+							variant: "caption",
+							children: "—"
+						}),
+						title: "固定值"
+					},
+					{
+						key: "meaning",
+						render: (t) => /* @__PURE__ */ _(h, {
+							color: "text-neutral",
+							variant: "caption",
+							children: Mr(T(e, t.parameter.key), t.parameter, n, kr(e, t.parameter, n))
+						}),
+						title: "填寫時的行為"
+					}
+				],
+				dataSource: r,
+				fullWidth: !0,
+				showHeader: !0,
+				size: "sub"
+			})]
+		});
+	}
+	function kr(e, t, n) {
+		return Ae(t.type, b.fields, e.fieldKey).length + (n.rowColumns ? Me(t.type, n.rowColumns, e.fieldKey).length : 0);
+	}
+	function Ar(e, t, n) {
+		let r = hn(T(e, t.key)), i = n.rowColumns ? Me(t.type, n.rowColumns, e.fieldKey).map((e) => ({
+			id: `${rn}${e.id}`,
+			name: `同列：${e.name}`
+		})) : [], a = [
+			...t.required ? [] : [{
+				id: an,
+				name: "未綁定"
+			}],
+			...i,
+			...Ae(t.type, b.fields, e.fieldKey),
+			...t.type === "STRING_ARRAY" ? [] : [{
+				id: nn,
+				name: "固定常數"
+			}]
+		];
+		return /* @__PURE__ */ _("div", {
+			"data-data-source-parameter": t.key,
+			style: Zt,
+			children: /* @__PURE__ */ _(p, {
+				clearable: !1,
+				fullWidth: !0,
+				inputProps: {
+					"aria-label": `${t.label ?? t.key} 的值來源`,
+					title: E(a, r)?.name ?? ""
+				},
+				onChange: (r) => Ir(e, t.key, t.type, r?.id, n),
+				options: a,
+				placeholder: "選擇欄位或常數",
+				size: "sub",
+				value: E(a, r)
+			})
+		});
+	}
+	function jr(e) {
+		return ot[e];
+	}
+	function Mr(e, t, n, r) {
+		let i = Be(e);
+		return i === "CONSTANT" ? "固定值，不隨填寫變動" : i === "FIELD" ? `隨欄位「${Nr(e, n)}」變動` : i === "ROW_FIELD" ? `隨同列「${Nr(e, n)}」變動` : t.required ? r > 0 ? "尚未設定，選項無法載入" : `沒有相容的${jr(t.type)}欄位，請改用固定值` : "未設定，不做這層篩選";
+	}
+	function Nr(e, t) {
+		let n = e?.from;
+		if (n?.kind === "FIELD") {
+			let e = b.fields.find((e) => e.fieldKey === n.fieldKey);
+			return e ? e.label || e.fieldKey : "";
+		}
+		if (n?.kind === "ROW_FIELD") {
+			let e = t.rowColumns?.find((e) => e.fieldKey === n.columnKey);
+			return e ? e.label || e.fieldKey : "";
+		}
+		return "";
+	}
+	function Pr(e, t, n, r, i) {
+		return /* @__PURE__ */ _("div", {
+			"data-data-source-constant": t,
+			children: Fr(e, t, n, r, i)
+		});
+	}
+	function Fr(e, t, n, r, i) {
+		let a = ze(e, t);
+		if (n === "BOOLEAN") {
+			let n = [{
+				id: "true",
+				name: "是"
+			}, {
+				id: "false",
+				name: "否"
+			}];
+			return /* @__PURE__ */ _(p, {
+				clearable: !1,
+				fullWidth: !0,
+				onChange: (n) => Lr(e, t, n?.id === "true", i),
+				options: n,
+				size: "sub",
+				value: E(n, a === !0 ? "true" : "false")
+			});
+		}
+		return n === "STRING_ARRAY" ? /* @__PURE__ */ _(h, {
+			color: "text-warning",
+			variant: "caption",
+			children: "這個條件要收多個值，請綁定一個複選欄位；不接受固定值。"
+		}) : /* @__PURE__ */ _(f, {
+			onChange: (r) => Lr(e, t, n === "NUMBER" ? ke(r.target.value) ?? 0 : r.target.value, i),
+			placeholder: n === "NUMBER" ? "輸入數字" : "輸入固定值",
+			value: _n(r, n),
+			variant: "base"
+		});
+	}
+	function Ir(e, t, n, r, i) {
+		i.commit(Ke(e, t, vn(t, n, r)));
+	}
+	function Lr(e, t, n, r) {
+		r.commit(Ke(e, t, {
+			from: {
+				kind: "CONSTANT",
+				value: n
+			},
+			parameter: t
+		}));
+	}
+	function Rr(e, t) {
+		let n = A(e), r = Array.isArray(e.defaultValue) ? e.defaultValue : [], i = e.options.map(Re), a = i.filter((e) => r.includes(e.id));
+		return /* @__PURE__ */ v(g, { children: [$("預設值", "fieldDefaultValue", n === "multiple" ? /* @__PURE__ */ _(p, {
+			clearable: !0,
+			mode: "multiple",
+			onChange: (n) => t({
+				...e,
+				defaultValue: n.length ? n.map((e) => e.id) : void 0
+			}),
+			options: i,
+			placeholder: "選擇一或多個預設選項",
+			value: a
+		}) : /* @__PURE__ */ _(p, {
+			clearable: !0,
+			onChange: (n) => t({
+				...e,
+				defaultValue: n?.id || void 0
+			}),
+			options: i,
+			placeholder: "選擇預設選項",
+			value: typeof e.defaultValue == "string" ? E(i, e.defaultValue) : null
+		})), $("選項", "fieldOptions", Kr(e, t), !0)] });
+	}
+	function zr(e, t) {
+		let n = typeof e.defaultValue == "boolean" ? String(e.defaultValue) : "unset";
+		return $("預設值", "fieldDefaultValue", /* @__PURE__ */ _(p, {
+			clearable: !1,
+			onChange: (n) => t({
+				...e,
+				defaultValue: n?.id === "true" || n?.id !== "false" && void 0
+			}),
+			options: [...cn],
+			placeholder: "選擇預設狀態",
+			value: E(cn, n)
+		}));
+	}
+	function Br(e, t) {
+		return /* @__PURE__ */ v(g, { children: [$("檔案數", "fieldMaxFiles", Q(e.maxFiles, (n) => t({
+			...e,
+			maxFiles: n
+		}), "例如：1", { min: 1 })), $("MIME", "fieldAcceptedMimeTypes", Wr({
+			name: "fieldAcceptedMimeTypes",
+			onChange: (n) => t({
+				...e,
+				acceptedMimeTypes: En(n)
+			}),
+			placeholder: "每行一個 MIME type，例如：application/pdf",
+			rows: 3,
+			value: Dn(e.acceptedMimeTypes)
+		}), !1)] });
+	}
+	function Vr(e) {
+		let t = b.fields.filter((t) => t.fieldKey !== e.fieldKey);
+		return t.length ? /* @__PURE__ */ _(g, { children: un.map((n) => Hr(e, n, t)) }) : /* @__PURE__ */ _(h, {
+			color: "text-neutral",
+			style: Tt,
+			variant: "body",
+			children: "目前沒有其他欄位可作為條件來源。新增更多欄位後即可設定條件規則。"
+		});
+	}
+	function Hr(e, t, n) {
+		let r = e[t.target], i = r ? Oe(r) : null, a = n.find((e) => e.fieldKey === i?.fieldKey), o = a ?? n[0], s = n.map(Cn), c = Pe(o), l = i && c.some((e) => e.id === i.operator) ? i.operator : Ie(o), u = i?.value ?? Le(o), d = !!r, f = d && (!i || !a);
+		return $(t.label, t.name, /* @__PURE__ */ v("div", {
+			style: Pt,
+			children: [/* @__PURE__ */ _(se, {
+				checked: d,
+				label: d ? "已啟用" : "不啟用",
+				onChange: (e) => Z(t.target, e.target.checked ? w(o, Ie(o), Le(o)) : void 0),
+				size: "sub",
+				supportingText: t.supportingText
+			}), d ? f ? /* @__PURE__ */ _(h, {
+				color: "text-warning",
+				variant: "body",
+				children: "這個規則不是目前 UI 支援的格式。重新選擇條件後會取代既有規則。"
+			}) : /* @__PURE__ */ v("div", {
+				style: Ft,
+				children: [
+					/* @__PURE__ */ _(p, {
+						clearable: !1,
+						onChange: (e) => {
+							let r = n.find((t) => t.fieldKey === e?.id) ?? o;
+							Z(t.target, w(r, Ie(r), Le(r)));
+						},
+						options: s,
+						placeholder: "選擇欄位",
+						value: E(s, o.fieldKey)
+					}),
+					/* @__PURE__ */ _(p, {
+						clearable: !1,
+						onChange: (e) => Z(t.target, w(o, Ne(e?.id) ?? l, u)),
+						options: [...c],
+						placeholder: "判斷方式",
+						value: E(c, l)
+					}),
+					Ur(o, u, (e) => Z(t.target, w(o, l, e)))
+				]
+			}) : null]
+		}), !0);
+	}
+	function Z(e, t) {
+		J({ [e]: t });
+	}
+	function Ur(e, t, n) {
+		if (e.type === "boolean") return /* @__PURE__ */ _(p, {
+			clearable: !1,
+			onChange: (e) => n(e?.id ?? "true"),
+			options: [...ln],
+			placeholder: "比較值",
+			value: E(ln, t === "false" ? "false" : "true")
+		});
+		if (Te(e)) {
+			let r = e.options.map(Re);
+			return /* @__PURE__ */ _(p, {
+				clearable: !1,
+				onChange: (e) => n(e?.id ?? r[0]?.id ?? ""),
+				options: r,
+				placeholder: "比較值",
+				value: E(r, t)
+			});
+		}
+		return we(e) ? Q(ke(t), (e) => n(String(e ?? 0)), "比較值") : Se(e) ? Gr(e, t, (e) => n(e ?? "")) : /* @__PURE__ */ _(f, {
+			onChange: (e) => n(e.target.value),
+			placeholder: "比較值",
+			value: t,
+			variant: "base"
+		});
+	}
+	function Wr({ name: e, onChange: t, placeholder: n, rows: r, value: i }) {
+		return /* @__PURE__ */ _(oe, {
+			"aria-label": e,
+			onChange: (e) => t(e.target.value),
+			placeholder: n,
+			ref: Qt,
+			resize: "vertical",
+			rows: r,
+			style: kt,
+			value: i
+		});
+	}
+	function Q(e, t, n, r = {}) {
+		return /* @__PURE__ */ _(f, {
+			max: r.max,
+			min: r.min,
+			onChange: (e) => t(_e(ke(e.target.value), r)),
+			placeholder: n,
+			showSpinner: !0,
+			step: r.step ?? 1,
+			value: typeof e == "number" ? String(e) : "",
+			variant: "measure"
+		});
+	}
+	function Gr(e, t, n) {
+		return e.type === "datetime" ? /* @__PURE__ */ _(u, {
+			formatDate: "YYYY-MM-DD",
+			formatTime: "HH:mm",
+			hideSecond: !0,
+			onChange: (e) => n(xe(e)),
+			placeholderLeft: "選擇日期",
+			placeholderRight: "選擇時間",
+			value: Fe(t)
+		}) : /* @__PURE__ */ _(l, {
+			format: "YYYY-MM-DD",
+			onChange: (e) => n(be(e)),
+			placeholder: "選擇日期",
+			value: Fe(t)
+		});
+	}
+	function Kr(e, t) {
+		let n = e.options.map((t, n) => ({
+			index: n,
+			key: `${e.fieldKey}-${n}`,
+			label: t.label,
+			value: t.value
+		}));
+		return /* @__PURE__ */ v("div", {
+			style: Rt,
+			children: [/* @__PURE__ */ _(ie, {
+				actions: {
+					render: (n) => [{
+						disabled: () => e.options.length <= 1,
+						icon: he,
+						iconType: "icon-only",
+						name: "移除選項",
+						onClick: () => t({
+							...e,
+							options: e.options.filter((e, t) => t !== n.index)
+						}),
+						variant: "destructive-ghost"
+					}],
+					width: 56
+				},
+				columns: [{
+					key: "label",
+					render: (n) => /* @__PURE__ */ _(f, {
+						onChange: (r) => t({
+							...e,
+							options: On(e.options, n.index, { label: r.target.value })
+						}),
+						placeholder: "例如：主管",
+						size: "sub",
+						value: n.label,
+						variant: "base"
+					}),
+					title: "Label"
+				}, {
+					key: "value",
+					render: (n) => /* @__PURE__ */ _(f, {
+						onChange: (r) => t({
+							...e,
+							options: On(e.options, n.index, { value: r.target.value })
+						}),
+						placeholder: "例如：manager",
+						size: "sub",
+						value: n.value,
+						variant: "base"
+					}),
+					title: "Value"
+				}],
+				dataSource: n,
+				showHeader: !0,
+				size: "sub"
+			}), /* @__PURE__ */ _("div", {
+				style: zt,
+				children: /* @__PURE__ */ _(c, {
+					icon: me,
+					iconType: "leading",
+					onClick: () => t({
+						...e,
+						options: [...e.options, kn(e.options)]
+					}),
+					variant: "base-secondary",
+					children: "新增選項"
+				})
+			})]
+		});
+	}
+	function qr(e, t, n) {
+		return /* @__PURE__ */ _("div", {
+			...t.draggableProps,
+			"data-form-builder-field-key": e.fieldKey,
+			ref: t.innerRef,
+			style: {
+				...gt,
+				...n ? _t : null,
+				...t.draggableProps.style
+			},
+			children: /* @__PURE__ */ _(s, {
+				style: e.fieldKey === q?.fieldKey ? vt : void 0,
+				children: Jr(e, t, n)
+			})
+		});
+	}
+	function $(t, n, r, i = !1) {
+		return /* @__PURE__ */ _("div", {
+			style: i ? Dt : Et,
+			children: /* @__PURE__ */ _("div", {
+				style: Ot,
+				children: /* @__PURE__ */ _(e, {
+					label: t,
+					layout: i ? ce.VERTICAL : ce.STRETCH,
+					name: n,
+					children: r
+				})
+			})
+		});
+	}
+	function Jr(e, t, n) {
+		return /* @__PURE__ */ v("div", {
+			...t.dragHandleProps ?? {},
+			"aria-label": "選取或拖曳排序欄位",
+			onClick: () => B(e.fieldKey),
+			style: ft,
+			title: "點擊選取，拖曳排序",
+			children: [
+				/* @__PURE__ */ _("span", {
+					"aria-label": "拖曳排序",
+					role: "img",
+					style: It,
+					title: "拖曳排序",
+					children: /* @__PURE__ */ _(d, {
+						icon: fe,
+						size: 20
+					})
+				}),
+				/* @__PURE__ */ v("div", {
+					style: pt,
+					children: [/* @__PURE__ */ v(h, {
+						component: "span",
+						ellipsis: !0,
+						variant: "label-primary",
+						children: [e.label, e.required ? /* @__PURE__ */ _("sup", {
+							"aria-label": "必填",
+							style: Bt,
+							children: "*"
+						}) : null]
+					}), /* @__PURE__ */ v(h, {
+						color: "text-neutral",
+						component: "span",
+						ellipsis: !0,
+						variant: "caption",
+						children: [
+							dn(e.type),
+							" ·",
+							e.required ? " 必填" : " 選填",
+							" ·",
+							e.fieldKey
+						]
+					})]
+				}),
+				/* @__PURE__ */ v("div", {
+					onClick: (e) => e.stopPropagation(),
+					style: mt,
+					children: [/* @__PURE__ */ _("div", {
+						style: ht,
+						children: /* @__PURE__ */ _(se, {
+							checked: !!e.required,
+							disabled: n,
+							label: "必填",
+							onChange: (t) => sr(e.fieldKey, t.target.checked)
+						})
+					}), /* @__PURE__ */ _(c, {
+						disabled: n,
+						icon: he,
+						iconType: "icon-only",
+						onClick: () => Hn(e.fieldKey),
+						variant: "destructive-ghost",
+						children: "移除欄位"
+					})]
+				})
+			]
+		});
+	}
+	function Yr() {
+		return /* @__PURE__ */ v("div", {
+			style: L,
+			children: [/* @__PURE__ */ _(h, {
+				component: "h2",
+				variant: "h3",
+				children: "填寫預覽"
+			}), /* @__PURE__ */ _(t, {
+				dataSourceContext: { kind: "preview" },
+				onChange: or,
+				schema: b,
+				uiSchema: S,
+				value: M
+			})]
+		});
+	}
+	function Xr() {
+		return /* @__PURE__ */ v("div", {
+			style: L,
+			children: [/* @__PURE__ */ _(h, {
+				component: "h2",
+				variant: "h3",
+				children: "Schema"
+			}), /* @__PURE__ */ v("div", {
+				style: At,
+				children: [
+					Zr("Form Schema", "schemaJson", /* @__PURE__ */ _(tt, {
+						height: "360px",
+						name: "schemaJson",
+						onChange: cr,
+						placeholder: "輸入 Form Schema JSON",
+						value: pe
+					})),
+					Zr("UI Schema", "uiSchemaJson", /* @__PURE__ */ _(tt, {
+						height: "240px",
+						name: "uiSchemaJson",
+						onChange: lr,
+						placeholder: "輸入 UI Schema JSON",
+						value: $e
+					})),
+					et ? /* @__PURE__ */ _(h, {
+						color: "text-error",
+						style: Nt,
+						variant: "body",
+						children: et
+					}) : null
+				]
+			})]
+		});
+	}
+	function Zr(t, n, r) {
+		return /* @__PURE__ */ _("div", {
+			style: jt,
+			children: /* @__PURE__ */ _("div", {
+				style: Mt,
+				children: /* @__PURE__ */ _(e, {
+					label: t,
+					name: n,
+					children: r
+				})
+			})
+		});
+	}
+}
+function dn(e) {
+	return F.find((t) => t.type === e)?.label ?? e;
+}
+function fn(e) {
+	return `${e.key}@${e.version}`;
+}
+function pn(e) {
+	return [
+		e.supportsSearch ? `可輸入關鍵字搜尋${e.minimumSearchLength > 1 ? `（至少 ${e.minimumSearchLength} 字）` : ""}` : "不支援搜尋",
+		e.paginationMode === "CURSOR" ? `捲動載入更多（每次 ${e.pageSize} 筆）` : `一次載入完整清單（最多 ${e.maximumResultCount} 筆）`,
+		e.revalidationPolicy === "ALWAYS" ? "退回重送時一律重新確認" : "值與條件未變時沿用上次結果"
+	];
+}
+function mn(e) {
+	return {
+		id: fn(e),
+		name: e.label
+	};
+}
+function hn(e) {
+	return e ? e.from.kind === "FIELD" ? e.from.fieldKey : e.from.kind === "ROW_FIELD" ? `${rn}${e.from.columnKey}` : nn : an;
+}
+function gn(e) {
+	switch (e) {
+		case "BOOLEAN": return !1;
+		case "NUMBER": return 0;
+		case "STRING_ARRAY": return "";
+		case "STRING": return "";
+		default: return "";
+	}
+}
+function _n(e, t) {
+	let n = e?.from.kind === "CONSTANT" ? e.from.value : "";
+	return t === "NUMBER" ? typeof n == "number" ? String(n) : "" : typeof n == "string" ? n : "";
+}
+function vn(e, t, n) {
+	return !n || n === an ? null : n === nn ? {
+		from: {
+			kind: "CONSTANT",
+			value: gn(t)
+		},
+		parameter: e
+	} : n.startsWith(rn) ? {
+		from: {
+			columnKey: n.slice(14),
+			kind: "ROW_FIELD"
+		},
+		parameter: e
+	} : {
+		from: {
+			fieldKey: n,
+			kind: "FIELD"
+		},
+		parameter: e
+	};
+}
+function yn(e) {
+	return e.kind === "remove-field" ? "確認移除 dependency 欄位" : e.kind === "remove-column" ? "確認移除表格欄" : e.kind === "replace-column" ? "確認變更欄型別" : "確認變更選擇模式";
+}
+var z = [{
+	label: "選項 A",
+	value: "option_a"
+}, {
+	label: "選項 B",
+	value: "option_b"
+}];
+function bn(e) {
+	let t = [];
+	return e.defaultValue !== void 0 && t.push("預設值"), e.type === "text" && (typeof e.minLength == "number" || typeof e.maxLength == "number") && t.push("長度限制"), (e.type === "number" || e.type === "money") && (typeof e.minimum == "number" || typeof e.maximum == "number") && t.push("數值範圍"), D(e) ? t.push("選項來源設定") : O(e) && !B(e.options) && t.push(`${e.options.length} 個選項`), (e.type === "select" || e.type === "autocomplete") && e.mode === "multiple" && t.push("選擇模式"), t;
+}
+function B(e) {
+	return e.length === z.length && e.every((e, t) => e.label === z[t]?.label && e.value === z[t]?.value);
+}
+function xn(e, t) {
+	let n = {
+		fieldKey: e.fieldKey,
+		label: e.label,
+		required: e.required,
+		...e.description ? { description: e.description } : {},
+		...e.placeholder ? { placeholder: e.placeholder } : {}
+	};
+	return t === "select" || t === "autocomplete" ? {
+		...n,
+		mode: "single",
+		options: [...z],
+		type: t
+	} : {
+		...n,
+		type: t
+	};
+}
+function Sn(e) {
+	return !!(e.visibleWhen || e.requiredWhen || e.readonlyWhen);
+}
+function Cn(e) {
+	return {
+		id: e.fieldKey,
+		name: e.label
+	};
+}
+function wn(e) {
+	return e.type === "text" || e.type === "textarea";
+}
+function Tn(e) {
+	return typeof e == "string" ? e : "";
+}
+function En(e) {
+	let t = e.split(/[\n,]/u).map((e) => e.trim()).filter(Boolean);
+	return t.length ? t : void 0;
+}
+function Dn(e) {
+	return e?.join("\n") ?? "";
+}
+function V(e) {
+	return JSON.stringify(e, null, 2);
+}
+function On(e, t, n) {
+	return e.map((e, r) => r === t ? {
+		...e,
+		...n
+	} : e);
+}
+function kn(e) {
+	let t = e.length + 1;
+	return {
+		label: `選項 ${t}`,
+		value: H(e, t)
+	};
+}
+function H(e, t) {
+	let n = `option_${t}`;
+	return e.some((e) => e.value === n) ? H(e, t + 1) : n;
+}
+function An(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-D4xIuPYB.js.map