@easy-editor/setters 0.1.2 → 0.1.4

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.
package/dist/index.cjs DELETED
@@ -1,3347 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React$1 = require('react');
6
- var reactDom = require('react-dom');
7
- var jsxRuntime = require('react/jsx-runtime');
8
-
9
- /**
10
- * Popover - 共享弹窗组件
11
- * - 使用 Portal 渲染到 document.body,避免被父容器遮挡
12
- * - 自动匹配触发器宽度
13
- */
14
- const Popover = props => {
15
- const {
16
- open,
17
- onClose,
18
- trigger,
19
- children,
20
- width = 'trigger'
21
- } = props;
22
- const triggerRef = React$1.useRef(null);
23
- const [position, setPosition] = React$1.useState({
24
- top: 0,
25
- left: 0
26
- });
27
- const [popoverWidth, setPopoverWidth] = React$1.useState(0);
28
-
29
- // 计算弹窗位置
30
- React$1.useEffect(() => {
31
- if (open && triggerRef.current) {
32
- const triggerRect = triggerRef.current.getBoundingClientRect();
33
- const triggerWidth = triggerRect.width;
34
-
35
- // 设置弹窗宽度
36
- if (width === 'trigger') {
37
- setPopoverWidth(triggerWidth);
38
- }
39
- setPosition({
40
- top: triggerRect.bottom + 4,
41
- left: triggerRect.left
42
- });
43
- }
44
- }, [open, width]);
45
-
46
- // 点击外部关闭
47
- React$1.useEffect(() => {
48
- const handleClickOutside = event => {
49
- const target = event.target;
50
- const popoverEl = document.querySelector('.es-popover-portal');
51
- if (popoverEl && !popoverEl.contains(target) && triggerRef.current && !triggerRef.current.contains(target)) {
52
- onClose();
53
- }
54
- };
55
- if (open) {
56
- document.addEventListener('mousedown', handleClickOutside);
57
- return () => document.removeEventListener('mousedown', handleClickOutside);
58
- }
59
- }, [open, onClose]);
60
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
61
- ref: triggerRef
62
- }, trigger), open ? /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement("div", {
63
- className: "es-popover-portal",
64
- style: {
65
- position: 'fixed',
66
- top: position.top,
67
- left: position.left,
68
- width: popoverWidth || 'auto',
69
- zIndex: 1000
70
- }
71
- }, children), document.body) : '');
72
- };
73
-
74
- function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
75
-
76
- function cn(...inputs) {
77
- return clsx(inputs);
78
- }
79
-
80
- /**
81
- * @license lucide-react v0.561.0 - ISC
82
- *
83
- * This source code is licensed under the ISC license.
84
- * See the LICENSE file in the root directory of this source tree.
85
- */
86
- const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
87
- const toCamelCase = string => string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase());
88
- const toPascalCase = string => {
89
- const camelCase = toCamelCase(string);
90
- return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
91
- };
92
- const mergeClasses = (...classes) => classes.filter((className, index, array) => {
93
- return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
94
- }).join(" ").trim();
95
- const hasA11yProp = props => {
96
- for (const prop in props) {
97
- if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
98
- return true;
99
- }
100
- }
101
- };
102
-
103
- /**
104
- * @license lucide-react v0.561.0 - ISC
105
- *
106
- * This source code is licensed under the ISC license.
107
- * See the LICENSE file in the root directory of this source tree.
108
- */
109
- var defaultAttributes = {
110
- xmlns: "http://www.w3.org/2000/svg",
111
- width: 24,
112
- height: 24,
113
- viewBox: "0 0 24 24",
114
- fill: "none",
115
- stroke: "currentColor",
116
- strokeWidth: 2,
117
- strokeLinecap: "round",
118
- strokeLinejoin: "round"
119
- };
120
-
121
- /**
122
- * @license lucide-react v0.561.0 - ISC
123
- *
124
- * This source code is licensed under the ISC license.
125
- * See the LICENSE file in the root directory of this source tree.
126
- */
127
- const Icon = /*#__PURE__*/React$1.forwardRef(({
128
- color = "currentColor",
129
- size = 24,
130
- strokeWidth = 2,
131
- absoluteStrokeWidth,
132
- className = "",
133
- children,
134
- iconNode,
135
- ...rest
136
- }, ref) => /*#__PURE__*/React$1.createElement("svg", {
137
- ref,
138
- ...defaultAttributes,
139
- width: size,
140
- height: size,
141
- stroke: color,
142
- strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
143
- className: mergeClasses("lucide", className),
144
- ...(!children && !hasA11yProp(rest) && {
145
- "aria-hidden": "true"
146
- }),
147
- ...rest
148
- }, [...iconNode.map(([tag, attrs]) => /*#__PURE__*/React$1.createElement(tag, attrs)), ...(Array.isArray(children) ? children : [children])]));
149
-
150
- /**
151
- * @license lucide-react v0.561.0 - ISC
152
- *
153
- * This source code is licensed under the ISC license.
154
- * See the LICENSE file in the root directory of this source tree.
155
- */
156
- const createLucideIcon = (iconName, iconNode) => {
157
- const Component = /*#__PURE__*/React$1.forwardRef(({
158
- className,
159
- ...props
160
- }, ref) => /*#__PURE__*/React$1.createElement(Icon, {
161
- ref,
162
- iconNode,
163
- className: mergeClasses(`lucide-${toKebabCase(toPascalCase(iconName))}`, `lucide-${iconName}`, className),
164
- ...props
165
- }));
166
- Component.displayName = toPascalCase(iconName);
167
- return Component;
168
- };
169
-
170
- /**
171
- * @license lucide-react v0.561.0 - ISC
172
- *
173
- * This source code is licensed under the ISC license.
174
- * See the LICENSE file in the root directory of this source tree.
175
- */
176
- const __iconNode$m = [["rect", {
177
- width: "6",
178
- height: "16",
179
- x: "4",
180
- y: "2",
181
- rx: "2",
182
- key: "z5wdxg"
183
- }], ["rect", {
184
- width: "6",
185
- height: "9",
186
- x: "14",
187
- y: "9",
188
- rx: "2",
189
- key: "um7a8w"
190
- }], ["path", {
191
- d: "M22 22H2",
192
- key: "19qnx5"
193
- }]];
194
- const AlignEndHorizontal = createLucideIcon("align-end-horizontal", __iconNode$m);
195
-
196
- /**
197
- * @license lucide-react v0.561.0 - ISC
198
- *
199
- * This source code is licensed under the ISC license.
200
- * See the LICENSE file in the root directory of this source tree.
201
- */
202
- const __iconNode$l = [["rect", {
203
- width: "16",
204
- height: "6",
205
- x: "2",
206
- y: "4",
207
- rx: "2",
208
- key: "10wcwx"
209
- }], ["rect", {
210
- width: "9",
211
- height: "6",
212
- x: "9",
213
- y: "14",
214
- rx: "2",
215
- key: "4p5bwg"
216
- }], ["path", {
217
- d: "M22 22V2",
218
- key: "12ipfv"
219
- }]];
220
- const AlignEndVertical = createLucideIcon("align-end-vertical", __iconNode$l);
221
-
222
- /**
223
- * @license lucide-react v0.561.0 - ISC
224
- *
225
- * This source code is licensed under the ISC license.
226
- * See the LICENSE file in the root directory of this source tree.
227
- */
228
- const __iconNode$k = [["rect", {
229
- width: "6",
230
- height: "14",
231
- x: "4",
232
- y: "5",
233
- rx: "2",
234
- key: "1wwnby"
235
- }], ["rect", {
236
- width: "6",
237
- height: "10",
238
- x: "14",
239
- y: "7",
240
- rx: "2",
241
- key: "1fe6j6"
242
- }], ["path", {
243
- d: "M17 22v-5",
244
- key: "4b6g73"
245
- }], ["path", {
246
- d: "M17 7V2",
247
- key: "hnrr36"
248
- }], ["path", {
249
- d: "M7 22v-3",
250
- key: "1r4jpn"
251
- }], ["path", {
252
- d: "M7 5V2",
253
- key: "liy1u9"
254
- }]];
255
- const AlignHorizontalDistributeCenter = createLucideIcon("align-horizontal-distribute-center", __iconNode$k);
256
-
257
- /**
258
- * @license lucide-react v0.561.0 - ISC
259
- *
260
- * This source code is licensed under the ISC license.
261
- * See the LICENSE file in the root directory of this source tree.
262
- */
263
- const __iconNode$j = [["rect", {
264
- width: "6",
265
- height: "16",
266
- x: "4",
267
- y: "6",
268
- rx: "2",
269
- key: "1n4dg1"
270
- }], ["rect", {
271
- width: "6",
272
- height: "9",
273
- x: "14",
274
- y: "6",
275
- rx: "2",
276
- key: "17khns"
277
- }], ["path", {
278
- d: "M22 2H2",
279
- key: "fhrpnj"
280
- }]];
281
- const AlignStartHorizontal = createLucideIcon("align-start-horizontal", __iconNode$j);
282
-
283
- /**
284
- * @license lucide-react v0.561.0 - ISC
285
- *
286
- * This source code is licensed under the ISC license.
287
- * See the LICENSE file in the root directory of this source tree.
288
- */
289
- const __iconNode$i = [["rect", {
290
- width: "9",
291
- height: "6",
292
- x: "6",
293
- y: "14",
294
- rx: "2",
295
- key: "lpm2y7"
296
- }], ["rect", {
297
- width: "16",
298
- height: "6",
299
- x: "6",
300
- y: "4",
301
- rx: "2",
302
- key: "rdj6ps"
303
- }], ["path", {
304
- d: "M2 2v20",
305
- key: "1ivd8o"
306
- }]];
307
- const AlignStartVertical = createLucideIcon("align-start-vertical", __iconNode$i);
308
-
309
- /**
310
- * @license lucide-react v0.561.0 - ISC
311
- *
312
- * This source code is licensed under the ISC license.
313
- * See the LICENSE file in the root directory of this source tree.
314
- */
315
- const __iconNode$h = [["path", {
316
- d: "M22 17h-3",
317
- key: "1lwga1"
318
- }], ["path", {
319
- d: "M22 7h-5",
320
- key: "o2endc"
321
- }], ["path", {
322
- d: "M5 17H2",
323
- key: "1gx9xc"
324
- }], ["path", {
325
- d: "M7 7H2",
326
- key: "6bq26l"
327
- }], ["rect", {
328
- x: "5",
329
- y: "14",
330
- width: "14",
331
- height: "6",
332
- rx: "2",
333
- key: "1qrzuf"
334
- }], ["rect", {
335
- x: "7",
336
- y: "4",
337
- width: "10",
338
- height: "6",
339
- rx: "2",
340
- key: "we8e9z"
341
- }]];
342
- const AlignVerticalDistributeCenter = createLucideIcon("align-vertical-distribute-center", __iconNode$h);
343
-
344
- /**
345
- * @license lucide-react v0.561.0 - ISC
346
- *
347
- * This source code is licensed under the ISC license.
348
- * See the LICENSE file in the root directory of this source tree.
349
- */
350
- const __iconNode$g = [["path", {
351
- d: "M5 12h14",
352
- key: "1ays0h"
353
- }], ["path", {
354
- d: "m12 5 7 7-7 7",
355
- key: "xquz4c"
356
- }]];
357
- const ArrowRight = createLucideIcon("arrow-right", __iconNode$g);
358
-
359
- /**
360
- * @license lucide-react v0.561.0 - ISC
361
- *
362
- * This source code is licensed under the ISC license.
363
- * See the LICENSE file in the root directory of this source tree.
364
- */
365
- const __iconNode$f = [["path", {
366
- d: "M20 6 9 17l-5-5",
367
- key: "1gmf2c"
368
- }]];
369
- const Check = createLucideIcon("check", __iconNode$f);
370
-
371
- /**
372
- * @license lucide-react v0.561.0 - ISC
373
- *
374
- * This source code is licensed under the ISC license.
375
- * See the LICENSE file in the root directory of this source tree.
376
- */
377
- const __iconNode$e = [["path", {
378
- d: "m6 9 6 6 6-6",
379
- key: "qrunsl"
380
- }]];
381
- const ChevronDown = createLucideIcon("chevron-down", __iconNode$e);
382
-
383
- /**
384
- * @license lucide-react v0.561.0 - ISC
385
- *
386
- * This source code is licensed under the ISC license.
387
- * See the LICENSE file in the root directory of this source tree.
388
- */
389
- const __iconNode$d = [["path", {
390
- d: "m7 15 5 5 5-5",
391
- key: "1hf1tw"
392
- }], ["path", {
393
- d: "m7 9 5-5 5 5",
394
- key: "sgt6xg"
395
- }]];
396
- const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$d);
397
-
398
- /**
399
- * @license lucide-react v0.561.0 - ISC
400
- *
401
- * This source code is licensed under the ISC license.
402
- * See the LICENSE file in the root directory of this source tree.
403
- */
404
- const __iconNode$c = [["path", {
405
- d: "m16 18 6-6-6-6",
406
- key: "eg8j8"
407
- }], ["path", {
408
- d: "m8 6-6 6 6 6",
409
- key: "ppft3o"
410
- }]];
411
- const Code = createLucideIcon("code", __iconNode$c);
412
-
413
- /**
414
- * @license lucide-react v0.561.0 - ISC
415
- *
416
- * This source code is licensed under the ISC license.
417
- * See the LICENSE file in the root directory of this source tree.
418
- */
419
- const __iconNode$b = [["ellipse", {
420
- cx: "12",
421
- cy: "5",
422
- rx: "9",
423
- ry: "3",
424
- key: "msslwz"
425
- }], ["path", {
426
- d: "M3 5V19A9 3 0 0 0 21 19V5",
427
- key: "1wlel7"
428
- }], ["path", {
429
- d: "M3 12A9 3 0 0 0 21 12",
430
- key: "mv7ke4"
431
- }]];
432
- const Database = createLucideIcon("database", __iconNode$b);
433
-
434
- /**
435
- * @license lucide-react v0.561.0 - ISC
436
- *
437
- * This source code is licensed under the ISC license.
438
- * See the LICENSE file in the root directory of this source tree.
439
- */
440
- const __iconNode$a = [["path", {
441
- d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
442
- key: "1oefj6"
443
- }], ["path", {
444
- d: "M14 2v5a1 1 0 0 0 1 1h5",
445
- key: "wfsgrz"
446
- }], ["path", {
447
- d: "M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1",
448
- key: "1oajmo"
449
- }], ["path", {
450
- d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1",
451
- key: "mpwhp6"
452
- }]];
453
- const FileBraces = createLucideIcon("file-braces", __iconNode$a);
454
-
455
- /**
456
- * @license lucide-react v0.561.0 - ISC
457
- *
458
- * This source code is licensed under the ISC license.
459
- * See the LICENSE file in the root directory of this source tree.
460
- */
461
- const __iconNode$9 = [["circle", {
462
- cx: "9",
463
- cy: "12",
464
- r: "1",
465
- key: "1vctgf"
466
- }], ["circle", {
467
- cx: "9",
468
- cy: "5",
469
- r: "1",
470
- key: "hp0tcf"
471
- }], ["circle", {
472
- cx: "9",
473
- cy: "19",
474
- r: "1",
475
- key: "fkjjf6"
476
- }], ["circle", {
477
- cx: "15",
478
- cy: "12",
479
- r: "1",
480
- key: "1tmaij"
481
- }], ["circle", {
482
- cx: "15",
483
- cy: "5",
484
- r: "1",
485
- key: "19l28e"
486
- }], ["circle", {
487
- cx: "15",
488
- cy: "19",
489
- r: "1",
490
- key: "f4zoj3"
491
- }]];
492
- const GripVertical = createLucideIcon("grip-vertical", __iconNode$9);
493
-
494
- /**
495
- * @license lucide-react v0.561.0 - ISC
496
- *
497
- * This source code is licensed under the ISC license.
498
- * See the LICENSE file in the root directory of this source tree.
499
- */
500
- const __iconNode$8 = [["path", {
501
- d: "M9 17H7A5 5 0 0 1 7 7h2",
502
- key: "8i5ue5"
503
- }], ["path", {
504
- d: "M15 7h2a5 5 0 1 1 0 10h-2",
505
- key: "1b9ql8"
506
- }], ["line", {
507
- x1: "8",
508
- x2: "16",
509
- y1: "12",
510
- y2: "12",
511
- key: "1jonct"
512
- }]];
513
- const Link2 = createLucideIcon("link-2", __iconNode$8);
514
-
515
- /**
516
- * @license lucide-react v0.561.0 - ISC
517
- *
518
- * This source code is licensed under the ISC license.
519
- * See the LICENSE file in the root directory of this source tree.
520
- */
521
- const __iconNode$7 = [["path", {
522
- d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
523
- key: "1cjeqo"
524
- }], ["path", {
525
- d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
526
- key: "19qd67"
527
- }]];
528
- const Link = createLucideIcon("link", __iconNode$7);
529
-
530
- /**
531
- * @license lucide-react v0.561.0 - ISC
532
- *
533
- * This source code is licensed under the ISC license.
534
- * See the LICENSE file in the root directory of this source tree.
535
- */
536
- const __iconNode$6 = [["path", {
537
- d: "M15 3h6v6",
538
- key: "1q9fwt"
539
- }], ["path", {
540
- d: "m21 3-7 7",
541
- key: "1l2asr"
542
- }], ["path", {
543
- d: "m3 21 7-7",
544
- key: "tjx5ai"
545
- }], ["path", {
546
- d: "M9 21H3v-6",
547
- key: "wtvkvv"
548
- }]];
549
- const Maximize2 = createLucideIcon("maximize-2", __iconNode$6);
550
-
551
- /**
552
- * @license lucide-react v0.561.0 - ISC
553
- *
554
- * This source code is licensed under the ISC license.
555
- * See the LICENSE file in the root directory of this source tree.
556
- */
557
- const __iconNode$5 = [["path", {
558
- d: "M5 12h14",
559
- key: "1ays0h"
560
- }], ["path", {
561
- d: "M12 5v14",
562
- key: "s699le"
563
- }]];
564
- const Plus = createLucideIcon("plus", __iconNode$5);
565
-
566
- /**
567
- * @license lucide-react v0.561.0 - ISC
568
- *
569
- * This source code is licensed under the ISC license.
570
- * See the LICENSE file in the root directory of this source tree.
571
- */
572
- const __iconNode$4 = [["path", {
573
- d: "M14 17H5",
574
- key: "gfn3mx"
575
- }], ["path", {
576
- d: "M19 7h-9",
577
- key: "6i9tg"
578
- }], ["circle", {
579
- cx: "17",
580
- cy: "17",
581
- r: "3",
582
- key: "18b49y"
583
- }], ["circle", {
584
- cx: "7",
585
- cy: "7",
586
- r: "3",
587
- key: "dfmy0x"
588
- }]];
589
- const Settings2 = createLucideIcon("settings-2", __iconNode$4);
590
-
591
- /**
592
- * @license lucide-react v0.561.0 - ISC
593
- *
594
- * This source code is licensed under the ISC license.
595
- * See the LICENSE file in the root directory of this source tree.
596
- */
597
- const __iconNode$3 = [["path", {
598
- d: "M10 11v6",
599
- key: "nco0om"
600
- }], ["path", {
601
- d: "M14 11v6",
602
- key: "outv1u"
603
- }], ["path", {
604
- d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
605
- key: "miytrc"
606
- }], ["path", {
607
- d: "M3 6h18",
608
- key: "d0wm0j"
609
- }], ["path", {
610
- d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
611
- key: "e791ji"
612
- }]];
613
- const Trash2 = createLucideIcon("trash-2", __iconNode$3);
614
-
615
- /**
616
- * @license lucide-react v0.561.0 - ISC
617
- *
618
- * This source code is licensed under the ISC license.
619
- * See the LICENSE file in the root directory of this source tree.
620
- */
621
- const __iconNode$2 = [["path", {
622
- d: "m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71",
623
- key: "yqzxt4"
624
- }], ["path", {
625
- d: "m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71",
626
- key: "4qinb0"
627
- }], ["line", {
628
- x1: "8",
629
- x2: "8",
630
- y1: "2",
631
- y2: "5",
632
- key: "1041cp"
633
- }], ["line", {
634
- x1: "2",
635
- x2: "5",
636
- y1: "8",
637
- y2: "8",
638
- key: "14m1p5"
639
- }], ["line", {
640
- x1: "16",
641
- x2: "16",
642
- y1: "19",
643
- y2: "22",
644
- key: "rzdirn"
645
- }], ["line", {
646
- x1: "19",
647
- x2: "22",
648
- y1: "16",
649
- y2: "16",
650
- key: "ox905f"
651
- }]];
652
- const Unlink = createLucideIcon("unlink", __iconNode$2);
653
-
654
- /**
655
- * @license lucide-react v0.561.0 - ISC
656
- *
657
- * This source code is licensed under the ISC license.
658
- * See the LICENSE file in the root directory of this source tree.
659
- */
660
- const __iconNode$1 = [["path", {
661
- d: "M12 3v12",
662
- key: "1x0j5s"
663
- }], ["path", {
664
- d: "m17 8-5-5-5 5",
665
- key: "7q97r8"
666
- }], ["path", {
667
- d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
668
- key: "ih7n3h"
669
- }]];
670
- const Upload = createLucideIcon("upload", __iconNode$1);
671
-
672
- /**
673
- * @license lucide-react v0.561.0 - ISC
674
- *
675
- * This source code is licensed under the ISC license.
676
- * See the LICENSE file in the root directory of this source tree.
677
- */
678
- const __iconNode = [["path", {
679
- d: "M18 6 6 18",
680
- key: "1bl5f8"
681
- }], ["path", {
682
- d: "m6 6 12 12",
683
- key: "d8bk6v"
684
- }]];
685
- const X = createLucideIcon("x", __iconNode);
686
-
687
- var styles$j = {"container":"es-container-K2hFq","visualWrapper":"es-visualWrapper-4dHVX","previewBox":"es-previewBox-LDujZ","previewElement":"es-previewElement-Bu8GM","grid":"es-grid-BmRRU","gridButton":"es-gridButton-6Vtr7","gridButtonSelected":"es-gridButtonSelected-fOpOm","section":"es-section-SaHDo","sectionLabel":"es-sectionLabel-hDWO0","buttonGroup":"es-buttonGroup-Nj258","alignButton":"es-alignButton-zAvz2","alignButtonSelected":"es-alignButtonSelected-kGGHJ","alignIcon":"es-alignIcon-mFjSX","alignIconRotated":"es-alignIconRotated-z4AwW"};
688
-
689
- const defaultValue$3 = {
690
- horizontal: 'left',
691
- vertical: 'top'
692
- };
693
- const horizontalOptions = [{
694
- value: 'left',
695
- icon: AlignStartVertical,
696
- label: '左对齐'
697
- }, {
698
- value: 'center',
699
- icon: AlignVerticalDistributeCenter,
700
- label: '水平居中'
701
- }, {
702
- value: 'right',
703
- icon: AlignEndVertical,
704
- label: '右对齐'
705
- }, {
706
- value: 'stretch',
707
- icon: Maximize2,
708
- label: '水平拉伸'
709
- }];
710
- const verticalOptions = [{
711
- value: 'top',
712
- icon: AlignStartHorizontal,
713
- label: '顶部对齐'
714
- }, {
715
- value: 'center',
716
- icon: AlignHorizontalDistributeCenter,
717
- label: '垂直居中'
718
- }, {
719
- value: 'bottom',
720
- icon: AlignEndHorizontal,
721
- label: '底部对齐'
722
- }, {
723
- value: 'stretch',
724
- icon: Maximize2,
725
- label: '垂直拉伸'
726
- }];
727
-
728
- // 9宫格位置映射
729
- const gridPositions = [{
730
- h: 'left',
731
- v: 'top'
732
- }, {
733
- h: 'center',
734
- v: 'top'
735
- }, {
736
- h: 'right',
737
- v: 'top'
738
- }, {
739
- h: 'left',
740
- v: 'center'
741
- }, {
742
- h: 'center',
743
- v: 'center'
744
- }, {
745
- h: 'right',
746
- v: 'center'
747
- }, {
748
- h: 'left',
749
- v: 'bottom'
750
- }, {
751
- h: 'center',
752
- v: 'bottom'
753
- }, {
754
- h: 'right',
755
- v: 'bottom'
756
- }];
757
-
758
- // 获取元素在容器中的位置样式
759
- const getElementPosition = (h, v) => {
760
- const style = {
761
- position: 'absolute'
762
- };
763
-
764
- // 水平位置
765
- if (h === 'left') {
766
- style.left = '4px';
767
- style.width = '30%';
768
- } else if (h === 'center') {
769
- style.left = '50%';
770
- style.transform = 'translateX(-50%)';
771
- style.width = '30%';
772
- } else if (h === 'right') {
773
- style.right = '4px';
774
- style.width = '30%';
775
- } else {
776
- style.left = '4px';
777
- style.right = '4px';
778
- style.width = 'auto';
779
- }
780
-
781
- // 垂直位置
782
- if (v === 'top') {
783
- style.top = '4px';
784
- style.height = '30%';
785
- } else if (v === 'center') {
786
- style.top = '50%';
787
- style.transform = h === 'center' ? 'translate(-50%, -50%)' : 'translateY(-50%)';
788
- style.height = '30%';
789
- } else if (v === 'bottom') {
790
- style.bottom = '4px';
791
- style.height = '30%';
792
- } else {
793
- style.top = '4px';
794
- style.bottom = '4px';
795
- style.height = 'auto';
796
- }
797
- return style;
798
- };
799
- const AlignSetter = props => {
800
- const {
801
- value,
802
- initialValue,
803
- onChange,
804
- showHorizontal = true,
805
- showVertical = true
806
- } = props;
807
- const currentValue = value ?? initialValue ?? defaultValue$3;
808
- const updateAlign = React$1.useCallback(updates => {
809
- onChange({
810
- ...currentValue,
811
- ...updates
812
- });
813
- }, [currentValue, onChange]);
814
- const handleGridClick = React$1.useCallback((h, v) => {
815
- onChange({
816
- horizontal: h,
817
- vertical: v
818
- });
819
- }, [onChange]);
820
- const isGridSelected = (h, v) => currentValue.horizontal === h && currentValue.vertical === v;
821
- return /*#__PURE__*/React.createElement("div", {
822
- className: styles$j.container
823
- }, showHorizontal === true && showVertical === true ? /*#__PURE__*/React.createElement("div", {
824
- className: styles$j.visualWrapper
825
- }, /*#__PURE__*/React.createElement("div", {
826
- className: styles$j.previewBox
827
- }, /*#__PURE__*/React.createElement("div", {
828
- className: styles$j.previewElement,
829
- style: getElementPosition(currentValue.horizontal, currentValue.vertical)
830
- })), /*#__PURE__*/React.createElement("div", {
831
- className: styles$j.grid
832
- }, gridPositions.map(pos => /*#__PURE__*/React.createElement("button", {
833
- "aria-label": `Align ${pos.h} ${pos.v}`,
834
- className: cn(styles$j.gridButton, isGridSelected(pos.h, pos.v) ? styles$j.gridButtonSelected : ''),
835
- key: `${pos.h}-${pos.v}`,
836
- onClick: () => handleGridClick(pos.h, pos.v),
837
- type: "button"
838
- })))) : null, showHorizontal === true ? /*#__PURE__*/React.createElement("div", {
839
- className: styles$j.section
840
- }, /*#__PURE__*/React.createElement("span", {
841
- className: styles$j.sectionLabel
842
- }, "\u6C34\u5E73\u5BF9\u9F50"), /*#__PURE__*/React.createElement("div", {
843
- className: styles$j.buttonGroup
844
- }, horizontalOptions.map(option => {
845
- const Icon = option.icon;
846
- const isRotated = option.value === 'stretch';
847
- return /*#__PURE__*/React.createElement("button", {
848
- "aria-label": option.label,
849
- className: cn(styles$j.alignButton, currentValue.horizontal === option.value ? styles$j.alignButtonSelected : ''),
850
- key: option.value,
851
- onClick: () => updateAlign({
852
- horizontal: option.value
853
- }),
854
- title: option.label,
855
- type: "button"
856
- }, /*#__PURE__*/React.createElement(Icon, {
857
- className: cn(styles$j.alignIcon, isRotated ? styles$j.alignIconRotated : '')
858
- }));
859
- }))) : null, showVertical === true ? /*#__PURE__*/React.createElement("div", {
860
- className: styles$j.section
861
- }, /*#__PURE__*/React.createElement("span", {
862
- className: styles$j.sectionLabel
863
- }, "\u5782\u76F4\u5BF9\u9F50"), /*#__PURE__*/React.createElement("div", {
864
- className: styles$j.buttonGroup
865
- }, verticalOptions.map(option => {
866
- const Icon = option.icon;
867
- return /*#__PURE__*/React.createElement("button", {
868
- "aria-label": option.label,
869
- className: cn(styles$j.alignButton, currentValue.vertical === option.value ? styles$j.alignButtonSelected : ''),
870
- key: option.value,
871
- onClick: () => updateAlign({
872
- vertical: option.value
873
- }),
874
- title: option.label,
875
- type: "button"
876
- }, /*#__PURE__*/React.createElement(Icon, {
877
- className: styles$j.alignIcon
878
- }));
879
- }))) : null);
880
- };
881
-
882
- var styles$i = {"container":"es-container-KSlB-","item":"es-item-xDCpZ","dragHandle":"es-dragHandle-lOaFv","input":"es-input-ItzPT","removeButton":"es-removeButton-ymAlo","removeIcon":"es-removeIcon-ld51f","addButton":"es-addButton-U1VQX","addIcon":"es-addIcon-6qJub"};
883
-
884
- const ArraySetter = props => {
885
- const {
886
- value,
887
- initialValue,
888
- itemSetter = 'string',
889
- maxItems,
890
- minItems = 0,
891
- placeholder,
892
- addButtonText = '添加项',
893
- onChange
894
- } = props;
895
- const items = value ?? initialValue ?? [];
896
- const handleAdd = React$1.useCallback(() => {
897
- if (maxItems && items.length >= maxItems) {
898
- return;
899
- }
900
- const newItem = itemSetter === 'number' ? 0 : '';
901
- onChange([...items, newItem]);
902
- }, [items, maxItems, itemSetter, onChange]);
903
- const handleRemove = React$1.useCallback(index => {
904
- if (items.length <= minItems) {
905
- return;
906
- }
907
- const newItems = items.filter((_, i) => i !== index);
908
- onChange(newItems);
909
- }, [items, minItems, onChange]);
910
- const handleChange = React$1.useCallback((index, newValue) => {
911
- const newItems = [...items];
912
- newItems[index] = newValue;
913
- onChange(newItems);
914
- }, [items, onChange]);
915
- const canAdd = !maxItems || items.length < maxItems;
916
- const canRemove = items.length > minItems;
917
- return /*#__PURE__*/React.createElement("div", {
918
- className: styles$i.container
919
- }, items.map((item, index) => /*#__PURE__*/React.createElement("div", {
920
- className: styles$i.item,
921
- key: `item-${String(item)}-${index}`
922
- }, /*#__PURE__*/React.createElement(GripVertical, {
923
- className: styles$i.dragHandle
924
- }), /*#__PURE__*/React.createElement("input", {
925
- className: styles$i.input,
926
- onChange: e => {
927
- const val = itemSetter === 'number' ? +e.target.value : e.target.value;
928
- handleChange(index, val);
929
- },
930
- placeholder: placeholder,
931
- type: itemSetter === 'number' ? 'number' : 'text',
932
- value: item
933
- }), /*#__PURE__*/React.createElement("button", {
934
- className: styles$i.removeButton,
935
- disabled: !canRemove,
936
- onClick: () => handleRemove(index),
937
- type: "button"
938
- }, /*#__PURE__*/React.createElement(Trash2, {
939
- className: styles$i.removeIcon
940
- })))), /*#__PURE__*/React.createElement("button", {
941
- className: styles$i.addButton,
942
- disabled: !canAdd,
943
- onClick: handleAdd,
944
- type: "button"
945
- }, /*#__PURE__*/React.createElement(Plus, {
946
- className: styles$i.addIcon
947
- }), addButtonText));
948
- };
949
-
950
- function _extends() {
951
- return _extends = Object.assign ? Object.assign.bind() : function (n) {
952
- for (var e = 1; e < arguments.length; e++) {
953
- var t = arguments[e];
954
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
955
- }
956
- return n;
957
- }, _extends.apply(null, arguments);
958
- }
959
-
960
- function _objectWithoutPropertiesLoose(r, e) {
961
- if (null == r) return {};
962
- var t = {};
963
- for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
964
- if (-1 !== e.indexOf(n)) continue;
965
- t[n] = r[n];
966
- }
967
- return t;
968
- }
969
-
970
- var RGB_MAX = 255;
971
- var SV_MAX = 100;
972
- var rgbaToHsva = _ref => {
973
- var {
974
- r,
975
- g,
976
- b,
977
- a
978
- } = _ref;
979
- var max = Math.max(r, g, b);
980
- var delta = max - Math.min(r, g, b);
981
- var hh = delta ? max === r ? (g - b) / delta : max === g ? 2 + (b - r) / delta : 4 + (r - g) / delta : 0;
982
- return {
983
- h: 60 * (hh < 0 ? hh + 6 : hh),
984
- s: max ? delta / max * SV_MAX : 0,
985
- v: max / RGB_MAX * SV_MAX,
986
- a
987
- };
988
- };
989
- var hsvaToHslaString = hsva => {
990
- var {
991
- h,
992
- s,
993
- l,
994
- a
995
- } = hsvaToHsla(hsva);
996
- return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";
997
- };
998
- var hsvaToHsla = _ref5 => {
999
- var {
1000
- h,
1001
- s,
1002
- v,
1003
- a
1004
- } = _ref5;
1005
- var hh = (200 - s) * v / SV_MAX;
1006
- return {
1007
- h,
1008
- s: hh > 0 && hh < 200 ? s * v / SV_MAX / (hh <= SV_MAX ? hh : 200 - hh) * SV_MAX : 0,
1009
- l: hh / 2,
1010
- a
1011
- };
1012
- };
1013
- var rgbToHex = _ref7 => {
1014
- var {
1015
- r,
1016
- g,
1017
- b
1018
- } = _ref7;
1019
- var bin = r << 16 | g << 8 | b;
1020
- return "#" + (h => new Array(7 - h.length).join('0') + h)(bin.toString(16));
1021
- };
1022
- var rgbaToHexa = _ref8 => {
1023
- var {
1024
- r,
1025
- g,
1026
- b,
1027
- a
1028
- } = _ref8;
1029
- var alpha = typeof a === 'number' && (a * 255 | 1 << 8).toString(16).slice(1);
1030
- return "" + rgbToHex({
1031
- r,
1032
- g,
1033
- b
1034
- }) + (alpha ? alpha : '');
1035
- };
1036
- var hexToHsva = hex => rgbaToHsva(hexToRgba(hex));
1037
- var hexToRgba = hex => {
1038
- var htemp = hex.replace('#', '');
1039
- if (/^#?/.test(hex) && htemp.length === 3) {
1040
- hex = "#" + htemp.charAt(0) + htemp.charAt(0) + htemp.charAt(1) + htemp.charAt(1) + htemp.charAt(2) + htemp.charAt(2);
1041
- }
1042
- var reg = new RegExp("[A-Za-z0-9]{2}", 'g');
1043
- var [r, g, b = 0, a] = hex.match(reg).map(v => parseInt(v, 16));
1044
- return {
1045
- r,
1046
- g,
1047
- b,
1048
- a: (a != null ? a : 255) / RGB_MAX
1049
- };
1050
- };
1051
- var hsvaToRgba = _ref9 => {
1052
- var {
1053
- h,
1054
- s,
1055
- v,
1056
- a
1057
- } = _ref9;
1058
- var _h = h / 60,
1059
- _s = s / SV_MAX,
1060
- _v = v / SV_MAX,
1061
- hi = Math.floor(_h) % 6;
1062
- var f = _h - Math.floor(_h),
1063
- _p = RGB_MAX * _v * (1 - _s),
1064
- _q = RGB_MAX * _v * (1 - _s * f),
1065
- _t = RGB_MAX * _v * (1 - _s * (1 - f));
1066
- _v *= RGB_MAX;
1067
- var rgba = {};
1068
- switch (hi) {
1069
- case 0:
1070
- rgba.r = _v;
1071
- rgba.g = _t;
1072
- rgba.b = _p;
1073
- break;
1074
- case 1:
1075
- rgba.r = _q;
1076
- rgba.g = _v;
1077
- rgba.b = _p;
1078
- break;
1079
- case 2:
1080
- rgba.r = _p;
1081
- rgba.g = _v;
1082
- rgba.b = _t;
1083
- break;
1084
- case 3:
1085
- rgba.r = _p;
1086
- rgba.g = _q;
1087
- rgba.b = _v;
1088
- break;
1089
- case 4:
1090
- rgba.r = _t;
1091
- rgba.g = _p;
1092
- rgba.b = _v;
1093
- break;
1094
- case 5:
1095
- rgba.r = _v;
1096
- rgba.g = _p;
1097
- rgba.b = _q;
1098
- break;
1099
- }
1100
- rgba.r = Math.round(rgba.r);
1101
- rgba.g = Math.round(rgba.g);
1102
- rgba.b = Math.round(rgba.b);
1103
- return _extends({}, rgba, {
1104
- a
1105
- });
1106
- };
1107
- var hsvaToRgbaString = hsva => {
1108
- var {
1109
- r,
1110
- g,
1111
- b,
1112
- a
1113
- } = hsvaToRgba(hsva);
1114
- return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
1115
- };
1116
- var rgbaToRgb = _ref0 => {
1117
- var {
1118
- r,
1119
- g,
1120
- b
1121
- } = _ref0;
1122
- return {
1123
- r,
1124
- g,
1125
- b
1126
- };
1127
- };
1128
- var hslaToHsl = _ref1 => {
1129
- var {
1130
- h,
1131
- s,
1132
- l
1133
- } = _ref1;
1134
- return {
1135
- h,
1136
- s,
1137
- l
1138
- };
1139
- };
1140
- var hsvaToHex = hsva => rgbToHex(hsvaToRgba(hsva));
1141
- var hsvaToHsv = _ref10 => {
1142
- var {
1143
- h,
1144
- s,
1145
- v
1146
- } = _ref10;
1147
- return {
1148
- h,
1149
- s,
1150
- v
1151
- };
1152
- };
1153
- var rgbToXY = _ref12 => {
1154
- var {
1155
- r,
1156
- g,
1157
- b
1158
- } = _ref12;
1159
- var translateColor = function translateColor(color) {
1160
- return color <= 0.04045 ? color / 12.92 : Math.pow((color + 0.055) / 1.055, 2.4);
1161
- };
1162
- var red = translateColor(r / 255);
1163
- var green = translateColor(g / 255);
1164
- var blue = translateColor(b / 255);
1165
- var xyz = {};
1166
- xyz.x = red * 0.4124 + green * 0.3576 + blue * 0.1805;
1167
- xyz.y = red * 0.2126 + green * 0.7152 + blue * 0.0722;
1168
- xyz.bri = red * 0.0193 + green * 0.1192 + blue * 0.9505;
1169
- return xyz;
1170
- };
1171
- var color = str => {
1172
- var rgb;
1173
- var hsl;
1174
- var hsv;
1175
- var rgba;
1176
- var hsla;
1177
- var hsva;
1178
- var xy;
1179
- var hex;
1180
- var hexa;
1181
- if (typeof str === 'string' && validHex$1(str)) {
1182
- hsva = hexToHsva(str);
1183
- hex = str;
1184
- } else if (typeof str !== 'string') {
1185
- hsva = str;
1186
- }
1187
- if (hsva) {
1188
- hsv = hsvaToHsv(hsva);
1189
- hsla = hsvaToHsla(hsva);
1190
- rgba = hsvaToRgba(hsva);
1191
- hexa = rgbaToHexa(rgba);
1192
- hex = hsvaToHex(hsva);
1193
- hsl = hslaToHsl(hsla);
1194
- rgb = rgbaToRgb(rgba);
1195
- xy = rgbToXY(rgb);
1196
- }
1197
- return {
1198
- rgb,
1199
- hsl,
1200
- hsv,
1201
- rgba,
1202
- hsla,
1203
- hsva,
1204
- hex,
1205
- hexa,
1206
- xy
1207
- };
1208
- };
1209
- var validHex$1 = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
1210
-
1211
- function useEventCallback(handler) {
1212
- var callbackRef = React$1.useRef(handler);
1213
- React$1.useEffect(() => {
1214
- callbackRef.current = handler;
1215
- });
1216
- return React$1.useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []);
1217
- }
1218
- var isTouch = event => 'touches' in event;
1219
- var preventDefaultMove = event => {
1220
- !isTouch(event) && event.preventDefault && event.preventDefault();
1221
- };
1222
- var clamp = function clamp(number, min, max) {
1223
- if (min === void 0) {
1224
- min = 0;
1225
- }
1226
- if (max === void 0) {
1227
- max = 1;
1228
- }
1229
- return number > max ? max : number < min ? min : number;
1230
- };
1231
- var getRelativePosition = (node, event) => {
1232
- var rect = node.getBoundingClientRect();
1233
- var pointer = isTouch(event) ? event.touches[0] : event;
1234
- return {
1235
- left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
1236
- top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
1237
- width: rect.width,
1238
- height: rect.height,
1239
- x: pointer.pageX - (rect.left + window.pageXOffset),
1240
- y: pointer.pageY - (rect.top + window.pageYOffset)
1241
- };
1242
- };
1243
-
1244
- var _excluded$8 = ["prefixCls", "className", "onMove", "onDown"];
1245
- var Interactive = /*#__PURE__*/React$1.forwardRef((props, ref) => {
1246
- var {
1247
- prefixCls = 'w-color-interactive',
1248
- className,
1249
- onMove,
1250
- onDown
1251
- } = props,
1252
- reset = _objectWithoutPropertiesLoose(props, _excluded$8);
1253
- var container = React$1.useRef(null);
1254
- var hasTouched = React$1.useRef(false);
1255
- var [isDragging, setDragging] = React$1.useState(false);
1256
- var onMoveCallback = useEventCallback(onMove);
1257
- var onKeyCallback = useEventCallback(onDown);
1258
- var isValid = event => {
1259
- if (hasTouched.current && !isTouch(event)) return false;
1260
- hasTouched.current = isTouch(event);
1261
- return true;
1262
- };
1263
- var handleMove = React$1.useCallback(event => {
1264
- preventDefaultMove(event);
1265
- if (!container.current) return;
1266
- var isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
1267
- if (!isDown) {
1268
- setDragging(false);
1269
- return;
1270
- }
1271
- onMoveCallback == null || onMoveCallback(getRelativePosition(container.current, event), event);
1272
- }, [onMoveCallback]);
1273
- var handleMoveEnd = React$1.useCallback(() => setDragging(false), []);
1274
- var toggleDocumentEvents = React$1.useCallback(state => {
1275
- if (state) {
1276
- window.addEventListener(hasTouched.current ? 'touchmove' : 'mousemove', handleMove);
1277
- window.addEventListener(hasTouched.current ? 'touchend' : 'mouseup', handleMoveEnd);
1278
- } else {
1279
- window.removeEventListener('mousemove', handleMove);
1280
- window.removeEventListener('mouseup', handleMoveEnd);
1281
- window.removeEventListener('touchmove', handleMove);
1282
- window.removeEventListener('touchend', handleMoveEnd);
1283
- }
1284
- }, [handleMove, handleMoveEnd]);
1285
- React$1.useEffect(() => {
1286
- toggleDocumentEvents(isDragging);
1287
- return () => {
1288
- toggleDocumentEvents(false);
1289
- };
1290
- }, [isDragging, handleMove, handleMoveEnd, toggleDocumentEvents]);
1291
- var handleMoveStart = React$1.useCallback(event => {
1292
- var activeEl = document.activeElement;
1293
- activeEl == null || activeEl.blur();
1294
- preventDefaultMove(event.nativeEvent);
1295
- if (!isValid(event.nativeEvent)) return;
1296
- if (!container.current) return;
1297
- onKeyCallback == null || onKeyCallback(getRelativePosition(container.current, event.nativeEvent), event.nativeEvent);
1298
- setDragging(true);
1299
- }, [onKeyCallback]);
1300
- return /*#__PURE__*/jsxRuntime.jsx("div", _extends({}, reset, {
1301
- className: [prefixCls, className || ''].filter(Boolean).join(' '),
1302
- style: _extends({}, reset.style, {
1303
- touchAction: 'none'
1304
- }),
1305
- ref: container,
1306
- tabIndex: 0,
1307
- onMouseDown: handleMoveStart,
1308
- onTouchStart: handleMoveStart
1309
- }));
1310
- });
1311
- Interactive.displayName = 'Interactive';
1312
-
1313
- var Pointer$1 = _ref => {
1314
- var {
1315
- className,
1316
- color,
1317
- left,
1318
- top,
1319
- prefixCls
1320
- } = _ref;
1321
- var style = {
1322
- position: 'absolute',
1323
- top,
1324
- left
1325
- };
1326
- var stylePointer = {
1327
- '--saturation-pointer-box-shadow': 'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px',
1328
- width: 6,
1329
- height: 6,
1330
- transform: 'translate(-3px, -3px)',
1331
- boxShadow: 'var(--saturation-pointer-box-shadow)',
1332
- borderRadius: '50%',
1333
- backgroundColor: color
1334
- };
1335
- return React$1.useMemo(() => /*#__PURE__*/jsxRuntime.jsx("div", {
1336
- className: prefixCls + "-pointer " + (className || ''),
1337
- style: style,
1338
- children: /*#__PURE__*/jsxRuntime.jsx("div", {
1339
- className: prefixCls + "-fill",
1340
- style: stylePointer
1341
- })
1342
- }), [top, left, color, className, prefixCls]);
1343
- };
1344
-
1345
- var _excluded$7 = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
1346
- var Saturation = /*#__PURE__*/React$1.forwardRef((props, ref) => {
1347
- var _hsva$h;
1348
- var {
1349
- prefixCls = 'w-color-saturation',
1350
- radius = 0,
1351
- pointer,
1352
- className,
1353
- hue = 0,
1354
- style,
1355
- hsva,
1356
- onChange
1357
- } = props,
1358
- other = _objectWithoutPropertiesLoose(props, _excluded$7);
1359
- var containerStyle = _extends({
1360
- width: 200,
1361
- height: 200,
1362
- borderRadius: radius
1363
- }, style, {
1364
- position: 'relative'
1365
- });
1366
- var handleChange = (interaction, event) => {
1367
- onChange && hsva && onChange({
1368
- h: hsva.h,
1369
- s: interaction.left * 100,
1370
- v: (1 - interaction.top) * 100,
1371
- a: hsva.a
1372
- });
1373
- };
1374
- var handleKeyDown = React$1.useCallback(event => {
1375
- if (!hsva || !onChange) return;
1376
- var step = 1;
1377
- var newS = hsva.s;
1378
- var newV = hsva.v;
1379
- var changed = false;
1380
- switch (event.key) {
1381
- case 'ArrowLeft':
1382
- newS = Math.max(0, hsva.s - step);
1383
- changed = true;
1384
- event.preventDefault();
1385
- break;
1386
- case 'ArrowRight':
1387
- newS = Math.min(100, hsva.s + step);
1388
- changed = true;
1389
- event.preventDefault();
1390
- break;
1391
- case 'ArrowUp':
1392
- newV = Math.min(100, hsva.v + step);
1393
- changed = true;
1394
- event.preventDefault();
1395
- break;
1396
- case 'ArrowDown':
1397
- newV = Math.max(0, hsva.v - step);
1398
- changed = true;
1399
- event.preventDefault();
1400
- break;
1401
- default:
1402
- return;
1403
- }
1404
- if (changed) {
1405
- onChange({
1406
- h: hsva.h,
1407
- s: newS,
1408
- v: newV,
1409
- a: hsva.a
1410
- });
1411
- }
1412
- }, [hsva, onChange]);
1413
- var pointerElement = React$1.useMemo(() => {
1414
- if (!hsva) return null;
1415
- var comProps = {
1416
- top: 100 - hsva.v + "%",
1417
- left: hsva.s + "%",
1418
- color: hsvaToHslaString(hsva)
1419
- };
1420
- if (pointer && typeof pointer === 'function') {
1421
- return pointer(_extends({
1422
- prefixCls
1423
- }, comProps));
1424
- }
1425
- return /*#__PURE__*/jsxRuntime.jsx(Pointer$1, _extends({
1426
- prefixCls: prefixCls
1427
- }, comProps));
1428
- }, [hsva, pointer, prefixCls]);
1429
- var handleClick = React$1.useCallback(event => {
1430
- event.target.focus();
1431
- }, []);
1432
- return /*#__PURE__*/jsxRuntime.jsx(Interactive, _extends({
1433
- className: [prefixCls, className || ''].filter(Boolean).join(' ')
1434
- }, other, {
1435
- style: _extends({
1436
- position: 'absolute',
1437
- inset: 0,
1438
- cursor: 'crosshair',
1439
- backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(" + ((_hsva$h = hsva == null ? void 0 : hsva.h) != null ? _hsva$h : hue) + ", 100%, 50%))"
1440
- }, containerStyle, {
1441
- outline: 'none'
1442
- }),
1443
- ref: ref,
1444
- onMove: handleChange,
1445
- onDown: handleChange,
1446
- onKeyDown: handleKeyDown,
1447
- onClick: handleClick,
1448
- children: pointerElement
1449
- }));
1450
- });
1451
- Saturation.displayName = 'Saturation';
1452
-
1453
- var _excluded$6 = ["className", "prefixCls", "left", "top", "style", "fillProps"];
1454
- var Pointer = _ref => {
1455
- var {
1456
- className,
1457
- prefixCls,
1458
- left,
1459
- top,
1460
- style,
1461
- fillProps
1462
- } = _ref,
1463
- reset = _objectWithoutPropertiesLoose(_ref, _excluded$6);
1464
- var styleWrapper = _extends({}, style, {
1465
- position: 'absolute',
1466
- left,
1467
- top
1468
- });
1469
- var stylePointer = _extends({
1470
- width: 18,
1471
- height: 18,
1472
- boxShadow: 'var(--alpha-pointer-box-shadow)',
1473
- borderRadius: '50%',
1474
- backgroundColor: 'var(--alpha-pointer-background-color)'
1475
- }, fillProps == null ? void 0 : fillProps.style, {
1476
- transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)'
1477
- });
1478
- return /*#__PURE__*/jsxRuntime.jsx("div", _extends({
1479
- className: prefixCls + "-pointer " + (className || ''),
1480
- style: styleWrapper
1481
- }, reset, {
1482
- children: /*#__PURE__*/jsxRuntime.jsx("div", _extends({
1483
- className: prefixCls + "-fill"
1484
- }, fillProps, {
1485
- style: stylePointer
1486
- }))
1487
- }));
1488
- };
1489
-
1490
- var _excluded$5 = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"];
1491
- var BACKGROUND_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==';
1492
- var Alpha = /*#__PURE__*/React$1.forwardRef((props, ref) => {
1493
- var {
1494
- prefixCls = 'w-color-alpha',
1495
- className,
1496
- hsva,
1497
- background,
1498
- bgProps = {},
1499
- innerProps = {},
1500
- pointerProps = {},
1501
- radius = 0,
1502
- width,
1503
- height = 16,
1504
- direction = 'horizontal',
1505
- style,
1506
- onChange,
1507
- pointer
1508
- } = props,
1509
- other = _objectWithoutPropertiesLoose(props, _excluded$5);
1510
- var handleChange = offset => {
1511
- onChange && onChange(_extends({}, hsva, {
1512
- a: direction === 'horizontal' ? offset.left : offset.top
1513
- }), offset);
1514
- };
1515
- var colorTo = hsvaToHslaString(Object.assign({}, hsva, {
1516
- a: 1
1517
- }));
1518
- var innerBackground = "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgba(244, 67, 54, 0) 0%, " + colorTo + " 100%)";
1519
- var comProps = {};
1520
- if (direction === 'horizontal') {
1521
- comProps.left = hsva.a * 100 + "%";
1522
- } else {
1523
- comProps.top = hsva.a * 100 + "%";
1524
- }
1525
- var styleWrapper = _extends({
1526
- '--alpha-background-color': '#fff',
1527
- '--alpha-pointer-background-color': 'rgb(248, 248, 248)',
1528
- '--alpha-pointer-box-shadow': 'rgb(0 0 0 / 37%) 0px 1px 4px 0px',
1529
- borderRadius: radius,
1530
- background: "url(" + BACKGROUND_IMG + ") left center",
1531
- backgroundColor: 'var(--alpha-background-color)'
1532
- }, {
1533
- width,
1534
- height
1535
- }, style, {
1536
- position: 'relative'
1537
- });
1538
- var handleKeyDown = React$1.useCallback(event => {
1539
- var step = 0.01;
1540
- var currentAlpha = hsva.a;
1541
- var newAlpha = currentAlpha;
1542
- switch (event.key) {
1543
- case 'ArrowLeft':
1544
- if (direction === 'horizontal') {
1545
- newAlpha = Math.max(0, currentAlpha - step);
1546
- event.preventDefault();
1547
- }
1548
- break;
1549
- case 'ArrowRight':
1550
- if (direction === 'horizontal') {
1551
- newAlpha = Math.min(1, currentAlpha + step);
1552
- event.preventDefault();
1553
- }
1554
- break;
1555
- case 'ArrowUp':
1556
- if (direction === 'vertical') {
1557
- newAlpha = Math.max(0, currentAlpha - step);
1558
- event.preventDefault();
1559
- }
1560
- break;
1561
- case 'ArrowDown':
1562
- if (direction === 'vertical') {
1563
- newAlpha = Math.min(1, currentAlpha + step);
1564
- event.preventDefault();
1565
- }
1566
- break;
1567
- default:
1568
- return;
1569
- }
1570
- if (newAlpha !== currentAlpha) {
1571
- var syntheticOffset = {
1572
- left: direction === 'horizontal' ? newAlpha : hsva.a,
1573
- top: direction === 'vertical' ? newAlpha : hsva.a,
1574
- width: 0,
1575
- height: 0,
1576
- x: 0,
1577
- y: 0
1578
- };
1579
- onChange && onChange(_extends({}, hsva, {
1580
- a: newAlpha
1581
- }), syntheticOffset);
1582
- }
1583
- }, [hsva, direction, onChange]);
1584
- var handleClick = React$1.useCallback(event => {
1585
- event.target.focus();
1586
- }, []);
1587
- var pointerElement = pointer && typeof pointer === 'function' ? pointer(_extends({
1588
- prefixCls
1589
- }, pointerProps, comProps)) : /*#__PURE__*/jsxRuntime.jsx(Pointer, _extends({}, pointerProps, {
1590
- prefixCls: prefixCls
1591
- }, comProps));
1592
- return /*#__PURE__*/jsxRuntime.jsxs("div", _extends({}, other, {
1593
- className: [prefixCls, prefixCls + "-" + direction, className || ''].filter(Boolean).join(' '),
1594
- style: styleWrapper,
1595
- ref: ref,
1596
- children: [/*#__PURE__*/jsxRuntime.jsx("div", _extends({}, bgProps, {
1597
- style: _extends({
1598
- inset: 0,
1599
- position: 'absolute',
1600
- background: background || innerBackground,
1601
- borderRadius: radius
1602
- }, bgProps.style)
1603
- })), /*#__PURE__*/jsxRuntime.jsx(Interactive, _extends({}, innerProps, {
1604
- style: _extends({}, innerProps.style, {
1605
- inset: 0,
1606
- zIndex: 1,
1607
- position: 'absolute',
1608
- outline: 'none'
1609
- }),
1610
- onMove: handleChange,
1611
- onDown: handleChange,
1612
- onClick: handleClick,
1613
- onKeyDown: handleKeyDown,
1614
- children: pointerElement
1615
- }))]
1616
- }));
1617
- });
1618
- Alpha.displayName = 'Alpha';
1619
-
1620
- var _excluded$4 = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"];
1621
- var validHex = hex => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
1622
- var getNumberValue = value => Number(String(value).replace(/%/g, ''));
1623
- var EditableInput = /*#__PURE__*/React$1.forwardRef((props, ref) => {
1624
- var {
1625
- prefixCls = 'w-color-editable-input',
1626
- placement = 'bottom',
1627
- label,
1628
- value: initValue,
1629
- className,
1630
- style,
1631
- labelStyle,
1632
- inputStyle,
1633
- onChange,
1634
- onBlur,
1635
- renderInput
1636
- } = props,
1637
- other = _objectWithoutPropertiesLoose(props, _excluded$4);
1638
- var [value, setValue] = React$1.useState(initValue);
1639
- var isFocus = React$1.useRef(false);
1640
- React$1.useEffect(() => {
1641
- if (props.value !== value) {
1642
- if (!isFocus.current) {
1643
- setValue(props.value);
1644
- }
1645
- }
1646
- }, [props.value]);
1647
- function handleChange(evn, valInit) {
1648
- var value = (valInit || evn.target.value).trim().replace(/^#/, '');
1649
- if (validHex(value)) {
1650
- onChange && onChange(evn, value);
1651
- }
1652
- var val = getNumberValue(value);
1653
- if (!isNaN(val)) {
1654
- onChange && onChange(evn, val);
1655
- }
1656
- setValue(value);
1657
- }
1658
- function handleBlur(evn) {
1659
- isFocus.current = false;
1660
- setValue(props.value);
1661
- onBlur && onBlur(evn);
1662
- }
1663
- var placementStyle = {};
1664
- if (placement === 'bottom') {
1665
- placementStyle['flexDirection'] = 'column';
1666
- }
1667
- if (placement === 'top') {
1668
- placementStyle['flexDirection'] = 'column-reverse';
1669
- }
1670
- if (placement === 'left') {
1671
- placementStyle['flexDirection'] = 'row-reverse';
1672
- }
1673
- var wrapperStyle = _extends({
1674
- '--editable-input-label-color': 'rgb(153, 153, 153)',
1675
- '--editable-input-box-shadow': 'rgb(204 204 204) 0px 0px 0px 1px inset',
1676
- '--editable-input-color': '#666',
1677
- position: 'relative',
1678
- alignItems: 'center',
1679
- display: 'flex',
1680
- fontSize: 11
1681
- }, placementStyle, style);
1682
- var editableStyle = _extends({
1683
- width: '100%',
1684
- paddingTop: 2,
1685
- paddingBottom: 2,
1686
- paddingLeft: 3,
1687
- paddingRight: 3,
1688
- fontSize: 11,
1689
- background: 'transparent',
1690
- boxSizing: 'border-box',
1691
- border: 'none',
1692
- color: 'var(--editable-input-color)',
1693
- boxShadow: 'var(--editable-input-box-shadow)'
1694
- }, inputStyle);
1695
- var inputProps = _extends({
1696
- value,
1697
- onChange: handleChange,
1698
- onBlur: handleBlur,
1699
- autoComplete: 'off',
1700
- onFocus: () => isFocus.current = true
1701
- }, other, {
1702
- style: editableStyle,
1703
- onFocusCapture: e => {
1704
- var elm = e.target;
1705
- elm.setSelectionRange(elm.value.length, elm.value.length);
1706
- }
1707
- });
1708
- return /*#__PURE__*/jsxRuntime.jsxs("div", {
1709
- className: [prefixCls, className || ''].filter(Boolean).join(' '),
1710
- style: wrapperStyle,
1711
- children: [renderInput ? renderInput(inputProps, ref) : /*#__PURE__*/jsxRuntime.jsx("input", _extends({
1712
- ref: ref
1713
- }, inputProps)), label && /*#__PURE__*/jsxRuntime.jsx("span", {
1714
- style: _extends({
1715
- color: 'var(--editable-input-label-color)',
1716
- textTransform: 'capitalize'
1717
- }, labelStyle),
1718
- children: label
1719
- })]
1720
- });
1721
- });
1722
- EditableInput.displayName = 'EditableInput';
1723
-
1724
- var _excluded$3 = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"];
1725
- var EditableInputRGBA = /*#__PURE__*/React$1.forwardRef((props, ref) => {
1726
- var {
1727
- prefixCls = 'w-color-editable-input-rgba',
1728
- hsva,
1729
- placement = 'bottom',
1730
- rProps = {},
1731
- gProps = {},
1732
- bProps = {},
1733
- aProps = {},
1734
- className,
1735
- style,
1736
- onChange
1737
- } = props,
1738
- other = _objectWithoutPropertiesLoose(props, _excluded$3);
1739
- var rgba = hsva ? hsvaToRgba(hsva) : {};
1740
- function handleBlur(evn) {
1741
- var value = Number(evn.target.value);
1742
- if (value && value > 255) {
1743
- evn.target.value = '255';
1744
- }
1745
- if (value && value < 0) {
1746
- evn.target.value = '0';
1747
- }
1748
- }
1749
- var handleAlphaBlur = evn => {
1750
- var value = Number(evn.target.value);
1751
- if (value && value > 100) {
1752
- evn.target.value = '100';
1753
- }
1754
- if (value && value < 0) {
1755
- evn.target.value = '0';
1756
- }
1757
- };
1758
- var handleChange = (value, type, evn) => {
1759
- if (typeof value === 'number') {
1760
- if (type === 'a') {
1761
- if (value < 0) value = 0;
1762
- if (value > 100) value = 100;
1763
- onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
1764
- a: value / 100
1765
- }))));
1766
- }
1767
- if (value > 255) {
1768
- value = 255;
1769
- evn.target.value = '255';
1770
- }
1771
- if (value < 0) {
1772
- value = 0;
1773
- evn.target.value = '0';
1774
- }
1775
- if (type === 'r') {
1776
- onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
1777
- r: value
1778
- }))));
1779
- }
1780
- if (type === 'g') {
1781
- onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
1782
- g: value
1783
- }))));
1784
- }
1785
- if (type === 'b') {
1786
- onChange && onChange(color(rgbaToHsva(_extends({}, rgba, {
1787
- b: value
1788
- }))));
1789
- }
1790
- }
1791
- };
1792
- var roundedAlpha = rgba.a ? Math.round(rgba.a * 100) / 100 : 0;
1793
- return /*#__PURE__*/jsxRuntime.jsxs("div", _extends({
1794
- ref: ref,
1795
- className: [prefixCls, className || ''].filter(Boolean).join(' ')
1796
- }, other, {
1797
- style: _extends({
1798
- fontSize: 11,
1799
- display: 'flex'
1800
- }, style),
1801
- children: [/*#__PURE__*/jsxRuntime.jsx(EditableInput, _extends({
1802
- label: "R",
1803
- value: rgba.r || 0,
1804
- onBlur: handleBlur,
1805
- placement: placement,
1806
- onChange: (evn, val) => handleChange(val, 'r', evn)
1807
- }, rProps, {
1808
- style: _extends({}, rProps.style)
1809
- })), /*#__PURE__*/jsxRuntime.jsx(EditableInput, _extends({
1810
- label: "G",
1811
- value: rgba.g || 0,
1812
- onBlur: handleBlur,
1813
- placement: placement,
1814
- onChange: (evn, val) => handleChange(val, 'g', evn)
1815
- }, gProps, {
1816
- style: _extends({
1817
- marginLeft: 5
1818
- }, rProps.style)
1819
- })), /*#__PURE__*/jsxRuntime.jsx(EditableInput, _extends({
1820
- label: "B",
1821
- value: rgba.b || 0,
1822
- onBlur: handleBlur,
1823
- placement: placement,
1824
- onChange: (evn, val) => handleChange(val, 'b', evn)
1825
- }, bProps, {
1826
- style: _extends({
1827
- marginLeft: 5
1828
- }, bProps.style)
1829
- })), aProps && /*#__PURE__*/jsxRuntime.jsx(EditableInput, _extends({
1830
- label: "A",
1831
- value: parseInt(String(roundedAlpha * 100), 10),
1832
- onBlur: handleAlphaBlur,
1833
- placement: placement,
1834
- onChange: (evn, val) => handleChange(val, 'a', evn)
1835
- }, aProps, {
1836
- style: _extends({
1837
- marginLeft: 5
1838
- }, aProps.style)
1839
- }))]
1840
- }));
1841
- });
1842
- EditableInputRGBA.displayName = 'EditableInputRGBA';
1843
-
1844
- var _excluded$2 = ["prefixCls", "className", "hue", "onChange", "direction"];
1845
- var Hue = /*#__PURE__*/React$1.forwardRef((props, ref) => {
1846
- var {
1847
- prefixCls = 'w-color-hue',
1848
- className,
1849
- hue = 0,
1850
- onChange: _onChange,
1851
- direction = 'horizontal'
1852
- } = props,
1853
- other = _objectWithoutPropertiesLoose(props, _excluded$2);
1854
- return /*#__PURE__*/jsxRuntime.jsx(Alpha, _extends({
1855
- ref: ref,
1856
- className: prefixCls + " " + (className || '')
1857
- }, other, {
1858
- direction: direction,
1859
- background: "linear-gradient(to " + (direction === 'horizontal' ? 'right' : 'bottom') + ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
1860
- hsva: {
1861
- h: hue,
1862
- s: 100,
1863
- v: 100,
1864
- a: hue / 360
1865
- },
1866
- onChange: (_, interaction) => {
1867
- _onChange && _onChange({
1868
- h: direction === 'horizontal' ? 360 * interaction.left : 360 * interaction.top
1869
- });
1870
- }
1871
- }));
1872
- });
1873
- Hue.displayName = 'Hue';
1874
-
1875
- var _excluded$1 = ["prefixCls", "className", "color", "colors", "style", "rectProps", "onChange", "addonAfter", "addonBefore", "rectRender"];
1876
- var Swatch = /*#__PURE__*/React$1.forwardRef((props, ref) => {
1877
- var {
1878
- prefixCls = 'w-color-swatch',
1879
- className,
1880
- color: color$1,
1881
- colors = [],
1882
- style,
1883
- rectProps = {},
1884
- onChange,
1885
- addonAfter,
1886
- addonBefore,
1887
- rectRender
1888
- } = props,
1889
- other = _objectWithoutPropertiesLoose(props, _excluded$1);
1890
- var rectStyle = _extends({
1891
- '--swatch-background-color': 'rgb(144, 19, 254)',
1892
- background: 'var(--swatch-background-color)',
1893
- height: 15,
1894
- width: 15,
1895
- marginRight: 5,
1896
- marginBottom: 5,
1897
- cursor: 'pointer',
1898
- position: 'relative',
1899
- outline: 'none',
1900
- borderRadius: 2
1901
- }, rectProps.style);
1902
- var handleClick = (hex, evn) => {
1903
- onChange && onChange(hexToHsva(hex), color(hexToHsva(hex)), evn);
1904
- };
1905
- return /*#__PURE__*/jsxRuntime.jsxs("div", _extends({
1906
- ref: ref
1907
- }, other, {
1908
- className: [prefixCls, className || ''].filter(Boolean).join(' '),
1909
- style: _extends({
1910
- display: 'flex',
1911
- flexWrap: 'wrap',
1912
- position: 'relative'
1913
- }, style),
1914
- children: [addonBefore && /*#__PURE__*/React$1.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
1915
- var title = '';
1916
- var background = '';
1917
- if (typeof item === 'string') {
1918
- title = item;
1919
- background = item;
1920
- }
1921
- if (typeof item === 'object' && item.color) {
1922
- title = item.title || item.color;
1923
- background = item.color;
1924
- }
1925
- var checked = color$1 && color$1.toLocaleLowerCase() === background.toLocaleLowerCase();
1926
- var render = rectRender && rectRender({
1927
- title,
1928
- color: background,
1929
- checked: !!checked,
1930
- style: _extends({}, rectStyle, {
1931
- background
1932
- }),
1933
- onClick: evn => handleClick(background, evn)
1934
- });
1935
- if (render) {
1936
- return /*#__PURE__*/jsxRuntime.jsx(React$1.Fragment, {
1937
- children: render
1938
- }, idx);
1939
- }
1940
- var child = rectProps.children && /*#__PURE__*/React$1.isValidElement(rectProps.children) ? /*#__PURE__*/React$1.cloneElement(rectProps.children, {
1941
- color: background,
1942
- checked
1943
- }) : null;
1944
- return /*#__PURE__*/jsxRuntime.jsx("div", _extends({
1945
- tabIndex: 0,
1946
- title: title,
1947
- onClick: evn => handleClick(background, evn)
1948
- }, rectProps, {
1949
- children: child,
1950
- style: _extends({}, rectStyle, {
1951
- background
1952
- })
1953
- }), idx);
1954
- }), addonAfter && /*#__PURE__*/React$1.isValidElement(addonAfter) && addonAfter]
1955
- }));
1956
- });
1957
- Swatch.displayName = 'Swatch';
1958
-
1959
- var _excluded = ["prefixCls", "className", "onChange", "width", "presetColors", "color", "editableDisable", "disableAlpha", "style"];
1960
- var PRESET_COLORS = ['#D0021B', '#F5A623', '#f8e61b', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'];
1961
- var Bar = props => /*#__PURE__*/jsxRuntime.jsx("div", {
1962
- style: {
1963
- boxShadow: 'rgb(0 0 0 / 60%) 0px 0px 2px',
1964
- width: 4,
1965
- top: 1,
1966
- bottom: 1,
1967
- left: props.left,
1968
- borderRadius: 1,
1969
- position: 'absolute',
1970
- backgroundColor: '#fff'
1971
- }
1972
- });
1973
- var Sketch = /*#__PURE__*/React$1.forwardRef((props, ref) => {
1974
- var {
1975
- prefixCls = 'w-color-sketch',
1976
- className,
1977
- onChange,
1978
- width = 218,
1979
- presetColors = PRESET_COLORS,
1980
- color: color$1,
1981
- editableDisable = true,
1982
- disableAlpha = false,
1983
- style
1984
- } = props,
1985
- other = _objectWithoutPropertiesLoose(props, _excluded);
1986
- var [hsva, setHsva] = React$1.useState({
1987
- h: 209,
1988
- s: 36,
1989
- v: 90,
1990
- a: 1
1991
- });
1992
- React$1.useEffect(() => {
1993
- if (typeof color$1 === 'string' && validHex$1(color$1)) {
1994
- setHsva(hexToHsva(color$1));
1995
- }
1996
- if (typeof color$1 === 'object') {
1997
- setHsva(color$1);
1998
- }
1999
- }, [color$1]);
2000
- var handleChange = hsv => {
2001
- setHsva(hsv);
2002
- onChange && onChange(color(hsv));
2003
- };
2004
- var handleHex = (value, evn) => {
2005
- if (typeof value === 'string' && validHex$1(value) && /(3|6)/.test(String(value.length))) {
2006
- handleChange(hexToHsva(value));
2007
- }
2008
- };
2009
- var handleAlphaChange = newAlpha => handleChange(_extends({}, hsva, {
2010
- a: newAlpha.a
2011
- }));
2012
- var handleSaturationChange = newColor => handleChange(_extends({}, hsva, newColor, {
2013
- a: hsva.a
2014
- }));
2015
- var styleMain = _extends({
2016
- '--sketch-background': 'rgb(255, 255, 255)',
2017
- '--sketch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
2018
- '--sketch-swatch-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset',
2019
- '--sketch-alpha-box-shadow': 'rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset',
2020
- '--sketch-swatch-border-top': '1px solid rgb(238, 238, 238)',
2021
- background: 'var(--sketch-background)',
2022
- borderRadius: 4,
2023
- boxShadow: 'var(--sketch-box-shadow)',
2024
- width
2025
- }, style);
2026
- var styleAlpha = {
2027
- borderRadius: 2,
2028
- background: hsvaToRgbaString(hsva),
2029
- boxShadow: 'var(--sketch-alpha-box-shadow)'
2030
- };
2031
- var styleSwatch = {
2032
- borderTop: 'var(--sketch-swatch-border-top)',
2033
- paddingTop: 10,
2034
- paddingLeft: 10
2035
- };
2036
- var styleSwatchRect = {
2037
- marginRight: 10,
2038
- marginBottom: 10,
2039
- borderRadius: 3,
2040
- boxShadow: 'var(--sketch-swatch-box-shadow)'
2041
- };
2042
- return /*#__PURE__*/jsxRuntime.jsxs("div", _extends({}, other, {
2043
- className: prefixCls + " " + (className || ''),
2044
- ref: ref,
2045
- style: styleMain,
2046
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
2047
- style: {
2048
- padding: '10px 10px 8px'
2049
- },
2050
- children: [/*#__PURE__*/jsxRuntime.jsx(Saturation, {
2051
- hsva: hsva,
2052
- style: {
2053
- width: 'auto',
2054
- height: 150
2055
- },
2056
- onChange: handleSaturationChange
2057
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
2058
- style: {
2059
- display: 'flex',
2060
- marginTop: 4
2061
- },
2062
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
2063
- style: {
2064
- flex: 1
2065
- },
2066
- children: [/*#__PURE__*/jsxRuntime.jsx(Hue, {
2067
- width: "auto",
2068
- height: 10,
2069
- hue: hsva.h,
2070
- pointer: Bar,
2071
- innerProps: {
2072
- style: {
2073
- marginLeft: 1,
2074
- marginRight: 5
2075
- }
2076
- },
2077
- onChange: newHue => handleChange(_extends({}, hsva, newHue))
2078
- }), !disableAlpha && /*#__PURE__*/jsxRuntime.jsx(Alpha, {
2079
- width: "auto",
2080
- height: 10,
2081
- hsva: hsva,
2082
- pointer: Bar,
2083
- style: {
2084
- marginTop: 4
2085
- },
2086
- innerProps: {
2087
- style: {
2088
- marginLeft: 1,
2089
- marginRight: 5
2090
- }
2091
- },
2092
- onChange: handleAlphaChange
2093
- })]
2094
- }), !disableAlpha && /*#__PURE__*/jsxRuntime.jsx(Alpha, {
2095
- width: 24,
2096
- height: 24,
2097
- hsva: hsva,
2098
- radius: 2,
2099
- style: {
2100
- marginLeft: 4
2101
- },
2102
- bgProps: {
2103
- style: {
2104
- background: 'transparent'
2105
- }
2106
- },
2107
- innerProps: {
2108
- style: styleAlpha
2109
- },
2110
- pointer: () => /*#__PURE__*/jsxRuntime.jsx(React$1.Fragment, {})
2111
- })]
2112
- })]
2113
- }), editableDisable && /*#__PURE__*/jsxRuntime.jsxs("div", {
2114
- style: {
2115
- display: 'flex',
2116
- margin: '0 10px 3px 10px'
2117
- },
2118
- children: [/*#__PURE__*/jsxRuntime.jsx(EditableInput, {
2119
- label: "Hex",
2120
- value: hsvaToHex(hsva).replace(/^#/, '').toLocaleUpperCase(),
2121
- onChange: (evn, val) => handleHex(val),
2122
- style: {
2123
- minWidth: 58
2124
- }
2125
- }), /*#__PURE__*/jsxRuntime.jsx(EditableInputRGBA, {
2126
- hsva: hsva,
2127
- style: {
2128
- marginLeft: 6
2129
- },
2130
- aProps: !disableAlpha ? {} : false,
2131
- onChange: result => handleChange(result.hsva)
2132
- })]
2133
- }), presetColors && presetColors.length > 0 && /*#__PURE__*/jsxRuntime.jsx(Swatch, {
2134
- style: styleSwatch,
2135
- colors: presetColors,
2136
- color: hsvaToHex(hsva),
2137
- onChange: hsvColor => handleChange(hsvColor),
2138
- rectProps: {
2139
- style: styleSwatchRect
2140
- }
2141
- })]
2142
- }));
2143
- });
2144
- Sketch.displayName = 'Sketch';
2145
-
2146
- var styles$h = {"trigger":"es-trigger-w-aUi","colorPreview":"es-colorPreview-SUgiJ","colorValue":"es-colorValue-cYdRP","popover":"es-popover-SfIUB"};
2147
-
2148
- const ColorSetter = props => {
2149
- const {
2150
- value,
2151
- initialValue,
2152
- onChange,
2153
- disableAlpha = false
2154
- } = props;
2155
- const [open, setOpen] = React$1.useState(false);
2156
- return /*#__PURE__*/React.createElement(Popover, {
2157
- onClose: () => setOpen(false),
2158
- open: open,
2159
- trigger: /*#__PURE__*/React.createElement("button", {
2160
- "aria-label": "Select color",
2161
- className: styles$h.trigger,
2162
- onClick: () => setOpen(true),
2163
- type: "button"
2164
- }, /*#__PURE__*/React.createElement("div", {
2165
- "aria-label": "Current color",
2166
- className: styles$h.colorPreview,
2167
- style: {
2168
- backgroundColor: value ?? initialValue
2169
- }
2170
- }), /*#__PURE__*/React.createElement("span", {
2171
- className: styles$h.colorValue
2172
- }, value ?? initialValue))
2173
- }, /*#__PURE__*/React.createElement("div", {
2174
- className: styles$h.popover
2175
- }, /*#__PURE__*/React.createElement(Sketch, {
2176
- color: value,
2177
- disableAlpha: disableAlpha,
2178
- onChange: res => onChange(res.hexa),
2179
- presetColors: []
2180
- })));
2181
- };
2182
-
2183
- var styles$g = {"trigger":"es-trigger-fTNvQ","triggerIcon":"es-triggerIcon-1mdQ0","triggerIconPrimary":"es-triggerIconPrimary-opifh","triggerIconMuted":"es-triggerIconMuted-CWgDl","triggerText":"es-triggerText-WeQRu","popoverContent":"es-popoverContent-6qE--","tabsList":"es-tabsList-liSeY","tabTrigger":"es-tabTrigger-6j7K-","tabTriggerActive":"es-tabTriggerActive-g6hcl","tabTriggerIcon":"es-tabTriggerIcon-dRSAp","tabContent":"es-tabContent--H166","tabContentActive":"es-tabContentActive-Fjdu5","section":"es-section-eDYxd","sectionLabel":"es-sectionLabel--LHE8","input":"es-input--OymK","inputMono":"es-inputMono-pCJz3","textarea":"es-textarea-iurkc","booleanButtons":"es-booleanButtons-0bM8P","booleanButton":"es-booleanButton-3fXcB","booleanButtonActive":"es-booleanButtonActive-zGWrZ","datasourceList":"es-datasourceList-VIRXb","datasourceButton":"es-datasourceButton-giz6D","datasourceButtonActive":"es-datasourceButtonActive-m5WPP","datasourceIcon":"es-datasourceIcon-q9Omt","emptyState":"es-emptyState-rI2si","hint":"es-hint-zfWLZ","preview":"es-preview-tUInw"};
2184
-
2185
- const defaultValue$2 = {
2186
- type: 'static',
2187
- staticValue: ''
2188
- };
2189
- const DataBindingSetter = props => {
2190
- const {
2191
- value,
2192
- initialValue,
2193
- onChange,
2194
- dataType = 'any',
2195
- showPreview = true,
2196
- dataSources = []
2197
- } = props;
2198
- const currentValue = value ?? initialValue ?? defaultValue$2;
2199
- const [open, setOpen] = React$1.useState(false);
2200
- const [activeTab, setActiveTab] = React$1.useState(currentValue.type);
2201
- const updateBinding = React$1.useCallback(updates => {
2202
- onChange({
2203
- ...currentValue,
2204
- ...updates
2205
- });
2206
- }, [currentValue, onChange]);
2207
- const handleTypeChange = React$1.useCallback(type => {
2208
- setActiveTab(type);
2209
- updateBinding({
2210
- type
2211
- });
2212
- }, [updateBinding]);
2213
- const handleStaticValueChange = React$1.useCallback(staticValue => {
2214
- updateBinding({
2215
- staticValue
2216
- });
2217
- }, [updateBinding]);
2218
- const handleDatasourceChange = React$1.useCallback(datasourceId => {
2219
- updateBinding({
2220
- datasourceId,
2221
- datasourcePath: ''
2222
- });
2223
- }, [updateBinding]);
2224
- const handlePathChange = React$1.useCallback(datasourcePath => {
2225
- updateBinding({
2226
- datasourcePath
2227
- });
2228
- }, [updateBinding]);
2229
-
2230
- // 渲染静态值输入
2231
- const renderStaticInput = React$1.useMemo(() => {
2232
- switch (dataType) {
2233
- case 'number':
2234
- return /*#__PURE__*/React.createElement("input", {
2235
- className: styles$g.input,
2236
- onChange: e => handleStaticValueChange(Number(e.target.value)),
2237
- placeholder: "\u8F93\u5165\u6570\u503C",
2238
- type: "number",
2239
- value: currentValue.staticValue ?? ''
2240
- });
2241
- case 'boolean':
2242
- return /*#__PURE__*/React.createElement("div", {
2243
- className: styles$g.booleanButtons
2244
- }, /*#__PURE__*/React.createElement("button", {
2245
- className: cn(styles$g.booleanButton, currentValue.staticValue === true ? styles$g.booleanButtonActive : ''),
2246
- onClick: () => handleStaticValueChange(true),
2247
- type: "button"
2248
- }, "True"), /*#__PURE__*/React.createElement("button", {
2249
- className: cn(styles$g.booleanButton, currentValue.staticValue === false ? styles$g.booleanButtonActive : ''),
2250
- onClick: () => handleStaticValueChange(false),
2251
- type: "button"
2252
- }, "False"));
2253
- case 'array':
2254
- case 'object':
2255
- return /*#__PURE__*/React.createElement("textarea", {
2256
- className: styles$g.textarea,
2257
- onChange: e => {
2258
- try {
2259
- const parsed = JSON.parse(e.target.value);
2260
- handleStaticValueChange(parsed);
2261
- } catch {
2262
- handleStaticValueChange(e.target.value);
2263
- }
2264
- },
2265
- placeholder: dataType === 'array' ? '["item1", "item2"]' : '{"key": "value"}',
2266
- value: typeof currentValue.staticValue === 'string' ? currentValue.staticValue : JSON.stringify(currentValue.staticValue, null, 2) ?? ''
2267
- });
2268
- default:
2269
- return /*#__PURE__*/React.createElement("input", {
2270
- className: styles$g.input,
2271
- onChange: e => handleStaticValueChange(e.target.value),
2272
- placeholder: "\u8F93\u5165\u503C",
2273
- type: "text",
2274
- value: currentValue.staticValue ?? ''
2275
- });
2276
- }
2277
- }, [dataType, currentValue.staticValue, handleStaticValueChange]);
2278
-
2279
- // 绑定状态显示
2280
- const bindingStatus = React$1.useMemo(() => {
2281
- if (currentValue.type === 'datasource' && currentValue.datasourceId) {
2282
- const ds = dataSources.find(d => d.id === currentValue.datasourceId);
2283
- return {
2284
- icon: /*#__PURE__*/React.createElement(Link2, {
2285
- className: cn(styles$g.triggerIcon, styles$g.triggerIconPrimary)
2286
- }),
2287
- text: `${ds?.name ?? currentValue.datasourceId}${currentValue.datasourcePath ? `.${currentValue.datasourcePath}` : ''}`
2288
- };
2289
- }
2290
- return {
2291
- icon: /*#__PURE__*/React.createElement(FileBraces, {
2292
- className: cn(styles$g.triggerIcon, styles$g.triggerIconMuted)
2293
- }),
2294
- text: '静态数据'
2295
- };
2296
- }, [currentValue, dataSources]);
2297
- return /*#__PURE__*/React.createElement(Popover, {
2298
- onClose: () => setOpen(false),
2299
- open: open,
2300
- trigger: /*#__PURE__*/React.createElement("button", {
2301
- "aria-label": "Data binding",
2302
- className: styles$g.trigger,
2303
- onClick: () => setOpen(true),
2304
- type: "button"
2305
- }, bindingStatus.icon, /*#__PURE__*/React.createElement("span", {
2306
- className: styles$g.triggerText
2307
- }, bindingStatus.text)),
2308
- width: 300
2309
- }, /*#__PURE__*/React.createElement("div", {
2310
- className: styles$g.popoverContent
2311
- }, /*#__PURE__*/React.createElement("div", {
2312
- className: styles$g.tabsList,
2313
- role: "tablist"
2314
- }, /*#__PURE__*/React.createElement("button", {
2315
- "aria-selected": activeTab === 'static',
2316
- className: cn(styles$g.tabTrigger, activeTab === 'static' ? styles$g.tabTriggerActive : ''),
2317
- onClick: () => handleTypeChange('static'),
2318
- role: "tab",
2319
- type: "button"
2320
- }, /*#__PURE__*/React.createElement(FileBraces, {
2321
- className: styles$g.tabTriggerIcon
2322
- }), "\u9759\u6001\u6570\u636E"), /*#__PURE__*/React.createElement("button", {
2323
- "aria-selected": activeTab === 'datasource',
2324
- className: cn(styles$g.tabTrigger, activeTab === 'datasource' ? styles$g.tabTriggerActive : ''),
2325
- onClick: () => handleTypeChange('datasource'),
2326
- role: "tab",
2327
- type: "button"
2328
- }, /*#__PURE__*/React.createElement(Database, {
2329
- className: styles$g.tabTriggerIcon
2330
- }), "\u6570\u636E\u6E90")), /*#__PURE__*/React.createElement("div", {
2331
- className: cn(styles$g.tabContent, activeTab === 'static' ? styles$g.tabContentActive : ''),
2332
- role: "tabpanel"
2333
- }, /*#__PURE__*/React.createElement("div", {
2334
- className: styles$g.section
2335
- }, /*#__PURE__*/React.createElement("span", {
2336
- className: styles$g.sectionLabel
2337
- }, "\u503C (", dataType, ")"), renderStaticInput)), /*#__PURE__*/React.createElement("div", {
2338
- className: cn(styles$g.tabContent, activeTab === 'datasource' ? styles$g.tabContentActive : ''),
2339
- role: "tabpanel"
2340
- }, /*#__PURE__*/React.createElement("div", {
2341
- className: styles$g.section
2342
- }, /*#__PURE__*/React.createElement("span", {
2343
- className: styles$g.sectionLabel
2344
- }, "\u6570\u636E\u6E90"), dataSources.length > 0 ? /*#__PURE__*/React.createElement("div", {
2345
- className: styles$g.datasourceList
2346
- }, dataSources.map(ds => /*#__PURE__*/React.createElement("button", {
2347
- className: cn(styles$g.datasourceButton, currentValue.datasourceId === ds.id ? styles$g.datasourceButtonActive : ''),
2348
- key: ds.id,
2349
- onClick: () => handleDatasourceChange(ds.id),
2350
- type: "button"
2351
- }, /*#__PURE__*/React.createElement(Database, {
2352
- className: styles$g.datasourceIcon
2353
- }), ds.name))) : /*#__PURE__*/React.createElement("div", {
2354
- className: styles$g.emptyState
2355
- }, "\u6682\u65E0\u53EF\u7528\u6570\u636E\u6E90"), currentValue.datasourceId ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
2356
- className: styles$g.sectionLabel
2357
- }, "\u6570\u636E\u8DEF\u5F84"), /*#__PURE__*/React.createElement("input", {
2358
- className: cn(styles$g.input, styles$g.inputMono),
2359
- onChange: e => handlePathChange(e.target.value),
2360
- placeholder: "data.list[0].name",
2361
- type: "text",
2362
- value: currentValue.datasourcePath ?? ''
2363
- }), /*#__PURE__*/React.createElement("span", {
2364
- className: styles$g.hint
2365
- }, "\u4F7F\u7528\u70B9\u53F7\u8BBF\u95EE\u5D4C\u5957\u5C5E\u6027\uFF0C\u5982: data.items[0].value")) : null, showPreview === true && currentValue.datasourceId ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
2366
- className: styles$g.sectionLabel
2367
- }, "\u6570\u636E\u9884\u89C8"), /*#__PURE__*/React.createElement("div", {
2368
- className: styles$g.preview
2369
- }, "\u7ED1\u5B9A\u540E\u53EF\u5728\u9884\u89C8\u6A21\u5F0F\u67E5\u770B\u6570\u636E")) : null))));
2370
- };
2371
-
2372
- var styles$f = {"trigger":"es-trigger-rmYLl","triggerIcon":"es-triggerIcon-ktlTS","triggerText":"es-triggerText-B63By","popoverContent":"es-popoverContent-IIcFY","header":"es-header-VoKF3","headerTitle":"es-headerTitle-vDZR8","headerCount":"es-headerCount-stTlN","mappingList":"es-mappingList-SLqhN","mappingItem":"es-mappingItem-xtRLl","mappingHeader":"es-mappingHeader-LwKiY","mappingTitle":"es-mappingTitle-IMhzw","mappingRequired":"es-mappingRequired-tP6L-","mappingType":"es-mappingType-nyqrh","mappingRow":"es-mappingRow-lFfhT","select":"es-select-R4pIl","input":"es-input--LohJ","arrowIcon":"es-arrowIcon-QqWMM","targetField":"es-targetField-gSvGk","transformRow":"es-transformRow-O6MAG","transformIcon":"es-transformIcon-beXzy","transformInput":"es-transformInput-SyN2q","clearButton":"es-clearButton-Pm-uP","helpText":"es-helpText-IHqjo"};
2373
-
2374
- const defaultValue$1 = {
2375
- mappings: []
2376
- };
2377
- const DataMappingSetter = props => {
2378
- const {
2379
- value,
2380
- initialValue,
2381
- onChange,
2382
- targetFields,
2383
- sourceFields = []
2384
- } = props;
2385
- const currentValue = value ?? initialValue ?? defaultValue$1;
2386
- const [open, setOpen] = React$1.useState(false);
2387
-
2388
- // 获取字段的映射
2389
- const getMapping = React$1.useCallback(targetField => currentValue.mappings.find(m => m.targetField === targetField), [currentValue.mappings]);
2390
-
2391
- // 更新映射
2392
- const updateMapping = React$1.useCallback((targetField, updates) => {
2393
- const existingIndex = currentValue.mappings.findIndex(m => m.targetField === targetField);
2394
- const newMappings = [...currentValue.mappings];
2395
- if (existingIndex >= 0) {
2396
- newMappings[existingIndex] = {
2397
- ...newMappings[existingIndex],
2398
- ...updates
2399
- };
2400
- } else {
2401
- newMappings.push({
2402
- targetField,
2403
- sourceField: updates.sourceField ?? '',
2404
- transform: updates.transform
2405
- });
2406
- }
2407
- onChange({
2408
- mappings: newMappings
2409
- });
2410
- }, [currentValue.mappings, onChange]);
2411
-
2412
- // 清除映射
2413
- const clearMapping = React$1.useCallback(targetField => {
2414
- const newMappings = currentValue.mappings.filter(m => m.targetField !== targetField);
2415
- onChange({
2416
- mappings: newMappings
2417
- });
2418
- }, [currentValue.mappings, onChange]);
2419
-
2420
- // 统计已映射字段数
2421
- const mappedCount = currentValue.mappings.filter(m => m.sourceField).length;
2422
- return /*#__PURE__*/React.createElement(Popover, {
2423
- onClose: () => setOpen(false),
2424
- open: open,
2425
- trigger: /*#__PURE__*/React.createElement("button", {
2426
- "aria-label": "Data mapping",
2427
- className: styles$f.trigger,
2428
- onClick: () => setOpen(true),
2429
- type: "button"
2430
- }, /*#__PURE__*/React.createElement(Settings2, {
2431
- className: styles$f.triggerIcon
2432
- }), /*#__PURE__*/React.createElement("span", {
2433
- className: styles$f.triggerText
2434
- }, "\u5B57\u6BB5\u6620\u5C04 (", mappedCount, "/", targetFields.length, ")")),
2435
- width: 320
2436
- }, /*#__PURE__*/React.createElement("div", {
2437
- className: styles$f.popoverContent
2438
- }, /*#__PURE__*/React.createElement("div", {
2439
- className: styles$f.header
2440
- }, /*#__PURE__*/React.createElement("span", {
2441
- className: styles$f.headerTitle
2442
- }, "\u5B57\u6BB5\u6620\u5C04\u914D\u7F6E"), /*#__PURE__*/React.createElement("span", {
2443
- className: styles$f.headerCount
2444
- }, mappedCount, "/", targetFields.length, " \u5DF2\u6620\u5C04")), /*#__PURE__*/React.createElement("div", {
2445
- className: styles$f.mappingList
2446
- }, targetFields.map(field => {
2447
- const mapping = getMapping(field.name);
2448
- return /*#__PURE__*/React.createElement("div", {
2449
- className: styles$f.mappingItem,
2450
- key: field.name
2451
- }, /*#__PURE__*/React.createElement("div", {
2452
- className: styles$f.mappingHeader
2453
- }, /*#__PURE__*/React.createElement("span", {
2454
- className: styles$f.mappingTitle
2455
- }, field.label, field.required ? /*#__PURE__*/React.createElement("span", {
2456
- className: styles$f.mappingRequired
2457
- }, "*") : null), /*#__PURE__*/React.createElement("span", {
2458
- className: styles$f.mappingType
2459
- }, field.type)), /*#__PURE__*/React.createElement("div", {
2460
- className: styles$f.mappingRow
2461
- }, sourceFields.length > 0 ? /*#__PURE__*/React.createElement("select", {
2462
- className: styles$f.select,
2463
- onChange: e => updateMapping(field.name, {
2464
- sourceField: e.target.value
2465
- }),
2466
- value: mapping?.sourceField ?? ''
2467
- }, /*#__PURE__*/React.createElement("option", {
2468
- value: ""
2469
- }, "\u9009\u62E9\u5B57\u6BB5"), sourceFields.map(sf => /*#__PURE__*/React.createElement("option", {
2470
- key: sf,
2471
- value: sf
2472
- }, sf))) : /*#__PURE__*/React.createElement("input", {
2473
- className: styles$f.input,
2474
- onChange: e => updateMapping(field.name, {
2475
- sourceField: e.target.value
2476
- }),
2477
- placeholder: "\u6E90\u5B57\u6BB5\u8DEF\u5F84",
2478
- type: "text",
2479
- value: mapping?.sourceField ?? ''
2480
- }), /*#__PURE__*/React.createElement(ArrowRight, {
2481
- className: styles$f.arrowIcon
2482
- }), /*#__PURE__*/React.createElement("div", {
2483
- className: styles$f.targetField
2484
- }, field.name)), mapping?.sourceField ? /*#__PURE__*/React.createElement("div", {
2485
- className: styles$f.transformRow
2486
- }, /*#__PURE__*/React.createElement(Code, {
2487
- className: styles$f.transformIcon
2488
- }), /*#__PURE__*/React.createElement("input", {
2489
- className: styles$f.transformInput,
2490
- onChange: e => updateMapping(field.name, {
2491
- transform: e.target.value
2492
- }),
2493
- placeholder: "\u8F6C\u6362\u8868\u8FBE\u5F0F (\u53EF\u9009)",
2494
- type: "text",
2495
- value: mapping?.transform ?? ''
2496
- })) : null, mapping?.sourceField ? /*#__PURE__*/React.createElement("button", {
2497
- className: styles$f.clearButton,
2498
- onClick: () => clearMapping(field.name),
2499
- type: "button"
2500
- }, "\u6E05\u9664\u6620\u5C04") : null);
2501
- })), /*#__PURE__*/React.createElement("div", {
2502
- className: styles$f.helpText
2503
- }, /*#__PURE__*/React.createElement("p", null, "\u2022 \u6E90\u5B57\u6BB5: \u6570\u636E\u6E90\u4E2D\u7684\u5B57\u6BB5\u8DEF\u5F84"), /*#__PURE__*/React.createElement("p", null, "\u2022 \u8F6C\u6362\u8868\u8FBE\u5F0F: \u5982 value * 100, value.toFixed(2)"))));
2504
- };
2505
-
2506
- var styles$e = {"container":"es-container-CUmyq","textarea":"es-textarea-hn1hD","textareaError":"es-textareaError-O2GWs","error":"es-error-wjKcS"};
2507
-
2508
- const JsonSetter = props => {
2509
- const {
2510
- value,
2511
- initialValue,
2512
- placeholder,
2513
- rows = 6,
2514
- onChange
2515
- } = props;
2516
- const [text, setText] = React$1.useState('');
2517
- const [error, setError] = React$1.useState(null);
2518
-
2519
- // Sync value to text
2520
- React$1.useEffect(() => {
2521
- const currentValue = value ?? initialValue;
2522
- if (currentValue !== undefined) {
2523
- try {
2524
- setText(JSON.stringify(currentValue, null, 2));
2525
- setError(null);
2526
- } catch {
2527
- setText(String(currentValue));
2528
- }
2529
- } else {
2530
- setText('');
2531
- }
2532
- }, [value, initialValue]);
2533
- const handleChange = React$1.useCallback(newText => {
2534
- setText(newText);
2535
- if (!newText.trim()) {
2536
- setError(null);
2537
- onChange(undefined);
2538
- return;
2539
- }
2540
- try {
2541
- const parsed = JSON.parse(newText);
2542
- setError(null);
2543
- onChange(parsed);
2544
- } catch (e) {
2545
- setError(e.message);
2546
- }
2547
- }, [onChange]);
2548
- const lineHeight = 1.5;
2549
- const minHeight = rows * lineHeight * 14; // 14px base font size
2550
-
2551
- return /*#__PURE__*/React.createElement("div", {
2552
- className: styles$e.container
2553
- }, /*#__PURE__*/React.createElement("textarea", {
2554
- className: cn(styles$e.textarea, error ? styles$e.textareaError : null),
2555
- onChange: e => handleChange(e.target.value),
2556
- placeholder: placeholder || '输入 JSON 数据',
2557
- spellCheck: false,
2558
- style: {
2559
- minHeight
2560
- },
2561
- value: text
2562
- }), error ? /*#__PURE__*/React.createElement("div", {
2563
- className: styles$e.error
2564
- }, error) : null);
2565
- };
2566
-
2567
- var styles$d = {"container":"es-container-som8X","id":"es-id-VnRzV","title":"es-title-B-JkN"};
2568
-
2569
- const NodeIdSetter = props => {
2570
- const {
2571
- selected
2572
- } = props;
2573
- return /*#__PURE__*/React.createElement("div", {
2574
- className: styles$d.container
2575
- }, /*#__PURE__*/React.createElement("p", {
2576
- className: styles$d.id
2577
- }, selected.id), /*#__PURE__*/React.createElement("p", {
2578
- className: styles$d.title
2579
- }, selected.componentMeta.title));
2580
- };
2581
-
2582
- var styles$c = {"container":"es-container-d6iPo","input":"es-input-hzqco","inputWithSuffix":"es-inputWithSuffix-dzHIR","suffix":"es-suffix--jLoo"};
2583
-
2584
- const NumberSetter = props => {
2585
- const {
2586
- value,
2587
- initialValue,
2588
- placeholder,
2589
- onChange,
2590
- suffix
2591
- } = props;
2592
- return /*#__PURE__*/React.createElement("div", {
2593
- className: styles$c.container
2594
- }, /*#__PURE__*/React.createElement("input", {
2595
- className: cn(styles$c.input, suffix ? styles$c.inputWithSuffix : ''),
2596
- onChange: e => onChange(+e.target.value),
2597
- placeholder: placeholder || '',
2598
- type: "number",
2599
- value: value ?? initialValue ?? ''
2600
- }), suffix ? /*#__PURE__*/React.createElement("span", {
2601
- "aria-label": `Unit: ${suffix}`,
2602
- className: styles$c.suffix
2603
- }, suffix) : null);
2604
- };
2605
-
2606
- var styles$b = {"container":"es-container-RzrEe","field":"es-field-AaNu3","label":"es-label-zWfmB","input":"es-input-fv7wH","customField":"es-customField-hV2yY","customFieldInputs":"es-customFieldInputs-efA5X","keyInput":"es-keyInput-MXoPV","removeButton":"es-removeButton-s7K9l","removeIcon":"es-removeIcon-Ostpz","addButton":"es-addButton-Wgly5","addIcon":"es-addIcon-61nc3"};
2607
-
2608
- const ObjectSetter = props => {
2609
- const {
2610
- value,
2611
- initialValue,
2612
- fields = [],
2613
- allowCustomFields = false,
2614
- addFieldText = '添加字段',
2615
- onChange
2616
- } = props;
2617
- const currentValue = value ?? initialValue ?? {};
2618
- const handleFieldChange = React$1.useCallback((key, newValue) => {
2619
- onChange({
2620
- ...currentValue,
2621
- [key]: newValue
2622
- });
2623
- }, [currentValue, onChange]);
2624
- const handleAddField = React$1.useCallback(() => {
2625
- const newKey = `field_${Date.now()}`;
2626
- onChange({
2627
- ...currentValue,
2628
- [newKey]: ''
2629
- });
2630
- }, [currentValue, onChange]);
2631
- const handleRemoveField = React$1.useCallback(key => {
2632
- const newValue = {
2633
- ...currentValue
2634
- };
2635
- delete newValue[key];
2636
- onChange(newValue);
2637
- }, [currentValue, onChange]);
2638
-
2639
- // Get all keys: defined fields + custom fields
2640
- const definedKeys = fields.map(f => f.key);
2641
- const customKeys = Object.keys(currentValue).filter(k => !definedKeys.includes(k));
2642
- return /*#__PURE__*/React.createElement("div", {
2643
- className: styles$b.container
2644
- }, fields.map(field => /*#__PURE__*/React.createElement("div", {
2645
- className: styles$b.field,
2646
- key: field.key
2647
- }, /*#__PURE__*/React.createElement("span", {
2648
- className: styles$b.label
2649
- }, field.label), /*#__PURE__*/React.createElement("input", {
2650
- className: styles$b.input,
2651
- onChange: e => {
2652
- const val = field.type === 'number' ? +e.target.value : e.target.value;
2653
- handleFieldChange(field.key, val);
2654
- },
2655
- placeholder: field.placeholder,
2656
- type: field.type === 'number' ? 'number' : 'text',
2657
- value: currentValue[field.key] ?? ''
2658
- }))), customKeys.map(key => /*#__PURE__*/React.createElement("div", {
2659
- className: styles$b.customField,
2660
- key: key
2661
- }, /*#__PURE__*/React.createElement("div", {
2662
- className: styles$b.customFieldInputs
2663
- }, /*#__PURE__*/React.createElement("input", {
2664
- className: styles$b.keyInput,
2665
- onChange: e => {
2666
- const newKey = e.target.value;
2667
- if (newKey && newKey !== key) {
2668
- const newValue = {
2669
- ...currentValue
2670
- };
2671
- newValue[newKey] = newValue[key];
2672
- delete newValue[key];
2673
- onChange(newValue);
2674
- }
2675
- },
2676
- placeholder: "\u5B57\u6BB5\u540D",
2677
- type: "text",
2678
- value: key
2679
- }), /*#__PURE__*/React.createElement("input", {
2680
- className: styles$b.input,
2681
- onChange: e => handleFieldChange(key, e.target.value),
2682
- placeholder: "\u503C",
2683
- type: "text",
2684
- value: currentValue[key] ?? ''
2685
- })), /*#__PURE__*/React.createElement("button", {
2686
- className: styles$b.removeButton,
2687
- onClick: () => handleRemoveField(key),
2688
- type: "button"
2689
- }, /*#__PURE__*/React.createElement(Trash2, {
2690
- className: styles$b.removeIcon
2691
- })))), allowCustomFields ? /*#__PURE__*/React.createElement("button", {
2692
- className: styles$b.addButton,
2693
- onClick: handleAddField,
2694
- type: "button"
2695
- }, /*#__PURE__*/React.createElement(Plus, {
2696
- className: styles$b.addIcon
2697
- }), addFieldText) : null);
2698
- };
2699
-
2700
- var styles$a = {"container":"es-container-YWSlG","inputWrapper":"es-inputWrapper-B2wKI","input":"es-input--qUrU","suffix":"es-suffix-2c3Cd"};
2701
-
2702
- const RectSetter = props => {
2703
- const {
2704
- value,
2705
- onChange
2706
- } = props;
2707
- const handleChange = (key, newValue) => {
2708
- onChange({
2709
- ...value,
2710
- [key]: newValue
2711
- });
2712
- };
2713
- return /*#__PURE__*/React.createElement("div", {
2714
- className: styles$a.container
2715
- }, /*#__PURE__*/React.createElement("div", {
2716
- className: styles$a.inputWrapper
2717
- }, /*#__PURE__*/React.createElement("input", {
2718
- className: styles$a.input,
2719
- onChange: e => handleChange('x', Number(e.target.value)),
2720
- type: "number",
2721
- value: formatDecimal(value.x)
2722
- }), /*#__PURE__*/React.createElement("span", {
2723
- "aria-label": "Unit: X",
2724
- className: styles$a.suffix
2725
- }, "X")), /*#__PURE__*/React.createElement("div", {
2726
- className: styles$a.inputWrapper
2727
- }, /*#__PURE__*/React.createElement("input", {
2728
- className: styles$a.input,
2729
- onChange: e => handleChange('y', Number(e.target.value)),
2730
- type: "number",
2731
- value: formatDecimal(value.y)
2732
- }), /*#__PURE__*/React.createElement("span", {
2733
- "aria-label": "Unit: Y",
2734
- className: styles$a.suffix
2735
- }, "Y")), /*#__PURE__*/React.createElement("div", {
2736
- className: styles$a.inputWrapper
2737
- }, /*#__PURE__*/React.createElement("input", {
2738
- className: styles$a.input,
2739
- onChange: e => handleChange('width', Number(e.target.value)),
2740
- type: "number",
2741
- value: formatDecimal(value.width)
2742
- }), /*#__PURE__*/React.createElement("span", {
2743
- "aria-label": "Unit: W",
2744
- className: styles$a.suffix
2745
- }, "W")), /*#__PURE__*/React.createElement("div", {
2746
- className: styles$a.inputWrapper
2747
- }, /*#__PURE__*/React.createElement("input", {
2748
- className: styles$a.input,
2749
- onChange: e => handleChange('height', Number(e.target.value)),
2750
- type: "number",
2751
- value: formatDecimal(value.height)
2752
- }), /*#__PURE__*/React.createElement("span", {
2753
- "aria-label": "Unit: H",
2754
- className: styles$a.suffix
2755
- }, "H")));
2756
- };
2757
- const decimalRegex = /(\.\d{2})\d+$/;
2758
- const formatDecimal = num => num.toString().replace(decimalRegex, '$1');
2759
-
2760
- var styles$9 = {"container":"es-container-lamwH","containerSm":"es-containerSm-mndNj","segment":"es-segment-JmKWl","segmentSelected":"es-segmentSelected-fumXM","segmentDisabled":"es-segmentDisabled-Md5LF"};
2761
-
2762
- /**
2763
- * SegmentedSetter - 分段控制器
2764
- * 用于在多个选项之间切换,类似于 iOS 的 UISegmentedControl
2765
- */
2766
- const SegmentedSetter = props => {
2767
- const {
2768
- value,
2769
- initialValue,
2770
- options = [],
2771
- onChange,
2772
- size = 'md'
2773
- } = props;
2774
- const currentValue = value ?? initialValue ?? options[0]?.value ?? '';
2775
- return /*#__PURE__*/React.createElement("div", {
2776
- className: cn(styles$9.container, size === 'sm' ? styles$9.containerSm : '')
2777
- }, options.map(option => /*#__PURE__*/React.createElement("button", {
2778
- className: cn(styles$9.segment, currentValue === option.value ? styles$9.segmentSelected : '', option.disabled === true ? styles$9.segmentDisabled : ''),
2779
- disabled: option.disabled,
2780
- key: option.value,
2781
- onClick: () => !option.disabled && onChange(option.value),
2782
- type: "button"
2783
- }, option.label)));
2784
- };
2785
-
2786
- var styles$8 = {"trigger":"es-trigger-YRz9p","triggerValue":"es-triggerValue-k-g2-","placeholder":"es-placeholder-F8-XP","chevron":"es-chevron-UbZv-","chevronOpen":"es-chevronOpen-Yui-r","dropdown":"es-dropdown-l2sra","option":"es-option-cv-7C","optionSelected":"es-optionSelected-K4e5h","optionDisabled":"es-optionDisabled-72jrC"};
2787
-
2788
- const SelectSetter = props => {
2789
- const {
2790
- value,
2791
- initialValue,
2792
- options = [],
2793
- placeholder,
2794
- onChange
2795
- } = props;
2796
- const [open, setOpen] = React$1.useState(false);
2797
- const currentValue = value ?? initialValue ?? '';
2798
- const selectedOption = options.find(opt => opt.value === currentValue);
2799
- const handleSelect = (optionValue, disabled) => {
2800
- if (disabled) {
2801
- return;
2802
- }
2803
- onChange(optionValue);
2804
- setOpen(false);
2805
- };
2806
- return /*#__PURE__*/React.createElement(Popover, {
2807
- onClose: () => setOpen(false),
2808
- open: open,
2809
- trigger: /*#__PURE__*/React.createElement("button", {
2810
- "aria-expanded": open,
2811
- "aria-haspopup": "listbox",
2812
- className: styles$8.trigger,
2813
- onClick: () => setOpen(true),
2814
- type: "button"
2815
- }, /*#__PURE__*/React.createElement("span", {
2816
- className: cn(styles$8.triggerValue, selectedOption ? '' : styles$8.placeholder)
2817
- }, selectedOption?.label || placeholder || '请选择'), /*#__PURE__*/React.createElement(ChevronDown, {
2818
- className: cn(styles$8.chevron, open ? styles$8.chevronOpen : '')
2819
- }))
2820
- }, /*#__PURE__*/React.createElement("div", {
2821
- className: styles$8.dropdown,
2822
- role: "listbox"
2823
- }, options.map(option => /*#__PURE__*/React.createElement("button", {
2824
- "aria-selected": option.value === currentValue,
2825
- className: cn(styles$8.option, option.value === currentValue ? styles$8.optionSelected : '', option.disabled === true ? styles$8.optionDisabled : ''),
2826
- key: option.value,
2827
- onClick: () => handleSelect(option.value, option.disabled),
2828
- role: "option",
2829
- type: "button"
2830
- }, option.label))));
2831
- };
2832
-
2833
- var styles$7 = {"container":"es-container-PG1Uy","slider":"es-slider-pypb6","track":"es-track-X2NtH","range":"es-range-AVV8x","thumb":"es-thumb-YMQR-","value":"es-value-JiWPV"};
2834
-
2835
- const SliderSetter = props => {
2836
- const {
2837
- value,
2838
- initialValue,
2839
- min = 0,
2840
- max = 100,
2841
- step = 1,
2842
- showValue = true,
2843
- suffix,
2844
- onChange
2845
- } = props;
2846
- const currentValue = value ?? initialValue ?? min;
2847
- const trackRef = React$1.useRef(null);
2848
- const percentage = (currentValue - min) / (max - min) * 100;
2849
- const handleChange = React$1.useCallback(clientX => {
2850
- if (!trackRef.current) {
2851
- return;
2852
- }
2853
- const rect = trackRef.current.getBoundingClientRect();
2854
- const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
2855
- const rawValue = min + percent * (max - min);
2856
- const steppedValue = Math.round(rawValue / step) * step;
2857
- const clampedValue = Math.max(min, Math.min(max, steppedValue));
2858
- onChange(clampedValue);
2859
- }, [min, max, step, onChange]);
2860
- const handleMouseDown = event => {
2861
- handleChange(event.clientX);
2862
- const handleMouseMove = moveEvent => {
2863
- handleChange(moveEvent.clientX);
2864
- };
2865
- const handleMouseUp = () => {
2866
- document.removeEventListener('mousemove', handleMouseMove);
2867
- document.removeEventListener('mouseup', handleMouseUp);
2868
- };
2869
- document.addEventListener('mousemove', handleMouseMove);
2870
- document.addEventListener('mouseup', handleMouseUp);
2871
- };
2872
- return /*#__PURE__*/React.createElement("div", {
2873
- className: styles$7.container
2874
- }, /*#__PURE__*/React.createElement("div", {
2875
- className: styles$7.slider
2876
- }, /*#__PURE__*/React.createElement("div", {
2877
- className: styles$7.track,
2878
- onMouseDown: handleMouseDown,
2879
- ref: trackRef,
2880
- role: "presentation"
2881
- }, /*#__PURE__*/React.createElement("div", {
2882
- className: styles$7.range,
2883
- style: {
2884
- width: `${percentage}%`
2885
- }
2886
- }), /*#__PURE__*/React.createElement("div", {
2887
- "aria-valuemax": max,
2888
- "aria-valuemin": min,
2889
- "aria-valuenow": currentValue,
2890
- className: styles$7.thumb,
2891
- role: "slider",
2892
- style: {
2893
- left: `${percentage}%`
2894
- },
2895
- tabIndex: 0
2896
- }))), showValue === true ? /*#__PURE__*/React.createElement("span", {
2897
- className: styles$7.value
2898
- }, currentValue, suffix) : null);
2899
- };
2900
-
2901
- var styles$6 = {"container":"es-container-XqQza","boxModel":"es-boxModel-8RFjI","inputTop":"es-inputTop-bqsmI","inputRight":"es-inputRight-TV3E-","inputBottom":"es-inputBottom-dP-wA","inputLeft":"es-inputLeft-sygc3","spacingInput":"es-spacingInput-KAWdK","linkButton":"es-linkButton-v1n0k","linkButtonActive":"es-linkButtonActive-Vge1n","linkIcon":"es-linkIcon-K0j9e","presets":"es-presets-CPVVc","presetButton":"es-presetButton-vUc7S","modeLabel":"es-modeLabel-Vh1Cf"};
2902
-
2903
- const defaultValue = {
2904
- top: 0,
2905
- right: 0,
2906
- bottom: 0,
2907
- left: 0
2908
- };
2909
- const presetValues = [0, 4, 8, 12, 16, 24, 32];
2910
- const SpacingSetter = props => {
2911
- const {
2912
- value,
2913
- initialValue,
2914
- onChange,
2915
- mode = 'padding',
2916
- linked: initialLinked = false,
2917
- min = 0,
2918
- max = 100
2919
- } = props;
2920
- const currentValue = value ?? initialValue ?? defaultValue;
2921
- const [isLinked, setIsLinked] = React$1.useState(initialLinked);
2922
- const updateSpacing = React$1.useCallback(updates => {
2923
- if (isLinked) {
2924
- const newValue = Object.values(updates)[0];
2925
- onChange({
2926
- top: newValue,
2927
- right: newValue,
2928
- bottom: newValue,
2929
- left: newValue
2930
- });
2931
- } else {
2932
- onChange({
2933
- ...currentValue,
2934
- ...updates
2935
- });
2936
- }
2937
- }, [currentValue, isLinked, onChange]);
2938
- const handlePresetClick = React$1.useCallback(presetValue => {
2939
- onChange({
2940
- top: presetValue,
2941
- right: presetValue,
2942
- bottom: presetValue,
2943
- left: presetValue
2944
- });
2945
- }, [onChange]);
2946
- const toggleLinked = React$1.useCallback(() => {
2947
- setIsLinked(prev => !prev);
2948
- }, []);
2949
- return /*#__PURE__*/React.createElement("div", {
2950
- className: styles$6.container
2951
- }, /*#__PURE__*/React.createElement("div", {
2952
- className: styles$6.boxModel
2953
- }, /*#__PURE__*/React.createElement("div", {
2954
- className: styles$6.inputTop
2955
- }, /*#__PURE__*/React.createElement("input", {
2956
- className: styles$6.spacingInput,
2957
- max: max,
2958
- min: min,
2959
- onChange: e => updateSpacing({
2960
- top: Number(e.target.value)
2961
- }),
2962
- type: "number",
2963
- value: currentValue.top
2964
- })), /*#__PURE__*/React.createElement("div", {
2965
- className: styles$6.inputRight
2966
- }, /*#__PURE__*/React.createElement("input", {
2967
- className: styles$6.spacingInput,
2968
- max: max,
2969
- min: min,
2970
- onChange: e => updateSpacing({
2971
- right: Number(e.target.value)
2972
- }),
2973
- type: "number",
2974
- value: currentValue.right
2975
- })), /*#__PURE__*/React.createElement("div", {
2976
- className: styles$6.inputBottom
2977
- }, /*#__PURE__*/React.createElement("input", {
2978
- className: styles$6.spacingInput,
2979
- max: max,
2980
- min: min,
2981
- onChange: e => updateSpacing({
2982
- bottom: Number(e.target.value)
2983
- }),
2984
- type: "number",
2985
- value: currentValue.bottom
2986
- })), /*#__PURE__*/React.createElement("div", {
2987
- className: styles$6.inputLeft
2988
- }, /*#__PURE__*/React.createElement("input", {
2989
- className: styles$6.spacingInput,
2990
- max: max,
2991
- min: min,
2992
- onChange: e => updateSpacing({
2993
- left: Number(e.target.value)
2994
- }),
2995
- type: "number",
2996
- value: currentValue.left
2997
- })), /*#__PURE__*/React.createElement("button", {
2998
- "aria-label": isLinked ? 'Unlink values' : 'Link values',
2999
- className: cn(styles$6.linkButton, isLinked ? styles$6.linkButtonActive : ''),
3000
- onClick: toggleLinked,
3001
- type: "button"
3002
- }, isLinked ? /*#__PURE__*/React.createElement(Link, {
3003
- className: styles$6.linkIcon
3004
- }) : /*#__PURE__*/React.createElement(Unlink, {
3005
- className: styles$6.linkIcon
3006
- }))), /*#__PURE__*/React.createElement("div", {
3007
- className: styles$6.presets
3008
- }, presetValues.map(presetValue => /*#__PURE__*/React.createElement("button", {
3009
- className: styles$6.presetButton,
3010
- key: presetValue,
3011
- onClick: () => handlePresetClick(presetValue),
3012
- type: "button"
3013
- }, presetValue))), /*#__PURE__*/React.createElement("div", {
3014
- className: styles$6.modeLabel
3015
- }, mode === 'padding' ? '内边距' : '外边距', " (px)"));
3016
- };
3017
-
3018
- var styles$5 = {"container":"es-container-weN0F","input":"es-input-C8N67","inputWithSuffix":"es-inputWithSuffix-tdJcI","suffix":"es-suffix-HGRiQ"};
3019
-
3020
- const StringSetter = props => {
3021
- const {
3022
- value,
3023
- initialValue,
3024
- placeholder,
3025
- onChange,
3026
- suffix
3027
- } = props;
3028
- return /*#__PURE__*/React.createElement("div", {
3029
- className: styles$5.container
3030
- }, /*#__PURE__*/React.createElement("input", {
3031
- className: cn(styles$5.input, suffix ? styles$5.inputWithSuffix : ''),
3032
- onChange: e => onChange(e.target.value),
3033
- placeholder: placeholder || '',
3034
- type: "text",
3035
- value: value || initialValue || ''
3036
- }), suffix ? /*#__PURE__*/React.createElement("span", {
3037
- "aria-label": `Unit: ${suffix}`,
3038
- className: styles$5.suffix
3039
- }, suffix) : null);
3040
- };
3041
-
3042
- var styles$4 = {"switch":"es-switch-2DV6T","switchChecked":"es-switchChecked-eI65V","switchThumb":"es-switchThumb-GDlBx","switchThumbChecked":"es-switchThumbChecked-uA5kV","checkboxWrapper":"es-checkboxWrapper-l-KtW","checkboxInput":"es-checkboxInput-4Z9KK","checkbox":"es-checkbox-G1P36","checkboxChecked":"es-checkboxChecked-7XJoC","checkIcon":"es-checkIcon-3KIBH","segmented":"es-segmented-IaxAM","segmentedButton":"es-segmentedButton-mbZ5z","segmentedButtonSelected":"es-segmentedButtonSelected-u4m2T"};
3043
-
3044
- /**
3045
- * SwitchSetter - 布尔值设置器
3046
- * 提供多种 UI 模式:switch(开关)、checkbox(复选框)、segmented(分段)
3047
- */
3048
- const SwitchSetter = props => {
3049
- const {
3050
- value,
3051
- initialValue,
3052
- onChange,
3053
- mode = 'switch',
3054
- trueLabel = '是',
3055
- falseLabel = '否'
3056
- } = props;
3057
- const currentValue = value ?? initialValue ?? false;
3058
-
3059
- // 分段模式
3060
- if (mode === 'segmented') {
3061
- return /*#__PURE__*/React.createElement("div", {
3062
- className: styles$4.segmented
3063
- }, /*#__PURE__*/React.createElement("button", {
3064
- className: cn(styles$4.segmentedButton, currentValue === false ? styles$4.segmentedButtonSelected : ''),
3065
- onClick: () => onChange(false),
3066
- type: "button"
3067
- }, falseLabel), /*#__PURE__*/React.createElement("button", {
3068
- className: cn(styles$4.segmentedButton, currentValue === true ? styles$4.segmentedButtonSelected : ''),
3069
- onClick: () => onChange(true),
3070
- type: "button"
3071
- }, trueLabel));
3072
- }
3073
-
3074
- // 复选框模式
3075
- if (mode === 'checkbox') {
3076
- return /*#__PURE__*/React.createElement("label", {
3077
- className: styles$4.checkboxWrapper
3078
- }, /*#__PURE__*/React.createElement("input", {
3079
- checked: currentValue,
3080
- className: styles$4.checkboxInput,
3081
- onChange: e => onChange(e.target.checked),
3082
- type: "checkbox"
3083
- }), /*#__PURE__*/React.createElement("span", {
3084
- className: cn(styles$4.checkbox, currentValue ? styles$4.checkboxChecked : '')
3085
- }, currentValue ? /*#__PURE__*/React.createElement(Check, {
3086
- className: styles$4.checkIcon
3087
- }) : null));
3088
- }
3089
-
3090
- // 开关模式(默认)
3091
- return /*#__PURE__*/React.createElement("button", {
3092
- "aria-checked": currentValue,
3093
- className: cn(styles$4.switch, currentValue ? styles$4.switchChecked : ''),
3094
- onClick: () => onChange(!currentValue),
3095
- role: "switch",
3096
- type: "button"
3097
- }, /*#__PURE__*/React.createElement("span", {
3098
- className: cn(styles$4.switchThumb, currentValue ? styles$4.switchThumbChecked : '')
3099
- }));
3100
- };
3101
-
3102
- var styles$3 = {"container":"es-container-ftwPX","textarea":"es-textarea-sJPy9","counter":"es-counter-02NEu"};
3103
-
3104
- const TextAreaSetter = props => {
3105
- const {
3106
- value,
3107
- initialValue,
3108
- placeholder,
3109
- rows = 3,
3110
- maxLength,
3111
- onChange
3112
- } = props;
3113
- return /*#__PURE__*/React.createElement("div", {
3114
- className: styles$3.container
3115
- }, /*#__PURE__*/React.createElement("textarea", {
3116
- className: styles$3.textarea,
3117
- maxLength: maxLength,
3118
- onChange: e => onChange(e.target.value),
3119
- placeholder: placeholder || '',
3120
- rows: rows,
3121
- value: value ?? initialValue ?? ''
3122
- }), maxLength ? /*#__PURE__*/React.createElement("div", {
3123
- className: styles$3.counter
3124
- }, (value ?? initialValue ?? '').length, "/", maxLength) : null);
3125
- };
3126
-
3127
- var styles$2 = {"container":"es-container-EDh0-","row":"es-row-MOm-T","label":"es-label-1o-jT","hiddenInput":"es-hiddenInput-03Dx-","uploadArea":"es-uploadArea-1HYbh","uploadIcon":"es-uploadIcon-Ck7gF","clearButton":"es-clearButton-N-9cs","clearIcon":"es-clearIcon-LHlF6","fileInfo":"es-fileInfo-71Jtf","fileName":"es-fileName-B2hHy","fileSize":"es-fileSize-pINcz","error":"es-error-A8MID"};
3128
-
3129
- const UploadSetter = props => {
3130
- const {
3131
- value,
3132
- onChange,
3133
- accept = '.jpg,.jpeg,.png,.gif',
3134
- maxSize = 10 * 1024 * 1024
3135
- } = props;
3136
- const [error, setError] = React$1.useState('');
3137
- const inputRef = React$1.useRef(null);
3138
- const handleFileChange = async e => {
3139
- const file = e.target.files?.[0];
3140
- setError('');
3141
- if (!file) {
3142
- onChange(null);
3143
- return;
3144
- }
3145
- const ext = `.${file.name.split('.').pop()?.toLowerCase()}`;
3146
- if (!accept.includes(ext)) {
3147
- setError(`仅支持 ${accept} 格式文件`);
3148
- onChange(null);
3149
- return;
3150
- }
3151
- if (file.size > maxSize) {
3152
- setError(`文件大小不能超过 ${maxSize / 1024 / 1024}MB`);
3153
- onChange(null);
3154
- return;
3155
- }
3156
- try {
3157
- const [base64, dimensions] = await Promise.all([new Promise((resolve, reject) => {
3158
- const reader = new FileReader();
3159
- reader.onload = () => resolve(reader.result);
3160
- reader.onerror = err => reject(err);
3161
- reader.readAsDataURL(file);
3162
- }), new Promise((resolve, reject) => {
3163
- const img = new Image();
3164
- img.onload = () => resolve({
3165
- width: img.naturalWidth,
3166
- height: img.naturalHeight
3167
- });
3168
- img.onerror = reject;
3169
- img.src = URL.createObjectURL(file);
3170
- })]);
3171
- onChange({
3172
- raw: {
3173
- name: file.name,
3174
- size: file.size,
3175
- type: file.type,
3176
- width: dimensions.width,
3177
- height: dimensions.height
3178
- },
3179
- base64
3180
- });
3181
- } catch (_) {
3182
- setError('文件读取失败,请重试');
3183
- onChange(null);
3184
- }
3185
- };
3186
- const handleClear = () => {
3187
- onChange(null);
3188
- if (inputRef.current) {
3189
- inputRef.current.value = '';
3190
- }
3191
- };
3192
- return /*#__PURE__*/React.createElement("div", {
3193
- className: styles$2.container
3194
- }, /*#__PURE__*/React.createElement("div", {
3195
- className: styles$2.row
3196
- }, /*#__PURE__*/React.createElement("label", {
3197
- className: styles$2.label
3198
- }, /*#__PURE__*/React.createElement("input", {
3199
- accept: accept,
3200
- className: styles$2.hiddenInput,
3201
- onChange: handleFileChange,
3202
- ref: inputRef,
3203
- type: "file"
3204
- }), /*#__PURE__*/React.createElement("div", {
3205
- className: styles$2.uploadArea
3206
- }, /*#__PURE__*/React.createElement(Upload, {
3207
- className: styles$2.uploadIcon
3208
- }), /*#__PURE__*/React.createElement("span", null, value ? '更换文件' : '点击上传'))), value ? /*#__PURE__*/React.createElement("button", {
3209
- "aria-label": "\u6E05\u9664\u6587\u4EF6",
3210
- className: styles$2.clearButton,
3211
- onClick: handleClear,
3212
- type: "button"
3213
- }, /*#__PURE__*/React.createElement(X, {
3214
- className: styles$2.clearIcon
3215
- })) : null), value ? /*#__PURE__*/React.createElement("div", {
3216
- className: styles$2.fileInfo
3217
- }, /*#__PURE__*/React.createElement("span", {
3218
- className: styles$2.fileName
3219
- }, value.raw?.name), /*#__PURE__*/React.createElement("span", {
3220
- className: styles$2.fileSize
3221
- }, (value.raw?.size / 1024).toFixed(1), "KB")) : null, error ? /*#__PURE__*/React.createElement("p", {
3222
- className: styles$2.error,
3223
- role: "alert"
3224
- }, error) : null);
3225
- };
3226
-
3227
- var styles$1 = {"container":"es-container-gjha7","header":"es-header-iE--w","title":"es-title-qTdCp","toggleButton":"es-toggleButton-g6dI2","toggleIcon":"es-toggleIcon-cjnM4","content":"es-content-GYYgk","contentHidden":"es-contentHidden-WAYSW","srOnly":"es-srOnly-EI1Tc"};
3228
-
3229
- const CollapseSetter = props => {
3230
- const {
3231
- field,
3232
- children,
3233
- initialValue,
3234
- icon = true
3235
- } = props;
3236
- const [isOpen, setIsOpen] = React$1.useState(initialValue ?? true);
3237
- return /*#__PURE__*/React.createElement("div", {
3238
- className: styles$1.container
3239
- }, /*#__PURE__*/React.createElement("div", {
3240
- className: styles$1.header
3241
- }, /*#__PURE__*/React.createElement("h4", {
3242
- className: styles$1.title
3243
- }, field.title), icon ? /*#__PURE__*/React.createElement("button", {
3244
- "aria-expanded": isOpen,
3245
- className: styles$1.toggleButton,
3246
- onClick: () => setIsOpen(!isOpen),
3247
- type: "button"
3248
- }, /*#__PURE__*/React.createElement(ChevronsUpDown, {
3249
- className: styles$1.toggleIcon
3250
- }), /*#__PURE__*/React.createElement("span", {
3251
- className: styles$1.srOnly
3252
- }, "Toggle")) : null), /*#__PURE__*/React.createElement("div", {
3253
- className: cn(styles$1.content, isOpen === false ? styles$1.contentHidden : '')
3254
- }, children));
3255
- };
3256
-
3257
- var styles = {"container":"es-container-4LWRO","tabsList":"es-tabsList-L72im","tabTrigger":"es-tabTrigger-u3S3S","tabTriggerActive":"es-tabTriggerActive-xCpU6","tabContent":"es-tabContent-Pj2Us","tabContentActive":"es-tabContentActive-NJtXh"};
3258
-
3259
- const TabSetter = props => {
3260
- const {
3261
- tabs,
3262
- initialValue,
3263
- children
3264
- } = props;
3265
- const tabsList = React$1.useMemo(() => {
3266
- if (tabs) {
3267
- return tabs;
3268
- }
3269
- if (Array.isArray(children) && children.length > 0) {
3270
- return children.map(child => ({
3271
- label: child.props.field.config.title,
3272
- value: child.props.field.config.key
3273
- }));
3274
- }
3275
- throw new Error('TabSetter: children or tabs must be an array');
3276
- }, [tabs, children]);
3277
- const firstTabValue = React$1.useMemo(() => tabsList[0]?.value, [tabsList]);
3278
- const [activeTab, setActiveTab] = React$1.useState(initialValue ?? firstTabValue);
3279
- return /*#__PURE__*/React$1.createElement("div", {
3280
- className: styles.container
3281
- }, /*#__PURE__*/React$1.createElement("div", {
3282
- className: styles.tabsList,
3283
- role: "tablist",
3284
- style: {
3285
- gridTemplateColumns: `repeat(${tabsList.length}, minmax(0, 1fr))`
3286
- }
3287
- }, tabsList.map(tab => /*#__PURE__*/React$1.createElement("button", {
3288
- "aria-selected": activeTab === tab.value,
3289
- className: cn(styles.tabTrigger, activeTab === tab.value ? styles.tabTriggerActive : ''),
3290
- key: tab.value,
3291
- onClick: () => setActiveTab(tab.value),
3292
- role: "tab",
3293
- type: "button"
3294
- }, tab.label))), Array.isArray(children) ? children.map(child => /*#__PURE__*/React$1.createElement("div", {
3295
- className: cn(styles.tabContent, activeTab === child.props.field.config.key ? styles.tabContentActive : ''),
3296
- key: child.props.field.config.key,
3297
- role: "tabpanel"
3298
- }, child)) : null);
3299
- };
3300
-
3301
- const setterMap = {
3302
- ColorSetter,
3303
- NodeIdSetter,
3304
- NumberSetter,
3305
- RectSetter,
3306
- StringSetter,
3307
- SwitchSetter,
3308
- UploadSetter,
3309
- SegmentedSetter,
3310
- CollapseSetter,
3311
- TabSetter,
3312
- SpacingSetter,
3313
- AlignSetter,
3314
- DataBindingSetter,
3315
- DataMappingSetter,
3316
- SelectSetter,
3317
- SliderSetter,
3318
- TextAreaSetter,
3319
- ArraySetter,
3320
- JsonSetter,
3321
- ObjectSetter
3322
- };
3323
-
3324
- exports.AlignSetter = AlignSetter;
3325
- exports.ArraySetter = ArraySetter;
3326
- exports.CollapseSetter = CollapseSetter;
3327
- exports.ColorSetter = ColorSetter;
3328
- exports.DataBindingSetter = DataBindingSetter;
3329
- exports.DataMappingSetter = DataMappingSetter;
3330
- exports.JsonSetter = JsonSetter;
3331
- exports.NodeIdSetter = NodeIdSetter;
3332
- exports.NumberSetter = NumberSetter;
3333
- exports.ObjectSetter = ObjectSetter;
3334
- exports.Popover = Popover;
3335
- exports.RectSetter = RectSetter;
3336
- exports.SegmentedSetter = SegmentedSetter;
3337
- exports.SelectSetter = SelectSetter;
3338
- exports.SliderSetter = SliderSetter;
3339
- exports.SpacingSetter = SpacingSetter;
3340
- exports.StringSetter = StringSetter;
3341
- exports.SwitchSetter = SwitchSetter;
3342
- exports.TabSetter = TabSetter;
3343
- exports.TextAreaSetter = TextAreaSetter;
3344
- exports.UploadSetter = UploadSetter;
3345
- exports.default = setterMap;
3346
- exports.setterMap = setterMap;
3347
- //# sourceMappingURL=index.cjs.map