@seed-ship/mcp-ui-solid 2.8.1 → 2.9.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/dist/components/ScratchpadPanel.cjs +598 -181
- package/dist/components/ScratchpadPanel.cjs.map +1 -1
- package/dist/components/ScratchpadPanel.d.ts +8 -9
- package/dist/components/ScratchpadPanel.d.ts.map +1 -1
- package/dist/components/ScratchpadPanel.js +600 -183
- package/dist/components/ScratchpadPanel.js.map +1 -1
- package/dist/types/chat-bus.d.ts +13 -0
- package/dist/types/chat-bus.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/ScratchpadPanel.tsx +377 -191
- package/src/types/chat-bus.ts +9 -0
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -2,7 +2,10 @@
|
|
|
2
2
|
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 FormFieldRenderer = require("./FormFieldRenderer.cjs");
|
|
6
|
+
var _tmpl$ = /* @__PURE__ */ web.template(`<svg 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">`), _tmpl$2 = /* @__PURE__ */ web.template(`<button class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"aria-label=Close><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$4 = /* @__PURE__ */ web.template(`<div class="flex flex-col items-center gap-2 py-4 text-center"><span class=text-2xl>🔍</span><p class="text-sm text-gray-500 dark:text-gray-400">No results for these filters</p><button type=button class="px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors">Modify filters`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700"><button type=button class="w-full px-4 py-2.5 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"><svg class="w-4 h-4"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>Search`), _tmpl$7 = /* @__PURE__ */ web.template(`<div style=overflow-y:auto><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/><!$><!/>`), _tmpl$8 = /* @__PURE__ */ web.template(`<div style="animation:scratchpad-slide-down 0.2s ease-out"><div><div class="flex items-center gap-2"><span class=text-base>📝</span><h3 class="text-sm font-semibold text-gray-900 dark:text-white"></h3><!$><!/></div><div class="flex items-center gap-2"><span></span><!$><!/></div></div><!$><!/><style>
|
|
7
|
+
@keyframes scratchpad-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
|
|
8
|
+
`), _tmpl$9 = /* @__PURE__ */ web.template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$0 = /* @__PURE__ */ web.template(`<div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">Preview</span><span class="px-1.5 py-0.5 text-xs font-bold bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded">`), _tmpl$1 = /* @__PURE__ */ web.template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$10 = /* @__PURE__ */ web.template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$11 = /* @__PURE__ */ web.template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ web.template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$13 = /* @__PURE__ */ web.template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ web.template(`<pre class="text-xs text-gray-500 overflow-auto">`), _tmpl$15 = /* @__PURE__ */ web.template(`<div class="px-4 py-3"><h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2"></h4><!$><!/>`), _tmpl$16 = /* @__PURE__ */ web.template(`<div class=space-y-1>`), _tmpl$17 = /* @__PURE__ */ web.template(`<div class="flex gap-2 text-xs"><span class="text-gray-500 dark:text-gray-400 font-mono min-w-[120px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white">`), _tmpl$18 = /* @__PURE__ */ web.template(`<p class="text-xs text-gray-400 italic">No filters`), _tmpl$19 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$20 = /* @__PURE__ */ web.template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100">×`), _tmpl$21 = /* @__PURE__ */ web.template(`<span class="inline-flex items-center gap-1 px-2.5 py-1 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:underline><span class="text-blue-500 dark:text-blue-400"><!$><!/>:</span> <!$><!/></button><!$><!/>`), _tmpl$22 = /* @__PURE__ */ web.template(`<div class="max-h-48 overflow-y-auto">`), _tmpl$23 = /* @__PURE__ */ web.template(`<button type=button class="mt-1 w-full px-2 py-1 text-xs text-gray-500 hover:text-gray-700 text-center">Cancel`), _tmpl$24 = /* @__PURE__ */ web.template(`<div class="absolute z-50 mt-1 left-0 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-2 min-w-[200px]">`), _tmpl$25 = /* @__PURE__ */ web.template(`<div class=relative><!$><!/><!$><!/>`), _tmpl$26 = /* @__PURE__ */ web.template(`<button type=button class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium border border-dashed border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 rounded-full hover:border-blue-400 hover:text-blue-500 transition-colors">+ <!$><!/>`), _tmpl$27 = /* @__PURE__ */ web.template(`<form class="flex gap-1"><input type=text autofocus class="flex-1 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"><button type=submit class="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700">OK</button><button type=button class="px-2 py-1 text-xs text-gray-500 hover:text-gray-700">Cancel`), _tmpl$28 = /* @__PURE__ */ web.template(`<span class=ml-1>✓`), _tmpl$29 = /* @__PURE__ */ web.template(`<button type=button><!$><!/><!$><!/>`), _tmpl$30 = /* @__PURE__ */ web.template(`<form class="flex flex-col gap-3"><!$><!/><div class="flex justify-end"><button type=submit class="px-4 py-2 text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors">`), _tmpl$31 = /* @__PURE__ */ web.template(`<div class="flex justify-end"><button type=button class="px-3 py-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors flex items-center gap-1">Next <svg class="w-3.5 h-3.5"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M9 5l7 7-7 7">`), _tmpl$32 = /* @__PURE__ */ web.template(`<div class=space-y-3><!$><!/><!$><!/>`), _tmpl$33 = /* @__PURE__ */ web.template(`<span class="text-xs font-normal text-gray-500 dark:text-gray-400">— <!$><!/>`), _tmpl$34 = /* @__PURE__ */ web.template(`<div class="mt-2 ml-6">`), _tmpl$35 = /* @__PURE__ */ web.template(`<div><div><span></span><!$><!/><!$><!/></div><!$><!/>`), _tmpl$36 = /* @__PURE__ */ web.template(`<div class="flex flex-wrap gap-2">`), _tmpl$37 = /* @__PURE__ */ web.template(`<span class=mr-1>`);
|
|
6
9
|
const STATUS_BADGES = {
|
|
7
10
|
loading: {
|
|
8
11
|
label: "Loading...",
|
|
@@ -22,125 +25,245 @@ const STATUS_BADGES = {
|
|
|
22
25
|
},
|
|
23
26
|
complete: {
|
|
24
27
|
label: "Complete",
|
|
25
|
-
class: "bg-
|
|
28
|
+
class: "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
|
|
26
29
|
}
|
|
27
30
|
};
|
|
28
31
|
const ScratchpadPanel = (props) => {
|
|
32
|
+
const [collapsed, setCollapsed] = solidJs.createSignal(false);
|
|
33
|
+
const [localPreview, setLocalPreview] = solidJs.createSignal(void 0);
|
|
34
|
+
let previewTimer = null;
|
|
29
35
|
const badge = () => STATUS_BADGES[props.state.status] || STATUS_BADGES.loading;
|
|
36
|
+
const isClosable = () => props.closable !== false;
|
|
37
|
+
const isCollapsible = () => props.collapsible !== false;
|
|
38
|
+
const preview = () => localPreview() || props.state.preview;
|
|
39
|
+
const hasFilters = () => Object.keys(props.state.filters || {}).length > 0;
|
|
40
|
+
solidJs.createEffect(() => {
|
|
41
|
+
if (props.state.status === "complete" && props.autoCloseDelay) {
|
|
42
|
+
const timer = setTimeout(() => {
|
|
43
|
+
var _a;
|
|
44
|
+
return (_a = props.onClose) == null ? void 0 : _a.call(props);
|
|
45
|
+
}, props.autoCloseDelay);
|
|
46
|
+
solidJs.onCleanup(() => clearTimeout(timer));
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
solidJs.createEffect(() => {
|
|
50
|
+
const endpoint = props.state.previewEndpoint;
|
|
51
|
+
if (!endpoint) return;
|
|
52
|
+
const filters = props.state.filters;
|
|
53
|
+
if (!filters || Object.keys(filters).length === 0) return;
|
|
54
|
+
if (previewTimer) clearTimeout(previewTimer);
|
|
55
|
+
previewTimer = setTimeout(async () => {
|
|
56
|
+
try {
|
|
57
|
+
const res = await fetch(endpoint, {
|
|
58
|
+
method: "POST",
|
|
59
|
+
headers: {
|
|
60
|
+
"Content-Type": "application/json"
|
|
61
|
+
},
|
|
62
|
+
credentials: "include",
|
|
63
|
+
body: JSON.stringify({
|
|
64
|
+
filters
|
|
65
|
+
})
|
|
66
|
+
});
|
|
67
|
+
if (res.ok) setLocalPreview(await res.json());
|
|
68
|
+
} catch {
|
|
69
|
+
}
|
|
70
|
+
}, props.state.previewDebounce || 500);
|
|
71
|
+
});
|
|
72
|
+
solidJs.onCleanup(() => {
|
|
73
|
+
if (previewTimer) clearTimeout(previewTimer);
|
|
74
|
+
});
|
|
30
75
|
return (() => {
|
|
31
|
-
var _el$ = web.getNextElement(_tmpl$
|
|
76
|
+
var _el$ = web.getNextElement(_tmpl$8), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$7 = _el$5.nextSibling, [_el$8, _co$] = web.getNextMarker(_el$7.nextSibling), _el$9 = _el$3.nextSibling, _el$0 = _el$9.firstChild, _el$10 = _el$0.nextSibling, [_el$11, _co$2] = web.getNextMarker(_el$10.nextSibling), _el$29 = _el$2.nextSibling, [_el$30, _co$6] = web.getNextMarker(_el$29.nextSibling);
|
|
77
|
+
_el$30.nextSibling;
|
|
78
|
+
_el$2.$$click = () => isCollapsible() && setCollapsed(!collapsed());
|
|
32
79
|
web.insert(_el$5, () => props.state.title);
|
|
33
|
-
web.insert(_el$
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
return props.state.sections;
|
|
80
|
+
web.insert(_el$3, web.createComponent(solidJs.Show, {
|
|
81
|
+
get when() {
|
|
82
|
+
return isCollapsible();
|
|
37
83
|
},
|
|
38
|
-
children
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
get onAction() {
|
|
47
|
-
return props.onAction;
|
|
48
|
-
},
|
|
49
|
-
get onSectionEdit() {
|
|
50
|
-
return props.onSectionEdit;
|
|
51
|
-
}
|
|
52
|
-
})
|
|
53
|
-
}));
|
|
54
|
-
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
84
|
+
get children() {
|
|
85
|
+
var _el$6 = web.getNextElement(_tmpl$);
|
|
86
|
+
web.effect(() => web.setAttribute(_el$6, "class", `w-3.5 h-3.5 text-gray-400 transition-transform ${collapsed() ? "-rotate-90" : ""}`));
|
|
87
|
+
return _el$6;
|
|
88
|
+
}
|
|
89
|
+
}), _el$8, _co$);
|
|
90
|
+
web.insert(_el$0, () => badge().label);
|
|
91
|
+
web.insert(_el$9, web.createComponent(solidJs.Show, {
|
|
55
92
|
get when() {
|
|
56
|
-
return
|
|
93
|
+
return web.memo(() => !!isClosable())() && props.onClose;
|
|
57
94
|
},
|
|
58
95
|
get children() {
|
|
59
|
-
var _el$
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
var _c$ = web.memo(() => msg.type === "warning");
|
|
68
|
-
return () => _c$() ? "⚠️" : msg.type === "question" ? "💬" : "ℹ️";
|
|
69
|
-
})());
|
|
70
|
-
web.insert(_el$25, () => msg.text);
|
|
71
|
-
web.effect(() => web.className(_el$23, `flex items-start gap-2 text-sm ${msg.type === "warning" ? "text-amber-600 dark:text-amber-400" : msg.type === "question" ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-400"}`));
|
|
72
|
-
return _el$23;
|
|
73
|
-
})()
|
|
74
|
-
}));
|
|
75
|
-
return _el$8;
|
|
96
|
+
var _el$1 = web.getNextElement(_tmpl$2);
|
|
97
|
+
_el$1.$$click = (e) => {
|
|
98
|
+
var _a;
|
|
99
|
+
e.stopPropagation();
|
|
100
|
+
(_a = props.onClose) == null ? void 0 : _a.call(props);
|
|
101
|
+
};
|
|
102
|
+
web.runHydrationEvents();
|
|
103
|
+
return _el$1;
|
|
76
104
|
}
|
|
77
|
-
}), _el$
|
|
105
|
+
}), _el$11, _co$2);
|
|
78
106
|
web.insert(_el$, web.createComponent(solidJs.Show, {
|
|
79
107
|
get when() {
|
|
80
|
-
return
|
|
108
|
+
return !collapsed();
|
|
81
109
|
},
|
|
82
110
|
get children() {
|
|
83
|
-
var _el$
|
|
84
|
-
web.insert(_el$
|
|
85
|
-
|
|
86
|
-
|
|
111
|
+
var _el$12 = web.getNextElement(_tmpl$7), _el$13 = _el$12.firstChild, _el$22 = _el$13.nextSibling, [_el$23, _co$3] = web.getNextMarker(_el$22.nextSibling), _el$24 = _el$23.nextSibling, [_el$25, _co$4] = web.getNextMarker(_el$24.nextSibling), _el$26 = _el$25.nextSibling, [_el$27, _co$5] = web.getNextMarker(_el$26.nextSibling);
|
|
112
|
+
web.insert(_el$13, web.createComponent(solidJs.For, {
|
|
113
|
+
get each() {
|
|
114
|
+
return props.state.sections;
|
|
115
|
+
},
|
|
116
|
+
children: (section) => web.createComponent(SectionRenderer, {
|
|
117
|
+
section,
|
|
118
|
+
get filters() {
|
|
119
|
+
return props.state.filters;
|
|
120
|
+
},
|
|
121
|
+
get onFilterChange() {
|
|
122
|
+
return props.onFilterChange;
|
|
123
|
+
},
|
|
124
|
+
get onAction() {
|
|
125
|
+
return props.onAction;
|
|
126
|
+
},
|
|
127
|
+
get onSectionEdit() {
|
|
128
|
+
return props.onSectionEdit;
|
|
129
|
+
}
|
|
130
|
+
})
|
|
131
|
+
}));
|
|
132
|
+
web.insert(_el$12, web.createComponent(solidJs.Show, {
|
|
87
133
|
get when() {
|
|
88
|
-
return
|
|
134
|
+
return props.state.agentMessages.length > 0;
|
|
89
135
|
},
|
|
90
136
|
get children() {
|
|
91
|
-
var _el$
|
|
92
|
-
web.insert(_el$
|
|
137
|
+
var _el$14 = web.getNextElement(_tmpl$3);
|
|
138
|
+
web.insert(_el$14, web.createComponent(solidJs.For, {
|
|
93
139
|
get each() {
|
|
94
|
-
return
|
|
140
|
+
return props.state.agentMessages;
|
|
95
141
|
},
|
|
96
|
-
children: (
|
|
97
|
-
var _el$
|
|
98
|
-
web.insert(_el$
|
|
99
|
-
|
|
142
|
+
children: (msg) => (() => {
|
|
143
|
+
var _el$31 = web.getNextElement(_tmpl$9), _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling;
|
|
144
|
+
web.insert(_el$32, (() => {
|
|
145
|
+
var _c$ = web.memo(() => msg.type === "warning");
|
|
146
|
+
return () => _c$() ? "⚠️" : msg.type === "question" ? "❓" : "ℹ️";
|
|
147
|
+
})());
|
|
148
|
+
web.insert(_el$33, () => msg.text);
|
|
149
|
+
web.effect(() => web.className(_el$31, `flex items-start gap-2 text-sm rounded-lg px-3 py-2 ${msg.type === "warning" ? "bg-amber-50 dark:bg-amber-900/10 text-amber-700 dark:text-amber-400" : msg.type === "question" ? "bg-blue-50 dark:bg-blue-900/10 text-blue-700 dark:text-blue-400 border border-blue-200 dark:border-blue-800" : "bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-400"}`));
|
|
150
|
+
return _el$31;
|
|
100
151
|
})()
|
|
101
152
|
}));
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
153
|
+
return _el$14;
|
|
154
|
+
}
|
|
155
|
+
}), _el$23, _co$3);
|
|
156
|
+
web.insert(_el$12, web.createComponent(solidJs.Show, {
|
|
157
|
+
get when() {
|
|
158
|
+
return preview();
|
|
159
|
+
},
|
|
160
|
+
get children() {
|
|
161
|
+
var _el$15 = web.getNextElement(_tmpl$5);
|
|
162
|
+
web.insert(_el$15, web.createComponent(solidJs.Show, {
|
|
163
|
+
get when() {
|
|
164
|
+
return preview().count === 0;
|
|
105
165
|
},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
166
|
+
get fallback() {
|
|
167
|
+
return [(() => {
|
|
168
|
+
var _el$34 = web.getNextElement(_tmpl$0), _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling;
|
|
169
|
+
web.insert(_el$36, () => preview().count.toLocaleString());
|
|
170
|
+
return _el$34;
|
|
171
|
+
})(), (() => {
|
|
172
|
+
var _el$37 = web.getNextElement(_tmpl$1);
|
|
173
|
+
web.insert(_el$37, () => preview().summary);
|
|
174
|
+
return _el$37;
|
|
175
|
+
})(), web.createComponent(solidJs.Show, {
|
|
176
|
+
get when() {
|
|
177
|
+
return web.memo(() => !!preview().rows)() && preview().rows.length > 0;
|
|
111
178
|
},
|
|
112
|
-
children
|
|
113
|
-
var _el$
|
|
114
|
-
web.insert(_el$
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
179
|
+
get children() {
|
|
180
|
+
var _el$38 = web.getNextElement(_tmpl$10), _el$39 = _el$38.firstChild, _el$40 = _el$39.firstChild, _el$41 = _el$40.firstChild, _el$42 = _el$40.nextSibling;
|
|
181
|
+
web.insert(_el$41, web.createComponent(solidJs.For, {
|
|
182
|
+
get each() {
|
|
183
|
+
return Object.keys(preview().rows[0]);
|
|
184
|
+
},
|
|
185
|
+
children: (k) => (() => {
|
|
186
|
+
var _el$43 = web.getNextElement(_tmpl$11);
|
|
187
|
+
web.insert(_el$43, k);
|
|
188
|
+
return _el$43;
|
|
189
|
+
})()
|
|
190
|
+
}));
|
|
191
|
+
web.insert(_el$42, web.createComponent(solidJs.For, {
|
|
192
|
+
get each() {
|
|
193
|
+
return preview().rows.slice(0, 5);
|
|
194
|
+
},
|
|
195
|
+
children: (row) => (() => {
|
|
196
|
+
var _el$44 = web.getNextElement(_tmpl$12);
|
|
197
|
+
web.insert(_el$44, web.createComponent(solidJs.For, {
|
|
198
|
+
get each() {
|
|
199
|
+
return Object.values(row);
|
|
200
|
+
},
|
|
201
|
+
children: (v) => (() => {
|
|
202
|
+
var _el$45 = web.getNextElement(_tmpl$13);
|
|
203
|
+
web.insert(_el$45, () => String(v));
|
|
204
|
+
return _el$45;
|
|
205
|
+
})()
|
|
206
|
+
}));
|
|
207
|
+
return _el$44;
|
|
208
|
+
})()
|
|
209
|
+
}));
|
|
210
|
+
return _el$38;
|
|
211
|
+
}
|
|
212
|
+
})];
|
|
213
|
+
},
|
|
214
|
+
get children() {
|
|
215
|
+
var _el$16 = web.getNextElement(_tmpl$4), _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$19 = _el$18.nextSibling;
|
|
216
|
+
_el$19.$$click = () => {
|
|
217
|
+
var _a;
|
|
218
|
+
return (_a = props.onAction) == null ? void 0 : _a.call(props, "refine_filters");
|
|
219
|
+
};
|
|
220
|
+
web.runHydrationEvents();
|
|
221
|
+
return _el$16;
|
|
222
|
+
}
|
|
120
223
|
}));
|
|
121
|
-
return _el$
|
|
224
|
+
return _el$15;
|
|
225
|
+
}
|
|
226
|
+
}), _el$25, _co$4);
|
|
227
|
+
web.insert(_el$12, web.createComponent(solidJs.Show, {
|
|
228
|
+
get when() {
|
|
229
|
+
return web.memo(() => props.state.status === "waiting_human")() && hasFilters();
|
|
230
|
+
},
|
|
231
|
+
get children() {
|
|
232
|
+
var _el$20 = web.getNextElement(_tmpl$6), _el$21 = _el$20.firstChild;
|
|
233
|
+
_el$21.$$click = () => {
|
|
234
|
+
var _a;
|
|
235
|
+
return (_a = props.onAction) == null ? void 0 : _a.call(props, "search", {
|
|
236
|
+
filters: props.state.filters
|
|
237
|
+
});
|
|
238
|
+
};
|
|
239
|
+
web.runHydrationEvents();
|
|
240
|
+
return _el$20;
|
|
122
241
|
}
|
|
123
|
-
}), _el$
|
|
124
|
-
|
|
242
|
+
}), _el$27, _co$5);
|
|
243
|
+
web.effect((_$p) => web.setStyleProperty(_el$12, "max-height", props.maxHeight || "500px"));
|
|
244
|
+
return _el$12;
|
|
125
245
|
}
|
|
126
|
-
}), _el$
|
|
127
|
-
web.effect(() =>
|
|
246
|
+
}), _el$30, _co$6);
|
|
247
|
+
web.effect((_p$) => {
|
|
248
|
+
var _v$ = `w-full bg-white dark:bg-gray-800 rounded-xl border shadow-lg overflow-visible ${props.state.status === "waiting_human" ? "border-blue-300 dark:border-blue-600" : "border-gray-200 dark:border-gray-700"}`, _v$2 = `flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700 ${isCollapsible() ? "cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-gray-750" : ""}`, _v$3 = `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`;
|
|
249
|
+
_v$ !== _p$.e && web.className(_el$, _p$.e = _v$);
|
|
250
|
+
_v$2 !== _p$.t && web.className(_el$2, _p$.t = _v$2);
|
|
251
|
+
_v$3 !== _p$.a && web.className(_el$0, _p$.a = _v$3);
|
|
252
|
+
return _p$;
|
|
253
|
+
}, {
|
|
254
|
+
e: void 0,
|
|
255
|
+
t: void 0,
|
|
256
|
+
a: void 0
|
|
257
|
+
});
|
|
258
|
+
web.runHydrationEvents();
|
|
128
259
|
return _el$;
|
|
129
260
|
})();
|
|
130
261
|
};
|
|
131
262
|
const SectionRenderer = (props) => {
|
|
132
263
|
return (() => {
|
|
133
|
-
var _el$
|
|
134
|
-
web.insert(_el$
|
|
135
|
-
web.insert(_el$
|
|
136
|
-
get when() {
|
|
137
|
-
return props.section.editable;
|
|
138
|
-
},
|
|
139
|
-
get children() {
|
|
140
|
-
return web.getNextElement(_tmpl$9);
|
|
141
|
-
}
|
|
142
|
-
}), _el$34, _co$4);
|
|
143
|
-
web.insert(_el$29, web.createComponent(solidJs.Switch, {
|
|
264
|
+
var _el$46 = web.getNextElement(_tmpl$15), _el$47 = _el$46.firstChild, _el$50 = _el$47.nextSibling, [_el$51, _co$7] = web.getNextMarker(_el$50.nextSibling);
|
|
265
|
+
web.insert(_el$47, () => props.section.title);
|
|
266
|
+
web.insert(_el$46, web.createComponent(solidJs.Switch, {
|
|
144
267
|
get children() {
|
|
145
268
|
return [web.createComponent(solidJs.Match, {
|
|
146
269
|
get when() {
|
|
@@ -158,7 +281,10 @@ const SectionRenderer = (props) => {
|
|
|
158
281
|
return props.section.type === "filter";
|
|
159
282
|
},
|
|
160
283
|
get children() {
|
|
161
|
-
return web.createComponent(
|
|
284
|
+
return web.createComponent(InteractiveFilterSection, {
|
|
285
|
+
get content() {
|
|
286
|
+
return props.section.content;
|
|
287
|
+
},
|
|
162
288
|
get filters() {
|
|
163
289
|
return props.filters;
|
|
164
290
|
},
|
|
@@ -172,9 +298,9 @@ const SectionRenderer = (props) => {
|
|
|
172
298
|
return props.section.type === "message";
|
|
173
299
|
},
|
|
174
300
|
get children() {
|
|
175
|
-
var _el$
|
|
176
|
-
web.insert(_el$
|
|
177
|
-
return _el$
|
|
301
|
+
var _el$48 = web.getNextElement(_tmpl$1);
|
|
302
|
+
web.insert(_el$48, () => String(props.section.content));
|
|
303
|
+
return _el$48;
|
|
178
304
|
}
|
|
179
305
|
}), web.createComponent(solidJs.Match, {
|
|
180
306
|
get when() {
|
|
@@ -195,52 +321,83 @@ const SectionRenderer = (props) => {
|
|
|
195
321
|
return props.section.type === "steps";
|
|
196
322
|
},
|
|
197
323
|
get children() {
|
|
198
|
-
return web.createComponent(
|
|
324
|
+
return web.createComponent(EnrichedStepsSection, {
|
|
199
325
|
get content() {
|
|
200
326
|
return props.section.content;
|
|
327
|
+
},
|
|
328
|
+
get onAction() {
|
|
329
|
+
return props.onAction;
|
|
330
|
+
},
|
|
331
|
+
get onFilterChange() {
|
|
332
|
+
return props.onFilterChange;
|
|
333
|
+
}
|
|
334
|
+
});
|
|
335
|
+
}
|
|
336
|
+
}), web.createComponent(solidJs.Match, {
|
|
337
|
+
get when() {
|
|
338
|
+
return props.section.type === "form";
|
|
339
|
+
},
|
|
340
|
+
get children() {
|
|
341
|
+
return web.createComponent(EmbeddedFormSection, {
|
|
342
|
+
get content() {
|
|
343
|
+
return props.section.content;
|
|
344
|
+
},
|
|
345
|
+
get sectionId() {
|
|
346
|
+
return props.section.id;
|
|
347
|
+
},
|
|
348
|
+
get onAction() {
|
|
349
|
+
return props.onAction;
|
|
201
350
|
}
|
|
202
351
|
});
|
|
203
352
|
}
|
|
204
353
|
}), web.createComponent(solidJs.Match, {
|
|
205
354
|
when: true,
|
|
206
355
|
get children() {
|
|
207
|
-
var _el$
|
|
208
|
-
web.insert(_el$
|
|
209
|
-
return _el$
|
|
356
|
+
var _el$49 = web.getNextElement(_tmpl$14);
|
|
357
|
+
web.insert(_el$49, () => JSON.stringify(props.section.content, null, 2));
|
|
358
|
+
return _el$49;
|
|
210
359
|
}
|
|
211
360
|
})];
|
|
212
361
|
}
|
|
213
|
-
}), _el$
|
|
214
|
-
return _el$
|
|
362
|
+
}), _el$51, _co$7);
|
|
363
|
+
return _el$46;
|
|
215
364
|
})();
|
|
216
365
|
};
|
|
217
366
|
const DataSection = (props) => {
|
|
218
|
-
const entries = () =>
|
|
219
|
-
if (typeof props.content !== "object" || !props.content) return [];
|
|
220
|
-
return Object.entries(props.content);
|
|
221
|
-
};
|
|
367
|
+
const entries = () => typeof props.content === "object" && props.content ? Object.entries(props.content) : [];
|
|
222
368
|
return (() => {
|
|
223
|
-
var _el$
|
|
224
|
-
web.insert(_el$
|
|
369
|
+
var _el$52 = web.getNextElement(_tmpl$16);
|
|
370
|
+
web.insert(_el$52, web.createComponent(solidJs.For, {
|
|
225
371
|
get each() {
|
|
226
372
|
return entries();
|
|
227
373
|
},
|
|
228
|
-
children: ([
|
|
229
|
-
var _el$
|
|
230
|
-
_el$
|
|
231
|
-
var _el$
|
|
232
|
-
web.insert(_el$
|
|
233
|
-
web.insert(_el$
|
|
234
|
-
var _c$2 = web.memo(() => !!Array.isArray(
|
|
235
|
-
return () => _c$2() ?
|
|
374
|
+
children: ([k, v]) => (() => {
|
|
375
|
+
var _el$53 = web.getNextElement(_tmpl$17), _el$54 = _el$53.firstChild, _el$56 = _el$54.firstChild, [_el$57, _co$8] = web.getNextMarker(_el$56.nextSibling);
|
|
376
|
+
_el$57.nextSibling;
|
|
377
|
+
var _el$58 = _el$54.nextSibling;
|
|
378
|
+
web.insert(_el$54, k, _el$57, _co$8);
|
|
379
|
+
web.insert(_el$58, (() => {
|
|
380
|
+
var _c$2 = web.memo(() => !!Array.isArray(v));
|
|
381
|
+
return () => _c$2() ? v.join(", ") : String(v);
|
|
236
382
|
})());
|
|
237
|
-
return _el$
|
|
383
|
+
return _el$53;
|
|
238
384
|
})()
|
|
239
385
|
}));
|
|
240
|
-
return _el$
|
|
386
|
+
return _el$52;
|
|
241
387
|
})();
|
|
242
388
|
};
|
|
243
|
-
const
|
|
389
|
+
const InteractiveFilterSection = (props) => {
|
|
390
|
+
const [editingKey, setEditingKey] = solidJs.createSignal(null);
|
|
391
|
+
const [editValue, setEditValue] = solidJs.createSignal("");
|
|
392
|
+
const filterDefs = () => {
|
|
393
|
+
if (typeof props.content === "object" && props.content) return props.content;
|
|
394
|
+
return {};
|
|
395
|
+
};
|
|
396
|
+
const allKeys = () => {
|
|
397
|
+
const fromContent = Object.keys(filterDefs());
|
|
398
|
+
const fromFilters = Object.keys(props.filters || {});
|
|
399
|
+
return [.../* @__PURE__ */ new Set([...fromContent, ...fromFilters])];
|
|
400
|
+
};
|
|
244
401
|
const removeFilter = (key) => {
|
|
245
402
|
var _a;
|
|
246
403
|
const next = {
|
|
@@ -249,91 +406,351 @@ const FilterSection = (props) => {
|
|
|
249
406
|
delete next[key];
|
|
250
407
|
(_a = props.onFilterChange) == null ? void 0 : _a.call(props, next);
|
|
251
408
|
};
|
|
252
|
-
const
|
|
409
|
+
const setFilter = (key, value) => {
|
|
410
|
+
var _a;
|
|
411
|
+
(_a = props.onFilterChange) == null ? void 0 : _a.call(props, {
|
|
412
|
+
...props.filters,
|
|
413
|
+
[key]: value
|
|
414
|
+
});
|
|
415
|
+
setEditingKey(null);
|
|
416
|
+
setEditValue("");
|
|
417
|
+
};
|
|
418
|
+
const getDef = (key) => filterDefs()[key] || {};
|
|
253
419
|
return (() => {
|
|
254
|
-
var _el$
|
|
255
|
-
web.insert(_el$
|
|
420
|
+
var _el$59 = web.getNextElement(_tmpl$19), _el$61 = _el$59.firstChild, [_el$62, _co$9] = web.getNextMarker(_el$61.nextSibling), _el$63 = _el$62.nextSibling, [_el$64, _co$0] = web.getNextMarker(_el$63.nextSibling);
|
|
421
|
+
web.insert(_el$59, web.createComponent(solidJs.For, {
|
|
256
422
|
get each() {
|
|
257
|
-
return
|
|
423
|
+
return allKeys();
|
|
258
424
|
},
|
|
259
|
-
children: (
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
425
|
+
children: (key) => {
|
|
426
|
+
const def = () => getDef(key);
|
|
427
|
+
const value = () => props.filters[key];
|
|
428
|
+
const hasValue = () => value() !== void 0 && value() !== "";
|
|
429
|
+
return (() => {
|
|
430
|
+
var _el$65 = web.getNextElement(_tmpl$25), _el$81 = _el$65.firstChild, [_el$82, _co$12] = web.getNextMarker(_el$81.nextSibling), _el$83 = _el$82.nextSibling, [_el$84, _co$13] = web.getNextMarker(_el$83.nextSibling);
|
|
431
|
+
web.insert(_el$65, web.createComponent(solidJs.Show, {
|
|
432
|
+
get when() {
|
|
433
|
+
return hasValue();
|
|
434
|
+
},
|
|
435
|
+
get fallback() {
|
|
436
|
+
return (() => {
|
|
437
|
+
var _el$85 = web.getNextElement(_tmpl$26), _el$86 = _el$85.firstChild, _el$87 = _el$86.nextSibling, [_el$88, _co$14] = web.getNextMarker(_el$87.nextSibling);
|
|
438
|
+
_el$85.$$click = () => {
|
|
439
|
+
setEditingKey(key);
|
|
440
|
+
setEditValue("");
|
|
441
|
+
};
|
|
442
|
+
web.insert(_el$85, () => {
|
|
443
|
+
var _a;
|
|
444
|
+
return ((_a = def()) == null ? void 0 : _a.label) || key;
|
|
445
|
+
}, _el$88, _co$14);
|
|
446
|
+
web.runHydrationEvents();
|
|
447
|
+
return _el$85;
|
|
448
|
+
})();
|
|
449
|
+
},
|
|
450
|
+
get children() {
|
|
451
|
+
var _el$66 = web.getNextElement(_tmpl$21), _el$67 = _el$66.firstChild, _el$68 = _el$67.firstChild, _el$70 = _el$68.firstChild, [_el$71, _co$1] = web.getNextMarker(_el$70.nextSibling);
|
|
452
|
+
_el$71.nextSibling;
|
|
453
|
+
var _el$72 = _el$68.nextSibling, _el$73 = _el$72.nextSibling, [_el$74, _co$10] = web.getNextMarker(_el$73.nextSibling), _el$76 = _el$67.nextSibling, [_el$77, _co$11] = web.getNextMarker(_el$76.nextSibling);
|
|
454
|
+
_el$67.$$click = () => {
|
|
455
|
+
setEditingKey(key);
|
|
456
|
+
setEditValue(String(value() || ""));
|
|
457
|
+
};
|
|
458
|
+
web.insert(_el$68, () => {
|
|
459
|
+
var _a;
|
|
460
|
+
return ((_a = def()) == null ? void 0 : _a.label) || key;
|
|
461
|
+
}, _el$71, _co$1);
|
|
462
|
+
web.insert(_el$67, (() => {
|
|
463
|
+
var _c$3 = web.memo(() => !!Array.isArray(value()));
|
|
464
|
+
return () => _c$3() ? value().join(", ") : String(value());
|
|
465
|
+
})(), _el$74, _co$10);
|
|
466
|
+
web.insert(_el$66, web.createComponent(solidJs.Show, {
|
|
467
|
+
get when() {
|
|
468
|
+
return props.onFilterChange;
|
|
469
|
+
},
|
|
470
|
+
get children() {
|
|
471
|
+
var _el$75 = web.getNextElement(_tmpl$20);
|
|
472
|
+
_el$75.$$click = () => removeFilter(key);
|
|
473
|
+
web.setAttribute(_el$75, "aria-label", `Remove ${key}`);
|
|
474
|
+
web.runHydrationEvents();
|
|
475
|
+
return _el$75;
|
|
476
|
+
}
|
|
477
|
+
}), _el$77, _co$11);
|
|
478
|
+
web.runHydrationEvents();
|
|
479
|
+
return _el$66;
|
|
480
|
+
}
|
|
481
|
+
}), _el$82, _co$12);
|
|
482
|
+
web.insert(_el$65, web.createComponent(solidJs.Show, {
|
|
483
|
+
get when() {
|
|
484
|
+
return editingKey() === key;
|
|
485
|
+
},
|
|
486
|
+
get children() {
|
|
487
|
+
var _el$78 = web.getNextElement(_tmpl$24);
|
|
488
|
+
web.insert(_el$78, web.createComponent(solidJs.Show, {
|
|
489
|
+
get when() {
|
|
490
|
+
var _a;
|
|
491
|
+
return (_a = def()) == null ? void 0 : _a.options;
|
|
492
|
+
},
|
|
493
|
+
get fallback() {
|
|
494
|
+
return (() => {
|
|
495
|
+
var _el$89 = web.getNextElement(_tmpl$27), _el$90 = _el$89.firstChild, _el$91 = _el$90.nextSibling, _el$92 = _el$91.nextSibling;
|
|
496
|
+
_el$89.addEventListener("submit", (e) => {
|
|
497
|
+
e.preventDefault();
|
|
498
|
+
setFilter(key, editValue());
|
|
499
|
+
});
|
|
500
|
+
_el$90.$$input = (e) => setEditValue(e.currentTarget.value);
|
|
501
|
+
_el$92.$$click = () => setEditingKey(null);
|
|
502
|
+
web.effect(() => {
|
|
503
|
+
var _a;
|
|
504
|
+
return web.setAttribute(_el$90, "placeholder", ((_a = def()) == null ? void 0 : _a.placeholder) || key);
|
|
505
|
+
});
|
|
506
|
+
web.effect(() => web.setProperty(_el$90, "value", editValue()));
|
|
507
|
+
web.runHydrationEvents();
|
|
508
|
+
return _el$89;
|
|
509
|
+
})();
|
|
510
|
+
},
|
|
511
|
+
get children() {
|
|
512
|
+
return [(() => {
|
|
513
|
+
var _el$79 = web.getNextElement(_tmpl$22);
|
|
514
|
+
web.insert(_el$79, web.createComponent(solidJs.For, {
|
|
515
|
+
get each() {
|
|
516
|
+
return def().options;
|
|
517
|
+
},
|
|
518
|
+
children: (opt) => (() => {
|
|
519
|
+
var _el$93 = web.getNextElement(_tmpl$29), _el$95 = _el$93.firstChild, [_el$96, _co$15] = web.getNextMarker(_el$95.nextSibling), _el$97 = _el$96.nextSibling, [_el$98, _co$16] = web.getNextMarker(_el$97.nextSibling);
|
|
520
|
+
_el$93.$$click = () => setFilter(key, opt.value);
|
|
521
|
+
web.insert(_el$93, () => opt.label, _el$96, _co$15);
|
|
522
|
+
web.insert(_el$93, web.createComponent(solidJs.Show, {
|
|
523
|
+
get when() {
|
|
524
|
+
return String(value()) === opt.value;
|
|
525
|
+
},
|
|
526
|
+
get children() {
|
|
527
|
+
return web.getNextElement(_tmpl$28);
|
|
528
|
+
}
|
|
529
|
+
}), _el$98, _co$16);
|
|
530
|
+
web.effect(() => web.className(_el$93, `w-full text-left px-2 py-1.5 text-sm rounded hover:bg-blue-50 dark:hover:bg-blue-900/20 ${String(value()) === opt.value ? "text-blue-600 dark:text-blue-400 bg-blue-50/50 dark:bg-blue-900/10" : "text-gray-900 dark:text-white"}`));
|
|
531
|
+
web.runHydrationEvents();
|
|
532
|
+
return _el$93;
|
|
533
|
+
})()
|
|
534
|
+
}));
|
|
535
|
+
return _el$79;
|
|
536
|
+
})(), (() => {
|
|
537
|
+
var _el$80 = web.getNextElement(_tmpl$23);
|
|
538
|
+
_el$80.$$click = () => setEditingKey(null);
|
|
539
|
+
web.runHydrationEvents();
|
|
540
|
+
return _el$80;
|
|
541
|
+
})()];
|
|
542
|
+
}
|
|
543
|
+
}));
|
|
544
|
+
return _el$78;
|
|
545
|
+
}
|
|
546
|
+
}), _el$84, _co$13);
|
|
547
|
+
return _el$65;
|
|
548
|
+
})();
|
|
549
|
+
}
|
|
550
|
+
}), _el$62, _co$9);
|
|
551
|
+
web.insert(_el$59, web.createComponent(solidJs.Show, {
|
|
552
|
+
get when() {
|
|
553
|
+
return allKeys().length === 0;
|
|
554
|
+
},
|
|
555
|
+
get children() {
|
|
556
|
+
return web.getNextElement(_tmpl$18);
|
|
557
|
+
}
|
|
558
|
+
}), _el$64, _co$0);
|
|
559
|
+
return _el$59;
|
|
275
560
|
})();
|
|
276
561
|
};
|
|
277
|
-
const
|
|
278
|
-
const
|
|
279
|
-
|
|
280
|
-
|
|
562
|
+
const EmbeddedFormSection = (props) => {
|
|
563
|
+
const [formData, setFormData] = solidJs.createSignal({});
|
|
564
|
+
const [dynamicOptions, setDynamicOptions] = solidJs.createSignal({});
|
|
565
|
+
const config = () => {
|
|
566
|
+
const c = props.content;
|
|
567
|
+
return {
|
|
568
|
+
fields: (c == null ? void 0 : c.fields) || [],
|
|
569
|
+
submitLabel: (c == null ? void 0 : c.submitLabel) || "Submit"
|
|
570
|
+
};
|
|
571
|
+
};
|
|
572
|
+
const updateField = (name, value) => setFormData((prev) => ({
|
|
573
|
+
...prev,
|
|
574
|
+
[name]: value
|
|
575
|
+
}));
|
|
576
|
+
solidJs.createEffect(() => {
|
|
577
|
+
const data = formData();
|
|
578
|
+
for (const field of config().fields) {
|
|
579
|
+
const dep = field.depends_on || field.dependsOn;
|
|
580
|
+
if (!dep) continue;
|
|
581
|
+
const parentValue = data[dep.field];
|
|
582
|
+
if (!parentValue) continue;
|
|
583
|
+
const url = (dep.options_endpoint || dep.apiUrl || "").replace("{value}", encodeURIComponent(parentValue));
|
|
584
|
+
if (!url) continue;
|
|
585
|
+
const params = new URLSearchParams(dep.extraParams || dep.extra_params || {});
|
|
586
|
+
fetch(`${url}${url.includes("?") ? "&" : "?"}${params}`).then((r) => r.json()).then((items) => {
|
|
587
|
+
const arr = Array.isArray(items) ? items : items.results || items.features || [];
|
|
588
|
+
const lf = dep.label_field || dep.labelField || "label";
|
|
589
|
+
const vf = dep.value_field || dep.valueField || "value";
|
|
590
|
+
setDynamicOptions((prev) => ({
|
|
591
|
+
...prev,
|
|
592
|
+
[field.name]: arr.map((i) => ({
|
|
593
|
+
label: i[lf] || String(i),
|
|
594
|
+
value: String(i[vf] || i[lf] || i)
|
|
595
|
+
}))
|
|
596
|
+
}));
|
|
597
|
+
}).catch(() => {
|
|
598
|
+
});
|
|
599
|
+
}
|
|
600
|
+
});
|
|
601
|
+
const getField = (field) => {
|
|
602
|
+
const dynOpts = dynamicOptions()[field.name];
|
|
603
|
+
return dynOpts ? {
|
|
604
|
+
...field,
|
|
605
|
+
options: dynOpts
|
|
606
|
+
} : field;
|
|
607
|
+
};
|
|
608
|
+
const handleSubmit = (e) => {
|
|
609
|
+
var _a;
|
|
610
|
+
e.preventDefault();
|
|
611
|
+
(_a = props.onAction) == null ? void 0 : _a.call(props, "submit_form", {
|
|
612
|
+
sectionId: props.sectionId,
|
|
613
|
+
values: formData()
|
|
614
|
+
});
|
|
281
615
|
};
|
|
282
616
|
return (() => {
|
|
283
|
-
var _el$
|
|
284
|
-
|
|
617
|
+
var _el$99 = web.getNextElement(_tmpl$30), _el$102 = _el$99.firstChild, [_el$103, _co$17] = web.getNextMarker(_el$102.nextSibling), _el$100 = _el$103.nextSibling, _el$101 = _el$100.firstChild;
|
|
618
|
+
_el$99.addEventListener("submit", handleSubmit);
|
|
619
|
+
web.insert(_el$99, web.createComponent(solidJs.For, {
|
|
285
620
|
get each() {
|
|
286
|
-
return
|
|
621
|
+
return config().fields;
|
|
287
622
|
},
|
|
288
|
-
children: (
|
|
289
|
-
|
|
290
|
-
|
|
623
|
+
children: (field) => web.createComponent(FormFieldRenderer.FormFieldRenderer, {
|
|
624
|
+
get field() {
|
|
625
|
+
return getField(field);
|
|
626
|
+
},
|
|
627
|
+
get value() {
|
|
628
|
+
return formData()[field.name];
|
|
629
|
+
},
|
|
630
|
+
onChange: (val) => updateField(field.name, val),
|
|
631
|
+
formData
|
|
632
|
+
})
|
|
633
|
+
}), _el$103, _co$17);
|
|
634
|
+
web.insert(_el$101, () => config().submitLabel);
|
|
635
|
+
return _el$99;
|
|
636
|
+
})();
|
|
637
|
+
};
|
|
638
|
+
const EnrichedStepsSection = (props) => {
|
|
639
|
+
const stepsData = () => {
|
|
640
|
+
const c = props.content;
|
|
641
|
+
return {
|
|
642
|
+
steps: (c == null ? void 0 : c.steps) || [],
|
|
643
|
+
currentStep: (c == null ? void 0 : c.currentStep) ?? 0
|
|
644
|
+
};
|
|
645
|
+
};
|
|
646
|
+
return (() => {
|
|
647
|
+
var _el$104 = web.getNextElement(_tmpl$32), _el$107 = _el$104.firstChild, [_el$108, _co$18] = web.getNextMarker(_el$107.nextSibling), _el$109 = _el$108.nextSibling, [_el$110, _co$19] = web.getNextMarker(_el$109.nextSibling);
|
|
648
|
+
web.insert(_el$104, web.createComponent(solidJs.For, {
|
|
649
|
+
get each() {
|
|
650
|
+
return stepsData().steps;
|
|
651
|
+
},
|
|
652
|
+
children: (step) => (() => {
|
|
653
|
+
var _el$111 = web.getNextElement(_tmpl$35), _el$112 = _el$111.firstChild, _el$113 = _el$112.firstChild, _el$118 = _el$113.nextSibling, [_el$119, _co$21] = web.getNextMarker(_el$118.nextSibling), _el$120 = _el$119.nextSibling, [_el$121, _co$22] = web.getNextMarker(_el$120.nextSibling), _el$123 = _el$112.nextSibling, [_el$124, _co$23] = web.getNextMarker(_el$123.nextSibling);
|
|
654
|
+
web.insert(_el$113, (() => {
|
|
655
|
+
var _c$4 = web.memo(() => step.status === "done");
|
|
656
|
+
return () => _c$4() ? "✅" : step.status === "active" ? "●" : "○";
|
|
657
|
+
})());
|
|
658
|
+
web.insert(_el$112, () => step.label, _el$119, _co$21);
|
|
659
|
+
web.insert(_el$112, web.createComponent(solidJs.Show, {
|
|
660
|
+
get when() {
|
|
661
|
+
return web.memo(() => !!step.description)() && step.status === "active";
|
|
662
|
+
},
|
|
663
|
+
get children() {
|
|
664
|
+
var _el$114 = web.getNextElement(_tmpl$33), _el$115 = _el$114.firstChild, _el$116 = _el$115.nextSibling, [_el$117, _co$20] = web.getNextMarker(_el$116.nextSibling);
|
|
665
|
+
web.insert(_el$114, () => step.description, _el$117, _co$20);
|
|
666
|
+
return _el$114;
|
|
667
|
+
}
|
|
668
|
+
}), _el$121, _co$22);
|
|
669
|
+
web.insert(_el$111, web.createComponent(solidJs.Show, {
|
|
670
|
+
get when() {
|
|
671
|
+
return web.memo(() => step.status === "active")() && step.content;
|
|
672
|
+
},
|
|
673
|
+
get children() {
|
|
674
|
+
var _el$122 = web.getNextElement(_tmpl$34);
|
|
675
|
+
web.insert(_el$122, web.createComponent(SectionRenderer, {
|
|
676
|
+
get section() {
|
|
677
|
+
return step.content;
|
|
678
|
+
},
|
|
679
|
+
filters: {},
|
|
680
|
+
get onFilterChange() {
|
|
681
|
+
return props.onFilterChange;
|
|
682
|
+
},
|
|
683
|
+
get onAction() {
|
|
684
|
+
return props.onAction;
|
|
685
|
+
}
|
|
686
|
+
}));
|
|
687
|
+
return _el$122;
|
|
688
|
+
}
|
|
689
|
+
}), _el$124, _co$23);
|
|
690
|
+
web.effect((_p$) => {
|
|
691
|
+
var _v$4 = `rounded-lg ${step.status === "active" ? "bg-blue-50/50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 p-3" : "px-1"}`, _v$5 = `flex items-center gap-2 text-sm font-medium ${step.status === "done" ? "text-green-600 dark:text-green-400" : step.status === "active" ? "text-blue-600 dark:text-blue-400" : "text-gray-400"}`;
|
|
692
|
+
_v$4 !== _p$.e && web.className(_el$111, _p$.e = _v$4);
|
|
693
|
+
_v$5 !== _p$.t && web.className(_el$112, _p$.t = _v$5);
|
|
694
|
+
return _p$;
|
|
695
|
+
}, {
|
|
696
|
+
e: void 0,
|
|
697
|
+
t: void 0
|
|
698
|
+
});
|
|
699
|
+
return _el$111;
|
|
700
|
+
})()
|
|
701
|
+
}), _el$108, _co$18);
|
|
702
|
+
web.insert(_el$104, web.createComponent(solidJs.Show, {
|
|
703
|
+
get when() {
|
|
704
|
+
return stepsData().steps.some((s) => s.status === "active");
|
|
705
|
+
},
|
|
706
|
+
get children() {
|
|
707
|
+
var _el$105 = web.getNextElement(_tmpl$31), _el$106 = _el$105.firstChild;
|
|
708
|
+
_el$106.$$click = () => {
|
|
291
709
|
var _a;
|
|
292
|
-
return (_a = props.onAction) == null ? void 0 : _a.call(props,
|
|
710
|
+
return (_a = props.onAction) == null ? void 0 : _a.call(props, "next_step", {
|
|
711
|
+
step: stepsData().currentStep
|
|
712
|
+
});
|
|
293
713
|
};
|
|
294
|
-
web.insert(_el$56, () => item.label);
|
|
295
|
-
web.effect(() => web.className(_el$56, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${item.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : item.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
|
|
296
714
|
web.runHydrationEvents();
|
|
297
|
-
return _el$
|
|
298
|
-
}
|
|
299
|
-
}));
|
|
300
|
-
return _el$
|
|
715
|
+
return _el$105;
|
|
716
|
+
}
|
|
717
|
+
}), _el$110, _co$19);
|
|
718
|
+
return _el$104;
|
|
301
719
|
})();
|
|
302
720
|
};
|
|
303
|
-
const
|
|
304
|
-
const
|
|
305
|
-
if (Array.isArray(props.content)) return props.content;
|
|
306
|
-
return [];
|
|
307
|
-
};
|
|
721
|
+
const ActionSection = (props) => {
|
|
722
|
+
const actions = () => Array.isArray(props.content) ? props.content : [];
|
|
308
723
|
return (() => {
|
|
309
|
-
var _el$
|
|
310
|
-
web.insert(_el$
|
|
724
|
+
var _el$125 = web.getNextElement(_tmpl$36);
|
|
725
|
+
web.insert(_el$125, web.createComponent(solidJs.For, {
|
|
311
726
|
get each() {
|
|
312
|
-
return
|
|
727
|
+
return actions();
|
|
313
728
|
},
|
|
314
|
-
children: (
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
web.
|
|
331
|
-
|
|
332
|
-
|
|
729
|
+
children: (item) => (() => {
|
|
730
|
+
var _el$126 = web.getNextElement(_tmpl$29), _el$128 = _el$126.firstChild, [_el$129, _co$24] = web.getNextMarker(_el$128.nextSibling), _el$130 = _el$129.nextSibling, [_el$131, _co$25] = web.getNextMarker(_el$130.nextSibling);
|
|
731
|
+
_el$126.$$click = () => {
|
|
732
|
+
var _a;
|
|
733
|
+
return (_a = props.onAction) == null ? void 0 : _a.call(props, item.value || item.action || item.label, item);
|
|
734
|
+
};
|
|
735
|
+
web.insert(_el$126, web.createComponent(solidJs.Show, {
|
|
736
|
+
get when() {
|
|
737
|
+
return item.icon;
|
|
738
|
+
},
|
|
739
|
+
get children() {
|
|
740
|
+
var _el$127 = web.getNextElement(_tmpl$37);
|
|
741
|
+
web.insert(_el$127, () => item.icon);
|
|
742
|
+
return _el$127;
|
|
743
|
+
}
|
|
744
|
+
}), _el$129, _co$24);
|
|
745
|
+
web.insert(_el$126, () => item.label, _el$131, _co$25);
|
|
746
|
+
web.effect(() => web.className(_el$126, `px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${item.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : item.variant === "danger" ? "bg-red-600 text-white hover:bg-red-700" : "border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"}`));
|
|
747
|
+
web.runHydrationEvents();
|
|
748
|
+
return _el$126;
|
|
749
|
+
})()
|
|
333
750
|
}));
|
|
334
|
-
return _el$
|
|
751
|
+
return _el$125;
|
|
335
752
|
})();
|
|
336
753
|
};
|
|
337
|
-
web.delegateEvents(["click"]);
|
|
754
|
+
web.delegateEvents(["click", "input"]);
|
|
338
755
|
exports.ScratchpadPanel = ScratchpadPanel;
|
|
339
756
|
//# sourceMappingURL=ScratchpadPanel.cjs.map
|