@stories-js/core
Version:
Stories web components to build stories
181 lines • 5.5 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, State, Method } from '@stencil/core';
const getTab = (tabs, tab) => {
const tabEl = (typeof tab === 'string')
? tabs.find(t => t.tab === tab)
: tab;
if (!tabEl) {
console.error(`tab with id: "${tabEl}" does not exist`);
}
return tabEl;
};
export class Tabs {
constructor() {
this.onTabClicked = (ev) => {
const { tab } = ev.detail;
this.select(tab);
};
}
async componentWillLoad() {
const tabs = this.tabs;
if (tabs.length > 0) {
await this.select(tabs[0]);
}
}
componentWillRender() {
const tabBar = this.el.querySelector('stories-tab-bar');
if (tabBar) {
const tab = this.selectedTab ? this.selectedTab.tab : undefined;
tabBar.selectedTab = tab;
}
}
/**
* Select a tab by the value of its `tab` property or an element reference.
*
* @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
*/
async select(tab) {
const selectedTab = getTab(this.tabs, tab);
if (!this.shouldSwitch(selectedTab)) {
return false;
}
await this.setActive(selectedTab);
this.tabSwitch();
return true;
}
/**
* Get a specific tab by the value of its `tab` property or an element reference.
*
* @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
*/
async getTab(tab) {
return getTab(this.tabs, tab);
}
/**
* Get the currently selected tab.
*/
getSelected() {
return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);
}
setActive(selectedTab) {
this.leavingTab = this.selectedTab;
this.selectedTab = selectedTab;
selectedTab.active = true;
return Promise.resolve();
}
tabSwitch() {
const selectedTab = this.selectedTab;
const leavingTab = this.leavingTab;
this.leavingTab = undefined;
if (!selectedTab) {
return;
}
if (leavingTab !== selectedTab) {
if (leavingTab) {
leavingTab.active = false;
}
}
}
shouldSwitch(selectedTab) {
const leavingTab = this.selectedTab;
return selectedTab !== undefined && selectedTab !== leavingTab;
}
get tabs() {
return Array.from(this.el.querySelectorAll('stories-tab'));
}
render() {
return (h(Host, { onStoriesTabButtonClick: this.onTabClicked },
h("div", { class: "tabs-inner" },
h("slot", null))));
}
static get is() { return "stories-tabs"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["tabs.scss"]
}; }
static get styleUrls() { return {
"$": ["tabs.css"]
}; }
static get states() { return {
"selectedTab": {}
}; }
static get methods() { return {
"select": {
"complexType": {
"signature": "(tab: string | HTMLStoriesTabElement) => Promise<boolean>",
"parameters": [{
"tags": [{
"name": "param",
"text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}],
"text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}],
"references": {
"Promise": {
"location": "global"
},
"HTMLStoriesTabElement": {
"location": "global"
}
},
"return": "Promise<boolean>"
},
"docs": {
"text": "Select a tab by the value of its `tab` property or an element reference.",
"tags": [{
"name": "param",
"text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}]
}
},
"getTab": {
"complexType": {
"signature": "(tab: string | HTMLStoriesTabElement) => Promise<HTMLStoriesTabElement | undefined>",
"parameters": [{
"tags": [{
"name": "param",
"text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}],
"text": "The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}],
"references": {
"Promise": {
"location": "global"
},
"HTMLStoriesTabElement": {
"location": "global"
}
},
"return": "Promise<HTMLStoriesTabElement>"
},
"docs": {
"text": "Get a specific tab by the value of its `tab` property or an element reference.",
"tags": [{
"name": "param",
"text": "tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property."
}]
}
},
"getSelected": {
"complexType": {
"signature": "() => Promise<string | undefined>",
"parameters": [],
"references": {
"Promise": {
"location": "global"
}
},
"return": "Promise<string>"
},
"docs": {
"text": "Get the currently selected tab.",
"tags": []
}
}
}; }
static get elementRef() { return "el"; }
}
//# sourceMappingURL=tabs.js.map