@blocklet/pages-kit-inner-components 0.6.1 → 0.6.3

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 (45) hide show
  1. package/lib/cjs/add-component.js +1 -420
  2. package/lib/cjs/chunks/draft-data-CfIMszE7.js +1 -0
  3. package/lib/cjs/chunks/home-DUjl5PbP.js +6 -0
  4. package/lib/cjs/chunks/publish-button-C522nNv6.js +1 -0
  5. package/lib/cjs/chunks/site-state-BG2d2tBl.js +57 -0
  6. package/lib/cjs/chunks/state-CtNs8GrN.js +1 -0
  7. package/lib/cjs/home.js +1 -1
  8. package/lib/cjs/project-html.js +11 -4
  9. package/lib/cjs/resources.js +1 -1
  10. package/lib/es/add-component.js +2 -1089
  11. package/lib/es/chunks/{draft-data-CafrGKeh.js → draft-data-bRUHvvzp.js} +5 -4
  12. package/lib/es/chunks/home-VWWdvIPQ.js +69 -0
  13. package/lib/es/chunks/{publish-button-XSZrDaTQ.js → publish-button-Ceet-m88.js} +158 -140
  14. package/lib/es/chunks/site-state-BoVWlYLn.js +2096 -0
  15. package/lib/es/chunks/state-BdNIIXJP.js +502 -0
  16. package/lib/es/home.js +3 -28
  17. package/lib/es/project-html.js +114 -130
  18. package/lib/es/resources.js +93 -137
  19. package/package.json +11 -11
  20. package/lib/cjs/chunks/draft-data-D44_IEV2.js +0 -1
  21. package/lib/cjs/chunks/home-BYk01EUy.js +0 -39
  22. package/lib/cjs/chunks/index-BRgYwvuv.js +0 -475
  23. package/lib/cjs/chunks/publish-button-C8XPA4g_.js +0 -1
  24. package/lib/cjs/chunks/session-BRtsDvA-.js +0 -1
  25. package/lib/cjs/chunks/site-state-gSkcvhcV.js +0 -57
  26. package/lib/cjs/chunks/state-B6BF5wJ-.js +0 -1
  27. package/lib/cjs/chunks-map.json +0 -1
  28. package/lib/cjs/components.js +0 -1
  29. package/lib/cjs/locales.js +0 -3
  30. package/lib/cjs/setting.js +0 -11
  31. package/lib/cjs/site-state.js +0 -1
  32. package/lib/cjs/theme.js +0 -1
  33. package/lib/cjs/uploader.js +0 -1
  34. package/lib/es/chunks/home-DW8SdyfO.js +0 -594
  35. package/lib/es/chunks/index-D5gXPe_7.js +0 -2326
  36. package/lib/es/chunks/session-C72Dq8zg.js +0 -19
  37. package/lib/es/chunks/site-state-W2H7XCSQ.js +0 -2077
  38. package/lib/es/chunks/state-0gvZF3k2.js +0 -573
  39. package/lib/es/chunks-map.json +0 -1
  40. package/lib/es/components.js +0 -22
  41. package/lib/es/locales.js +0 -1032
  42. package/lib/es/setting.js +0 -2294
  43. package/lib/es/site-state.js +0 -48
  44. package/lib/es/theme.js +0 -484
  45. package/lib/es/uploader.js +0 -8
