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