@seed-ship/mcp-ui-solid 2.11.0 → 2.12.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 +4 -5
- package/dist/components/FormFieldRenderer.cjs +261 -223
- package/dist/components/FormFieldRenderer.cjs.map +1 -1
- package/dist/components/FormFieldRenderer.d.ts.map +1 -1
- package/dist/components/FormFieldRenderer.js +262 -224
- package/dist/components/FormFieldRenderer.js.map +1 -1
- package/dist/components/ScratchpadPanel.cjs +6 -2
- package/dist/components/ScratchpadPanel.cjs.map +1 -1
- package/dist/components/ScratchpadPanel.js +6 -2
- package/dist/components/ScratchpadPanel.js.map +1 -1
- package/dist/types/index.d.ts +4 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types.d.cts +4 -0
- package/dist/types.d.ts +4 -0
- package/package.json +1 -1
- package/src/components/FormFieldRenderer.tsx +25 -3
- package/src/components/ScratchpadPanel.tsx +13 -3
- package/src/types/index.ts +6 -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(`<
|
|
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$13 = /* @__PURE__ */ web.template(`<p>`), _tmpl$14 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-500 dark:text-gray-400">`), _tmpl$15 = /* @__PURE__ */ web.template(`<p role=alert class="text-xs text-red-600 dark:text-red-400">`), _tmpl$16 = /* @__PURE__ */ web.template(`<div class=space-y-1><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`), _tmpl$17 = /* @__PURE__ */ web.template(`<option>`), _tmpl$18 = /* @__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$19 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-1 mb-1">`), _tmpl$20 = /* @__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$21 = /* @__PURE__ */ web.template(`<p class="px-3 py-2 text-sm text-gray-400">No matches`), _tmpl$22 = /* @__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$23 = /* @__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$24 = /* @__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$25 = /* @__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$26 = /* @__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$27 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><input type=text autocomplete=off><!$><!/>`), _tmpl$28 = /* @__PURE__ */ web.template(`<span class="ml-2 text-xs">✓`), _tmpl$29 = /* @__PURE__ */ web.template(`<button type=button><!$><!/><!$><!/>`);
|
|
7
7
|
const FormFieldRenderer = (props) => {
|
|
8
8
|
const {
|
|
9
9
|
isVisible
|
|
@@ -11,12 +11,15 @@ const FormFieldRenderer = (props) => {
|
|
|
11
11
|
condition: props.field.showWhen,
|
|
12
12
|
formData: props.formData || (() => ({}))
|
|
13
13
|
});
|
|
14
|
+
const status = () => props.field.fieldStatus || "optional";
|
|
15
|
+
const isUnsupported = () => status() === "unsupported";
|
|
14
16
|
const baseInputClass = () => `
|
|
15
17
|
w-full px-3 py-2 border rounded-md
|
|
16
18
|
focus:ring-2 focus:ring-blue-500 focus:border-blue-500
|
|
17
19
|
disabled:bg-gray-100 disabled:cursor-not-allowed
|
|
18
20
|
${props.error ? "border-red-500 focus:ring-red-500" : "border-gray-300 dark:border-gray-600"}
|
|
19
21
|
dark:bg-gray-700 dark:text-white
|
|
22
|
+
${isUnsupported() ? "opacity-50" : ""}
|
|
20
23
|
`;
|
|
21
24
|
const fieldId = () => `field-${props.field.name}`;
|
|
22
25
|
const errorId = () => `${props.field.name}-error`;
|
|
@@ -25,26 +28,50 @@ const FormFieldRenderer = (props) => {
|
|
|
25
28
|
return isVisible();
|
|
26
29
|
},
|
|
27
30
|
get children() {
|
|
28
|
-
var _el$ = web.getNextElement(_tmpl$
|
|
31
|
+
var _el$ = web.getNextElement(_tmpl$16), _el$39 = _el$.firstChild, [_el$40, _co$0] = web.getNextMarker(_el$39.nextSibling), _el$41 = _el$40.nextSibling, [_el$42, _co$1] = web.getNextMarker(_el$41.nextSibling), _el$43 = _el$42.nextSibling, [_el$44, _co$10] = web.getNextMarker(_el$43.nextSibling), _el$45 = _el$44.nextSibling, [_el$46, _co$11] = web.getNextMarker(_el$45.nextSibling), _el$47 = _el$46.nextSibling, [_el$48, _co$12] = web.getNextMarker(_el$47.nextSibling);
|
|
29
32
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
30
33
|
get when() {
|
|
31
34
|
return web.memo(() => !!props.field.label)() && props.field.type !== "checkbox";
|
|
32
35
|
},
|
|
33
36
|
get children() {
|
|
34
|
-
var _el$2 = web.getNextElement(_tmpl$
|
|
35
|
-
web.insert(_el$2, () => props.field.label, _el$
|
|
37
|
+
var _el$2 = web.getNextElement(_tmpl$4), _el$6 = _el$2.firstChild, [_el$7, _co$] = web.getNextMarker(_el$6.nextSibling), _el$8 = _el$7.nextSibling, [_el$9, _co$2] = web.getNextMarker(_el$8.nextSibling), _el$0 = _el$9.nextSibling, [_el$1, _co$3] = web.getNextMarker(_el$0.nextSibling), _el$10 = _el$1.nextSibling, [_el$11, _co$4] = web.getNextMarker(_el$10.nextSibling);
|
|
38
|
+
web.insert(_el$2, () => props.field.label, _el$7, _co$);
|
|
36
39
|
web.insert(_el$2, web.createComponent(solidJs.Show, {
|
|
37
40
|
get when() {
|
|
38
|
-
return props.field.required;
|
|
41
|
+
return props.field.required || status() === "required";
|
|
39
42
|
},
|
|
40
43
|
get children() {
|
|
41
44
|
return web.getNextElement(_tmpl$);
|
|
42
45
|
}
|
|
43
|
-
}), _el$
|
|
44
|
-
web.
|
|
46
|
+
}), _el$9, _co$2);
|
|
47
|
+
web.insert(_el$2, web.createComponent(solidJs.Show, {
|
|
48
|
+
get when() {
|
|
49
|
+
return isUnsupported();
|
|
50
|
+
},
|
|
51
|
+
get children() {
|
|
52
|
+
return web.getNextElement(_tmpl$2);
|
|
53
|
+
}
|
|
54
|
+
}), _el$1, _co$3);
|
|
55
|
+
web.insert(_el$2, web.createComponent(solidJs.Show, {
|
|
56
|
+
get when() {
|
|
57
|
+
return status() === "unknown";
|
|
58
|
+
},
|
|
59
|
+
get children() {
|
|
60
|
+
return web.getNextElement(_tmpl$3);
|
|
61
|
+
}
|
|
62
|
+
}), _el$11, _co$4);
|
|
63
|
+
web.effect((_p$) => {
|
|
64
|
+
var _v$ = fieldId(), _v$2 = `block text-sm font-medium ${isUnsupported() ? "text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-300"}`;
|
|
65
|
+
_v$ !== _p$.e && web.setAttribute(_el$2, "for", _p$.e = _v$);
|
|
66
|
+
_v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
|
|
67
|
+
return _p$;
|
|
68
|
+
}, {
|
|
69
|
+
e: void 0,
|
|
70
|
+
t: void 0
|
|
71
|
+
});
|
|
45
72
|
return _el$2;
|
|
46
73
|
}
|
|
47
|
-
}), _el$
|
|
74
|
+
}), _el$40, _co$0);
|
|
48
75
|
web.insert(_el$, web.createComponent(solidJs.Switch, {
|
|
49
76
|
get children() {
|
|
50
77
|
return [web.createComponent(solidJs.Match, {
|
|
@@ -52,22 +79,22 @@ const FormFieldRenderer = (props) => {
|
|
|
52
79
|
return props.field.type === "text" || props.field.type === "email" || props.field.type === "password";
|
|
53
80
|
},
|
|
54
81
|
get children() {
|
|
55
|
-
var _el$
|
|
56
|
-
_el$
|
|
82
|
+
var _el$12 = web.getNextElement(_tmpl$5);
|
|
83
|
+
_el$12.$$input = (e) => props.onChange(e.currentTarget.value);
|
|
57
84
|
web.effect((_p$) => {
|
|
58
|
-
var _v$ = fieldId(), _v$
|
|
59
|
-
_v$ !== _p$.e && web.setAttribute(_el$
|
|
60
|
-
_v$
|
|
61
|
-
_v$
|
|
62
|
-
_v$
|
|
63
|
-
_v$
|
|
64
|
-
_v$
|
|
65
|
-
_v$
|
|
66
|
-
_v$
|
|
67
|
-
_v$
|
|
68
|
-
_v$
|
|
69
|
-
_v$
|
|
70
|
-
_v$
|
|
85
|
+
var _v$3 = fieldId(), _v$4 = props.field.type, _v$5 = props.field.name, _v$6 = props.field.placeholder, _v$7 = props.disabled, _v$8 = props.field.required, _v$9 = props.field.minLength, _v$0 = props.field.maxLength, _v$1 = props.field.pattern, _v$10 = !!props.error, _v$11 = props.error ? errorId() : void 0, _v$12 = baseInputClass();
|
|
86
|
+
_v$3 !== _p$.e && web.setAttribute(_el$12, "id", _p$.e = _v$3);
|
|
87
|
+
_v$4 !== _p$.t && web.setAttribute(_el$12, "type", _p$.t = _v$4);
|
|
88
|
+
_v$5 !== _p$.a && web.setAttribute(_el$12, "name", _p$.a = _v$5);
|
|
89
|
+
_v$6 !== _p$.o && web.setAttribute(_el$12, "placeholder", _p$.o = _v$6);
|
|
90
|
+
_v$7 !== _p$.i && web.setProperty(_el$12, "disabled", _p$.i = _v$7);
|
|
91
|
+
_v$8 !== _p$.n && web.setProperty(_el$12, "required", _p$.n = _v$8);
|
|
92
|
+
_v$9 !== _p$.s && web.setAttribute(_el$12, "minlength", _p$.s = _v$9);
|
|
93
|
+
_v$0 !== _p$.h && web.setAttribute(_el$12, "maxlength", _p$.h = _v$0);
|
|
94
|
+
_v$1 !== _p$.r && web.setAttribute(_el$12, "pattern", _p$.r = _v$1);
|
|
95
|
+
_v$10 !== _p$.d && web.setAttribute(_el$12, "aria-invalid", _p$.d = _v$10);
|
|
96
|
+
_v$11 !== _p$.l && web.setAttribute(_el$12, "aria-describedby", _p$.l = _v$11);
|
|
97
|
+
_v$12 !== _p$.u && web.className(_el$12, _p$.u = _v$12);
|
|
71
98
|
return _p$;
|
|
72
99
|
}, {
|
|
73
100
|
e: void 0,
|
|
@@ -83,30 +110,30 @@ const FormFieldRenderer = (props) => {
|
|
|
83
110
|
l: void 0,
|
|
84
111
|
u: void 0
|
|
85
112
|
});
|
|
86
|
-
web.effect(() => web.setProperty(_el$
|
|
113
|
+
web.effect(() => web.setProperty(_el$12, "value", props.value || ""));
|
|
87
114
|
web.runHydrationEvents();
|
|
88
|
-
return _el$
|
|
115
|
+
return _el$12;
|
|
89
116
|
}
|
|
90
117
|
}), web.createComponent(solidJs.Match, {
|
|
91
118
|
get when() {
|
|
92
119
|
return props.field.type === "number";
|
|
93
120
|
},
|
|
94
121
|
get children() {
|
|
95
|
-
var _el$
|
|
96
|
-
_el$
|
|
122
|
+
var _el$13 = web.getNextElement(_tmpl$6);
|
|
123
|
+
_el$13.$$input = (e) => props.onChange(e.currentTarget.value === "" ? void 0 : Number(e.currentTarget.value));
|
|
97
124
|
web.effect((_p$) => {
|
|
98
|
-
var _v$
|
|
99
|
-
_v$
|
|
100
|
-
_v$
|
|
101
|
-
_v$
|
|
102
|
-
_v$
|
|
103
|
-
_v$
|
|
104
|
-
_v$
|
|
105
|
-
_v$
|
|
106
|
-
_v$
|
|
107
|
-
_v$
|
|
108
|
-
_v$
|
|
109
|
-
_v$
|
|
125
|
+
var _v$13 = fieldId(), _v$14 = props.field.name, _v$15 = props.field.placeholder, _v$16 = props.disabled, _v$17 = props.field.required, _v$18 = props.field.min, _v$19 = props.field.max, _v$20 = props.field.step, _v$21 = !!props.error, _v$22 = props.error ? errorId() : void 0, _v$23 = baseInputClass();
|
|
126
|
+
_v$13 !== _p$.e && web.setAttribute(_el$13, "id", _p$.e = _v$13);
|
|
127
|
+
_v$14 !== _p$.t && web.setAttribute(_el$13, "name", _p$.t = _v$14);
|
|
128
|
+
_v$15 !== _p$.a && web.setAttribute(_el$13, "placeholder", _p$.a = _v$15);
|
|
129
|
+
_v$16 !== _p$.o && web.setProperty(_el$13, "disabled", _p$.o = _v$16);
|
|
130
|
+
_v$17 !== _p$.i && web.setProperty(_el$13, "required", _p$.i = _v$17);
|
|
131
|
+
_v$18 !== _p$.n && web.setAttribute(_el$13, "min", _p$.n = _v$18);
|
|
132
|
+
_v$19 !== _p$.s && web.setAttribute(_el$13, "max", _p$.s = _v$19);
|
|
133
|
+
_v$20 !== _p$.h && web.setAttribute(_el$13, "step", _p$.h = _v$20);
|
|
134
|
+
_v$21 !== _p$.r && web.setAttribute(_el$13, "aria-invalid", _p$.r = _v$21);
|
|
135
|
+
_v$22 !== _p$.d && web.setAttribute(_el$13, "aria-describedby", _p$.d = _v$22);
|
|
136
|
+
_v$23 !== _p$.l && web.className(_el$13, _p$.l = _v$23);
|
|
110
137
|
return _p$;
|
|
111
138
|
}, {
|
|
112
139
|
e: void 0,
|
|
@@ -121,28 +148,28 @@ const FormFieldRenderer = (props) => {
|
|
|
121
148
|
d: void 0,
|
|
122
149
|
l: void 0
|
|
123
150
|
});
|
|
124
|
-
web.effect(() => web.setProperty(_el$
|
|
151
|
+
web.effect(() => web.setProperty(_el$13, "value", props.value ?? ""));
|
|
125
152
|
web.runHydrationEvents();
|
|
126
|
-
return _el$
|
|
153
|
+
return _el$13;
|
|
127
154
|
}
|
|
128
155
|
}), web.createComponent(solidJs.Match, {
|
|
129
156
|
get when() {
|
|
130
157
|
return props.field.type === "date";
|
|
131
158
|
},
|
|
132
159
|
get children() {
|
|
133
|
-
var _el$
|
|
134
|
-
_el$
|
|
160
|
+
var _el$14 = web.getNextElement(_tmpl$7);
|
|
161
|
+
_el$14.$$input = (e) => props.onChange(e.currentTarget.value);
|
|
135
162
|
web.effect((_p$) => {
|
|
136
|
-
var _v$
|
|
137
|
-
_v$
|
|
138
|
-
_v$
|
|
139
|
-
_v$
|
|
140
|
-
_v$
|
|
141
|
-
_v$
|
|
142
|
-
_v$
|
|
143
|
-
_v$
|
|
144
|
-
_v$
|
|
145
|
-
_v$
|
|
163
|
+
var _v$24 = fieldId(), _v$25 = props.field.name, _v$26 = props.disabled, _v$27 = props.field.required, _v$28 = props.field.minDate, _v$29 = props.field.maxDate, _v$30 = !!props.error, _v$31 = props.error ? errorId() : void 0, _v$32 = baseInputClass();
|
|
164
|
+
_v$24 !== _p$.e && web.setAttribute(_el$14, "id", _p$.e = _v$24);
|
|
165
|
+
_v$25 !== _p$.t && web.setAttribute(_el$14, "name", _p$.t = _v$25);
|
|
166
|
+
_v$26 !== _p$.a && web.setProperty(_el$14, "disabled", _p$.a = _v$26);
|
|
167
|
+
_v$27 !== _p$.o && web.setProperty(_el$14, "required", _p$.o = _v$27);
|
|
168
|
+
_v$28 !== _p$.i && web.setAttribute(_el$14, "min", _p$.i = _v$28);
|
|
169
|
+
_v$29 !== _p$.n && web.setAttribute(_el$14, "max", _p$.n = _v$29);
|
|
170
|
+
_v$30 !== _p$.s && web.setAttribute(_el$14, "aria-invalid", _p$.s = _v$30);
|
|
171
|
+
_v$31 !== _p$.h && web.setAttribute(_el$14, "aria-describedby", _p$.h = _v$31);
|
|
172
|
+
_v$32 !== _p$.r && web.className(_el$14, _p$.r = _v$32);
|
|
146
173
|
return _p$;
|
|
147
174
|
}, {
|
|
148
175
|
e: void 0,
|
|
@@ -155,30 +182,30 @@ const FormFieldRenderer = (props) => {
|
|
|
155
182
|
h: void 0,
|
|
156
183
|
r: void 0
|
|
157
184
|
});
|
|
158
|
-
web.effect(() => web.setProperty(_el$
|
|
185
|
+
web.effect(() => web.setProperty(_el$14, "value", props.value || ""));
|
|
159
186
|
web.runHydrationEvents();
|
|
160
|
-
return _el$
|
|
187
|
+
return _el$14;
|
|
161
188
|
}
|
|
162
189
|
}), web.createComponent(solidJs.Match, {
|
|
163
190
|
get when() {
|
|
164
191
|
return props.field.type === "textarea";
|
|
165
192
|
},
|
|
166
193
|
get children() {
|
|
167
|
-
var _el$
|
|
168
|
-
_el$
|
|
194
|
+
var _el$15 = web.getNextElement(_tmpl$8);
|
|
195
|
+
_el$15.$$input = (e) => props.onChange(e.currentTarget.value);
|
|
169
196
|
web.effect((_p$) => {
|
|
170
|
-
var _v$
|
|
171
|
-
_v$
|
|
172
|
-
_v$
|
|
173
|
-
_v$
|
|
174
|
-
_v$
|
|
175
|
-
_v$
|
|
176
|
-
_v$
|
|
177
|
-
_v$
|
|
178
|
-
_v$
|
|
179
|
-
_v$
|
|
180
|
-
_v$
|
|
181
|
-
_v$
|
|
197
|
+
var _v$33 = fieldId(), _v$34 = props.field.name, _v$35 = props.field.placeholder, _v$36 = props.disabled, _v$37 = props.field.required, _v$38 = props.field.rows || 4, _v$39 = props.field.minLength, _v$40 = props.field.maxLength, _v$41 = !!props.error, _v$42 = props.error ? errorId() : void 0, _v$43 = baseInputClass();
|
|
198
|
+
_v$33 !== _p$.e && web.setAttribute(_el$15, "id", _p$.e = _v$33);
|
|
199
|
+
_v$34 !== _p$.t && web.setAttribute(_el$15, "name", _p$.t = _v$34);
|
|
200
|
+
_v$35 !== _p$.a && web.setAttribute(_el$15, "placeholder", _p$.a = _v$35);
|
|
201
|
+
_v$36 !== _p$.o && web.setProperty(_el$15, "disabled", _p$.o = _v$36);
|
|
202
|
+
_v$37 !== _p$.i && web.setProperty(_el$15, "required", _p$.i = _v$37);
|
|
203
|
+
_v$38 !== _p$.n && web.setAttribute(_el$15, "rows", _p$.n = _v$38);
|
|
204
|
+
_v$39 !== _p$.s && web.setAttribute(_el$15, "minlength", _p$.s = _v$39);
|
|
205
|
+
_v$40 !== _p$.h && web.setAttribute(_el$15, "maxlength", _p$.h = _v$40);
|
|
206
|
+
_v$41 !== _p$.r && web.setAttribute(_el$15, "aria-invalid", _p$.r = _v$41);
|
|
207
|
+
_v$42 !== _p$.d && web.setAttribute(_el$15, "aria-describedby", _p$.d = _v$42);
|
|
208
|
+
_v$43 !== _p$.l && web.className(_el$15, _p$.l = _v$43);
|
|
182
209
|
return _p$;
|
|
183
210
|
}, {
|
|
184
211
|
e: void 0,
|
|
@@ -193,48 +220,48 @@ const FormFieldRenderer = (props) => {
|
|
|
193
220
|
d: void 0,
|
|
194
221
|
l: void 0
|
|
195
222
|
});
|
|
196
|
-
web.effect(() => web.setProperty(_el$
|
|
223
|
+
web.effect(() => web.setProperty(_el$15, "value", props.value || ""));
|
|
197
224
|
web.runHydrationEvents();
|
|
198
|
-
return _el$
|
|
225
|
+
return _el$15;
|
|
199
226
|
}
|
|
200
227
|
}), web.createComponent(solidJs.Match, {
|
|
201
228
|
get when() {
|
|
202
229
|
return web.memo(() => props.field.type === "select")() && !props.field.multiple;
|
|
203
230
|
},
|
|
204
231
|
get children() {
|
|
205
|
-
var _el$
|
|
206
|
-
_el$
|
|
207
|
-
web.insert(_el$
|
|
232
|
+
var _el$16 = web.getNextElement(_tmpl$0), _el$18 = _el$16.firstChild, [_el$19, _co$5] = web.getNextMarker(_el$18.nextSibling), _el$20 = _el$19.nextSibling, [_el$21, _co$6] = web.getNextMarker(_el$20.nextSibling);
|
|
233
|
+
_el$16.addEventListener("change", (e) => props.onChange(e.currentTarget.value));
|
|
234
|
+
web.insert(_el$16, web.createComponent(solidJs.Show, {
|
|
208
235
|
get when() {
|
|
209
236
|
return props.field.placeholder;
|
|
210
237
|
},
|
|
211
238
|
get children() {
|
|
212
|
-
var _el$
|
|
213
|
-
web.insert(_el$
|
|
214
|
-
return _el$
|
|
239
|
+
var _el$17 = web.getNextElement(_tmpl$9);
|
|
240
|
+
web.insert(_el$17, () => props.field.placeholder);
|
|
241
|
+
return _el$17;
|
|
215
242
|
}
|
|
216
|
-
}), _el$
|
|
217
|
-
web.insert(_el$
|
|
243
|
+
}), _el$19, _co$5);
|
|
244
|
+
web.insert(_el$16, web.createComponent(solidJs.For, {
|
|
218
245
|
get each() {
|
|
219
246
|
return props.field.options;
|
|
220
247
|
},
|
|
221
248
|
children: (option) => (() => {
|
|
222
|
-
var _el$
|
|
223
|
-
web.insert(_el$
|
|
224
|
-
web.effect(() => web.setProperty(_el$
|
|
225
|
-
web.effect(() => web.setProperty(_el$
|
|
226
|
-
return _el$
|
|
249
|
+
var _el$49 = web.getNextElement(_tmpl$17);
|
|
250
|
+
web.insert(_el$49, () => option.label);
|
|
251
|
+
web.effect(() => web.setProperty(_el$49, "disabled", option.disabled));
|
|
252
|
+
web.effect(() => web.setProperty(_el$49, "value", option.value));
|
|
253
|
+
return _el$49;
|
|
227
254
|
})()
|
|
228
|
-
}), _el$
|
|
255
|
+
}), _el$21, _co$6);
|
|
229
256
|
web.effect((_p$) => {
|
|
230
|
-
var _v$
|
|
231
|
-
_v$
|
|
232
|
-
_v$
|
|
233
|
-
_v$
|
|
234
|
-
_v$
|
|
235
|
-
_v$
|
|
236
|
-
_v$
|
|
237
|
-
_v$
|
|
257
|
+
var _v$44 = fieldId(), _v$45 = props.field.name, _v$46 = props.disabled, _v$47 = props.field.required, _v$48 = !!props.error, _v$49 = props.error ? errorId() : void 0, _v$50 = baseInputClass();
|
|
258
|
+
_v$44 !== _p$.e && web.setAttribute(_el$16, "id", _p$.e = _v$44);
|
|
259
|
+
_v$45 !== _p$.t && web.setAttribute(_el$16, "name", _p$.t = _v$45);
|
|
260
|
+
_v$46 !== _p$.a && web.setProperty(_el$16, "disabled", _p$.a = _v$46);
|
|
261
|
+
_v$47 !== _p$.o && web.setProperty(_el$16, "required", _p$.o = _v$47);
|
|
262
|
+
_v$48 !== _p$.i && web.setAttribute(_el$16, "aria-invalid", _p$.i = _v$48);
|
|
263
|
+
_v$49 !== _p$.n && web.setAttribute(_el$16, "aria-describedby", _p$.n = _v$49);
|
|
264
|
+
_v$50 !== _p$.s && web.className(_el$16, _p$.s = _v$50);
|
|
238
265
|
return _p$;
|
|
239
266
|
}, {
|
|
240
267
|
e: void 0,
|
|
@@ -245,32 +272,32 @@ const FormFieldRenderer = (props) => {
|
|
|
245
272
|
n: void 0,
|
|
246
273
|
s: void 0
|
|
247
274
|
});
|
|
248
|
-
web.effect(() => web.setProperty(_el$
|
|
249
|
-
return _el$
|
|
275
|
+
web.effect(() => web.setProperty(_el$16, "value", props.value || ""));
|
|
276
|
+
return _el$16;
|
|
250
277
|
}
|
|
251
278
|
}), web.createComponent(solidJs.Match, {
|
|
252
279
|
get when() {
|
|
253
280
|
return props.field.type === "checkbox";
|
|
254
281
|
},
|
|
255
282
|
get children() {
|
|
256
|
-
var _el$
|
|
257
|
-
_el$
|
|
258
|
-
web.insert(_el$
|
|
259
|
-
web.insert(_el$
|
|
283
|
+
var _el$22 = web.getNextElement(_tmpl$1), _el$23 = _el$22.firstChild, _el$24 = _el$23.nextSibling, _el$26 = _el$24.firstChild, [_el$27, _co$7] = web.getNextMarker(_el$26.nextSibling), _el$28 = _el$27.nextSibling, [_el$29, _co$8] = web.getNextMarker(_el$28.nextSibling);
|
|
284
|
+
_el$23.addEventListener("change", (e) => props.onChange(e.currentTarget.checked));
|
|
285
|
+
web.insert(_el$24, () => props.field.checkboxLabel || props.field.label, _el$27, _co$7);
|
|
286
|
+
web.insert(_el$24, web.createComponent(solidJs.Show, {
|
|
260
287
|
get when() {
|
|
261
288
|
return props.field.required;
|
|
262
289
|
},
|
|
263
290
|
get children() {
|
|
264
291
|
return web.getNextElement(_tmpl$);
|
|
265
292
|
}
|
|
266
|
-
}), _el$
|
|
293
|
+
}), _el$29, _co$8);
|
|
267
294
|
web.effect((_p$) => {
|
|
268
|
-
var _v$
|
|
269
|
-
_v$
|
|
270
|
-
_v$
|
|
271
|
-
_v$
|
|
272
|
-
_v$
|
|
273
|
-
_v$
|
|
295
|
+
var _v$51 = fieldId(), _v$52 = props.field.name, _v$53 = props.disabled, _v$54 = !!props.error, _v$55 = props.error ? errorId() : void 0;
|
|
296
|
+
_v$51 !== _p$.e && web.setAttribute(_el$23, "id", _p$.e = _v$51);
|
|
297
|
+
_v$52 !== _p$.t && web.setAttribute(_el$23, "name", _p$.t = _v$52);
|
|
298
|
+
_v$53 !== _p$.a && web.setProperty(_el$23, "disabled", _p$.a = _v$53);
|
|
299
|
+
_v$54 !== _p$.o && web.setAttribute(_el$23, "aria-invalid", _p$.o = _v$54);
|
|
300
|
+
_v$55 !== _p$.i && web.setAttribute(_el$23, "aria-describedby", _p$.i = _v$55);
|
|
274
301
|
return _p$;
|
|
275
302
|
}, {
|
|
276
303
|
e: void 0,
|
|
@@ -279,8 +306,8 @@ const FormFieldRenderer = (props) => {
|
|
|
279
306
|
o: void 0,
|
|
280
307
|
i: void 0
|
|
281
308
|
});
|
|
282
|
-
web.effect(() => web.setProperty(_el$
|
|
283
|
-
return _el$
|
|
309
|
+
web.effect(() => web.setProperty(_el$23, "checked", props.value || false));
|
|
310
|
+
return _el$22;
|
|
284
311
|
}
|
|
285
312
|
}), web.createComponent(solidJs.Match, {
|
|
286
313
|
get when() {
|
|
@@ -333,57 +360,57 @@ const FormFieldRenderer = (props) => {
|
|
|
333
360
|
return props.field.type === "radio";
|
|
334
361
|
},
|
|
335
362
|
get children() {
|
|
336
|
-
var _el$
|
|
337
|
-
web.insert(_el$
|
|
363
|
+
var _el$30 = web.getNextElement(_tmpl$10);
|
|
364
|
+
web.insert(_el$30, web.createComponent(solidJs.For, {
|
|
338
365
|
get each() {
|
|
339
366
|
return props.field.options;
|
|
340
367
|
},
|
|
341
368
|
children: (option, index) => (() => {
|
|
342
|
-
var _el$
|
|
343
|
-
_el$
|
|
344
|
-
web.insert(_el$
|
|
369
|
+
var _el$50 = web.getNextElement(_tmpl$18), _el$51 = _el$50.firstChild, _el$52 = _el$51.nextSibling;
|
|
370
|
+
_el$51.addEventListener("change", () => props.onChange(option.value));
|
|
371
|
+
web.insert(_el$52, () => option.label);
|
|
345
372
|
web.effect((_p$) => {
|
|
346
|
-
var _v$
|
|
347
|
-
_v$
|
|
348
|
-
_v$
|
|
349
|
-
_v$
|
|
373
|
+
var _v$64 = props.field.name, _v$65 = `${fieldId()}-${index()}`, _v$66 = props.disabled || option.disabled;
|
|
374
|
+
_v$64 !== _p$.e && web.setAttribute(_el$51, "name", _p$.e = _v$64);
|
|
375
|
+
_v$65 !== _p$.t && web.setAttribute(_el$51, "id", _p$.t = _v$65);
|
|
376
|
+
_v$66 !== _p$.a && web.setProperty(_el$51, "disabled", _p$.a = _v$66);
|
|
350
377
|
return _p$;
|
|
351
378
|
}, {
|
|
352
379
|
e: void 0,
|
|
353
380
|
t: void 0,
|
|
354
381
|
a: void 0
|
|
355
382
|
});
|
|
356
|
-
web.effect(() => web.setProperty(_el$
|
|
357
|
-
web.effect(() => web.setProperty(_el$
|
|
358
|
-
return _el$
|
|
383
|
+
web.effect(() => web.setProperty(_el$51, "value", option.value));
|
|
384
|
+
web.effect(() => web.setProperty(_el$51, "checked", props.value === option.value));
|
|
385
|
+
return _el$50;
|
|
359
386
|
})()
|
|
360
387
|
}));
|
|
361
388
|
web.effect((_p$) => {
|
|
362
|
-
var _v$
|
|
363
|
-
_v$
|
|
364
|
-
_v$
|
|
365
|
-
_v$
|
|
389
|
+
var _v$56 = props.field.label ? `${fieldId()}-label` : void 0, _v$57 = !!props.error, _v$58 = props.error ? errorId() : void 0;
|
|
390
|
+
_v$56 !== _p$.e && web.setAttribute(_el$30, "aria-labelledby", _p$.e = _v$56);
|
|
391
|
+
_v$57 !== _p$.t && web.setAttribute(_el$30, "aria-invalid", _p$.t = _v$57);
|
|
392
|
+
_v$58 !== _p$.a && web.setAttribute(_el$30, "aria-describedby", _p$.a = _v$58);
|
|
366
393
|
return _p$;
|
|
367
394
|
}, {
|
|
368
395
|
e: void 0,
|
|
369
396
|
t: void 0,
|
|
370
397
|
a: void 0
|
|
371
398
|
});
|
|
372
|
-
return _el$
|
|
399
|
+
return _el$30;
|
|
373
400
|
}
|
|
374
401
|
}), web.createComponent(solidJs.Match, {
|
|
375
402
|
when: true,
|
|
376
403
|
get children() {
|
|
377
404
|
return [(() => {
|
|
378
|
-
var _el$
|
|
379
|
-
_el$
|
|
405
|
+
var _el$31 = web.getNextElement(_tmpl$11);
|
|
406
|
+
_el$31.$$input = (e) => props.onChange(e.currentTarget.value);
|
|
380
407
|
web.effect((_p$) => {
|
|
381
|
-
var _v$
|
|
382
|
-
_v$
|
|
383
|
-
_v$
|
|
384
|
-
_v$
|
|
385
|
-
_v$
|
|
386
|
-
_v$
|
|
408
|
+
var _v$59 = fieldId(), _v$60 = props.field.name, _v$61 = props.field.placeholder || `(${props.field.type})`, _v$62 = props.disabled, _v$63 = baseInputClass();
|
|
409
|
+
_v$59 !== _p$.e && web.setAttribute(_el$31, "id", _p$.e = _v$59);
|
|
410
|
+
_v$60 !== _p$.t && web.setAttribute(_el$31, "name", _p$.t = _v$60);
|
|
411
|
+
_v$61 !== _p$.a && web.setAttribute(_el$31, "placeholder", _p$.a = _v$61);
|
|
412
|
+
_v$62 !== _p$.o && web.setProperty(_el$31, "disabled", _p$.o = _v$62);
|
|
413
|
+
_v$63 !== _p$.i && web.className(_el$31, _p$.i = _v$63);
|
|
387
414
|
return _p$;
|
|
388
415
|
}, {
|
|
389
416
|
e: void 0,
|
|
@@ -392,39 +419,50 @@ const FormFieldRenderer = (props) => {
|
|
|
392
419
|
o: void 0,
|
|
393
420
|
i: void 0
|
|
394
421
|
});
|
|
395
|
-
web.effect(() => web.setProperty(_el$
|
|
422
|
+
web.effect(() => web.setProperty(_el$31, "value", props.value || ""));
|
|
396
423
|
web.runHydrationEvents();
|
|
397
|
-
return _el$
|
|
424
|
+
return _el$31;
|
|
398
425
|
})(), (() => {
|
|
399
|
-
var _el$
|
|
400
|
-
web.insert(_el$
|
|
401
|
-
return _el$
|
|
426
|
+
var _el$32 = web.getNextElement(_tmpl$12), _el$33 = _el$32.firstChild, _el$34 = _el$33.nextSibling, [_el$35, _co$9] = web.getNextMarker(_el$34.nextSibling);
|
|
427
|
+
web.insert(_el$32, () => props.field.type, _el$35, _co$9);
|
|
428
|
+
return _el$32;
|
|
402
429
|
})()];
|
|
403
430
|
}
|
|
404
431
|
})];
|
|
405
432
|
}
|
|
406
|
-
}), _el$
|
|
433
|
+
}), _el$42, _co$1);
|
|
434
|
+
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
435
|
+
get when() {
|
|
436
|
+
return props.field.statusReason;
|
|
437
|
+
},
|
|
438
|
+
get children() {
|
|
439
|
+
var _el$36 = web.getNextElement(_tmpl$13);
|
|
440
|
+
web.insert(_el$36, () => props.field.statusReason);
|
|
441
|
+
web.effect(() => web.className(_el$36, `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"}`));
|
|
442
|
+
return _el$36;
|
|
443
|
+
}
|
|
444
|
+
}), _el$44, _co$10);
|
|
407
445
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
408
446
|
get when() {
|
|
409
|
-
return web.memo(() => !!props.field.helpText)() && !props.
|
|
447
|
+
return web.memo(() => !!(props.field.helpText && !props.error))() && !props.field.statusReason;
|
|
410
448
|
},
|
|
411
449
|
get children() {
|
|
412
|
-
var _el$
|
|
413
|
-
web.insert(_el$
|
|
414
|
-
return _el$
|
|
450
|
+
var _el$37 = web.getNextElement(_tmpl$14);
|
|
451
|
+
web.insert(_el$37, () => props.field.helpText);
|
|
452
|
+
return _el$37;
|
|
415
453
|
}
|
|
416
|
-
}), _el$
|
|
454
|
+
}), _el$46, _co$11);
|
|
417
455
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
418
456
|
get when() {
|
|
419
457
|
return props.error;
|
|
420
458
|
},
|
|
421
459
|
get children() {
|
|
422
|
-
var _el$
|
|
423
|
-
web.insert(_el$
|
|
424
|
-
web.effect(() => web.setAttribute(_el$
|
|
425
|
-
return _el$
|
|
460
|
+
var _el$38 = web.getNextElement(_tmpl$15);
|
|
461
|
+
web.insert(_el$38, () => props.error);
|
|
462
|
+
web.effect(() => web.setAttribute(_el$38, "id", errorId()));
|
|
463
|
+
return _el$38;
|
|
426
464
|
}
|
|
427
|
-
}), _el$
|
|
465
|
+
}), _el$48, _co$12);
|
|
428
466
|
return _el$;
|
|
429
467
|
}
|
|
430
468
|
});
|
|
@@ -453,84 +491,84 @@ const MultiSelectField = (props) => {
|
|
|
453
491
|
return (props.field.options || []).filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
|
|
454
492
|
};
|
|
455
493
|
return (() => {
|
|
456
|
-
var _el$
|
|
457
|
-
web.insert(_el$
|
|
494
|
+
var _el$53 = web.getNextElement(_tmpl$23), _el$68 = _el$53.firstChild, [_el$69, _co$16] = web.getNextMarker(_el$68.nextSibling), _el$55 = _el$69.nextSibling, _el$56 = _el$55.firstChild, _el$70 = _el$55.nextSibling, [_el$71, _co$17] = web.getNextMarker(_el$70.nextSibling);
|
|
495
|
+
web.insert(_el$53, web.createComponent(solidJs.Show, {
|
|
458
496
|
get when() {
|
|
459
497
|
return props.value.length > 0;
|
|
460
498
|
},
|
|
461
499
|
get children() {
|
|
462
|
-
var _el$
|
|
463
|
-
web.insert(_el$
|
|
500
|
+
var _el$54 = web.getNextElement(_tmpl$19);
|
|
501
|
+
web.insert(_el$54, web.createComponent(solidJs.For, {
|
|
464
502
|
get each() {
|
|
465
503
|
return props.value;
|
|
466
504
|
},
|
|
467
505
|
children: (val) => (() => {
|
|
468
|
-
var _el$
|
|
469
|
-
web.insert(_el$
|
|
470
|
-
_el$
|
|
471
|
-
web.effect(() => web.setAttribute(_el$
|
|
506
|
+
var _el$72 = web.getNextElement(_tmpl$24), _el$74 = _el$72.firstChild, [_el$75, _co$18] = web.getNextMarker(_el$74.nextSibling), _el$73 = _el$75.nextSibling;
|
|
507
|
+
web.insert(_el$72, () => getLabel(val), _el$75, _co$18);
|
|
508
|
+
_el$73.$$click = () => removeChip(val);
|
|
509
|
+
web.effect(() => web.setAttribute(_el$73, "aria-label", `Remove ${getLabel(val)}`));
|
|
472
510
|
web.runHydrationEvents();
|
|
473
|
-
return _el$
|
|
511
|
+
return _el$72;
|
|
474
512
|
})()
|
|
475
513
|
}));
|
|
476
|
-
return _el$
|
|
514
|
+
return _el$54;
|
|
477
515
|
}
|
|
478
|
-
}), _el$
|
|
479
|
-
_el$
|
|
516
|
+
}), _el$69, _co$16);
|
|
517
|
+
_el$55.$$click = () => {
|
|
480
518
|
setOpen(!open());
|
|
481
519
|
if (!open()) setFilter("");
|
|
482
520
|
};
|
|
483
|
-
web.insert(_el$
|
|
521
|
+
web.insert(_el$56, (() => {
|
|
484
522
|
var _c$ = web.memo(() => !!props.value.length);
|
|
485
523
|
return () => _c$() ? `${props.value.length} selected` : props.field.placeholder || "Select...";
|
|
486
524
|
})());
|
|
487
|
-
web.insert(_el$
|
|
525
|
+
web.insert(_el$53, web.createComponent(solidJs.Show, {
|
|
488
526
|
get when() {
|
|
489
527
|
return open();
|
|
490
528
|
},
|
|
491
529
|
get children() {
|
|
492
|
-
var _el$
|
|
493
|
-
web.insert(_el$
|
|
530
|
+
var _el$57 = web.getNextElement(_tmpl$22), _el$66 = _el$57.firstChild, [_el$67, _co$15] = web.getNextMarker(_el$66.nextSibling), _el$60 = _el$67.nextSibling, _el$62 = _el$60.firstChild, [_el$63, _co$13] = web.getNextMarker(_el$62.nextSibling), _el$64 = _el$63.nextSibling, [_el$65, _co$14] = web.getNextMarker(_el$64.nextSibling);
|
|
531
|
+
web.insert(_el$57, web.createComponent(solidJs.Show, {
|
|
494
532
|
get when() {
|
|
495
533
|
var _a;
|
|
496
534
|
return (((_a = props.field.options) == null ? void 0 : _a.length) || 0) > 10;
|
|
497
535
|
},
|
|
498
536
|
get children() {
|
|
499
|
-
var _el$
|
|
500
|
-
_el$
|
|
501
|
-
web.effect(() => web.setProperty(_el$
|
|
537
|
+
var _el$58 = web.getNextElement(_tmpl$20), _el$59 = _el$58.firstChild;
|
|
538
|
+
_el$59.$$input = (e) => setFilter(e.currentTarget.value);
|
|
539
|
+
web.effect(() => web.setProperty(_el$59, "value", filter()));
|
|
502
540
|
web.runHydrationEvents();
|
|
503
|
-
return _el$
|
|
541
|
+
return _el$58;
|
|
504
542
|
}
|
|
505
|
-
}), _el$
|
|
506
|
-
web.insert(_el$
|
|
543
|
+
}), _el$67, _co$15);
|
|
544
|
+
web.insert(_el$60, web.createComponent(solidJs.For, {
|
|
507
545
|
get each() {
|
|
508
546
|
return filteredOptions();
|
|
509
547
|
},
|
|
510
548
|
children: (option) => (() => {
|
|
511
|
-
var _el$
|
|
512
|
-
_el$
|
|
513
|
-
web.insert(_el$
|
|
514
|
-
web.effect(() => web.setProperty(_el$
|
|
515
|
-
return _el$
|
|
549
|
+
var _el$76 = web.getNextElement(_tmpl$25), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
|
|
550
|
+
_el$77.addEventListener("change", () => toggle(option.value));
|
|
551
|
+
web.insert(_el$78, () => option.label);
|
|
552
|
+
web.effect(() => web.setProperty(_el$77, "checked", (props.value || []).includes(option.value)));
|
|
553
|
+
return _el$76;
|
|
516
554
|
})()
|
|
517
|
-
}), _el$
|
|
518
|
-
web.insert(_el$
|
|
555
|
+
}), _el$63, _co$13);
|
|
556
|
+
web.insert(_el$60, web.createComponent(solidJs.Show, {
|
|
519
557
|
get when() {
|
|
520
558
|
return filteredOptions().length === 0;
|
|
521
559
|
},
|
|
522
560
|
get children() {
|
|
523
|
-
return web.getNextElement(_tmpl$
|
|
561
|
+
return web.getNextElement(_tmpl$21);
|
|
524
562
|
}
|
|
525
|
-
}), _el$
|
|
526
|
-
return _el$
|
|
563
|
+
}), _el$65, _co$14);
|
|
564
|
+
return _el$57;
|
|
527
565
|
}
|
|
528
|
-
}), _el$
|
|
566
|
+
}), _el$71, _co$17);
|
|
529
567
|
web.effect((_p$) => {
|
|
530
|
-
var _v$
|
|
531
|
-
_v$
|
|
532
|
-
_v$
|
|
533
|
-
_v$
|
|
568
|
+
var _v$67 = props.disabled, _v$68 = `${props.baseClass} text-left flex items-center justify-between`, _v$69 = props.value.length ? "text-gray-900 dark:text-white" : "text-gray-400";
|
|
569
|
+
_v$67 !== _p$.e && web.setProperty(_el$55, "disabled", _p$.e = _v$67);
|
|
570
|
+
_v$68 !== _p$.t && web.className(_el$55, _p$.t = _v$68);
|
|
571
|
+
_v$69 !== _p$.a && web.className(_el$56, _p$.a = _v$69);
|
|
534
572
|
return _p$;
|
|
535
573
|
}, {
|
|
536
574
|
e: void 0,
|
|
@@ -538,7 +576,7 @@ const MultiSelectField = (props) => {
|
|
|
538
576
|
a: void 0
|
|
539
577
|
});
|
|
540
578
|
web.runHydrationEvents();
|
|
541
|
-
return _el$
|
|
579
|
+
return _el$53;
|
|
542
580
|
})();
|
|
543
581
|
};
|
|
544
582
|
const AutocompleteField = (props) => {
|
|
@@ -621,90 +659,90 @@ const AutocompleteField = (props) => {
|
|
|
621
659
|
if (debounceTimer) clearTimeout(debounceTimer);
|
|
622
660
|
});
|
|
623
661
|
return (() => {
|
|
624
|
-
var _el$
|
|
625
|
-
web.insert(_el$
|
|
662
|
+
var _el$79 = web.getNextElement(_tmpl$27), _el$83 = _el$79.firstChild, [_el$84, _co$19] = web.getNextMarker(_el$83.nextSibling), _el$81 = _el$84.nextSibling, _el$85 = _el$81.nextSibling, [_el$86, _co$20] = web.getNextMarker(_el$85.nextSibling);
|
|
663
|
+
web.insert(_el$79, web.createComponent(solidJs.Show, {
|
|
626
664
|
get when() {
|
|
627
665
|
return web.memo(() => !!isMultiple())() && selectedValues().length > 0;
|
|
628
666
|
},
|
|
629
667
|
get children() {
|
|
630
|
-
var _el$
|
|
631
|
-
web.insert(_el$
|
|
668
|
+
var _el$80 = web.getNextElement(_tmpl$19);
|
|
669
|
+
web.insert(_el$80, web.createComponent(solidJs.For, {
|
|
632
670
|
get each() {
|
|
633
671
|
return selectedValues();
|
|
634
672
|
},
|
|
635
673
|
children: (val) => (() => {
|
|
636
|
-
var _el$
|
|
637
|
-
web.insert(_el$
|
|
638
|
-
_el$
|
|
639
|
-
web.effect(() => web.setAttribute(_el$
|
|
674
|
+
var _el$87 = web.getNextElement(_tmpl$24), _el$89 = _el$87.firstChild, [_el$90, _co$21] = web.getNextMarker(_el$89.nextSibling), _el$88 = _el$90.nextSibling;
|
|
675
|
+
web.insert(_el$87, () => getLabel(val), _el$90, _co$21);
|
|
676
|
+
_el$88.$$click = () => removeChip(val);
|
|
677
|
+
web.effect(() => web.setAttribute(_el$88, "aria-label", `Remove ${getLabel(val)}`));
|
|
640
678
|
web.runHydrationEvents();
|
|
641
|
-
return _el$
|
|
679
|
+
return _el$87;
|
|
642
680
|
})()
|
|
643
681
|
}));
|
|
644
|
-
return _el$
|
|
682
|
+
return _el$80;
|
|
645
683
|
}
|
|
646
|
-
}), _el$
|
|
647
|
-
_el$
|
|
648
|
-
_el$
|
|
684
|
+
}), _el$84, _co$19);
|
|
685
|
+
_el$81.addEventListener("blur", () => setTimeout(() => setIsOpen(false), 200));
|
|
686
|
+
_el$81.addEventListener("focus", () => {
|
|
649
687
|
if (suggestions().length) setIsOpen(true);
|
|
650
688
|
});
|
|
651
|
-
_el$
|
|
652
|
-
web.insert(_el$
|
|
689
|
+
_el$81.$$input = (e) => handleInput(e.currentTarget.value);
|
|
690
|
+
web.insert(_el$79, web.createComponent(solidJs.Show, {
|
|
653
691
|
get when() {
|
|
654
692
|
return web.memo(() => !!isOpen())() && suggestions().length > 0;
|
|
655
693
|
},
|
|
656
694
|
get children() {
|
|
657
|
-
var _el$
|
|
658
|
-
web.insert(_el$
|
|
695
|
+
var _el$82 = web.getNextElement(_tmpl$26);
|
|
696
|
+
web.insert(_el$82, web.createComponent(solidJs.For, {
|
|
659
697
|
get each() {
|
|
660
698
|
return suggestions();
|
|
661
699
|
},
|
|
662
700
|
children: (item) => {
|
|
663
701
|
const isSelected = () => isMultiple() && selectedValues().includes(item.value);
|
|
664
702
|
return (() => {
|
|
665
|
-
var _el$
|
|
666
|
-
_el$
|
|
667
|
-
_el$
|
|
668
|
-
web.insert(_el$
|
|
669
|
-
web.insert(_el$
|
|
703
|
+
var _el$91 = web.getNextElement(_tmpl$29), _el$93 = _el$91.firstChild, [_el$94, _co$22] = web.getNextMarker(_el$93.nextSibling), _el$95 = _el$94.nextSibling, [_el$96, _co$23] = web.getNextMarker(_el$95.nextSibling);
|
|
704
|
+
_el$91.$$click = () => selectSuggestion(item);
|
|
705
|
+
_el$91.$$mousedown = (e) => e.preventDefault();
|
|
706
|
+
web.insert(_el$91, () => item.label, _el$94, _co$22);
|
|
707
|
+
web.insert(_el$91, web.createComponent(solidJs.Show, {
|
|
670
708
|
get when() {
|
|
671
709
|
return isSelected();
|
|
672
710
|
},
|
|
673
711
|
get children() {
|
|
674
|
-
return web.getNextElement(_tmpl$
|
|
712
|
+
return web.getNextElement(_tmpl$28);
|
|
675
713
|
}
|
|
676
|
-
}), _el$
|
|
714
|
+
}), _el$96, _co$23);
|
|
677
715
|
web.effect((_p$) => {
|
|
678
|
-
var _v$
|
|
679
|
-
_v$
|
|
680
|
-
_v$
|
|
716
|
+
var _v$73 = `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$74 = isSelected();
|
|
717
|
+
_v$73 !== _p$.e && web.className(_el$91, _p$.e = _v$73);
|
|
718
|
+
_v$74 !== _p$.t && web.setProperty(_el$91, "disabled", _p$.t = _v$74);
|
|
681
719
|
return _p$;
|
|
682
720
|
}, {
|
|
683
721
|
e: void 0,
|
|
684
722
|
t: void 0
|
|
685
723
|
});
|
|
686
724
|
web.runHydrationEvents();
|
|
687
|
-
return _el$
|
|
725
|
+
return _el$91;
|
|
688
726
|
})();
|
|
689
727
|
}
|
|
690
728
|
}));
|
|
691
|
-
return _el$
|
|
729
|
+
return _el$82;
|
|
692
730
|
}
|
|
693
|
-
}), _el$
|
|
731
|
+
}), _el$86, _co$20);
|
|
694
732
|
web.effect((_p$) => {
|
|
695
|
-
var _v$
|
|
696
|
-
_v$
|
|
697
|
-
_v$
|
|
698
|
-
_v$
|
|
733
|
+
var _v$70 = isMultiple() && selectedValues().length ? "Add more..." : props.field.placeholder, _v$71 = props.disabled, _v$72 = props.baseClass;
|
|
734
|
+
_v$70 !== _p$.e && web.setAttribute(_el$81, "placeholder", _p$.e = _v$70);
|
|
735
|
+
_v$71 !== _p$.t && web.setProperty(_el$81, "disabled", _p$.t = _v$71);
|
|
736
|
+
_v$72 !== _p$.a && web.className(_el$81, _p$.a = _v$72);
|
|
699
737
|
return _p$;
|
|
700
738
|
}, {
|
|
701
739
|
e: void 0,
|
|
702
740
|
t: void 0,
|
|
703
741
|
a: void 0
|
|
704
742
|
});
|
|
705
|
-
web.effect(() => web.setProperty(_el$
|
|
743
|
+
web.effect(() => web.setProperty(_el$81, "value", query()));
|
|
706
744
|
web.runHydrationEvents();
|
|
707
|
-
return _el$
|
|
745
|
+
return _el$79;
|
|
708
746
|
})();
|
|
709
747
|
};
|
|
710
748
|
web.delegateEvents(["input", "click", "mousedown"]);
|