@broberg/app-shell 0.14.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -0
- package/css/app-shell.css +72 -65
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +11 -2
- package/dist/index.d.ts +11 -2
- package/dist/index.js.map +1 -1
- package/dist/preact.cjs +99 -79
- package/dist/preact.cjs.map +1 -1
- package/dist/preact.d.cts +17 -2
- package/dist/preact.d.ts +17 -2
- package/dist/preact.js +99 -79
- package/dist/preact.js.map +1 -1
- package/package.json +1 -1
package/dist/preact.cjs
CHANGED
|
@@ -810,7 +810,7 @@ function Sidebar(p) {
|
|
|
810
810
|
children: [
|
|
811
811
|
active && !sub ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__bar" }) : null,
|
|
812
812
|
it.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__icon", children: it.icon }) : null,
|
|
813
|
-
it.marker === "working" ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__marker", "data-testid": `sidebar-item-${it.id}-marker`, role: "img", "aria-label": TEXT[p.lang].working }) : null,
|
|
813
|
+
it.marker === "working" ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__marker", "data-testid": `sidebar-item-${it.id}-marker`, role: "img", "aria-label": TEXT[p.lang].working }) : it.marker === "idle" ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__marker bas-item__marker--idle", "data-testid": `sidebar-item-${it.id}-marker`, "aria-hidden": "true" }) : null,
|
|
814
814
|
/* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__label", children: it.label }),
|
|
815
815
|
it.pinned ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__pin", "data-testid": `sidebar-item-${it.id}-pinned`, role: "img", "aria-label": TEXT[p.lang].pinned, children: /* @__PURE__ */ jsxRuntime.jsx(IconPin, {}) }) : null,
|
|
816
816
|
badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-item__count", "data-testid": `sidebar-badge-${it.id}`, children: badge }) : null
|
|
@@ -901,19 +901,29 @@ function Sidebar(p) {
|
|
|
901
901
|
) : p.brandMark }) : null
|
|
902
902
|
] }) : null,
|
|
903
903
|
/* @__PURE__ */ jsxRuntime.jsx("nav", { class: "bas-sidebar__nav", children: p.groups.map((g) => {
|
|
904
|
-
const open = railed || !folded.has(g.label);
|
|
904
|
+
const open = railed || g.hideLabel || !folded.has(g.label);
|
|
905
905
|
const slug = g.label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
|
|
906
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
906
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
907
|
+
"div",
|
|
908
|
+
{
|
|
909
|
+
class: "bas-group" + (g.variant === "plain" ? " bas-group--plain" : ""),
|
|
910
|
+
role: g.hideLabel ? "group" : void 0,
|
|
911
|
+
"aria-label": g.hideLabel ? g.label : void 0,
|
|
912
|
+
"data-testid": g.hideLabel ? `sidebar-group-${slug}-unlabelled` : void 0,
|
|
913
|
+
children: [
|
|
914
|
+
g.hideLabel ? null : /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", class: "bas-group__label", "data-testid": `sidebar-group-${slug}`, "aria-expanded": open, onClick: () => toggleGroup(g.label), children: [
|
|
915
|
+
/* @__PURE__ */ jsxRuntime.jsx(IconChevron, { open }),
|
|
916
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { children: g.label })
|
|
917
|
+
] }),
|
|
918
|
+
open ? g.items.map(item) : null,
|
|
919
|
+
open ? g.sections?.map((sec) => /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-section", "data-testid": `sidebar-section-${slug}-${sec.label.toLowerCase().replace(/[^a-z0-9æøå]+/g, "-")}`, children: [
|
|
920
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-section__label", children: sec.label }),
|
|
921
|
+
sec.items.map(item)
|
|
922
|
+
] }, sec.label)) : null
|
|
923
|
+
]
|
|
924
|
+
},
|
|
925
|
+
g.label
|
|
926
|
+
);
|
|
917
927
|
}) }),
|
|
918
928
|
p.footer?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__foot", children: p.footer.map(item) }) : null,
|
|
919
929
|
p.bottom ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-sidebar__user", "data-testid": "sidebar-user", children: p.bottom }) : null
|
|
@@ -1473,76 +1483,86 @@ function AppShell(p) {
|
|
|
1473
1483
|
const heading = p.title ?? activeNavLabel(p.groups, p.footer, p.currentPath);
|
|
1474
1484
|
const userInSidebar = p.userMenuPlacement === "sidebar-footer";
|
|
1475
1485
|
const sidebarUser = userInSidebar && p.user ? /* @__PURE__ */ jsxRuntime.jsx(UserMenu, { user: p.user, ...p.userMenu, placement: "sidebar-footer", onNavigate: p.onNavigate, lang: p.lang }) : null;
|
|
1476
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
collapsed,
|
|
1501
|
-
collapse,
|
|
1502
|
-
brandMark: p.brandMark,
|
|
1503
|
-
homeHref: p.homeHref,
|
|
1504
|
-
homeLabel: p.homeLabel,
|
|
1505
|
-
mobileOpen: drawer,
|
|
1506
|
-
onClose: () => setDrawer(false),
|
|
1507
|
-
mobile: mode,
|
|
1508
|
-
header: inset || mode === "drawer" ? p.brand : void 0,
|
|
1509
|
-
brandTestId: inset ? "brand-home" : void 0,
|
|
1510
|
-
groupsKey: `${prefix}.groups`,
|
|
1511
|
-
itemsKey: `${prefix}.items`,
|
|
1512
|
-
bottom: sidebarUser,
|
|
1513
|
-
lang: p.lang
|
|
1514
|
-
}
|
|
1515
|
-
),
|
|
1516
|
-
/* @__PURE__ */ jsxRuntime.jsxs("main", { class: "bas-main", "data-testid": "app-content", children: [
|
|
1517
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-contenthead", "data-testid": "content-header", children: [
|
|
1486
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1487
|
+
"div",
|
|
1488
|
+
{
|
|
1489
|
+
class: "bas-root",
|
|
1490
|
+
"data-testid": "app-shell",
|
|
1491
|
+
"data-mobile": mode,
|
|
1492
|
+
"data-layout": layout,
|
|
1493
|
+
style: p.fontScale !== void 0 ? { "--bas-font-scale": String(p.fontScale) } : void 0,
|
|
1494
|
+
children: [
|
|
1495
|
+
inset ? null : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1496
|
+
TopBar,
|
|
1497
|
+
{
|
|
1498
|
+
brand: p.brand,
|
|
1499
|
+
homeHref: p.homeHref,
|
|
1500
|
+
onHome: () => setDrawer(false),
|
|
1501
|
+
actions: p.actions,
|
|
1502
|
+
notifications: p.notifications,
|
|
1503
|
+
user: userInSidebar ? void 0 : p.user,
|
|
1504
|
+
userMenu: p.userMenu,
|
|
1505
|
+
onNavigate: p.onNavigate,
|
|
1506
|
+
lang: p.lang
|
|
1507
|
+
}
|
|
1508
|
+
),
|
|
1509
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-row", children: [
|
|
1518
1510
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1519
|
-
|
|
1511
|
+
Sidebar,
|
|
1520
1512
|
{
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1513
|
+
groups: p.groups,
|
|
1514
|
+
footer: p.footer,
|
|
1515
|
+
onItemAction: p.onItemAction,
|
|
1516
|
+
currentPath: p.currentPath,
|
|
1517
|
+
onNavigate: p.onNavigate,
|
|
1518
|
+
collapsed,
|
|
1519
|
+
collapse,
|
|
1520
|
+
brandMark: p.brandMark,
|
|
1521
|
+
homeHref: p.homeHref,
|
|
1522
|
+
homeLabel: p.homeLabel,
|
|
1523
|
+
mobileOpen: drawer,
|
|
1524
|
+
onClose: () => setDrawer(false),
|
|
1525
|
+
mobile: mode,
|
|
1526
|
+
header: inset || mode === "drawer" ? p.brand : void 0,
|
|
1527
|
+
brandTestId: inset ? "brand-home" : void 0,
|
|
1528
|
+
groupsKey: `${prefix}.groups`,
|
|
1529
|
+
itemsKey: `${prefix}.items`,
|
|
1530
|
+
bottom: sidebarUser,
|
|
1531
|
+
lang: p.lang
|
|
1529
1532
|
}
|
|
1530
1533
|
),
|
|
1531
|
-
|
|
1532
|
-
/* @__PURE__ */ jsxRuntime.
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1543
|
-
|
|
1544
|
-
|
|
1545
|
-
|
|
1534
|
+
/* @__PURE__ */ jsxRuntime.jsxs("main", { class: "bas-main", "data-testid": "app-content", children: [
|
|
1535
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { class: "bas-contenthead", "data-testid": "content-header", children: [
|
|
1536
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1537
|
+
"button",
|
|
1538
|
+
{
|
|
1539
|
+
type: "button",
|
|
1540
|
+
class: "bas-iconbtn bas-trigger",
|
|
1541
|
+
"data-testid": "sidebar-trigger",
|
|
1542
|
+
"aria-label": triggerLabel,
|
|
1543
|
+
"aria-expanded": expanded,
|
|
1544
|
+
title: triggerLabel,
|
|
1545
|
+
onClick: onTrigger,
|
|
1546
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(IconPanelLeft, {})
|
|
1547
|
+
}
|
|
1548
|
+
),
|
|
1549
|
+
heading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1550
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { class: "bas-contenthead__sep", "data-testid": "content-header-separator", "aria-hidden": "true" }),
|
|
1551
|
+
/* @__PURE__ */ jsxRuntime.jsx("h1", { class: "bas-contenthead__title", "data-testid": "content-header-title", children: heading })
|
|
1552
|
+
] }) : null,
|
|
1553
|
+
inset ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1554
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-spacer" }),
|
|
1555
|
+
p.actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bas-contenthead__actions", children: p.actions }) : null,
|
|
1556
|
+
/* @__PURE__ */ jsxRuntime.jsx(NotificationBell, { source: p.notifications, onNavigate: p.onNavigate, lang: p.lang }),
|
|
1557
|
+
p.user && !userInSidebar ? /* @__PURE__ */ jsxRuntime.jsx(UserMenu, { user: p.user, ...p.userMenu, onNavigate: p.onNavigate, lang: p.lang }) : null
|
|
1558
|
+
] }) : null
|
|
1559
|
+
] }),
|
|
1560
|
+
p.children
|
|
1561
|
+
] })
|
|
1562
|
+
] })
|
|
1563
|
+
]
|
|
1564
|
+
}
|
|
1565
|
+
);
|
|
1546
1566
|
}
|
|
1547
1567
|
function defaultReauthHref() {
|
|
1548
1568
|
const here = typeof location === "undefined" ? "/" : location.pathname + location.search;
|