@seed-ship/mcp-ui-solid 2.8.1 → 2.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ScratchpadPanel.cjs +256 -140
- package/dist/components/ScratchpadPanel.cjs.map +1 -1
- package/dist/components/ScratchpadPanel.d.ts +13 -3
- package/dist/components/ScratchpadPanel.d.ts.map +1 -1
- package/dist/components/ScratchpadPanel.js +258 -142
- package/dist/components/ScratchpadPanel.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ScratchpadPanel.tsx +173 -106
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent,
|
|
2
|
-
import {
|
|
3
|
-
var _tmpl$ = /* @__PURE__ */ template(`<
|
|
1
|
+
import { delegateEvents, getNextElement, template, getNextMarker, insert, createComponent, effect, setAttribute, runHydrationEvents, memo, className, setStyleProperty } from "solid-js/web";
|
|
2
|
+
import { createSignal, createEffect, onCleanup, Show, For, Switch, Match } from "solid-js";
|
|
3
|
+
var _tmpl$ = /* @__PURE__ */ 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__ */ 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 scratchpad"><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__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700 space-y-2">`), _tmpl$4 = /* @__PURE__ */ template(`<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__ */ 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><!$><!/>`), _tmpl$6 = /* @__PURE__ */ template(`<div class="px-4 py-3 border-t border-gray-100 dark:border-gray-700">`), _tmpl$7 = /* @__PURE__ */ template(`<div style=overflow-y:auto><div class="divide-y divide-gray-100 dark:divide-gray-700"></div><!$><!/><!$><!/>`), _tmpl$8 = /* @__PURE__ */ template(`<div class="w-full bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-lg overflow-visible"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>
|
|
4
|
+
@keyframes scratchpad-slide-down {
|
|
5
|
+
from { opacity: 0; transform: translateY(-8px); }
|
|
6
|
+
to { opacity: 1; transform: translateY(0); }
|
|
7
|
+
}
|
|
8
|
+
`), _tmpl$9 = /* @__PURE__ */ template(`<div><span class="flex-shrink-0 mt-0.5"></span><p>`), _tmpl$0 = /* @__PURE__ */ 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__ */ template(`<p class="text-sm text-gray-700 dark:text-gray-300">`), _tmpl$10 = /* @__PURE__ */ template(`<div class="mt-2 overflow-x-auto"><table class="min-w-full text-xs"><thead><tr></tr></thead><tbody>`), _tmpl$11 = /* @__PURE__ */ template(`<th class="px-2 py-1 text-left font-medium text-gray-500 dark:text-gray-400">`), _tmpl$12 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$13 = /* @__PURE__ */ template(`<td class="px-2 py-1 text-gray-700 dark:text-gray-300">`), _tmpl$14 = /* @__PURE__ */ template(`<pre class="text-xs text-gray-500 dark:text-gray-400 overflow-auto">`), _tmpl$15 = /* @__PURE__ */ 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__ */ template(`<div class=space-y-1>`), _tmpl$17 = /* @__PURE__ */ template(`<div class="flex gap-2 text-sm"><span class="text-gray-500 dark:text-gray-400 font-mono text-xs min-w-[120px]"><!$><!/>:</span><span class="text-gray-900 dark:text-white text-xs">`), _tmpl$18 = /* @__PURE__ */ template(`<p class="text-xs text-gray-400 italic">No filters applied`), _tmpl$19 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-1.5"><!$><!/><!$><!/>`), _tmpl$20 = /* @__PURE__ */ template(`<button type=button class="ml-0.5 hover:text-blue-900 dark:hover:text-blue-100 transition-colors">×`), _tmpl$21 = /* @__PURE__ */ 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"><span class="text-blue-500 dark:text-blue-400"><!$><!/>:</span><!$><!/><!$><!/>`), _tmpl$22 = /* @__PURE__ */ template(`<div class="flex flex-wrap gap-2">`), _tmpl$23 = /* @__PURE__ */ template(`<span class=mr-1>`), _tmpl$24 = /* @__PURE__ */ template(`<button type=button><!$><!/><!$><!/>`), _tmpl$25 = /* @__PURE__ */ template(`<div class="flex items-center gap-1">`), _tmpl$26 = /* @__PURE__ */ template(`<div>`), _tmpl$27 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
|
|
4
9
|
const STATUS_BADGES = {
|
|
5
10
|
loading: {
|
|
6
11
|
label: "Loading...",
|
|
@@ -20,125 +25,209 @@ const STATUS_BADGES = {
|
|
|
20
25
|
},
|
|
21
26
|
complete: {
|
|
22
27
|
label: "Complete",
|
|
23
|
-
class: "bg-
|
|
28
|
+
class: "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
|
|
24
29
|
}
|
|
25
30
|
};
|
|
26
31
|
const ScratchpadPanel = (props) => {
|
|
32
|
+
const [collapsed, setCollapsed] = createSignal(false);
|
|
27
33
|
const badge = () => STATUS_BADGES[props.state.status] || STATUS_BADGES.loading;
|
|
34
|
+
const isClosable = () => props.closable !== false;
|
|
35
|
+
const isCollapsible = () => props.collapsible !== false;
|
|
36
|
+
createEffect(() => {
|
|
37
|
+
if (props.state.status === "complete" && props.autoCloseDelay) {
|
|
38
|
+
const timer = setTimeout(() => {
|
|
39
|
+
var _a;
|
|
40
|
+
return (_a = props.onClose) == null ? void 0 : _a.call(props);
|
|
41
|
+
}, props.autoCloseDelay);
|
|
42
|
+
onCleanup(() => clearTimeout(timer));
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
const handleHeaderClick = () => {
|
|
46
|
+
if (isCollapsible()) setCollapsed(!collapsed());
|
|
47
|
+
};
|
|
28
48
|
return (() => {
|
|
29
|
-
var _el$ = getNextElement(_tmpl$
|
|
49
|
+
var _el$ = 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$] = getNextMarker(_el$7.nextSibling), _el$9 = _el$3.nextSibling, _el$0 = _el$9.firstChild, _el$10 = _el$0.nextSibling, [_el$11, _co$2] = getNextMarker(_el$10.nextSibling), _el$27 = _el$2.nextSibling, [_el$28, _co$6] = getNextMarker(_el$27.nextSibling);
|
|
50
|
+
_el$28.nextSibling;
|
|
51
|
+
_el$2.$$click = handleHeaderClick;
|
|
30
52
|
insert(_el$5, () => props.state.title);
|
|
31
|
-
insert(_el$
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return props.state.sections;
|
|
53
|
+
insert(_el$3, createComponent(Show, {
|
|
54
|
+
get when() {
|
|
55
|
+
return isCollapsible();
|
|
35
56
|
},
|
|
36
|
-
children
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
get onAction() {
|
|
45
|
-
return props.onAction;
|
|
46
|
-
},
|
|
47
|
-
get onSectionEdit() {
|
|
48
|
-
return props.onSectionEdit;
|
|
49
|
-
}
|
|
50
|
-
})
|
|
51
|
-
}));
|
|
52
|
-
insert(_el$, createComponent(Show, {
|
|
57
|
+
get children() {
|
|
58
|
+
var _el$6 = getNextElement(_tmpl$);
|
|
59
|
+
effect(() => setAttribute(_el$6, "class", `w-3.5 h-3.5 text-gray-400 transition-transform ${collapsed() ? "-rotate-90" : ""}`));
|
|
60
|
+
return _el$6;
|
|
61
|
+
}
|
|
62
|
+
}), _el$8, _co$);
|
|
63
|
+
insert(_el$0, () => badge().label);
|
|
64
|
+
insert(_el$9, createComponent(Show, {
|
|
53
65
|
get when() {
|
|
54
|
-
return props.
|
|
66
|
+
return memo(() => !!isClosable())() && props.onClose;
|
|
55
67
|
},
|
|
56
68
|
get children() {
|
|
57
|
-
var _el$
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
var _c$ = memo(() => msg.type === "warning");
|
|
66
|
-
return () => _c$() ? "⚠️" : msg.type === "question" ? "💬" : "ℹ️";
|
|
67
|
-
})());
|
|
68
|
-
insert(_el$25, () => msg.text);
|
|
69
|
-
effect(() => 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"}`));
|
|
70
|
-
return _el$23;
|
|
71
|
-
})()
|
|
72
|
-
}));
|
|
73
|
-
return _el$8;
|
|
69
|
+
var _el$1 = getNextElement(_tmpl$2);
|
|
70
|
+
_el$1.$$click = (e) => {
|
|
71
|
+
var _a;
|
|
72
|
+
e.stopPropagation();
|
|
73
|
+
(_a = props.onClose) == null ? void 0 : _a.call(props);
|
|
74
|
+
};
|
|
75
|
+
runHydrationEvents();
|
|
76
|
+
return _el$1;
|
|
74
77
|
}
|
|
75
|
-
}), _el$
|
|
78
|
+
}), _el$11, _co$2);
|
|
76
79
|
insert(_el$, createComponent(Show, {
|
|
77
80
|
get when() {
|
|
78
|
-
return
|
|
81
|
+
return !collapsed();
|
|
79
82
|
},
|
|
80
83
|
get children() {
|
|
81
|
-
var _el$
|
|
82
|
-
insert(_el$
|
|
83
|
-
|
|
84
|
-
|
|
84
|
+
var _el$12 = getNextElement(_tmpl$7), _el$13 = _el$12.firstChild, _el$22 = _el$13.nextSibling, [_el$23, _co$4] = getNextMarker(_el$22.nextSibling), _el$24 = _el$23.nextSibling, [_el$25, _co$5] = getNextMarker(_el$24.nextSibling);
|
|
85
|
+
insert(_el$13, createComponent(For, {
|
|
86
|
+
get each() {
|
|
87
|
+
return props.state.sections;
|
|
88
|
+
},
|
|
89
|
+
children: (section) => createComponent(SectionRenderer, {
|
|
90
|
+
section,
|
|
91
|
+
get filters() {
|
|
92
|
+
return props.state.filters;
|
|
93
|
+
},
|
|
94
|
+
get onFilterChange() {
|
|
95
|
+
return props.onFilterChange;
|
|
96
|
+
},
|
|
97
|
+
get onAction() {
|
|
98
|
+
return props.onAction;
|
|
99
|
+
},
|
|
100
|
+
get onSectionEdit() {
|
|
101
|
+
return props.onSectionEdit;
|
|
102
|
+
}
|
|
103
|
+
})
|
|
104
|
+
}));
|
|
105
|
+
insert(_el$12, createComponent(Show, {
|
|
85
106
|
get when() {
|
|
86
|
-
return
|
|
107
|
+
return props.state.agentMessages.length > 0;
|
|
87
108
|
},
|
|
88
109
|
get children() {
|
|
89
|
-
var _el$
|
|
90
|
-
insert(_el$
|
|
110
|
+
var _el$14 = getNextElement(_tmpl$3);
|
|
111
|
+
insert(_el$14, createComponent(For, {
|
|
91
112
|
get each() {
|
|
92
|
-
return
|
|
113
|
+
return props.state.agentMessages;
|
|
93
114
|
},
|
|
94
|
-
children: (
|
|
95
|
-
var _el$
|
|
96
|
-
insert(_el$
|
|
97
|
-
|
|
115
|
+
children: (msg) => (() => {
|
|
116
|
+
var _el$29 = getNextElement(_tmpl$9), _el$30 = _el$29.firstChild, _el$31 = _el$30.nextSibling;
|
|
117
|
+
insert(_el$30, (() => {
|
|
118
|
+
var _c$ = memo(() => msg.type === "warning");
|
|
119
|
+
return () => _c$() ? "⚠️" : msg.type === "question" ? "❓" : "ℹ️";
|
|
120
|
+
})());
|
|
121
|
+
insert(_el$31, () => msg.text);
|
|
122
|
+
effect(() => className(_el$29, `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"}`));
|
|
123
|
+
return _el$29;
|
|
98
124
|
})()
|
|
99
125
|
}));
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
126
|
+
return _el$14;
|
|
127
|
+
}
|
|
128
|
+
}), _el$23, _co$4);
|
|
129
|
+
insert(_el$12, createComponent(Show, {
|
|
130
|
+
get when() {
|
|
131
|
+
return props.state.preview;
|
|
132
|
+
},
|
|
133
|
+
get children() {
|
|
134
|
+
var _el$15 = getNextElement(_tmpl$6);
|
|
135
|
+
insert(_el$15, createComponent(Show, {
|
|
136
|
+
get when() {
|
|
137
|
+
return props.state.preview.count === 0;
|
|
103
138
|
},
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
139
|
+
get fallback() {
|
|
140
|
+
return [(() => {
|
|
141
|
+
var _el$32 = getNextElement(_tmpl$0), _el$33 = _el$32.firstChild, _el$34 = _el$33.nextSibling;
|
|
142
|
+
insert(_el$34, () => props.state.preview.count.toLocaleString());
|
|
143
|
+
return _el$32;
|
|
144
|
+
})(), (() => {
|
|
145
|
+
var _el$35 = getNextElement(_tmpl$1);
|
|
146
|
+
insert(_el$35, () => props.state.preview.summary);
|
|
147
|
+
return _el$35;
|
|
148
|
+
})(), createComponent(Show, {
|
|
149
|
+
get when() {
|
|
150
|
+
return memo(() => !!props.state.preview.rows)() && props.state.preview.rows.length > 0;
|
|
109
151
|
},
|
|
110
|
-
children
|
|
111
|
-
var _el$
|
|
112
|
-
insert(_el$
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
152
|
+
get children() {
|
|
153
|
+
var _el$36 = getNextElement(_tmpl$10), _el$37 = _el$36.firstChild, _el$38 = _el$37.firstChild, _el$39 = _el$38.firstChild, _el$40 = _el$38.nextSibling;
|
|
154
|
+
insert(_el$39, createComponent(For, {
|
|
155
|
+
get each() {
|
|
156
|
+
return Object.keys(props.state.preview.rows[0]);
|
|
157
|
+
},
|
|
158
|
+
children: (key) => (() => {
|
|
159
|
+
var _el$41 = getNextElement(_tmpl$11);
|
|
160
|
+
insert(_el$41, key);
|
|
161
|
+
return _el$41;
|
|
162
|
+
})()
|
|
163
|
+
}));
|
|
164
|
+
insert(_el$40, createComponent(For, {
|
|
165
|
+
get each() {
|
|
166
|
+
return props.state.preview.rows.slice(0, 5);
|
|
167
|
+
},
|
|
168
|
+
children: (row) => (() => {
|
|
169
|
+
var _el$42 = getNextElement(_tmpl$12);
|
|
170
|
+
insert(_el$42, createComponent(For, {
|
|
171
|
+
get each() {
|
|
172
|
+
return Object.values(row);
|
|
173
|
+
},
|
|
174
|
+
children: (val) => (() => {
|
|
175
|
+
var _el$43 = getNextElement(_tmpl$13);
|
|
176
|
+
insert(_el$43, () => String(val));
|
|
177
|
+
return _el$43;
|
|
178
|
+
})()
|
|
179
|
+
}));
|
|
180
|
+
return _el$42;
|
|
181
|
+
})()
|
|
182
|
+
}));
|
|
183
|
+
return _el$36;
|
|
184
|
+
}
|
|
185
|
+
})];
|
|
186
|
+
},
|
|
187
|
+
get children() {
|
|
188
|
+
var _el$16 = getNextElement(_tmpl$5), _el$17 = _el$16.firstChild, _el$18 = _el$17.nextSibling, _el$20 = _el$18.nextSibling, [_el$21, _co$3] = getNextMarker(_el$20.nextSibling);
|
|
189
|
+
insert(_el$16, createComponent(Show, {
|
|
190
|
+
get when() {
|
|
191
|
+
return props.onFilterChange;
|
|
192
|
+
},
|
|
193
|
+
get children() {
|
|
194
|
+
var _el$19 = getNextElement(_tmpl$4);
|
|
195
|
+
_el$19.$$click = () => {
|
|
196
|
+
var _a;
|
|
197
|
+
return (_a = props.onAction) == null ? void 0 : _a.call(props, "refine_filters");
|
|
198
|
+
};
|
|
199
|
+
runHydrationEvents();
|
|
200
|
+
return _el$19;
|
|
201
|
+
}
|
|
202
|
+
}), _el$21, _co$3);
|
|
203
|
+
return _el$16;
|
|
204
|
+
}
|
|
118
205
|
}));
|
|
119
|
-
return _el$
|
|
206
|
+
return _el$15;
|
|
120
207
|
}
|
|
121
|
-
}), _el$
|
|
122
|
-
|
|
208
|
+
}), _el$25, _co$5);
|
|
209
|
+
effect((_$p) => setStyleProperty(_el$12, "max-height", props.maxHeight || "400px"));
|
|
210
|
+
return _el$12;
|
|
123
211
|
}
|
|
124
|
-
}), _el$
|
|
125
|
-
effect(() =>
|
|
212
|
+
}), _el$28, _co$6);
|
|
213
|
+
effect((_p$) => {
|
|
214
|
+
var _v$ = `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$2 = `px-2 py-0.5 text-xs font-medium rounded-full ${badge().class}`;
|
|
215
|
+
_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
|
|
216
|
+
_v$2 !== _p$.t && className(_el$0, _p$.t = _v$2);
|
|
217
|
+
return _p$;
|
|
218
|
+
}, {
|
|
219
|
+
e: void 0,
|
|
220
|
+
t: void 0
|
|
221
|
+
});
|
|
222
|
+
runHydrationEvents();
|
|
126
223
|
return _el$;
|
|
127
224
|
})();
|
|
128
225
|
};
|
|
129
226
|
const SectionRenderer = (props) => {
|
|
130
227
|
return (() => {
|
|
131
|
-
var _el$
|
|
132
|
-
insert(_el$
|
|
133
|
-
insert(_el$
|
|
134
|
-
get when() {
|
|
135
|
-
return props.section.editable;
|
|
136
|
-
},
|
|
137
|
-
get children() {
|
|
138
|
-
return getNextElement(_tmpl$9);
|
|
139
|
-
}
|
|
140
|
-
}), _el$34, _co$4);
|
|
141
|
-
insert(_el$29, createComponent(Switch, {
|
|
228
|
+
var _el$44 = getNextElement(_tmpl$15), _el$45 = _el$44.firstChild, _el$48 = _el$45.nextSibling, [_el$49, _co$7] = getNextMarker(_el$48.nextSibling);
|
|
229
|
+
insert(_el$45, () => props.section.title);
|
|
230
|
+
insert(_el$44, createComponent(Switch, {
|
|
142
231
|
get children() {
|
|
143
232
|
return [createComponent(Match, {
|
|
144
233
|
get when() {
|
|
@@ -170,9 +259,9 @@ const SectionRenderer = (props) => {
|
|
|
170
259
|
return props.section.type === "message";
|
|
171
260
|
},
|
|
172
261
|
get children() {
|
|
173
|
-
var _el$
|
|
174
|
-
insert(_el$
|
|
175
|
-
return _el$
|
|
262
|
+
var _el$46 = getNextElement(_tmpl$1);
|
|
263
|
+
insert(_el$46, () => String(props.section.content));
|
|
264
|
+
return _el$46;
|
|
176
265
|
}
|
|
177
266
|
}), createComponent(Match, {
|
|
178
267
|
get when() {
|
|
@@ -202,14 +291,14 @@ const SectionRenderer = (props) => {
|
|
|
202
291
|
}), createComponent(Match, {
|
|
203
292
|
when: true,
|
|
204
293
|
get children() {
|
|
205
|
-
var _el$
|
|
206
|
-
insert(_el$
|
|
207
|
-
return _el$
|
|
294
|
+
var _el$47 = getNextElement(_tmpl$14);
|
|
295
|
+
insert(_el$47, () => JSON.stringify(props.section.content, null, 2));
|
|
296
|
+
return _el$47;
|
|
208
297
|
}
|
|
209
298
|
})];
|
|
210
299
|
}
|
|
211
|
-
}), _el$
|
|
212
|
-
return _el$
|
|
300
|
+
}), _el$49, _co$7);
|
|
301
|
+
return _el$44;
|
|
213
302
|
})();
|
|
214
303
|
};
|
|
215
304
|
const DataSection = (props) => {
|
|
@@ -218,24 +307,24 @@ const DataSection = (props) => {
|
|
|
218
307
|
return Object.entries(props.content);
|
|
219
308
|
};
|
|
220
309
|
return (() => {
|
|
221
|
-
var _el$
|
|
222
|
-
insert(_el$
|
|
310
|
+
var _el$50 = getNextElement(_tmpl$16);
|
|
311
|
+
insert(_el$50, createComponent(For, {
|
|
223
312
|
get each() {
|
|
224
313
|
return entries();
|
|
225
314
|
},
|
|
226
315
|
children: ([key, value]) => (() => {
|
|
227
|
-
var _el$
|
|
228
|
-
_el$
|
|
229
|
-
var _el$
|
|
230
|
-
insert(_el$
|
|
231
|
-
insert(_el$
|
|
316
|
+
var _el$51 = getNextElement(_tmpl$17), _el$52 = _el$51.firstChild, _el$54 = _el$52.firstChild, [_el$55, _co$8] = getNextMarker(_el$54.nextSibling);
|
|
317
|
+
_el$55.nextSibling;
|
|
318
|
+
var _el$56 = _el$52.nextSibling;
|
|
319
|
+
insert(_el$52, key, _el$55, _co$8);
|
|
320
|
+
insert(_el$56, (() => {
|
|
232
321
|
var _c$2 = memo(() => !!Array.isArray(value));
|
|
233
322
|
return () => _c$2() ? value.join(", ") : String(value);
|
|
234
323
|
})());
|
|
235
|
-
return _el$
|
|
324
|
+
return _el$51;
|
|
236
325
|
})()
|
|
237
326
|
}));
|
|
238
|
-
return _el$
|
|
327
|
+
return _el$50;
|
|
239
328
|
})();
|
|
240
329
|
};
|
|
241
330
|
const FilterSection = (props) => {
|
|
@@ -249,27 +338,44 @@ const FilterSection = (props) => {
|
|
|
249
338
|
};
|
|
250
339
|
const entries = () => Object.entries(props.filters);
|
|
251
340
|
return (() => {
|
|
252
|
-
var _el$
|
|
253
|
-
insert(_el$
|
|
341
|
+
var _el$57 = getNextElement(_tmpl$19), _el$59 = _el$57.firstChild, [_el$60, _co$9] = getNextMarker(_el$59.nextSibling), _el$61 = _el$60.nextSibling, [_el$62, _co$0] = getNextMarker(_el$61.nextSibling);
|
|
342
|
+
insert(_el$57, createComponent(For, {
|
|
254
343
|
get each() {
|
|
255
344
|
return entries();
|
|
256
345
|
},
|
|
257
346
|
children: ([key, value]) => (() => {
|
|
258
|
-
var _el$
|
|
259
|
-
_el$
|
|
260
|
-
var _el$
|
|
261
|
-
insert(_el$
|
|
262
|
-
insert(_el$
|
|
347
|
+
var _el$63 = getNextElement(_tmpl$21), _el$64 = _el$63.firstChild, _el$66 = _el$64.firstChild, [_el$67, _co$1] = getNextMarker(_el$66.nextSibling);
|
|
348
|
+
_el$67.nextSibling;
|
|
349
|
+
var _el$69 = _el$64.nextSibling, [_el$70, _co$10] = getNextMarker(_el$69.nextSibling), _el$71 = _el$70.nextSibling, [_el$72, _co$11] = getNextMarker(_el$71.nextSibling);
|
|
350
|
+
insert(_el$64, key, _el$67, _co$1);
|
|
351
|
+
insert(_el$63, (() => {
|
|
263
352
|
var _c$3 = memo(() => !!Array.isArray(value));
|
|
264
353
|
return () => _c$3() ? value.join(", ") : String(value);
|
|
265
|
-
})(), _el$
|
|
266
|
-
_el$
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
354
|
+
})(), _el$70, _co$10);
|
|
355
|
+
insert(_el$63, createComponent(Show, {
|
|
356
|
+
get when() {
|
|
357
|
+
return props.onFilterChange;
|
|
358
|
+
},
|
|
359
|
+
get children() {
|
|
360
|
+
var _el$68 = getNextElement(_tmpl$20);
|
|
361
|
+
_el$68.$$click = () => removeFilter(key);
|
|
362
|
+
setAttribute(_el$68, "aria-label", `Remove filter ${key}`);
|
|
363
|
+
runHydrationEvents();
|
|
364
|
+
return _el$68;
|
|
365
|
+
}
|
|
366
|
+
}), _el$72, _co$11);
|
|
367
|
+
return _el$63;
|
|
270
368
|
})()
|
|
271
|
-
}));
|
|
272
|
-
|
|
369
|
+
}), _el$60, _co$9);
|
|
370
|
+
insert(_el$57, createComponent(Show, {
|
|
371
|
+
get when() {
|
|
372
|
+
return entries().length === 0;
|
|
373
|
+
},
|
|
374
|
+
get children() {
|
|
375
|
+
return getNextElement(_tmpl$18);
|
|
376
|
+
}
|
|
377
|
+
}), _el$62, _co$0);
|
|
378
|
+
return _el$57;
|
|
273
379
|
})();
|
|
274
380
|
};
|
|
275
381
|
const ActionSection = (props) => {
|
|
@@ -278,24 +384,34 @@ const ActionSection = (props) => {
|
|
|
278
384
|
return [];
|
|
279
385
|
};
|
|
280
386
|
return (() => {
|
|
281
|
-
var _el$
|
|
282
|
-
insert(_el$
|
|
387
|
+
var _el$73 = getNextElement(_tmpl$22);
|
|
388
|
+
insert(_el$73, createComponent(For, {
|
|
283
389
|
get each() {
|
|
284
390
|
return actions();
|
|
285
391
|
},
|
|
286
392
|
children: (item) => (() => {
|
|
287
|
-
var _el$
|
|
288
|
-
_el$
|
|
393
|
+
var _el$74 = getNextElement(_tmpl$24), _el$76 = _el$74.firstChild, [_el$77, _co$12] = getNextMarker(_el$76.nextSibling), _el$78 = _el$77.nextSibling, [_el$79, _co$13] = getNextMarker(_el$78.nextSibling);
|
|
394
|
+
_el$74.$$click = () => {
|
|
289
395
|
var _a;
|
|
290
|
-
return (_a = props.onAction) == null ? void 0 : _a.call(props, item.action);
|
|
396
|
+
return (_a = props.onAction) == null ? void 0 : _a.call(props, item.value || item.action || item.label, item);
|
|
291
397
|
};
|
|
292
|
-
insert(_el$
|
|
293
|
-
|
|
398
|
+
insert(_el$74, createComponent(Show, {
|
|
399
|
+
get when() {
|
|
400
|
+
return item.icon;
|
|
401
|
+
},
|
|
402
|
+
get children() {
|
|
403
|
+
var _el$75 = getNextElement(_tmpl$23);
|
|
404
|
+
insert(_el$75, () => item.icon);
|
|
405
|
+
return _el$75;
|
|
406
|
+
}
|
|
407
|
+
}), _el$77, _co$12);
|
|
408
|
+
insert(_el$74, () => item.label, _el$79, _co$13);
|
|
409
|
+
effect(() => className(_el$74, `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"}`));
|
|
294
410
|
runHydrationEvents();
|
|
295
|
-
return _el$
|
|
411
|
+
return _el$74;
|
|
296
412
|
})()
|
|
297
413
|
}));
|
|
298
|
-
return _el$
|
|
414
|
+
return _el$73;
|
|
299
415
|
})();
|
|
300
416
|
};
|
|
301
417
|
const StepsSection = (props) => {
|
|
@@ -304,8 +420,8 @@ const StepsSection = (props) => {
|
|
|
304
420
|
return [];
|
|
305
421
|
};
|
|
306
422
|
return (() => {
|
|
307
|
-
var _el$
|
|
308
|
-
insert(_el$
|
|
423
|
+
var _el$80 = getNextElement(_tmpl$25);
|
|
424
|
+
insert(_el$80, createComponent(For, {
|
|
309
425
|
get each() {
|
|
310
426
|
return steps();
|
|
311
427
|
},
|
|
@@ -314,22 +430,22 @@ const StepsSection = (props) => {
|
|
|
314
430
|
return i() > 0;
|
|
315
431
|
},
|
|
316
432
|
get children() {
|
|
317
|
-
var _el$
|
|
318
|
-
effect(() => className(_el$
|
|
319
|
-
return _el$
|
|
433
|
+
var _el$81 = getNextElement(_tmpl$26);
|
|
434
|
+
effect(() => className(_el$81, `w-6 h-px ${step.status === "pending" ? "bg-gray-300 dark:bg-gray-600" : "bg-blue-400"}`));
|
|
435
|
+
return _el$81;
|
|
320
436
|
}
|
|
321
437
|
}), (() => {
|
|
322
|
-
var _el$
|
|
323
|
-
insert(_el$
|
|
438
|
+
var _el$82 = getNextElement(_tmpl$27), _el$83 = _el$82.firstChild, [_el$84, _co$14] = getNextMarker(_el$83.nextSibling), _el$85 = _el$84.nextSibling, [_el$86, _co$15] = getNextMarker(_el$85.nextSibling);
|
|
439
|
+
insert(_el$82, (() => {
|
|
324
440
|
var _c$4 = memo(() => step.status === "done");
|
|
325
441
|
return () => _c$4() ? "✓" : step.status === "active" ? "●" : "○";
|
|
326
|
-
})(), _el$
|
|
327
|
-
insert(_el$
|
|
328
|
-
effect(() => className(_el$
|
|
329
|
-
return _el$
|
|
442
|
+
})(), _el$84, _co$14);
|
|
443
|
+
insert(_el$82, () => step.label, _el$86, _co$15);
|
|
444
|
+
effect(() => className(_el$82, `flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium ${step.status === "done" ? "text-green-600 dark:text-green-400" : step.status === "active" ? "text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20" : "text-gray-400"}`));
|
|
445
|
+
return _el$82;
|
|
330
446
|
})()]
|
|
331
447
|
}));
|
|
332
|
-
return _el$
|
|
448
|
+
return _el$80;
|
|
333
449
|
})();
|
|
334
450
|
};
|
|
335
451
|
delegateEvents(["click"]);
|