tp-tabs/tp-tabs.js

/**
@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;
      }
      .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);