@kelvininc/ui-components
Version:
Kelvin UI Components
204 lines (203 loc) • 8.04 kB
JavaScript
import { h } from "@stencil/core";
import { isEmpty } from "lodash-es";
import { ETabItemType } from "../tab-item/tab-item.types";
import { calculatePrimaryTabWidths } from "./tab-navigation.utils";
import { ETagState } from "../tag-status/tag-status.types";
import { EBadgeType } from "../badge/badge.types";
export class KvTabNavigation {
constructor() {
/** @inheritdoc */
this.tabs = [];
/** @inheritdoc */
this.type = ETabItemType.Primary;
this.tabsIndicatorConfig = {};
/** The left offset and width of the tab indicator, recalculated when the selected tab changes */
this.selectedTabIndicatorConfig = {
left: '0px',
width: '0px'
};
}
/** Listen to custom DOM event of tab selection */
tabSelectionHandler(event) {
this.tabChange.emit(event.detail);
}
/** Watch for tabs change to calculate elements width */
async tabsChangeHandler() {
if (this.type === ETabItemType.Primary) {
this.tabsIndicatorConfig = await calculatePrimaryTabWidths(this.tabs);
this.applySelectedTabStyling();
}
}
/** Watch for tab selection change and react accordingly by updating the internal states */
async tabSelectionChangeHandler() {
if (this.type === ETabItemType.Secondary)
return;
if (isEmpty(this.tabsIndicatorConfig)) {
this.tabsIndicatorConfig = await calculatePrimaryTabWidths(this.tabs);
}
this.applySelectedTabStyling();
}
async componentDidLoad() {
if (this.type === ETabItemType.Primary) {
this.tabsIndicatorConfig = await calculatePrimaryTabWidths(this.tabs);
this.applySelectedTabStyling();
}
}
applySelectedTabStyling() {
if (isEmpty(this.selectedTabKey) || isEmpty(this.tabsIndicatorConfig[this.selectedTabKey]))
return;
const { left, width } = this.tabsIndicatorConfig[this.selectedTabKey];
this.selectedTabIndicatorConfig = {
left: `${left}px`,
width: `${width}px`
};
}
render() {
return (h("div", { key: '5d92049120e60dfb35381b6caece9453c3297c79', class: { [this.type]: true } }, this.tabs.map(item => {
var _a, _b;
return (h("kv-tab-item", { key: item.tabKey, tabKey: item.tabKey, label: item.label, icon: item.icon, disabled: item.disabled, selected: item.tabKey === this.selectedTabKey, type: this.type, customAttributes: item.customAttributes }, (!isEmpty(item.badge) || !isEmpty(item.tagIcon)) && (h("div", { slot: "right-slot" }, !isEmpty(item.badge) && h("kv-badge", { type: (_a = item.badgeType) !== null && _a !== void 0 ? _a : EBadgeType.Secondary }, item.badge), !isEmpty(item.tagIcon) && h("kv-tag-status", { icon: item.tagIcon, state: (_b = item.tagState) !== null && _b !== void 0 ? _b : ETagState.Unknown })))));
}), this.type === ETabItemType.Primary && h("div", { key: '0d8efc09b49d09b7d3c9da1810bb82f3a99eeb0d', class: "selected-tab-indicator", style: this.selectedTabIndicatorConfig })));
}
static get is() { return "kv-tab-navigation"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["tab-navigation.scss"]
};
}
static get styleUrls() {
return {
"$": ["tab-navigation.css"]
};
}
static get properties() {
return {
"tabs": {
"type": "unknown",
"attribute": "tabs",
"mutable": false,
"complexType": {
"original": "ITabNavigationItem[]",
"resolved": "ITabNavigationItem[]",
"references": {
"ITabNavigationItem": {
"location": "import",
"path": "./tab-navigation.types",
"id": "src/components/tab-navigation/tab-navigation.types.ts::ITabNavigationItem"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) The tab items to render in this component"
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"selectedTabKey": {
"type": "any",
"attribute": "selected-tab-key",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The currently selected tab key"
},
"getter": false,
"setter": false,
"reflect": false
},
"type": {
"type": "string",
"attribute": "type",
"mutable": false,
"complexType": {
"original": "ETabItemType",
"resolved": "ETabItemType.Primary | ETabItemType.Secondary",
"references": {
"ETabItemType": {
"location": "import",
"path": "../tab-item/tab-item.types",
"id": "src/components/tab-item/tab-item.types.ts::ETabItemType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Sets the visual variant of the tab navigation"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "ETabItemType.Primary"
}
};
}
static get states() {
return {
"selectedTabIndicatorConfig": {}
};
}
static get events() {
return [{
"method": "tabChange",
"name": "tabChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "When the tab selection changes, emit the requested tab's key"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "tabs",
"methodName": "tabsChangeHandler"
}, {
"propName": "type",
"methodName": "tabsChangeHandler"
}, {
"propName": "selectedTabKey",
"methodName": "tabSelectionChangeHandler"
}];
}
static get listeners() {
return [{
"name": "tabSelected",
"method": "tabSelectionHandler",
"target": undefined,
"capture": false,
"passive": false
}];
}
}