bruno-ui
Version:
Bruno UI Kit
66 lines (65 loc) • 2.09 kB
JavaScript
import { h } from "@stencil/core";
export class TabsComponent {
componentWillLoad() {
this._tabs = [];
}
TabLoadedHandler(event) {
const tab = event.detail;
if (this._tabs.length - 1 < tab.Index) {
this._tabs.length = tab.Index + 1;
}
this._tabs[tab.Index] = tab;
this._tabs = [...this._tabs];
}
TabChangedHandler(event) {
const tab = event.detail;
let index = this._tabs.findIndex(x => x.Identifier == tab.Identifier);
this._tabs[index] = tab;
this._tabs = [...this._tabs];
}
render() {
return (h("div", null,
h("div", { class: "brn-tabs" }, this._tabs.filter(x => x).map(tab => {
return (h("div", { class: { "brn-tabs__tab": true, 'brn-tabs__tab--active': tab.Active }, onClick: () => {
this.TabChangeHandler(tab);
} }, tab.Name));
})),
h("div", { class: "brn-tabs__content" },
h("slot", null))));
}
TabChangeHandler(tab) {
this.DeactivateAllTabs();
tab.Active = true;
tab.OnActive(true);
this._tabs = [...this._tabs];
}
DeactivateAllTabs() {
this._tabs.map(x => {
x.Active = false;
x.OnActive(false);
});
}
static get is() { return "brn-tabs"; }
static get originalStyleUrls() { return {
"$": ["tabs.component.scss"]
}; }
static get styleUrls() { return {
"$": ["tabs.component.css"]
}; }
static get states() { return {
"_tabs": {}
}; }
static get listeners() { return [{
"name": "tabLoaded",
"method": "TabLoadedHandler",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "tabChanged",
"method": "TabChangedHandler",
"target": undefined,
"capture": false,
"passive": false
}]; }
}