a781addcfe
The pills on 4G3NTS, R3BU1LD QU3U3 and K3PT ST4T3, the poll that fed them, the two count helpers, their styles, and the tab strip's unused badge option.
61 lines
2.5 KiB
JavaScript
61 lines
2.5 KiB
JavaScript
// hive-tab-strip.js — <hive-tab-strip>, the markup-owning tab-strip custom
|
|
// element behind 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/
|
|
// CSS (tabs.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. It 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,
|
|
);
|
|
this.append(a);
|
|
}
|
|
this._api = createTabStrip(this, { defaultId, onShow });
|
|
return this._api;
|
|
}
|
|
}
|
|
customElements.define("hive-tab-strip", HiveTabStrip);
|