@seed-ship/mcp-ui-solid 2.6.1 → 2.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FormFieldRenderer.cjs +214 -89
- package/dist/components/FormFieldRenderer.cjs.map +1 -1
- package/dist/components/FormFieldRenderer.d.ts.map +1 -1
- package/dist/components/FormFieldRenderer.js +214 -89
- package/dist/components/FormFieldRenderer.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FormFieldRenderer.tsx +134 -38
- 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(`<label class="block text-sm font-medium text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$3 = /* @__PURE__ */ web.template(`<input>`), _tmpl$4 = /* @__PURE__ */ web.template(`<input type=number>`), _tmpl$5 = /* @__PURE__ */ web.template(`<input type=date>`), _tmpl$6 = /* @__PURE__ */ web.template(`<textarea>`), _tmpl$7 = /* @__PURE__ */ web.template(`<option value disabled>`), _tmpl$8 = /* @__PURE__ */ web.template(`<select><!$><!/><!$><!/>`), _tmpl$9 = /* @__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$0 = /* @__PURE__ */ web.template(`<div class=space-y-2 role=radiogroup>`), _tmpl$1 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$
|
|
6
|
+
var _tmpl$ = /* @__PURE__ */ web.template(`<span class="text-red-500 ml-1"aria-hidden=true>*`), _tmpl$2 = /* @__PURE__ */ web.template(`<label class="block text-sm font-medium text-gray-700 dark:text-gray-300"><!$><!/><!$><!/>`), _tmpl$3 = /* @__PURE__ */ web.template(`<input>`), _tmpl$4 = /* @__PURE__ */ web.template(`<input type=number>`), _tmpl$5 = /* @__PURE__ */ web.template(`<input type=date>`), _tmpl$6 = /* @__PURE__ */ web.template(`<textarea>`), _tmpl$7 = /* @__PURE__ */ web.template(`<option value disabled>`), _tmpl$8 = /* @__PURE__ */ web.template(`<select><!$><!/><!$><!/>`), _tmpl$9 = /* @__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$0 = /* @__PURE__ */ web.template(`<div class=space-y-2 role=radiogroup>`), _tmpl$1 = /* @__PURE__ */ web.template(`<input type=text>`), _tmpl$10 = /* @__PURE__ */ web.template(`<p class="text-xs text-amber-500 mt-0.5">Unknown field type: <!$><!/>`), _tmpl$11 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ web.template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$13 = /* @__PURE__ */ web.template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$14 = /* @__PURE__ */ web.template(`<option>`), _tmpl$15 = /* @__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$16 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$17 = /* @__PURE__ */ web.template(`<div class="p-2 border-b border-gray-200 dark:border-gray-600"><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$18 = /* @__PURE__ */ web.template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$19 = /* @__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 overflow-hidden"><!$><!/><div class="max-h-72 overflow-y-auto"><!$><!/><!$><!/>`), _tmpl$20 = /* @__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$21 = /* @__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$22 = /* @__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$23 = /* @__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$24 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$25 = /* @__PURE__ */ web.template(`<span class="ml-2 text-xs">✓`), _tmpl$26 = /* @__PURE__ */ web.template(`<button type=button><!$><!/><!$><!/>`);
|
|
7
7
|
const FormFieldRenderer = (props) => {
|
|
8
8
|
const {
|
|
9
9
|
isVisible
|
|
@@ -25,7 +25,7 @@ const FormFieldRenderer = (props) => {
|
|
|
25
25
|
return isVisible();
|
|
26
26
|
},
|
|
27
27
|
get children() {
|
|
28
|
-
var _el$ = web.getNextElement(_tmpl$
|
|
28
|
+
var _el$ = web.getNextElement(_tmpl$13), _el$32 = _el$.firstChild, [_el$33, _co$8] = web.getNextMarker(_el$32.nextSibling), _el$34 = _el$33.nextSibling, [_el$35, _co$9] = web.getNextMarker(_el$34.nextSibling), _el$36 = _el$35.nextSibling, [_el$37, _co$0] = web.getNextMarker(_el$36.nextSibling), _el$38 = _el$37.nextSibling, [_el$39, _co$1] = web.getNextMarker(_el$38.nextSibling);
|
|
29
29
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
30
30
|
get when() {
|
|
31
31
|
return web.memo(() => !!props.field.label)() && props.field.type !== "checkbox";
|
|
@@ -44,7 +44,7 @@ const FormFieldRenderer = (props) => {
|
|
|
44
44
|
web.effect(() => web.setAttribute(_el$2, "for", fieldId()));
|
|
45
45
|
return _el$2;
|
|
46
46
|
}
|
|
47
|
-
}), _el$
|
|
47
|
+
}), _el$33, _co$8);
|
|
48
48
|
web.insert(_el$, web.createComponent(solidJs.Switch, {
|
|
49
49
|
get children() {
|
|
50
50
|
return [web.createComponent(solidJs.Match, {
|
|
@@ -219,11 +219,11 @@ const FormFieldRenderer = (props) => {
|
|
|
219
219
|
return props.field.options;
|
|
220
220
|
},
|
|
221
221
|
children: (option) => (() => {
|
|
222
|
-
var _el$
|
|
223
|
-
web.insert(_el$
|
|
224
|
-
web.effect(() => web.setProperty(_el$
|
|
225
|
-
web.effect(() => web.setProperty(_el$
|
|
226
|
-
return _el$
|
|
222
|
+
var _el$40 = web.getNextElement(_tmpl$14);
|
|
223
|
+
web.insert(_el$40, () => option.label);
|
|
224
|
+
web.effect(() => web.setProperty(_el$40, "disabled", option.disabled));
|
|
225
|
+
web.effect(() => web.setProperty(_el$40, "value", option.value));
|
|
226
|
+
return _el$40;
|
|
227
227
|
})()
|
|
228
228
|
}), _el$15, _co$4);
|
|
229
229
|
web.effect((_p$) => {
|
|
@@ -339,23 +339,23 @@ const FormFieldRenderer = (props) => {
|
|
|
339
339
|
return props.field.options;
|
|
340
340
|
},
|
|
341
341
|
children: (option, index) => (() => {
|
|
342
|
-
var _el$
|
|
343
|
-
_el$
|
|
344
|
-
web.insert(_el$
|
|
342
|
+
var _el$41 = web.getNextElement(_tmpl$15), _el$42 = _el$41.firstChild, _el$43 = _el$42.nextSibling;
|
|
343
|
+
_el$42.addEventListener("change", () => props.onChange(option.value));
|
|
344
|
+
web.insert(_el$43, () => option.label);
|
|
345
345
|
web.effect((_p$) => {
|
|
346
|
-
var _v$
|
|
347
|
-
_v$
|
|
348
|
-
_v$
|
|
349
|
-
_v$
|
|
346
|
+
var _v$62 = props.field.name, _v$63 = `${fieldId()}-${index()}`, _v$64 = props.disabled || option.disabled;
|
|
347
|
+
_v$62 !== _p$.e && web.setAttribute(_el$42, "name", _p$.e = _v$62);
|
|
348
|
+
_v$63 !== _p$.t && web.setAttribute(_el$42, "id", _p$.t = _v$63);
|
|
349
|
+
_v$64 !== _p$.a && web.setProperty(_el$42, "disabled", _p$.a = _v$64);
|
|
350
350
|
return _p$;
|
|
351
351
|
}, {
|
|
352
352
|
e: void 0,
|
|
353
353
|
t: void 0,
|
|
354
354
|
a: void 0
|
|
355
355
|
});
|
|
356
|
-
web.effect(() => web.setProperty(_el$
|
|
357
|
-
web.effect(() => web.setProperty(_el$
|
|
358
|
-
return _el$
|
|
356
|
+
web.effect(() => web.setProperty(_el$42, "value", option.value));
|
|
357
|
+
web.effect(() => web.setProperty(_el$42, "checked", props.value === option.value));
|
|
358
|
+
return _el$41;
|
|
359
359
|
})()
|
|
360
360
|
}));
|
|
361
361
|
web.effect((_p$) => {
|
|
@@ -371,36 +371,67 @@ const FormFieldRenderer = (props) => {
|
|
|
371
371
|
});
|
|
372
372
|
return _el$24;
|
|
373
373
|
}
|
|
374
|
+
}), web.createComponent(solidJs.Match, {
|
|
375
|
+
when: true,
|
|
376
|
+
get children() {
|
|
377
|
+
return [(() => {
|
|
378
|
+
var _el$25 = web.getNextElement(_tmpl$1);
|
|
379
|
+
_el$25.$$input = (e) => props.onChange(e.currentTarget.value);
|
|
380
|
+
web.effect((_p$) => {
|
|
381
|
+
var _v$57 = fieldId(), _v$58 = props.field.name, _v$59 = props.field.placeholder || `(${props.field.type})`, _v$60 = props.disabled, _v$61 = baseInputClass();
|
|
382
|
+
_v$57 !== _p$.e && web.setAttribute(_el$25, "id", _p$.e = _v$57);
|
|
383
|
+
_v$58 !== _p$.t && web.setAttribute(_el$25, "name", _p$.t = _v$58);
|
|
384
|
+
_v$59 !== _p$.a && web.setAttribute(_el$25, "placeholder", _p$.a = _v$59);
|
|
385
|
+
_v$60 !== _p$.o && web.setProperty(_el$25, "disabled", _p$.o = _v$60);
|
|
386
|
+
_v$61 !== _p$.i && web.className(_el$25, _p$.i = _v$61);
|
|
387
|
+
return _p$;
|
|
388
|
+
}, {
|
|
389
|
+
e: void 0,
|
|
390
|
+
t: void 0,
|
|
391
|
+
a: void 0,
|
|
392
|
+
o: void 0,
|
|
393
|
+
i: void 0
|
|
394
|
+
});
|
|
395
|
+
web.effect(() => web.setProperty(_el$25, "value", props.value || ""));
|
|
396
|
+
web.runHydrationEvents();
|
|
397
|
+
return _el$25;
|
|
398
|
+
})(), (() => {
|
|
399
|
+
var _el$26 = web.getNextElement(_tmpl$10), _el$27 = _el$26.firstChild, _el$28 = _el$27.nextSibling, [_el$29, _co$7] = web.getNextMarker(_el$28.nextSibling);
|
|
400
|
+
web.insert(_el$26, () => props.field.type, _el$29, _co$7);
|
|
401
|
+
return _el$26;
|
|
402
|
+
})()];
|
|
403
|
+
}
|
|
374
404
|
})];
|
|
375
405
|
}
|
|
376
|
-
}), _el$
|
|
406
|
+
}), _el$35, _co$9);
|
|
377
407
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
378
408
|
get when() {
|
|
379
409
|
return web.memo(() => !!props.field.helpText)() && !props.error;
|
|
380
410
|
},
|
|
381
411
|
get children() {
|
|
382
|
-
var _el$
|
|
383
|
-
web.insert(_el$
|
|
384
|
-
return _el$
|
|
412
|
+
var _el$30 = web.getNextElement(_tmpl$11);
|
|
413
|
+
web.insert(_el$30, () => props.field.helpText);
|
|
414
|
+
return _el$30;
|
|
385
415
|
}
|
|
386
|
-
}), _el$
|
|
416
|
+
}), _el$37, _co$0);
|
|
387
417
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
388
418
|
get when() {
|
|
389
419
|
return props.error;
|
|
390
420
|
},
|
|
391
421
|
get children() {
|
|
392
|
-
var _el$
|
|
393
|
-
web.insert(_el$
|
|
394
|
-
web.effect(() => web.setAttribute(_el$
|
|
395
|
-
return _el$
|
|
422
|
+
var _el$31 = web.getNextElement(_tmpl$12);
|
|
423
|
+
web.insert(_el$31, () => props.error);
|
|
424
|
+
web.effect(() => web.setAttribute(_el$31, "id", errorId()));
|
|
425
|
+
return _el$31;
|
|
396
426
|
}
|
|
397
|
-
}), _el$
|
|
427
|
+
}), _el$39, _co$1);
|
|
398
428
|
return _el$;
|
|
399
429
|
}
|
|
400
430
|
});
|
|
401
431
|
};
|
|
402
432
|
const MultiSelectField = (props) => {
|
|
403
433
|
const [open, setOpen] = solidJs.createSignal(false);
|
|
434
|
+
const [filter, setFilter] = solidJs.createSignal("");
|
|
404
435
|
const toggle = (val) => {
|
|
405
436
|
const current = props.value || [];
|
|
406
437
|
if (current.includes(val)) {
|
|
@@ -416,61 +447,90 @@ const MultiSelectField = (props) => {
|
|
|
416
447
|
var _a, _b;
|
|
417
448
|
return ((_b = (_a = props.field.options) == null ? void 0 : _a.find((o) => o.value === val)) == null ? void 0 : _b.label) || val;
|
|
418
449
|
};
|
|
450
|
+
const filteredOptions = () => {
|
|
451
|
+
const q = filter().toLowerCase();
|
|
452
|
+
if (!q) return props.field.options || [];
|
|
453
|
+
return (props.field.options || []).filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
|
|
454
|
+
};
|
|
419
455
|
return (() => {
|
|
420
|
-
var _el$
|
|
421
|
-
web.insert(_el$
|
|
456
|
+
var _el$44 = web.getNextElement(_tmpl$20), _el$59 = _el$44.firstChild, [_el$60, _co$13] = web.getNextMarker(_el$59.nextSibling), _el$46 = _el$60.nextSibling, _el$47 = _el$46.firstChild, _el$61 = _el$46.nextSibling, [_el$62, _co$14] = web.getNextMarker(_el$61.nextSibling);
|
|
457
|
+
web.insert(_el$44, web.createComponent(solidJs.Show, {
|
|
422
458
|
get when() {
|
|
423
459
|
return props.value.length > 0;
|
|
424
460
|
},
|
|
425
461
|
get children() {
|
|
426
|
-
var _el$
|
|
427
|
-
web.insert(_el$
|
|
462
|
+
var _el$45 = web.getNextElement(_tmpl$16);
|
|
463
|
+
web.insert(_el$45, web.createComponent(solidJs.For, {
|
|
428
464
|
get each() {
|
|
429
465
|
return props.value;
|
|
430
466
|
},
|
|
431
467
|
children: (val) => (() => {
|
|
432
|
-
var _el$
|
|
433
|
-
web.insert(_el$
|
|
434
|
-
_el$
|
|
435
|
-
web.effect(() => web.setAttribute(_el$
|
|
468
|
+
var _el$63 = web.getNextElement(_tmpl$21), _el$65 = _el$63.firstChild, [_el$66, _co$15] = web.getNextMarker(_el$65.nextSibling), _el$64 = _el$66.nextSibling;
|
|
469
|
+
web.insert(_el$63, () => getLabel(val), _el$66, _co$15);
|
|
470
|
+
_el$64.$$click = () => removeChip(val);
|
|
471
|
+
web.effect(() => web.setAttribute(_el$64, "aria-label", `Remove ${getLabel(val)}`));
|
|
436
472
|
web.runHydrationEvents();
|
|
437
|
-
return _el$
|
|
473
|
+
return _el$63;
|
|
438
474
|
})()
|
|
439
475
|
}));
|
|
440
|
-
return _el$
|
|
476
|
+
return _el$45;
|
|
441
477
|
}
|
|
442
|
-
}), _el$
|
|
443
|
-
_el$
|
|
444
|
-
|
|
478
|
+
}), _el$60, _co$13);
|
|
479
|
+
_el$46.$$click = () => {
|
|
480
|
+
setOpen(!open());
|
|
481
|
+
if (!open()) setFilter("");
|
|
482
|
+
};
|
|
483
|
+
web.insert(_el$47, (() => {
|
|
445
484
|
var _c$ = web.memo(() => !!props.value.length);
|
|
446
485
|
return () => _c$() ? `${props.value.length} selected` : props.field.placeholder || "Select...";
|
|
447
486
|
})());
|
|
448
|
-
web.insert(_el$
|
|
487
|
+
web.insert(_el$44, web.createComponent(solidJs.Show, {
|
|
449
488
|
get when() {
|
|
450
489
|
return open();
|
|
451
490
|
},
|
|
452
491
|
get children() {
|
|
453
|
-
var _el$
|
|
454
|
-
web.insert(_el$
|
|
492
|
+
var _el$48 = web.getNextElement(_tmpl$19), _el$57 = _el$48.firstChild, [_el$58, _co$12] = web.getNextMarker(_el$57.nextSibling), _el$51 = _el$58.nextSibling, _el$53 = _el$51.firstChild, [_el$54, _co$10] = web.getNextMarker(_el$53.nextSibling), _el$55 = _el$54.nextSibling, [_el$56, _co$11] = web.getNextMarker(_el$55.nextSibling);
|
|
493
|
+
web.insert(_el$48, web.createComponent(solidJs.Show, {
|
|
494
|
+
get when() {
|
|
495
|
+
var _a;
|
|
496
|
+
return (((_a = props.field.options) == null ? void 0 : _a.length) || 0) > 10;
|
|
497
|
+
},
|
|
498
|
+
get children() {
|
|
499
|
+
var _el$49 = web.getNextElement(_tmpl$17), _el$50 = _el$49.firstChild;
|
|
500
|
+
_el$50.$$input = (e) => setFilter(e.currentTarget.value);
|
|
501
|
+
web.effect(() => web.setProperty(_el$50, "value", filter()));
|
|
502
|
+
web.runHydrationEvents();
|
|
503
|
+
return _el$49;
|
|
504
|
+
}
|
|
505
|
+
}), _el$58, _co$12);
|
|
506
|
+
web.insert(_el$51, web.createComponent(solidJs.For, {
|
|
455
507
|
get each() {
|
|
456
|
-
return
|
|
508
|
+
return filteredOptions();
|
|
457
509
|
},
|
|
458
510
|
children: (option) => (() => {
|
|
459
|
-
var _el$
|
|
460
|
-
_el$
|
|
461
|
-
web.insert(_el$
|
|
462
|
-
web.effect(() => web.setProperty(_el$
|
|
463
|
-
return _el$
|
|
511
|
+
var _el$67 = web.getNextElement(_tmpl$22), _el$68 = _el$67.firstChild, _el$69 = _el$68.nextSibling;
|
|
512
|
+
_el$68.addEventListener("change", () => toggle(option.value));
|
|
513
|
+
web.insert(_el$69, () => option.label);
|
|
514
|
+
web.effect(() => web.setProperty(_el$68, "checked", (props.value || []).includes(option.value)));
|
|
515
|
+
return _el$67;
|
|
464
516
|
})()
|
|
465
|
-
}));
|
|
466
|
-
|
|
517
|
+
}), _el$54, _co$10);
|
|
518
|
+
web.insert(_el$51, web.createComponent(solidJs.Show, {
|
|
519
|
+
get when() {
|
|
520
|
+
return filteredOptions().length === 0;
|
|
521
|
+
},
|
|
522
|
+
get children() {
|
|
523
|
+
return web.getNextElement(_tmpl$18);
|
|
524
|
+
}
|
|
525
|
+
}), _el$56, _co$11);
|
|
526
|
+
return _el$48;
|
|
467
527
|
}
|
|
468
|
-
}), _el$
|
|
528
|
+
}), _el$62, _co$14);
|
|
469
529
|
web.effect((_p$) => {
|
|
470
|
-
var _v$
|
|
471
|
-
_v$
|
|
472
|
-
_v$
|
|
473
|
-
_v$
|
|
530
|
+
var _v$65 = props.disabled, _v$66 = `${props.baseClass} text-left flex items-center justify-between`, _v$67 = props.value.length ? "text-gray-900 dark:text-white" : "text-gray-400";
|
|
531
|
+
_v$65 !== _p$.e && web.setProperty(_el$46, "disabled", _p$.e = _v$65);
|
|
532
|
+
_v$66 !== _p$.t && web.className(_el$46, _p$.t = _v$66);
|
|
533
|
+
_v$67 !== _p$.a && web.className(_el$47, _p$.a = _v$67);
|
|
474
534
|
return _p$;
|
|
475
535
|
}, {
|
|
476
536
|
e: void 0,
|
|
@@ -478,15 +538,17 @@ const MultiSelectField = (props) => {
|
|
|
478
538
|
a: void 0
|
|
479
539
|
});
|
|
480
540
|
web.runHydrationEvents();
|
|
481
|
-
return _el$
|
|
541
|
+
return _el$44;
|
|
482
542
|
})();
|
|
483
543
|
};
|
|
484
544
|
const AutocompleteField = (props) => {
|
|
485
545
|
const [query, setQuery] = solidJs.createSignal("");
|
|
486
546
|
const [suggestions, setSuggestions] = solidJs.createSignal([]);
|
|
487
547
|
const [isOpen, setIsOpen] = solidJs.createSignal(false);
|
|
488
|
-
const [
|
|
548
|
+
const [selectedLabels, setSelectedLabels] = solidJs.createSignal(/* @__PURE__ */ new Map());
|
|
489
549
|
let debounceTimer = null;
|
|
550
|
+
const isMultiple = () => props.field.multiple === true;
|
|
551
|
+
const selectedValues = () => isMultiple() ? Array.isArray(props.value) ? props.value : [] : [];
|
|
490
552
|
const minChars = () => props.field.minChars ?? 2;
|
|
491
553
|
const debounceMs = () => props.field.debounceMs ?? 300;
|
|
492
554
|
const fetchSuggestions = async (q) => {
|
|
@@ -517,8 +579,9 @@ const AutocompleteField = (props) => {
|
|
|
517
579
|
};
|
|
518
580
|
const handleInput = (value) => {
|
|
519
581
|
setQuery(value);
|
|
520
|
-
|
|
521
|
-
|
|
582
|
+
if (!isMultiple()) {
|
|
583
|
+
props.onChange("");
|
|
584
|
+
}
|
|
522
585
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
523
586
|
if (value.length < minChars()) {
|
|
524
587
|
setSuggestions([]);
|
|
@@ -528,58 +591,120 @@ const AutocompleteField = (props) => {
|
|
|
528
591
|
debounceTimer = setTimeout(() => fetchSuggestions(value), debounceMs());
|
|
529
592
|
};
|
|
530
593
|
const selectSuggestion = (item) => {
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
594
|
+
if (isMultiple()) {
|
|
595
|
+
const current = selectedValues();
|
|
596
|
+
if (!current.includes(item.value)) {
|
|
597
|
+
props.onChange([...current, item.value]);
|
|
598
|
+
setSelectedLabels((prev) => new Map(prev).set(item.value, item.label));
|
|
599
|
+
}
|
|
600
|
+
setQuery("");
|
|
601
|
+
setSuggestions([]);
|
|
602
|
+
setIsOpen(false);
|
|
603
|
+
} else {
|
|
604
|
+
props.onChange(item.value);
|
|
605
|
+
setSelectedLabels((prev) => new Map(prev).set(item.value, item.label));
|
|
606
|
+
setQuery(item.label);
|
|
607
|
+
setIsOpen(false);
|
|
608
|
+
setSuggestions([]);
|
|
609
|
+
}
|
|
536
610
|
};
|
|
611
|
+
const removeChip = (val) => {
|
|
612
|
+
props.onChange(selectedValues().filter((v) => v !== val));
|
|
613
|
+
setSelectedLabels((prev) => {
|
|
614
|
+
const m = new Map(prev);
|
|
615
|
+
m.delete(val);
|
|
616
|
+
return m;
|
|
617
|
+
});
|
|
618
|
+
};
|
|
619
|
+
const getLabel = (val) => selectedLabels().get(val) || val;
|
|
537
620
|
solidJs.onCleanup(() => {
|
|
538
621
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
539
622
|
});
|
|
540
623
|
return (() => {
|
|
541
|
-
var _el$
|
|
542
|
-
_el$
|
|
543
|
-
|
|
624
|
+
var _el$70 = web.getNextElement(_tmpl$24), _el$74 = _el$70.firstChild, [_el$75, _co$16] = web.getNextMarker(_el$74.nextSibling), _el$72 = _el$75.nextSibling, _el$76 = _el$72.nextSibling, [_el$77, _co$17] = web.getNextMarker(_el$76.nextSibling);
|
|
625
|
+
web.insert(_el$70, web.createComponent(solidJs.Show, {
|
|
626
|
+
get when() {
|
|
627
|
+
return web.memo(() => !!isMultiple())() && selectedValues().length > 0;
|
|
628
|
+
},
|
|
629
|
+
get children() {
|
|
630
|
+
var _el$71 = web.getNextElement(_tmpl$16);
|
|
631
|
+
web.insert(_el$71, web.createComponent(solidJs.For, {
|
|
632
|
+
get each() {
|
|
633
|
+
return selectedValues();
|
|
634
|
+
},
|
|
635
|
+
children: (val) => (() => {
|
|
636
|
+
var _el$78 = web.getNextElement(_tmpl$21), _el$80 = _el$78.firstChild, [_el$81, _co$18] = web.getNextMarker(_el$80.nextSibling), _el$79 = _el$81.nextSibling;
|
|
637
|
+
web.insert(_el$78, () => getLabel(val), _el$81, _co$18);
|
|
638
|
+
_el$79.$$click = () => removeChip(val);
|
|
639
|
+
web.effect(() => web.setAttribute(_el$79, "aria-label", `Remove ${getLabel(val)}`));
|
|
640
|
+
web.runHydrationEvents();
|
|
641
|
+
return _el$78;
|
|
642
|
+
})()
|
|
643
|
+
}));
|
|
644
|
+
return _el$71;
|
|
645
|
+
}
|
|
646
|
+
}), _el$75, _co$16);
|
|
647
|
+
_el$72.addEventListener("blur", () => setTimeout(() => setIsOpen(false), 200));
|
|
648
|
+
_el$72.addEventListener("focus", () => {
|
|
544
649
|
if (suggestions().length) setIsOpen(true);
|
|
545
650
|
});
|
|
546
|
-
_el$
|
|
547
|
-
web.insert(_el$
|
|
651
|
+
_el$72.$$input = (e) => handleInput(e.currentTarget.value);
|
|
652
|
+
web.insert(_el$70, web.createComponent(solidJs.Show, {
|
|
548
653
|
get when() {
|
|
549
654
|
return web.memo(() => !!isOpen())() && suggestions().length > 0;
|
|
550
655
|
},
|
|
551
656
|
get children() {
|
|
552
|
-
var _el$
|
|
553
|
-
web.insert(_el$
|
|
657
|
+
var _el$73 = web.getNextElement(_tmpl$23);
|
|
658
|
+
web.insert(_el$73, web.createComponent(solidJs.For, {
|
|
554
659
|
get each() {
|
|
555
660
|
return suggestions();
|
|
556
661
|
},
|
|
557
|
-
children: (item) =>
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
662
|
+
children: (item) => {
|
|
663
|
+
const isSelected = () => isMultiple() && selectedValues().includes(item.value);
|
|
664
|
+
return (() => {
|
|
665
|
+
var _el$82 = web.getNextElement(_tmpl$26), _el$84 = _el$82.firstChild, [_el$85, _co$19] = web.getNextMarker(_el$84.nextSibling), _el$86 = _el$85.nextSibling, [_el$87, _co$20] = web.getNextMarker(_el$86.nextSibling);
|
|
666
|
+
_el$82.$$click = () => selectSuggestion(item);
|
|
667
|
+
_el$82.$$mousedown = (e) => e.preventDefault();
|
|
668
|
+
web.insert(_el$82, () => item.label, _el$85, _co$19);
|
|
669
|
+
web.insert(_el$82, web.createComponent(solidJs.Show, {
|
|
670
|
+
get when() {
|
|
671
|
+
return isSelected();
|
|
672
|
+
},
|
|
673
|
+
get children() {
|
|
674
|
+
return web.getNextElement(_tmpl$25);
|
|
675
|
+
}
|
|
676
|
+
}), _el$87, _co$20);
|
|
677
|
+
web.effect((_p$) => {
|
|
678
|
+
var _v$71 = `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$72 = isSelected();
|
|
679
|
+
_v$71 !== _p$.e && web.className(_el$82, _p$.e = _v$71);
|
|
680
|
+
_v$72 !== _p$.t && web.setProperty(_el$82, "disabled", _p$.t = _v$72);
|
|
681
|
+
return _p$;
|
|
682
|
+
}, {
|
|
683
|
+
e: void 0,
|
|
684
|
+
t: void 0
|
|
685
|
+
});
|
|
686
|
+
web.runHydrationEvents();
|
|
687
|
+
return _el$82;
|
|
688
|
+
})();
|
|
689
|
+
}
|
|
565
690
|
}));
|
|
566
|
-
return _el$
|
|
691
|
+
return _el$73;
|
|
567
692
|
}
|
|
568
|
-
}), _el$
|
|
693
|
+
}), _el$77, _co$17);
|
|
569
694
|
web.effect((_p$) => {
|
|
570
|
-
var _v$
|
|
571
|
-
_v$
|
|
572
|
-
_v$
|
|
573
|
-
_v$
|
|
695
|
+
var _v$68 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$69 = props.disabled, _v$70 = props.baseClass;
|
|
696
|
+
_v$68 !== _p$.e && web.setAttribute(_el$72, "placeholder", _p$.e = _v$68);
|
|
697
|
+
_v$69 !== _p$.t && web.setProperty(_el$72, "disabled", _p$.t = _v$69);
|
|
698
|
+
_v$70 !== _p$.a && web.className(_el$72, _p$.a = _v$70);
|
|
574
699
|
return _p$;
|
|
575
700
|
}, {
|
|
576
701
|
e: void 0,
|
|
577
702
|
t: void 0,
|
|
578
703
|
a: void 0
|
|
579
704
|
});
|
|
580
|
-
web.effect(() => web.setProperty(_el$
|
|
705
|
+
web.effect(() => web.setProperty(_el$72, "value", query()));
|
|
581
706
|
web.runHydrationEvents();
|
|
582
|
-
return _el$
|
|
707
|
+
return _el$70;
|
|
583
708
|
})();
|
|
584
709
|
};
|
|
585
710
|
web.delegateEvents(["input", "click", "mousedown"]);
|