@nonoun/native-app 0.2.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/custom-elements.json +848 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/nui-app-panel/nui-app-panel-element.d.ts +20 -0
- package/dist/nui-app-panel/nui-app-panel-element.d.ts.map +1 -0
- package/dist/nui-app.css +843 -0
- package/dist/nui-app.js +336 -0
- package/dist/nui-sidebar/nui-sidebar-element.d.ts +11 -0
- package/dist/nui-sidebar/nui-sidebar-element.d.ts.map +1 -0
- package/dist/nui-sidebar/nui-sidebar-group-element.d.ts +24 -0
- package/dist/nui-sidebar/nui-sidebar-group-element.d.ts.map +1 -0
- package/dist/nui-sidebar/nui-sidebar-group-header-element.d.ts +7 -0
- package/dist/nui-sidebar/nui-sidebar-group-header-element.d.ts.map +1 -0
- package/dist/nui-sidebar/nui-sidebar-item-element.d.ts +10 -0
- package/dist/nui-sidebar/nui-sidebar-item-element.d.ts.map +1 -0
- package/dist/nui-sidebar/nui-sidebar-nav-element.d.ts +20 -0
- package/dist/nui-sidebar/nui-sidebar-nav-element.d.ts.map +1 -0
- package/dist/nui-sidebar/nui-sidebar-nav-item-element.d.ts +23 -0
- package/dist/nui-sidebar/nui-sidebar-nav-item-element.d.ts.map +1 -0
- package/package.json +37 -0
package/dist/nui-app.js
ADDED
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
import { ListNavigateController as e, PopoverController as t, ResizeController as n, UIElement as r, UIListbox as i, UIOption as a, createDisabledEffect as o, define as s, prop as c, signal as l, syncProp as u, uid as d } from "@nonoun/native-ui";
|
|
2
|
+
/**
|
|
3
|
+
* Sidebar navigation with roving focus and selection indicator.
|
|
4
|
+
* @attr {string} value - Currently selected nav item value
|
|
5
|
+
* @attr {boolean} disabled - Disables all nav items
|
|
6
|
+
* @fires ui-change - Fired when selection changes with `{ value, label }` detail
|
|
7
|
+
*/
|
|
8
|
+
var f = class extends r {
|
|
9
|
+
static observedAttributes = ["value", "disabled"];
|
|
10
|
+
#e;
|
|
11
|
+
#t;
|
|
12
|
+
#n;
|
|
13
|
+
constructor() {
|
|
14
|
+
super(), this.#e = this.attachInternals(), this.#e.role = "navigation", this.#t = c(this, "disabled", { type: "boolean" });
|
|
15
|
+
}
|
|
16
|
+
get value() {
|
|
17
|
+
return this.#n?.listValue.value ?? null;
|
|
18
|
+
}
|
|
19
|
+
set value(e) {
|
|
20
|
+
this.#n && (this.#n.listValue.value = e), e === null ? this.removeAttribute("value") : this.setAttribute("value", e);
|
|
21
|
+
}
|
|
22
|
+
get disabled() {
|
|
23
|
+
return this.#t.value;
|
|
24
|
+
}
|
|
25
|
+
set disabled(e) {
|
|
26
|
+
this.#t.set(e);
|
|
27
|
+
}
|
|
28
|
+
attributeChangedCallback(e, t, n) {
|
|
29
|
+
if (t !== n) {
|
|
30
|
+
if (u({ disabled: this.#t }, e, n)) {
|
|
31
|
+
super.attributeChangedCallback?.(e, t, n);
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
e === "value" && this.#n && (this.#n.listValue.value = n), super.attributeChangedCallback?.(e, t, n);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
setup() {
|
|
38
|
+
super.setup(), this.#n = new e(this, {
|
|
39
|
+
itemSelector: ":scope nui-sidebar-nav-item:not([disabled])",
|
|
40
|
+
orientation: "vertical",
|
|
41
|
+
ariaAttr: "aria-current",
|
|
42
|
+
onChildSelect: (e) => {
|
|
43
|
+
this.#n.listValue.value = e.value, this.setAttribute("value", e.value), this.dispatchEvent(new CustomEvent("ui-change", {
|
|
44
|
+
bubbles: !0,
|
|
45
|
+
composed: !0,
|
|
46
|
+
cancelable: !0,
|
|
47
|
+
detail: e
|
|
48
|
+
}));
|
|
49
|
+
},
|
|
50
|
+
addEffect: (e) => this.addEffect(e),
|
|
51
|
+
deferChildren: (e) => this.deferChildren(e)
|
|
52
|
+
});
|
|
53
|
+
let t = this.getAttribute("value");
|
|
54
|
+
t !== null && (this.#n.listValue.value = t), this.addEffect(o(this, this.#t.signal, this.#e));
|
|
55
|
+
}
|
|
56
|
+
teardown() {
|
|
57
|
+
this.#n.destroy(), super.teardown();
|
|
58
|
+
}
|
|
59
|
+
}, p = class extends r {
|
|
60
|
+
static observedAttributes = [
|
|
61
|
+
"value",
|
|
62
|
+
"disabled",
|
|
63
|
+
"label"
|
|
64
|
+
];
|
|
65
|
+
#e;
|
|
66
|
+
#t = l("");
|
|
67
|
+
#n;
|
|
68
|
+
#r = l("");
|
|
69
|
+
constructor() {
|
|
70
|
+
super(), this.#e = this.attachInternals(), this.#e.role = "link", this.#n = c(this, "disabled", { type: "boolean" });
|
|
71
|
+
}
|
|
72
|
+
get value() {
|
|
73
|
+
return this.#t.value;
|
|
74
|
+
}
|
|
75
|
+
set value(e) {
|
|
76
|
+
this.#t.value = e, this.getAttribute("value") !== e && this.setAttribute("value", e);
|
|
77
|
+
}
|
|
78
|
+
get disabled() {
|
|
79
|
+
return this.#n.value;
|
|
80
|
+
}
|
|
81
|
+
set disabled(e) {
|
|
82
|
+
this.#n.set(e);
|
|
83
|
+
}
|
|
84
|
+
get label() {
|
|
85
|
+
return this.#r.value || this.textContent?.trim() || "";
|
|
86
|
+
}
|
|
87
|
+
set label(e) {
|
|
88
|
+
this.#r.value = e, e ? this.getAttribute("label") !== e && this.setAttribute("label", e) : this.removeAttribute("label");
|
|
89
|
+
}
|
|
90
|
+
attributeChangedCallback(e, t, n) {
|
|
91
|
+
if (t !== n) {
|
|
92
|
+
if (u({ disabled: this.#n }, e, n)) {
|
|
93
|
+
super.attributeChangedCallback?.(e, t, n);
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
switch (e) {
|
|
97
|
+
case "value":
|
|
98
|
+
this.#t.value = n ?? "";
|
|
99
|
+
break;
|
|
100
|
+
case "label":
|
|
101
|
+
this.#r.value = n ?? "";
|
|
102
|
+
break;
|
|
103
|
+
}
|
|
104
|
+
super.attributeChangedCallback?.(e, t, n);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
setup() {
|
|
108
|
+
super.setup(), this.addEffect(o(this, this.#n.signal, this.#e)), this.addEventListener("click", this.#i);
|
|
109
|
+
}
|
|
110
|
+
teardown() {
|
|
111
|
+
this.removeEventListener("click", this.#i), super.teardown();
|
|
112
|
+
}
|
|
113
|
+
#i = () => {
|
|
114
|
+
this.disabled || this.dispatchEvent(new CustomEvent("ui-select", {
|
|
115
|
+
bubbles: !0,
|
|
116
|
+
composed: !0,
|
|
117
|
+
detail: {
|
|
118
|
+
value: this.#t.value,
|
|
119
|
+
label: this.label
|
|
120
|
+
}
|
|
121
|
+
}));
|
|
122
|
+
};
|
|
123
|
+
}, m = class extends r {
|
|
124
|
+
static observedAttributes = ["open"];
|
|
125
|
+
#e = l(!1);
|
|
126
|
+
#t = null;
|
|
127
|
+
#n;
|
|
128
|
+
#r = null;
|
|
129
|
+
#i = null;
|
|
130
|
+
#a = null;
|
|
131
|
+
#o = !1;
|
|
132
|
+
constructor() {
|
|
133
|
+
super(), this.#n = this.attachInternals(), this.#n.role = "group";
|
|
134
|
+
}
|
|
135
|
+
/** Whether the flyout popover is currently open. */
|
|
136
|
+
get flyoutOpen() {
|
|
137
|
+
return this.#o;
|
|
138
|
+
}
|
|
139
|
+
get open() {
|
|
140
|
+
return this.#e.value;
|
|
141
|
+
}
|
|
142
|
+
set open(e) {
|
|
143
|
+
this.#e.value = e, this.toggleAttribute("open", e);
|
|
144
|
+
}
|
|
145
|
+
attributeChangedCallback(e, t, n) {
|
|
146
|
+
t !== n && (e === "open" && (this.#e.value = n !== null), super.attributeChangedCallback?.(e, t, n));
|
|
147
|
+
}
|
|
148
|
+
setup() {
|
|
149
|
+
super.setup();
|
|
150
|
+
let e = document.createElement("details"), n = document.createElement("summary"), r = this.querySelector(":scope > nui-sidebar-group-header");
|
|
151
|
+
for (r && n.appendChild(r); this.firstChild;) e.appendChild(this.firstChild);
|
|
152
|
+
e.insertBefore(n, e.firstChild), this.appendChild(e), this.#t = e, this.addEffect(() => {
|
|
153
|
+
let e = this.#e.value;
|
|
154
|
+
this.#t && (this.#t.open = e);
|
|
155
|
+
}), e.addEventListener("toggle", this.#c), this.#r = new MutationObserver(() => this.#s()), this.#r.observe(e, {
|
|
156
|
+
subtree: !0,
|
|
157
|
+
attributes: !0,
|
|
158
|
+
attributeFilter: ["aria-current"]
|
|
159
|
+
}), this.#s();
|
|
160
|
+
let i = document.createElement("ui-listbox");
|
|
161
|
+
i.setAttribute("popover", "manual"), i.className = "nav-group-flyout", this.appendChild(i), this.#i = i, this.#a = new t(this), this.#a.wirePopover(this, i), i.addEventListener("ui-select", this.#u), i.addEventListener("ui-change", this.#d), this.addEventListener("ui-dismiss", this.#l);
|
|
162
|
+
}
|
|
163
|
+
teardown() {
|
|
164
|
+
this.closeFlyout(), this.#a?.destroy(), this.#a = null, this.#i?.remove(), this.#i = null, this.#r?.disconnect(), this.#r = null, this.#t?.removeEventListener("toggle", this.#c), this.#t = null, super.teardown();
|
|
165
|
+
}
|
|
166
|
+
#s() {
|
|
167
|
+
if (!this.#t) return;
|
|
168
|
+
let e = this.#t.querySelectorAll(":scope > nui-sidebar-nav-item"), t = -1;
|
|
169
|
+
for (let n = 0; n < e.length; n++) if (e[n].hasAttribute("aria-current")) {
|
|
170
|
+
t = n;
|
|
171
|
+
break;
|
|
172
|
+
}
|
|
173
|
+
if (t < 0) {
|
|
174
|
+
this.#n.states.delete("has-selection");
|
|
175
|
+
return;
|
|
176
|
+
}
|
|
177
|
+
this.style.setProperty("--_indicator-index", `${t}`), this.#n.states.add("has-selection");
|
|
178
|
+
}
|
|
179
|
+
#c = () => {
|
|
180
|
+
if (!this.#t) return;
|
|
181
|
+
let e = this.#t.open;
|
|
182
|
+
this.#e.value = e, this.toggleAttribute("open", e);
|
|
183
|
+
};
|
|
184
|
+
/** Stamp ui-option elements from child nav-items, open the flyout popover. */
|
|
185
|
+
openFlyout() {
|
|
186
|
+
if (!this.#t || !this.#i) return;
|
|
187
|
+
this.#i.innerHTML = "";
|
|
188
|
+
let e = this.#t.querySelectorAll(":scope > nui-sidebar-nav-item"), t = !0;
|
|
189
|
+
for (let n of e) {
|
|
190
|
+
let e = n.getAttribute("value") ?? "", r = n.getAttribute("label") || n.textContent?.trim() || "", i = n.hasAttribute("aria-disabled"), a = document.createElement("ui-option");
|
|
191
|
+
a.setAttribute("value", e), a.textContent = r, n.hasAttribute("aria-current") && a.setAttribute("selected", ""), i && a.setAttribute("disabled", ""), i || (a.setAttribute("tabindex", t ? "0" : "-1"), t = !1), this.#i.appendChild(a);
|
|
192
|
+
}
|
|
193
|
+
this.#o = !0, this.#a?.syncPopover(!0), queueMicrotask(() => {
|
|
194
|
+
(this.#i?.querySelector("ui-option:not([disabled])"))?.focus();
|
|
195
|
+
});
|
|
196
|
+
}
|
|
197
|
+
/** Clear the flyout and close the popover. Returns focus to the summary. */
|
|
198
|
+
closeFlyout() {
|
|
199
|
+
this.#i && (this.#i.innerHTML = "", this.#o = !1, this.#a?.syncPopover(!1), (this.#t?.querySelector("summary"))?.focus());
|
|
200
|
+
}
|
|
201
|
+
#l = () => {
|
|
202
|
+
this.closeFlyout();
|
|
203
|
+
};
|
|
204
|
+
#u = () => {
|
|
205
|
+
queueMicrotask(() => this.closeFlyout());
|
|
206
|
+
};
|
|
207
|
+
#d = (e) => {
|
|
208
|
+
e.stopPropagation();
|
|
209
|
+
};
|
|
210
|
+
}, h = class extends r {
|
|
211
|
+
constructor() {
|
|
212
|
+
super();
|
|
213
|
+
let e = this.attachInternals();
|
|
214
|
+
e.role = "presentation";
|
|
215
|
+
}
|
|
216
|
+
setup() {
|
|
217
|
+
super.setup(), this.id ||= d("ngh");
|
|
218
|
+
let e = this.closest("nui-sidebar-group");
|
|
219
|
+
e && e.setAttribute("aria-labelledby", this.id);
|
|
220
|
+
let t = this.querySelector(":scope > ui-icon");
|
|
221
|
+
if (t) {
|
|
222
|
+
let e = document.createElement("span");
|
|
223
|
+
e.className = "icon-well", this.insertBefore(e, t), e.appendChild(t);
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}, g = class extends r {
|
|
227
|
+
static observedAttributes = ["collapsed"];
|
|
228
|
+
#e = null;
|
|
229
|
+
#t = null;
|
|
230
|
+
#n = null;
|
|
231
|
+
#r = [];
|
|
232
|
+
attributeChangedCallback(e, t, n) {
|
|
233
|
+
t !== n && (e === "collapsed" && this.dataset.ready !== void 0 && this.#i(), super.attributeChangedCallback?.(e, t, n));
|
|
234
|
+
}
|
|
235
|
+
setup() {
|
|
236
|
+
super.setup();
|
|
237
|
+
let e = this.querySelector(":scope > [slot=\"sidebar\"]");
|
|
238
|
+
e?.querySelector(".layout-resize-handle") && (this.#e = new n(e, {
|
|
239
|
+
handleSelector: ".layout-resize-handle",
|
|
240
|
+
axis: "horizontal",
|
|
241
|
+
min: 160,
|
|
242
|
+
max: 400
|
|
243
|
+
})), e && this.#s(e), queueMicrotask(() => this.#i()), this.addEventListener("ui-dismiss", this.#o), this.dataset.ready = "";
|
|
244
|
+
}
|
|
245
|
+
teardown() {
|
|
246
|
+
this.removeEventListener("ui-dismiss", this.#o), this.#a(), this.#n = null, this.#t?.disconnect(), this.#t = null, this.#e?.destroy(), this.#e = null, super.teardown();
|
|
247
|
+
}
|
|
248
|
+
/** Attach or detach summary click interception based on collapsed state. */
|
|
249
|
+
#i() {
|
|
250
|
+
if (this.#a(), !this.hasAttribute("collapsed")) {
|
|
251
|
+
this.#n?.flyoutOpen && this.#n.closeFlyout(), this.#n = null;
|
|
252
|
+
return;
|
|
253
|
+
}
|
|
254
|
+
let e = this.querySelectorAll("nui-sidebar-group");
|
|
255
|
+
for (let t of e) {
|
|
256
|
+
let e = t.querySelector(":scope > details > summary");
|
|
257
|
+
if (!e) continue;
|
|
258
|
+
let n = (e) => {
|
|
259
|
+
e.preventDefault(), this.#n === t && t.flyoutOpen ? (t.closeFlyout(), this.#n = null) : (this.#n?.flyoutOpen && this.#n.closeFlyout(), t.openFlyout(), this.#n = t);
|
|
260
|
+
};
|
|
261
|
+
e.addEventListener("click", n), this.#r.push({
|
|
262
|
+
summary: e,
|
|
263
|
+
handler: n
|
|
264
|
+
});
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
/** Remove all summary click listeners. */
|
|
268
|
+
#a() {
|
|
269
|
+
for (let { summary: e, handler: t } of this.#r) e.removeEventListener("click", t);
|
|
270
|
+
this.#r = [];
|
|
271
|
+
}
|
|
272
|
+
/** When a group closes its flyout internally (dismiss, option select),
|
|
273
|
+
* clear our active reference so we stay in sync. */
|
|
274
|
+
#o = (e) => {
|
|
275
|
+
let t = e.target?.closest?.("nui-sidebar-group");
|
|
276
|
+
t && t === this.#n && (this.#n = null);
|
|
277
|
+
};
|
|
278
|
+
/** Watch header/footer size changes and sync CSS custom properties + data
|
|
279
|
+
* attributes so content gets correct padding offsets and fade masks. */
|
|
280
|
+
#s(e) {
|
|
281
|
+
let t = e.querySelector("nui-sidebar-header"), n = e.querySelector("nui-sidebar-footer"), r = e.querySelector("nui-sidebar-content");
|
|
282
|
+
if (!r) return;
|
|
283
|
+
let i = () => {
|
|
284
|
+
let i = t ? t.offsetHeight : 0, a = n ? n.offsetHeight : 0;
|
|
285
|
+
e.style.setProperty("--_sidebar-header-height", `${i}px`), e.style.setProperty("--_sidebar-footer-height", `${a}px`), t ? r.dataset.hasHeader = "" : delete r.dataset.hasHeader, n ? r.dataset.hasFooter = "" : delete r.dataset.hasFooter;
|
|
286
|
+
};
|
|
287
|
+
i();
|
|
288
|
+
let a = [];
|
|
289
|
+
if (t && a.push(t), n && a.push(n), a.length > 0) {
|
|
290
|
+
this.#t = new ResizeObserver(i);
|
|
291
|
+
for (let e of a) this.#t.observe(e);
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
}, _ = class extends r {
|
|
295
|
+
#e = null;
|
|
296
|
+
#t = !1;
|
|
297
|
+
setup() {
|
|
298
|
+
super.setup();
|
|
299
|
+
let e = this.querySelector(":scope > ui-listbox[popover]");
|
|
300
|
+
e && (this.#e = new t(this), this.#e.wirePopover(this, e), this.addEventListener("click", this.#n), this.addEventListener("ui-dismiss", this.#r));
|
|
301
|
+
}
|
|
302
|
+
teardown() {
|
|
303
|
+
this.removeEventListener("click", this.#n), this.removeEventListener("ui-dismiss", this.#r), this.#e?.destroy(), this.#e = null, this.#t = !1, super.teardown();
|
|
304
|
+
}
|
|
305
|
+
#n = (e) => {
|
|
306
|
+
e.target.closest("ui-listbox") || (this.#t = !this.#t, this.#e?.syncPopover(this.#t));
|
|
307
|
+
};
|
|
308
|
+
#r = () => {
|
|
309
|
+
this.#t = !1, this.#e?.syncPopover(!1);
|
|
310
|
+
};
|
|
311
|
+
}, v = class extends r {
|
|
312
|
+
#e = null;
|
|
313
|
+
get open() {
|
|
314
|
+
return this.hasAttribute("open");
|
|
315
|
+
}
|
|
316
|
+
set open(e) {
|
|
317
|
+
this.toggleAttribute("open", e);
|
|
318
|
+
}
|
|
319
|
+
toggle() {
|
|
320
|
+
this.open = !this.open;
|
|
321
|
+
}
|
|
322
|
+
setup() {
|
|
323
|
+
super.setup(), this.hasAttribute("aside") && this.querySelector(".layout-resize-handle") && (this.#e = new n(this, {
|
|
324
|
+
handleSelector: ".layout-resize-handle",
|
|
325
|
+
axis: "horizontal",
|
|
326
|
+
min: 280,
|
|
327
|
+
max: 480,
|
|
328
|
+
reverse: !0
|
|
329
|
+
}));
|
|
330
|
+
}
|
|
331
|
+
teardown() {
|
|
332
|
+
this.#e?.destroy(), this.#e = null, super.teardown();
|
|
333
|
+
}
|
|
334
|
+
};
|
|
335
|
+
s("nui-sidebar-nav-item", p), s("nui-sidebar-group-header", h), s("nui-sidebar-group", m), s("nui-sidebar-nav", f), s("nui-sidebar-item", _), s("nui-sidebar", g), s("nui-app-panel", v), s("ui-listbox", i), s("ui-option", a);
|
|
336
|
+
export { v as NuiAppPanel, g as NuiSidebar, m as NuiSidebarGroup, h as NuiSidebarGroupHeader, _ as NuiSidebarItem, f as NuiSidebarNav, p as NuiSidebarNavItem };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { UIElement } from '@nonoun/native-ui';
|
|
2
|
+
/** Full-page layout with a resizable sidebar aside and content column.
|
|
3
|
+
* Coordinates nav-group flyout popovers when the sidebar is collapsed. */
|
|
4
|
+
export declare class NuiSidebar extends UIElement {
|
|
5
|
+
#private;
|
|
6
|
+
static observedAttributes: string[];
|
|
7
|
+
attributeChangedCallback(name: string, old: string | null, val: string | null): void;
|
|
8
|
+
setup(): void;
|
|
9
|
+
teardown(): void;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=nui-sidebar-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nui-sidebar-element.d.ts","sourceRoot":"","sources":["../../src/nui-sidebar/nui-sidebar-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,mBAAmB,CAAC;AAGhE;2EAC2E;AAC3E,qBAAa,UAAW,SAAQ,SAAS;;IACvC,MAAM,CAAC,kBAAkB,WAAiB;IAS1C,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IASpF,KAAK,IAAI,IAAI;IAmCb,QAAQ,IAAI,IAAI;CAoGjB"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { UIElement } from '@nonoun/native-ui';
|
|
2
|
+
/**
|
|
3
|
+
* Collapsible group of navigation items using native details/summary.
|
|
4
|
+
* Exposes `openFlyout()` / `closeFlyout()` for collapsed-sidebar mode —
|
|
5
|
+
* the sidebar layout coordinator decides *when* to call them.
|
|
6
|
+
* @attr {boolean} open - Whether the group is expanded
|
|
7
|
+
*/
|
|
8
|
+
export declare class NuiSidebarGroup extends UIElement {
|
|
9
|
+
#private;
|
|
10
|
+
static observedAttributes: string[];
|
|
11
|
+
constructor();
|
|
12
|
+
/** Whether the flyout popover is currently open. */
|
|
13
|
+
get flyoutOpen(): boolean;
|
|
14
|
+
get open(): boolean;
|
|
15
|
+
set open(val: boolean);
|
|
16
|
+
attributeChangedCallback(name: string, old: string | null, val: string | null): void;
|
|
17
|
+
setup(): void;
|
|
18
|
+
teardown(): void;
|
|
19
|
+
/** Stamp ui-option elements from child nav-items, open the flyout popover. */
|
|
20
|
+
openFlyout(): void;
|
|
21
|
+
/** Clear the flyout and close the popover. Returns focus to the summary. */
|
|
22
|
+
closeFlyout(): void;
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=nui-sidebar-group-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nui-sidebar-group-element.d.ts","sourceRoot":"","sources":["../../src/nui-sidebar/nui-sidebar-group-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,SAAS,EAAqB,MAAM,mBAAmB,CAAC;AAEzE;;;;;GAKG;AACH,qBAAa,eAAgB,SAAQ,SAAS;;IAC5C,MAAM,CAAC,kBAAkB,WAAY;;IAkBrC,oDAAoD;IACpD,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,GAAG,EAAE,OAAO,EAGpB;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAmEb,QAAQ,IAAI,IAAI;IA2ChB,8EAA8E;IAC9E,UAAU,IAAI,IAAI;IAuClB,4EAA4E;IAC5E,WAAW,IAAI,IAAI;CA+BpB"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { UIElement } from '@nonoun/native-ui';
|
|
2
|
+
/** Non-interactive heading label for a navigation group. */
|
|
3
|
+
export declare class NuiSidebarGroupHeader extends UIElement {
|
|
4
|
+
constructor();
|
|
5
|
+
setup(): void;
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=nui-sidebar-group-header-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nui-sidebar-group-header-element.d.ts","sourceRoot":"","sources":["../../src/nui-sidebar/nui-sidebar-group-header-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAO,MAAM,mBAAmB,CAAC;AAEnD,4DAA4D;AAC5D,qBAAa,qBAAsB,SAAQ,SAAS;;IAOlD,KAAK,IAAI,IAAI;CAgBd"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { UIElement } from '@nonoun/native-ui';
|
|
2
|
+
/** Generic sidebar row wrapper. Passive by default — provides inline padding for
|
|
3
|
+
* arbitrary content (buttons, links, custom elements). When a child
|
|
4
|
+
* `ui-listbox[popover]` is present, wires PopoverController for click-to-toggle. */
|
|
5
|
+
export declare class NuiSidebarItem extends UIElement {
|
|
6
|
+
#private;
|
|
7
|
+
setup(): void;
|
|
8
|
+
teardown(): void;
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=nui-sidebar-item-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nui-sidebar-item-element.d.ts","sourceRoot":"","sources":["../../src/nui-sidebar/nui-sidebar-item-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,mBAAmB,CAAC;AAEjE;;qFAEqF;AACrF,qBAAa,cAAe,SAAQ,SAAS;;IAI3C,KAAK,IAAI,IAAI;IAYb,QAAQ,IAAI,IAAI;CAmBjB"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { UIElement } from '@nonoun/native-ui';
|
|
2
|
+
/**
|
|
3
|
+
* Sidebar navigation with roving focus and selection indicator.
|
|
4
|
+
* @attr {string} value - Currently selected nav item value
|
|
5
|
+
* @attr {boolean} disabled - Disables all nav items
|
|
6
|
+
* @fires ui-change - Fired when selection changes with `{ value, label }` detail
|
|
7
|
+
*/
|
|
8
|
+
export declare class NuiSidebarNav extends UIElement {
|
|
9
|
+
#private;
|
|
10
|
+
static observedAttributes: string[];
|
|
11
|
+
constructor();
|
|
12
|
+
get value(): string | null;
|
|
13
|
+
set value(val: string | null);
|
|
14
|
+
get disabled(): boolean;
|
|
15
|
+
set disabled(val: boolean);
|
|
16
|
+
attributeChangedCallback(name: string, old: string | null, val: string | null): void;
|
|
17
|
+
setup(): void;
|
|
18
|
+
teardown(): void;
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=nui-sidebar-nav-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nui-sidebar-nav-element.d.ts","sourceRoot":"","sources":["../../src/nui-sidebar/nui-sidebar-nav-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgE,MAAM,mBAAmB,CAAC;AAG5G;;;;;GAKG;AACH,qBAAa,aAAc,SAAQ,SAAS;;IAC1C,MAAM,CAAC,kBAAkB,WAAyB;;IAalD,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAA+C;IAEzE,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAO3B;IAED,IAAI,QAAQ,IAAI,OAAO,CAAiC;IACxD,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAA8B;IAEvD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAYpF,KAAK,IAAI,IAAI;IAoCb,QAAQ,IAAI,IAAI;CAIjB"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { UIElement } from '@nonoun/native-ui';
|
|
2
|
+
/**
|
|
3
|
+
* Selectable navigation item within a nav component.
|
|
4
|
+
* @attr {string} value - Item value emitted on selection
|
|
5
|
+
* @attr {boolean} disabled - Disables this item
|
|
6
|
+
* @attr {string} label - Display label (falls back to text content)
|
|
7
|
+
* @fires ui-select - Fired on click with `{ value, label }` detail
|
|
8
|
+
*/
|
|
9
|
+
export declare class NuiSidebarNavItem extends UIElement {
|
|
10
|
+
#private;
|
|
11
|
+
static observedAttributes: string[];
|
|
12
|
+
constructor();
|
|
13
|
+
get value(): string;
|
|
14
|
+
set value(val: string);
|
|
15
|
+
get disabled(): boolean;
|
|
16
|
+
set disabled(val: boolean);
|
|
17
|
+
get label(): string;
|
|
18
|
+
set label(val: string);
|
|
19
|
+
attributeChangedCallback(name: string, old: string | null, val: string | null): void;
|
|
20
|
+
setup(): void;
|
|
21
|
+
teardown(): void;
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=nui-sidebar-nav-item-element.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nui-sidebar-nav-item-element.d.ts","sourceRoot":"","sources":["../../src/nui-sidebar/nui-sidebar-nav-item-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,SAAS,EAAwC,MAAM,mBAAmB,CAAC;AAG5F;;;;;;GAMG;AACH,qBAAa,iBAAkB,SAAQ,SAAS;;IAC9C,MAAM,CAAC,kBAAkB,WAAkC;;IAc3D,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAKpB;IAED,IAAI,QAAQ,IAAI,OAAO,CAAiC;IACxD,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAA8B;IAEvD,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EASpB;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAiBpF,KAAK,IAAI,IAAI;IAQb,QAAQ,IAAI,IAAI;CAajB"}
|
package/package.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@nonoun/native-app",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Application layout and navigation components for @nonoun/native-ui",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "./dist/native-app.js",
|
|
8
|
+
"module": "./dist/native-app.js",
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"default": "./dist/native-app.js"
|
|
14
|
+
},
|
|
15
|
+
"./css": "./dist/native-app.css"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"sideEffects": [
|
|
21
|
+
"./dist/native-app.js"
|
|
22
|
+
],
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"@nonoun/native-ui": ">=0.5.0"
|
|
25
|
+
},
|
|
26
|
+
"customElements": "dist/custom-elements.json",
|
|
27
|
+
"scripts": {
|
|
28
|
+
"build": "npm run build:js && npm run build:css && npm run build:types && npm run build:cem",
|
|
29
|
+
"build:js": "vite build",
|
|
30
|
+
"build:css": "node scripts/build-css.mjs",
|
|
31
|
+
"build:types": "tsc -p tsconfig.build.json",
|
|
32
|
+
"build:cem": "cem analyze"
|
|
33
|
+
},
|
|
34
|
+
"publishConfig": {
|
|
35
|
+
"access": "public"
|
|
36
|
+
}
|
|
37
|
+
}
|