@e280/authlocal/x/authority/views/common/tabby/view.js

User-sovereign login system for everybody

import { sub } from "@e280/stz";
import { html, shadowView, signal } from "@benev/slate";
import stylesCss from "./styles.css.js";
import themeCss from "../../../theme.css.js";
export class Tabby {
    startIndex;
    #activeIndex = signal(0);
    on = sub();
    constructor(startIndex) {
        this.startIndex = startIndex;
        this.#activeIndex.value = startIndex;
    }
    get activeIndex() {
        return this.#activeIndex.value;
    }
    set activeIndex(index) {
        this.#activeIndex.value = index;
        this.on.pub(index);
    }
    goto(index) {
        this.activeIndex = index;
    }
    render(tabs) {
        return {
            tabs: Tabnav([this, tabs]),
            panel: tabs.at(this.activeIndex)?.panel(),
        };
    }
}
export const Tabnav = shadowView(use => (tabby, tabs) => {
    use.name("tabby");
    use.styles(themeCss, stylesCss);
    return html `
		<nav theme-buttons>
			${tabs.map((tab, index) => html `
				<button
					x-index="${index}"
					?x-active="${index === tabby.activeIndex}"
					@click="${() => tabby.goto(index)}">
						${tab.button()}
				</button>
			`)}
		</nav>
	`;
});
//# sourceMappingURL=view.js.map