@rytass/bpm-core-react 0.2.0

package/dist/chunks/FormBuilderView-CvChAvgD.js

@@ -0,0 +1,1300 @@
+"use client";
+import { r as e } from "./router-adapter-BdHZXLS3.js";
+import { t } from "./format-date-time-CB-LxzqT.js";
+import { t as n } from "./app-navigation-CATITRM7.js";
+import { t as r } from "./bpm-form-field-Cao0rMol.js";
+import { t as i } from "./FormRendererView-DrHsuSVo.js";
+import { t as a } from "./form-name-modal-C3OEvkCV.js";
+import { useEffect as o, useMemo as s, useState as c } from "react";
+import { Accordion as l, Badge as u, BaseCard as d, Button as f, DatePicker as ee, DateTimePicker as te, Icon as ne, Input as p, Layout as re, PageHeader as ie, Section as ae, SectionGroup as oe, Select as m, Tab as se, TabItem as h, Table as ce, Textarea as le, Toggle as ue, Typography as g } from "@mezzanine-ui/react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { AlignLeftIcon as de, CalendarIcon as fe, CheckedIcon as pe, CheckedOutlineIcon as b, CurrencyDollarIcon as x, DotDragVerticalIcon as me, DotGridIcon as S, EditIcon as he, FileAttachmentIcon as C, FileIcon as ge, ListIcon as w, PlusIcon as _e, SaveIcon as ve, TrashIcon as ye } from "@mezzanine-ui/icons";
+import be from "@mezzanine-ui/react/ContentHeader";
+import { buildConditionExpression as T, buildFormRendererValues as xe, clampOptionalNumber as Se, createFieldDefinition as Ce, forkFormDefinition as we, formatDatePickerValue as Te, formatDateTimePickerValue as Ee, isDateFieldDefinition as De, isNumberFieldDefinition as Oe, isSelectFieldDefinition as ke, parseConditionRule as Ae, parseOptionalNumberInput as je, publishFormDefinitionVersion as Me, readConditionOperatorOption as Ne, readConditionOperatorOptions as Pe, readDatePickerValue as Fe, readDefaultConditionOperator as Ie, readDefaultConditionValue as Le, readFieldOptionAsSelectOption as E, readFormBuilder as Re, readSelectOption as D, updateFormDefinition as ze, updateFormDefinitionDraft as Be } from "@rytass/bpm-core-client/form";
+import { DragDropContext as Ve, Draggable as He, Droppable as Ue } from "@hello-pangea/dnd";
+import O from "next/dynamic";
+import { json as k } from "@codemirror/lang-json";
+import { EditorView as A } from "@codemirror/view";
+//#region src/views/forms/builder/json-code-editor.tsx
+var We = {
+	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%"
+}, j = [
+	k(),
+	A.lineWrapping,
+	A.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" }
+	})
+], Ge = O(() => import("@uiw/react-codemirror"), {
+	loading: () => /* @__PURE__ */ v("div", {
+		style: We,
+		children: "載入 JSON 編輯器"
+	}),
+	ssr: !1
+});
+function Ke({ disabled: e, height: t, name: n, onChange: r, placeholder: i, value: a }) {
+	return /* @__PURE__ */ v(Ge, {
+		"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: [...j],
+		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 qe = [
+	{
+		description: "單行文字、姓名、編號",
+		icon: de,
+		label: "文字",
+		type: "text"
+	},
+	{
+		description: "多行補充內容",
+		icon: ge,
+		label: "長文字",
+		type: "textarea"
+	},
+	{
+		description: "金額、數量、分數",
+		icon: x,
+		label: "數字",
+		type: "number"
+	},
+	{
+		description: "金額與費用",
+		icon: x,
+		label: "金額",
+		type: "money"
+	},
+	{
+		description: "日期或到期日",
+		icon: fe,
+		label: "日期",
+		type: "date"
+	},
+	{
+		description: "日期與時間",
+		icon: fe,
+		label: "日期時間",
+		type: "datetime"
+	},
+	{
+		description: "是 / 否狀態",
+		icon: pe,
+		label: "開關",
+		type: "boolean"
+	},
+	{
+		description: "固定選項擇一",
+		icon: w,
+		label: "下拉選單",
+		type: "select"
+	},
+	{
+		description: "固定選項單選",
+		icon: S,
+		label: "單選",
+		type: "radio"
+	},
+	{
+		description: "固定選項複選",
+		icon: b,
+		label: "複選",
+		type: "checkbox"
+	},
+	{
+		description: "附件或佐證資料",
+		icon: C,
+		label: "附件",
+		type: "file_upload"
+	}
+], Je = {
+	alignItems: "start",
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 16
+}, Ye = {
+	flex: "0.55 1 300px",
+	minWidth: 0
+}, Xe = {
+	flex: "1.45 1 720px",
+	minWidth: 620
+}, M = {
+	display: "grid",
+	gap: 12
+}, Ze = {
+	display: "flex",
+	flexWrap: "wrap",
+	gap: 6
+}, Qe = {
+	flex: "0 0 auto",
+	whiteSpace: "nowrap"
+}, $e = {
+	display: "grid",
+	gap: 8
+}, et = {
+	alignItems: "center",
+	cursor: "grab",
+	display: "flex",
+	gap: 12,
+	touchAction: "none"
+}, tt = {
+	display: "grid",
+	flex: "1 1 auto",
+	gap: 2,
+	minWidth: 0
+}, nt = {
+	alignItems: "center",
+	display: "flex",
+	flex: "0 0 auto",
+	gap: 4
+}, rt = {
+	alignItems: "center",
+	display: "flex",
+	gap: 6
+}, it = { userSelect: "none" }, at = { filter: "drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12))" }, ot = {
+	alignItems: "center",
+	border: "1px dashed var(--mzn-color-border-neutral)",
+	borderRadius: 6,
+	display: "grid",
+	gap: 12,
+	minHeight: 240,
+	padding: 32,
+	textAlign: "center"
+}, st = {
+	display: "flex",
+	gap: 8,
+	justifyContent: "center"
+}, ct = {
+	display: "grid",
+	gap: 14
+}, lt = {
+	display: "grid",
+	columnGap: 16,
+	gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+	rowGap: 8
+}, ut = { gridColumn: "1 / -1" }, dt = {
+	alignItems: "center",
+	display: "flex",
+	gap: 8,
+	gridColumn: "1 / -1",
+	justifyContent: "flex-end"
+}, ft = { gridColumn: "1 / -1" }, pt = {
+	alignItems: "start",
+	display: "block",
+	width: "100%"
+}, mt = {
+	...pt,
+	gridColumn: "1 / -1"
+}, ht = {
+	minWidth: 0,
+	width: "100%"
+}, gt = {
+	minWidth: "100%",
+	width: "100%"
+}, _t = {
+	display: "grid",
+	gap: 14
+}, vt = {
+	alignItems: "start",
+	display: "block",
+	width: "100%"
+}, yt = {
+	minWidth: 0,
+	width: "100%"
+}, bt = { gridColumn: "2 / -1" }, xt = {
+	display: "grid",
+	gap: 10,
+	width: "100%"
+}, St = {
+	display: "grid",
+	gap: 8,
+	gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))"
+}, Ct = { display: "inline-flex" }, wt = {
+	display: "grid",
+	gap: 16
+}, Tt = {
+	display: "grid",
+	gap: 8
+}, Et = {
+	display: "flex",
+	justifyContent: "flex-end"
+}, Dt = {
+	color: "var(--mzn-color-text-error)",
+	fontSize: "0.72em",
+	lineHeight: 0,
+	marginLeft: 2,
+	verticalAlign: "super"
+};
+function Ot(e) {
+	e && (e.style.width = "100%");
+}
+var N = {
+	fields: [],
+	schemaVersion: 1
+}, P = {
+	layout: [],
+	schemaVersion: 1
+}, kt = [
+	{
+		id: "unset",
+		name: "不預設"
+	},
+	{
+		id: "true",
+		name: "是"
+	},
+	{
+		id: "false",
+		name: "否"
+	}
+], At = [{
+	id: "true",
+	name: "是"
+}, {
+	id: "false",
+	name: "否"
+}], jt = [
+	{
+		label: "顯示",
+		name: "fieldVisibleWhen",
+		supportingText: "符合條件時才顯示這個欄位。",
+		target: "visibleWhen"
+	},
+	{
+		label: "必填",
+		name: "fieldRequiredWhen",
+		supportingText: "符合條件時才要求填寫這個欄位。",
+		target: "requiredWhen"
+	},
+	{
+		label: "唯讀",
+		name: "fieldReadonlyWhen",
+		supportingText: "符合條件時不允許修改這個欄位。",
+		target: "readonlyWhen"
+	}
+];
+function F({ formId: de }) {
+	let fe = e(), b = de, [x, S] = c(null), [C, ge] = c(null), [w, O] = c(N), [k, A] = c(P), [We, j] = c(I(N)), [Ge, F] = c(I(P)), [Vt, Gt] = c({}), [Jt, R] = c(null), [z, Yt] = c("design"), [B, V] = c(null), [Xt, H] = c(null), [Zt, Qt] = c(!1), [$t, en] = c(Ht(N, P)), [tn, nn] = c(!0), [rn, an] = c(!1), [U, W] = c(!1);
+	o(() => {
+		gn();
+	}, [b]), o(() => {
+		w.fields.some((e) => e.fieldKey === B) || V(w.fields[0]?.fieldKey ?? null);
+	}, [w.fields, B]), o(() => {
+		Gt((e) => xe(w.fields, e));
+	}, [w.fields]), o(() => {
+		z !== "advanced" && (j(I(w)), F(I(k)));
+	}, [
+		z,
+		w,
+		k
+	]);
+	let G = s(() => w.fields.find((e) => e.fieldKey === B) ?? w.fields[0] ?? null, [w.fields, B]), on = s(() => (x?.versions ?? []).map((e) => ({
+		key: e.id,
+		publishedAt: t(e.publishedAt),
+		status: e.status,
+		updatedAt: t(e.updatedAt),
+		version: `v${e.version}`
+	})), [x]), sn = s(() => [
+		{
+			dataIndex: "version",
+			key: "version",
+			title: "版本",
+			width: 120
+		},
+		{
+			key: "status",
+			render: (e) => /* @__PURE__ */ v(qt, { status: e.status }),
+			title: "狀態",
+			width: 140
+		},
+		{
+			dataIndex: "updatedAt",
+			key: "updatedAt",
+			title: "最後更新",
+			width: 180
+		},
+		{
+			dataIndex: "publishedAt",
+			key: "publishedAt",
+			title: "發布時間",
+			width: 180
+		}
+	], []), cn = s(() => Ht(w, k), [w, k]), K = cn.schemaJson !== $t.schemaJson || cn.uiSchemaJson !== $t.uiSchemaJson;
+	o(() => {
+		function e(e) {
+			K && (e.preventDefault(), e.returnValue = "");
+		}
+		return window.addEventListener("beforeunload", e), () => {
+			window.removeEventListener("beforeunload", e);
+		};
+	}, [K]);
+	function ln() {
+		K && !window.confirm("目前有尚未儲存的表單草稿，確定要離開嗎？") || fe.push("/forms");
+	}
+	let un = s(() => Ut(x?.versions ?? [], x?.definition.currentVersionId), [x?.definition.currentVersionId, x?.versions]), dn = C ?? un ?? x?.versions[0] ?? null, fn = !K && dn?.status === "PUBLISHED", pn = Wt({
+		hasUnsavedChanges: K,
+		latestPublishedVersion: un,
+		openedContentPublished: fn,
+		openedVersion: dn
+	}), mn = U || !K && fn && !C, hn = K ? "保存並發布" : C ? "發布草稿" : fn ? "已發布" : "發布版本";
+	async function gn() {
+		nn(!0), H(null);
+		try {
+			let e = await Re(b), t = e.versions.find((e) => e.status === "DRAFT") ?? null;
+			S(e), ge(t);
+			let n = t?.schema ?? e.versions[0]?.schema ?? N, r = t?.uiSchema ?? e.versions[0]?.uiSchema ?? P;
+			O(n), A(r), en(Ht(n, r)), j(I(n)), F(I(r)), V(t?.schema.fields[0]?.fieldKey ?? e.versions[0]?.schema.fields[0]?.fieldKey ?? null), R(null);
+		} catch (e) {
+			H(L(e));
+		} finally {
+			nn(!1);
+		}
+	}
+	async function _n() {
+		let e = await Be((C ?? await we(b)).id, w, k);
+		return ge(e), e;
+	}
+	async function vn() {
+		W(!0), H(null);
+		try {
+			await _n(), await gn();
+		} catch (e) {
+			H(L(e));
+		} finally {
+			W(!1);
+		}
+	}
+	async function yn() {
+		W(!0), H(null);
+		try {
+			await Me((await _n()).id), await gn();
+		} catch (e) {
+			H(L(e));
+		} finally {
+			W(!1);
+		}
+	}
+	async function bn(e) {
+		if (!x) throw Error("尚未載入表單資料");
+		an(!0);
+		try {
+			let t = await ze(x.definition.id, e);
+			S({
+				...x,
+				definition: t
+			}), Qt(!1);
+		} finally {
+			an(!1);
+		}
+	}
+	function xn(e) {
+		let t = Ce(e, w.fields.length + 1);
+		O({
+			...w,
+			fields: [...w.fields, t]
+		}), A({
+			...k,
+			layout: [...k.layout, {
+				fieldKey: t.fieldKey,
+				width: e === "textarea" || e === "file_upload" ? "FULL" : "HALF"
+			}]
+		}), V(t.fieldKey), Yt("design"), R(null);
+	}
+	function Sn(e) {
+		let t = e;
+		t === "advanced" && z !== "advanced" && (j(I(w)), F(I(k))), Yt(t);
+	}
+	function Cn(e) {
+		let t = w.fields.filter((t) => t.fieldKey !== e);
+		O({
+			...w,
+			fields: t
+		}), A({
+			...k,
+			layout: k.layout.filter((t) => t.fieldKey !== e)
+		}), V(B === e ? t[0]?.fieldKey ?? null : B), R(null);
+	}
+	function wn(e) {
+		let t = e.destination;
+		t && e.source.index !== t.index && (O((n) => ({
+			...n,
+			fields: Kt(n.fields, e.source.index, t.index)
+		})), A((n) => ({
+			...n,
+			layout: Kt(n.layout, e.source.index, t.index)
+		})), R(null));
+	}
+	function q(e) {
+		J((t) => ({
+			...t,
+			...e
+		}));
+	}
+	function J(e) {
+		if (!G) return;
+		let t = G.fieldKey, n = e(G), r = n.fieldKey;
+		O({
+			...w,
+			fields: w.fields.map((e) => e.fieldKey === t ? n : e)
+		}), A({
+			...k,
+			layout: k.layout.map((e) => e.fieldKey === t ? {
+				...e,
+				fieldKey: r
+			} : e)
+		}), V(r), R(null);
+	}
+	function Y(e) {
+		J((t) => Ft(t) ? {
+			...t,
+			...e
+		} : t);
+	}
+	function Tn(e) {
+		J((t) => Oe(t) ? {
+			...t,
+			...e
+		} : t);
+	}
+	function En(e) {
+		J((t) => De(t) ? {
+			...t,
+			...e
+		} : t);
+	}
+	function X(e) {
+		J((t) => ke(t) ? {
+			...t,
+			...e
+		} : t);
+	}
+	function Dn(e) {
+		J((t) => t.type === "boolean" ? {
+			...t,
+			...e
+		} : t);
+	}
+	function On(e) {
+		J((t) => t.type === "file_upload" ? {
+			...t,
+			...e
+		} : t);
+	}
+	function kn(e) {
+		Gt(e);
+	}
+	function An(e, t) {
+		O((n) => ({
+			...n,
+			fields: n.fields.map((n) => n.fieldKey === e ? {
+				...n,
+				required: t
+			} : n)
+		})), R(null);
+	}
+	function jn(e) {
+		j(e);
+		try {
+			O(JSON.parse(e)), R(null);
+		} catch {
+			R("Form Schema JSON 格式不正確");
+		}
+	}
+	function Mn(e) {
+		F(e);
+		try {
+			A(JSON.parse(e)), R(null);
+		} catch {
+			R("UI Schema JSON 格式不正確");
+		}
+	}
+	return /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ y(re, { children: [/* @__PURE__ */ v(n, { activeHref: "/forms" }), /* @__PURE__ */ y(re.Main, { children: [/* @__PURE__ */ v(ie, { children: /* @__PURE__ */ y(be, {
+		description: pn,
+		onBackClick: ln,
+		title: x?.definition.name ?? "表單設計器",
+		children: [
+			/* @__PURE__ */ v(f, {
+				"aria-label": "修改表單名稱",
+				disabled: rn || !x,
+				icon: he,
+				iconType: "icon-only",
+				onClick: () => Qt(!0),
+				variant: "base-ghost",
+				children: "修改表單名稱"
+			}),
+			/* @__PURE__ */ v(f, {
+				"aria-label": "儲存草稿",
+				disabled: U || !K,
+				icon: ve,
+				iconType: "icon-only",
+				onClick: () => void vn(),
+				variant: "base-secondary",
+				children: "儲存草稿"
+			}),
+			/* @__PURE__ */ v(f, {
+				disabled: mn,
+				icon: pe,
+				iconType: "leading",
+				onClick: () => void yn(),
+				variant: "base-primary",
+				children: hn
+			})
+		]
+	}) }), /* @__PURE__ */ v(oe, { children: /* @__PURE__ */ v(ae, { children: /* @__PURE__ */ y("div", {
+		style: wt,
+		children: [
+			Xt ? /* @__PURE__ */ v(g, {
+				color: "text-error",
+				variant: "body",
+				children: Xt
+			}) : null,
+			/* @__PURE__ */ y(se, {
+				activeKey: z,
+				onChange: Sn,
+				size: "sub",
+				children: [
+					/* @__PURE__ */ v(h, { children: "設計" }, "design"),
+					/* @__PURE__ */ v(h, { children: "預覽" }, "preview"),
+					/* @__PURE__ */ v(h, { children: "版本" }, "versions"),
+					/* @__PURE__ */ v(h, { children: "進階" }, "advanced")
+				]
+			}),
+			z === "design" ? Nn() : null,
+			z === "preview" ? Qn() : null,
+			z === "versions" ? $n() : null,
+			z === "advanced" ? er() : null
+		]
+	}) }) })] })] }), /* @__PURE__ */ v(a, {
+		confirmText: "儲存",
+		initialName: x?.definition.name ?? "",
+		loading: rn,
+		onClose: () => Qt(!1),
+		onSubmit: bn,
+		open: Zt,
+		title: "修改表單名稱"
+	})] });
+	function Nn() {
+		return /* @__PURE__ */ y("div", {
+			style: M,
+			children: [/* @__PURE__ */ y("div", {
+				style: $e,
+				children: [/* @__PURE__ */ v(g, {
+					component: "h2",
+					variant: "label-primary",
+					children: "新增欄位"
+				}), /* @__PURE__ */ v("div", {
+					style: Ze,
+					children: qe.map((e) => /* @__PURE__ */ v(f, {
+						disabled: U,
+						icon: e.icon,
+						iconType: "leading",
+						onClick: () => xn(e.type),
+						size: "sub",
+						style: Qe,
+						type: "button",
+						variant: "base-secondary",
+						children: e.label
+					}, e.type))
+				})]
+			}), /* @__PURE__ */ y("div", {
+				style: Je,
+				children: [/* @__PURE__ */ y("div", {
+					style: {
+						...M,
+						...Ye
+					},
+					children: [/* @__PURE__ */ v(g, {
+						component: "h2",
+						variant: "label-primary",
+						children: "表單畫布"
+					}), w.fields.length > 0 ? /* @__PURE__ */ v(Ve, {
+						onDragEnd: wn,
+						children: /* @__PURE__ */ v(Ue, {
+							droppableId: "form-builder-fields",
+							children: (e) => /* @__PURE__ */ y("div", {
+								...e.droppableProps,
+								ref: e.innerRef,
+								style: M,
+								children: [w.fields.map((e, t) => /* @__PURE__ */ v(He, {
+									draggableId: e.fieldKey,
+									index: t,
+									isDragDisabled: U,
+									children: (t, n) => Xn(e, t, n.isDragging)
+								}, e.fieldKey)), e.placeholder]
+							})
+						})
+					}) : /* @__PURE__ */ y("div", {
+						style: ot,
+						children: [/* @__PURE__ */ y("div", {
+							style: M,
+							children: [/* @__PURE__ */ v(g, {
+								component: "h3",
+								variant: "h3",
+								children: "尚未建立欄位"
+							}), /* @__PURE__ */ v(g, {
+								color: "text-neutral",
+								variant: "body",
+								children: "從上方新增第一個欄位，或直接建立常用文字欄位開始設計。"
+							})]
+						}), /* @__PURE__ */ y("div", {
+							style: st,
+							children: [/* @__PURE__ */ v(f, {
+								disabled: U,
+								onClick: () => xn("text"),
+								variant: "base-primary",
+								children: "新增文字欄位"
+							}), /* @__PURE__ */ v(f, {
+								disabled: U,
+								onClick: () => xn("textarea"),
+								variant: "base-secondary",
+								children: "新增長文字"
+							})]
+						})]
+					})]
+				}), /* @__PURE__ */ y("div", {
+					style: {
+						...M,
+						...Xe
+					},
+					children: [/* @__PURE__ */ v(g, {
+						component: "h2",
+						variant: "label-primary",
+						children: "欄位設定"
+					}), G ? Pn(G) : /* @__PURE__ */ v(g, {
+						color: "text-neutral",
+						variant: "body",
+						children: "請先新增或選取欄位。"
+					})]
+				})]
+			})]
+		});
+	}
+	function Pn(e) {
+		return /* @__PURE__ */ y("div", {
+			style: ct,
+			children: [Fn(e), In(e)]
+		});
+	}
+	function Fn(e) {
+		return /* @__PURE__ */ y("div", {
+			style: lt,
+			children: [
+				/* @__PURE__ */ v("div", {
+					style: dt,
+					children: /* @__PURE__ */ v(u, {
+						size: "main",
+						text: Mt(e.type),
+						variant: "text-info"
+					})
+				}),
+				$("標題", "fieldLabel", /* @__PURE__ */ v(p, {
+					onChange: (e) => q({ label: e.target.value }),
+					placeholder: "例如：申請金額",
+					value: e.label,
+					variant: "base"
+				}), U),
+				$("欄位 Key", "fieldKey", /* @__PURE__ */ v(p, {
+					onChange: (e) => q({ fieldKey: e.target.value }),
+					placeholder: "例如：amount",
+					value: e.fieldKey,
+					variant: "base"
+				}), U),
+				$("提示文字", "fieldPlaceholder", /* @__PURE__ */ v(p, {
+					onChange: (e) => q({ placeholder: e.target.value || void 0 }),
+					placeholder: "例如：請輸入申請金額",
+					value: e.placeholder ?? "",
+					variant: "base"
+				}), U),
+				Ln(e)
+			]
+		});
+	}
+	function In(e) {
+		return /* @__PURE__ */ v(l, {
+			defaultExpanded: Nt(e),
+			size: "sub",
+			title: "進階設定",
+			children: /* @__PURE__ */ y("div", {
+				style: lt,
+				children: [
+					/* @__PURE__ */ v(g, {
+						component: "h3",
+						style: ut,
+						variant: "label-primary",
+						children: "條件規則"
+					}),
+					/* @__PURE__ */ v(g, {
+						color: "text-neutral",
+						style: ft,
+						variant: "body",
+						children: "只有需要根據其他欄位改變顯示、必填或唯讀狀態時才需要設定。"
+					}),
+					Wn(e)
+				]
+			})
+		});
+	}
+	function Ln(e) {
+		return Ft(e) ? Rn(e) : Oe(e) ? zn(e) : De(e) ? Bn(e) : ke(e) ? Vn(e) : e.type === "boolean" ? Hn(e) : Un(e);
+	}
+	function Rn(e) {
+		return /* @__PURE__ */ y(_, { children: [
+			$("預設值", "fieldDefaultValue", e.type === "textarea" ? qn({
+				disabled: U,
+				name: "fieldDefaultValue",
+				onChange: (e) => Y({ defaultValue: e || void 0 }),
+				placeholder: "輸入此欄位的預設文字",
+				rows: 3,
+				value: It(e.defaultValue)
+			}) : /* @__PURE__ */ v(p, {
+				onChange: (e) => Y({ defaultValue: e.target.value || void 0 }),
+				placeholder: "輸入此欄位的預設文字",
+				value: It(e.defaultValue),
+				variant: "base"
+			}), U),
+			$("最小長度", "fieldMinLength", Q(e.minLength, (e) => Y({ minLength: e }), "例如：2", { min: 0 }), U),
+			$("最大長度", "fieldMaxLength", Q(e.maxLength, (e) => Y({ maxLength: e }), "例如：100", { min: 1 }), U)
+		] });
+	}
+	function zn(e) {
+		return /* @__PURE__ */ y(_, { children: [
+			$("預設值", "fieldDefaultValue", Q(typeof e.defaultValue == "number" ? e.defaultValue : void 0, (e) => Tn({ defaultValue: e }), e.type === "money" ? "例如：1000" : "輸入預設數值", {
+				max: e.maximum,
+				min: e.minimum
+			}), U),
+			$("最小值", "fieldMinimum", Q(e.minimum, (e) => Tn({ minimum: e }), "例如：0"), U),
+			$("最大值", "fieldMaximum", Q(e.maximum, (e) => Tn({ maximum: e }), "例如：999999"), U)
+		] });
+	}
+	function Bn(e) {
+		return $("預設值", "fieldDefaultValue", Jn(e, It(e.defaultValue), (e) => En({ defaultValue: e })), U);
+	}
+	function Vn(e) {
+		let t = Array.isArray(e.defaultValue) ? e.defaultValue : [], n = e.options.filter((e) => t.includes(e.value)).map(E);
+		return /* @__PURE__ */ y(_, { children: [$("預設值", "fieldDefaultValue", e.type === "checkbox" ? /* @__PURE__ */ v(m, {
+			clearable: !0,
+			mode: "multiple",
+			onChange: (e) => X({ defaultValue: e.length ? e.map((e) => e.id) : void 0 }),
+			options: e.options.map(E),
+			placeholder: "選擇一或多個預設選項",
+			value: n
+		}) : /* @__PURE__ */ v(m, {
+			clearable: !0,
+			onChange: (e) => X({ defaultValue: e?.id || void 0 }),
+			options: e.options.map(E),
+			placeholder: "選擇預設選項",
+			value: typeof e.defaultValue == "string" ? D(e.options.map(E), e.defaultValue) : null
+		}), U), $("選項", "fieldOptions", Yn(e), U, !0)] });
+	}
+	function Hn(e) {
+		let t = typeof e.defaultValue == "boolean" ? String(e.defaultValue) : "unset";
+		return $("預設值", "fieldDefaultValue", /* @__PURE__ */ v(m, {
+			clearable: !1,
+			onChange: (e) => Dn({ defaultValue: e?.id === "true" ? !0 : e?.id === "false" ? !1 : void 0 }),
+			options: [...kt],
+			placeholder: "選擇預設狀態",
+			value: D(kt, t)
+		}), U);
+	}
+	function Un(e) {
+		return /* @__PURE__ */ y(_, { children: [$("檔案數", "fieldMaxFiles", Q(e.maxFiles, (e) => On({ maxFiles: e }), "例如：1", { min: 1 }), U), $("MIME", "fieldAcceptedMimeTypes", qn({
+			disabled: U,
+			name: "fieldAcceptedMimeTypes",
+			onChange: (e) => On({ acceptedMimeTypes: Lt(e) }),
+			placeholder: "每行一個 MIME type，例如：application/pdf",
+			rows: 3,
+			value: Rt(e.acceptedMimeTypes)
+		}), !1)] });
+	}
+	function Wn(e) {
+		let t = w.fields.filter((t) => t.fieldKey !== e.fieldKey);
+		return t.length ? /* @__PURE__ */ v(_, { children: jt.map((n) => Gn(e, n, t)) }) : /* @__PURE__ */ v(g, {
+			color: "text-neutral",
+			style: ft,
+			variant: "body",
+			children: "目前沒有其他欄位可作為條件來源。新增更多欄位後即可設定條件規則。"
+		});
+	}
+	function Gn(e, t, n) {
+		let r = e[t.target], i = r ? Ae(r) : null, a = n.find((e) => e.fieldKey === i?.fieldKey), o = a ?? n[0], s = n.map(Pt), 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__ */ y("div", {
+			style: xt,
+			children: [/* @__PURE__ */ v(ue, {
+				checked: d,
+				disabled: U,
+				label: d ? "已啟用" : "不啟用",
+				onChange: (e) => Z(t.target, e.target.checked ? T(o, Ie(o), Le(o)) : void 0),
+				size: "sub",
+				supportingText: t.supportingText
+			}), d ? f ? /* @__PURE__ */ v(g, {
+				color: "text-warning",
+				variant: "body",
+				children: "這個規則不是目前 UI 支援的格式。重新選擇條件後會取代既有規則。"
+			}) : /* @__PURE__ */ y("div", {
+				style: St,
+				children: [
+					/* @__PURE__ */ v(m, {
+						clearable: !1,
+						onChange: (e) => {
+							let r = n.find((t) => t.fieldKey === e?.id) ?? o;
+							Z(t.target, T(r, Ie(r), Le(r)));
+						},
+						options: s,
+						placeholder: "選擇欄位",
+						value: D(s, o.fieldKey)
+					}),
+					/* @__PURE__ */ v(m, {
+						clearable: !1,
+						onChange: (e) => Z(t.target, T(o, Ne(e?.id) ?? l, u)),
+						options: [...c],
+						placeholder: "判斷方式",
+						value: D(c, l)
+					}),
+					Kn(o, u, (e) => Z(t.target, T(o, l, e)))
+				]
+			}) : null]
+		}), U, !0);
+	}
+	function Z(e, t) {
+		q({ [e]: t });
+	}
+	function Kn(e, t, n) {
+		if (e.type === "boolean") return /* @__PURE__ */ v(m, {
+			clearable: !1,
+			onChange: (e) => n(e?.id ?? "true"),
+			options: [...At],
+			placeholder: "比較值",
+			value: D(At, t === "false" ? "false" : "true")
+		});
+		if (ke(e)) {
+			let r = e.options.map(E);
+			return /* @__PURE__ */ v(m, {
+				clearable: !1,
+				onChange: (e) => n(e?.id ?? r[0]?.id ?? ""),
+				options: r,
+				placeholder: "比較值",
+				value: D(r, t)
+			});
+		}
+		return Oe(e) ? Q(je(t), (e) => n(String(e ?? 0)), "比較值") : De(e) ? Jn(e, t, (e) => n(e ?? "")) : /* @__PURE__ */ v(p, {
+			onChange: (e) => n(e.target.value),
+			placeholder: "比較值",
+			value: t,
+			variant: "base"
+		});
+	}
+	function qn({ disabled: e, name: t, onChange: n, placeholder: r, rows: i, value: a }) {
+		return /* @__PURE__ */ v(le, {
+			"aria-label": t,
+			disabled: e,
+			onChange: (e) => n(e.target.value),
+			placeholder: r,
+			ref: Ot,
+			resize: "vertical",
+			rows: i,
+			style: gt,
+			value: a
+		});
+	}
+	function Q(e, t, n, r = {}) {
+		return /* @__PURE__ */ v(p, {
+			max: r.max,
+			min: r.min,
+			onChange: (e) => t(Se(je(e.target.value), r)),
+			placeholder: n,
+			showSpinner: !0,
+			step: r.step ?? 1,
+			value: typeof e == "number" ? String(e) : "",
+			variant: "measure"
+		});
+	}
+	function Jn(e, t, n) {
+		return e.type === "datetime" ? /* @__PURE__ */ v(te, {
+			formatDate: "YYYY-MM-DD",
+			formatTime: "HH:mm",
+			hideSecond: !0,
+			onChange: (e) => n(Ee(e)),
+			placeholderLeft: "選擇日期",
+			placeholderRight: "選擇時間",
+			value: Fe(t)
+		}) : /* @__PURE__ */ v(ee, {
+			format: "YYYY-MM-DD",
+			onChange: (e) => n(Te(e)),
+			placeholder: "選擇日期",
+			value: Fe(t)
+		});
+	}
+	function Yn(e) {
+		return /* @__PURE__ */ y("div", {
+			style: Tt,
+			children: [/* @__PURE__ */ v(ce, {
+				actions: {
+					render: (t) => [{
+						disabled: () => U || e.options.length <= 1,
+						icon: ye,
+						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__ */ v(p, {
+						onChange: (n) => X({ options: zt(e.options, t.index, { label: n.target.value }) }),
+						placeholder: "例如：主管",
+						size: "sub",
+						value: t.label,
+						variant: "base"
+					}),
+					title: "Label"
+				}, {
+					key: "value",
+					render: (t) => /* @__PURE__ */ v(p, {
+						onChange: (n) => X({ options: zt(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__ */ v("div", {
+				style: Et,
+				children: /* @__PURE__ */ v(f, {
+					disabled: U,
+					icon: _e,
+					iconType: "leading",
+					onClick: () => X({ options: [...e.options, Bt(e.options)] }),
+					variant: "base-secondary",
+					children: "新增選項"
+				})
+			})]
+		});
+	}
+	function Xn(e, t, n) {
+		return /* @__PURE__ */ v("div", {
+			...t.draggableProps,
+			"data-form-builder-field-key": e.fieldKey,
+			ref: t.innerRef,
+			style: {
+				...it,
+				...n ? at : null,
+				...t.draggableProps.style
+			},
+			children: /* @__PURE__ */ v(d, { children: Zn(e, t, n) })
+		});
+	}
+	function $(e, t, n, i, a = !1) {
+		return /* @__PURE__ */ v("div", {
+			style: a ? mt : pt,
+			children: /* @__PURE__ */ v("div", {
+				style: ht,
+				children: /* @__PURE__ */ v(r, {
+					disabled: i,
+					label: e,
+					name: t,
+					children: n
+				})
+			})
+		});
+	}
+	function Zn(e, t, n) {
+		return /* @__PURE__ */ y("div", {
+			...t.dragHandleProps ?? {},
+			"aria-label": "拖曳排序欄位",
+			style: et,
+			title: "拖曳排序",
+			children: [
+				/* @__PURE__ */ v("span", {
+					"aria-label": "拖曳排序",
+					role: "img",
+					style: Ct,
+					title: "拖曳排序",
+					children: /* @__PURE__ */ v(ne, {
+						icon: me,
+						size: 20
+					})
+				}),
+				/* @__PURE__ */ y("div", {
+					style: tt,
+					children: [/* @__PURE__ */ y(g, {
+						component: "span",
+						ellipsis: !0,
+						variant: "label-primary",
+						children: [e.label, e.required ? /* @__PURE__ */ v("sup", {
+							"aria-label": "必填",
+							style: Dt,
+							children: "*"
+						}) : null]
+					}), /* @__PURE__ */ y(g, {
+						color: "text-neutral",
+						component: "span",
+						ellipsis: !0,
+						variant: "caption",
+						children: [
+							Mt(e.type),
+							" ·",
+							e.required ? " 必填" : " 選填",
+							" ·",
+							e.fieldKey
+						]
+					})]
+				}),
+				/* @__PURE__ */ y("div", {
+					style: nt,
+					children: [
+						/* @__PURE__ */ v("div", {
+							style: rt,
+							children: /* @__PURE__ */ v(ue, {
+								checked: !!e.required,
+								disabled: U || n,
+								label: "必填",
+								onChange: (t) => An(e.fieldKey, t.target.checked)
+							})
+						}),
+						/* @__PURE__ */ v(f, {
+							disabled: n,
+							icon: he,
+							iconType: "icon-only",
+							onClick: () => V(e.fieldKey),
+							variant: e.fieldKey === G?.fieldKey ? "base-primary" : "base-ghost",
+							children: "編輯欄位"
+						}),
+						/* @__PURE__ */ v(f, {
+							disabled: U || n,
+							icon: ye,
+							iconType: "icon-only",
+							onClick: () => Cn(e.fieldKey),
+							variant: "destructive-ghost",
+							children: "移除欄位"
+						})
+					]
+				})
+			]
+		});
+	}
+	function Qn() {
+		return /* @__PURE__ */ y("div", {
+			style: M,
+			children: [/* @__PURE__ */ v(g, {
+				component: "h2",
+				variant: "h3",
+				children: "填寫預覽"
+			}), /* @__PURE__ */ v(i, {
+				onChange: kn,
+				schema: w,
+				uiSchema: k,
+				value: Vt
+			})]
+		});
+	}
+	function $n() {
+		return /* @__PURE__ */ y("div", {
+			style: M,
+			children: [/* @__PURE__ */ v(g, {
+				component: "h2",
+				variant: "h3",
+				children: "版本紀錄"
+			}), /* @__PURE__ */ v(ce, {
+				columns: sn,
+				dataSource: on,
+				loading: tn
+			})]
+		});
+	}
+	function er() {
+		return /* @__PURE__ */ y("div", {
+			style: M,
+			children: [/* @__PURE__ */ v(g, {
+				component: "h2",
+				variant: "h3",
+				children: "Schema"
+			}), /* @__PURE__ */ y("div", {
+				style: _t,
+				children: [
+					tr("Form Schema", "schemaJson", /* @__PURE__ */ v(Ke, {
+						disabled: U,
+						height: "360px",
+						name: "schemaJson",
+						onChange: jn,
+						placeholder: "輸入 Form Schema JSON",
+						value: We
+					})),
+					tr("UI Schema", "uiSchemaJson", /* @__PURE__ */ v(Ke, {
+						disabled: U,
+						height: "240px",
+						name: "uiSchemaJson",
+						onChange: Mn,
+						placeholder: "輸入 UI Schema JSON",
+						value: Ge
+					})),
+					Jt ? /* @__PURE__ */ v(g, {
+						color: "text-error",
+						style: bt,
+						variant: "body",
+						children: Jt
+					}) : null
+				]
+			})]
+		});
+	}
+	function tr(e, t, n) {
+		return /* @__PURE__ */ v("div", {
+			style: vt,
+			children: /* @__PURE__ */ v("div", {
+				style: yt,
+				children: /* @__PURE__ */ v(r, {
+					disabled: U,
+					label: e,
+					name: t,
+					children: n
+				})
+			})
+		});
+	}
+}
+function Mt(e) {
+	return qe.find((t) => t.type === e)?.label ?? e;
+}
+function Nt(e) {
+	return !!(e.visibleWhen || e.requiredWhen || e.readonlyWhen);
+}
+function Pt(e) {
+	return {
+		id: e.fieldKey,
+		name: e.label
+	};
+}
+function Ft(e) {
+	return e.type === "text" || e.type === "textarea";
+}
+function It(e) {
+	return typeof e == "string" ? e : "";
+}
+function Lt(e) {
+	let t = e.split(/[\n,]/u).map((e) => e.trim()).filter(Boolean);
+	return t.length ? t : void 0;
+}
+function Rt(e) {
+	return e?.join("\n") ?? "";
+}
+function I(e) {
+	return JSON.stringify(e, null, 2);
+}
+function zt(e, t, n) {
+	return e.map((e, r) => r === t ? {
+		...e,
+		...n
+	} : e);
+}
+function Bt(e) {
+	let t = e.length + 1;
+	return {
+		label: `選項 ${t}`,
+		value: Vt(e, t)
+	};
+}
+function Vt(e, t) {
+	let n = `option_${t}`;
+	return e.some((e) => e.value === n) ? Vt(e, t + 1) : n;
+}
+function Ht(e, t) {
+	return {
+		schemaJson: I(e),
+		uiSchemaJson: I(t)
+	};
+}
+function Ut(e, t) {
+	return (t ? e.find((e) => e.id === t) : null) ?? e.find((e) => e.status === "PUBLISHED") ?? null;
+}
+function Wt({ hasUnsavedChanges: e, latestPublishedVersion: n, openedContentPublished: r, openedVersion: i }) {
+	return `${e ? "有未儲存修改" : "沒有未儲存修改"} · ${Gt({
+		hasUnsavedChanges: e,
+		openedContentPublished: r,
+		openedVersion: i
+	})} · ${n ? `目前發布 v${n.version}：${t(n.publishedAt)}` : "目前沒有已發布版本"}`;
+}
+function Gt({ hasUnsavedChanges: e, openedContentPublished: t, openedVersion: n }) {
+	return e ? n ? `修改尚未發布，來源 v${n.version}` : "修改尚未發布" : t && n ? `當前內容已發布 v${n.version}` : n ? `當前內容尚未發布 v${n.version}` : "當前內容尚未發布";
+}
+function Kt(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)
+	];
+}
+function qt({ status: e }) {
+	return e === "PUBLISHED" ? /* @__PURE__ */ v(u, {
+		size: "sub",
+		text: "已發布",
+		variant: "dot-success"
+	}) : e === "ARCHIVED" ? /* @__PURE__ */ v(u, {
+		size: "sub",
+		text: "已封存",
+		variant: "dot-inactive"
+	}) : /* @__PURE__ */ v(u, {
+		size: "sub",
+		text: "草稿",
+		variant: "dot-warning"
+	});
+}
+function L(e) {
+	return e instanceof Error ? e.message : "發生未知錯誤";
+}
+//#endregion
+export { F as t };
+
+//# sourceMappingURL=FormBuilderView-CvChAvgD.js.map