39b95c2ede
Pure `nix fmt` output from the commit before this one — no hand edits. 203 files: 52 md, 42 tsx, 32 js, 32 css, 21 ts, 13 html, 8 json, 3 mjs. Reproduce with `nix develop -c nix fmt` on the parent commit; the result should be byte-identical to this tree. None of the 13 `.prettierignore` entries appears here — verified by intersecting the changed-file list against the ignore file, with a control proving the intersection finds a match when one exists.
68 lines
2.8 KiB
JavaScript
68 lines
2.8 KiB
JavaScript
// hive-tab-strip.js — <hive-tab-strip>, the markup-owning tab-strip custom
|
|
// element behind the logs/credentials/core/builds sub-page tabbars. Owns
|
|
// rendering the <a class="hive-tab"> markup from a declarative `tabs` list
|
|
// instead of every page hand-writing the same <nav><a>...</a></nav>
|
|
// boilerplate, then wires the existing createTabStrip() behaviour
|
|
// (@hive/shared/tabs.js) over what it just rendered — no behaviour
|
|
// duplication, this is markup only.
|
|
//
|
|
// Light-DOM (no shadow root): the existing .hive-tabbar/.hive-tab/
|
|
// .tab-count CSS (tabs.css + dashboard.css) already targets plain classes
|
|
// on the tabbar/tab elements directly, and tab *panes* stay page-owned
|
|
// content this element never touches — no slotting/scoping need the way
|
|
// <hive-menu>/<hive-side-panel> have.
|
|
//
|
|
// Host keeps its own id/class/role (same as the <nav> it replaces, so
|
|
// existing CSS selectors + #id lookups keep matching); pass a `prefix`
|
|
// attribute (e.g. `prefix="logs"`). `configure({ tabs, defaultId, onShow })`
|
|
// then renders one <a> per tab —
|
|
// <a class="hive-tab" id="${prefix}-tab-${id}" href="#${id}" role="tab"
|
|
// aria-controls="${prefix}-pane-${id}" data-tab="${id}">${label}</a>
|
|
// — same id/aria-controls scheme the hand-written markup used, so each
|
|
// page's panes (aria-labelledby="${prefix}-tab-${id}") don't need to
|
|
// change. A `badgeId` tab also gets a nested `<span class="tab-count"
|
|
// id="${badgeId}" hidden>` (matches builds.html's rebuild-queue count
|
|
// pill), then wires up createTabStrip() and returns exactly what it
|
|
// returns ({ show, active }) — every existing `.active()`/`.show(id)`
|
|
// call site keeps working unchanged. Call configure() exactly once per
|
|
// element (throws if called twice), mirroring the old call sites.
|
|
|
|
import { el } from "../dom.js";
|
|
import { createTabStrip } from "./tabs.js";
|
|
|
|
class HiveTabStrip extends HTMLElement {
|
|
configure({ tabs, defaultId, onShow }) {
|
|
if (this._api) {
|
|
throw new Error(
|
|
"hive-tab-strip: configure() called twice on the same element",
|
|
);
|
|
}
|
|
const prefix = this.getAttribute("prefix");
|
|
if (!prefix) {
|
|
throw new Error("hive-tab-strip: missing required `prefix` attribute");
|
|
}
|
|
for (const tab of tabs) {
|
|
const a = el(
|
|
"a",
|
|
{
|
|
class: "hive-tab",
|
|
id: `${prefix}-tab-${tab.id}`,
|
|
href: `#${tab.id}`,
|
|
role: "tab",
|
|
"aria-controls": `${prefix}-pane-${tab.id}`,
|
|
"data-tab": tab.id,
|
|
},
|
|
tab.label,
|
|
);
|
|
if (tab.badgeId) {
|
|
a.append(
|
|
el("span", { class: "tab-count", id: tab.badgeId, hidden: "" }),
|
|
);
|
|
}
|
|
this.append(a);
|
|
}
|
|
this._api = createTabStrip(this, { defaultId, onShow });
|
|
return this._api;
|
|
}
|
|
}
|
|
customElements.define("hive-tab-strip", HiveTabStrip);
|