@rytass/bpm-core-react 0.8.0 → 0.9.1

package/dist/chunks/FormBuilderView-D8DrQOXD.js

@@ -1,1090 +0,0 @@
-"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