Tabs

1import { html, LitElement, nothing, type PropertyValues } from "lit";
2import {
3  customElement,
4  property,
5  queryAssignedElements,
6} from "lit/decorators.js";
7import { TW } from "@/registry/lib/tailwindMixin";
8import { cn } from "@/registry/lib/utils";
9 
10export interface TabsChangeEvent extends CustomEvent {
11  detail: { value: string };
12}
13 
14export interface TabsProperties {
15  value?: string;
16  defaultValue?: string;
17}
18 
19@customElement("ui-tabs")
20export class Tabs extends TW(LitElement) implements TabsProperties {
21  @property({ type: String }) value = "";
22  @property({ type: String, attribute: "default-value" }) defaultValue = "";
23 
24  override connectedCallback() {
25    super.connectedCallback();
26    this.setAttribute("data-orientation", "horizontal");
27 
28    if (!this.value && this.defaultValue) {
29      this.value = this.defaultValue;
30    }
31 
32    this.addEventListener("tabs-trigger-click", this.handleTriggerClick);
33  }
34 
35  override disconnectedCallback() {
36    super.disconnectedCallback();
37    this.removeEventListener("tabs-trigger-click", this.handleTriggerClick);
38  }
39 
40  private handleTriggerClick = (e: CustomEvent) => {
41    const newValue = e.detail.value;
42    if (newValue !== this.value) {
43      this.value = newValue;
44      this.dispatchEvent(
45        new CustomEvent("change", {
46          detail: { value: newValue },
47          bubbles: true,
48          composed: true,
49        }),
50      );
51    }
52  };
53 
54  override updated(changedProperties: PropertyValues) {
55    super.updated(changedProperties);
56 
57    if (changedProperties.has("value")) {
58      this.updateTriggers();
59      this.updateContents();
60    }
61  }
62 
63  private updateTriggers() {
64    const triggers = Array.from(
65      this.querySelectorAll("ui-tabs-trigger"),
66    ) as TabsTrigger[];
67    triggers.forEach((trigger) => {
68      trigger.selected = trigger.value === this.value;
69    });
70  }
71 
72  private updateContents() {
73    const contents = Array.from(
74      this.querySelectorAll("ui-tabs-content"),
75    ) as TabsContent[];
76    contents.forEach((content) => {
77      content.active = content.value === this.value;
78    });
79  }
80 
81  override render() {
82    return html`<slot></slot>`;
83  }
84}
85 
86@customElement("ui-tabs-list")
87export class TabsList extends TW(LitElement) {
88  @queryAssignedElements({ selector: "ui-tabs-trigger" })
89  private triggers!: Array<TabsTrigger>;
90 
91  override connectedCallback() {
92    super.connectedCallback();
93    this.setAttribute("role", "tablist");
94// … truncated