@devslab/dds-solid 0.28.0 → 0.29.1
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.ko.md +25 -0
- package/README.md +25 -0
- package/dist/console-shell.d.ts +12 -1
- package/dist/console-shell.d.ts.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +391 -197
- package/dist/index.js.map +1 -1
- package/dist/layout.d.ts +19 -0
- package/dist/layout.d.ts.map +1 -0
- package/dist/left-nav.d.ts +14 -0
- package/dist/left-nav.d.ts.map +1 -0
- package/dist/server.js +310 -110
- package/dist/server.js.map +1 -1
- package/dist/top-nav.d.ts +5 -0
- package/dist/top-nav.d.ts.map +1 -0
- package/package.json +4 -4
package/dist/server.js
CHANGED
|
@@ -26,76 +26,54 @@ import { LocaleProvider } from "@ark-ui/solid/locale";
|
|
|
26
26
|
import { Toast, Toaster, createToaster } from "@ark-ui/solid/toast";
|
|
27
27
|
import { space } from "@devslab/dds-tokens";
|
|
28
28
|
import { Tooltip as Tooltip$1, useTooltip } from "@ark-ui/solid/tooltip";
|
|
29
|
-
//#region src/
|
|
30
|
-
var _tmpl$$
|
|
31
|
-
"<
|
|
32
|
-
" class=\"dds-console-
|
|
33
|
-
"</dl>"
|
|
34
|
-
];
|
|
35
|
-
var _tmpl$2$2 = [
|
|
36
|
-
"<div",
|
|
37
|
-
" class=\"dds-console-rail__foot\">",
|
|
38
|
-
"</div>"
|
|
39
|
-
];
|
|
40
|
-
var _tmpl$3 = [
|
|
41
|
-
"<p",
|
|
42
|
-
" class=\"dds-console-page-eyebrow\">",
|
|
43
|
-
"</p>"
|
|
44
|
-
];
|
|
45
|
-
var _tmpl$4 = [
|
|
46
|
-
"<div",
|
|
47
|
-
" class=\"dds-console-page-header__actions\">",
|
|
48
|
-
"</div>"
|
|
49
|
-
];
|
|
50
|
-
var _tmpl$5 = [
|
|
51
|
-
"<div",
|
|
52
|
-
" class=\"dds-console-shell\"",
|
|
53
|
-
"><a class=\"dds-console-skip dds-visually-hidden\" href=\"#dds-console-main\">",
|
|
54
|
-
"</a><button class=\"dds-console-rail__toggle\" type=\"button\" data-action=\"toggle-rail\" aria-controls=\"dds-console-rail\"",
|
|
55
|
-
"><span aria-hidden=\"true\"></span><span class=\"dds-visually-hidden\">",
|
|
56
|
-
"</span></button><div class=\"dds-console-rail__scrim\"",
|
|
57
|
-
"></div><aside id=\"dds-console-rail\" class=\"dds-console-rail\"",
|
|
58
|
-
"><a class=\"dds-console-rail__brand\"",
|
|
59
|
-
"><img",
|
|
60
|
-
" alt width=\"20\" height=\"20\"><strong>",
|
|
61
|
-
"</strong></a><!--$-->",
|
|
62
|
-
"<!--/--><nav class=\"dds-console-rail__nav\"",
|
|
29
|
+
//#region src/left-nav.tsx
|
|
30
|
+
var _tmpl$$7 = [
|
|
31
|
+
"<nav",
|
|
32
|
+
" class=\"dds-console-rail__nav dds-left-nav\"",
|
|
63
33
|
">",
|
|
64
|
-
"</nav
|
|
65
|
-
"<!--/--></aside><main id=\"dds-console-main\" class=\"dds-console-main\" tabindex=\"-1\"><header class=\"dds-console-page-header\"><div class=\"dds-console-page-header__text\"><!--$-->",
|
|
66
|
-
"<!--/--><h1>",
|
|
67
|
-
"</h1></div><!--$-->",
|
|
68
|
-
"<!--/--></header><!--$-->",
|
|
69
|
-
"<!--/--></main></div>"
|
|
34
|
+
"</nav>"
|
|
70
35
|
];
|
|
71
|
-
var _tmpl$
|
|
72
|
-
"<
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"</
|
|
36
|
+
var _tmpl$2$5 = [
|
|
37
|
+
"<button",
|
|
38
|
+
" type=\"button\" class=\"dds-console-rail__group-toggle\"",
|
|
39
|
+
"><span>",
|
|
40
|
+
"</span><span class=\"dds-console-rail__chevron\" aria-hidden=\"true\"></span></button>"
|
|
76
41
|
];
|
|
77
|
-
var _tmpl$
|
|
42
|
+
var _tmpl$3$3 = [
|
|
78
43
|
"<section",
|
|
79
44
|
" class=\"dds-console-rail__group\"",
|
|
80
45
|
"><h2",
|
|
81
46
|
" class=\"dds-console-rail__group-label\">",
|
|
82
|
-
"</h2><ul
|
|
47
|
+
"</h2><ul",
|
|
48
|
+
"",
|
|
49
|
+
">",
|
|
83
50
|
"</ul></section>"
|
|
84
51
|
];
|
|
85
|
-
var _tmpl$
|
|
52
|
+
var _tmpl$4$2 = [
|
|
53
|
+
"<span",
|
|
54
|
+
" class=\"dds-console-rail__item-content\"><span class=\"dds-console-rail__item-icon\" aria-hidden=\"true\">",
|
|
55
|
+
"</span><span>",
|
|
56
|
+
"</span></span>"
|
|
57
|
+
];
|
|
58
|
+
var _tmpl$5$2 = [
|
|
86
59
|
"<span",
|
|
87
60
|
" class=\"dds-console-rail__badge\"",
|
|
88
61
|
">",
|
|
89
62
|
"</span>"
|
|
90
63
|
];
|
|
91
|
-
var _tmpl$
|
|
64
|
+
var _tmpl$6$1 = [
|
|
92
65
|
"<li",
|
|
93
66
|
"><a class=\"dds-console-rail__item\" data-nav=\"",
|
|
94
67
|
"\"",
|
|
95
|
-
"
|
|
96
|
-
"
|
|
68
|
+
"><!--$-->",
|
|
69
|
+
"<!--/--><!--$-->",
|
|
97
70
|
"<!--/--></a></li>"
|
|
98
71
|
];
|
|
72
|
+
var _tmpl$7$1 = [
|
|
73
|
+
"<span",
|
|
74
|
+
">",
|
|
75
|
+
"</span>"
|
|
76
|
+
];
|
|
99
77
|
function isActive(activePath, href, explicit) {
|
|
100
78
|
if (explicit !== void 0) return explicit;
|
|
101
79
|
if (href.split("/").filter(Boolean).length <= 1) return activePath === href;
|
|
@@ -111,76 +89,246 @@ function isActive(activePath, href, explicit) {
|
|
|
111
89
|
function fillBadgeLabel(template, count) {
|
|
112
90
|
return template.replace("{count}", () => String(count));
|
|
113
91
|
}
|
|
114
|
-
function
|
|
115
|
-
const [
|
|
116
|
-
const
|
|
117
|
-
|
|
118
|
-
onMount(() => {
|
|
119
|
-
setHydrated(true);
|
|
120
|
-
const onKey = (event) => {
|
|
121
|
-
if (event.key === "Escape") close();
|
|
122
|
-
};
|
|
123
|
-
document.addEventListener("keydown", onKey);
|
|
124
|
-
onCleanup(() => document.removeEventListener("keydown", onKey));
|
|
125
|
-
});
|
|
126
|
-
return ssr(_tmpl$5, ssrHydrationKey(), ssrAttribute("data-surface", escape(props.surface, true), false) + ssrAttribute("data-hydrated", hydrated() ? "true" : escape(void 0, true), false), escape(props.labels.skip), ssrAttribute("aria-expanded", escape(open(), true), false), open() ? escape(props.labels.menuClose) : escape(props.labels.menuOpen), ssrAttribute("data-open", open() ? "true" : "false", false), ssrAttribute("data-open", open() ? "true" : "false", false), ssrAttribute("href", escape(props.brand.href, true), false), ssrAttribute("src", escape(props.brand.mark, true), false), escape(props.brand.name), escape(createComponent(Show, {
|
|
127
|
-
get when() {
|
|
128
|
-
return memo(() => !!props.context)() && props.context.length > 0;
|
|
129
|
-
},
|
|
130
|
-
get children() {
|
|
131
|
-
return ssr(_tmpl$$4, ssrHydrationKey(), escape(createComponent(For, {
|
|
132
|
-
get each() {
|
|
133
|
-
return props.context;
|
|
134
|
-
},
|
|
135
|
-
children: (row) => ssr(_tmpl$6, ssrHydrationKey(), escape(row.label), escape(row.value))
|
|
136
|
-
})));
|
|
137
|
-
}
|
|
138
|
-
})), ssrAttribute("aria-label", escape(props.labels.nav, true), false), escape(createComponent(For, {
|
|
92
|
+
function LeftNav(props) {
|
|
93
|
+
const [internalExpandedGroups, setInternalExpandedGroups] = createSignal(props.defaultExpandedGroups ?? props.nav.flatMap((group, index) => group.collapsible && group.items.some((item) => isActive(props.activePath, item.href, item.active)) ? [group.id ?? `group-${index}`] : []));
|
|
94
|
+
const expanded = () => props.expandedGroups ?? internalExpandedGroups();
|
|
95
|
+
return ssr(_tmpl$$7, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.labels.nav, true), false), escape(createComponent(For, {
|
|
139
96
|
get each() {
|
|
140
97
|
return props.nav;
|
|
141
98
|
},
|
|
142
|
-
children: (group) => {
|
|
99
|
+
children: (group, index) => {
|
|
143
100
|
const groupId = `dds-console-group-${createUniqueId()}`;
|
|
144
|
-
|
|
101
|
+
const itemsId = `${groupId}-items`;
|
|
102
|
+
const stateId = () => group.id ?? `group-${index()}`;
|
|
103
|
+
const isExpanded = () => !group.collapsible || expanded().includes(stateId());
|
|
104
|
+
return ssr(_tmpl$3$3, ssrHydrationKey(), ssrAttribute("aria-labelledby", escape(groupId, true), false) + ssrAttribute("data-collapsible", group.collapsible ? "true" : escape(void 0, true), false), ssrAttribute("id", escape(groupId, true), false), escape(createComponent(Show, {
|
|
105
|
+
get when() {
|
|
106
|
+
return group.collapsible;
|
|
107
|
+
},
|
|
108
|
+
get fallback() {
|
|
109
|
+
return group.label;
|
|
110
|
+
},
|
|
111
|
+
get children() {
|
|
112
|
+
return ssr(_tmpl$2$5, ssrHydrationKey(), ssrAttribute("aria-expanded", escape(isExpanded(), true), false) + ssrAttribute("aria-controls", escape(itemsId, true), false), escape(group.label));
|
|
113
|
+
}
|
|
114
|
+
})), ssrAttribute("id", escape(itemsId, true), false), ssrAttribute("hidden", !isExpanded(), true), escape(createComponent(For, {
|
|
145
115
|
get each() {
|
|
146
116
|
return group.items;
|
|
147
117
|
},
|
|
148
|
-
children: (item) => ssr(_tmpl$
|
|
118
|
+
children: (item) => ssr(_tmpl$6$1, ssrHydrationKey(), `${escape(props.surface, true)}.${escape(item.id, true)}`, ssrAttribute("href", escape(item.href, true), false) + ssrAttribute("aria-current", isActive(props.activePath, item.href, item.active) ? "page" : escape(void 0, true), false), escape(createComponent(Show, {
|
|
119
|
+
get when() {
|
|
120
|
+
return item.icon != null;
|
|
121
|
+
},
|
|
122
|
+
get fallback() {
|
|
123
|
+
return ssr(_tmpl$7$1, ssrHydrationKey(), escape(item.label));
|
|
124
|
+
},
|
|
125
|
+
get children() {
|
|
126
|
+
return ssr(_tmpl$4$2, ssrHydrationKey(), escape(item.icon), escape(item.label));
|
|
127
|
+
}
|
|
128
|
+
})), escape(createComponent(Show, {
|
|
149
129
|
get when() {
|
|
150
130
|
return memo(() => item.badge !== void 0)() && item.badge > 0;
|
|
151
131
|
},
|
|
152
132
|
get children() {
|
|
153
|
-
return ssr(_tmpl$
|
|
133
|
+
return ssr(_tmpl$5$2, ssrHydrationKey(), ssrAttribute("aria-label", escape(fillBadgeLabel(props.labels.badge, item.badge), true), false), escape(item.badge));
|
|
154
134
|
}
|
|
155
135
|
})))
|
|
156
136
|
})));
|
|
157
137
|
}
|
|
158
|
-
}))
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
138
|
+
})));
|
|
139
|
+
}
|
|
140
|
+
//#endregion
|
|
141
|
+
//#region src/layout.tsx
|
|
142
|
+
var _tmpl$$6 = [
|
|
143
|
+
"<div",
|
|
144
|
+
" class=\"dds-console-shell dds-layout\"",
|
|
145
|
+
"><a class=\"dds-console-skip dds-visually-hidden\" href=\"",
|
|
146
|
+
"\">",
|
|
147
|
+
"</a><button class=\"dds-console-rail__toggle\" type=\"button\" data-action=\"toggle-rail\"",
|
|
148
|
+
"><span aria-hidden=\"true\"></span><span class=\"dds-visually-hidden\">",
|
|
149
|
+
"</span></button><div class=\"dds-console-rail__scrim\"",
|
|
150
|
+
"></div><aside",
|
|
151
|
+
" class=\"dds-console-rail dds-layout__navigation\"",
|
|
152
|
+
"><!--$-->",
|
|
153
|
+
"<!--/--><!--$-->",
|
|
154
|
+
"<!--/--><!--$-->",
|
|
155
|
+
"<!--/--></aside><main",
|
|
156
|
+
" class=\"dds-console-main dds-layout__main\" tabindex=\"-1\"><div class=\"dds-layout__content\"",
|
|
157
|
+
"><!--$-->",
|
|
158
|
+
"<!--/--><!--$-->",
|
|
159
|
+
"<!--/--><!--$-->",
|
|
160
|
+
"<!--/--></div></main></div>"
|
|
161
|
+
];
|
|
162
|
+
var _tmpl$2$4 = [
|
|
163
|
+
"<header",
|
|
164
|
+
" class=\"dds-layout__header\">",
|
|
165
|
+
"</header>"
|
|
166
|
+
];
|
|
167
|
+
var _tmpl$3$2 = [
|
|
168
|
+
"<footer",
|
|
169
|
+
" class=\"dds-layout__footer\">",
|
|
170
|
+
"</footer>"
|
|
171
|
+
];
|
|
172
|
+
function Layout(props) {
|
|
173
|
+
const id = createUniqueId(), railId = `dds-console-rail-${id}`, mainId = `dds-console-main-${id}`;
|
|
174
|
+
const [open, setOpen] = createSignal(false), [hydrated, setHydrated] = createSignal(false);
|
|
175
|
+
let toggle;
|
|
176
|
+
function close() {
|
|
177
|
+
setOpen(false);
|
|
178
|
+
}
|
|
179
|
+
function focusables() {
|
|
180
|
+
return [toggle, ...Array.from([])].filter((el) => !!el && !el.closest("[hidden]") && el.getClientRects().length > 0 && getComputedStyle(el).visibility !== "hidden" && !Array.from([]).some((details) => details.contains(el) && !details.querySelector("summary")?.contains(el)) && !el.hasAttribute("disabled"));
|
|
181
|
+
}
|
|
182
|
+
onMount(() => {
|
|
183
|
+
setHydrated(true);
|
|
184
|
+
if (typeof window.matchMedia === "function") {
|
|
185
|
+
const media = window.matchMedia("(max-width: 56.25rem)");
|
|
186
|
+
const resize = () => {
|
|
187
|
+
if (!media.matches) setOpen(false);
|
|
188
|
+
};
|
|
189
|
+
media.addEventListener("change", resize);
|
|
190
|
+
onCleanup(() => media.removeEventListener("change", resize));
|
|
164
191
|
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
192
|
+
function key(event) {
|
|
193
|
+
if (!open()) return;
|
|
194
|
+
if (event.key === "Escape") {
|
|
195
|
+
event.preventDefault();
|
|
196
|
+
close();
|
|
197
|
+
}
|
|
198
|
+
if (event.key === "Tab") {
|
|
199
|
+
const items = focusables(), first = items[0], last = items.at(-1);
|
|
200
|
+
if (event.shiftKey && document.activeElement === first) {
|
|
201
|
+
event.preventDefault();
|
|
202
|
+
last?.focus();
|
|
203
|
+
} else if (!event.shiftKey && document.activeElement === last) {
|
|
204
|
+
event.preventDefault();
|
|
205
|
+
first?.focus();
|
|
206
|
+
}
|
|
207
|
+
}
|
|
171
208
|
}
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
209
|
+
document.addEventListener("keydown", key);
|
|
210
|
+
onCleanup(() => document.removeEventListener("keydown", key));
|
|
211
|
+
});
|
|
212
|
+
return ssr(_tmpl$$6, ssrHydrationKey(), ssrAttribute("data-navigation-position", escape(props.navigationPosition ?? "left", true), false) + ssrAttribute("data-surface", escape(props.surface, true), false) + ssrAttribute("data-hydrated", hydrated() ? "true" : escape(void 0, true), false), `#${escape(mainId, true)}`, escape(props.labels.skip), ssrAttribute("aria-controls", escape(railId, true), false) + ssrAttribute("aria-expanded", escape(open(), true), false), open() ? escape(props.labels.menuClose) : escape(props.labels.menuOpen), ssrAttribute("data-open", escape(String(open()), true), false), ssrAttribute("id", escape(railId, true), false), ssrAttribute("data-open", escape(String(open()), true), false), escape(props.railStart), escape(props.navigation), escape(props.railEnd), ssrAttribute("id", escape(mainId, true), false), ssrAttribute("data-width", escape(props.contentWidth ?? "workspace", true), false), props.header && ssr(_tmpl$2$4, ssrHydrationKey(), escape(props.header)), escape(props.children), props.footer && ssr(_tmpl$3$2, ssrHydrationKey(), escape(props.footer)));
|
|
213
|
+
}
|
|
214
|
+
//#endregion
|
|
215
|
+
//#region src/console-shell.tsx
|
|
216
|
+
var _tmpl$$5 = [
|
|
217
|
+
"<a",
|
|
218
|
+
" class=\"dds-console-rail__brand\"",
|
|
219
|
+
"><img",
|
|
220
|
+
" alt width=\"20\" height=\"20\"><strong>",
|
|
221
|
+
"</strong></a>"
|
|
222
|
+
];
|
|
223
|
+
var _tmpl$2$3 = [
|
|
224
|
+
"<dl",
|
|
225
|
+
" class=\"dds-console-rail__context\">",
|
|
226
|
+
"</dl>"
|
|
227
|
+
];
|
|
228
|
+
var _tmpl$3$1 = [
|
|
229
|
+
"<div",
|
|
230
|
+
"><dt>",
|
|
231
|
+
"</dt><dd>",
|
|
232
|
+
"</dd></div>"
|
|
233
|
+
];
|
|
234
|
+
var _tmpl$4$1 = [
|
|
235
|
+
"<div",
|
|
236
|
+
" class=\"dds-console-rail__foot\">",
|
|
237
|
+
"</div>"
|
|
238
|
+
];
|
|
239
|
+
var _tmpl$5$1 = [
|
|
240
|
+
"<p",
|
|
241
|
+
" class=\"dds-console-page-eyebrow\">",
|
|
242
|
+
"</p>"
|
|
243
|
+
];
|
|
244
|
+
var _tmpl$6 = [
|
|
245
|
+
"<div",
|
|
246
|
+
" class=\"dds-console-page-header__actions\">",
|
|
247
|
+
"</div>"
|
|
248
|
+
];
|
|
249
|
+
var _tmpl$7 = [
|
|
250
|
+
"<div",
|
|
251
|
+
" class=\"dds-console-page-header\"><div class=\"dds-console-page-header__text\"><!--$-->",
|
|
252
|
+
"<!--/--><h1>",
|
|
253
|
+
"</h1></div><!--$-->",
|
|
254
|
+
"<!--/--></div>"
|
|
255
|
+
];
|
|
256
|
+
function ConsoleShell(props) {
|
|
257
|
+
return createComponent(Layout, {
|
|
258
|
+
get labels() {
|
|
259
|
+
return props.labels;
|
|
260
|
+
},
|
|
261
|
+
get surface() {
|
|
262
|
+
return props.surface;
|
|
263
|
+
},
|
|
264
|
+
get railStart() {
|
|
265
|
+
return [ssr(_tmpl$$5, ssrHydrationKey(), ssrAttribute("href", escape(props.brand.href, true), false), ssrAttribute("src", escape(props.brand.mark, true), false), escape(props.brand.name)), createComponent(Show, {
|
|
266
|
+
get when() {
|
|
267
|
+
return memo(() => !!props.context)() && props.context.length > 0;
|
|
268
|
+
},
|
|
269
|
+
get children() {
|
|
270
|
+
return ssr(_tmpl$2$3, ssrHydrationKey(), escape(createComponent(For, {
|
|
271
|
+
get each() {
|
|
272
|
+
return props.context;
|
|
273
|
+
},
|
|
274
|
+
children: (row) => ssr(_tmpl$3$1, ssrHydrationKey(), escape(row.label), escape(row.value))
|
|
275
|
+
})));
|
|
276
|
+
}
|
|
277
|
+
})];
|
|
278
|
+
},
|
|
279
|
+
get navigation() {
|
|
280
|
+
return props.navigation ?? createComponent(LeftNav, {
|
|
281
|
+
get surface() {
|
|
282
|
+
return props.surface;
|
|
283
|
+
},
|
|
284
|
+
get activePath() {
|
|
285
|
+
return props.activePath;
|
|
286
|
+
},
|
|
287
|
+
get nav() {
|
|
288
|
+
return props.nav ?? [];
|
|
289
|
+
},
|
|
290
|
+
get labels() {
|
|
291
|
+
return props.labels;
|
|
292
|
+
},
|
|
293
|
+
get expandedGroups() {
|
|
294
|
+
return props.expandedGroups;
|
|
295
|
+
},
|
|
296
|
+
get defaultExpandedGroups() {
|
|
297
|
+
return props.defaultExpandedGroups;
|
|
298
|
+
},
|
|
299
|
+
get onExpandedGroupsChange() {
|
|
300
|
+
return props.onExpandedGroupsChange;
|
|
301
|
+
}
|
|
302
|
+
});
|
|
303
|
+
},
|
|
304
|
+
get railEnd() {
|
|
305
|
+
return memo(() => !!props.foot)() && ssr(_tmpl$4$1, ssrHydrationKey(), escape(props.foot));
|
|
306
|
+
},
|
|
307
|
+
get header() {
|
|
308
|
+
return ssr(_tmpl$7, ssrHydrationKey(), escape(createComponent(Show, {
|
|
309
|
+
get when() {
|
|
310
|
+
return props.header.eyebrow;
|
|
311
|
+
},
|
|
312
|
+
get children() {
|
|
313
|
+
return ssr(_tmpl$5$1, ssrHydrationKey(), escape(props.header.eyebrow));
|
|
314
|
+
}
|
|
315
|
+
})), escape(props.header.title), escape(createComponent(Show, {
|
|
316
|
+
get when() {
|
|
317
|
+
return props.header.actions;
|
|
318
|
+
},
|
|
319
|
+
get children() {
|
|
320
|
+
return ssr(_tmpl$6, ssrHydrationKey(), escape(props.header.actions));
|
|
321
|
+
}
|
|
322
|
+
})));
|
|
175
323
|
},
|
|
176
324
|
get children() {
|
|
177
|
-
return
|
|
325
|
+
return props.children;
|
|
178
326
|
}
|
|
179
|
-
})
|
|
327
|
+
});
|
|
180
328
|
}
|
|
181
329
|
//#endregion
|
|
182
330
|
//#region src/dialog.tsx
|
|
183
|
-
var _tmpl$$
|
|
331
|
+
var _tmpl$$4 = [
|
|
184
332
|
"<div",
|
|
185
333
|
">",
|
|
186
334
|
"</div>"
|
|
@@ -304,7 +452,7 @@ function Dialog(props) {
|
|
|
304
452
|
return props.children;
|
|
305
453
|
},
|
|
306
454
|
get actions() {
|
|
307
|
-
return props.actions && ssr(_tmpl$$
|
|
455
|
+
return props.actions && ssr(_tmpl$$4, ssrHydrationKey() + ssrAttribute("class", escape(cls("dds-dialog__actions", props.actionsClass), true), false), escape(props.actions));
|
|
308
456
|
}
|
|
309
457
|
};
|
|
310
458
|
return props.frame ? props.frame(parts) : [
|
|
@@ -403,8 +551,8 @@ function RadioGroup(props) {
|
|
|
403
551
|
}
|
|
404
552
|
//#endregion
|
|
405
553
|
//#region src/icon.tsx
|
|
406
|
-
var _tmpl$$
|
|
407
|
-
var _tmpl$2$
|
|
554
|
+
var _tmpl$$3 = ["<g>", "</g>"];
|
|
555
|
+
var _tmpl$2$2 = [
|
|
408
556
|
"<title",
|
|
409
557
|
">",
|
|
410
558
|
"</title>"
|
|
@@ -450,9 +598,9 @@ function Icon(props) {
|
|
|
450
598
|
}
|
|
451
599
|
}), () => [
|
|
452
600
|
"<!--$-->",
|
|
453
|
-
local.label && ssr(_tmpl$2$
|
|
601
|
+
local.label && ssr(_tmpl$2$2, ssrHydrationKey(), escape(local.label)),
|
|
454
602
|
"<!--/-->",
|
|
455
|
-
ssr(_tmpl$$
|
|
603
|
+
ssr(_tmpl$$3, icon().body)
|
|
456
604
|
], true);
|
|
457
605
|
}
|
|
458
606
|
//#endregion
|
|
@@ -497,13 +645,13 @@ function createPendingAction() {
|
|
|
497
645
|
}
|
|
498
646
|
//#endregion
|
|
499
647
|
//#region src/status-pill.tsx
|
|
500
|
-
var _tmpl$$
|
|
648
|
+
var _tmpl$$2 = [
|
|
501
649
|
"<code",
|
|
502
650
|
" data-status=\"",
|
|
503
651
|
"\">",
|
|
504
652
|
"</code>"
|
|
505
653
|
];
|
|
506
|
-
var _tmpl$2 = [
|
|
654
|
+
var _tmpl$2$1 = [
|
|
507
655
|
"<span",
|
|
508
656
|
" data-status=\"",
|
|
509
657
|
"\"",
|
|
@@ -531,12 +679,12 @@ function createStatusPill(config) {
|
|
|
531
679
|
return known() || !open.has(props.domain);
|
|
532
680
|
},
|
|
533
681
|
get fallback() {
|
|
534
|
-
return ssr(_tmpl$$
|
|
682
|
+
return ssr(_tmpl$$2, ssrHydrationKey(), `${escape(props.domain, true)}.${escape(props.value, true)}`, escape(props.value));
|
|
535
683
|
},
|
|
536
684
|
get children() {
|
|
537
685
|
return (() => {
|
|
538
686
|
const value = resolved();
|
|
539
|
-
return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", value.tone === "neutral" ? "dds-badge" : `dds-badge dds-badge--${escape(value.tone, true)}`, false), `${escape(props.domain, true)}.${escape(props.value, true)}`, ssrAttribute("data-tone", escape(value.tone, true), false), escape(value.text));
|
|
687
|
+
return ssr(_tmpl$2$1, ssrHydrationKey() + ssrAttribute("class", value.tone === "neutral" ? "dds-badge" : `dds-badge dds-badge--${escape(value.tone, true)}`, false), `${escape(props.domain, true)}.${escape(props.value, true)}`, ssrAttribute("data-tone", escape(value.tone, true), false), escape(value.text));
|
|
540
688
|
})();
|
|
541
689
|
}
|
|
542
690
|
});
|
|
@@ -747,7 +895,7 @@ function useToast() {
|
|
|
747
895
|
}
|
|
748
896
|
//#endregion
|
|
749
897
|
//#region src/tooltip.tsx
|
|
750
|
-
var _tmpl
|
|
898
|
+
var _tmpl$$1 = [
|
|
751
899
|
"<span",
|
|
752
900
|
"><!--$-->",
|
|
753
901
|
"<!--/--><!--$-->",
|
|
@@ -774,7 +922,7 @@ function Tooltip(props) {
|
|
|
774
922
|
lazyMount: false,
|
|
775
923
|
unmountOnExit: false,
|
|
776
924
|
get children() {
|
|
777
|
-
return ssr(_tmpl
|
|
925
|
+
return ssr(_tmpl$$1, ssrHydrationKey() + ssrAttribute("class", escape(classes("dds-tooltip", props.class), true), false), escape(createComponent(Tooltip$1.Trigger, { asChild: (merge) => {
|
|
778
926
|
const [, attributes] = splitProps(merge(), ["onFocusIn", "onFocusOut"]);
|
|
779
927
|
return props.children({
|
|
780
928
|
...attributes,
|
|
@@ -796,6 +944,58 @@ function Tooltip(props) {
|
|
|
796
944
|
});
|
|
797
945
|
}
|
|
798
946
|
//#endregion
|
|
799
|
-
|
|
947
|
+
//#region src/top-nav.tsx
|
|
948
|
+
var _tmpl$ = [
|
|
949
|
+
"<nav",
|
|
950
|
+
" class=\"dds-top-nav\"",
|
|
951
|
+
">",
|
|
952
|
+
"</nav>"
|
|
953
|
+
];
|
|
954
|
+
var _tmpl$2 = [
|
|
955
|
+
"<details",
|
|
956
|
+
" class=\"dds-top-nav__group\"><summary class=\"dds-top-nav__trigger\">",
|
|
957
|
+
"</summary><ul class=\"dds-top-nav__items\">",
|
|
958
|
+
"</ul></details>"
|
|
959
|
+
];
|
|
960
|
+
var _tmpl$3 = [
|
|
961
|
+
"<li",
|
|
962
|
+
"><a class=\"dds-top-nav__item\" data-nav=\"",
|
|
963
|
+
"\"",
|
|
964
|
+
"><!--$-->",
|
|
965
|
+
"<!--/--><span>",
|
|
966
|
+
"</span><!--$-->",
|
|
967
|
+
"<!--/--></a></li>"
|
|
968
|
+
];
|
|
969
|
+
var _tmpl$4 = [
|
|
970
|
+
"<span",
|
|
971
|
+
" class=\"dds-top-nav__item-icon\" aria-hidden=\"true\">",
|
|
972
|
+
"</span>"
|
|
973
|
+
];
|
|
974
|
+
var _tmpl$5 = [
|
|
975
|
+
"<span",
|
|
976
|
+
" class=\"dds-console-rail__badge\"",
|
|
977
|
+
">",
|
|
978
|
+
"</span>"
|
|
979
|
+
];
|
|
980
|
+
function TopNav(props) {
|
|
981
|
+
onMount(() => {
|
|
982
|
+
const outside = (event) => {};
|
|
983
|
+
document.addEventListener("pointerdown", outside);
|
|
984
|
+
onCleanup(() => document.removeEventListener("pointerdown", outside));
|
|
985
|
+
});
|
|
986
|
+
return ssr(_tmpl$, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.labels.nav, true), false), escape(createComponent(For, {
|
|
987
|
+
get each() {
|
|
988
|
+
return props.nav;
|
|
989
|
+
},
|
|
990
|
+
children: (group) => ssr(_tmpl$2, ssrHydrationKey(), escape(group.label), escape(createComponent(For, {
|
|
991
|
+
get each() {
|
|
992
|
+
return group.items;
|
|
993
|
+
},
|
|
994
|
+
children: (item) => ssr(_tmpl$3, ssrHydrationKey(), `${escape(props.surface, true)}.${escape(item.id, true)}`, ssrAttribute("href", escape(item.href, true), false) + ssrAttribute("aria-current", item.active ?? (props.activePath === item.href || item.href.split("/").filter(Boolean).length > 1 && props.activePath.startsWith(`${item.href}/`)) ? "page" : escape(void 0, true), false), item.icon != null && ssr(_tmpl$4, ssrHydrationKey(), escape(item.icon)), escape(item.label), item.badge != null && item.badge > 0 && ssr(_tmpl$5, ssrHydrationKey(), ssrAttribute("aria-label", escape(props.labels.badge.replace("{count}", () => String(item.badge)), true), false), escape(item.badge)))
|
|
995
|
+
})))
|
|
996
|
+
})));
|
|
997
|
+
}
|
|
998
|
+
//#endregion
|
|
999
|
+
export { Button, Calendar, Checkbox, Combobox, ConsoleShell, DatePicker, DateRangePicker, Dialog, DropdownMenu, Field, Icon, IconButton, Input, InputGroup, Layout, LeftNav, MonthPicker, NumberInput, Popover, Radio, RadioGroup, SegmentedControl, Select, SelectPicker, Switch, Tab, TabList, TabPanel, Tabs, TimePicker, ToastProvider, Tooltip, TopNav, createControllableSignal, createPendingAction, createStatusPill, normalizeNumberText, numberInputMessages, useToast, validateSegmentedItems };
|
|
800
1000
|
|
|
801
1001
|
//# sourceMappingURL=server.js.map
|