@seed-ship/mcp-ui-solid 2.15.0 → 3.0.1
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/README.md +5 -4
- package/dist/components/FormFieldRenderer.cjs +272 -121
- package/dist/components/FormFieldRenderer.cjs.map +1 -1
- package/dist/components/FormFieldRenderer.d.ts.map +1 -1
- package/dist/components/FormFieldRenderer.js +272 -121
- package/dist/components/FormFieldRenderer.js.map +1 -1
- package/dist/components/ScratchpadPanel.cjs +5 -5
- package/dist/components/ScratchpadPanel.cjs.map +1 -1
- package/dist/components/ScratchpadPanel.js +5 -5
- package/dist/components/ScratchpadPanel.js.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types.d.cts +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/FormFieldRenderer.tsx +110 -0
- package/src/components/ScratchpadPanel.tsx +4 -4
- package/src/types/index.ts +4 -0
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { delegateEvents, createComponent, getNextElement, template, getNextMarker, insert, effect, setAttribute, className, memo, setProperty, runHydrationEvents } from "solid-js/web";
|
|
2
2
|
import { Show, Switch, Match, For, createSignal, onCleanup } from "solid-js";
|
|
3
3
|
import { useConditionalField } from "../hooks/useConditionalField.js";
|
|
4
|
-
var _tmpl$ = /* @__PURE__ */ template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$2 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported`), _tmpl$3 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?`), _tmpl$4 = /* @__PURE__ */ template(`<label><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<input>`), _tmpl$6 = /* @__PURE__ */ template(`<input type=number>`), _tmpl$7 = /* @__PURE__ */ template(`<input type=date>`), _tmpl$8 = /* @__PURE__ */ template(`<textarea>`), _tmpl$9 = /* @__PURE__ */ template(`<option value disabled>`), _tmpl$0 = /* @__PURE__ */ template(`<select><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<div class=space-y-2 role=radiogroup>`), _tmpl$11 = /* @__PURE__ */ template(`<input type=text>`), _tmpl$12 = /* @__PURE__ */ template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$
|
|
4
|
+
var _tmpl$ = /* @__PURE__ */ template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$2 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 px-1.5 py-0.5 rounded">Not supported`), _tmpl$3 = /* @__PURE__ */ template(`<span class="ml-2 text-[10px] font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 px-1.5 py-0.5 rounded">?`), _tmpl$4 = /* @__PURE__ */ template(`<label><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$5 = /* @__PURE__ */ template(`<input>`), _tmpl$6 = /* @__PURE__ */ template(`<input type=number>`), _tmpl$7 = /* @__PURE__ */ template(`<input type=date>`), _tmpl$8 = /* @__PURE__ */ template(`<textarea>`), _tmpl$9 = /* @__PURE__ */ template(`<option value disabled>`), _tmpl$0 = /* @__PURE__ */ template(`<select><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"><span class="text-sm text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<div class=space-y-2 role=radiogroup>`), _tmpl$11 = /* @__PURE__ */ template(`<div class="flex items-center gap-3"><input type=range class="flex-1 h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-600"><span class="text-sm font-mono text-gray-700 dark:text-gray-300 min-w-[3rem] text-right">`), _tmpl$12 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><button type=button role=switch><span></span></button><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$13 = /* @__PURE__ */ template(`<fieldset class="border border-gray-200 dark:border-gray-600 rounded-lg p-3"><legend class="text-xs font-medium text-gray-500 dark:text-gray-400 px-1"></legend><p class="text-xs text-gray-400">`), _tmpl$14 = /* @__PURE__ */ template(`<input type=text>`), _tmpl$15 = /* @__PURE__ */ template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$16 = /* @__PURE__ */ template(`<p>`), _tmpl$17 = /* @__PURE__ */ template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$18 = /* @__PURE__ */ template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$19 = /* @__PURE__ */ template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$20 = /* @__PURE__ */ template(`<option>`), _tmpl$21 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 cursor-pointer"><input type=radio class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$22 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$23 = /* @__PURE__ */ template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600 flex-shrink-0"><input type=text placeholder=Filter... class="w-full px-2 py-1 text-sm border border-gray-200 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:border-blue-400 outline-none"autofocus>`), _tmpl$24 = /* @__PURE__ */ template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$25 = /* @__PURE__ */ template(`<div class="absolute z-50 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"style=max-height:320px;display:flex;flex-direction:column><!$><!/><div style=overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch><!$><!/><!$><!/>`), _tmpl$26 = /* @__PURE__ */ template(`<div class=relative><!$><!/><button type=button><span></span><svg class="w-4 h-4 text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M19 9l-7 7-7-7"></path></svg></button><!$><!/>`), _tmpl$27 = /* @__PURE__ */ template(`<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded-full"><!$><!/><button type=button class="hover:text-blue-900 dark:hover:text-blue-100">×`), _tmpl$28 = /* @__PURE__ */ template(`<label class="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer text-sm"><input type=checkbox class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600"><span class="text-gray-900 dark:text-white">`), _tmpl$29 = /* @__PURE__ */ template(`<div class="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg max-h-72 overflow-y-auto">`), _tmpl$30 = /* @__PURE__ */ template(`<div class=relative><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$31 = /* @__PURE__ */ template(`<span class="ml-2 text-xs">✓`), _tmpl$32 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$33 = /* @__PURE__ */ template(`<div><!$><!/><input type=text>`);
|
|
5
5
|
const FormFieldRenderer = (props) => {
|
|
6
6
|
const {
|
|
7
7
|
isVisible
|
|
@@ -11,6 +11,7 @@ const FormFieldRenderer = (props) => {
|
|
|
11
11
|
});
|
|
12
12
|
const status = () => props.field.fieldStatus || "optional";
|
|
13
13
|
const isUnsupported = () => status() === "unsupported";
|
|
14
|
+
const isFieldDisabled = () => props.disabled || isUnsupported();
|
|
14
15
|
const baseInputClass = () => `
|
|
15
16
|
w-full px-3 py-2 border rounded-md
|
|
16
17
|
focus:ring-2 focus:ring-blue-500 focus:border-blue-500
|
|
@@ -26,7 +27,7 @@ const FormFieldRenderer = (props) => {
|
|
|
26
27
|
return isVisible();
|
|
27
28
|
},
|
|
28
29
|
get children() {
|
|
29
|
-
var _el$ = getNextElement(_tmpl$
|
|
30
|
+
var _el$ = getNextElement(_tmpl$19), _el$49 = _el$.firstChild, [_el$50, _co$0] = getNextMarker(_el$49.nextSibling), _el$51 = _el$50.nextSibling, [_el$52, _co$1] = getNextMarker(_el$51.nextSibling), _el$53 = _el$52.nextSibling, [_el$54, _co$10] = getNextMarker(_el$53.nextSibling), _el$55 = _el$54.nextSibling, [_el$56, _co$11] = getNextMarker(_el$55.nextSibling), _el$57 = _el$56.nextSibling, [_el$58, _co$12] = getNextMarker(_el$57.nextSibling);
|
|
30
31
|
insert(_el$, createComponent(Show, {
|
|
31
32
|
get when() {
|
|
32
33
|
return memo(() => !!props.field.label)() && props.field.type !== "checkbox";
|
|
@@ -69,7 +70,7 @@ const FormFieldRenderer = (props) => {
|
|
|
69
70
|
});
|
|
70
71
|
return _el$2;
|
|
71
72
|
}
|
|
72
|
-
}), _el$
|
|
73
|
+
}), _el$50, _co$0);
|
|
73
74
|
insert(_el$, createComponent(Switch, {
|
|
74
75
|
get children() {
|
|
75
76
|
return [createComponent(Match, {
|
|
@@ -244,11 +245,11 @@ const FormFieldRenderer = (props) => {
|
|
|
244
245
|
return props.field.options;
|
|
245
246
|
},
|
|
246
247
|
children: (option) => (() => {
|
|
247
|
-
var _el$
|
|
248
|
-
insert(_el$
|
|
249
|
-
effect(() => setProperty(_el$
|
|
250
|
-
effect(() => setProperty(_el$
|
|
251
|
-
return _el$
|
|
248
|
+
var _el$59 = getNextElement(_tmpl$20);
|
|
249
|
+
insert(_el$59, () => option.label);
|
|
250
|
+
effect(() => setProperty(_el$59, "disabled", option.disabled));
|
|
251
|
+
effect(() => setProperty(_el$59, "value", option.value));
|
|
252
|
+
return _el$59;
|
|
252
253
|
})()
|
|
253
254
|
}), _el$21, _co$6);
|
|
254
255
|
effect((_p$) => {
|
|
@@ -364,23 +365,23 @@ const FormFieldRenderer = (props) => {
|
|
|
364
365
|
return props.field.options;
|
|
365
366
|
},
|
|
366
367
|
children: (option, index) => (() => {
|
|
367
|
-
var _el$
|
|
368
|
-
_el$
|
|
369
|
-
insert(_el$
|
|
368
|
+
var _el$60 = getNextElement(_tmpl$21), _el$61 = _el$60.firstChild, _el$62 = _el$61.nextSibling;
|
|
369
|
+
_el$61.addEventListener("change", () => props.onChange(option.value));
|
|
370
|
+
insert(_el$62, () => option.label);
|
|
370
371
|
effect((_p$) => {
|
|
371
|
-
var _v$
|
|
372
|
-
_v$
|
|
373
|
-
_v$
|
|
374
|
-
_v$
|
|
372
|
+
var _v$74 = props.field.name, _v$75 = `${fieldId()}-${index()}`, _v$76 = props.disabled || option.disabled;
|
|
373
|
+
_v$74 !== _p$.e && setAttribute(_el$61, "name", _p$.e = _v$74);
|
|
374
|
+
_v$75 !== _p$.t && setAttribute(_el$61, "id", _p$.t = _v$75);
|
|
375
|
+
_v$76 !== _p$.a && setProperty(_el$61, "disabled", _p$.a = _v$76);
|
|
375
376
|
return _p$;
|
|
376
377
|
}, {
|
|
377
378
|
e: void 0,
|
|
378
379
|
t: void 0,
|
|
379
380
|
a: void 0
|
|
380
381
|
});
|
|
381
|
-
effect(() => setProperty(_el$
|
|
382
|
-
effect(() => setProperty(_el$
|
|
383
|
-
return _el$
|
|
382
|
+
effect(() => setProperty(_el$61, "value", option.value));
|
|
383
|
+
effect(() => setProperty(_el$61, "checked", props.value === option.value));
|
|
384
|
+
return _el$60;
|
|
384
385
|
})()
|
|
385
386
|
}));
|
|
386
387
|
effect((_p$) => {
|
|
@@ -396,19 +397,105 @@ const FormFieldRenderer = (props) => {
|
|
|
396
397
|
});
|
|
397
398
|
return _el$30;
|
|
398
399
|
}
|
|
400
|
+
}), createComponent(Match, {
|
|
401
|
+
get when() {
|
|
402
|
+
return props.field.type === "range";
|
|
403
|
+
},
|
|
404
|
+
get children() {
|
|
405
|
+
var _el$31 = getNextElement(_tmpl$11), _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling;
|
|
406
|
+
_el$32.$$input = (e) => props.onChange(Number(e.currentTarget.value));
|
|
407
|
+
insert(_el$33, () => props.value ?? props.field.min ?? 0);
|
|
408
|
+
effect((_p$) => {
|
|
409
|
+
var _v$59 = fieldId(), _v$60 = props.field.name, _v$61 = props.field.min, _v$62 = props.field.max, _v$63 = props.field.step || 1, _v$64 = isFieldDisabled();
|
|
410
|
+
_v$59 !== _p$.e && setAttribute(_el$32, "id", _p$.e = _v$59);
|
|
411
|
+
_v$60 !== _p$.t && setAttribute(_el$32, "name", _p$.t = _v$60);
|
|
412
|
+
_v$61 !== _p$.a && setAttribute(_el$32, "min", _p$.a = _v$61);
|
|
413
|
+
_v$62 !== _p$.o && setAttribute(_el$32, "max", _p$.o = _v$62);
|
|
414
|
+
_v$63 !== _p$.i && setAttribute(_el$32, "step", _p$.i = _v$63);
|
|
415
|
+
_v$64 !== _p$.n && setProperty(_el$32, "disabled", _p$.n = _v$64);
|
|
416
|
+
return _p$;
|
|
417
|
+
}, {
|
|
418
|
+
e: void 0,
|
|
419
|
+
t: void 0,
|
|
420
|
+
a: void 0,
|
|
421
|
+
o: void 0,
|
|
422
|
+
i: void 0,
|
|
423
|
+
n: void 0
|
|
424
|
+
});
|
|
425
|
+
effect(() => setProperty(_el$32, "value", props.value ?? props.field.min ?? 0));
|
|
426
|
+
runHydrationEvents();
|
|
427
|
+
return _el$31;
|
|
428
|
+
}
|
|
429
|
+
}), createComponent(Match, {
|
|
430
|
+
get when() {
|
|
431
|
+
return props.field.type === "tags";
|
|
432
|
+
},
|
|
433
|
+
get children() {
|
|
434
|
+
return createComponent(TagsField, {
|
|
435
|
+
get value() {
|
|
436
|
+
return props.value || [];
|
|
437
|
+
},
|
|
438
|
+
get onChange() {
|
|
439
|
+
return props.onChange;
|
|
440
|
+
},
|
|
441
|
+
get placeholder() {
|
|
442
|
+
return props.field.placeholder;
|
|
443
|
+
},
|
|
444
|
+
get disabled() {
|
|
445
|
+
return isFieldDisabled();
|
|
446
|
+
},
|
|
447
|
+
get baseClass() {
|
|
448
|
+
return baseInputClass();
|
|
449
|
+
}
|
|
450
|
+
});
|
|
451
|
+
}
|
|
452
|
+
}), createComponent(Match, {
|
|
453
|
+
get when() {
|
|
454
|
+
return props.field.type === "toggle";
|
|
455
|
+
},
|
|
456
|
+
get children() {
|
|
457
|
+
var _el$34 = getNextElement(_tmpl$12), _el$35 = _el$34.firstChild, _el$36 = _el$35.firstChild, _el$37 = _el$35.nextSibling;
|
|
458
|
+
_el$35.$$click = () => props.onChange(!props.value);
|
|
459
|
+
insert(_el$37, () => props.field.checkboxLabel || props.field.label);
|
|
460
|
+
effect((_p$) => {
|
|
461
|
+
var _v$65 = !!props.value, _v$66 = isFieldDisabled(), _v$67 = `relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${props.value ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"} ${isFieldDisabled() ? "opacity-50 cursor-not-allowed" : ""}`, _v$68 = `inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform ${props.value ? "translate-x-4" : "translate-x-0.5"}`;
|
|
462
|
+
_v$65 !== _p$.e && setAttribute(_el$35, "aria-checked", _p$.e = _v$65);
|
|
463
|
+
_v$66 !== _p$.t && setProperty(_el$35, "disabled", _p$.t = _v$66);
|
|
464
|
+
_v$67 !== _p$.a && className(_el$35, _p$.a = _v$67);
|
|
465
|
+
_v$68 !== _p$.o && className(_el$36, _p$.o = _v$68);
|
|
466
|
+
return _p$;
|
|
467
|
+
}, {
|
|
468
|
+
e: void 0,
|
|
469
|
+
t: void 0,
|
|
470
|
+
a: void 0,
|
|
471
|
+
o: void 0
|
|
472
|
+
});
|
|
473
|
+
runHydrationEvents();
|
|
474
|
+
return _el$34;
|
|
475
|
+
}
|
|
476
|
+
}), createComponent(Match, {
|
|
477
|
+
get when() {
|
|
478
|
+
return props.field.type === "fieldset";
|
|
479
|
+
},
|
|
480
|
+
get children() {
|
|
481
|
+
var _el$38 = getNextElement(_tmpl$13), _el$39 = _el$38.firstChild, _el$40 = _el$39.nextSibling;
|
|
482
|
+
insert(_el$39, () => props.field.label);
|
|
483
|
+
insert(_el$40, () => props.field.helpText || "Group container");
|
|
484
|
+
return _el$38;
|
|
485
|
+
}
|
|
399
486
|
}), createComponent(Match, {
|
|
400
487
|
when: true,
|
|
401
488
|
get children() {
|
|
402
489
|
return [(() => {
|
|
403
|
-
var _el$
|
|
404
|
-
_el$
|
|
490
|
+
var _el$41 = getNextElement(_tmpl$14);
|
|
491
|
+
_el$41.$$input = (e) => props.onChange(e.currentTarget.value);
|
|
405
492
|
effect((_p$) => {
|
|
406
|
-
var _v$
|
|
407
|
-
_v$
|
|
408
|
-
_v$
|
|
409
|
-
_v$
|
|
410
|
-
_v$
|
|
411
|
-
_v$
|
|
493
|
+
var _v$69 = fieldId(), _v$70 = props.field.name, _v$71 = props.field.placeholder || `(${props.field.type})`, _v$72 = props.disabled, _v$73 = baseInputClass();
|
|
494
|
+
_v$69 !== _p$.e && setAttribute(_el$41, "id", _p$.e = _v$69);
|
|
495
|
+
_v$70 !== _p$.t && setAttribute(_el$41, "name", _p$.t = _v$70);
|
|
496
|
+
_v$71 !== _p$.a && setAttribute(_el$41, "placeholder", _p$.a = _v$71);
|
|
497
|
+
_v$72 !== _p$.o && setProperty(_el$41, "disabled", _p$.o = _v$72);
|
|
498
|
+
_v$73 !== _p$.i && className(_el$41, _p$.i = _v$73);
|
|
412
499
|
return _p$;
|
|
413
500
|
}, {
|
|
414
501
|
e: void 0,
|
|
@@ -417,50 +504,50 @@ const FormFieldRenderer = (props) => {
|
|
|
417
504
|
o: void 0,
|
|
418
505
|
i: void 0
|
|
419
506
|
});
|
|
420
|
-
effect(() => setProperty(_el$
|
|
507
|
+
effect(() => setProperty(_el$41, "value", props.value || ""));
|
|
421
508
|
runHydrationEvents();
|
|
422
|
-
return _el$
|
|
509
|
+
return _el$41;
|
|
423
510
|
})(), (() => {
|
|
424
|
-
var _el$
|
|
425
|
-
insert(_el$
|
|
426
|
-
return _el$
|
|
511
|
+
var _el$42 = getNextElement(_tmpl$15), _el$43 = _el$42.firstChild, _el$44 = _el$43.nextSibling, [_el$45, _co$9] = getNextMarker(_el$44.nextSibling);
|
|
512
|
+
insert(_el$42, () => props.field.type, _el$45, _co$9);
|
|
513
|
+
return _el$42;
|
|
427
514
|
})()];
|
|
428
515
|
}
|
|
429
516
|
})];
|
|
430
517
|
}
|
|
431
|
-
}), _el$
|
|
518
|
+
}), _el$52, _co$1);
|
|
432
519
|
insert(_el$, createComponent(Show, {
|
|
433
520
|
get when() {
|
|
434
521
|
return props.field.statusReason;
|
|
435
522
|
},
|
|
436
523
|
get children() {
|
|
437
|
-
var _el$
|
|
438
|
-
insert(_el$
|
|
439
|
-
effect(() => className(_el$
|
|
440
|
-
return _el$
|
|
524
|
+
var _el$46 = getNextElement(_tmpl$16);
|
|
525
|
+
insert(_el$46, () => props.field.statusReason);
|
|
526
|
+
effect(() => className(_el$46, `text-xs ${isUnsupported() ? "text-orange-500 dark:text-orange-400" : status() === "unknown" ? "text-yellow-500 dark:text-yellow-400" : status() === "required" ? "text-blue-500 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`));
|
|
527
|
+
return _el$46;
|
|
441
528
|
}
|
|
442
|
-
}), _el$
|
|
529
|
+
}), _el$54, _co$10);
|
|
443
530
|
insert(_el$, createComponent(Show, {
|
|
444
531
|
get when() {
|
|
445
532
|
return memo(() => !!(props.field.helpText && !props.error))() && !props.field.statusReason;
|
|
446
533
|
},
|
|
447
534
|
get children() {
|
|
448
|
-
var _el$
|
|
449
|
-
insert(_el$
|
|
450
|
-
return _el$
|
|
535
|
+
var _el$47 = getNextElement(_tmpl$17);
|
|
536
|
+
insert(_el$47, () => props.field.helpText);
|
|
537
|
+
return _el$47;
|
|
451
538
|
}
|
|
452
|
-
}), _el$
|
|
539
|
+
}), _el$56, _co$11);
|
|
453
540
|
insert(_el$, createComponent(Show, {
|
|
454
541
|
get when() {
|
|
455
542
|
return props.error;
|
|
456
543
|
},
|
|
457
544
|
get children() {
|
|
458
|
-
var _el$
|
|
459
|
-
insert(_el$
|
|
460
|
-
effect(() => setAttribute(_el$
|
|
461
|
-
return _el$
|
|
545
|
+
var _el$48 = getNextElement(_tmpl$18);
|
|
546
|
+
insert(_el$48, () => props.error);
|
|
547
|
+
effect(() => setAttribute(_el$48, "id", errorId()));
|
|
548
|
+
return _el$48;
|
|
462
549
|
}
|
|
463
|
-
}), _el$
|
|
550
|
+
}), _el$58, _co$12);
|
|
464
551
|
return _el$;
|
|
465
552
|
}
|
|
466
553
|
});
|
|
@@ -489,84 +576,84 @@ const MultiSelectField = (props) => {
|
|
|
489
576
|
return (props.field.options || []).filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
|
|
490
577
|
};
|
|
491
578
|
return (() => {
|
|
492
|
-
var _el$
|
|
493
|
-
insert(_el$
|
|
579
|
+
var _el$63 = getNextElement(_tmpl$26), _el$78 = _el$63.firstChild, [_el$79, _co$16] = getNextMarker(_el$78.nextSibling), _el$65 = _el$79.nextSibling, _el$66 = _el$65.firstChild, _el$80 = _el$65.nextSibling, [_el$81, _co$17] = getNextMarker(_el$80.nextSibling);
|
|
580
|
+
insert(_el$63, createComponent(Show, {
|
|
494
581
|
get when() {
|
|
495
582
|
return props.value.length > 0;
|
|
496
583
|
},
|
|
497
584
|
get children() {
|
|
498
|
-
var _el$
|
|
499
|
-
insert(_el$
|
|
585
|
+
var _el$64 = getNextElement(_tmpl$22);
|
|
586
|
+
insert(_el$64, createComponent(For, {
|
|
500
587
|
get each() {
|
|
501
588
|
return props.value;
|
|
502
589
|
},
|
|
503
590
|
children: (val) => (() => {
|
|
504
|
-
var _el$
|
|
505
|
-
insert(_el$
|
|
506
|
-
_el$
|
|
507
|
-
effect(() => setAttribute(_el$
|
|
591
|
+
var _el$82 = getNextElement(_tmpl$27), _el$84 = _el$82.firstChild, [_el$85, _co$18] = getNextMarker(_el$84.nextSibling), _el$83 = _el$85.nextSibling;
|
|
592
|
+
insert(_el$82, () => getLabel(val), _el$85, _co$18);
|
|
593
|
+
_el$83.$$click = () => removeChip(val);
|
|
594
|
+
effect(() => setAttribute(_el$83, "aria-label", `Remove ${getLabel(val)}`));
|
|
508
595
|
runHydrationEvents();
|
|
509
|
-
return _el$
|
|
596
|
+
return _el$82;
|
|
510
597
|
})()
|
|
511
598
|
}));
|
|
512
|
-
return _el$
|
|
599
|
+
return _el$64;
|
|
513
600
|
}
|
|
514
|
-
}), _el$
|
|
515
|
-
_el$
|
|
601
|
+
}), _el$79, _co$16);
|
|
602
|
+
_el$65.$$click = () => {
|
|
516
603
|
setOpen(!open());
|
|
517
604
|
if (!open()) setFilter("");
|
|
518
605
|
};
|
|
519
|
-
insert(_el$
|
|
606
|
+
insert(_el$66, (() => {
|
|
520
607
|
var _c$ = memo(() => !!props.value.length);
|
|
521
608
|
return () => _c$() ? `${props.value.length} selected` : props.field.placeholder || "Select...";
|
|
522
609
|
})());
|
|
523
|
-
insert(_el$
|
|
610
|
+
insert(_el$63, createComponent(Show, {
|
|
524
611
|
get when() {
|
|
525
612
|
return open();
|
|
526
613
|
},
|
|
527
614
|
get children() {
|
|
528
|
-
var _el$
|
|
529
|
-
insert(_el$
|
|
615
|
+
var _el$67 = getNextElement(_tmpl$25), _el$76 = _el$67.firstChild, [_el$77, _co$15] = getNextMarker(_el$76.nextSibling), _el$70 = _el$77.nextSibling, _el$72 = _el$70.firstChild, [_el$73, _co$13] = getNextMarker(_el$72.nextSibling), _el$74 = _el$73.nextSibling, [_el$75, _co$14] = getNextMarker(_el$74.nextSibling);
|
|
616
|
+
insert(_el$67, createComponent(Show, {
|
|
530
617
|
get when() {
|
|
531
618
|
var _a;
|
|
532
619
|
return (((_a = props.field.options) == null ? void 0 : _a.length) || 0) > 10;
|
|
533
620
|
},
|
|
534
621
|
get children() {
|
|
535
|
-
var _el$
|
|
536
|
-
_el$
|
|
537
|
-
effect(() => setProperty(_el$
|
|
622
|
+
var _el$68 = getNextElement(_tmpl$23), _el$69 = _el$68.firstChild;
|
|
623
|
+
_el$69.$$input = (e) => setFilter(e.currentTarget.value);
|
|
624
|
+
effect(() => setProperty(_el$69, "value", filter()));
|
|
538
625
|
runHydrationEvents();
|
|
539
|
-
return _el$
|
|
626
|
+
return _el$68;
|
|
540
627
|
}
|
|
541
|
-
}), _el$
|
|
542
|
-
insert(_el$
|
|
628
|
+
}), _el$77, _co$15);
|
|
629
|
+
insert(_el$70, createComponent(For, {
|
|
543
630
|
get each() {
|
|
544
631
|
return filteredOptions();
|
|
545
632
|
},
|
|
546
633
|
children: (option) => (() => {
|
|
547
|
-
var _el$
|
|
548
|
-
_el$
|
|
549
|
-
insert(_el$
|
|
550
|
-
effect(() => setProperty(_el$
|
|
551
|
-
return _el$
|
|
634
|
+
var _el$86 = getNextElement(_tmpl$28), _el$87 = _el$86.firstChild, _el$88 = _el$87.nextSibling;
|
|
635
|
+
_el$87.addEventListener("change", () => toggle(option.value));
|
|
636
|
+
insert(_el$88, () => option.label);
|
|
637
|
+
effect(() => setProperty(_el$87, "checked", (props.value || []).includes(option.value)));
|
|
638
|
+
return _el$86;
|
|
552
639
|
})()
|
|
553
|
-
}), _el$
|
|
554
|
-
insert(_el$
|
|
640
|
+
}), _el$73, _co$13);
|
|
641
|
+
insert(_el$70, createComponent(Show, {
|
|
555
642
|
get when() {
|
|
556
643
|
return filteredOptions().length === 0;
|
|
557
644
|
},
|
|
558
645
|
get children() {
|
|
559
|
-
return getNextElement(_tmpl$
|
|
646
|
+
return getNextElement(_tmpl$24);
|
|
560
647
|
}
|
|
561
|
-
}), _el$
|
|
562
|
-
return _el$
|
|
648
|
+
}), _el$75, _co$14);
|
|
649
|
+
return _el$67;
|
|
563
650
|
}
|
|
564
|
-
}), _el$
|
|
651
|
+
}), _el$81, _co$17);
|
|
565
652
|
effect((_p$) => {
|
|
566
|
-
var _v$
|
|
567
|
-
_v$
|
|
568
|
-
_v$
|
|
569
|
-
_v$
|
|
653
|
+
var _v$77 = props.disabled, _v$78 = `${props.baseClass} text-left flex items-center justify-between`, _v$79 = props.value.length ? "text-gray-900 dark:text-white" : "text-gray-400";
|
|
654
|
+
_v$77 !== _p$.e && setProperty(_el$65, "disabled", _p$.e = _v$77);
|
|
655
|
+
_v$78 !== _p$.t && className(_el$65, _p$.t = _v$78);
|
|
656
|
+
_v$79 !== _p$.a && className(_el$66, _p$.a = _v$79);
|
|
570
657
|
return _p$;
|
|
571
658
|
}, {
|
|
572
659
|
e: void 0,
|
|
@@ -574,7 +661,7 @@ const MultiSelectField = (props) => {
|
|
|
574
661
|
a: void 0
|
|
575
662
|
});
|
|
576
663
|
runHydrationEvents();
|
|
577
|
-
return _el$
|
|
664
|
+
return _el$63;
|
|
578
665
|
})();
|
|
579
666
|
};
|
|
580
667
|
const AutocompleteField = (props) => {
|
|
@@ -657,93 +744,157 @@ const AutocompleteField = (props) => {
|
|
|
657
744
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
658
745
|
});
|
|
659
746
|
return (() => {
|
|
660
|
-
var _el$
|
|
661
|
-
insert(_el$
|
|
747
|
+
var _el$89 = getNextElement(_tmpl$30), _el$93 = _el$89.firstChild, [_el$94, _co$19] = getNextMarker(_el$93.nextSibling), _el$91 = _el$94.nextSibling, _el$95 = _el$91.nextSibling, [_el$96, _co$20] = getNextMarker(_el$95.nextSibling);
|
|
748
|
+
insert(_el$89, createComponent(Show, {
|
|
662
749
|
get when() {
|
|
663
750
|
return memo(() => !!isMultiple())() && selectedValues().length > 0;
|
|
664
751
|
},
|
|
665
752
|
get children() {
|
|
666
|
-
var _el$
|
|
667
|
-
insert(_el$
|
|
753
|
+
var _el$90 = getNextElement(_tmpl$22);
|
|
754
|
+
insert(_el$90, createComponent(For, {
|
|
668
755
|
get each() {
|
|
669
756
|
return selectedValues();
|
|
670
757
|
},
|
|
671
758
|
children: (val) => (() => {
|
|
672
|
-
var _el$
|
|
673
|
-
insert(_el$
|
|
674
|
-
_el$
|
|
675
|
-
effect(() => setAttribute(_el$
|
|
759
|
+
var _el$97 = getNextElement(_tmpl$27), _el$99 = _el$97.firstChild, [_el$100, _co$21] = getNextMarker(_el$99.nextSibling), _el$98 = _el$100.nextSibling;
|
|
760
|
+
insert(_el$97, () => getLabel(val), _el$100, _co$21);
|
|
761
|
+
_el$98.$$click = () => removeChip(val);
|
|
762
|
+
effect(() => setAttribute(_el$98, "aria-label", `Remove ${getLabel(val)}`));
|
|
676
763
|
runHydrationEvents();
|
|
677
|
-
return _el$
|
|
764
|
+
return _el$97;
|
|
678
765
|
})()
|
|
679
766
|
}));
|
|
680
|
-
return _el$
|
|
767
|
+
return _el$90;
|
|
681
768
|
}
|
|
682
|
-
}), _el$
|
|
683
|
-
_el$
|
|
684
|
-
_el$
|
|
769
|
+
}), _el$94, _co$19);
|
|
770
|
+
_el$91.addEventListener("blur", () => setTimeout(() => setIsOpen(false), 200));
|
|
771
|
+
_el$91.addEventListener("focus", () => {
|
|
685
772
|
if (suggestions().length) setIsOpen(true);
|
|
686
773
|
});
|
|
687
|
-
_el$
|
|
688
|
-
insert(_el$
|
|
774
|
+
_el$91.$$input = (e) => handleInput(e.currentTarget.value);
|
|
775
|
+
insert(_el$89, createComponent(Show, {
|
|
689
776
|
get when() {
|
|
690
777
|
return memo(() => !!isOpen())() && suggestions().length > 0;
|
|
691
778
|
},
|
|
692
779
|
get children() {
|
|
693
|
-
var _el$
|
|
694
|
-
insert(_el$
|
|
780
|
+
var _el$92 = getNextElement(_tmpl$29);
|
|
781
|
+
insert(_el$92, createComponent(For, {
|
|
695
782
|
get each() {
|
|
696
783
|
return suggestions();
|
|
697
784
|
},
|
|
698
785
|
children: (item) => {
|
|
699
786
|
const isSelected = () => isMultiple() && selectedValues().includes(item.value);
|
|
700
787
|
return (() => {
|
|
701
|
-
var _el$
|
|
702
|
-
_el$
|
|
703
|
-
_el$
|
|
704
|
-
insert(_el$
|
|
705
|
-
insert(_el$
|
|
788
|
+
var _el$101 = getNextElement(_tmpl$32), _el$103 = _el$101.firstChild, [_el$104, _co$22] = getNextMarker(_el$103.nextSibling), _el$105 = _el$104.nextSibling, [_el$106, _co$23] = getNextMarker(_el$105.nextSibling);
|
|
789
|
+
_el$101.$$click = () => selectSuggestion(item);
|
|
790
|
+
_el$101.$$mousedown = (e) => e.preventDefault();
|
|
791
|
+
insert(_el$101, () => item.label, _el$104, _co$22);
|
|
792
|
+
insert(_el$101, createComponent(Show, {
|
|
706
793
|
get when() {
|
|
707
794
|
return isSelected();
|
|
708
795
|
},
|
|
709
796
|
get children() {
|
|
710
|
-
return getNextElement(_tmpl$
|
|
797
|
+
return getNextElement(_tmpl$31);
|
|
711
798
|
}
|
|
712
|
-
}), _el$
|
|
799
|
+
}), _el$106, _co$23);
|
|
713
800
|
effect((_p$) => {
|
|
714
|
-
var _v$
|
|
715
|
-
_v$
|
|
716
|
-
_v$
|
|
801
|
+
var _v$83 = `w-full text-left px-3 py-2 text-sm hover:bg-blue-50 dark:hover:bg-blue-900/20 ${isSelected() ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`, _v$84 = isSelected();
|
|
802
|
+
_v$83 !== _p$.e && className(_el$101, _p$.e = _v$83);
|
|
803
|
+
_v$84 !== _p$.t && setProperty(_el$101, "disabled", _p$.t = _v$84);
|
|
717
804
|
return _p$;
|
|
718
805
|
}, {
|
|
719
806
|
e: void 0,
|
|
720
807
|
t: void 0
|
|
721
808
|
});
|
|
722
809
|
runHydrationEvents();
|
|
723
|
-
return _el$
|
|
810
|
+
return _el$101;
|
|
724
811
|
})();
|
|
725
812
|
}
|
|
726
813
|
}));
|
|
727
|
-
return _el$
|
|
814
|
+
return _el$92;
|
|
815
|
+
}
|
|
816
|
+
}), _el$96, _co$20);
|
|
817
|
+
effect((_p$) => {
|
|
818
|
+
var _v$80 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$81 = props.disabled, _v$82 = props.baseClass;
|
|
819
|
+
_v$80 !== _p$.e && setAttribute(_el$91, "placeholder", _p$.e = _v$80);
|
|
820
|
+
_v$81 !== _p$.t && setProperty(_el$91, "disabled", _p$.t = _v$81);
|
|
821
|
+
_v$82 !== _p$.a && className(_el$91, _p$.a = _v$82);
|
|
822
|
+
return _p$;
|
|
823
|
+
}, {
|
|
824
|
+
e: void 0,
|
|
825
|
+
t: void 0,
|
|
826
|
+
a: void 0
|
|
827
|
+
});
|
|
828
|
+
effect(() => setProperty(_el$91, "value", query()));
|
|
829
|
+
runHydrationEvents();
|
|
830
|
+
return _el$89;
|
|
831
|
+
})();
|
|
832
|
+
};
|
|
833
|
+
const TagsField = (props) => {
|
|
834
|
+
const [input, setInput] = createSignal("");
|
|
835
|
+
const addTag = () => {
|
|
836
|
+
const val = input().trim();
|
|
837
|
+
if (val && !(props.value || []).includes(val)) {
|
|
838
|
+
props.onChange([...props.value || [], val]);
|
|
839
|
+
}
|
|
840
|
+
setInput("");
|
|
841
|
+
};
|
|
842
|
+
const removeTag = (tag) => {
|
|
843
|
+
props.onChange((props.value || []).filter((t) => t !== tag));
|
|
844
|
+
};
|
|
845
|
+
const handleKeyDown = (e) => {
|
|
846
|
+
if (e.key === "Enter" || e.key === ",") {
|
|
847
|
+
e.preventDefault();
|
|
848
|
+
addTag();
|
|
849
|
+
}
|
|
850
|
+
if (e.key === "Backspace" && !input() && (props.value || []).length > 0) {
|
|
851
|
+
removeTag(props.value[props.value.length - 1]);
|
|
852
|
+
}
|
|
853
|
+
};
|
|
854
|
+
return (() => {
|
|
855
|
+
var _el$107 = getNextElement(_tmpl$33), _el$110 = _el$107.firstChild, [_el$111, _co$24] = getNextMarker(_el$110.nextSibling), _el$109 = _el$111.nextSibling;
|
|
856
|
+
insert(_el$107, createComponent(Show, {
|
|
857
|
+
get when() {
|
|
858
|
+
return (props.value || []).length > 0;
|
|
859
|
+
},
|
|
860
|
+
get children() {
|
|
861
|
+
var _el$108 = getNextElement(_tmpl$22);
|
|
862
|
+
insert(_el$108, createComponent(For, {
|
|
863
|
+
get each() {
|
|
864
|
+
return props.value || [];
|
|
865
|
+
},
|
|
866
|
+
children: (tag) => (() => {
|
|
867
|
+
var _el$112 = getNextElement(_tmpl$27), _el$114 = _el$112.firstChild, [_el$115, _co$25] = getNextMarker(_el$114.nextSibling), _el$113 = _el$115.nextSibling;
|
|
868
|
+
insert(_el$112, tag, _el$115, _co$25);
|
|
869
|
+
_el$113.$$click = () => removeTag(tag);
|
|
870
|
+
setAttribute(_el$113, "aria-label", `Remove ${tag}`);
|
|
871
|
+
runHydrationEvents();
|
|
872
|
+
return _el$112;
|
|
873
|
+
})()
|
|
874
|
+
}));
|
|
875
|
+
return _el$108;
|
|
728
876
|
}
|
|
729
|
-
}), _el$
|
|
877
|
+
}), _el$111, _co$24);
|
|
878
|
+
_el$109.addEventListener("blur", addTag);
|
|
879
|
+
_el$109.$$keydown = handleKeyDown;
|
|
880
|
+
_el$109.$$input = (e) => setInput(e.currentTarget.value);
|
|
730
881
|
effect((_p$) => {
|
|
731
|
-
var _v$
|
|
732
|
-
_v$
|
|
733
|
-
_v$
|
|
734
|
-
_v$
|
|
882
|
+
var _v$85 = props.placeholder || "Type and press Enter...", _v$86 = props.disabled, _v$87 = props.baseClass;
|
|
883
|
+
_v$85 !== _p$.e && setAttribute(_el$109, "placeholder", _p$.e = _v$85);
|
|
884
|
+
_v$86 !== _p$.t && setProperty(_el$109, "disabled", _p$.t = _v$86);
|
|
885
|
+
_v$87 !== _p$.a && className(_el$109, _p$.a = _v$87);
|
|
735
886
|
return _p$;
|
|
736
887
|
}, {
|
|
737
888
|
e: void 0,
|
|
738
889
|
t: void 0,
|
|
739
890
|
a: void 0
|
|
740
891
|
});
|
|
741
|
-
effect(() => setProperty(_el$
|
|
892
|
+
effect(() => setProperty(_el$109, "value", input()));
|
|
742
893
|
runHydrationEvents();
|
|
743
|
-
return _el$
|
|
894
|
+
return _el$107;
|
|
744
895
|
})();
|
|
745
896
|
};
|
|
746
|
-
delegateEvents(["input", "click", "mousedown"]);
|
|
897
|
+
delegateEvents(["input", "click", "mousedown", "keydown"]);
|
|
747
898
|
export {
|
|
748
899
|
FormFieldRenderer
|
|
749
900
|
};
|