mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
118 lines
3.2 KiB
TypeScript
118 lines
3.2 KiB
TypeScript
import { html } from 'lit';
|
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
import { classMap } from 'lit/directives/class-map.js';
|
|
import { autoIncrement } from '../../internal/auto-increment';
|
|
import { emit } from '../../internal/event';
|
|
import ShoelaceElement from '../../internal/shoelace-element';
|
|
import { watch } from '../../internal/watch';
|
|
import { LocalizeController } from '../../utilities/localize';
|
|
import '../icon-button/icon-button';
|
|
import styles from './tab.styles';
|
|
import type { CSSResultGroup } from 'lit';
|
|
|
|
/**
|
|
* @since 2.0
|
|
* @status stable
|
|
*
|
|
* @dependency sl-icon-button
|
|
*
|
|
* @slot - The tab's label.
|
|
*
|
|
* @event sl-close - Emitted when the tab is closable and the close button is activated.
|
|
*
|
|
* @csspart base - The component's internal wrapper.
|
|
* @csspart close-button - The close button.
|
|
* @csspart close-button__base - The close button's `base` part.
|
|
*/
|
|
@customElement('sl-tab')
|
|
export default class SlTab extends ShoelaceElement {
|
|
static styles: CSSResultGroup = styles;
|
|
private readonly localize = new LocalizeController(this);
|
|
|
|
@query('.tab') tab: HTMLElement;
|
|
|
|
private readonly attrId = autoIncrement();
|
|
private readonly componentId = `sl-tab-${this.attrId}`;
|
|
|
|
/** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
|
|
@property({ reflect: true }) panel = '';
|
|
|
|
/** Draws the tab in an active state. */
|
|
@property({ type: Boolean, reflect: true }) active = false;
|
|
|
|
/** Makes the tab closable and shows a close icon. */
|
|
@property({ type: Boolean }) closable = false;
|
|
|
|
/** Draws the tab in a disabled state. */
|
|
@property({ type: Boolean, reflect: true }) disabled = false;
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.setAttribute('role', 'tab');
|
|
}
|
|
|
|
/** Sets focus to the tab. */
|
|
focus(options?: FocusOptions) {
|
|
this.tab.focus(options);
|
|
}
|
|
|
|
/** Removes focus from the tab. */
|
|
blur() {
|
|
this.tab.blur();
|
|
}
|
|
|
|
handleCloseClick() {
|
|
emit(this, 'sl-close');
|
|
}
|
|
|
|
@watch('active')
|
|
handleActiveChange() {
|
|
this.setAttribute('aria-selected', this.active ? 'true' : 'false');
|
|
}
|
|
|
|
@watch('disabled')
|
|
handleDisabledChange() {
|
|
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
|
|
}
|
|
|
|
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--closable': this.closable,
|
|
'tab--disabled': this.disabled
|
|
})}
|
|
tabindex="0"
|
|
>
|
|
<slot></slot>
|
|
${this.closable
|
|
? html`
|
|
<sl-icon-button
|
|
part="close-button"
|
|
exportparts="base:close-button__base"
|
|
name="x"
|
|
library="system"
|
|
label=${this.localize.term('close')}
|
|
class="tab__close-button"
|
|
@click=${this.handleCloseClick}
|
|
tabindex="-1"
|
|
></sl-icon-button>
|
|
`
|
|
: ''}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sl-tab': SlTab;
|
|
}
|
|
}
|