@stories-js/core
Version:
Stories web components to build stories
198 lines • 5.69 kB
JavaScript
/*!
* (C) StoriesJS https://storiesjs.org - GPL-2.0 License
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { Component, Host, h, Element, Prop, Event, Listen } from '@stencil/core';
export class TabButton {
constructor() {
/**
* If `true`, the user cannot interact with the tab button.
*/
this.disabled = false;
/**
* Set the layout of the text and icon in the tab bar.
* It defaults to `'icon-start'`.
*/
this.layout = 'icon-start';
/**
* The selected tab component
*/
this.selected = false;
this.onKeyUp = (ev) => {
if (ev.key === 'Enter' || ev.key === ' ') {
this.selectTab(ev);
}
};
this.onClick = (ev) => {
this.selectTab(ev);
};
}
onTabBarChanged(ev) {
const dispatchedFrom = ev.target;
const parent = this.el.parentElement;
if ((ev.composedPath && ev.composedPath().includes(parent)) || (dispatchedFrom && dispatchedFrom.contains(this.el))) {
this.selected = this.tab === ev.detail.tab;
}
}
selectTab(ev) {
if (this.tab !== undefined) {
if (!this.disabled) {
this.storiesTabButtonClick.emit({
tab: this.tab,
selected: this.selected
});
}
ev.preventDefault();
}
}
get hasLabel() {
return !!this.el.querySelector('stories-label');
}
get hasIcon() {
return !!this.el.querySelector('stories-icon');
}
get tabIndex() {
if (this.disabled) {
return -1;
}
const hasTabIndex = this.el.hasAttribute('tabindex');
if (hasTabIndex) {
return this.el.getAttribute('tabindex');
}
return 0;
}
render() {
const { disabled, hasIcon, hasLabel, tabIndex, layout, selected, tab } = this;
return (h(Host, { "aria-selected": selected ? 'true' : null, class: {
'tab-selected': selected,
'tab-disabled': disabled,
'tab-has-label': hasLabel,
'tab-has-icon': hasIcon,
'tab-has-label-only': hasLabel && !hasIcon,
'tab-has-icon-only': hasIcon && !hasLabel,
[`tab-layout-${layout}`]: true
}, id: tab !== undefined ? `tab-button-${tab}` : null, onClick: this.onClick, onKeyup: this.onKeyUp, role: "tab", tabindex: tabIndex },
h("a", { href: '#', tabIndex: -1, class: "button-native", part: "native" },
h("span", { class: "button-inner" },
h("slot", null)))));
}
static get is() { return "stories-tab-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["tab-button.scss"]
}; }
static get styleUrls() { return {
"$": ["tab-button.css"]
}; }
static get properties() { return {
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "If `true`, the user cannot interact with the tab button."
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"layout": {
"type": "string",
"mutable": true,
"complexType": {
"original": "TabButtonLayout",
"resolved": "\"icon-bottom\" | \"icon-end\" | \"icon-hide\" | \"icon-start\" | \"icon-top\" | \"label-hide\"",
"references": {
"TabButtonLayout": {
"location": "import",
"path": "../../types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set the layout of the text and icon in the tab bar.\nIt defaults to `'icon-start'`."
},
"attribute": "layout",
"reflect": false,
"defaultValue": "'icon-start'"
},
"selected": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The selected tab component"
},
"attribute": "selected",
"reflect": false,
"defaultValue": "false"
},
"tab": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "A tab id must be provided for each `stories-tab`. It's used internally to reference\nthe selected tab or by the router to switch between them."
},
"attribute": "tab",
"reflect": false
}
}; }
static get events() { return [{
"method": "storiesTabButtonClick",
"name": "storiesTabButtonClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Emitted when the tab bar is clicked"
},
"complexType": {
"original": "TabButtonClickEventDetail",
"resolved": "TabButtonClickEventDetail",
"references": {
"TabButtonClickEventDetail": {
"location": "import",
"path": "../../types"
}
}
}
}]; }
static get elementRef() { return "el"; }
static get listeners() { return [{
"name": "storiesTabBarChanged",
"method": "onTabBarChanged",
"target": "window",
"capture": false,
"passive": false
}]; }
}
//# sourceMappingURL=tab-button.js.map