@rytass/bpm-core-react 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/dist/chunks/FormBuilderView-CLFlfDGe.cjs +3 -0
  3. package/dist/chunks/FormBuilderView-CLFlfDGe.cjs.map +1 -0
  4. package/dist/chunks/FormBuilderView-D4xIuPYB.js +1960 -0
  5. package/dist/chunks/FormBuilderView-D4xIuPYB.js.map +1 -0
  6. package/dist/chunks/FormRendererView-BxGT16z0.cjs +2 -0
  7. package/dist/chunks/FormRendererView-BxGT16z0.cjs.map +1 -0
  8. package/dist/chunks/FormRendererView-DUceSOXe.js +798 -0
  9. package/dist/chunks/FormRendererView-DUceSOXe.js.map +1 -0
  10. package/dist/chunks/{compose-CUOe5Ia9.js → compose-Bb-REfoB.js} +4 -4
  11. package/dist/chunks/{compose-CUOe5Ia9.js.map → compose-Bb-REfoB.js.map} +1 -1
  12. package/dist/chunks/{compose-CyRkXdeu.cjs → compose-DzRYZcqe.cjs} +2 -2
  13. package/dist/chunks/{compose-CyRkXdeu.cjs.map → compose-DzRYZcqe.cjs.map} +1 -1
  14. package/dist/chunks/{designer-Cb3WAC46.js → designer-C6oIO9Kq.js} +2 -2
  15. package/dist/chunks/{designer-Cb3WAC46.js.map → designer-C6oIO9Kq.js.map} +1 -1
  16. package/dist/chunks/{designer-zLliyrHu.cjs → designer-gFUdImeZ.cjs} +2 -2
  17. package/dist/chunks/{designer-zLliyrHu.cjs.map → designer-gFUdImeZ.cjs.map} +1 -1
  18. package/dist/chunks/{detail-Cmw-aQcu.js → detail-BgKgMvYx.js} +391 -390
  19. package/dist/chunks/{detail-Cmw-aQcu.js.map → detail-BgKgMvYx.js.map} +1 -1
  20. package/dist/chunks/{detail-Bp2Nv0cs.cjs → detail-Dnz5aaI-.cjs} +2 -2
  21. package/dist/chunks/{detail-Bp2Nv0cs.cjs.map → detail-Dnz5aaI-.cjs.map} +1 -1
  22. package/dist/pages/instances/detail/index.cjs +1 -1
  23. package/dist/pages/instances/detail/index.js +1 -1
  24. package/dist/pages/templates/compose/index.cjs +1 -1
  25. package/dist/pages/templates/compose/index.js +1 -1
  26. package/dist/pages/templates/designer/index.cjs +1 -1
  27. package/dist/pages/templates/designer/index.js +1 -1
  28. package/dist/views/forms/builder/index.cjs +1 -1
  29. package/dist/views/forms/builder/index.js +1 -1
  30. package/dist/views/forms/renderer/form-data-source-field.d.ts +16 -0
  31. package/dist/views/forms/renderer/index.cjs +1 -1
  32. package/dist/views/forms/renderer/index.js +1 -1
  33. package/dist/views/instances/detail/index.cjs +1 -1
  34. package/dist/views/instances/detail/index.js +1 -1
  35. package/dist/views/instances/new/index.cjs +1 -1
  36. package/dist/views/instances/new/index.cjs.map +1 -1
  37. package/dist/views/instances/new/index.js +48 -48
  38. package/dist/views/instances/new/index.js.map +1 -1
  39. package/dist/views/templates/compose/index.cjs +1 -1
  40. package/dist/views/templates/compose/index.js +1 -1
  41. package/dist/views/templates/designer/index.cjs +1 -1
  42. package/dist/views/templates/designer/index.js +1 -1
  43. package/package.json +3 -3
  44. package/dist/chunks/FormBuilderView-CAqjOYAP.cjs +0 -3
  45. package/dist/chunks/FormBuilderView-CAqjOYAP.cjs.map +0 -1
  46. package/dist/chunks/FormBuilderView-TzSezeqC.js +0 -1479
  47. package/dist/chunks/FormBuilderView-TzSezeqC.js.map +0 -1
  48. package/dist/chunks/FormRendererView-BurlEDUu.js +0 -580
  49. package/dist/chunks/FormRendererView-BurlEDUu.js.map +0 -1
  50. package/dist/chunks/FormRendererView-Dde1s3I0.cjs +0 -2
  51. package/dist/chunks/FormRendererView-Dde1s3I0.cjs.map +0 -1
