61 lines
1.1 KiB
JavaScript
61 lines
1.1 KiB
JavaScript
/**
|
|
@license
|
|
Copyright (c) 2023 trading_peter
|
|
This program is available under Apache License Version 2.0
|
|
*/
|
|
|
|
import { closest } from '@tp/helpers';
|
|
import { LitElement, html, css } from 'lit';
|
|
|
|
class TpTabs extends LitElement {
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
:host([orientation="vertical"]) .tabs {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
slot::slotted(.tab) {
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
}
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
orientation: { type: String, reflect: true }
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.orientation = 'horizontal';
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div class="tabs" @click="${this.selectTab}">
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
selectTab(e) {
|
|
const tab = closest(e.target, '.tab');
|
|
if (tab) {
|
|
this.dispatchEvent(new CustomEvent('tab-changed', { detail: tab }));
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('tp-tabs', TpTabs);
|