mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import { classMap } from 'lit/directives/class-map.js';
|
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
import { html } from 'lit';
|
|
import { watch } from '../../internal/watch.js';
|
|
import componentStyles from '../../styles/component.styles.js';
|
|
import styles from './tab.styles.js';
|
|
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
|
import type { CSSResultGroup } from 'lit';
|
|
|
|
let id = 0;
|
|
|
|
/**
|
|
* @summary Tabs are used inside [tab groups](/docs/components/tab-group) to represent and activate [tab panels](/docs/components/tab-panel).
|
|
* @documentation https://backers.webawesome.com/docs/components/tab
|
|
* @status stable
|
|
* @since 2.0
|
|
*
|
|
* @slot - The tab's label.
|
|
*
|
|
* @cssproperty --active-tab-color - The color of the active tab's label.
|
|
*
|
|
* @csspart base - The component's base wrapper.
|
|
* @csspart close-button - The close button, an `<wa-icon-button>`.
|
|
* @csspart close-button__base - The close button's exported `base` part.
|
|
*/
|
|
@customElement('wa-tab')
|
|
export default class WaTab extends WebAwesomeElement {
|
|
static styles: CSSResultGroup = [componentStyles, styles];
|
|
|
|
private readonly attrId = ++id;
|
|
private readonly componentId = `wa-tab-${this.attrId}`;
|
|
|
|
@query('.tab') tab: HTMLElement;
|
|
|
|
/** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
|
|
@property({ reflect: true }) panel = '';
|
|
|
|
/** @internal Draws the tab in an active state. */
|
|
@property({ type: Boolean, reflect: true }) active = false;
|
|
|
|
/** Disables the tab and prevents selection. */
|
|
@property({ type: Boolean, reflect: true }) disabled = false;
|
|
|
|
/**
|
|
* @internal
|
|
* Need to wrap in a `@property()` otherwise NextJS blows up.
|
|
*/
|
|
@property({ type: Number, reflect: true }) tabIndex = 0;
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.setAttribute('role', 'tab');
|
|
}
|
|
|
|
@watch('active')
|
|
handleActiveChange() {
|
|
this.setAttribute('aria-selected', this.active ? 'true' : 'false');
|
|
}
|
|
|
|
@watch('disabled')
|
|
handleDisabledChange() {
|
|
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
|
|
|
|
if (this.disabled && !this.active) {
|
|
this.tabIndex = -1;
|
|
} else {
|
|
this.tabIndex = 0;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
// If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
|
|
this.id = this.id.length > 0 ? this.id : this.componentId;
|
|
|
|
return html`
|
|
<div
|
|
part="base"
|
|
class=${classMap({
|
|
tab: true,
|
|
'tab--active': this.active,
|
|
'tab--disabled': this.disabled
|
|
})}
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'wa-tab': WaTab;
|
|
}
|
|
}
|