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