@rytass/bpm-core-react 0.7.7 → 0.9.0

package/dist/views/templates/index.js

@@ -2,22 +2,22 @@
 import { r as e } from "../../chunks/router-adapter-DftlFTOd.js";
 import { t } from "../../chunks/format-date-time-CB-LxzqT.js";
 import { r as n } from "../../chunks/routes-config-RBYQtUd0.js";
-import { n as r, t as i } from "../../chunks/categories-DBPoSrsi.js";
-import { TemplateVersionsView as a } from "./versions/index.js";
-import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
-import { Badge as u, Button as d, Filter as f, FilterArea as ee, FilterLine as te, FormField as p, Input as ne, PageHeader as re, Section as m, SectionGroup as h, Select as g, Tab as _, TabItem as ie, Table as v, Typography as y } from "@mezzanine-ui/react";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { listLaunchableTemplates as ae } from "@rytass/bpm-core-client/workflow";
-import oe from "@mezzanine-ui/react/ContentHeader";
-import { FormFieldLayout as C } from "@mezzanine-ui/core/form";
-import { PlusIcon as w } from "@mezzanine-ui/icons";
-import { listApprovalTemplateCategoriesPage as T, listApprovalTemplatesPage as E } from "@rytass/bpm-core-client/template";
+import { n as ee, t as r } from "../../chunks/categories-DGlxuC6X.js";
+import { TemplateVersionsView as i } from "./versions/index.js";
+import { useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { Badge as u, Button as te, Filter as d, FilterArea as ne, FilterLine as re, FormField as f, Input as p, PageHeader as m, Section as h, SectionGroup as ie, Select as ae, Tab as oe, TabItem as se, Table as ce, Typography as g } from "@mezzanine-ui/react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { listLaunchableTemplates as b } from "@rytass/bpm-core-client/workflow";
+import { FormFieldLayout as x } from "@mezzanine-ui/core/form";
+import le from "@mezzanine-ui/react/ContentHeader";
+import { PlusIcon as ue } from "@mezzanine-ui/icons";
+import { activateApprovalTemplate as de, deactivateApprovalTemplate as fe, listApprovalTemplateCategoriesPage as pe, listApprovalTemplatesPage as me } from "@rytass/bpm-core-client/template";
 //#region src/views/templates/TemplatesView.tsx
-var D = [
+var he = [
 	10,
 	20,
 	50
-], O = [
+], S = [
 	{
 		key: "ALL",
 		label: "全部"
@@ -30,50 +30,61 @@ var D = [
 		key: "DRAFT",
 		label: "草稿"
 	}
-], k = 100;
-function A() {
-	let i = e(), a = n(), [u, A] = l([]), [B, V] = l(F), [H, se] = l([]), [U, W] = l(/* @__PURE__ */ new Set()), [G, K] = l(null), [ce, q] = l(!0), [J, Y] = l(1), [X, le] = l(10), [Z, ue] = l(""), [Q, de] = l("ALL"), [fe, pe] = l(0), $ = o(async () => {
-		q(!0), K(null);
+], C = 100;
+function w() {
+	let r = e(), i = n(), [u, w] = l([]), [F, I] = l(A), [L, R] = l([]), [z, B] = l(/* @__PURE__ */ new Set()), [V, H] = l(null), [ge, U] = l(!0), [W, G] = l(1), [K, _e] = l(10), [q, ve] = l(""), [J, ye] = l("ALL"), [be, xe] = l(0), [Y, X] = l(null), Z = c(0), Q = a(async () => {
+		let e = Z.current + 1;
+		Z.current = e, U(!0), H(null), B(/* @__PURE__ */ new Set()), b().then((t) => {
+			e === Z.current && B(new Set(t.map((e) => e.id)));
+		}).catch(() => {
+			e === Z.current && B(/* @__PURE__ */ new Set());
+		});
 		try {
-			let [e, t, n] = await Promise.all([
-				E({
-					categoryId: B.categoryId,
-					page: J,
-					pageSize: X,
-					searchText: Z,
-					status: Q === "ALL" ? null : Q
-				}),
-				ae(),
-				T({
-					page: 1,
-					pageSize: k,
-					searchText: "",
-					status: "ACTIVE"
-				})
-			]);
-			se([...n.categories.map(I)]), A(e.templates), pe(e.totalCount), W(new Set(t.map((e) => e.id)));
-		} catch (e) {
-			K(j(e));
+			let [t, n] = await Promise.all([me({
+				categoryId: F.categoryId,
+				page: W,
+				pageSize: K,
+				searchText: q,
+				status: J === "ALL" ? null : J
+			}), pe({
+				page: 1,
+				pageSize: C,
+				searchText: "",
+				status: "ACTIVE"
+			})]);
+			if (e !== Z.current) return;
+			R([...n.categories.map(j)]), w(t.templates), xe(t.totalCount);
+		} catch (t) {
+			e === Z.current && H(T(t));
 		} finally {
-			q(!1);
+			e === Z.current && U(!1);
 		}
 	}, [
-		B,
-		J,
-		X,
-		Z,
-		Q
+		F,
+		W,
+		K,
+		q,
+		J
 	]);
-	s(() => {
-		$();
-	}, [$]);
-	let me = c(() => u.map((e) => ({
+	o(() => {
+		Q();
+	}, [Q]);
+	let $ = a(async (e) => {
+		X(e.id), H(null);
+		try {
+			await (e.isActive ? fe(e.id) : de(e.id)), await Q();
+		} catch (e) {
+			H(T(e));
+		} finally {
+			X(null);
+		}
+	}, [Q]), Se = s(() => u.map((e) => ({
 		...e,
-		categoryLabel: z(e),
+		categoryLabel: P(e),
 		key: e.id,
 		status: e.currentVersionId ? "PUBLISHED" : "DRAFT",
 		updatedAt: t(e.updatedAt)
-	})), [u]), he = c(() => [
+	})), [u]), Ce = s(() => [
 		{
 			dataIndex: "name",
 			key: "name",
@@ -82,13 +93,19 @@ function A() {
 		},
 		{
 			key: "status",
-			render: (e) => /* @__PURE__ */ x(N, { status: e.status }),
+			render: (e) => /* @__PURE__ */ v(D, { status: e.status }),
 			title: "狀態",
 			width: 120
 		},
+		{
+			key: "isActive",
+			render: (e) => /* @__PURE__ */ v(O, { isActive: e.isActive }),
+			title: "服務狀態",
+			width: 120
+		},
 		{
 			key: "category",
-			render: (e) => /* @__PURE__ */ x(P, { record: e }),
+			render: (e) => /* @__PURE__ */ v(k, { record: e }),
 			title: "分類",
 			width: 160
 		},
@@ -98,168 +115,192 @@ function A() {
 			title: "更新時間",
 			width: 220
 		}
-	], []), ge = c(() => ({
+	], []), we = s(() => ({
 		render: (e) => [
 			{
-				disabled: (e) => !U.has(e.id),
+				disabled: (e) => !z.has(e.id),
 				name: "發起",
-				onClick: () => i.push(a.caseNew(e.id)),
+				onClick: () => r.push(i.caseNew(e.id)),
 				variant: "base-primary"
 			},
 			{
 				name: "設計",
-				onClick: () => i.push(a.templateDesigner(e.id))
+				onClick: () => r.push(i.templateDesigner(e.id))
 			},
 			{
 				name: "版本",
-				onClick: () => i.push(a.templateVersions(e.id))
+				onClick: () => r.push(i.templateVersions(e.id))
+			},
+			{
+				disabled: (e) => Y === e.id,
+				name: e.isActive ? "停用" : "啟用",
+				onClick: (e) => {
+					$(e);
+				},
+				variant: e.isActive ? "destructive-secondary" : "base-secondary"
 			}
 		],
 		variant: "base-secondary",
-		width: 192
-	}), [U, i]);
-	return /* @__PURE__ */ x(b, { children: /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(re, { children: /* @__PURE__ */ x(oe, {
+		width: 264
+	}), [
+		Y,
+		z,
+		r,
+		$
+	]);
+	return /* @__PURE__ */ v(_, { children: /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(m, { children: /* @__PURE__ */ v(le, {
 		description: "建立流程模板、維護草稿與發布版本。",
 		title: "簽核模板",
-		children: /* @__PURE__ */ x(d, {
-			icon: w,
+		children: /* @__PURE__ */ v(te, {
+			icon: ue,
 			iconType: "leading",
-			onClick: () => i.push(a.templateCompose()),
+			onClick: () => r.push(i.templateCompose()),
 			variant: "base-primary",
 			children: "建立模板"
 		})
-	}) }), /* @__PURE__ */ x(h, { children: /* @__PURE__ */ S(m, {
-		filterArea: /* @__PURE__ */ x(ee, {
-			className: r.templateFilterArea,
+	}) }), /* @__PURE__ */ v(ie, { children: /* @__PURE__ */ y(h, {
+		filterArea: /* @__PURE__ */ v(ne, {
+			className: ee.templateFilterArea,
 			size: "sub",
-			children: /* @__PURE__ */ S(te, { children: [/* @__PURE__ */ x(f, {
+			children: /* @__PURE__ */ y(re, { children: [/* @__PURE__ */ v(d, {
 				span: 3,
-				children: /* @__PURE__ */ x(p, {
+				children: /* @__PURE__ */ v(f, {
 					fullWidth: !0,
-					layout: C.VERTICAL,
+					layout: x.VERTICAL,
 					name: "templateSearchText",
-					children: /* @__PURE__ */ x(ne, {
+					children: /* @__PURE__ */ v(p, {
 						fullWidth: !0,
 						onChange: (e) => {
-							ue(e.target.value), Y(1);
+							ve(e.target.value), G(1);
 						},
 						placeholder: "關鍵字：搜尋模板名稱、分類或描述",
 						size: "sub",
-						value: Z,
+						value: q,
 						variant: "base"
 					})
 				})
-			}), /* @__PURE__ */ x(f, {
+			}), /* @__PURE__ */ v(d, {
 				span: 2,
-				children: /* @__PURE__ */ x(p, {
+				children: /* @__PURE__ */ v(f, {
 					fullWidth: !0,
-					layout: C.VERTICAL,
+					layout: x.VERTICAL,
 					name: "templateCategoryFilter",
-					children: /* @__PURE__ */ x(g, {
+					children: /* @__PURE__ */ v(ae, {
 						clearable: !1,
 						fullWidth: !0,
 						onChange: (e) => {
-							V(L(e, H)), Y(1);
+							I(M(e, L)), G(1);
 						},
-						options: [F, ...H],
+						options: [A, ...L],
 						placeholder: "分類",
-						renderValue: (e) => `分類：${R(e)}`,
+						renderValue: (e) => `分類：${N(e)}`,
 						size: "sub",
-						value: B
+						value: F
 					})
 				})
 			})] })
 		}),
-		tab: /* @__PURE__ */ x(_, {
-			activeKey: Q,
+		tab: /* @__PURE__ */ v(oe, {
+			activeKey: J,
 			onChange: (e) => {
-				de(M(e)), Y(1);
+				ye(E(e)), G(1);
 			},
-			children: O.map((e) => /* @__PURE__ */ x(ie, { children: e.label }, e.key))
+			children: S.map((e) => /* @__PURE__ */ v(se, { children: e.label }, e.key))
 		}),
-		children: [G ? /* @__PURE__ */ x(y, {
+		children: [V ? /* @__PURE__ */ v(g, {
 			color: "text-error",
 			variant: "body",
-			children: G
-		}) : null, /* @__PURE__ */ x(v, {
-			actions: ge,
-			columns: he,
-			dataSource: me,
+			children: V
+		}) : null, /* @__PURE__ */ v(ce, {
+			actions: we,
+			columns: Ce,
+			dataSource: Se,
 			fullWidth: !0,
-			loading: ce,
+			loading: ge,
 			pagination: {
-				current: J,
+				current: W,
 				onChange: (e) => {
-					Y(e);
+					G(e);
 				},
 				onChangePageSize: (e) => {
-					Y(1), le(e);
+					G(1), _e(e);
 				},
-				pageSize: X,
+				pageSize: K,
 				pageSizeLabel: "每頁筆數",
-				pageSizeOptions: D,
+				pageSizeOptions: he,
 				renderResultSummary: (e, t, n) => `顯示 ${e}-${t} 筆，共 ${n} 筆`,
 				showPageSizeOptions: !0,
-				total: fe
+				total: be
 			}
 		})]
 	}) })] }) });
 }
-function j(e) {
+function T(e) {
 	return e instanceof Error ? e.message : "發生未知錯誤";
 }
-function M(e) {
+function E(e) {
 	return e === "PUBLISHED" || e === "DRAFT" ? e : "ALL";
 }
-function N({ status: e }) {
-	return e === "PUBLISHED" ? /* @__PURE__ */ x(u, {
+function D({ status: e }) {
+	return e === "PUBLISHED" ? /* @__PURE__ */ v(u, {
 		size: "sub",
 		text: "已發布",
 		variant: "dot-success"
-	}) : /* @__PURE__ */ x(u, {
+	}) : /* @__PURE__ */ v(u, {
 		size: "sub",
 		text: "草稿",
 		variant: "dot-inactive"
 	});
 }
-function P({ record: e }) {
-	return e.categoryDetail?.isActive === !1 ? /* @__PURE__ */ x(u, {
+function O({ isActive: e }) {
+	return e ? /* @__PURE__ */ v(u, {
+		size: "sub",
+		text: "啟用中",
+		variant: "dot-success"
+	}) : /* @__PURE__ */ v(u, {
+		size: "sub",
+		text: "已停用",
+		variant: "dot-inactive"
+	});
+}
+function k({ record: e }) {
+	return e.categoryDetail?.isActive === !1 ? /* @__PURE__ */ v(u, {
 		size: "sub",
 		text: `${e.categoryLabel}（停用）`,
 		variant: "dot-inactive"
-	}) : /* @__PURE__ */ x(y, {
+	}) : /* @__PURE__ */ v(g, {
 		component: "span",
 		variant: "body",
 		children: e.categoryLabel
 	});
 }
-var F = {
+var A = {
 	categoryId: null,
 	id: "ALL_CATEGORIES",
 	name: "全部分類"
 };
-function I(e) {
+function j(e) {
 	return {
 		categoryId: e.id,
 		id: e.id,
 		name: e.name
 	};
 }
-function L(e, t) {
-	if (!B(e)) return F;
+function M(e, t) {
+	if (!F(e)) return A;
 	let n = typeof e.id == "string" ? e.id : null;
-	return n === F.id ? F : t.find((e) => e.id === n) ?? F;
+	return n === A.id ? A : t.find((e) => e.id === n) ?? A;
 }
-function R(e) {
-	return Array.isArray(e) || !B(e) ? F.name : typeof e.name == "string" ? e.name : F.name;
+function N(e) {
+	return Array.isArray(e) || !F(e) ? A.name : typeof e.name == "string" ? e.name : A.name;
 }
-function z(e) {
+function P(e) {
 	return e.categoryDetail?.name ?? e.category ?? "未分類";
 }
-function B(e) {
+function F(e) {
 	return typeof e == "object" && !!e;
 }
 //#endregion
-export { i as TemplateCategoriesView, a as TemplateVersionsView, A as TemplatesView };
+export { r as TemplateCategoriesView, i as TemplateVersionsView, w as TemplatesView };
 
 //# sourceMappingURL=index.js.map

package/dist/views/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/views/templates/TemplatesView.tsx"],"sourcesContent":["'use client';\n\nimport type { ChangeEvent, Key, ReactElement } from 'react';\nimport { useCallback, useEffect, useMemo, useState } from 'react';\nimport {\n  Badge,\n  Button,\n  Filter,\n  FilterArea,\n  FilterLine,\n  FormField,\n  Input,\n  PageHeader,\n  Section,\n  SectionGroup,\n  Select,\n  Tab,\n  TabItem,\n  Table,\n  Typography,\n} from '@mezzanine-ui/react';\nimport ContentHeader from '@mezzanine-ui/react/ContentHeader';\nimport { PlusIcon } from '@mezzanine-ui/icons';\nimport { FormFieldLayout } from '@mezzanine-ui/core/form';\nimport type { TableActions, TableColumn } from '@mezzanine-ui/core/table';\nimport styles from './templates.module.scss';\nimport { formatDateTime } from '../../lib/format-date-time';\nimport { useRouterAdapter } from '../../lib/router-adapter';\nimport { useBPMRoutes } from '../../lib/routes-config';\nimport {\n  ApprovalTemplateListStatus,\n  ApprovalTemplateRecord,\n  ApprovalTemplateCategoryRecord,\n  listApprovalTemplateCategoriesPage,\n  listApprovalTemplatesPage,\n} from '@rytass/bpm-core-client/template';\nimport { listLaunchableTemplates } from '@rytass/bpm-core-client/workflow';\n\nconst TEMPLATE_PAGE_SIZE_OPTIONS = [10, 20, 50];\nconst TEMPLATE_STATUS_TABS: readonly {\n  readonly key: TemplateStatusTabKey;\n  readonly label: string;\n}[] = [\n  { key: 'ALL', label: '全部' },\n  { key: 'PUBLISHED', label: '已發布' },\n  { key: 'DRAFT', label: '草稿' },\n];\n\nconst TEMPLATE_CATEGORY_PAGE_SIZE = 100;\n\nexport interface TemplateCategoryOption {\n  readonly categoryId: string | null;\n  readonly id: string;\n  readonly name: string;\n}\n\ntype TemplateStatusTabKey = 'ALL' | ApprovalTemplateListStatus;\n\ntype TemplateRow = Readonly<\n  Record<string, unknown> &\n    ApprovalTemplateRecord & {\n      categoryLabel: string;\n      key: string;\n      status: ApprovalTemplateListStatus;\n    }\n>;\n\n\nexport function TemplatesView(): ReactElement {\n  const router = useRouterAdapter();\n  const routes = useBPMRoutes();\n  const [templates, setTemplates] = useState<readonly ApprovalTemplateRecord[]>(\n    [],\n  );\n  const [categoryFilter, setCategoryFilter] = useState<TemplateCategoryOption>(\n    UNCATEGORIZED_TEMPLATE_FILTER_OPTION,\n  );\n  const [categoryOptions, setCategoryOptions] = useState<\n    readonly TemplateCategoryOption[]\n  >([]);\n  const [launchableTemplateIds, setLaunchableTemplateIds] = useState<\n    ReadonlySet<string>\n  >(new Set());\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [templatePage, setTemplatePage] = useState(1);\n  const [templatePageSize, setTemplatePageSize] = useState(10);\n  const [templateSearchText, setTemplateSearchText] = useState('');\n  const [templateStatus, setTemplateStatus] =\n    useState<TemplateStatusTabKey>('ALL');\n  const [templateTotalCount, setTemplateTotalCount] = useState(0);\n\n  const refreshTemplates = useCallback(async (): Promise<void> => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      const [\n        templatePageResult,\n        nextLaunchableTemplates,\n        activeCategoryPageResult,\n      ] = await Promise.all([\n        listApprovalTemplatesPage({\n          categoryId: categoryFilter.categoryId,\n          page: templatePage,\n          pageSize: templatePageSize,\n          searchText: templateSearchText,\n          status: templateStatus === 'ALL' ? null : templateStatus,\n        }),\n        listLaunchableTemplates(),\n        listApprovalTemplateCategoriesPage({\n          page: 1,\n          pageSize: TEMPLATE_CATEGORY_PAGE_SIZE,\n          searchText: '',\n          status: 'ACTIVE',\n        }),\n      ]);\n\n      setCategoryOptions([\n        ...activeCategoryPageResult.categories.map(readCategoryOption),\n      ]);\n      setTemplates(templatePageResult.templates);\n      setTemplateTotalCount(templatePageResult.totalCount);\n      setLaunchableTemplateIds(\n        new Set(nextLaunchableTemplates.map((template) => template.id)),\n      );\n    } catch (requestError: unknown) {\n      setError(readErrorMessage(requestError));\n    } finally {\n      setLoading(false);\n    }\n  }, [\n    categoryFilter,\n    templatePage,\n    templatePageSize,\n    templateSearchText,\n    templateStatus,\n  ]);\n\n  useEffect((): void => {\n    void refreshTemplates();\n  }, [refreshTemplates]);\n\n  const rows = useMemo(\n    (): TemplateRow[] =>\n      templates.map((template) => ({\n        ...template,\n        categoryLabel: readTemplateCategoryLabel(template),\n        key: template.id,\n        status: template.currentVersionId ? 'PUBLISHED' : 'DRAFT',\n        updatedAt: formatDateTime(template.updatedAt),\n      })),\n    [templates],\n  );\n  const columns = useMemo(\n    (): TableColumn<TemplateRow>[] => [\n      { dataIndex: 'name', key: 'name', title: '模板名稱', width: 220 },\n      {\n        key: 'status',\n        render: (record: TemplateRow): ReactElement => (\n          <TemplateStatusBadge status={record.status} />\n        ),\n        title: '狀態',\n        width: 120,\n      },\n      {\n        key: 'category',\n        render: (record: TemplateRow): ReactElement => (\n          <TemplateCategoryLabel record={record} />\n        ),\n        title: '分類',\n        width: 160,\n      },\n      {\n        dataIndex: 'updatedAt',\n        key: 'updatedAt',\n        title: '更新時間',\n        width: 220,\n      },\n    ],\n    [],\n  );\n  const tableActions = useMemo(\n    (): TableActions<TemplateRow> => ({\n      render: (record): ReturnType<TableActions<TemplateRow>['render']> => [\n        {\n          disabled: (template): boolean =>\n            !launchableTemplateIds.has(template.id),\n          name: '發起',\n          onClick: (): void =>\n            router.push(routes.caseNew(record.id)),\n          variant: 'base-primary',\n        },\n        {\n          name: '設計',\n          onClick: (): void => router.push(routes.templateDesigner(record.id)),\n        },\n        {\n          name: '版本',\n          onClick: (): void => router.push(routes.templateVersions(record.id)),\n        },\n      ],\n      variant: 'base-secondary',\n      width: 192,\n    }),\n    [launchableTemplateIds, router],\n  );\n\n  return (\n    <>\n      <>\n          <PageHeader>\n            <ContentHeader\n              description=\"建立流程模板、維護草稿與發布版本。\"\n              title=\"簽核模板\"\n            >\n              <Button\n                icon={PlusIcon}\n                iconType=\"leading\"\n                onClick={(): void => router.push(routes.templateCompose())}\n                variant=\"base-primary\"\n              >\n                建立模板\n              </Button>\n            </ContentHeader>\n          </PageHeader>\n\n          <SectionGroup>\n            <Section\n              filterArea={\n                <FilterArea className={styles.templateFilterArea} size=\"sub\">\n                  <FilterLine>\n                    <Filter span={3}>\n                      <FormField\n                        fullWidth\n                        layout={FormFieldLayout.VERTICAL}\n                        name=\"templateSearchText\"\n                      >\n                        <Input\n                          fullWidth\n                          onChange={(\n                            event: ChangeEvent<HTMLInputElement>,\n                          ): void => {\n                            setTemplateSearchText(event.target.value);\n                            setTemplatePage(1);\n                          }}\n                          placeholder=\"關鍵字：搜尋模板名稱、分類或描述\"\n                          size=\"sub\"\n                          value={templateSearchText}\n                          variant=\"base\"\n                        />\n                      </FormField>\n                    </Filter>\n                    <Filter span={2}>\n                      <FormField\n                        fullWidth\n                        layout={FormFieldLayout.VERTICAL}\n                        name=\"templateCategoryFilter\"\n                      >\n                        <Select\n                          clearable={false}\n                          fullWidth\n                          onChange={(option): void => {\n                            setCategoryFilter(\n                              readCategoryFilterOption(option, categoryOptions),\n                            );\n                            setTemplatePage(1);\n                          }}\n                          options={[\n                            UNCATEGORIZED_TEMPLATE_FILTER_OPTION,\n                            ...categoryOptions,\n                          ]}\n                          placeholder=\"分類\"\n                          renderValue={(value): string =>\n                            `分類：${readTemplateCategoryFilterLabel(value)}`\n                          }\n                          size=\"sub\"\n                          value={categoryFilter}\n                        />\n                      </FormField>\n                    </Filter>\n                  </FilterLine>\n                </FilterArea>\n              }\n              tab={\n                <Tab\n                  activeKey={templateStatus}\n                  onChange={(activeKey): void => {\n                    setTemplateStatus(readTemplateStatusTabKey(activeKey));\n                    setTemplatePage(1);\n                  }}\n                >\n                  {TEMPLATE_STATUS_TABS.map((statusTab) => (\n                    <TabItem key={statusTab.key}>{statusTab.label}</TabItem>\n                  ))}\n                </Tab>\n              }\n            >\n              {error ? (\n                <Typography color=\"text-error\" variant=\"body\">\n                  {error}\n                </Typography>\n              ) : null}\n              <Table\n                actions={tableActions}\n                columns={columns}\n                dataSource={rows}\n                fullWidth\n                loading={loading}\n                pagination={{\n                  current: templatePage,\n                  onChange: (page): void => {\n                    setTemplatePage(page);\n                  },\n                  onChangePageSize: (pageSize): void => {\n                    setTemplatePage(1);\n                    setTemplatePageSize(pageSize);\n                  },\n                  pageSize: templatePageSize,\n                  pageSizeLabel: '每頁筆數',\n                  pageSizeOptions: TEMPLATE_PAGE_SIZE_OPTIONS,\n                  renderResultSummary: (from, to, total): string =>\n                    `顯示 ${from}-${to} 筆，共 ${total} 筆`,\n                  showPageSizeOptions: true,\n                  total: templateTotalCount,\n                }}\n              />\n            </Section>\n          </SectionGroup>\n        </>\n    </>\n  );\n}\n\nfunction readErrorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : '發生未知錯誤';\n}\n\nfunction readTemplateStatusTabKey(activeKey: Key): TemplateStatusTabKey {\n  if (activeKey === 'PUBLISHED' || activeKey === 'DRAFT') {\n    return activeKey;\n  }\n\n  return 'ALL';\n}\n\nfunction TemplateStatusBadge({\n  status,\n}: {\n  readonly status: ApprovalTemplateListStatus;\n}): ReactElement {\n  if (status === 'PUBLISHED') {\n    return <Badge size=\"sub\" text=\"已發布\" variant=\"dot-success\" />;\n  }\n\n  return <Badge size=\"sub\" text=\"草稿\" variant=\"dot-inactive\" />;\n}\n\nfunction TemplateCategoryLabel({\n  record,\n}: {\n  readonly record: TemplateRow;\n}): ReactElement {\n  if (record.categoryDetail?.isActive === false) {\n    return (\n      <Badge\n        size=\"sub\"\n        text={`${record.categoryLabel}（停用）`}\n        variant=\"dot-inactive\"\n      />\n    );\n  }\n\n  return (\n    <Typography component=\"span\" variant=\"body\">\n      {record.categoryLabel}\n    </Typography>\n  );\n}\n\nconst UNCATEGORIZED_TEMPLATE_FILTER_OPTION: TemplateCategoryOption = {\n  categoryId: null,\n  id: 'ALL_CATEGORIES',\n  name: '全部分類',\n};\n\nfunction readCategoryOption(\n  category: ApprovalTemplateCategoryRecord,\n): TemplateCategoryOption {\n  return {\n    categoryId: category.id,\n    id: category.id,\n    name: category.name,\n  };\n}\n\nfunction readCategoryFilterOption(\n  value: unknown,\n  options: readonly TemplateCategoryOption[],\n): TemplateCategoryOption {\n  if (!isRecord(value)) {\n    return UNCATEGORIZED_TEMPLATE_FILTER_OPTION;\n  }\n\n  const id = typeof value.id === 'string' ? value.id : null;\n\n  if (id === UNCATEGORIZED_TEMPLATE_FILTER_OPTION.id) {\n    return UNCATEGORIZED_TEMPLATE_FILTER_OPTION;\n  }\n\n  return (\n    options.find((option) => option.id === id) ??\n    UNCATEGORIZED_TEMPLATE_FILTER_OPTION\n  );\n}\n\nfunction readTemplateCategoryFilterLabel(value: unknown): string {\n  if (Array.isArray(value)) {\n    return UNCATEGORIZED_TEMPLATE_FILTER_OPTION.name;\n  }\n\n  if (!isRecord(value)) {\n    return UNCATEGORIZED_TEMPLATE_FILTER_OPTION.name;\n  }\n\n  return typeof value.name === 'string'\n    ? value.name\n    : UNCATEGORIZED_TEMPLATE_FILTER_OPTION.name;\n}\n\nfunction readTemplateCategoryLabel(template: ApprovalTemplateRecord): string {\n  return template.categoryDetail?.name ?? template.category ?? '未分類';\n}\n\nfunction isRecord(value: unknown): value is Readonly<Record<string, unknown>> {\n  return typeof value === 'object' && value !== null;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/views/templates/TemplatesView.tsx"],"sourcesContent":["'use client';\n\nimport type { ChangeEvent, Key, ReactElement } from 'react';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  Badge,\n  Button,\n  Filter,\n  FilterArea,\n  FilterLine,\n  FormField,\n  Input,\n  PageHeader,\n  Section,\n  SectionGroup,\n  Select,\n  Tab,\n  TabItem,\n  Table,\n  Typography,\n} from '@mezzanine-ui/react';\nimport ContentHeader from '@mezzanine-ui/react/ContentHeader';\nimport { PlusIcon } from '@mezzanine-ui/icons';\nimport { FormFieldLayout } from '@mezzanine-ui/core/form';\nimport type { TableActions, TableColumn } from '@mezzanine-ui/core/table';\nimport styles from './templates.module.scss';\nimport { formatDateTime } from '../../lib/format-date-time';\nimport { useRouterAdapter } from '../../lib/router-adapter';\nimport { useBPMRoutes } from '../../lib/routes-config';\nimport {\n  ApprovalTemplateListStatus,\n  ApprovalTemplateRecord,\n  ApprovalTemplateCategoryRecord,\n  activateApprovalTemplate,\n  deactivateApprovalTemplate,\n  listApprovalTemplateCategoriesPage,\n  listApprovalTemplatesPage,\n} from '@rytass/bpm-core-client/template';\nimport { listLaunchableTemplates } from '@rytass/bpm-core-client/workflow';\n\nconst TEMPLATE_PAGE_SIZE_OPTIONS = [10, 20, 50];\nconst TEMPLATE_STATUS_TABS: readonly {\n  readonly key: TemplateStatusTabKey;\n  readonly label: string;\n}[] = [\n  { key: 'ALL', label: '全部' },\n  { key: 'PUBLISHED', label: '已發布' },\n  { key: 'DRAFT', label: '草稿' },\n];\n\nconst TEMPLATE_CATEGORY_PAGE_SIZE = 100;\n\nexport interface TemplateCategoryOption {\n  readonly categoryId: string | null;\n  readonly id: string;\n  readonly name: string;\n}\n\ntype TemplateStatusTabKey = 'ALL' | ApprovalTemplateListStatus;\n\ntype TemplateRow = Readonly<\n  Record<string, unknown> &\n    ApprovalTemplateRecord & {\n      categoryLabel: string;\n      key: string;\n      status: ApprovalTemplateListStatus;\n    }\n>;\n\nexport function TemplatesView(): ReactElement {\n  const router = useRouterAdapter();\n  const routes = useBPMRoutes();\n  const [templates, setTemplates] = useState<readonly ApprovalTemplateRecord[]>(\n    [],\n  );\n  const [categoryFilter, setCategoryFilter] = useState<TemplateCategoryOption>(\n    UNCATEGORIZED_TEMPLATE_FILTER_OPTION,\n  );\n  const [categoryOptions, setCategoryOptions] = useState<\n    readonly TemplateCategoryOption[]\n  >([]);\n  const [launchableTemplateIds, setLaunchableTemplateIds] = useState<\n    ReadonlySet<string>\n  >(new Set());\n  const [error, setError] = useState<string | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [templatePage, setTemplatePage] = useState(1);\n  const [templatePageSize, setTemplatePageSize] = useState(10);\n  const [templateSearchText, setTemplateSearchText] = useState('');\n  const [templateStatus, setTemplateStatus] =\n    useState<TemplateStatusTabKey>('ALL');\n  const [templateTotalCount, setTemplateTotalCount] = useState(0);\n  const [activationPendingTemplateId, setActivationPendingTemplateId] =\n    useState<string | null>(null);\n  const refreshRequestIdRef = useRef(0);\n\n  const refreshTemplates = useCallback(async (): Promise<void> => {\n    const requestId = refreshRequestIdRef.current + 1;\n    refreshRequestIdRef.current = requestId;\n    setLoading(true);\n    setError(null);\n    setLaunchableTemplateIds(new Set());\n\n    void listLaunchableTemplates()\n      .then((nextLaunchableTemplates): void => {\n        if (requestId !== refreshRequestIdRef.current) {\n          return;\n        }\n\n        setLaunchableTemplateIds(\n          new Set(nextLaunchableTemplates.map((template) => template.id)),\n        );\n      })\n      .catch((): void => {\n        if (requestId === refreshRequestIdRef.current) {\n          setLaunchableTemplateIds(new Set());\n        }\n      });\n\n    try {\n      const [templatePageResult, activeCategoryPageResult] = await Promise.all([\n        listApprovalTemplatesPage({\n          categoryId: categoryFilter.categoryId,\n          page: templatePage,\n          pageSize: templatePageSize,\n          searchText: templateSearchText,\n          status: templateStatus === 'ALL' ? null : templateStatus,\n        }),\n        listApprovalTemplateCategoriesPage({\n          page: 1,\n          pageSize: TEMPLATE_CATEGORY_PAGE_SIZE,\n          searchText: '',\n          status: 'ACTIVE',\n        }),\n      ]);\n\n      if (requestId !== refreshRequestIdRef.current) {\n        return;\n      }\n\n      setCategoryOptions([\n        ...activeCategoryPageResult.categories.map(readCategoryOption),\n      ]);\n      setTemplates(templatePageResult.templates);\n      setTemplateTotalCount(templatePageResult.totalCount);\n    } catch (requestError: unknown) {\n      if (requestId === refreshRequestIdRef.current) {\n        setError(readErrorMessage(requestError));\n      }\n    } finally {\n      if (requestId === refreshRequestIdRef.current) {\n        setLoading(false);\n      }\n    }\n  }, [\n    categoryFilter,\n    templatePage,\n    templatePageSize,\n    templateSearchText,\n    templateStatus,\n  ]);\n\n  useEffect((): void => {\n    void refreshTemplates();\n  }, [refreshTemplates]);\n\n  const toggleTemplateActivation = useCallback(\n    async (template: ApprovalTemplateRecord): Promise<void> => {\n      setActivationPendingTemplateId(template.id);\n      setError(null);\n\n      try {\n        await (template.isActive\n          ? deactivateApprovalTemplate(template.id)\n          : activateApprovalTemplate(template.id));\n        await refreshTemplates();\n      } catch (requestError: unknown) {\n        setError(readErrorMessage(requestError));\n      } finally {\n        setActivationPendingTemplateId(null);\n      }\n    },\n    [refreshTemplates],\n  );\n\n  const rows = useMemo(\n    (): TemplateRow[] =>\n      templates.map((template) => ({\n        ...template,\n        categoryLabel: readTemplateCategoryLabel(template),\n        key: template.id,\n        status: template.currentVersionId ? 'PUBLISHED' : 'DRAFT',\n        updatedAt: formatDateTime(template.updatedAt),\n      })),\n    [templates],\n  );\n  const columns = useMemo(\n    (): TableColumn<TemplateRow>[] => [\n      { dataIndex: 'name', key: 'name', title: '模板名稱', width: 220 },\n      {\n        key: 'status',\n        render: (record: TemplateRow): ReactElement => (\n          <TemplateStatusBadge status={record.status} />\n        ),\n        title: '狀態',\n        width: 120,\n      },\n      {\n        key: 'isActive',\n        render: (record: TemplateRow): ReactElement => (\n          <TemplateActivationBadge isActive={record.isActive} />\n        ),\n        title: '服務狀態',\n        width: 120,\n      },\n      {\n        key: 'category',\n        render: (record: TemplateRow): ReactElement => (\n          <TemplateCategoryLabel record={record} />\n        ),\n        title: '分類',\n        width: 160,\n      },\n      {\n        dataIndex: 'updatedAt',\n        key: 'updatedAt',\n        title: '更新時間',\n        width: 220,\n      },\n    ],\n    [],\n  );\n  const tableActions = useMemo(\n    (): TableActions<TemplateRow> => ({\n      render: (record): ReturnType<TableActions<TemplateRow>['render']> => [\n        {\n          disabled: (template): boolean =>\n            !launchableTemplateIds.has(template.id),\n          name: '發起',\n          onClick: (): void => router.push(routes.caseNew(record.id)),\n          variant: 'base-primary',\n        },\n        {\n          name: '設計',\n          onClick: (): void => router.push(routes.templateDesigner(record.id)),\n        },\n        {\n          name: '版本',\n          onClick: (): void => router.push(routes.templateVersions(record.id)),\n        },\n        {\n          disabled: (template): boolean =>\n            activationPendingTemplateId === template.id,\n          name: record.isActive ? '停用' : '啟用',\n          onClick: (template): void => {\n            void toggleTemplateActivation(template);\n          },\n          variant: record.isActive ? 'destructive-secondary' : 'base-secondary',\n        },\n      ],\n      variant: 'base-secondary',\n      width: 264,\n    }),\n    [\n      activationPendingTemplateId,\n      launchableTemplateIds,\n      router,\n      toggleTemplateActivation,\n    ],\n  );\n\n  return (\n    <>\n      <>\n        <PageHeader>\n          <ContentHeader\n            description=\"建立流程模板、維護草稿與發布版本。\"\n            title=\"簽核模板\"\n          >\n            <Button\n              icon={PlusIcon}\n              iconType=\"leading\"\n              onClick={(): void => router.push(routes.templateCompose())}\n              variant=\"base-primary\"\n            >\n              建立模板\n            </Button>\n          </ContentHeader>\n        </PageHeader>\n\n        <SectionGroup>\n          <Section\n            filterArea={\n              <FilterArea className={styles.templateFilterArea} size=\"sub\">\n                <FilterLine>\n                  <Filter span={3}>\n                    <FormField\n                      fullWidth\n                      layout={FormFieldLayout.VERTICAL}\n                      name=\"templateSearchText\"\n                    >\n                      <Input\n                        fullWidth\n                        onChange={(\n                          event: ChangeEvent<HTMLInputElement>,\n                        ): void => {\n                          setTemplateSearchText(event.target.value);\n                          setTemplatePage(1);\n                        }}\n                        placeholder=\"關鍵字：搜尋模板名稱、分類或描述\"\n                        size=\"sub\"\n                        value={templateSearchText}\n                        variant=\"base\"\n                      />\n                    </FormField>\n                  </Filter>\n                  <Filter span={2}>\n                    <FormField\n                      fullWidth\n                      layout={FormFieldLayout.VERTICAL}\n                      name=\"templateCategoryFilter\"\n                    >\n                      <Select\n                        clearable={false}\n                        fullWidth\n                        onChange={(option): void => {\n                          setCategoryFilter(\n                            readCategoryFilterOption(option, categoryOptions),\n                          );\n                          setTemplatePage(1);\n                        }}\n                        options={[\n                          UNCATEGORIZED_TEMPLATE_FILTER_OPTION,\n                          ...categoryOptions,\n                        ]}\n                        placeholder=\"分類\"\n                        renderValue={(value): string =>\n                          `分類：${readTemplateCategoryFilterLabel(value)}`\n                        }\n                        size=\"sub\"\n                        value={categoryFilter}\n                      />\n                    </FormField>\n                  </Filter>\n                </FilterLine>\n              </FilterArea>\n            }\n            tab={\n              <Tab\n                activeKey={templateStatus}\n                onChange={(activeKey): void => {\n                  setTemplateStatus(readTemplateStatusTabKey(activeKey));\n                  setTemplatePage(1);\n                }}\n              >\n                {TEMPLATE_STATUS_TABS.map((statusTab) => (\n                  <TabItem key={statusTab.key}>{statusTab.label}</TabItem>\n                ))}\n              </Tab>\n            }\n          >\n            {error ? (\n              <Typography color=\"text-error\" variant=\"body\">\n                {error}\n              </Typography>\n            ) : null}\n            <Table\n              actions={tableActions}\n              columns={columns}\n              dataSource={rows}\n              fullWidth\n              loading={loading}\n              pagination={{\n                current: templatePage,\n                onChange: (page): void => {\n                  setTemplatePage(page);\n                },\n                onChangePageSize: (pageSize): void => {\n                  setTemplatePage(1);\n                  setTemplatePageSize(pageSize);\n                },\n                pageSize: templatePageSize,\n                pageSizeLabel: '每頁筆數',\n                pageSizeOptions: TEMPLATE_PAGE_SIZE_OPTIONS,\n                renderResultSummary: (from, to, total): string =>\n                  `顯示 ${from}-${to} 筆，共 ${total} 筆`,\n                showPageSizeOptions: true,\n                total: templateTotalCount,\n              }}\n            />\n          </Section>\n        </SectionGroup>\n      </>\n    </>\n  );\n}\n\nfunction readErrorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : '發生未知錯誤';\n}\n\nfunction readTemplateStatusTabKey(activeKey: Key): TemplateStatusTabKey {\n  if (activeKey === 'PUBLISHED' || activeKey === 'DRAFT') {\n    return activeKey;\n  }\n\n  return 'ALL';\n}\n\nfunction TemplateStatusBadge({\n  status,\n}: {\n  readonly status: ApprovalTemplateListStatus;\n}): ReactElement {\n  if (status === 'PUBLISHED') {\n    return <Badge size=\"sub\" text=\"已發布\" variant=\"dot-success\" />;\n  }\n\n  return <Badge size=\"sub\" text=\"草稿\" variant=\"dot-inactive\" />;\n}\n\nfunction TemplateActivationBadge({\n  isActive,\n}: {\n  readonly isActive: boolean;\n}): ReactElement {\n  if (isActive) {\n    return <Badge size=\"sub\" text=\"啟用中\" variant=\"dot-success\" />;\n  }\n\n  return <Badge size=\"sub\" text=\"已停用\" variant=\"dot-inactive\" />;\n}\n\nfunction TemplateCategoryLabel({\n  record,\n}: {\n  readonly record: TemplateRow;\n}): ReactElement {\n  if (record.categoryDetail?.isActive === false) {\n    return (\n      <Badge\n        size=\"sub\"\n        text={`${record.categoryLabel}（停用）`}\n        variant=\"dot-inactive\"\n      />\n    );\n  }\n\n  return (\n    <Typography component=\"span\" variant=\"body\">\n      {record.categoryLabel}\n    </Typography>\n  );\n}\n\nconst UNCATEGORIZED_TEMPLATE_FILTER_OPTION: TemplateCategoryOption = {\n  categoryId: null,\n  id: 'ALL_CATEGORIES',\n  name: '全部分類',\n};\n\nfunction readCategoryOption(\n  category: ApprovalTemplateCategoryRecord,\n): TemplateCategoryOption {\n  return {\n    categoryId: category.id,\n    id: category.id,\n    name: category.name,\n  };\n}\n\nfunction readCategoryFilterOption(\n  value: unknown,\n  options: readonly TemplateCategoryOption[],\n): TemplateCategoryOption {\n  if (!isRecord(value)) {\n    return UNCATEGORIZED_TEMPLATE_FILTER_OPTION;\n  }\n\n  const id = typeof value.id === 'string' ? value.id : null;\n\n  if (id === UNCATEGORIZED_TEMPLATE_FILTER_OPTION.id) {\n    return UNCATEGORIZED_TEMPLATE_FILTER_OPTION;\n  }\n\n  return (\n    options.find((option) => option.id === id) ??\n    UNCATEGORIZED_TEMPLATE_FILTER_OPTION\n  );\n}\n\nfunction readTemplateCategoryFilterLabel(value: unknown): string {\n  if (Array.isArray(value)) {\n    return UNCATEGORIZED_TEMPLATE_FILTER_OPTION.name;\n  }\n\n  if (!isRecord(value)) {\n    return UNCATEGORIZED_TEMPLATE_FILTER_OPTION.name;\n  }\n\n  return typeof value.name === 'string'\n    ? value.name\n    : UNCATEGORIZED_TEMPLATE_FILTER_OPTION.name;\n}\n\nfunction readTemplateCategoryLabel(template: ApprovalTemplateRecord): string {\n  return template.categoryDetail?.name ?? template.category ?? '未分類';\n}\n\nfunction isRecord(value: unknown): value is Readonly<Record<string, unknown>> {\n  return typeof value === 'object' && value !== null;\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rytass/bpm-core-react",
-  "version": "0.7.7",
+  "version": "0.9.0",
   "description": "BPM approval workflow React components and views for the Rytass BPM stack. Ships AuthProvider, NotificationDrawer + bell widget, host-facing hooks (useBPMMember / useBPMLogout / useBPMRoutes), and full page-body views for inbox / instances / templates / forms / admin / settings on top of Mezzanine UI and the BPM client functions. The host owns the navigation shell — BPM does not bundle a layout.",
   "keywords": [
     "bpm",
@@ -278,23 +278,59 @@
     }
   },
   "peerDependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/view": "^6.41.1",
+    "@hello-pangea/dnd": "^18.0.1",
+    "@mezzanine-ui/core": "^1.0.4",
     "@mezzanine-ui/icons": "^1.0.2",
     "@mezzanine-ui/react": "^1.1.0",
-    "@rytass/bpm-core-client": "^0.4.0 || ^0.5.0 || ^0.6.0",
-    "@rytass/bpm-core-shared": "^0.4.0 || ^0.5.0 || ^0.6.0",
+    "@rytass/bpm-core-client": "^0.9.0",
+    "@rytass/bpm-core-shared": "^0.9.0",
+    "@uiw/react-codemirror": "^4.25.9",
+    "@xyflow/react": "^12.10.2",
+    "dagre": "^0.8.5",
+    "next": "~16.2.6",
+    "pdfjs-dist": "^5.4.296",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-pdf": "^10.4.1"
   },
   "peerDependenciesMeta": {
+    "@codemirror/lang-json": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "@hello-pangea/dnd": {
+      "optional": true
+    },
     "@mezzanine-ui/icons": {
       "optional": false
+    },
+    "@uiw/react-codemirror": {
+      "optional": true
+    },
+    "@xyflow/react": {
+      "optional": true
+    },
+    "dagre": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    },
+    "pdfjs-dist": {
+      "optional": true
+    },
+    "react-pdf": {
+      "optional": true
     }
   },
   "dependencies": {
     "@ai-sdk/openai": "^3.0.67",
     "@ai-sdk/react": "^3.0.195",
     "ai": "^6.0.193",
-    "clsx": "^2.1.1",
     "moment": "^2.30.1"
   }
 }

package/dist/chunks/FormBuilderView-B_KGPjlp.cjs

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