@codedoc/core
Version:
Create beautiful modern documentation websites.
45 lines • 2.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabSelector$ = exports.TabSelector = void 0;
var transport_1 = require("@connectv/sdh/transport");
var html_1 = require("@connectv/html");
var core_1 = require("@connectv/core");
function TabSelector(_, renderer) {
var tabs = core_1.state([]);
var selected = core_1.state();
var holder = html_1.ref();
this.track({
bind: function () {
var _a;
selected.bind();
var _tabs = [];
(_a = holder.$.parentElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.tab').forEach(function (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(html_1.List, { of: tabs, each: function (tab) {
return renderer.create("button", { class: html_1.toggleList({ selected: selected.to(core_1.map(function (s) { return s === tab.value.id; })) }), "data-tab-title": tab.value.title, "data-tab-id": tab.value.id, onclick: function () {
tabs.value.forEach(function (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) : '');
} }));
}
exports.TabSelector = TabSelector;
exports.TabSelector$ = transport_1.transport(TabSelector);
//# sourceMappingURL=selector.js.map