@rytass/bpm-core-react 0.11.0 → 0.12.0

package/dist/chunks/FormRendererView-DUceSOXe.js

@@ -0,0 +1,798 @@
+"use client";
+import { t as e } from "./bpm-form-field-Cao0rMol.js";
+import { useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
+import { AutoComplete as o, Button as s, CheckboxGroup as c, DatePicker as l, DateTimePicker as u, Input as d, RadioGroup as f, Select as p, Table as m, Textarea as h, Toggle as g, Typography as _, Upload as v } from "@mezzanine-ui/react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { PlusIcon as x, TrashIcon as S } from "@mezzanine-ui/icons";
+import { buildFormRendererValues as C, clampOptionalNumber as w, createFormTableRow as T, formatDatePickerValue as E, formatDateTimePickerValue as D, isFormRendererFieldReadonly as ee, isFormRendererFieldRequired as O, mergeFormDataSourceOptions as k, parseOptionalNumberInput as A, previewFormFieldOptions as te, previewResolveFormFieldOptions as j, readDatePickerValue as M, readFieldOptionAsSelectOption as N, readFormDataSourceErrorCode as ne, readFormDataSourceErrorMessage as re, readFormDataSourceSelectedValues as ie, readFormDataSourceValueSignature as P, readFormFieldOptions as ae, readFormTableCellPath as F, readFormTableRowBounds as oe, readFormTableRows as I, readMissingFormDataSourceDependencies as se, readMissingFormDataSourceOptionValues as ce, readSelectOption as le, readSelectedFormDataSourceOptions as ue, readVisibleFormRendererFields as L, resolveFormFieldOptions as de } from "@rytass/bpm-core-client/form";
+import { isFormDataSourceFieldDefinition as R, isFormStaticOptionFieldDefinition as z, isFormTableCellValue as B, isTableFieldDefinition as fe, readFormFieldSelectionMode as pe } from "@rytass/bpm-core-shared/form";
+//#region src/views/forms/renderer/form-data-source-field.ts
+var me = {
+	canRetry: !1,
+	error: null,
+	hasValue: !1,
+	hasNextPage: !1,
+	invalidValues: [],
+	onReachBottom: () => void 0,
+	onSearch: () => void 0,
+	options: [],
+	retry: () => void 0,
+	status: "IDLE"
+}, V = [], he = 10, ge = ["FORM_DATA_SOURCE_SEARCH_NOT_SUPPORTED", "FORM_DATA_SOURCE_SEARCH_TOO_SHORT"];
+function H(e) {
+	let o = R(e.field) ? e.field : null, s = e.fieldPath ?? o?.fieldKey ?? "", c = o ? e.optionSnapshots?.[e.snapshotKey ?? o.fieldKey] : void 0, l = o ? JSON.stringify({
+		dataSource: o.dataSource,
+		fieldKey: o.fieldKey,
+		type: o.type
+	}) : "", u = JSON.stringify(c ?? null), d = r(() => c?.options ?? [], [u]), f = JSON.stringify(e.formData), p = JSON.stringify(e.initialFormData ?? {}), m = JSON.stringify(e.schema), h = JSON.stringify(e.uiSchema), g = e.context?.kind, _ = e.context?.kind === "runtime" ? e.context.instanceId : void 0, v = e.context?.kind === "runtime" ? e.context.templateId : void 0, y = JSON.stringify(e.row?.values ?? null), b = JSON.stringify(e.row?.initialValues ?? null), x = o ? e.row ? e.row.values[o.fieldKey] : e.formData[o.fieldKey] : void 0, S = P(x), C = r(() => ie(x), [S]), w = C.length > 0, T = o ? JSON.stringify({
+		bindings: o.dataSource.bindings.map((t) => t.from.kind === "FIELD" ? {
+			fieldKey: t.from.fieldKey,
+			value: e.formData[t.from.fieldKey]
+		} : t.from.kind === "CONSTANT" ? { value: t.from.value } : {
+			columnKey: t.from.columnKey,
+			value: e.row?.values[t.from.columnKey]
+		}),
+		value: e.initialFormData !== void 0 || e.initialValue !== void 0 ? x : void 0
+	}) : "", E = r(() => {
+		if (g === "preview") return { kind: "preview" };
+		if (g === "runtime" && !e.readonly) return {
+			instanceId: _,
+			kind: "runtime",
+			templateId: v
+		};
+	}, [
+		_,
+		g,
+		v,
+		e.readonly
+	]), D = o ? (e.initialFormData !== void 0 || e.initialValue !== void 0) && P(e.initialValue) !== S : !1, ee = o ? e.initialFormData !== void 0 && o.dataSource.bindings.some((t) => t.from.kind === "FIELD" ? P(e.initialFormData?.[t.from.fieldKey]) !== P(e.formData[t.from.fieldKey]) : t.from.kind === "ROW_FIELD" && e.row?.initialValues ? P(e.row.initialValues[t.from.columnKey]) !== P(e.row.values[t.from.columnKey]) : !1) : !1, O = !!((c || w) && (D || ee)), A = !!(o && E && O && w), M = ve({
+		hasSnapshot: !!c,
+		hasValue: w,
+		isStale: O,
+		readonly: e.readonly
+	}), N = !!(o && E && o.type !== "autocomplete"), F = ye(O, N && o !== null && se(o, e.formData, e.row?.values).length > 0), [oe, I] = a([]), [ce, le] = a(""), [L, z] = a(null), [B, fe] = a(null), [pe, V] = a(() => o ? N ? F : M : "IDLE"), [H, U] = a(null), W = i(0), G = i(0), q = i(0), J = i(null), Y = i(null), Ce = i({
+		cursor: null,
+		searchText: ""
+	}), X = r(() => Se(e.formData), [f]), Z = r(() => e.row ? Se(e.row.values) : void 0, [y]), we = r(() => k(d, oe), [oe, d]), Te = B && B.signature === T ? B : null, Ee = A && !Te, De = _e({
+		options: we,
+		resolution: Te,
+		resolvePending: Ee,
+		value: x
+	}), Q = t((t, n) => {
+		if (!o || !E) return;
+		let r = G.current + 1;
+		G.current = r, Ce.current = {
+			cursor: n,
+			searchText: t
+		}, J.current?.abort();
+		let i = new AbortController();
+		J.current = i, V(F), U(null), (E.kind === "preview" ? te({
+			cursor: n,
+			fieldKey: s,
+			formData: X,
+			rowValues: Z,
+			schema: e.schema,
+			searchText: t,
+			signal: i.signal,
+			uiSchema: e.uiSchema
+		}) : ae({
+			cursor: n,
+			fieldKey: s,
+			formData: X,
+			instanceId: E.instanceId ?? null,
+			rowValues: Z,
+			searchText: t,
+			signal: i.signal,
+			templateId: E.templateId ?? null
+		})).then((e) => {
+			K(i, G, r) || (I((t) => {
+				let r = ue(x, t);
+				return k(r, n ? t : [], e.options);
+			}), z(e.nextCursor), U(null), W.current = n ? W.current + e.options.length : e.options.length, e.nextCursor && e.options.length > 0 && W.current < he && Oe.current(t, e.nextCursor), V(e.waitingForFieldKeys.length ? "WAITING_FOR_DEPENDENCIES" : "VALID"));
+		}).catch((e) => {
+			if (K(i, G, r)) return;
+			let t = re(e) ?? "選項來源暫時無法使用。", n = ne(e);
+			U(t), V(be(!!(n && ge.includes(n)), w));
+		});
+	}, [
+		S,
+		l,
+		E,
+		w,
+		F,
+		s,
+		X,
+		Z,
+		m,
+		h
+	]), Oe = i(Q);
+	Oe.current = Q;
+	let ke = t(() => {
+		if (!o || !E || C.length === 0) return;
+		let t = T, n = q.current + 1;
+		q.current = n, Y.current?.abort();
+		let r = new AbortController();
+		Y.current = r, U(null), (E.kind === "preview" ? j({
+			fieldKey: s,
+			formData: X,
+			rowValues: Z,
+			schema: e.schema,
+			signal: r.signal,
+			uiSchema: e.uiSchema,
+			values: C
+		}) : de({
+			fieldKey: s,
+			formData: X,
+			instanceId: E.instanceId ?? null,
+			rowValues: Z,
+			signal: r.signal,
+			templateId: E.templateId ?? null,
+			values: C
+		})).then((e) => {
+			if (!K(r, q, n)) {
+				if (e.waitingForFieldKeys.length) {
+					V("WAITING_FOR_DEPENDENCIES");
+					return;
+				}
+				I((t) => k(t, e.options)), fe({
+					signature: t,
+					unresolvedValues: e.unresolvedValues
+				}), V("VALID");
+			}
+		}).catch((e) => {
+			K(r, q, n) || (V("UNAVAILABLE"), U(re(e) ?? "選項來源暫時無法使用。"));
+		});
+	}, [
+		T,
+		l,
+		E,
+		s,
+		X,
+		Z,
+		m,
+		C,
+		h
+	]), Ae = i(ke);
+	Ae.current = ke, n(() => {
+		if (G.current += 1, J.current?.abort(), I((e) => ue(x, e)), z((e) => e === null ? e : null), le((e) => e && ""), U((e) => e && null), !o) {
+			V("IDLE");
+			return;
+		}
+		if (!N) {
+			V(M);
+			return;
+		}
+		Oe.current("", null);
+	}, [
+		N,
+		l,
+		E,
+		T,
+		p,
+		b,
+		e.readonly,
+		F,
+		M,
+		u
+	]), n(() => {
+		A && Ae.current();
+	}, [
+		T,
+		E,
+		A
+	]), n(() => () => {
+		J.current?.abort(), Y.current?.abort();
+	}, []);
+	let je = t((e) => {
+		le(e), I((e) => ue(x, e)), z(null), Q(e, null);
+	}, [Q]), Me = t(() => {
+		L && Q(ce, L);
+	}, [
+		Q,
+		L,
+		ce
+	]), Ne = t(() => {
+		E && (Q(Ce.current.searchText, Ce.current.cursor), A && Ae.current());
+	}, [
+		E,
+		Q,
+		A
+	]);
+	return o ? {
+		canRetry: !!E,
+		error: H,
+		hasValue: w,
+		hasNextPage: !!L,
+		invalidValues: De,
+		onReachBottom: Me,
+		onSearch: je,
+		options: we,
+		retry: Ne,
+		status: xe({
+			invalidValues: De,
+			resolvePending: Ee,
+			status: pe
+		})
+	} : me;
+}
+function U(e) {
+	switch (e.status) {
+		case "WAITING_FOR_DEPENDENCIES": return "請先填寫相依欄位。";
+		case "STALE": return "選項需要重新載入或驗證。";
+		case "INVALID": return e.invalidValues.length ? `無法辨識選項：${e.invalidValues.join("、")}` : "目前選項已失效，請重新選擇。";
+		case "UNAVAILABLE": return e.error ?? "選項來源暫時無法使用。";
+		case "VALID": return e.error ?? (e.options.length ? null : "目前沒有可用選項。");
+		default: return e.error;
+	}
+}
+function W(e) {
+	return e.hasValue && e.status !== "VALID";
+}
+function G(e) {
+	let t = e.filter(W);
+	return t.length === 0 ? null : t.every((e) => e.status === "LOADING" || e.status === "STALE") ? "選項驗證中，請稍候再送出。" : "請先完成動態選項驗證。";
+}
+function _e(e) {
+	return e.resolution ? e.resolution.unresolvedValues : e.resolvePending ? V : ce(e.value, e.options);
+}
+function ve(e) {
+	return e.isStale ? "STALE" : e.hasSnapshot ? "VALID" : e.readonly && e.hasValue ? "UNAVAILABLE" : "IDLE";
+}
+function ye(e, t) {
+	return t ? "WAITING_FOR_DEPENDENCIES" : e ? "STALE" : "LOADING";
+}
+function be(e, t) {
+	return e ? t ? "VALID" : "IDLE" : "UNAVAILABLE";
+}
+function xe(e) {
+	return e.status === "LOADING" || e.status === "UNAVAILABLE" || e.status === "WAITING_FOR_DEPENDENCIES" ? e.status : e.invalidValues.length ? "INVALID" : e.resolvePending ? "STALE" : e.status;
+}
+function K(e, t, n) {
+	return e.signal.aborted || t.current !== n;
+}
+function Se(e) {
+	return Object.entries(e).reduce((e, [t, n]) => n === void 0 ? e : {
+		...e,
+		[t]: n
+	}, {});
+}
+//#endregion
+//#region src/views/forms/renderer/FormRendererView.tsx
+var q = {
+	alignItems: "start",
+	display: "grid",
+	gap: 12,
+	gridTemplateColumns: "repeat(12, minmax(0, 1fr))"
+}, J = { gridColumn: "1 / -1" }, Y = {
+	alignItems: "start",
+	display: "grid",
+	gap: 8,
+	minWidth: 0
+}, Ce = {
+	minWidth: "100%",
+	width: "100%"
+};
+function X(e) {
+	e && (e.style.width = "100%");
+}
+function Z({ dataSourceContext: e, dataSourceInitialValues: t, emptyText: o = "尚未建立欄位。", errors: s = {}, maxWidth: c, onChange: l, onDataSourceStateChange: u, onUploadAttachment: d, optionSnapshots: f, readonly: p = !1, schema: m, singleColumn: h = !1, uiSchema: g, value: v }) {
+	let [b, x] = a(() => C(m.fields, v ?? {})), S = r(() => C(m.fields, v ?? b), [
+		b,
+		m.fields,
+		v
+	]), w = i(S), T = r(() => L(m, g, S), [
+		m,
+		g,
+		S
+	]);
+	n(() => {
+		w.current = S;
+	}, [S]), n(() => {
+		x((e) => C(m.fields, v ?? e));
+	}, [m.fields, v]);
+	function E(e, t) {
+		let n = {
+			...w.current,
+			[e]: t
+		};
+		w.current = n, v || x(n), l?.(n);
+	}
+	return T.length ? /* @__PURE__ */ y("div", {
+		style: {
+			...q,
+			...h ? { width: "100%" } : {}
+		},
+		children: T.map((n) => /* @__PURE__ */ y(we, {
+			dataSourceContext: e,
+			dataSourceInitialValues: t,
+			field: n,
+			error: s[n.fieldKey] ?? null,
+			errors: s,
+			fields: m.fields,
+			onChange: E,
+			onDataSourceStateChange: u,
+			onUploadAttachment: d,
+			optionSnapshots: f,
+			readonly: p,
+			schema: m,
+			style: {
+				...Y,
+				gridColumn: `span ${h ? 12 : Be(n, g)}`,
+				...h && !fe(n) ? { maxWidth: c } : {}
+			},
+			value: S[n.fieldKey],
+			values: S,
+			uiSchema: g
+		}, n.fieldKey))
+	}) : /* @__PURE__ */ y("div", {
+		style: q,
+		children: /* @__PURE__ */ y(_, {
+			color: "text-neutral",
+			style: J,
+			variant: "body",
+			children: m.fields.length > 0 ? "目前條件下沒有可填寫欄位。" : o
+		})
+	});
+}
+function we({ dataSourceContext: t, dataSourceInitialValues: r, error: i, errors: a, field: o, fields: c, onChange: l, onDataSourceStateChange: u, onUploadAttachment: d, optionSnapshots: f, readonly: p, schema: m, style: h, value: g, values: v, uiSchema: x }) {
+	let S = O(o, c, v), C = p || ee(o, c, v), w = H({
+		context: t,
+		field: o,
+		formData: v,
+		initialFormData: r,
+		initialValue: r?.[o.fieldKey],
+		optionSnapshots: f,
+		readonly: C,
+		schema: m,
+		uiSchema: x
+	}), T = U(w), E = JSON.stringify({
+		hasValue: w.hasValue,
+		invalidValues: w.invalidValues,
+		status: w.status
+	});
+	return n(() => {
+		R(o) && u?.(o.fieldKey, {
+			hasValue: w.hasValue,
+			invalidValues: w.invalidValues,
+			status: w.status
+		});
+	}, [
+		E,
+		o.fieldKey,
+		u
+	]), /* @__PURE__ */ b("div", {
+		"data-form-field-key": o.fieldKey,
+		style: h,
+		children: [
+			/* @__PURE__ */ y(e, {
+				label: o.label,
+				name: o.fieldKey,
+				required: S,
+				children: fe(o) ? /* @__PURE__ */ y(je, {
+					dataSourceContext: t,
+					dataSourceInitialValues: r,
+					errors: a,
+					field: o,
+					onChange: l,
+					onDataSourceStateChange: u,
+					optionSnapshots: f,
+					readonly: C,
+					schema: m,
+					uiSchema: x,
+					value: g,
+					values: v
+				}) : Le(o, g, C, l, d, t, w)
+			}),
+			i ? /* @__PURE__ */ y(_, {
+				color: "text-error",
+				variant: "caption",
+				children: i
+			}) : null,
+			T ? /* @__PURE__ */ b("div", {
+				style: Te,
+				children: [/* @__PURE__ */ y(_, {
+					color: w.status === "INVALID" || w.status === "UNAVAILABLE" ? "text-error" : "text-neutral",
+					variant: "caption",
+					children: T
+				}), w.status === "UNAVAILABLE" && w.canRetry ? /* @__PURE__ */ y(s, {
+					onClick: w.retry,
+					size: "sub",
+					type: "button",
+					variant: "base-ghost",
+					children: "重試"
+				}) : null]
+			}) : null
+		]
+	});
+}
+var Te = {
+	alignItems: "center",
+	display: "flex",
+	gap: 8
+}, Ee = {
+	display: "grid",
+	gap: 8,
+	minWidth: 0,
+	width: "100%"
+}, De = {
+	display: "flex",
+	justifyContent: "flex-start"
+}, Q = {
+	maxWidth: "100%",
+	overflowX: "auto"
+}, Oe = 160, ke = 56, Ae = {
+	display: "grid",
+	gap: 4,
+	minWidth: 0
+};
+function je({ dataSourceContext: e, dataSourceInitialValues: t, errors: r, field: o, onChange: c, onDataSourceStateChange: l, optionSnapshots: u, readonly: d, schema: f, uiSchema: p, value: h, values: g }) {
+	let _ = I(h), v = oe(o), C = i(0), [w, E] = a(() => _.map(() => Pe(C)));
+	n(() => {
+		w.length !== _.length && E(_.map(() => Pe(C)));
+	}, [w.length, _.length]);
+	function D(e) {
+		c(o.fieldKey, e);
+	}
+	function ee() {
+		E([...w, Pe(C)]), D([..._, T(o.columns)]);
+	}
+	function O(e) {
+		E(w.filter((t, n) => n !== e)), D(_.filter((t, n) => n !== e));
+	}
+	function k(e, t, n) {
+		D(_.map((r, i) => i === e ? Fe(r, t, n) : r));
+	}
+	let A = _.map((e, t) => ({
+		...e,
+		index: t,
+		key: w[t] ?? `row-${t}`
+	})), te = o.columns.map((n) => ({
+		key: n.fieldKey,
+		render: (i) => /* @__PURE__ */ y(Me, {
+			column: n,
+			dataSourceContext: e,
+			error: r[F(o.fieldKey, i.index, n.fieldKey)] ?? null,
+			fieldPath: `${o.fieldKey}.${n.fieldKey}`,
+			formData: g,
+			initialFormData: t,
+			initialRowValues: Ne(t?.[o.fieldKey], i.index),
+			onChange: (e) => k(i.index, n.fieldKey, e),
+			onDataSourceStateChange: l,
+			optionSnapshots: u,
+			path: F(o.fieldKey, i.index, n.fieldKey),
+			readonly: d,
+			rowValues: _[i.index] ?? {},
+			schema: f,
+			uiSchema: p
+		}, `${w[i.index] ?? i.index}-${n.fieldKey}`),
+		title: n.label || n.fieldKey
+	})), j = d ? void 0 : {
+		render: (e) => [{
+			disabled: () => _.length <= v.minRows,
+			icon: S,
+			iconType: "icon-only",
+			name: "刪除此列",
+			onClick: () => O(e.index),
+			variant: "destructive-ghost"
+		}],
+		width: 56
+	};
+	return /* @__PURE__ */ b("div", {
+		style: Ee,
+		children: [/* @__PURE__ */ y("div", {
+			style: Q,
+			children: /* @__PURE__ */ y("div", {
+				style: { minWidth: o.columns.length * Oe + (j ? ke : 0) },
+				children: /* @__PURE__ */ y(m, {
+					...j ? { actions: j } : {},
+					columns: te,
+					dataSource: [...A],
+					rowHeightPreset: "roomy",
+					showHeader: !0,
+					size: "sub"
+				})
+			})
+		}), d ? null : /* @__PURE__ */ y("div", {
+			style: De,
+			children: /* @__PURE__ */ y(s, {
+				disabled: _.length >= v.maxRows,
+				icon: x,
+				iconType: "leading",
+				onClick: ee,
+				size: "sub",
+				type: "button",
+				variant: "base-secondary",
+				children: o.addRowLabel || "新增一列"
+			})
+		})]
+	});
+}
+function Me({ column: e, dataSourceContext: t, error: r, fieldPath: i, formData: a, initialFormData: o, initialRowValues: c, onChange: l, onDataSourceStateChange: u, optionSnapshots: d, path: f, readonly: p, rowValues: m, schema: h, uiSchema: g }) {
+	let v = Ie(m, e.fieldKey), x = H({
+		context: t,
+		field: e,
+		fieldPath: i,
+		formData: a,
+		initialFormData: o,
+		initialValue: c ? Ie(c, e.fieldKey) : void 0,
+		optionSnapshots: d,
+		readonly: p,
+		row: {
+			initialValues: c,
+			values: m
+		},
+		schema: h,
+		snapshotKey: f,
+		uiSchema: g
+	}), S = U(x), C = JSON.stringify({
+		hasValue: x.hasValue,
+		invalidValues: x.invalidValues,
+		status: x.status
+	});
+	return n(() => {
+		if (R(e)) return u?.(f, {
+			hasValue: x.hasValue,
+			invalidValues: x.invalidValues,
+			status: x.status
+		}), () => {
+			u?.(f, {
+				hasValue: !1,
+				invalidValues: [],
+				status: "IDLE"
+			});
+		};
+	}, [
+		u,
+		f,
+		C
+	]), /* @__PURE__ */ b("div", {
+		"data-form-field-key": f,
+		style: Ae,
+		children: [
+			Le(e, v, p, (e, t) => l(t), void 0, t, x, "sub"),
+			r ? /* @__PURE__ */ y(_, {
+				color: "text-error",
+				variant: "caption",
+				children: r
+			}) : null,
+			S ? /* @__PURE__ */ b("div", {
+				style: Te,
+				children: [/* @__PURE__ */ y(_, {
+					color: x.status === "INVALID" || x.status === "UNAVAILABLE" ? "text-error" : "text-neutral",
+					variant: "caption",
+					children: S
+				}), x.status === "UNAVAILABLE" && x.canRetry ? /* @__PURE__ */ y(s, {
+					onClick: x.retry,
+					size: "sub",
+					type: "button",
+					variant: "base-ghost",
+					children: "重試"
+				}) : null]
+			}) : null
+		]
+	});
+}
+function Ne(e, t) {
+	return I(e)[t];
+}
+function Pe(e) {
+	return e.current += 1, `table-row-${e.current}`;
+}
+function Fe(e, t, n) {
+	return n === void 0 || !B(n) ? Object.fromEntries(Object.entries(e).filter(([e]) => e !== t)) : {
+		...e,
+		[t]: n
+	};
+}
+function Ie(e, t) {
+	if (!(!e || !Object.prototype.hasOwnProperty.call(e, t))) return e[t];
+}
+function Le(e, t, n, r, i, a, o, s = "main") {
+	return R(e) ? ze(e, t, n, r, a, o, s) : Re(e, t, n, r, i, s);
+}
+function Re(e, t, n, r, i, a = "main") {
+	if (e.type === "textarea") return /* @__PURE__ */ y(h, {
+		onChange: (t) => r(e.fieldKey, t.target.value),
+		placeholder: e.placeholder ?? "請輸入多行文字",
+		readOnly: n,
+		ref: X,
+		rows: 3,
+		style: Ce,
+		value: $(t)
+	});
+	if (e.type === "boolean") return /* @__PURE__ */ y(g, {
+		checked: t === !0,
+		disabled: n,
+		label: "啟用",
+		onChange: (t) => r(e.fieldKey, t.target.checked),
+		size: a
+	});
+	if (z(e) && e.type === "checkbox") {
+		let i = e.options.map(N);
+		return /* @__PURE__ */ y(p, {
+			mode: "multiple",
+			onChange: (t) => r(e.fieldKey, t?.length ? t.map((e) => e.id) : void 0),
+			options: i,
+			placeholder: e.placeholder ?? "請選擇一或多個選項",
+			readOnly: n,
+			size: a,
+			value: i.filter((e) => Ve(t).includes(e.id))
+		});
+	}
+	if (z(e)) {
+		let i = e.options.map(N);
+		return /* @__PURE__ */ y(p, {
+			onChange: (t) => r(e.fieldKey, t?.id ?? void 0),
+			options: i,
+			placeholder: e.placeholder ?? "請選擇",
+			readOnly: n,
+			size: a,
+			value: le(i, $(t))
+		});
+	}
+	return e.type === "file_upload" ? /* @__PURE__ */ y(v, {
+		accept: e.acceptedMimeTypes?.join(","),
+		disabled: n,
+		maxFiles: e.maxFiles,
+		mode: "button-list",
+		...(e.maxFiles ?? 1) > 1 ? { multiple: !0 } : {},
+		onChange: (t) => r(e.fieldKey, t.length ? t.map((e) => e.id) : void 0),
+		onUpload: async (t) => Promise.all(t.map(async (t) => ({
+			file: t,
+			id: (i ? await i(e, t) : { id: `${t.name}-${t.lastModified}` }).id,
+			progress: 100,
+			status: "done"
+		}))),
+		size: "sub"
+	}) : e.type === "date" ? /* @__PURE__ */ y(l, {
+		format: "YYYY-MM-DD",
+		fullWidth: !0,
+		onChange: (t) => r(e.fieldKey, E(t)),
+		placeholder: e.placeholder ?? Ue(e.type),
+		readOnly: n,
+		value: M(t)
+	}) : e.type === "datetime" ? /* @__PURE__ */ y(u, {
+		formatDate: "YYYY-MM-DD",
+		formatTime: "HH:mm",
+		fullWidth: !0,
+		hideSecond: !0,
+		onChange: (t) => r(e.fieldKey, D(t)),
+		placeholderLeft: "選擇日期",
+		placeholderRight: "選擇時間",
+		readOnly: n,
+		value: M(t)
+	}) : e.type === "number" || e.type === "money" ? /* @__PURE__ */ y(d, {
+		fullWidth: !0,
+		max: e.maximum,
+		min: e.minimum,
+		size: a,
+		onChange: (t) => r(e.fieldKey, w(A(t.target.value), {
+			max: e.maximum,
+			min: e.minimum
+		})),
+		placeholder: e.placeholder ?? Ue(e.type),
+		...n ? { readonly: !0 } : {},
+		showSpinner: !0,
+		value: He(t),
+		variant: "measure"
+	}) : /* @__PURE__ */ y(d, {
+		fullWidth: !0,
+		onChange: (t) => r(e.fieldKey, t.target.value),
+		placeholder: e.placeholder ?? Ue(e.type),
+		...n ? { readonly: !0 } : {},
+		size: a,
+		value: $(t),
+		variant: "base"
+	});
+}
+function ze(e, t, n, r, i, a, s = "main") {
+	let l = a.options.map(N), u = ue(t, a.options).map(N), d = a.status === "LOADING", m = a.status === "WAITING_FOR_DEPENDENCIES", h = !!i && !n, g = n || m, _ = n;
+	return e.type === "autocomplete" ? pe(e) === "multiple" ? /* @__PURE__ */ y(o, {
+		asyncData: h,
+		clearSearchText: !0,
+		disabled: _,
+		disabledOptionsFilter: h,
+		globalPortal: !0,
+		loading: d,
+		mode: "multiple",
+		onChange: (t) => r(e.fieldKey, t.length ? t.map((e) => e.id) : void 0),
+		onReachBottom: a.hasNextPage ? a.onReachBottom : void 0,
+		onSearch: h ? a.onSearch : void 0,
+		options: l,
+		placeholder: e.placeholder ?? "請輸入或選擇",
+		readOnly: n,
+		searchDebounceTime: 300,
+		size: s,
+		value: u
+	}) : /* @__PURE__ */ y(o, {
+		asyncData: h,
+		clearSearchText: !0,
+		disabled: _,
+		disabledOptionsFilter: h,
+		globalPortal: !0,
+		loading: d,
+		mode: "single",
+		onChange: (t) => r(e.fieldKey, t?.id ?? void 0),
+		onReachBottom: a.hasNextPage ? a.onReachBottom : void 0,
+		onSearch: h ? a.onSearch : void 0,
+		options: l,
+		placeholder: e.placeholder ?? "請輸入或選擇",
+		readOnly: n,
+		searchDebounceTime: 300,
+		size: s,
+		value: u[0] ?? null
+	}) : e.type === "radio" ? /* @__PURE__ */ y(f, {
+		disabled: g,
+		name: e.fieldKey,
+		onChange: (t) => r(e.fieldKey, t.target.value || void 0),
+		options: l,
+		value: $(t)
+	}) : e.type === "checkbox" ? /* @__PURE__ */ y(c, {
+		disabled: g,
+		name: e.fieldKey,
+		onChange: (t) => r(e.fieldKey, t.target.values.length ? t.target.values : void 0),
+		options: l.map((e) => ({
+			label: e.name,
+			value: e.id
+		})),
+		value: [...Ve(t)]
+	}) : pe(e) === "multiple" ? /* @__PURE__ */ y(p, {
+		disabled: g,
+		loading: d,
+		mode: "multiple",
+		onChange: (t) => r(e.fieldKey, t.length ? t.map((e) => e.id) : void 0),
+		onReachBottom: a.hasNextPage ? a.onReachBottom : void 0,
+		options: l,
+		placeholder: e.placeholder ?? "請選擇一或多個選項",
+		readOnly: n,
+		size: s,
+		value: u
+	}) : /* @__PURE__ */ y(p, {
+		disabled: g,
+		loading: d,
+		onChange: (t) => r(e.fieldKey, t?.id ?? void 0),
+		onReachBottom: a.hasNextPage ? a.onReachBottom : void 0,
+		options: l,
+		placeholder: e.placeholder ?? "請選擇",
+		readOnly: n,
+		size: s,
+		value: u[0] ?? null
+	});
+}
+function Be(e, t) {
+	return {
+		FULL: 12,
+		HALF: 6,
+		THIRD: 4
+	}[t.layout.find((t) => t.fieldKey === e.fieldKey)?.width ?? "FULL"];
+}
+function $(e) {
+	return typeof e == "string" ? e : "";
+}
+function Ve(e) {
+	return Array.isArray(e) && e.every((e) => typeof e == "string") ? e : [];
+}
+function He(e) {
+	return typeof e == "number" ? String(e) : "";
+}
+function Ue(e) {
+	return {
+		boolean: "",
+		autocomplete: "請輸入或選擇",
+		checkbox: "請選擇一或多個選項",
+		date: "請選擇日期",
+		datetime: "請選擇日期與時間",
+		file_upload: "請上傳附件",
+		money: "請輸入金額",
+		number: "請輸入數字",
+		radio: "請選擇一個選項",
+		select: "請選擇一個選項",
+		table: "",
+		text: "請輸入文字",
+		textarea: "請輸入多行文字"
+	}[e];
+}
+//#endregion
+export { H as a, G as i, W as n, U as r, Z as t };
+
+//# sourceMappingURL=FormRendererView-DUceSOXe.js.map