package/lib/es/setting.js DELETED
@@ -1,2294 +0,0 @@
1
- import { jsx as r, jsxs as v, Fragment as F } from "react/jsx-runtime";
2
- import { t as be, f as ee, a as oe, E as Qe, h as ge } from "./chunks/state-0gvZF3k2.js";
3
- import G from "@arcblock/ux/lib/Empty";
4
- import { useLocaleContext as V } from "@arcblock/ux/lib/Locale/context";
5
- import { CodeEditor as ye } from "@blocklet/code-editor";
6
- import Xe from "@mui/icons-material/AddRounded";
7
- import Ze from "@mui/icons-material/ArrowDownward";
8
- import er from "@mui/icons-material/ArrowUpward";
9
- import rr from "@mui/icons-material/DeleteOutline";
10
- import { Typography as A, TextField as z, Stack as k, FormLabel as re, Box as P, TableContainer as tr, Paper as Y, Table as Oe, TableHead as Ne, TableRow as te, TableCell as ne, TableBody as je, Button as E, IconButton as q, FormControlLabel as xe, Switch as ze, InputAdornment as $, alpha as ae, Tooltip as _, buttonClasses as nr, Dialog as ve, DialogTitle as Ve, DialogContent as Re, DialogActions as Ee, Checkbox as ir, Autocomplete as Te, MenuItem as ce, Collapse as or, Divider as lr, Popper as sr } from "@mui/material";
11
- import D from "lodash/sortBy";
12
- import { useCallback as T, useMemo as H, useState as B, useEffect as U, useImperativeHandle as ar, useRef as M, useId as cr } from "react";
13
- import { useUpdate as Ae, useDebounce as dr } from "react-use";
14
- import { ColorItem as ur, ConfigColorDialog as pr } from "@blocklet/pages-kit/builtin/color-picker";
15
- import { getImageSize as de, getVideoSize as ue, UploaderButton as Ce, UploaderProvider as le, useUploader as mr } from "@blocklet/pages-kit/builtin/uploader";
16
- import { Icon as hr } from "@iconify-icon/react";
17
- import K from "lodash/isEmpty";
18
- import De from "lodash/set";
19
- import * as pe from "yaml";
20
- import fr from "lodash/cloneDeep";
21
- import me from "@arcblock/ux/lib/Toast";
22
- import { CustomComponentRenderer as We, transpileAndLoadScript as br, getPropertiesFromCode as gr } from "@blocklet/pages-kit/components";
23
- import { parsePropertyValue as yr } from "@blocklet/pages-kit/utils/property";
24
- import { unstable_useNumberInput as xr, ClickAwayListener as vr } from "@mui/base";
25
- import { VisibilityOffRounded as Cr, VisibilityRounded as Pr, DeleteOutlineRounded as kr, DragIndicatorRounded as wr, TranslateRounded as Ue, AddRounded as Ke, InfoRounded as Be, PsychologyAlt as Ir, StarRounded as Sr, SettingsRounded as Me } from "@mui/icons-material";
26
- import { getYjsValue as Q } from "@syncedstore/core";
27
- import { useUpdate as Or, useReactive as Nr } from "ahooks";
28
- import jr from "lodash/assign";
29
- import zr from "lodash/get";
30
- import Vr from "lodash/has";
31
- import Rr from "lodash/isEqual";
32
- import ie from "lodash/isNil";
33
- import Er from "lodash/isObject";
34
- import Tr from "lodash/keyBy";
35
- import Ar from "lodash/omit";
36
- import Dr from "lodash/pick";
37
- import Wr from "lodash/reduce";
38
- import { usePopupState as Pe, bindTrigger as ke, bindDialog as Le, bindPopper as Ur } from "material-ui-popup-state/hooks";
39
- import { ErrorBoundary as Kr } from "react-error-boundary";
40
- import { cx as Br } from "@emotion/css";
41
- import { useDrop as Fe, useDrag as Mr } from "react-dnd";
42
- import { nextId as Je } from "@blocklet/pages-kit/utils/common";
43
- function Lr({
44
- onClick: e,
45
- disabled: t,
46
- sx: o,
47
- ...l
48
- }) {
49
- return /* @__PURE__ */ r(q, { size: "small", color: "warning", variant: "outlined", disabled: t, onClick: e, ...l, children: /* @__PURE__ */ r(rr, { fontSize: "small" }) });
50
- }
51
- function Fr({
52
- onClick: e,
53
- disabled: t,
54
- sx: o,
55
- ...l
56
- }) {
57
- return /* @__PURE__ */ r(q, { size: "small", color: "primary", disabled: t, onClick: e, ...l, children: /* @__PURE__ */ r(er, { fontSize: "small" }) });
58
- }
59
- function Jr({
60
- onClick: e,
61
- disabled: t,
62
- sx: o,
63
- ...l
64
- }) {
65
- return /* @__PURE__ */ r(q, { size: "small", color: "primary", disabled: t, onClick: e, ...l, children: /* @__PURE__ */ r(Ze, { fontSize: "small" }) });
66
- }
67
- function _r({
68
- label: e,
69
- value: t,
70
- onChange: o,
71
- disabled: l = !1,
72
- itemLabel: h = "",
73
- emptyHeight: p = 40,
74
- property: d,
75
- renderItem: b,
76
- ...m
77
- }) {
78
- const { t: c, locale: s } = V(), a = Ae(), i = T(
79
- (y) => {
80
- o(be(y, d.type));
81
- },
82
- [o, d.type]
83
- ), n = H(() => Array.isArray(t) ? t : [], [t]), f = T(() => {
84
- const y = [...n, ""];
85
- i(y), a();
86
- }, [n, i, a]), g = T(() => {
87
- if (!d || !d.subProperties)
88
- return f();
89
- const y = {};
90
- D(Object.values(d.subProperties), "index").forEach(({ data: R }) => {
91
- if (!R.key) return;
92
- const W = R.locales?.[s]?.defaultValue ?? "";
93
- y[R.key] = W;
94
- });
95
- const O = [...n, y];
96
- i(O), a();
97
- }, [n, i, a, d, s, f]), u = T(
98
- (y) => {
99
- try {
100
- const C = JSON.parse(y);
101
- Array.isArray(C) ? i(C) : console.error("JSON解析结果不是数组");
102
- } catch (C) {
103
- console.error("JSON解析错误:", C);
104
- }
105
- },
106
- [i]
107
- ), x = T(
108
- (y) => {
109
- const C = n.filter((O, R) => R !== y);
110
- i(C), a();
111
- },
112
- [n, i, a]
113
- ), I = T(
114
- (y) => {
115
- if (y <= 0) return;
116
- const C = [...n], O = C[y];
117
- C[y] = C[y - 1], C[y - 1] = O, i(C), a();
118
- },
119
- [n, i, a]
120
- ), N = T(
121
- (y) => {
122
- if (y >= n.length - 1) return;
123
- const C = [...n], O = C[y];
124
- C[y] = C[y + 1], C[y + 1] = O, i(C), a();
125
- },
126
- [n, i, a]
127
- ), S = T(
128
- (y, C) => {
129
- const O = [...n];
130
- O[y] = C, i(O);
131
- },
132
- [n, i]
133
- ), w = d && d.subProperties && Object.keys(d.subProperties).length > 0, j = H(() => [
134
- {
135
- field: "index",
136
- headerName: "#",
137
- width: 40,
138
- align: "center",
139
- renderCell: ({ index: y }) => /* @__PURE__ */ r(
140
- A,
141
- {
142
- variant: "body1",
143
- sx: {
144
- bgcolor: "action.hover",
145
- borderRadius: "50%",
146
- width: 24,
147
- height: 24,
148
- display: "flex",
149
- alignItems: "center",
150
- justifyContent: "center",
151
- color: "text.secondary"
152
- },
153
- children: y + 1
154
- }
155
- )
156
- },
157
- {
158
- field: "content",
159
- headerName: "",
160
- renderCell: ({ row: y, index: C }) => b && w ? b({
161
- item: y,
162
- index: C,
163
- property: d,
164
- onChange: (O) => S(C, O)
165
- }) : /* @__PURE__ */ r(
166
- z,
167
- {
168
- fullWidth: !0,
169
- size: "small",
170
- disabled: l,
171
- value: y,
172
- placeholder: h || `${c("item")} ${C + 1}`,
173
- onChange: (O) => S(C, O.target.value),
174
- ...m
175
- }
176
- )
177
- },
178
- {
179
- field: "actions",
180
- headerName: "",
181
- width: 30,
182
- // 增加宽度以容纳更多按钮
183
- align: "center",
184
- renderCell: ({ index: y }) => /* @__PURE__ */ v(k, { direction: "column", spacing: 0.25, children: [
185
- /* @__PURE__ */ r(Fr, { disabled: l || y === 0, onClick: () => I(y) }),
186
- /* @__PURE__ */ r(
187
- Jr,
188
- {
189
- disabled: l || y === n.length - 1,
190
- onClick: () => N(y)
191
- }
192
- ),
193
- /* @__PURE__ */ r(Lr, { disabled: l, onClick: () => x(y) })
194
- ] })
195
- }
196
- ], [
197
- b,
198
- w,
199
- d,
200
- S,
201
- h,
202
- c,
203
- l,
204
- m,
205
- x,
206
- I,
207
- N,
208
- n.length
209
- ]);
210
- return w ? /* @__PURE__ */ v(
211
- k,
212
- {
213
- sx: {
214
- width: "100%",
215
- gap: 1
216
- },
217
- children: [
218
- e && /* @__PURE__ */ r(re, { children: e }),
219
- n.length > 0 ? /* @__PURE__ */ r(tr, { component: Y, variant: "outlined", sx: { borderRadius: 1, mb: 1 }, children: /* @__PURE__ */ v(
220
- Oe,
221
- {
222
- size: "small",
223
- sx: {
224
- "& .MuiTableCell-root": {
225
- py: 0.25,
226
- px: 1,
227
- whiteSpace: "nowrap"
228
- },
229
- "& .MuiTableCell-head": {
230
- backgroundColor: "action.hover",
231
- py: 0.25,
232
- px: 1
233
- },
234
- borderCollapse: "collapse"
235
- },
236
- children: [
237
- /* @__PURE__ */ r(Ne, { sx: { display: "none" }, children: /* @__PURE__ */ r(te, { children: j.map((y) => /* @__PURE__ */ r(
238
- ne,
239
- {
240
- width: y.width,
241
- align: y.align || "left",
242
- sx: { fontWeight: "bold" },
243
- children: y.renderHeader ? y.renderHeader() : y.headerName
244
- },
245
- y.field
246
- )) }) }),
247
- /* @__PURE__ */ r(je, { children: n.map((y, C, O) => /* @__PURE__ */ r(
248
- te,
249
- {
250
- sx: {
251
- borderBottom: C < O.length - 1 ? "1px solid" : "none",
252
- borderColor: "divider",
253
- "&:hover": {
254
- backgroundColor: "action.hover"
255
- }
256
- },
257
- children: j.map((R) => /* @__PURE__ */ r(
258
- ne,
259
- {
260
- width: R.width,
261
- align: R.align || "left",
262
- sx: {
263
- borderBottom: "none"
264
- },
265
- children: R.renderCell({
266
- row: y,
267
- index: C,
268
- onChange: (W) => S(C, W)
269
- })
270
- },
271
- `${C}-${R.field}`
272
- ))
273
- },
274
- C
275
- )) })
276
- ]
277
- }
278
- ) }) : /* @__PURE__ */ r(G, { style: { fontSize: 12, height: p }, children: c("maker.properties.arrayEmpty") }),
279
- /* @__PURE__ */ r(
280
- E,
281
- {
282
- fullWidth: !0,
283
- size: "small",
284
- variant: "outlined",
285
- disabled: l,
286
- startIcon: /* @__PURE__ */ r(Xe, {}),
287
- onClick: g,
288
- children: c("maker.properties.addArrayItem")
289
- }
290
- )
291
- ]
292
- }
293
- ) : /* @__PURE__ */ v(
294
- k,
295
- {
296
- sx: {
297
- width: "100%",
298
- gap: 1
299
- },
300
- children: [
301
- e && /* @__PURE__ */ r(re, { children: e }),
302
- /* @__PURE__ */ r(P, { sx: { border: 1, borderColor: "divider", borderRadius: 1, minHeight: 150 }, children: /* @__PURE__ */ r(
303
- ye,
304
- {
305
- keyId: d.id,
306
- locale: s,
307
- language: "json",
308
- value: JSON.stringify(n, null, 2),
309
- onChange: (y) => u(y || ""),
310
- fullScreenOptions: {
311
- enableEscExit: !0,
312
- targetContainer: () => document.getElementById("parameters-config-dialog") || null
313
- }
314
- },
315
- d.id
316
- ) })
317
- ]
318
- }
319
- );
320
- }
321
- function $r({
322
- ref: e,
323
- showMarkdown: t,
324
- markdown: o,
325
- onMarkdownChange: l,
326
- showUploader: h,
327
- value: p,
328
- meta: d,
329
- onChange: b,
330
- ...m
331
- }) {
332
- const [c, s] = B("");
333
- U(() => {
334
- s(p || "");
335
- }, [p, s]);
336
- const a = async () => {
337
- if (c !== p) {
338
- const n = ee(c);
339
- if (!n) {
340
- b(c, void 0);
341
- return;
342
- }
343
- const f = await de(n).catch(() => ue(n)).catch(() => {
344
- });
345
- b(c, { ...f, filename: c });
346
- }
347
- };
348
- dr(
349
- () => {
350
- c !== p && b(c);
351
- },
352
- 300,
353
- [c]
354
- ), ar(e, () => ({
355
- submit: a
356
- }));
357
- const i = {};
358
- return h && (i.InputProps = {
359
- sx: { pr: 0 },
360
- endAdornment: /* @__PURE__ */ r($, { position: "end", sx: { mx: 0.5 }, children: /* @__PURE__ */ r(
361
- Ce,
362
- {
363
- onChange: async ({ response: n }) => {
364
- const f = n?.data?.filename, g = ee(f) || "";
365
- let u = {};
366
- g && (u = await de(g).catch(() => ue(g)).catch(() => {
367
- })), b(f, {
368
- ...u,
369
- filename: f
370
- });
371
- }
372
- }
373
- ) })
374
- }), /* @__PURE__ */ r(
375
- z,
376
- {
377
- size: "small",
378
- fullWidth: !0,
379
- ...m,
380
- label: /* @__PURE__ */ v(
381
- k,
382
- {
383
- direction: "row",
384
- spacing: 1,
385
- sx: {
386
- alignItems: "center"
387
- },
388
- children: [
389
- m.label,
390
- t && /* @__PURE__ */ v(F, { children: [
391
- " (",
392
- /* @__PURE__ */ r(
393
- xe,
394
- {
395
- checked: o,
396
- label: /* @__PURE__ */ r(P, { component: hr, icon: "tabler:markdown", sx: { verticalAlign: "middle" } }),
397
- labelPlacement: "start",
398
- control: /* @__PURE__ */ r(ze, { size: "small" }),
399
- sx: { ml: 0.25, pr: 1 },
400
- onChange: (n, f) => l?.(f)
401
- }
402
- ),
403
- ")"
404
- ] })
405
- ]
406
- }
407
- ),
408
- value: c,
409
- onChange: (n) => s(n.target.value),
410
- ...i,
411
- onKeyDown: (n) => {
412
- n.keyCode !== 229 && n.key === "Enter" && a();
413
- },
414
- slotProps: {
415
- inputLabel: { shrink: !0, ...m.InputLabelProps }
416
- }
417
- }
418
- );
419
- }
420
- function Hr({
421
- value: e,
422
- onChange: t,
423
- ...o
424
- }) {
425
- const l = M(null);
426
- return /* @__PURE__ */ v(F, { children: [
427
- /* @__PURE__ */ r(
428
- $r,
429
- {
430
- ...o,
431
- value: e,
432
- onChange: t,
433
- InputProps: {
434
- endAdornment: /* @__PURE__ */ r($, { position: "end", children: /* @__PURE__ */ r(
435
- ur,
436
- {
437
- color: e ?? "",
438
- style: { width: "1.5rem", height: "1.5rem", padding: 0 },
439
- onClick: () => {
440
- l.current?.open({ value: e ?? "" });
441
- }
442
- }
443
- ) })
444
- }
445
- }
446
- ),
447
- /* @__PURE__ */ r(
448
- pr,
449
- {
450
- ref: l,
451
- onSave: ({ value: h }, p) => {
452
- t(h), p();
453
- }
454
- }
455
- )
456
- ] });
457
- }
458
- function Gr({
459
- label: e,
460
- value: t,
461
- onChange: o,
462
- property: l,
463
- component: h,
464
- defaultLocale: p,
465
- allComponents: d,
466
- PropertyValueField: b,
467
- onUpload: m
468
- }) {
469
- const { locale: c } = V(), s = M(null);
470
- if (!K(l.subProperties)) {
471
- const i = D(Object.values(l.subProperties || {}), "index").filter(
472
- (n) => n.data.visible !== !1 && n.data.key
473
- );
474
- return /* @__PURE__ */ v(
475
- k,
476
- {
477
- sx: {
478
- width: "100%"
479
- },
480
- children: [
481
- /* @__PURE__ */ r(re, { sx: { px: 0.25, py: 0.5 }, children: e }),
482
- /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(P, { sx: { position: "relative" }, children: i.map((n, f) => {
483
- const { data: g } = n, u = g.key ?? g.id, x = f === i.length - 1;
484
- let I = null;
485
- try {
486
- t && typeof t == "object" ? I = t[u] : typeof t == "string" && (I = (l.type === "yaml" ? pe.parse(t || "") : JSON.parse(t || "{}"))[u]);
487
- } catch {
488
- }
489
- I == null && (g.locales && c && g.locales[c] ? I = g.locales[c].defaultValue : g.locales && p && g.locales[p] && (I = g.locales[p].defaultValue));
490
- const N = (w) => {
491
- try {
492
- let j = {};
493
- if (typeof t == "string")
494
- try {
495
- j = l.type === "yaml" ? pe.parse(t || "") : JSON.parse(t || "{}");
496
- } catch {
497
- }
498
- else typeof t == "object" && t !== null && (j = { ...t });
499
- De(j, u, w);
500
- const y = be(j, l.type);
501
- o?.(y);
502
- } catch (j) {
503
- console.error("Error updating property:", j);
504
- }
505
- }, S = 8;
506
- return /* @__PURE__ */ v(
507
- P,
508
- {
509
- sx: {
510
- mb: x ? 0 : 1,
511
- // 底部边距,最后一项不需要
512
- display: "flex",
513
- flexDirection: "row"
514
- },
515
- children: [
516
- /* @__PURE__ */ v(
517
- P,
518
- {
519
- sx: {
520
- position: "relative",
521
- width: 24,
522
- flexShrink: 0
523
- },
524
- children: [
525
- /* @__PURE__ */ r(
526
- P,
527
- {
528
- sx: {
529
- position: "absolute",
530
- left: S,
531
- top: 0,
532
- height: 16,
533
- // 连接到字段中点的高度
534
- width: 0,
535
- borderLeft: "1px dashed",
536
- borderColor: "divider"
537
- }
538
- }
539
- ),
540
- /* @__PURE__ */ r(
541
- P,
542
- {
543
- sx: {
544
- position: "absolute",
545
- left: S,
546
- top: 16,
547
- // 连接到字段中点
548
- width: 12,
549
- height: 0,
550
- borderTop: "1px dashed",
551
- borderColor: "divider"
552
- }
553
- }
554
- ),
555
- !x && /* @__PURE__ */ r(
556
- P,
557
- {
558
- sx: {
559
- position: "absolute",
560
- left: S,
561
- top: 16,
562
- // 从当前项中点
563
- bottom: -8,
564
- // 延伸到下一项
565
- width: 0,
566
- borderLeft: "1px dashed",
567
- borderColor: "divider"
568
- }
569
- }
570
- )
571
- ]
572
- }
573
- ),
574
- /* @__PURE__ */ r(P, { sx: { flexGrow: 1 }, children: /* @__PURE__ */ r(
575
- b,
576
- {
577
- component: h,
578
- property: g,
579
- value: I,
580
- onChange: N,
581
- size: "small",
582
- fullWidth: !0,
583
- defaultLocale: p,
584
- allComponents: d
585
- }
586
- ) })
587
- ]
588
- },
589
- g.id
590
- );
591
- }) }) })
592
- ]
593
- }
594
- );
595
- }
596
- return /* @__PURE__ */ r(
597
- k,
598
- {
599
- sx: {
600
- width: "100%",
601
- gap: 2
602
- },
603
- children: /* @__PURE__ */ v(
604
- k,
605
- {
606
- sx: {
607
- width: "100%",
608
- position: "relative",
609
- pt: 1,
610
- pb: "6px",
611
- px: "1px",
612
- minHeight: 50,
613
- ".monaco-editor,.overflow-guard": { borderRadius: 1 }
614
- },
615
- children: [
616
- /* @__PURE__ */ r(
617
- re,
618
- {
619
- sx: {
620
- position: "absolute",
621
- left: 0,
622
- top: 0,
623
- transform: "translate(0px, -7px) scale(0.75)"
624
- },
625
- children: e
626
- }
627
- ),
628
- /* @__PURE__ */ r(
629
- ye,
630
- {
631
- keyId: l.id,
632
- locale: c,
633
- language: l.type === "yaml" ? "yaml" : "json",
634
- value: typeof t == "string" ? t : "",
635
- onChange: (i) => {
636
- o?.(i);
637
- },
638
- onUpload: (i) => {
639
- s.current = i, m && m(i);
640
- },
641
- fullScreenOptions: {
642
- enableEscExit: !0,
643
- targetContainer: () => document.getElementById("parameters-config-dialog") || null
644
- }
645
- },
646
- l.id
647
- ),
648
- /* @__PURE__ */ r(
649
- P,
650
- {
651
- component: "fieldset",
652
- sx: {
653
- pointerEvents: "none",
654
- position: "absolute",
655
- left: 0,
656
- top: -5,
657
- width: "100%",
658
- height: "100%",
659
- border: 1,
660
- borderColor: "rgba(0, 0, 0, 0.23)",
661
- borderRadius: 1,
662
- px: 1,
663
- py: 0
664
- },
665
- children: /* @__PURE__ */ r(P, { component: "legend", sx: { fontSize: "0.75em" }, children: /* @__PURE__ */ r(P, { component: "span", sx: { opacity: 0 }, children: e }) })
666
- }
667
- )
668
- ]
669
- }
670
- )
671
- }
672
- );
673
- }
674
- const Yr = ["string", "multiline", "json", "yaml", "url", "component", "custom", "array"];
675
- function Ie(e) {
676
- return e.type ? !Yr.includes(e.type) : !1;
677
- }
678
- function _e({
679
- disabled: e,
680
- list: t,
681
- renderItem: o,
682
- ...l
683
- }) {
684
- const h = M(null), p = cr(), d = Or(), b = D(Object.entries(t), (n) => n[1].index).map((n) => n[0]), m = M(b), c = T(
685
- (n) => {
686
- m.current = n, d();
687
- },
688
- [d]
689
- ), s = T(
690
- ({ index: n }, { index: f }) => {
691
- const g = [...m.current];
692
- g.splice(f, 0, ...g.splice(n, 1)), c(g);
693
- },
694
- [c]
695
- );
696
- U(() => {
697
- c(b);
698
- }, [b.join("-")]);
699
- const [{ isOver: a }, i] = Fe({
700
- accept: p,
701
- collect: (n) => ({
702
- isOver: n.isOver()
703
- }),
704
- canDrop: () => !e,
705
- drop: () => {
706
- const n = () => {
707
- m.current.forEach((g, u) => {
708
- const x = t[g];
709
- x && (x.index = u);
710
- });
711
- }, f = Q(t)?.doc;
712
- f ? f.transact(() => {
713
- n();
714
- }) : n();
715
- }
716
- });
717
- return U(() => {
718
- a || c(b);
719
- }, [a]), i(h), /* @__PURE__ */ r(P, { ...l, ref: h, className: Br(a && "isDragging"), children: m.current.map((n, f) => /* @__PURE__ */ r(
720
- qr,
721
- {
722
- type: p,
723
- disabled: e,
724
- id: n,
725
- index: f,
726
- itemIndex: (g) => m.current.indexOf(g),
727
- move: s,
728
- children: (g) => {
729
- const u = t[n];
730
- return u ? o(u.data, f, g) : null;
731
- }
732
- },
733
- n
734
- )) });
735
- }
736
- function qr({
737
- disabled: e,
738
- id: t,
739
- index: o,
740
- type: l,
741
- children: h,
742
- itemIndex: p,
743
- move: d
744
- }) {
745
- const b = M(void 0), [{ isDragging: m }, c, s] = Mr({
746
- type: l,
747
- item: () => ({ id: t }),
748
- canDrag: () => !e,
749
- collect: (i) => ({ isDragging: i.isDragging() })
750
- }), [, a] = Fe({
751
- accept: l,
752
- canDrop: () => !e,
753
- hover(i, n) {
754
- if (!b.current)
755
- return;
756
- const f = p(i.id), g = o;
757
- if (f === g)
758
- return;
759
- const u = b.current?.getBoundingClientRect(), x = (u.bottom - u.top) / 2, N = n.getClientOffset().y - u.top;
760
- f < g && N < x || f > g && N > x || d({ id: i.id, index: f }, { id: t, index: o });
761
- }
762
- });
763
- return typeof h == "function" ? h({
764
- isDragging: m,
765
- drag: c,
766
- drop: (i) => (b.current = i, a(i)),
767
- preview: s
768
- }) : (c(a(s(b))), /* @__PURE__ */ r(P, { ref: b, children: h }));
769
- }
770
- function Qr({
771
- drop: e,
772
- preview: t,
773
- drag: o,
774
- disabled: l,
775
- isDragging: h,
776
- children: p,
777
- onDelete: d,
778
- onVisibilityChange: b,
779
- visible: m = !0,
780
- actions: c,
781
- alwaysShowActions: s = !1
782
- }) {
783
- const { t: a } = V();
784
- return /* @__PURE__ */ r(
785
- P,
786
- {
787
- ref: e,
788
- sx: {
789
- ":hover .hover-visible": { maxWidth: "100%" },
790
- opacity: m ? 1 : 0.5
791
- },
792
- children: /* @__PURE__ */ v(P, { sx: { position: "relative" }, children: [
793
- /* @__PURE__ */ r(
794
- P,
795
- {
796
- ref: t,
797
- sx: {
798
- flex: 1,
799
- borderRadius: 0.5,
800
- bgcolor: h ? "action.hover" : "background.paper",
801
- opacity: 0.9999
802
- // NOTE: make preview effective
803
- },
804
- children: p
805
- }
806
- ),
807
- !l && /* @__PURE__ */ r(
808
- P,
809
- {
810
- className: s ? "" : "hover-visible",
811
- sx: {
812
- maxWidth: s ? "100%" : 0,
813
- overflow: "hidden",
814
- position: "absolute",
815
- right: 2,
816
- top: 2,
817
- transition: "max-width 0.3s ease-in-out"
818
- },
819
- children: /* @__PURE__ */ v(
820
- k,
821
- {
822
- direction: "row",
823
- sx: {
824
- bgcolor: (i) => ae(i.palette.grey[200], 0.9),
825
- borderRadius: 1,
826
- p: 0.5,
827
- [`.${nr.root}`]: {
828
- minWidth: 24,
829
- width: 24,
830
- height: 24,
831
- p: 0
832
- }
833
- },
834
- children: [
835
- c,
836
- b && /* @__PURE__ */ r(_, { title: a(m ? "hideParameter" : "showParameter"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ r(E, { onClick: () => b(!m), children: m ? /* @__PURE__ */ r(Cr, { sx: { fontSize: "1.25rem", color: "grey.500" } }) : /* @__PURE__ */ r(Pr, { sx: { fontSize: "1.25rem", color: "grey.500" } }) }) }),
837
- d && /* @__PURE__ */ r(_, { title: a("delete"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ r(E, { onClick: d, children: /* @__PURE__ */ r(kr, { sx: { fontSize: "1.25rem", color: "grey.500" } }) }) }),
838
- /* @__PURE__ */ r(_, { title: a("dragSort"), disableInteractive: !0, placement: "top", children: /* @__PURE__ */ r(E, { ref: o, children: /* @__PURE__ */ r(wr, { sx: { color: "grey.500" } }) }) })
839
- ]
840
- }
841
- )
842
- }
843
- )
844
- ] })
845
- }
846
- );
847
- }
848
- function Xr(e) {
849
- const t = ["string", "json", "array", "url", "multiline"], o = ["style", "fontSize", "color", "content", "type"];
850
- return !!(t.includes(e.type || "") && !o.includes(e.key || ""));
851
- }
852
- function Zr(e, t, o) {
853
- return e.locales && e.locales[t] && e.locales[t].name ? e.locales[t].name : o && e.locales && e.locales[o] && e.locales[o].name ? e.locales[o].name : e.key ? e.key : e.id;
854
- }
855
- const $e = (e, t, o, l) => {
856
- const h = {};
857
- return D(Object.entries(e), ([, d]) => d.index).forEach(([d, b]) => {
858
- const m = b.data;
859
- if (!m) return;
860
- const c = m.key || m.id, s = o ? Zr(m, o, l || "") : c, a = t?.[m.id], i = {
861
- key: c,
862
- isNeedGenerate: a?.isNeedGenerate ?? Xr(m),
863
- // 如果存在使用现有值,否则默认勾选
864
- describe: a?.describe ?? "",
865
- displayName: s
866
- };
867
- m.subProperties && !K(m.subProperties) && (i.subProperties = $e(
868
- m.subProperties,
869
- a?.subProperties,
870
- o,
871
- l
872
- )), h[m.id] = i;
873
- }), h;
874
- };
875
- function et({
876
- open: e,
877
- onClose: t,
878
- onConfirm: o,
879
- component: l,
880
- initialConfig: h,
881
- locale: p,
882
- defaultLocale: d,
883
- title: b,
884
- loading: m = !1
885
- }) {
886
- const { t: c } = V(), [s, a] = B(null);
887
- U(() => {
888
- if (e && l) {
889
- const u = { properties: {} };
890
- if (l.properties) {
891
- const x = h?.properties;
892
- u.properties = $e(l.properties, x, p, d);
893
- }
894
- a(u);
895
- }
896
- }, [e, l, h, p, d]);
897
- const i = () => {
898
- t();
899
- }, n = () => {
900
- s && (o(s), t());
901
- }, f = (u, x, I) => {
902
- if (!s || !u.length) return;
903
- const N = JSON.parse(JSON.stringify(s));
904
- let S = N.properties, w = null;
905
- for (let y = 0; y < u.length - 1; y++) {
906
- const C = u[y];
907
- if (!C || !S[C])
908
- return;
909
- w = S;
910
- const O = S[C];
911
- O.subProperties || (O.subProperties = {}), S = O.subProperties;
912
- }
913
- const j = u[u.length - 1];
914
- if (j) {
915
- if ("isNeedGenerate" in I) {
916
- const y = I.isNeedGenerate, C = {
917
- ...x,
918
- ...I
919
- };
920
- if (x.subProperties && !K(x.subProperties)) {
921
- const O = (R, W) => {
922
- const J = {};
923
- return Object.entries(R).forEach(([qe, X]) => {
924
- const se = { ...X };
925
- W !== null && (se.isNeedGenerate = W), X.subProperties && !K(X.subProperties) && (se.subProperties = O(
926
- X.subProperties,
927
- W !== null ? W : null
928
- )), J[qe] = se;
929
- }), J;
930
- };
931
- C.subProperties = O(
932
- x.subProperties,
933
- y === !1 ? !1 : null
934
- );
935
- }
936
- if (u.length === 1)
937
- N.properties[j] = C;
938
- else if (w && u.length >= 2) {
939
- const O = u[u.length - 2];
940
- O && w[O] && (w[O].subProperties || (w[O].subProperties = {}), w[O].subProperties[j] = C);
941
- }
942
- } else if (u.length === 1)
943
- N.properties[j] = {
944
- ...x,
945
- ...I
946
- };
947
- else if (w && u.length >= 2) {
948
- const y = u[u.length - 2];
949
- y && w[y] && w[y].subProperties && (w[y].subProperties[j] = {
950
- ...x,
951
- ...I
952
- });
953
- }
954
- a(N);
955
- }
956
- }, g = (u, x = [], I = !0) => {
957
- if (!u || K(u))
958
- return /* @__PURE__ */ r(G, { children: c("maker.properties.noProperties") });
959
- const N = D(Object.entries(u), ([, S]) => S.displayName);
960
- return /* @__PURE__ */ r(k, { spacing: 1.5, children: N.map(([S, w], j) => {
961
- const y = [...x, S], C = j === N.length - 1, O = w.subProperties && !K(w.subProperties), R = w.displayName || S, W = !I;
962
- return /* @__PURE__ */ r(P, { sx: { position: "relative" }, children: /* @__PURE__ */ v(k, { direction: "row", children: [
963
- x.length > 0 && /* @__PURE__ */ v(
964
- P,
965
- {
966
- sx: {
967
- position: "relative",
968
- width: 24,
969
- flexShrink: 0
970
- },
971
- children: [
972
- /* @__PURE__ */ r(
973
- P,
974
- {
975
- sx: {
976
- position: "absolute",
977
- left: 8,
978
- top: 0,
979
- height: 16,
980
- width: 0,
981
- borderLeft: "1px dashed",
982
- borderColor: "divider"
983
- }
984
- }
985
- ),
986
- /* @__PURE__ */ r(
987
- P,
988
- {
989
- sx: {
990
- position: "absolute",
991
- left: 8,
992
- top: 16,
993
- width: 12,
994
- height: 0,
995
- borderTop: "1px dashed",
996
- borderColor: "divider"
997
- }
998
- }
999
- ),
1000
- !C && /* @__PURE__ */ r(
1001
- P,
1002
- {
1003
- sx: {
1004
- position: "absolute",
1005
- left: 8,
1006
- top: 16,
1007
- bottom: -12,
1008
- width: 0,
1009
- borderLeft: "1px dashed",
1010
- borderColor: "divider"
1011
- }
1012
- }
1013
- )
1014
- ]
1015
- }
1016
- ),
1017
- /* @__PURE__ */ v(k, { spacing: 1.5, sx: { flexGrow: 1 }, children: [
1018
- /* @__PURE__ */ v(
1019
- k,
1020
- {
1021
- direction: { xs: "column", md: "row" },
1022
- spacing: 1.5,
1023
- sx: {
1024
- alignItems: { xs: "flex-start", md: "center" },
1025
- width: "100%"
1026
- },
1027
- children: [
1028
- /* @__PURE__ */ r(
1029
- xe,
1030
- {
1031
- control: /* @__PURE__ */ r(
1032
- ir,
1033
- {
1034
- checked: w.isNeedGenerate,
1035
- disabled: W,
1036
- onChange: (J) => {
1037
- f(y, w, {
1038
- isNeedGenerate: J.target.checked
1039
- });
1040
- }
1041
- }
1042
- ),
1043
- label: R,
1044
- sx: {
1045
- minWidth: "180px",
1046
- maxWidth: "280px",
1047
- mr: 2,
1048
- "& .MuiFormControlLabel-label": {
1049
- wordBreak: "break-word"
1050
- }
1051
- }
1052
- }
1053
- ),
1054
- /* @__PURE__ */ r(
1055
- z,
1056
- {
1057
- size: "small",
1058
- fullWidth: !0,
1059
- label: c("maker.properties.llmPropertyDescribe"),
1060
- value: w.describe,
1061
- onChange: (J) => {
1062
- f(y, w, {
1063
- describe: J.target.value
1064
- });
1065
- },
1066
- disabled: !w.isNeedGenerate
1067
- }
1068
- )
1069
- ]
1070
- }
1071
- ),
1072
- O && /* @__PURE__ */ r(P, { sx: { ml: 3 }, children: g(
1073
- w.subProperties,
1074
- y,
1075
- w.isNeedGenerate && I
1076
- ) })
1077
- ] })
1078
- ] }) }, S);
1079
- }) });
1080
- };
1081
- return /* @__PURE__ */ v(ve, { open: e, onClose: i, maxWidth: "lg", fullWidth: !0, children: [
1082
- /* @__PURE__ */ r(Ve, { children: b || c("maker.properties.llmConfigTitle") }),
1083
- /* @__PURE__ */ r(Re, { children: /* @__PURE__ */ r(
1084
- P,
1085
- {
1086
- sx: {
1087
- my: 3
1088
- },
1089
- children: m ? /* @__PURE__ */ r(A, { children: c("maker.properties.loading") }) : l ? s ? /* @__PURE__ */ v(k, { spacing: 3, children: [
1090
- /* @__PURE__ */ r(A, { variant: "subtitle2", children: c("maker.properties.llmConfigInstructions") }),
1091
- g(s.properties)
1092
- ] }) : /* @__PURE__ */ r(A, { children: c("maker.properties.loading") }) : /* @__PURE__ */ r(A, { color: "error", children: c("maker.properties.componentNotFound") })
1093
- }
1094
- ) }),
1095
- /* @__PURE__ */ v(Ee, { children: [
1096
- /* @__PURE__ */ r(E, { onClick: i, children: c("common.cancel") }),
1097
- /* @__PURE__ */ r(E, { variant: "contained", onClick: n, disabled: !s || m, children: c("common.confirm") })
1098
- ] })
1099
- ] });
1100
- }
1101
- function rt({
1102
- label: e,
1103
- value: t,
1104
- onChange: o
1105
- }) {
1106
- const [l, h] = B(!1);
1107
- return /* @__PURE__ */ v(
1108
- k,
1109
- {
1110
- sx: {
1111
- gap: 1
1112
- },
1113
- children: [
1114
- /* @__PURE__ */ r(
1115
- z,
1116
- {
1117
- label: e,
1118
- size: "small",
1119
- value: t,
1120
- onChange: (p) => o?.(p.target.value),
1121
- slotProps: {
1122
- input: {
1123
- sx: {
1124
- pr: 0
1125
- },
1126
- endAdornment: /* @__PURE__ */ r($, { position: "end", children: /* @__PURE__ */ r(
1127
- Ce,
1128
- {
1129
- onChange: ({ response: p }) => {
1130
- const d = p?.data?.filename;
1131
- d && o?.(d);
1132
- }
1133
- }
1134
- ) })
1135
- }
1136
- }
1137
- }
1138
- ),
1139
- t && /* @__PURE__ */ r(
1140
- P,
1141
- {
1142
- component: "img",
1143
- src: ee(t),
1144
- alt: e,
1145
- onClick: () => h(!0),
1146
- sx: {
1147
- maxWidth: 100,
1148
- maxHeight: 100,
1149
- width: "100%",
1150
- objectFit: "contain",
1151
- borderRadius: 1,
1152
- cursor: "pointer"
1153
- }
1154
- }
1155
- ),
1156
- /* @__PURE__ */ r(ve, { open: l, onClose: () => h(!1), children: /* @__PURE__ */ r(P, { component: "img", sx: { objectFit: "contain" }, src: ee(t), alt: e }) })
1157
- ]
1158
- }
1159
- );
1160
- }
1161
- function he(e, t = "") {
1162
- return Wr(e, (o, l, h) => {
1163
- const p = t ? `${t}.${h}` : h;
1164
- return Er(l) ? jr(o, he(l, p)) : o[p] = l, o;
1165
- }, {});
1166
- }
1167
- const tt = [
1168
- { value: "string", label: "Text" },
1169
- { value: "multiline", label: "Text (Multiline)" },
1170
- { value: "number", label: "Number" },
1171
- { value: "decimal", label: "Decimal" },
1172
- { value: "boolean", label: "Boolean" },
1173
- { value: "color", label: "Color" },
1174
- { value: "url", label: "URL (Upload)" },
1175
- { value: "json", label: "JSON" },
1176
- { value: "yaml", label: "YAML" },
1177
- { value: "array", label: "Array" },
1178
- { value: "component", label: "Component" },
1179
- { value: "custom", label: "Custom (Render by a Component)" }
1180
- ];
1181
- function Z(e, t, o) {
1182
- return !e || !o ? !1 : Object.values(e).some(({ data: l }) => l.id !== t && l.key === o);
1183
- }
1184
- function fe(e, t) {
1185
- return !e || !t ? !1 : e[t]?.data.visible ?? !0;
1186
- }
1187
- function nn({ componentId: e }) {
1188
- const { state: { components: t } } = oe(), l = t[e]?.data;
1189
- return l ? /* @__PURE__ */ r(k, {
1190
- sx: {
1191
- maxHeight: "100%",
1192
- overflow: "auto"
1193
- },
1194
- children: /* @__PURE__ */ r(P, {
1195
- sx: {
1196
- p: 2
1197
- },
1198
- children: /* @__PURE__ */ r(Kr, { FallbackComponent: Qe, resetKeys: [e], children: /* @__PURE__ */ r(nt, { value: l, componentId: e }) })
1199
- })
1200
- }) : null;
1201
- }
1202
- function nt({ value: e, componentId: t }) {
1203
- const { t: o } = V(), { localState: { currentLocale: l, customComponentPreviewerProperties: h }, state: { config: { defaultLocale: p } }, localActions: { setCustomComponentPreviewerProperties: d } } = oe(), b = Q(e).doc, m = ge(), c = H(() => h?.[t] ?? {}, [t, h]), s = Nr({
1204
- componentId: t,
1205
- propertiesValue: {
1206
- ...c
1207
- }
1208
- });
1209
- return U(() => {
1210
- s.componentId !== t && (s.componentId = t, s.propertiesValue = {
1211
- ...c
1212
- });
1213
- }, [t, c, s]), U(() => {
1214
- if (s.componentId !== t)
1215
- return;
1216
- const a = Object.fromEntries(Object.values(e.properties ?? {}).map(({ data: i }) => [
1217
- i.id,
1218
- {
1219
- value: s.propertiesValue[i.id]?.value ?? yr(i, i.locales?.[l]?.defaultValue ?? i.locales?.[p]?.defaultValue, {
1220
- locale: l,
1221
- defaultLocale: p
1222
- })
1223
- }
1224
- ]));
1225
- d(t, a);
1226
- }, [JSON.stringify(s.propertiesValue), t, s.componentId]), /* @__PURE__ */ r(k, {
1227
- sx: {
1228
- height: "100%"
1229
- },
1230
- children: /* @__PURE__ */ v(k, {
1231
- sx: {
1232
- gap: 2
1233
- },
1234
- children: [
1235
- /* @__PURE__ */ r(it, { config: e }),
1236
- /* @__PURE__ */ r(lt, {
1237
- config: e,
1238
- currentLocale: l,
1239
- defaultLocale: p,
1240
- allComponents: m,
1241
- onUpdateConfig: (a) => {
1242
- b.transact(() => {
1243
- a(e);
1244
- });
1245
- }
1246
- }),
1247
- /* @__PURE__ */ v(k, {
1248
- direction: "row",
1249
- sx: {
1250
- gap: 2,
1251
- justifyContent: "space-between",
1252
- alignItems: "center"
1253
- },
1254
- children: [
1255
- /* @__PURE__ */ r(A, { variant: "subtitle1", children: o("renderer") }),
1256
- /* @__PURE__ */ v(z, {
1257
- hiddenLabel: !0,
1258
- size: "small",
1259
- select: !0,
1260
- value: e.renderer?.type || "react-component",
1261
- onChange: (a) => {
1262
- b.transact(() => {
1263
- const i = a.target.value;
1264
- e.renderer ??= { type: i }, e.renderer.type = i;
1265
- });
1266
- },
1267
- slotProps: {
1268
- select: { autoWidth: !0 }
1269
- },
1270
- children: [
1271
- /* @__PURE__ */ r(ce, { value: "react-component", children: "React Component" }),
1272
- /* @__PURE__ */ r(ce, { value: "component", children: "Custom Component" })
1273
- ]
1274
- })
1275
- ]
1276
- }),
1277
- e.renderer?.type === "component" && /* @__PURE__ */ r(ht, { value: e }),
1278
- e.renderer?.type === "react-component" && /* @__PURE__ */ r(mt, { value: e }),
1279
- /* @__PURE__ */ r(Ye, {
1280
- config: e,
1281
- currentLocale: l,
1282
- defaultLocale: p,
1283
- allComponents: m,
1284
- propertiesValue: s.propertiesValue,
1285
- onChange: ({ value: a, id: i, path: n }) => {
1286
- const f = [...n, "data"];
1287
- if (!zr(e, f)) {
1288
- me.warning(o("cannotFindPropertyKey", {
1289
- key: f.join(".")
1290
- }));
1291
- return;
1292
- }
1293
- s.propertiesValue[i] = {
1294
- value: a.value
1295
- };
1296
- }
1297
- })
1298
- ]
1299
- })
1300
- });
1301
- }
1302
- function it({ config: e }) {
1303
- const { t } = V();
1304
- return /* @__PURE__ */ r(le, { children: /* @__PURE__ */ v(k, {
1305
- sx: {
1306
- gap: 2
1307
- },
1308
- children: [
1309
- /* @__PURE__ */ r(A, { variant: "subtitle1", children: t("basicInfo") }),
1310
- /* @__PURE__ */ r(z, {
1311
- label: t("name"),
1312
- size: "small",
1313
- value: e.name || "",
1314
- onChange: (o) => e.name = o.target.value
1315
- }),
1316
- /* @__PURE__ */ r(z, {
1317
- label: t("description"),
1318
- size: "small",
1319
- multiline: !0,
1320
- minRows: 2,
1321
- maxRows: 10,
1322
- value: e.description || "",
1323
- onChange: (o) => e.description = o.target.value,
1324
- slotProps: {
1325
- input: {
1326
- endAdornment: /* @__PURE__ */ r($, { position: "end", sx: { mt: -1.5 }, children: /* @__PURE__ */ r(ft, { config: e }) })
1327
- },
1328
- htmlInput: { maxLength: 200 }
1329
- }
1330
- }),
1331
- /* @__PURE__ */ r(Te, {
1332
- size: "small",
1333
- options: [],
1334
- multiple: !0,
1335
- freeSolo: !0,
1336
- value: e.tags ?? [],
1337
- onChange: (o, l) => e.tags = l,
1338
- renderInput: (o) => /* @__PURE__ */ r(z, { label: t("tags"), ...o })
1339
- }),
1340
- /* @__PURE__ */ r(rt, {
1341
- label: t("previewImage"),
1342
- value: e.previewImage || "",
1343
- onChange: (o) => e.previewImage = o
1344
- })
1345
- ]
1346
- }) });
1347
- }
1348
- function He({ data: e, params: t, visible: o, config: l, currentLocale: h, defaultLocale: p, allComponents: d, onUpdateConfig: b }) {
1349
- const { t: m } = V(), c = H(() => e.type === "json" || e.type === "yaml" || e.type === "array" ? ct : L, [e.type]);
1350
- return /* @__PURE__ */ r(Qr, {
1351
- preview: t.preview,
1352
- drop: t.drop,
1353
- drag: t.drag,
1354
- isDragging: t.isDragging,
1355
- onDelete: () => {
1356
- b((s) => {
1357
- if (s.properties) {
1358
- const i = Object.entries(s.properties).sort(([, f], [, g]) => f.index - g.index);
1359
- delete s.properties[e.id], i.filter(([f]) => f !== e.id).forEach(([, f], g) => {
1360
- f.index = g;
1361
- });
1362
- }
1363
- });
1364
- },
1365
- visible: o,
1366
- onVisibilityChange: (s) => {
1367
- b((a) => {
1368
- const i = a.properties[e.id].data;
1369
- i.visible = s;
1370
- });
1371
- },
1372
- alwaysShowActions: !0,
1373
- children: /* @__PURE__ */ v(k, {
1374
- direction: "column",
1375
- sx: {
1376
- gap: 2
1377
- },
1378
- children: [
1379
- /* @__PURE__ */ r(z, {
1380
- label: m("key"),
1381
- size: "small",
1382
- required: !0,
1383
- sx: {
1384
- width: "calc(100% - 80px - 8px)",
1385
- flex: 1,
1386
- "& .MuiOutlinedInput-root": {
1387
- borderColor: e.key ? Z(l.properties, e.id, e.key) ? "warning.main" : void 0 : "error.main"
1388
- },
1389
- "& .MuiFormLabel-root": {
1390
- color: e.key ? Z(l.properties, e.id, e.key) ? "warning.main" : "text.secondary" : "error.main"
1391
- },
1392
- "& .MuiFormLabel-root.Mui-focused": {
1393
- color: e.key ? Z(l.properties, e.id, e.key) ? "warning.main" : "primary.main" : "error.main"
1394
- }
1395
- },
1396
- value: e.key || "",
1397
- onChange: (s) => {
1398
- b((a) => {
1399
- const i = a.properties[e.id].data;
1400
- i.key = s.target.value.trim();
1401
- });
1402
- },
1403
- slotProps: {
1404
- input: {
1405
- endAdornment: !e.key || e.key && Z(l.properties, e.id, e.key) ? /* @__PURE__ */ r($, {
1406
- position: "end",
1407
- sx: {
1408
- width: 16,
1409
- ml: 0
1410
- },
1411
- children: /* @__PURE__ */ r(_, { title: e.key ? m("duplicateKey") : m("requiredKey"), children: /* @__PURE__ */ r(Be, {
1412
- sx: {
1413
- color: e.key ? "warning.main" : "error.main",
1414
- fontSize: 16
1415
- }
1416
- }) })
1417
- }) : null
1418
- }
1419
- }
1420
- }),
1421
- /* @__PURE__ */ v(k, {
1422
- direction: "row",
1423
- sx: {
1424
- gap: 1
1425
- },
1426
- children: [
1427
- /* @__PURE__ */ r(z, {
1428
- label: m("label"),
1429
- size: "small",
1430
- sx: { flex: 1 },
1431
- value: (e.locales?.[h]?.name ?? e.locales?.[p]?.name) || "",
1432
- onChange: (s) => {
1433
- b((a) => {
1434
- const i = a.properties[e.id].data;
1435
- i.locales ??= {}, i.locales[h] ??= {}, i.locales[h].name = s.target.value;
1436
- });
1437
- }
1438
- }),
1439
- /* @__PURE__ */ r(z, {
1440
- label: m("type"),
1441
- size: "small",
1442
- select: !0,
1443
- sx: { flex: 1 },
1444
- value: e.type === "string" && e.multiline ? "multiline" : e.type || "string",
1445
- onChange: (s) => {
1446
- b((a) => {
1447
- const i = a.properties[e.id].data;
1448
- if (i.locales)
1449
- for (const f of Object.keys(i.locales))
1450
- i.locales[f].defaultValue = void 0;
1451
- const n = s.target.value;
1452
- n === "multiline" ? (i.type = "string", i.multiline = !0) : (typeof i.multiline < "u" && delete i.multiline, i.type = n);
1453
- });
1454
- },
1455
- children: tt.map((s) => /* @__PURE__ */ r(ce, { value: s.value, children: s.label }, s.value))
1456
- })
1457
- ]
1458
- }),
1459
- /* @__PURE__ */ v(k, {
1460
- direction: "row",
1461
- sx: {
1462
- gap: 1
1463
- },
1464
- children: [
1465
- /* @__PURE__ */ r(c, {
1466
- allComponents: d,
1467
- defaultLocale: p,
1468
- component: l,
1469
- property: e,
1470
- label: m("defaultValue"),
1471
- size: "small",
1472
- fullWidth: !0,
1473
- value: e.locales?.[h]?.defaultValue,
1474
- onChange: (s, a) => {
1475
- b((i) => {
1476
- const n = i.properties[e.id].data;
1477
- if (a?.forceUpdateProperty) {
1478
- const f = he(n), g = he(s);
1479
- Object.keys(g).forEach((u) => {
1480
- f[u] || De(n, u, g[u]);
1481
- });
1482
- } else
1483
- n.locales ??= {}, n.locales[h] ??= {}, n.locales[h].defaultValue = s;
1484
- });
1485
- }
1486
- }),
1487
- e.type === "custom" ? /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(st, { property: e, allComponents: d }) }) : null
1488
- ]
1489
- })
1490
- ]
1491
- })
1492
- });
1493
- }
1494
- function ot(e, t) {
1495
- const [o, l] = B(0);
1496
- return U(() => {
1497
- const p = setTimeout(() => {
1498
- if (e.current) {
1499
- let d = e.current.parentElement, b = 0;
1500
- for (; d; )
1501
- d.classList.contains("property-container") && b++, d = d.parentElement;
1502
- l(b);
1503
- }
1504
- }, 100);
1505
- return () => clearTimeout(p);
1506
- }, [e, t]), o;
1507
- }
1508
- function lt({ config: e, currentLocale: t, defaultLocale: o, allComponents: l, onUpdateConfig: h, useI18nEditor: p = !0 }) {
1509
- const { t: d } = V(), b = Pe({ variant: "dialog" }), m = e.properties && D(Object.values(e.properties), "index");
1510
- return /* @__PURE__ */ r(le, { children: /* @__PURE__ */ v(k, {
1511
- sx: {
1512
- gap: 2
1513
- },
1514
- children: [
1515
- /* @__PURE__ */ v(k, {
1516
- direction: "row",
1517
- sx: {
1518
- gap: 1,
1519
- alignItems: "center",
1520
- justifyContent: "space-between"
1521
- },
1522
- children: [
1523
- /* @__PURE__ */ r(A, { variant: "subtitle1", children: d("properties") }),
1524
- /* @__PURE__ */ r(P, {
1525
- sx: {
1526
- flex: 1
1527
- }
1528
- }),
1529
- p && /* @__PURE__ */ r(E, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...ke(b), children: /* @__PURE__ */ r(Ue, { fontSize: "small" }) })
1530
- ]
1531
- }),
1532
- e.properties && Object.keys(e.properties).length > 0 ? /* @__PURE__ */ r(_e, {
1533
- component: k,
1534
- gap: 2,
1535
- list: e.properties,
1536
- renderItem: (c, s, a) => {
1537
- const i = fe(e.properties, c.id);
1538
- return /* @__PURE__ */ r(Y, {
1539
- elevation: 0,
1540
- className: "property-container",
1541
- sx: {
1542
- p: 1.25,
1543
- borderRadius: 1,
1544
- border: i ? "1px solid" : "1px dashed",
1545
- borderColor: "divider"
1546
- },
1547
- children: /* @__PURE__ */ r(k, {
1548
- sx: {
1549
- gap: 2
1550
- },
1551
- children: /* @__PURE__ */ r(He, {
1552
- data: c,
1553
- params: a,
1554
- visible: i,
1555
- config: e,
1556
- currentLocale: t,
1557
- defaultLocale: o,
1558
- allComponents: l,
1559
- onUpdateConfig: h
1560
- })
1561
- })
1562
- }, c.id);
1563
- }
1564
- }) : /* @__PURE__ */ r(G, { style: { fontSize: 12 }, children: d("maker.properties.noProperties") }),
1565
- /* @__PURE__ */ r(E, {
1566
- fullWidth: !0,
1567
- variant: "outlined",
1568
- className: "ignore-style-override",
1569
- onClick: () => {
1570
- h((c) => {
1571
- const s = Je();
1572
- c.properties ??= {}, c.properties[s] ??= { index: m?.length || 0, data: { id: s } };
1573
- });
1574
- },
1575
- startIcon: /* @__PURE__ */ r(Ke, {}),
1576
- children: d("addObject", { object: d("property") })
1577
- }),
1578
- p && /* @__PURE__ */ r(Ge, { ...Le(b), component: e })
1579
- ]
1580
- }) });
1581
- }
1582
- function st({ property: e, allComponents: t }) {
1583
- const o = Pe({ variant: "popper" });
1584
- return /* @__PURE__ */ v(F, { children: [
1585
- /* @__PURE__ */ r(E, { sx: { minWidth: 0 }, ...ke(o), children: /* @__PURE__ */ r(Me, { fontSize: "small" }) }),
1586
- /* @__PURE__ */ r(sr, { ...Ur(o), children: /* @__PURE__ */ r(vr, { onClickAway: o.close, children: /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r(P, {
1587
- sx: {
1588
- width: 500,
1589
- p: 2
1590
- },
1591
- children: /* @__PURE__ */ r(we, {
1592
- value: e.componentId,
1593
- onChange: (l, h) => e.componentId = h,
1594
- allComponents: t
1595
- })
1596
- }) }) }) })
1597
- ] });
1598
- }
1599
- function at({ value: e, valueImmutable: t, onChange: o, defaultLocale: l, allComponents: h }) {
1600
- const [p, d] = B(!1), { t: b, locale: m } = V(), c = typeof e?.componentId == "string" ? h[e.componentId]?.data : void 0;
1601
- return c ? /* @__PURE__ */ v(P, { sx: { width: "100%", position: "relative" }, children: [
1602
- /* @__PURE__ */ r(q, {
1603
- sx: { minWidth: 0 },
1604
- disabled: !c,
1605
- size: "small",
1606
- onClick: () => d(!p),
1607
- color: p ? "primary" : "default",
1608
- children: /* @__PURE__ */ r(Me, { fontSize: "small" })
1609
- }),
1610
- p && /* @__PURE__ */ r(or, { in: p, timeout: "auto", unmountOnExit: !0, sx: { width: "100%", zIndex: 10 }, children: /* @__PURE__ */ v(Y, {
1611
- elevation: 1,
1612
- sx: {
1613
- mt: 1,
1614
- p: 2,
1615
- borderRadius: 1,
1616
- border: "1px solid",
1617
- borderColor: "divider",
1618
- width: "100%"
1619
- },
1620
- children: [
1621
- /* @__PURE__ */ r(P, {
1622
- sx: {
1623
- width: "100%",
1624
- mb: 2
1625
- },
1626
- children: /* @__PURE__ */ r(Ye, {
1627
- config: c,
1628
- currentLocale: m,
1629
- defaultLocale: l,
1630
- allComponents: h,
1631
- propertiesValue: e?.properties,
1632
- onChange: ({ id: s, value: a }) => {
1633
- const i = fr(a.value), n = JSON.parse(JSON.stringify(e));
1634
- n?.componentId && (t ? o?.({ ...n, properties: { ...n.properties, [s]: { value: i } } }) : (n.properties = n.properties ?? {}, n.properties[s] = { value: i }, o?.(n)));
1635
- }
1636
- })
1637
- }),
1638
- /* @__PURE__ */ r(E, { size: "small", onClick: () => d(!1), sx: { mt: 1 }, children: b("close") })
1639
- ]
1640
- }) })
1641
- ] }) : null;
1642
- }
1643
- function Ge({ type: e = "properties", component: t, ...o }) {
1644
- const { t: l } = V(), { state: { components: h, supportedLocales: p, config: { defaultLocale: d } } } = oe(), b = ge(), m = Q(t).doc, c = e === "properties" ? t.properties : e === "parameters" && t.renderer?.type === "component" ? h[t.renderer.componentId]?.data.properties : void 0, s = t.renderer?.type === "component" ? t : void 0;
1645
- return /* @__PURE__ */ v(ve, { ...o, fullWidth: !0, maxWidth: "lg", children: [
1646
- /* @__PURE__ */ r(Ve, { children: l("i18nEditorTitle") }),
1647
- /* @__PURE__ */ r(Re, { children: c && /* @__PURE__ */ r(k, { children: /* @__PURE__ */ v(Oe, { stickyHeader: !0, sx: { td: { verticalAlign: "top" } }, children: [
1648
- /* @__PURE__ */ r(Ne, { children: /* @__PURE__ */ r(te, { children: p.map(({ locale: a, name: i }) => /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ v(A, {
1649
- sx: {
1650
- color: "text.primary"
1651
- },
1652
- children: [
1653
- i,
1654
- d === a && /* @__PURE__ */ r(Sr, { sx: { fontSize: 12 } })
1655
- ]
1656
- }) }, a)) }) }),
1657
- /* @__PURE__ */ r(je, { children: D(Object.values(c), "index").map(({ data: a }) => /* @__PURE__ */ r(te, { children: p.map(({ locale: i }) => /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ r(k, {
1658
- sx: {
1659
- gap: 1
1660
- },
1661
- children: e === "properties" ? /* @__PURE__ */ v(F, { children: [
1662
- /* @__PURE__ */ r(z, {
1663
- size: "small",
1664
- label: "Key",
1665
- value: a.key || "",
1666
- onChange: (n) => {
1667
- m.transact(() => {
1668
- a.key = n.target.value.trim();
1669
- });
1670
- }
1671
- }),
1672
- /* @__PURE__ */ r(z, {
1673
- size: "small",
1674
- label: l("label"),
1675
- value: (a.locales?.[i]?.name ?? a.locales?.[d]?.name) || "",
1676
- onChange: (n) => {
1677
- m.transact(() => {
1678
- a.locales ??= {}, a.locales[i] ??= {}, a.locales[i].name = n.target.value;
1679
- });
1680
- }
1681
- }),
1682
- /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(L, {
1683
- allComponents: b,
1684
- defaultLocale: d,
1685
- component: t,
1686
- property: a,
1687
- size: "small",
1688
- fullWidth: !0,
1689
- label: "Default Value",
1690
- valueImmutable: ie(a.locales?.[i]?.defaultValue),
1691
- value: a.locales?.[i]?.defaultValue ?? a.locales?.[d]?.defaultValue,
1692
- onChange: (n) => {
1693
- m.transact(() => {
1694
- a.locales ??= {}, a.locales[i] ??= {}, a.locales[i].defaultValue = n;
1695
- });
1696
- }
1697
- }) })
1698
- ] }) : e === "parameters" && s ? /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(L, {
1699
- allComponents: b,
1700
- defaultLocale: d,
1701
- component: t,
1702
- property: a,
1703
- size: "small",
1704
- fullWidth: !0,
1705
- valueImmutable: ie(s.renderer.properties?.[a.id]?.locales?.[i]?.value),
1706
- value: s.renderer.properties?.[a.id]?.locales?.[i]?.value ?? s.renderer.properties?.[a.id]?.locales?.[d]?.value ?? a.locales?.[i]?.defaultValue ?? a.locales?.[d]?.defaultValue,
1707
- onChange: (n) => {
1708
- m.transact(() => {
1709
- s.renderer.properties ??= {}, s.renderer.properties[a.id] ??= {}, s.renderer.properties[a.id].locales ??= {}, s.renderer.properties[a.id].locales[i] ??= {}, s.renderer.properties[a.id].locales[i].value = n;
1710
- });
1711
- }
1712
- }) }) : null
1713
- }, a.id) }, i)) }, a.id)) })
1714
- ] }) }) }),
1715
- /* @__PURE__ */ r(Ee, { children: /* @__PURE__ */ r(E, { onClick: (a) => o.onClose?.(a, "escapeKeyDown"), children: l("close") }) })
1716
- ] });
1717
- }
1718
- const Se = (e, t) => (o) => {
1719
- const l = [
1720
- o.palette.info.main,
1721
- o.palette.primary.main,
1722
- o.palette.secondary.main,
1723
- o.palette.success.main,
1724
- o.palette.warning.main
1725
- ], h = Math.min(l.length - 1, e), p = l[h], d = ae(p, 0.5), b = ae(p, 1);
1726
- return {
1727
- // 保留原有的边框样式
1728
- borderColor: `${d} !important`,
1729
- borderLeft: "3px solid !important",
1730
- // 稍粗的左侧边框
1731
- borderLeftColor: d,
1732
- // 使用透明度适应深色/浅色模式
1733
- color: b,
1734
- ...t
1735
- };
1736
- };
1737
- function ct({ property: e, onChange: t, defaultLocale: o, allComponents: l }) {
1738
- const { t: h, locale: p } = V(), d = M(null), b = ot(d, e), m = T(() => {
1739
- if (!(e.type !== "json" && e.type !== "yaml" && e.type !== "array") && e.subProperties)
1740
- try {
1741
- let c = {};
1742
- D(Object.values(e.subProperties), "index").filter((i) => i.data.visible !== !1 && i.data.key).forEach(({ data: i }) => {
1743
- if (!i.key)
1744
- return;
1745
- let n = i.locales?.[p]?.defaultValue ?? i.locales?.[o]?.defaultValue;
1746
- if (i.type === "number")
1747
- n = Number(n);
1748
- else if (i.type === "boolean")
1749
- n = n === !0 || n === "true";
1750
- else if ((i.type === "json" || i.type === "yaml") && typeof n == "string")
1751
- try {
1752
- i.type === "json" ? n = JSON.parse(n) : n = pe.parse(n);
1753
- } catch (f) {
1754
- console.error("Error parsing nested value", n, f), n = {};
1755
- }
1756
- c[i.key] = n;
1757
- }), e.type === "array" && !Array.isArray(c) && (c = K(c) ? [] : [c]);
1758
- const a = be(c, e.type);
1759
- t?.(a);
1760
- } catch (c) {
1761
- console.error("Error converting structure to text:", c);
1762
- }
1763
- }, [e, p, o, t]);
1764
- return e.type !== "json" && e.type !== "yaml" && e.type !== "array" ? null : /* @__PURE__ */ v(k, {
1765
- direction: "column",
1766
- ref: d,
1767
- sx: {
1768
- gap: 1.5,
1769
- width: "100%"
1770
- },
1771
- children: [
1772
- /* @__PURE__ */ r(lr, { sx: { mt: -1 }, children: /* @__PURE__ */ r(A, {
1773
- variant: "caption",
1774
- sx: {
1775
- color: "text.secondary"
1776
- },
1777
- children: h("maker.properties.subProperties")
1778
- }) }),
1779
- e.subProperties && Object.keys(e.subProperties).length > 0 ? /* @__PURE__ */ r(_e, {
1780
- component: k,
1781
- gap: 2,
1782
- list: e.subProperties,
1783
- renderItem: (c, s, a) => {
1784
- const i = c.visible !== !1;
1785
- return /* @__PURE__ */ r(Y, {
1786
- elevation: 0,
1787
- className: "property-container",
1788
- sx: {
1789
- p: 1.25,
1790
- borderRadius: 1,
1791
- border: i ? "1px solid" : "1px dashed",
1792
- "&": Se(b)
1793
- },
1794
- children: /* @__PURE__ */ r(k, {
1795
- sx: {
1796
- gap: 2
1797
- },
1798
- children: /* @__PURE__ */ r(He, {
1799
- data: c,
1800
- params: a,
1801
- visible: i,
1802
- config: {
1803
- properties: e.subProperties
1804
- },
1805
- currentLocale: p,
1806
- defaultLocale: o,
1807
- allComponents: l,
1808
- onUpdateConfig: (n) => {
1809
- try {
1810
- const f = { properties: e.subProperties || {} };
1811
- n(f);
1812
- const g = {
1813
- ...e,
1814
- subProperties: f.properties
1815
- };
1816
- t?.(g, { forceUpdateProperty: !0 }), m();
1817
- } catch (f) {
1818
- console.error("Error updating property:", f);
1819
- }
1820
- }
1821
- })
1822
- })
1823
- }, c.id);
1824
- }
1825
- }) : /* @__PURE__ */ r(G, { style: { fontSize: 12, height: 100 }, children: h("maker.properties.noSubProperties") }),
1826
- /* @__PURE__ */ r(E, {
1827
- fullWidth: !0,
1828
- variant: "outlined",
1829
- className: "ignore-style-override",
1830
- size: "small",
1831
- startIcon: /* @__PURE__ */ r(Ke, {}),
1832
- onClick: () => {
1833
- try {
1834
- const c = e.subProperties || {}, s = Je(), i = {
1835
- index: Object.values(c).length,
1836
- data: {
1837
- id: s,
1838
- key: "",
1839
- type: "string",
1840
- visible: !0,
1841
- locales: {
1842
- [p]: {
1843
- name: "",
1844
- defaultValue: ""
1845
- }
1846
- },
1847
- // 为嵌套属性预初始化
1848
- subProperties: {}
1849
- }
1850
- }, n = {
1851
- ...e,
1852
- subProperties: {
1853
- ...c,
1854
- [s]: i
1855
- }
1856
- };
1857
- t?.(n, { forceUpdateProperty: !0 }), m();
1858
- } catch (c) {
1859
- console.error("Error adding property:", c);
1860
- }
1861
- },
1862
- sx: {
1863
- "&": Se(b, {
1864
- // borderLeft: undefined,
1865
- })
1866
- },
1867
- children: h("maker.properties.addSubProperty")
1868
- })
1869
- ]
1870
- });
1871
- }
1872
- function L({ component: e, property: t, value: o, onChange: l, valueImmutable: h, defaultLocale: p, allComponents: d, ...b }) {
1873
- const { locale: m } = V(), c = mr(), s = M(null), a = () => {
1874
- const n = c?.current?.getUploader();
1875
- n?.open(), s.current && n.onceUploadSuccess(({ response: f }) => {
1876
- let g = f?.data?.filename || "";
1877
- g && (g = `mediakit://${g}`, o && !o.includes("mediakit://") && (g += " # please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address")), s.current?.(g);
1878
- });
1879
- }, i = b.label ?? (t.locales?.[m]?.name || t.locales?.[p]?.name || t.key || t.id);
1880
- if (t.type === "number")
1881
- return /* @__PURE__ */ r(dt, {
1882
- ...b,
1883
- label: i,
1884
- NumberProps: {
1885
- value: ["number", "string"].includes(typeof o) ? o : null,
1886
- onChange: (n, f) => l?.(f)
1887
- }
1888
- });
1889
- if (t.type === "decimal")
1890
- return /* @__PURE__ */ r(z, {
1891
- ...b,
1892
- label: i,
1893
- type: "text",
1894
- value: o ?? "",
1895
- onChange: (n) => {
1896
- const f = n.target.value;
1897
- if (f === "" || f === "-") {
1898
- l?.(f);
1899
- return;
1900
- }
1901
- if (/^-?(?!.*\..*\.)[0-9]*(\.[0-9]{0,9})?$/.test(f)) {
1902
- let u = f;
1903
- /^-?[1-9]+[0-9]*(\.[0-9]{1,9})?$/.test(u) && (u = Number(u)), l?.(u);
1904
- }
1905
- }
1906
- });
1907
- if (t.type === "boolean")
1908
- return /* @__PURE__ */ r(xe, {
1909
- label: i,
1910
- labelPlacement: "start",
1911
- control: /* @__PURE__ */ r(ze, { checked: o === !0, onChange: (n, f) => l?.(f) })
1912
- });
1913
- if (t.type === "color")
1914
- return /* @__PURE__ */ r(Hr, {
1915
- label: i,
1916
- value: o,
1917
- onChange: (n) => {
1918
- l?.(n);
1919
- }
1920
- });
1921
- if (t.type === "json" || t.type === "yaml")
1922
- return /* @__PURE__ */ r(Gr, {
1923
- label: i,
1924
- value: o,
1925
- onChange: (n) => {
1926
- l?.(n);
1927
- },
1928
- property: t,
1929
- component: e,
1930
- defaultLocale: p,
1931
- allComponents: d,
1932
- PropertyValueField: L,
1933
- onUpload: (n) => {
1934
- s.current = n, a();
1935
- }
1936
- });
1937
- if (t.type === "custom") {
1938
- const n = d[t.componentId]?.data;
1939
- return n ? /* @__PURE__ */ r(P, {
1940
- sx: {
1941
- width: "100%"
1942
- },
1943
- children: /* @__PURE__ */ r(We, {
1944
- componentId: n.id,
1945
- props: { label: i, value: o, onChange: l },
1946
- locale: m,
1947
- dev: {
1948
- mode: "draft",
1949
- components: d,
1950
- defaultLocale: p
1951
- }
1952
- })
1953
- }) : /* @__PURE__ */ r(z, { ...b, label: i, disabled: !0, placeholder: "Click right button select a component" });
1954
- }
1955
- if (t.type === "component")
1956
- return /* @__PURE__ */ v(k, {
1957
- direction: "column",
1958
- sx: {
1959
- width: "100%",
1960
- gap: 1
1961
- },
1962
- children: [
1963
- /* @__PURE__ */ r(we, {
1964
- allComponents: d,
1965
- label: i,
1966
- value: o?.componentId,
1967
- onChange: (n, f) => {
1968
- h || !o ? l?.({ ...o && JSON.parse(JSON.stringify(o)), componentId: f }) : typeof o == "object" && (o.componentId = f, l?.({ ...o && JSON.parse(JSON.stringify(o)), componentId: f }));
1969
- }
1970
- }),
1971
- o?.componentId && /* @__PURE__ */ r(at, {
1972
- value: o,
1973
- valueImmutable: h,
1974
- onChange: l,
1975
- defaultLocale: p,
1976
- allComponents: d
1977
- })
1978
- ]
1979
- });
1980
- if (!t.type || ["string", "url", "multiline"].includes(t.type)) {
1981
- let n = t.type === "string" ? t.multiline : void 0;
1982
- t.type === "multiline" && (n = !0);
1983
- const f = t.type === "url" ? o?.url : o;
1984
- return /* @__PURE__ */ r(z, {
1985
- ...b,
1986
- label: i,
1987
- value: typeof f == "string" ? f : "",
1988
- multiline: n,
1989
- minRows: n ? 2 : void 0,
1990
- maxRows: n ? 10 : void 0,
1991
- onChange: (g) => l?.(t.type === "url" ? { ...o, url: g.target.value, mediaKitUrl: g.target.value } : g.target.value),
1992
- slotProps: {
1993
- input: t.type === "url" ? {
1994
- sx: {
1995
- pr: 0
1996
- },
1997
- endAdornment: /* @__PURE__ */ v($, {
1998
- position: "end",
1999
- sx: {
2000
- display: "flex",
2001
- alignItems: "center",
2002
- justifyContent: "center"
2003
- },
2004
- children: [
2005
- /* @__PURE__ */ r(Ce, {
2006
- onChange: async ({ response: g }) => {
2007
- const u = g?.data?.url || g?.data?.fileUrl;
2008
- let x;
2009
- u && (x = await de(u).catch(() => ue(u)).catch(() => {
2010
- }));
2011
- let I = g?.data?.filename || "";
2012
- I && (I = `mediakit://${I}`), l?.({
2013
- url: u,
2014
- mediaKitUrl: I,
2015
- width: x?.naturalWidth,
2016
- height: x?.naturalHeight
2017
- });
2018
- }
2019
- }),
2020
- /* @__PURE__ */ r(_, { title: "If you are using the 'mediaKitUrl' property, please use < import { getMediaKitAbsoluteUrl } from '@blocklet/pages-kit/builtin/utils' > to get the full address.", children: /* @__PURE__ */ r(Be, { sx: { cursor: "default", mr: 1 }, fontSize: "small" }) })
2021
- ]
2022
- })
2023
- } : void 0
2024
- }
2025
- });
2026
- }
2027
- return t.type === "array" ? /* @__PURE__ */ r(_r, {
2028
- label: i,
2029
- value: Array.isArray(o) ? o : [],
2030
- onChange: (n) => l?.(n),
2031
- property: t,
2032
- renderItem: ({ item: n, index: f, onChange: g }) => t.subProperties && Object.keys(t.subProperties).length > 0 ? /* @__PURE__ */ r(k, {
2033
- sx: {
2034
- gap: 1,
2035
- width: "100%"
2036
- },
2037
- children: D(Object.values(t.subProperties), "index").filter((u) => u.data.visible !== !1).map(({ data: u }) => u.key ? /* @__PURE__ */ r(L, {
2038
- component: e,
2039
- property: u,
2040
- value: n[u.key],
2041
- onChange: (x) => {
2042
- const I = { ...n, [u.key]: x };
2043
- g(I);
2044
- },
2045
- size: "small",
2046
- fullWidth: !0,
2047
- defaultLocale: p,
2048
- allComponents: d
2049
- }, u.id) : null)
2050
- }, f) : /* @__PURE__ */ r(z, { size: b.size, fullWidth: !0, value: n, onChange: (u) => g(u.target.value) })
2051
- }) : (console.error("Unsupported property type", t.type), null);
2052
- }
2053
- function dt({ NumberProps: e, ...t }) {
2054
- const { getInputProps: o } = xr(e), l = o();
2055
- return /* @__PURE__ */ r(z, {
2056
- ...t,
2057
- slotProps: {
2058
- htmlInput: l
2059
- }
2060
- });
2061
- }
2062
- const ut = `import React from '@blocklet/pages-kit/builtin/react'
2063
- import { Box } from '@blocklet/pages-kit/builtin/mui/material'
2064
-
2065
- export default function () {
2066
- return (
2067
- <Box>
2068
- Hello World
2069
- </Box>
2070
- )
2071
- }`, pt = `console.log('hello')
2072
- `;
2073
- function mt({ value: e }) {
2074
- const { locale: t } = V(), o = Ae(), l = Q(e).doc;
2075
- return U(() => {
2076
- e.renderer?.script || (l.transact(() => {
2077
- e.renderer.script = e.renderer.type === "react-component" ? ut : pt;
2078
- }), o());
2079
- }, [e]), /* @__PURE__ */ r(P, { sx: { border: 1, borderColor: "divider", borderRadius: 1, overflow: "hidden" }, children: /* @__PURE__ */ r(ye, {
2080
- keyId: e.id,
2081
- locale: t,
2082
- language: "typescript",
2083
- value: e.renderer.script || "",
2084
- onChange: (h) => e.renderer.script = h,
2085
- typeScriptNoValidation: !1,
2086
- fullScreenOptions: {
2087
- enableEscExit: !0
2088
- }
2089
- }, e.id) });
2090
- }
2091
- function ht({ value: e }) {
2092
- const { t } = V(), o = Q(e).doc, { state: { components: l, config: { defaultLocale: h }, resources: p }, localState: { currentLocale: d } } = oe(), b = ge(), m = l[e.renderer.componentId]?.data ?? p.components?.[e.renderer.componentId]?.component, c = Pe({ variant: "dialog" });
2093
- return /* @__PURE__ */ r(le, { children: /* @__PURE__ */ v(k, {
2094
- sx: {
2095
- gap: 1
2096
- },
2097
- children: [
2098
- /* @__PURE__ */ r(we, {
2099
- allComponents: b,
2100
- excludes: [e.id],
2101
- value: e.renderer.componentId,
2102
- onChange: (s, a) => e.renderer.componentId = a
2103
- }),
2104
- m && /* @__PURE__ */ v(F, { children: [
2105
- /* @__PURE__ */ v(k, {
2106
- direction: "row",
2107
- sx: {
2108
- justifyContent: "space-between",
2109
- alignItems: "center"
2110
- },
2111
- children: [
2112
- /* @__PURE__ */ r(A, { variant: "subtitle2", children: t("parameters") }),
2113
- /* @__PURE__ */ r(E, { sx: { minWidth: 32, minHeight: 32, p: 0 }, ...ke(c), children: /* @__PURE__ */ r(Ue, { fontSize: "small" }) })
2114
- ]
2115
- }),
2116
- m.properties && D(Object.values(m.properties), "index").map(({ data: s }) => /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(L, {
2117
- allComponents: b,
2118
- defaultLocale: h,
2119
- component: m,
2120
- property: s,
2121
- fullWidth: !0,
2122
- size: "small",
2123
- valueImmutable: ie(e.renderer.properties?.[s.id]?.locales?.[d]?.value),
2124
- value: e.renderer.properties?.[s.id]?.locales?.[d]?.value ?? e.renderer.properties?.[s.id]?.locales?.[h]?.value ?? s.locales?.[d]?.defaultValue ?? s.locales?.[h]?.defaultValue,
2125
- onChange: (a) => {
2126
- o.transact(() => {
2127
- e.renderer.properties ??= {}, e.renderer.properties[s.id] ??= {}, e.renderer.properties[s.id].locales ??= {}, e.renderer.properties[s.id].locales[d] ??= {}, e.renderer.properties[s.id].locales[d].value = a;
2128
- });
2129
- }
2130
- }) }, s.id)),
2131
- /* @__PURE__ */ r(Ge, { ...Le(c), component: e, type: "parameters" })
2132
- ] })
2133
- ]
2134
- }) });
2135
- }
2136
- function we({ label: e, options: t, excludes: o, value: l, onChange: h, allComponents: p, ...d }) {
2137
- const { t: b } = V(), m = t ?? D(Object.values(Ar(p, ...o ?? [])), "index").map((s) => s.data), c = (typeof l == "string" ? p[l]?.data : void 0) ?? null;
2138
- return /* @__PURE__ */ r(Te, {
2139
- ...d,
2140
- size: "small",
2141
- options: m,
2142
- autoHighlight: !0,
2143
- isOptionEqualToValue: (s, a) => s.id === a.id,
2144
- getOptionKey: (s) => s.id,
2145
- getOptionLabel: (s) => s.name || s.id,
2146
- renderInput: (s) => /* @__PURE__ */ r(z, { label: e || b("component"), ...s }),
2147
- value: c,
2148
- onChange: (s, a) => {
2149
- let i = {};
2150
- a && (i = {
2151
- blockletId: p[a?.id]?.blockletId,
2152
- blockletTitle: p[a?.id]?.blockletTitle,
2153
- componentName: p[a?.id]?.data?.name || p[a?.id]?.data?.id
2154
- }), h?.(s, a?.id, i);
2155
- }
2156
- });
2157
- }
2158
- function Ye({ config: e, allComponents: t, defaultLocale: o, propertiesValue: l, currentLocale: h, onChange: p, props: d }) {
2159
- const { t: b } = V(), [m, c] = B(e?.properties), [s, a] = B(null);
2160
- U(() => {
2161
- (() => {
2162
- e?.renderer?.type === "react-component" && K(e?.properties) ? br(e?.renderer?.script).then((x) => {
2163
- const I = gr(x);
2164
- c(I);
2165
- }) : c(e?.properties);
2166
- })();
2167
- }, [JSON.stringify(e)]);
2168
- const i = T(() => !e || !m ? {} : Object.values(m).reduce((u, { data: x }) => {
2169
- const I = x.key || x.id;
2170
- return u[x.id] = {
2171
- key: I,
2172
- value: d?.[I] ?? l?.[x.id]?.value ?? x.locales?.[h]?.defaultValue ?? x.locales?.[o]?.defaultValue,
2173
- id: x.id,
2174
- type: x.type
2175
- }, u;
2176
- }, {}), [JSON.stringify(m), e, l, h, o]), n = H(() => {
2177
- if (!m)
2178
- return {
2179
- canUseProperties: [],
2180
- visibleProperties: [],
2181
- canUsePropertiesKeys: []
2182
- };
2183
- const u = D(Object.values(m), "index"), x = u.filter(({ data: S }) => S.key && fe(m, S.id)), I = u.filter(({ data: S }) => S.key && S.type !== "component"), N = I.map(({ data: S }) => S.key);
2184
- return {
2185
- canUseProperties: I,
2186
- visibleProperties: x,
2187
- canUsePropertiesKeys: N
2188
- };
2189
- }, [JSON.stringify(m)]), f = i(), g = Tr(f, "key");
2190
- return /* @__PURE__ */ r(le, { children: /* @__PURE__ */ v(k, {
2191
- sx: {
2192
- gap: 2
2193
- },
2194
- children: [
2195
- /* @__PURE__ */ r(A, { variant: "subtitle1", children: b("maker.properties.parameters") }),
2196
- !e || n.canUsePropertiesKeys.length === 0 ? /* @__PURE__ */ r(G, { style: { fontSize: 12 }, children: b("maker.properties.noParameters") }) : /* @__PURE__ */ v(F, { children: [
2197
- /* @__PURE__ */ r(k, {
2198
- sx: {
2199
- gap: 2
2200
- },
2201
- children: n.visibleProperties.map(({ data: u }) => /* @__PURE__ */ r(P, { children: /* @__PURE__ */ r(L, {
2202
- allComponents: t,
2203
- defaultLocale: o,
2204
- size: "small",
2205
- fullWidth: !0,
2206
- component: e,
2207
- property: u,
2208
- valueImmutable: ie(l?.[u.id]?.value),
2209
- value: d?.[u.key || u.id] ?? f[u.id]?.value,
2210
- onChange: (x) => {
2211
- p({
2212
- path: ["properties", u.id],
2213
- id: u.id,
2214
- value: { value: x },
2215
- shouldSync: Ie(u),
2216
- excludeKeys: [],
2217
- key: u.key || u.id
2218
- });
2219
- }
2220
- }) }, u.id))
2221
- }),
2222
- /* @__PURE__ */ r(k, {
2223
- sx: {
2224
- gap: 2,
2225
- width: "100%"
2226
- },
2227
- children: /* @__PURE__ */ r(We, {
2228
- componentId: e?.id || "",
2229
- renderType: "setting",
2230
- locale: h,
2231
- properties: f,
2232
- dev: { mode: "draft", components: t, defaultLocale: o },
2233
- props: {
2234
- ...Dr(d ?? {}, n.canUsePropertiesKeys),
2235
- onChange: (u) => {
2236
- const { canUsePropertiesKeys: x } = n;
2237
- Object.keys(u).filter((N) => !Rr(u[N], g?.[N]?.value)).filter((N) => !(N === "locale" && !Vr(g[N], "locale") || g[N]?.type === "component" || (g[N]?.type === "yaml" || g[N]?.type === "json") && fe(m, g[N]?.id))).reduce((N, S) => N.then(() => {
2238
- const w = g[S], j = x.includes(S);
2239
- if (w?.id && j)
2240
- return p({
2241
- path: ["properties", w.id],
2242
- id: w.id,
2243
- value: { value: u[S] },
2244
- shouldSync: Ie(w),
2245
- excludeKeys: [],
2246
- key: w.key || w.id
2247
- }), Promise.resolve();
2248
- const y = `propertyNotFound${S}`;
2249
- if (s === y)
2250
- return Promise.resolve();
2251
- me.close(s);
2252
- const C = me.warning(b("maker.properties.propertyNotFound", {
2253
- key: S
2254
- }), {
2255
- key: y
2256
- });
2257
- return a(C), Promise.resolve();
2258
- }), Promise.resolve());
2259
- }
2260
- }
2261
- })
2262
- })
2263
- ] })
2264
- ]
2265
- }) });
2266
- }
2267
- function ft({ config: e }) {
2268
- const { t, locale: o } = V(), [l, h] = B(!1), p = (d) => {
2269
- e.llmConfig = d;
2270
- };
2271
- return /* @__PURE__ */ v(F, { children: [
2272
- /* @__PURE__ */ r(_, { title: t("maker.properties.configLLMDescription"), children: /* @__PURE__ */ r(q, { color: "primary", onClick: () => h(!0), size: "small", children: /* @__PURE__ */ r(Ir, {}) }) }),
2273
- l && /* @__PURE__ */ r(et, {
2274
- open: l,
2275
- onClose: () => h(!1),
2276
- onConfirm: p,
2277
- component: e,
2278
- initialConfig: e.llmConfig,
2279
- locale: o,
2280
- defaultLocale: "en",
2281
- title: t("maker.properties.llmConfigTitle")
2282
- })
2283
- ] });
2284
- }
2285
- export {
2286
- it as BasicInfo,
2287
- we as CustomComponentAutocomplete,
2288
- nn as CustomComponentSettings,
2289
- ut as DefaultReactComponentScriptTemplate,
2290
- pt as DefaultWebComponentScriptTemplate,
2291
- Ye as ParametersConfig,
2292
- lt as PropertiesConfig,
2293
- L as PropertyValueField
2294
- };