@codedoc/core/dist/es6/components/tabs/selector.js

Create beautiful modern documentation websites.

import { transport } from '@connectv/sdh/transport';
import { List, toggleList, ref } from '@connectv/html';
import { state, map } from '@connectv/core';
export function TabSelector(_, renderer) {
    const tabs = state([]);
    const selected = state();
    const holder = ref();
    this.track({
        bind() {
            var _a;
            selected.bind();
            const _tabs = [];
            (_a = holder.$.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.tab').forEach(tab$ => {
                _tabs.push({
                    title: tab$.getAttribute('data-tab-title') || '',
                    id: tab$.getAttribute('data-tab-id') || '',
                    el$: tab$,
                    icon: tab$.getAttribute('data-tab-icon') || undefined,
                });
                if (tab$.classList.contains('selected'))
                    selected.value = tab$.getAttribute('data-tab-title');
            });
            tabs.bind();
            tabs.value = _tabs;
        }
    });
    return renderer.create("div", { class: "selector", _ref: holder },
        renderer.create(List, { of: tabs, each: tab => renderer.create("button", { class: toggleList({ selected: selected.to(map((s) => s === tab.value.id)) }), "data-tab-title": tab.value.title, "data-tab-id": tab.value.id, onclick: () => {
                    tabs.value.forEach((tab) => {
                        tab.el$.classList.remove('selected');
                    });
                    tab.value.el$.classList.add('selected');
                    selected.value = tab.value.id;
                } },
                tab.value.title,
                tab.value.icon ? renderer.create("span", { class: "icon-font" }, tab.value.icon) : '') }));
}
export const TabSelector$ = /*#__PURE__*/ transport(TabSelector);
//# sourceMappingURL=selector.js.map