@@ -1,1479 +0,0 @@
1
- "use client";
2
- import { t as e } from "./bpm-form-field-Cao0rMol.js";
3
- import { t } from "./FormRendererView-BurlEDUu.js";
4
- import { useEffect as n, useMemo as r, useState as i } from "react";
5
- import { Accordion as a, Badge as o, BaseCard as ee, Button as s, DatePicker as c, DateTimePicker as te, Icon as l, Input as u, Modal as ne, Section as re, SectionGroup as ie, Select as d, Tab as ae, TabItem as f, Table as oe, Textarea as se, Toggle as ce, Typography as p } from "@mezzanine-ui/react";
6
- import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
7
- import { AlignLeftIcon as le, CalendarIcon as _, CheckedIcon as v, CheckedOutlineIcon as ue, CurrencyDollarIcon as y, DotDragVerticalIcon as de, DotGridIcon as b, FileAttachmentIcon as x, FileIcon as S, ListIcon as fe, PlusIcon as pe, TrashIcon as me } from "@mezzanine-ui/icons";
8
- import { buildConditionExpression as C, buildFormRendererValues as he, clampOptionalNumber as ge, createFieldDefinition as _e, formatDatePickerValue as ve, formatDateTimePickerValue as ye, isDateFieldDefinition as be, isFormDataSourceDescriptorCompatible as xe, isNumberFieldDefinition as Se, isSelectFieldDefinition as Ce, lintFormSchema as we, listFormDataSources as Te, parseConditionRule as Ee, parseOptionalNumberInput as De, readCompatibleFormDataSourceBindingFields as Oe, readCompatibleFormDataSourceDescriptors as ke, readConditionOperatorOption as Ae, readConditionOperatorOptions as je, readDatePickerValue as Me, readDefaultConditionOperator as Ne, readDefaultConditionValue as w, readFieldOptionAsSelectOption as Pe, readFormDataSourceBinding as Fe, readFormDataSourceBindingValue as Ie, readFormDataSourceBindingValueKind as Le, readFormDataSourceFieldDependencyKeys as Re, readFormSchemaLintMessage as ze, readSelectOption as T, renameFormDataSourceFieldBindings as Be, upsertFormDataSourceFieldBinding as E } from "@rytass/bpm-core-client/form";
9
- import { isFormDataSourceFieldDefinition as D, isFormOptionFieldDefinition as Ve, readFormFieldSelectionMode as O } from "@rytass/bpm-core-shared/form";
10
- import { DragDropContext as He, Draggable as Ue, Droppable as We } from "@hello-pangea/dnd";
11
- import k from "next/dynamic";
12
- import { json as Ge } from "@codemirror/lang-json";
13
- import { EditorView as A } from "@codemirror/view";
14
- //#region src/views/forms/builder/json-code-editor.tsx
15
- var Ke = {
16
- alignItems: "center",
17
- border: "1px solid var(--mzn-color-border-neutral)",
18
- borderRadius: 4,
19
- color: "var(--mzn-color-text-neutral)",
20
- display: "flex",
21
- minHeight: 160,
22
- padding: 12,
23
- width: "100%"
24
- }, j = [
25
- Ge(),
26
- A.lineWrapping,
27
- A.theme({
28
- "&": {
29
- border: "1px solid var(--mzn-color-border-neutral)",
30
- borderRadius: "4px",
31
- fontSize: "13px",
32
- width: "100%"
33
- },
34
- "&.cm-focused": { outline: "1px solid var(--mzn-color-border-primary)" },
35
- ".cm-content": {
36
- fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace",
37
- minHeight: "100%"
38
- },
39
- ".cm-editor": { width: "100%" },
40
- ".cm-gutters": { borderRight: "1px solid var(--mzn-color-border-neutral)" },
41
- ".cm-scroller": { fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace" }
42
- })
43
- ], M = k(() => import("@uiw/react-codemirror"), {
44
- loading: () => /* @__PURE__ */ h("div", {
45
- style: Ke,
46
- children: "載入 JSON 編輯器"
47
- }),
48
- ssr: !1
49
- });
50
- function qe({ disabled: e = !1, height: t, name: n, onChange: r, placeholder: i, value: a }) {
51
- return /* @__PURE__ */ h(M, {
52
- "aria-label": n,
53
- basicSetup: {
54
- autocompletion: !0,
55
- bracketMatching: !0,
56
- closeBrackets: !0,
57
- defaultKeymap: !0,
58
- foldGutter: !0,
59
- highlightActiveLine: !0,
60
- highlightSelectionMatches: !0,
61
- lineNumbers: !0,
62
- syntaxHighlighting: !0
63
- },
64
- editable: !e,
65
- extensions: [...j],
66
- height: t,
67
- indentWithTab: !1,
68
- onChange: r,
69
- placeholder: i,
70
- readOnly: e,
71
- theme: "light",
72
- value: a,
73
- width: "100%"
74
- });
75
- }
76
- //#endregion
77
- //#region src/views/forms/builder/FormBuilderView.tsx
78
- var Je = [
79
- {
80
- description: "單行文字、姓名、編號",
81
- icon: le,
82
- label: "文字",
83
- type: "text"
84
- },
85
- {
86
- description: "多行補充內容",
87
- icon: S,
88
- label: "長文字",
89
- type: "textarea"
90
- },
91
- {
92
- description: "金額、數量、分數",
93
- icon: y,
94
- label: "數字",
95
- type: "number"
96
- },
97
- {
98
- description: "金額與費用",
99
- icon: y,
100
- label: "金額",
101
- type: "money"
102
- },
103
- {
104
- description: "日期或到期日",
105
- icon: _,
106
- label: "日期",
107
- type: "date"
108
- },
109
- {
110
- description: "日期與時間",
111
- icon: _,
112
- label: "日期時間",
113
- type: "datetime"
114
- },
115
- {
116
- description: "是 / 否狀態",
117
- icon: v,
118
- label: "開關",
119
- type: "boolean"
120
- },
121
- {
122
- description: "固定選項擇一",
123
- icon: fe,
124
- label: "下拉選單",
125
- type: "select"
126
- },
127
- {
128
- description: "可搜尋的固定選項",
129
- icon: fe,
130
- label: "自動完成",
131
- type: "autocomplete"
132
- },
133
- {
134
- description: "固定選項單選",
135
- icon: b,
136
- label: "單選",
137
- type: "radio"
138
- },
139
- {
140
- description: "固定選項複選",
141
- icon: ue,
142
- label: "複選",
143
- type: "checkbox"
144
- },
145
- {
146
- description: "附件或佐證資料",
147
- icon: x,
148
- label: "附件",
149
- type: "file_upload"
150
- }
151
- ], Ye = {
152
- alignItems: "start",
153
- display: "flex",
154
- flexWrap: "wrap",
155
- gap: 16
156
- }, Xe = {
157
- flex: "0.55 1 300px",
158
- minWidth: 0
159
- }, Ze = {
160
- flex: "1.45 1 720px",
161
- minWidth: 620
162
- }, N = {
163
- display: "grid",
164
- gap: 12
165
- }, Qe = {
166
- display: "flex",
167
- flexWrap: "wrap",
168
- gap: 6
169
- }, $e = {
170
- flex: "0 0 auto",
171
- whiteSpace: "nowrap"
172
- }, et = {
173
- display: "grid",
174
- gap: 8
175
- }, tt = {
176
- alignItems: "center",
177
- cursor: "grab",
178
- display: "flex",
179
- gap: 12,
180
- touchAction: "none"
181
- }, nt = {
182
- display: "grid",
183
- flex: "1 1 auto",
184
- gap: 2,
185
- minWidth: 0
186
- }, rt = {
187
- alignItems: "center",
188
- display: "flex",
189
- flex: "0 0 auto",
190
- gap: 4
191
- }, it = {
192
- alignItems: "center",
193
- display: "flex",
194
- gap: 6
195
- }, at = {
196
- cursor: "pointer",
197
- userSelect: "none"
198
- }, ot = { filter: "drop-shadow(0 8px 18px rgba(0, 0, 0, 0.12))" }, st = {
199
- backgroundColor: "color-mix(in srgb, var(--mzn-color-primary) 8%, var(--mzn-color-bg-surface))",
200
- boxShadow: "inset 0 0 0 1px var(--mzn-color-border-primary)"
201
- }, ct = {
202
- alignItems: "center",
203
- border: "1px dashed var(--mzn-color-border-neutral)",
204
- borderRadius: 6,
205
- display: "grid",
206
- gap: 12,
207
- minHeight: 240,
208
- padding: 32,
209
- textAlign: "center"
210
- }, lt = {
211
- display: "flex",
212
- gap: 8,
213
- justifyContent: "center"
214
- }, ut = {
215
- display: "grid",
216
- gap: 14
217
- }, dt = {
218
- display: "grid",
219
- columnGap: 16,
220
- gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
221
- rowGap: 8
222
- }, ft = { gridColumn: "1 / -1" }, pt = {
223
- alignItems: "center",
224
- display: "flex",
225
- gap: 8,
226
- gridColumn: "1 / -1",
227
- justifyContent: "flex-end"
228
- }, mt = { gridColumn: "1 / -1" }, ht = {
229
- alignItems: "start",
230
- display: "block",
231
- width: "100%"
232
- }, gt = {
233
- ...ht,
234
- gridColumn: "1 / -1"
235
- }, _t = {
236
- minWidth: 0,
237
- width: "100%"
238
- }, vt = {
239
- minWidth: "100%",
240
- width: "100%"
241
- }, yt = {
242
- display: "grid",
243
- gap: 14
244
- }, bt = {
245
- alignItems: "start",
246
- display: "block",
247
- width: "100%"
248
- }, xt = {
249
- minWidth: 0,
250
- width: "100%"
251
- }, St = { gridColumn: "2 / -1" }, Ct = {
252
- display: "grid",
253
- gap: 10,
254
- width: "100%"
255
- }, wt = {
256
- display: "grid",
257
- gap: 8,
258
- gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))"
259
- }, Tt = { display: "inline-flex" }, Et = {
260
- display: "grid",
261
- gap: 16
262
- }, Dt = {
263
- display: "grid",
264
- gap: 8
265
- }, Ot = {
266
- display: "flex",
267
- justifyContent: "flex-end"
268
- }, kt = {
269
- color: "var(--mzn-color-text-error)",
270
- fontSize: "0.72em",
271
- lineHeight: 0,
272
- marginLeft: 2,
273
- verticalAlign: "super"
274
- }, At = {
275
- display: "grid",
276
- gap: 10,
277
- gridColumn: "1 / -1"
278
- }, jt = {
279
- backgroundColor: "var(--mzn-color-bg-surface-secondary)",
280
- borderRadius: 6,
281
- display: "grid",
282
- gap: 4,
283
- padding: 10
284
- }, Mt = {
285
- display: "grid",
286
- gap: 8,
287
- gridTemplateColumns: "minmax(180px, 0.7fr) minmax(220px, 1.3fr)"
288
- };
289
- function Nt(e) {
290
- e && (e.style.width = "100%");
291
- }
292
- var Pt = {
293
- fields: [],
294
- schemaVersion: 1
295
- }, Ft = {
296
- layout: [],
297
- schemaVersion: 1
298
- }, P = "__STATIC_OPTIONS__", It = "__CONSTANT__", Lt = "__UNBOUND__", Rt = [{
299
- id: P,
300
- name: "靜態選項"
301
- }], zt = [{
302
- id: "single",
303
- name: "單選"
304
- }, {
305
- id: "multiple",
306
- name: "複選"
307
- }], Bt = [
308
- {
309
- id: "unset",
310
- name: "不預設"
311
- },
312
- {
313
- id: "true",
314
- name: "是"
315
- },
316
- {
317
- id: "false",
318
- name: "否"
319
- }
320
- ], Vt = [{
321
- id: "true",
322
- name: "是"
323
- }, {
324
- id: "false",
325
- name: "否"
326
- }], Ht = [
327
- {
328
- label: "顯示",
329
- name: "fieldVisibleWhen",
330
- supportingText: "符合條件時才顯示這個欄位。",
331
- target: "visibleWhen"
332
- },
333
- {
334
- label: "必填",
335
- name: "fieldRequiredWhen",
336
- supportingText: "符合條件時才要求填寫這個欄位。",
337
- target: "requiredWhen"
338
- },
339
- {
340
- label: "唯讀",
341
- name: "fieldReadonlyWhen",
342
- supportingText: "符合條件時不允許修改這個欄位。",
343
- target: "readonlyWhen"
344
- }
345
- ];
346
- function F({ onChange: le, value: _ }) {
347
- let v = _?.schema ?? Pt, ue = _?.uiSchema ?? Ft, [y, b] = i(v), [x, S] = i(ue), [fe, k] = i(I(v)), [Ge, A] = i(I(ue)), [Ke, j] = i({}), [M, F] = i(null), [L, an] = i("design"), [R, z] = i(null), [B, on] = i([]), [sn, cn] = i(null), [ln, un] = i("loading"), [V, H] = i(null), [dn, fn] = i(!1), [U, W] = i(null);
348
- n(() => {
349
- let e = !0;
350
- return Te().then((t) => {
351
- e && (on(t), cn(null), un("ready"));
352
- }).catch((t) => {
353
- e && (on([]), cn("目前無法載入 DataSource Catalog,請稍後重試。"), un("unavailable"));
354
- }), () => {
355
- e = !1;
356
- };
357
- }, []), n(() => {
358
- y.fields.some((e) => e.fieldKey === R) || z(y.fields[0]?.fieldKey ?? null);
359
- }, [y.fields, R]), n(() => {
360
- j((e) => he(y.fields, e));
361
- }, [y.fields]), n(() => {
362
- L !== "advanced" && (k(I(y)), A(I(x)));
363
- }, [
364
- L,
365
- y,
366
- x
367
- ]);
368
- let G = r(() => y.fields.find((e) => e.fieldKey === R) ?? y.fields[0] ?? null, [y.fields, R]);
369
- n(() => {
370
- le?.({
371
- schema: y,
372
- uiSchema: x
373
- });
374
- }, [y, x]);
375
- function pn(e) {
376
- let t = y.fields.length + 1, n = _e(e, t);
377
- b({
378
- ...y,
379
- fields: [...y.fields, n]
380
- }), S({
381
- ...x,
382
- layout: [...x.layout, {
383
- fieldKey: n.fieldKey,
384
- width: e === "textarea" || e === "file_upload" ? "FULL" : "HALF"
385
- }]
386
- }), z(n.fieldKey), an("design"), F(null);
387
- }
388
- function mn(e) {
389
- let t = e;
390
- t === "advanced" && L !== "advanced" && (k(I(y)), A(I(x))), an(t);
391
- }
392
- function hn(e) {
393
- let t = y.fields.flatMap((t) => D(t) && Re(t).includes(e) ? [t.fieldKey] : []);
394
- if (t.length > 0) {
395
- W({
396
- affectedFieldKeys: t,
397
- fieldKey: e,
398
- kind: "remove-field"
399
- });
400
- return;
401
- }
402
- gn(e);
403
- }
404
- function gn(e) {
405
- let t = y.fields.filter((t) => t.fieldKey !== e);
406
- b({
407
- ...y,
408
- fields: t
409
- }), S({
410
- ...x,
411
- layout: x.layout.filter((t) => t.fieldKey !== e)
412
- }), z(R === e ? t[0]?.fieldKey ?? null : R), F(null), H(null);
413
- }
414
- function _n(e) {
415
- let t = e.destination;
416
- t && e.source.index !== t.index && (b((n) => ({
417
- ...n,
418
- fields: rn(n.fields, e.source.index, t.index)
419
- })), S((n) => ({
420
- ...n,
421
- layout: rn(n.layout, e.source.index, t.index)
422
- })), F(null));
423
- }
424
- function K(e) {
425
- q((t) => ({
426
- ...t,
427
- ...e
428
- }));
429
- }
430
- function q(e) {
431
- if (!G) return;
432
- let t = G.fieldKey, n = e(G), r = n.fieldKey, i = {
433
- ...y,
434
- fields: y.fields.map((e) => e.fieldKey === t ? n : e)
435
- }, a = t === r ? i : Be(i, t, r);
436
- b(a), S({
437
- ...x,
438
- layout: x.layout.map((e) => e.fieldKey === t ? {
439
- ...e,
440
- fieldKey: r
441
- } : e)
442
- }), z(r), F(null), H(null);
443
- }
444
- function J(e) {
445
- q((t) => Zt(t) ? {
446
- ...t,
447
- ...e
448
- } : t);
449
- }
450
- function vn(e) {
451
- q((t) => Se(t) ? {
452
- ...t,
453
- ...e
454
- } : t);
455
- }
456
- function yn(e) {
457
- q((t) => be(t) ? {
458
- ...t,
459
- ...e
460
- } : t);
461
- }
462
- function Y(e) {
463
- q((t) => Ce(t) ? {
464
- ...t,
465
- ...e
466
- } : t);
467
- }
468
- function bn(e) {
469
- if (!G || G.type !== "select" && G.type !== "autocomplete" || O(G) === e) return;
470
- let t = G.defaultValue, n = e === "multiple" ? typeof t == "string" ? [t] : t : Array.isArray(t) ? t[0] : t;
471
- X(G, {
472
- ...G,
473
- defaultValue: n,
474
- mode: e
475
- }, "選擇模式變更可能轉換或捨棄既有預設值。");
476
- }
477
- function X(e, t, n = "此變更會替換目前選項來源;既有 options、dynamic reference 或 bindings 可能失效。") {
478
- JSON.stringify(e) !== JSON.stringify(t) && W({
479
- fieldKey: e.fieldKey,
480
- impact: n,
481
- kind: "replace-field",
482
- nextField: t
483
- });
484
- }
485
- function xn(e, t) {
486
- if (!t) return;
487
- if (t === P) {
488
- if (!D(e)) return;
489
- let { dataSource: t, defaultValue: n, ...r } = e;
490
- X(e, {
491
- ...r,
492
- options: []
493
- });
494
- return;
495
- }
496
- let n = B.find((e) => Wt(e) === t);
497
- if (!n) return;
498
- if (D(e)) {
499
- let t = new Set(n.parameters.map((e) => e.key)), r = e.dataSource.bindings.filter((e) => t.has(e.parameter));
500
- X(e, {
501
- ...e,
502
- dataSource: {
503
- bindings: r,
504
- key: n.key,
505
- version: n.version
506
- }
507
- });
508
- return;
509
- }
510
- let { options: r, defaultValue: i, ...a } = e;
511
- X(e, {
512
- ...a,
513
- dataSource: {
514
- bindings: [],
515
- key: n.key,
516
- version: n.version
517
- }
518
- });
519
- }
520
- function Sn() {
521
- U && (U.kind === "remove-field" ? gn(U.fieldKey) : (b({
522
- ...y,
523
- fields: y.fields.map((e) => e.fieldKey === U.fieldKey ? U.nextField : e)
524
- }), F(null), H(null)), W(null));
525
- }
526
- async function Cn() {
527
- fn(!0);
528
- try {
529
- let e = await we(y, x);
530
- H(e.errors.map(ze));
531
- } catch {
532
- H(["目前無法完成 DataSource schema 驗證。"]);
533
- } finally {
534
- fn(!1);
535
- }
536
- }
537
- function wn(e) {
538
- q((t) => t.type === "boolean" ? {
539
- ...t,
540
- ...e
541
- } : t);
542
- }
543
- function Tn(e) {
544
- q((t) => t.type === "file_upload" ? {
545
- ...t,
546
- ...e
547
- } : t);
548
- }
549
- function En(e) {
550
- j(e);
551
- }
552
- function Dn(e, t) {
553
- b((n) => ({
554
- ...n,
555
- fields: n.fields.map((n) => n.fieldKey === e ? {
556
- ...n,
557
- required: t
558
- } : n)
559
- })), F(null);
560
- }
561
- function On(e) {
562
- k(e);
563
- try {
564
- b(JSON.parse(e)), F(null);
565
- } catch {
566
- F("Form Schema JSON 格式不正確");
567
- }
568
- }
569
- function kn(e) {
570
- A(e);
571
- try {
572
- S(JSON.parse(e)), F(null);
573
- } catch {
574
- F("UI Schema JSON 格式不正確");
575
- }
576
- }
577
- return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(m, { children: /* @__PURE__ */ h(ie, { children: /* @__PURE__ */ h(re, { children: /* @__PURE__ */ g("div", {
578
- style: Et,
579
- children: [
580
- /* @__PURE__ */ g(ae, {
581
- activeKey: L,
582
- onChange: mn,
583
- size: "sub",
584
- children: [
585
- /* @__PURE__ */ h(f, { children: "設計" }, "design"),
586
- /* @__PURE__ */ h(f, { children: "預覽" }, "preview"),
587
- /* @__PURE__ */ h(f, { children: "進階" }, "advanced")
588
- ]
589
- }),
590
- L === "design" ? An() : null,
591
- L === "preview" ? nr() : null,
592
- L === "advanced" ? rr() : null
593
- ]
594
- }) }) }) }), U ? /* @__PURE__ */ h(ne, {
595
- cancelText: "返回",
596
- confirmText: "確認變更",
597
- modalType: "standard",
598
- onCancel: () => W(null),
599
- onClose: () => W(null),
600
- onConfirm: Sn,
601
- open: !0,
602
- showModalFooter: !0,
603
- showModalHeader: !0,
604
- title: U.kind === "remove-field" ? "確認移除 dependency 欄位" : "確認替換選項來源",
605
- children: U.kind === "remove-field" ? /* @__PURE__ */ g("div", {
606
- style: Dt,
607
- children: [/* @__PURE__ */ h(p, {
608
- variant: "body",
609
- children: "此欄位仍被下列 DataSource binding 使用;移除後請重新設定這些欄位。"
610
- }), /* @__PURE__ */ h(p, {
611
- color: "text-warning",
612
- variant: "body",
613
- children: U.affectedFieldKeys.join("、")
614
- })]
615
- }) : /* @__PURE__ */ g(p, {
616
- variant: "body",
617
- children: [U.impact, "確認後才會寫入 schema。"]
618
- })
619
- }) : null] });
620
- function An() {
621
- return /* @__PURE__ */ g("div", {
622
- style: N,
623
- children: [/* @__PURE__ */ g("div", {
624
- style: et,
625
- children: [/* @__PURE__ */ h(p, {
626
- component: "h2",
627
- variant: "label-primary",
628
- children: "新增欄位"
629
- }), /* @__PURE__ */ h("div", {
630
- style: Qe,
631
- children: Je.map((e) => /* @__PURE__ */ h(s, {
632
- icon: e.icon,
633
- iconType: "leading",
634
- onClick: () => pn(e.type),
635
- size: "sub",
636
- style: $e,
637
- type: "button",
638
- variant: "base-secondary",
639
- children: e.label
640
- }, e.type))
641
- })]
642
- }), /* @__PURE__ */ g("div", {
643
- style: Ye,
644
- children: [/* @__PURE__ */ g("div", {
645
- style: {
646
- ...N,
647
- ...Xe
648
- },
649
- children: [/* @__PURE__ */ h(p, {
650
- component: "h2",
651
- variant: "label-primary",
652
- children: "表單畫布"
653
- }), y.fields.length > 0 ? /* @__PURE__ */ h(He, {
654
- onDragEnd: _n,
655
- children: /* @__PURE__ */ h(We, {
656
- droppableId: "form-builder-fields",
657
- children: (e) => /* @__PURE__ */ g("div", {
658
- ...e.droppableProps,
659
- ref: e.innerRef,
660
- style: N,
661
- children: [y.fields.map((e, t) => /* @__PURE__ */ h(Ue, {
662
- draggableId: e.fieldKey,
663
- index: t,
664
- children: (t, n) => er(e, t, n.isDragging)
665
- }, e.fieldKey)), e.placeholder]
666
- })
667
- })
668
- }) : /* @__PURE__ */ g("div", {
669
- style: ct,
670
- children: [/* @__PURE__ */ g("div", {
671
- style: N,
672
- children: [/* @__PURE__ */ h(p, {
673
- component: "h3",
674
- variant: "h3",
675
- children: "尚未建立欄位"
676
- }), /* @__PURE__ */ h(p, {
677
- color: "text-neutral",
678
- variant: "body",
679
- children: "從上方新增第一個欄位,或直接建立常用文字欄位開始設計。"
680
- })]
681
- }), /* @__PURE__ */ g("div", {
682
- style: lt,
683
- children: [/* @__PURE__ */ h(s, {
684
- onClick: () => pn("text"),
685
- variant: "base-primary",
686
- children: "新增文字欄位"
687
- }), /* @__PURE__ */ h(s, {
688
- onClick: () => pn("textarea"),
689
- variant: "base-secondary",
690
- children: "新增長文字"
691
- })]
692
- })]
693
- })]
694
- }), /* @__PURE__ */ g("div", {
695
- style: {
696
- ...N,
697
- ...Ze
698
- },
699
- children: [/* @__PURE__ */ h(p, {
700
- component: "h2",
701
- variant: "label-primary",
702
- children: "欄位設定"
703
- }), G ? jn(G) : /* @__PURE__ */ h(p, {
704
- color: "text-neutral",
705
- variant: "body",
706
- children: "請先新增或選取欄位。"
707
- })]
708
- })]
709
- })]
710
- });
711
- }
712
- function jn(e) {
713
- return /* @__PURE__ */ g("div", {
714
- style: ut,
715
- children: [Mn(e), Nn(e)]
716
- });
717
- }
718
- function Mn(e) {
719
- return /* @__PURE__ */ g("div", {
720
- style: dt,
721
- children: [
722
- /* @__PURE__ */ h("div", {
723
- style: pt,
724
- children: /* @__PURE__ */ h(o, {
725
- size: "main",
726
- text: Ut(e.type),
727
- variant: "text-info"
728
- })
729
- }),
730
- $("標題", "fieldLabel", /* @__PURE__ */ h(u, {
731
- onChange: (e) => K({ label: e.target.value }),
732
- placeholder: "例如:申請金額",
733
- value: e.label,
734
- variant: "base"
735
- })),
736
- $("欄位 Key", "fieldKey", /* @__PURE__ */ h(u, {
737
- onChange: (e) => K({ fieldKey: e.target.value }),
738
- placeholder: "例如:amount",
739
- value: e.fieldKey,
740
- variant: "base"
741
- })),
742
- $("提示文字", "fieldPlaceholder", /* @__PURE__ */ h(u, {
743
- onChange: (e) => K({ placeholder: e.target.value || void 0 }),
744
- placeholder: "例如:請輸入申請金額",
745
- value: e.placeholder ?? "",
746
- variant: "base"
747
- })),
748
- Pn(e)
749
- ]
750
- });
751
- }
752
- function Nn(e) {
753
- return /* @__PURE__ */ h(a, {
754
- defaultExpanded: Yt(e),
755
- size: "sub",
756
- title: "進階設定",
757
- children: /* @__PURE__ */ g("div", {
758
- style: dt,
759
- children: [
760
- /* @__PURE__ */ h(p, {
761
- component: "h3",
762
- style: ft,
763
- variant: "label-primary",
764
- children: "條件規則"
765
- }),
766
- /* @__PURE__ */ h(p, {
767
- color: "text-neutral",
768
- style: mt,
769
- variant: "body",
770
- children: "只有需要根據其他欄位改變顯示、必填或唯讀狀態時才需要設定。"
771
- }),
772
- Jn(e)
773
- ]
774
- })
775
- });
776
- }
777
- function Pn(e) {
778
- return Zt(e) ? Fn(e) : Se(e) ? In(e) : be(e) ? Ln(e) : Ve(e) ? Rn(e) : e.type === "boolean" ? Kn(e) : qn(e);
779
- }
780
- function Fn(e) {
781
- return /* @__PURE__ */ g(m, { children: [
782
- $("預設值", "fieldDefaultValue", e.type === "textarea" ? Zn({
783
- name: "fieldDefaultValue",
784
- onChange: (e) => J({ defaultValue: e || void 0 }),
785
- placeholder: "輸入此欄位的預設文字",
786
- rows: 3,
787
- value: Qt(e.defaultValue)
788
- }) : /* @__PURE__ */ h(u, {
789
- onChange: (e) => J({ defaultValue: e.target.value || void 0 }),
790
- placeholder: "輸入此欄位的預設文字",
791
- value: Qt(e.defaultValue),
792
- variant: "base"
793
- })),
794
- $("最小長度", "fieldMinLength", Q(e.minLength, (e) => J({ minLength: e }), "例如:2", { min: 0 })),
795
- $("最大長度", "fieldMaxLength", Q(e.maxLength, (e) => J({ maxLength: e }), "例如:100", { min: 1 }))
796
- ] });
797
- }
798
- function In(e) {
799
- return /* @__PURE__ */ g(m, { children: [
800
- $("預設值", "fieldDefaultValue", Q(typeof e.defaultValue == "number" ? e.defaultValue : void 0, (e) => vn({ defaultValue: e }), e.type === "money" ? "例如:1000" : "輸入預設數值", {
801
- max: e.maximum,
802
- min: e.minimum
803
- })),
804
- $("最小值", "fieldMinimum", Q(e.minimum, (e) => vn({ minimum: e }), "例如:0")),
805
- $("最大值", "fieldMaximum", Q(e.maximum, (e) => vn({ maximum: e }), "例如:999999"))
806
- ] });
807
- }
808
- function Ln(e) {
809
- return $("預設值", "fieldDefaultValue", Qn(e, Qt(e.defaultValue), (e) => yn({ defaultValue: e })));
810
- }
811
- function Rn(e) {
812
- let t = ke(e.type, B), n = D(e) ? Wt(e.dataSource) : P, r = D(e) ? B.find((t) => t.key === e.dataSource.key && t.version === e.dataSource.version) : null, i = r ? t.some((e) => e.key === r.key && e.version === r.version) : !1, a = [
813
- ...Rt,
814
- ...t.map(Gt),
815
- ...D(e) && !i ? [{
816
- id: n,
817
- name: `${e.dataSource.key} v${e.dataSource.version}(目前不可用或不支援)`
818
- }] : []
819
- ], o = O(e);
820
- return /* @__PURE__ */ g(m, { children: [
821
- e.type === "select" || e.type === "autocomplete" ? $("選擇模式", "fieldSelectionMode", /* @__PURE__ */ h(d, {
822
- clearable: !1,
823
- onChange: (e) => {
824
- (e?.id === "single" || e?.id === "multiple") && bn(e.id);
825
- },
826
- options: [...zt],
827
- value: T(zt, o)
828
- })) : $("選擇模式", "fieldSelectionMode", /* @__PURE__ */ h(p, {
829
- color: "text-neutral",
830
- variant: "body",
831
- children: o === "multiple" ? "固定複選" : "固定單選"
832
- })),
833
- $("選項來源", "fieldOptionSource", /* @__PURE__ */ h(d, {
834
- clearable: !1,
835
- disabled: ln === "loading" && !D(e),
836
- onChange: (t) => xn(e, t?.id),
837
- options: a,
838
- placeholder: "選擇選項來源",
839
- value: T(a, n)
840
- })),
841
- D(e) ? zn(e, t) : Gn(e)
842
- ] });
843
- }
844
- function zn(e, t) {
845
- let n = B.find((t) => t.key === e.dataSource.key && t.version === e.dataSource.version), r = n && !xe(n, e.type);
846
- return /* @__PURE__ */ g("div", {
847
- style: At,
848
- children: [
849
- ln === "loading" ? /* @__PURE__ */ h(p, {
850
- color: "text-neutral",
851
- variant: "body",
852
- children: "正在載入可用的 DataSource Catalog…"
853
- }) : null,
854
- sn ? /* @__PURE__ */ h(p, {
855
- color: "text-error",
856
- variant: "body",
857
- children: sn
858
- }) : null,
859
- n ? null : /* @__PURE__ */ h(p, {
860
- color: "text-warning",
861
- variant: "body",
862
- children: "目前來源版本未出現在 Catalog;會保留原設定,但在環境 lint 通過前不可發布。"
863
- }),
864
- r ? /* @__PURE__ */ h(p, {
865
- color: "text-error",
866
- variant: "body",
867
- children: "目前來源不支援此控制項或超出 bounded list 限制,請選擇其他版本。"
868
- }) : null,
869
- n ? Bn(n) : null,
870
- n ? n.parameters.map((t) => Vn(e, t)) : null,
871
- t.length === 0 && !sn ? /* @__PURE__ */ h(p, {
872
- color: "text-warning",
873
- variant: "body",
874
- children: "沒有符合目前控制項能力的已註冊來源。"
875
- }) : null,
876
- /* @__PURE__ */ h("div", {
877
- style: Ot,
878
- children: /* @__PURE__ */ h(s, {
879
- disabled: dn,
880
- onClick: () => void Cn(),
881
- size: "sub",
882
- type: "button",
883
- variant: "base-secondary",
884
- children: dn ? "驗證中…" : "驗證 DataSource 設定"
885
- })
886
- }),
887
- V ? /* @__PURE__ */ h(p, {
888
- color: V.length > 0 ? "text-error" : "text-success",
889
- variant: "caption",
890
- children: V.length > 0 ? V.join(";") : "DataSource schema 與目前環境均通過驗證。"
891
- }) : null
892
- ]
893
- });
894
- }
895
- function Bn(e) {
896
- return /* @__PURE__ */ g("div", {
897
- style: jt,
898
- children: [
899
- /* @__PURE__ */ g(p, {
900
- variant: "label-primary",
901
- children: [
902
- e.label,
903
- " · v",
904
- e.version
905
- ]
906
- }),
907
- e.description ? /* @__PURE__ */ h(p, {
908
- color: "text-neutral",
909
- variant: "caption",
910
- children: e.description
911
- }) : null,
912
- /* @__PURE__ */ g(p, {
913
- color: "text-neutral",
914
- variant: "caption",
915
- children: [
916
- "支援:",
917
- e.supportedControls.join("、"),
918
- ";",
919
- e.supportsSearch ? "支援搜尋" : "不支援搜尋",
920
- ";",
921
- e.paginationMode === "CURSOR" ? "支援分頁" : "完整清單",
922
- "; policy:",
923
- e.revalidationPolicy
924
- ]
925
- })
926
- ]
927
- });
928
- }
929
- function Vn(t, n) {
930
- let r = Fe(t, n.key), i = Kt(r), a = Oe(n.type, y.fields, t.fieldKey), o = [
931
- ...n.required ? [] : [{
932
- id: Lt,
933
- name: "未綁定"
934
- }],
935
- ...a,
936
- ...n.type === "STRING_ARRAY" ? [] : [{
937
- id: It,
938
- name: "固定常數"
939
- }]
940
- ];
941
- return /* @__PURE__ */ g("div", {
942
- style: Mt,
943
- children: [/* @__PURE__ */ h(e, {
944
- label: `${n.label ?? n.key}${n.required ? "(必填)" : "(選填)"}`,
945
- name: `dataSourceParameter_${n.key}`,
946
- children: /* @__PURE__ */ h(d, {
947
- clearable: !1,
948
- onChange: (e) => Un(t, n.key, n.type, e?.id),
949
- options: o,
950
- placeholder: "選擇欄位或常數",
951
- value: T(o, i)
952
- })
953
- }), Le(r) === "CONSTANT" ? Hn(t, n.key, n.type, r) : Le(r) === "FIELD" ? /* @__PURE__ */ g(p, {
954
- color: "text-neutral",
955
- variant: "caption",
956
- children: [
957
- "使用表單欄位「",
958
- r?.from.kind === "FIELD" ? r.from.fieldKey : "",
959
- "」的目前值。"
960
- ]
961
- }) : /* @__PURE__ */ h(p, {
962
- color: "text-neutral",
963
- variant: "caption",
964
- children: n.required ? a.length > 0 ? "請選擇相容的表單欄位或固定常數。" : "目前沒有型別相容的表單欄位,請先建立 dependency。" : "此參數可不綁定。"
965
- })]
966
- }, n.key);
967
- }
968
- function Hn(e, t, n, r) {
969
- let i = Ie(e, t);
970
- if (n === "BOOLEAN") {
971
- let e = [{
972
- id: "true",
973
- name: "是"
974
- }, {
975
- id: "false",
976
- name: "否"
977
- }];
978
- return /* @__PURE__ */ h(d, {
979
- clearable: !1,
980
- onChange: (e) => Wn(t, e?.id === "true"),
981
- options: e,
982
- value: T(e, i === !0 ? "true" : "false")
983
- });
984
- }
985
- return n === "STRING_ARRAY" ? /* @__PURE__ */ h(p, {
986
- color: "text-warning",
987
- variant: "caption",
988
- children: "STRING_ARRAY 參數請綁定複選欄位;目前不接受固定常數。"
989
- }) : /* @__PURE__ */ h(u, {
990
- onChange: (e) => Wn(t, n === "NUMBER" ? De(e.target.value) ?? 0 : e.target.value),
991
- placeholder: n === "NUMBER" ? "輸入數字" : "輸入固定值",
992
- value: Jt(r, n),
993
- variant: "base"
994
- });
995
- }
996
- function Un(e, t, n, r) {
997
- if (!r || r === Lt) {
998
- q((e) => D(e) ? E(e, t, null) : e);
999
- return;
1000
- }
1001
- if (r === It) {
1002
- q((e) => D(e) ? E(e, t, {
1003
- from: {
1004
- kind: "CONSTANT",
1005
- value: qt(n)
1006
- },
1007
- parameter: t
1008
- }) : e);
1009
- return;
1010
- }
1011
- q((e) => D(e) ? E(e, t, {
1012
- from: {
1013
- fieldKey: r,
1014
- kind: "FIELD"
1015
- },
1016
- parameter: t
1017
- }) : e);
1018
- }
1019
- function Wn(e, t) {
1020
- q((n) => D(n) ? E(n, e, {
1021
- from: {
1022
- kind: "CONSTANT",
1023
- value: t
1024
- },
1025
- parameter: e
1026
- }) : n);
1027
- }
1028
- function Gn(e) {
1029
- let t = O(e), n = Array.isArray(e.defaultValue) ? e.defaultValue : [], r = e.options.map(Pe), i = r.filter((e) => n.includes(e.id));
1030
- return /* @__PURE__ */ g(m, { children: [$("預設值", "fieldDefaultValue", t === "multiple" ? /* @__PURE__ */ h(d, {
1031
- clearable: !0,
1032
- mode: "multiple",
1033
- onChange: (e) => Y({ defaultValue: e.length ? e.map((e) => e.id) : void 0 }),
1034
- options: r,
1035
- placeholder: "選擇一或多個預設選項",
1036
- value: i
1037
- }) : /* @__PURE__ */ h(d, {
1038
- clearable: !0,
1039
- onChange: (e) => Y({ defaultValue: e?.id || void 0 }),
1040
- options: r,
1041
- placeholder: "選擇預設選項",
1042
- value: typeof e.defaultValue == "string" ? T(r, e.defaultValue) : null
1043
- })), $("選項", "fieldOptions", $n(e), !0)] });
1044
- }
1045
- function Kn(e) {
1046
- let t = typeof e.defaultValue == "boolean" ? String(e.defaultValue) : "unset";
1047
- return $("預設值", "fieldDefaultValue", /* @__PURE__ */ h(d, {
1048
- clearable: !1,
1049
- onChange: (e) => wn({ defaultValue: e?.id === "true" || e?.id !== "false" && void 0 }),
1050
- options: [...Bt],
1051
- placeholder: "選擇預設狀態",
1052
- value: T(Bt, t)
1053
- }));
1054
- }
1055
- function qn(e) {
1056
- return /* @__PURE__ */ g(m, { children: [$("檔案數", "fieldMaxFiles", Q(e.maxFiles, (e) => Tn({ maxFiles: e }), "例如:1", { min: 1 })), $("MIME", "fieldAcceptedMimeTypes", Zn({
1057
- name: "fieldAcceptedMimeTypes",
1058
- onChange: (e) => Tn({ acceptedMimeTypes: $t(e) }),
1059
- placeholder: "每行一個 MIME type,例如:application/pdf",
1060
- rows: 3,
1061
- value: en(e.acceptedMimeTypes)
1062
- }), !1)] });
1063
- }
1064
- function Jn(e) {
1065
- let t = y.fields.filter((t) => t.fieldKey !== e.fieldKey);
1066
- return t.length ? /* @__PURE__ */ h(m, { children: Ht.map((n) => Yn(e, n, t)) }) : /* @__PURE__ */ h(p, {
1067
- color: "text-neutral",
1068
- style: mt,
1069
- variant: "body",
1070
- children: "目前沒有其他欄位可作為條件來源。新增更多欄位後即可設定條件規則。"
1071
- });
1072
- }
1073
- function Yn(e, t, n) {
1074
- let r = e[t.target], i = r ? Ee(r) : null, a = n.find((e) => e.fieldKey === i?.fieldKey), o = a ?? n[0], ee = n.map(Xt), s = je(o), c = i && s.some((e) => e.id === i.operator) ? i.operator : Ne(o), te = i?.value ?? w(o), l = !!r, u = l && (!i || !a);
1075
- return $(t.label, t.name, /* @__PURE__ */ g("div", {
1076
- style: Ct,
1077
- children: [/* @__PURE__ */ h(ce, {
1078
- checked: l,
1079
- label: l ? "已啟用" : "不啟用",
1080
- onChange: (e) => Z(t.target, e.target.checked ? C(o, Ne(o), w(o)) : void 0),
1081
- size: "sub",
1082
- supportingText: t.supportingText
1083
- }), l ? u ? /* @__PURE__ */ h(p, {
1084
- color: "text-warning",
1085
- variant: "body",
1086
- children: "這個規則不是目前 UI 支援的格式。重新選擇條件後會取代既有規則。"
1087
- }) : /* @__PURE__ */ g("div", {
1088
- style: wt,
1089
- children: [
1090
- /* @__PURE__ */ h(d, {
1091
- clearable: !1,
1092
- onChange: (e) => {
1093
- let r = n.find((t) => t.fieldKey === e?.id) ?? o;
1094
- Z(t.target, C(r, Ne(r), w(r)));
1095
- },
1096
- options: ee,
1097
- placeholder: "選擇欄位",
1098
- value: T(ee, o.fieldKey)
1099
- }),
1100
- /* @__PURE__ */ h(d, {
1101
- clearable: !1,
1102
- onChange: (e) => Z(t.target, C(o, Ae(e?.id) ?? c, te)),
1103
- options: [...s],
1104
- placeholder: "判斷方式",
1105
- value: T(s, c)
1106
- }),
1107
- Xn(o, te, (e) => Z(t.target, C(o, c, e)))
1108
- ]
1109
- }) : null]
1110
- }), !0);
1111
- }
1112
- function Z(e, t) {
1113
- K({ [e]: t });
1114
- }
1115
- function Xn(e, t, n) {
1116
- if (e.type === "boolean") return /* @__PURE__ */ h(d, {
1117
- clearable: !1,
1118
- onChange: (e) => n(e?.id ?? "true"),
1119
- options: [...Vt],
1120
- placeholder: "比較值",
1121
- value: T(Vt, t === "false" ? "false" : "true")
1122
- });
1123
- if (Ce(e)) {
1124
- let r = e.options.map(Pe);
1125
- return /* @__PURE__ */ h(d, {
1126
- clearable: !1,
1127
- onChange: (e) => n(e?.id ?? r[0]?.id ?? ""),
1128
- options: r,
1129
- placeholder: "比較值",
1130
- value: T(r, t)
1131
- });
1132
- }
1133
- return Se(e) ? Q(De(t), (e) => n(String(e ?? 0)), "比較值") : be(e) ? Qn(e, t, (e) => n(e ?? "")) : /* @__PURE__ */ h(u, {
1134
- onChange: (e) => n(e.target.value),
1135
- placeholder: "比較值",
1136
- value: t,
1137
- variant: "base"
1138
- });
1139
- }
1140
- function Zn({ name: e, onChange: t, placeholder: n, rows: r, value: i }) {
1141
- return /* @__PURE__ */ h(se, {
1142
- "aria-label": e,
1143
- onChange: (e) => t(e.target.value),
1144
- placeholder: n,
1145
- ref: Nt,
1146
- resize: "vertical",
1147
- rows: r,
1148
- style: vt,
1149
- value: i
1150
- });
1151
- }
1152
- function Q(e, t, n, r = {}) {
1153
- return /* @__PURE__ */ h(u, {
1154
- max: r.max,
1155
- min: r.min,
1156
- onChange: (e) => t(ge(De(e.target.value), r)),
1157
- placeholder: n,
1158
- showSpinner: !0,
1159
- step: r.step ?? 1,
1160
- value: typeof e == "number" ? String(e) : "",
1161
- variant: "measure"
1162
- });
1163
- }
1164
- function Qn(e, t, n) {
1165
- return e.type === "datetime" ? /* @__PURE__ */ h(te, {
1166
- formatDate: "YYYY-MM-DD",
1167
- formatTime: "HH:mm",
1168
- hideSecond: !0,
1169
- onChange: (e) => n(ye(e)),
1170
- placeholderLeft: "選擇日期",
1171
- placeholderRight: "選擇時間",
1172
- value: Me(t)
1173
- }) : /* @__PURE__ */ h(c, {
1174
- format: "YYYY-MM-DD",
1175
- onChange: (e) => n(ve(e)),
1176
- placeholder: "選擇日期",
1177
- value: Me(t)
1178
- });
1179
- }
1180
- function $n(e) {
1181
- let t = e.options.map((t, n) => ({
1182
- index: n,
1183
- key: `${e.fieldKey}-${n}`,
1184
- label: t.label,
1185
- value: t.value
1186
- }));
1187
- return /* @__PURE__ */ g("div", {
1188
- style: Dt,
1189
- children: [/* @__PURE__ */ h(oe, {
1190
- actions: {
1191
- render: (t) => [{
1192
- disabled: () => e.options.length <= 1,
1193
- icon: me,
1194
- iconType: "icon-only",
1195
- name: "移除選項",
1196
- onClick: () => Y({ options: e.options.filter((e, n) => n !== t.index) }),
1197
- variant: "destructive-ghost"
1198
- }],
1199
- width: 56
1200
- },
1201
- columns: [{
1202
- key: "label",
1203
- render: (t) => /* @__PURE__ */ h(u, {
1204
- onChange: (n) => Y({ options: tn(e.options, t.index, { label: n.target.value }) }),
1205
- placeholder: "例如:主管",
1206
- size: "sub",
1207
- value: t.label,
1208
- variant: "base"
1209
- }),
1210
- title: "Label"
1211
- }, {
1212
- key: "value",
1213
- render: (t) => /* @__PURE__ */ h(u, {
1214
- onChange: (n) => Y({ options: tn(e.options, t.index, { value: n.target.value }) }),
1215
- placeholder: "例如:manager",
1216
- size: "sub",
1217
- value: t.value,
1218
- variant: "base"
1219
- }),
1220
- title: "Value"
1221
- }],
1222
- dataSource: t,
1223
- showHeader: !0,
1224
- size: "sub"
1225
- }), /* @__PURE__ */ h("div", {
1226
- style: Ot,
1227
- children: /* @__PURE__ */ h(s, {
1228
- icon: pe,
1229
- iconType: "leading",
1230
- onClick: () => Y({ options: [...e.options, nn(e.options)] }),
1231
- variant: "base-secondary",
1232
- children: "新增選項"
1233
- })
1234
- })]
1235
- });
1236
- }
1237
- function er(e, t, n) {
1238
- return /* @__PURE__ */ h("div", {
1239
- ...t.draggableProps,
1240
- "data-form-builder-field-key": e.fieldKey,
1241
- ref: t.innerRef,
1242
- style: {
1243
- ...at,
1244
- ...n ? ot : null,
1245
- ...t.draggableProps.style
1246
- },
1247
- children: /* @__PURE__ */ h(ee, {
1248
- style: e.fieldKey === G?.fieldKey ? st : void 0,
1249
- children: tr(e, t, n)
1250
- })
1251
- });
1252
- }
1253
- function $(t, n, r, i = !1) {
1254
- return /* @__PURE__ */ h("div", {
1255
- style: i ? gt : ht,
1256
- children: /* @__PURE__ */ h("div", {
1257
- style: _t,
1258
- children: /* @__PURE__ */ h(e, {
1259
- label: t,
1260
- name: n,
1261
- children: r
1262
- })
1263
- })
1264
- });
1265
- }
1266
- function tr(e, t, n) {
1267
- return /* @__PURE__ */ g("div", {
1268
- ...t.dragHandleProps ?? {},
1269
- "aria-label": "選取或拖曳排序欄位",
1270
- onClick: () => z(e.fieldKey),
1271
- style: tt,
1272
- title: "點擊選取,拖曳排序",
1273
- children: [
1274
- /* @__PURE__ */ h("span", {
1275
- "aria-label": "拖曳排序",
1276
- role: "img",
1277
- style: Tt,
1278
- title: "拖曳排序",
1279
- children: /* @__PURE__ */ h(l, {
1280
- icon: de,
1281
- size: 20
1282
- })
1283
- }),
1284
- /* @__PURE__ */ g("div", {
1285
- style: nt,
1286
- children: [/* @__PURE__ */ g(p, {
1287
- component: "span",
1288
- ellipsis: !0,
1289
- variant: "label-primary",
1290
- children: [e.label, e.required ? /* @__PURE__ */ h("sup", {
1291
- "aria-label": "必填",
1292
- style: kt,
1293
- children: "*"
1294
- }) : null]
1295
- }), /* @__PURE__ */ g(p, {
1296
- color: "text-neutral",
1297
- component: "span",
1298
- ellipsis: !0,
1299
- variant: "caption",
1300
- children: [
1301
- Ut(e.type),
1302
- " ·",
1303
- e.required ? " 必填" : " 選填",
1304
- " ·",
1305
- e.fieldKey
1306
- ]
1307
- })]
1308
- }),
1309
- /* @__PURE__ */ g("div", {
1310
- onClick: (e) => e.stopPropagation(),
1311
- style: rt,
1312
- children: [/* @__PURE__ */ h("div", {
1313
- style: it,
1314
- children: /* @__PURE__ */ h(ce, {
1315
- checked: !!e.required,
1316
- disabled: n,
1317
- label: "必填",
1318
- onChange: (t) => Dn(e.fieldKey, t.target.checked)
1319
- })
1320
- }), /* @__PURE__ */ h(s, {
1321
- disabled: n,
1322
- icon: me,
1323
- iconType: "icon-only",
1324
- onClick: () => hn(e.fieldKey),
1325
- variant: "destructive-ghost",
1326
- children: "移除欄位"
1327
- })]
1328
- })
1329
- ]
1330
- });
1331
- }
1332
- function nr() {
1333
- return /* @__PURE__ */ g("div", {
1334
- style: N,
1335
- children: [/* @__PURE__ */ h(p, {
1336
- component: "h2",
1337
- variant: "h3",
1338
- children: "填寫預覽"
1339
- }), /* @__PURE__ */ h(t, {
1340
- dataSourceContext: { kind: "preview" },
1341
- onChange: En,
1342
- schema: y,
1343
- uiSchema: x,
1344
- value: Ke
1345
- })]
1346
- });
1347
- }
1348
- function rr() {
1349
- return /* @__PURE__ */ g("div", {
1350
- style: N,
1351
- children: [/* @__PURE__ */ h(p, {
1352
- component: "h2",
1353
- variant: "h3",
1354
- children: "Schema"
1355
- }), /* @__PURE__ */ g("div", {
1356
- style: yt,
1357
- children: [
1358
- ir("Form Schema", "schemaJson", /* @__PURE__ */ h(qe, {
1359
- height: "360px",
1360
- name: "schemaJson",
1361
- onChange: On,
1362
- placeholder: "輸入 Form Schema JSON",
1363
- value: fe
1364
- })),
1365
- ir("UI Schema", "uiSchemaJson", /* @__PURE__ */ h(qe, {
1366
- height: "240px",
1367
- name: "uiSchemaJson",
1368
- onChange: kn,
1369
- placeholder: "輸入 UI Schema JSON",
1370
- value: Ge
1371
- })),
1372
- M ? /* @__PURE__ */ h(p, {
1373
- color: "text-error",
1374
- style: St,
1375
- variant: "body",
1376
- children: M
1377
- }) : null
1378
- ]
1379
- })]
1380
- });
1381
- }
1382
- function ir(t, n, r) {
1383
- return /* @__PURE__ */ h("div", {
1384
- style: bt,
1385
- children: /* @__PURE__ */ h("div", {
1386
- style: xt,
1387
- children: /* @__PURE__ */ h(e, {
1388
- label: t,
1389
- name: n,
1390
- children: r
1391
- })
1392
- })
1393
- });
1394
- }
1395
- }
1396
- function Ut(e) {
1397
- return Je.find((t) => t.type === e)?.label ?? e;
1398
- }
1399
- function Wt(e) {
1400
- return `${e.key}@${e.version}`;
1401
- }
1402
- function Gt(e) {
1403
- return {
1404
- id: Wt(e),
1405
- name: `${e.label} · ${e.key} v${e.version}`
1406
- };
1407
- }
1408
- function Kt(e) {
1409
- return e ? e.from.kind === "FIELD" ? e.from.fieldKey : It : Lt;
1410
- }
1411
- function qt(e) {
1412
- switch (e) {
1413
- case "BOOLEAN": return !1;
1414
- case "NUMBER": return 0;
1415
- case "STRING_ARRAY": return "";
1416
- case "STRING": return "";
1417
- default: return "";
1418
- }
1419
- }
1420
- function Jt(e, t) {
1421
- let n = e?.from.kind === "CONSTANT" ? e.from.value : "";
1422
- return t === "NUMBER" ? typeof n == "number" ? String(n) : "" : typeof n == "string" ? n : "";
1423
- }
1424
- function Yt(e) {
1425
- return !!(e.visibleWhen || e.requiredWhen || e.readonlyWhen);
1426
- }
1427
- function Xt(e) {
1428
- return {
1429
- id: e.fieldKey,
1430
- name: e.label
1431
- };
1432
- }
1433
- function Zt(e) {
1434
- return e.type === "text" || e.type === "textarea";
1435
- }
1436
- function Qt(e) {
1437
- return typeof e == "string" ? e : "";
1438
- }
1439
- function $t(e) {
1440
- let t = e.split(/[\n,]/u).map((e) => e.trim()).filter(Boolean);
1441
- return t.length ? t : void 0;
1442
- }
1443
- function en(e) {
1444
- return e?.join("\n") ?? "";
1445
- }
1446
- function I(e) {
1447
- return JSON.stringify(e, null, 2);
1448
- }
1449
- function tn(e, t, n) {
1450
- return e.map((e, r) => r === t ? {
1451
- ...e,
1452
- ...n
1453
- } : e);
1454
- }
1455
- function nn(e) {
1456
- let t = e.length + 1;
1457
- return {
1458
- label: `選項 ${t}`,
1459
- value: L(e, t)
1460
- };
1461
- }
1462
- function L(e, t) {
1463
- let n = `option_${t}`;
1464
- return e.some((e) => e.value === n) ? L(e, t + 1) : n;
1465
- }
1466
- function rn(e, t, n) {
1467
- let r = e[t];
1468
- if (!r || t === n) return [...e];
1469
- let i = e.filter((e, n) => n !== t);
1470
- return [
1471
- ...i.slice(0, n),
1472
- r,
1473
- ...i.slice(n)
1474
- ];
1475
- }
1476
- //#endregion
1477
- export { F as t };
1478
-
1479
- //# sourceMappingURL=FormBuilderView-TzSezeqC.js.map