@kelvininc/ui-components
Version:
Kelvin UI Components
229 lines (228 loc) • 8.83 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EComponentSize } from "../../utils/types";
import { isEmpty } from "lodash-es";
import { calculateTabWidths } from "./tab-navigation.utils";
export class KvTabNavigation {
constructor() {
/** @inheritdoc */
this.tabs = [];
/** @inheritdoc */
this.notifications = {};
/** @inheritdoc */
this.size = EComponentSize.Large;
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 */
tabsChangeHandler() {
this.tabsIndicatorConfig = calculateTabWidths(this.tabs, this.notifications, this.size);
this.applySelectedTabStyling();
}
/** Watch for tab selection change and react accordingly by updating the internal states */
tabSelectionChangeHandler() {
if (isEmpty(this.tabsIndicatorConfig)) {
this.tabsIndicatorConfig = calculateTabWidths(this.tabs, this.notifications, this.size);
}
this.applySelectedTabStyling();
}
componentDidLoad() {
this.tabsIndicatorConfig = calculateTabWidths(this.tabs, this.notifications, this.size);
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(Host, { key: 'd8ab9ffa3148c8b87a67dc824e37b42f7c91d6fc' }, this.tabs.map(item => {
var _a, _b;
return (h("kv-tab-item", { key: item.tabKey, tabKey: item.tabKey, label: item.label, disabled: item.disabled, selected: item.tabKey === this.selectedTabKey, size: this.size, hasNotification: (_a = this.notifications[item.tabKey]) === null || _a === void 0 ? void 0 : _a.active, notificationColor: (_b = this.notifications[item.tabKey]) === null || _b === void 0 ? void 0 : _b.color, icon: item.icon, exportparts: "icon" }));
}), h("div", { key: '193dd35a3d8d29ecf5638dd64e0ee3f19d84a9a6', 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
},
"notifications": {
"type": "unknown",
"attribute": "notifications",
"mutable": false,
"complexType": {
"original": "ITabsNotificationDict",
"resolved": "ITabsNotificationDict",
"references": {
"ITabsNotificationDict": {
"location": "import",
"path": "./tab-navigation.types",
"id": "src/components/tab-navigation/tab-navigation.types.ts::ITabsNotificationDict"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) To add a notification dot and its respective color to a specific tab"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "EComponentSize",
"resolved": "EComponentSize.Large | EComponentSize.Small",
"references": {
"EComponentSize": {
"location": "import",
"path": "../../utils/types",
"id": "src/utils/types/index.ts::EComponentSize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Sets the items on this tab nav to use small styling configuration"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "EComponentSize.Large"
}
};
}
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": "size",
"methodName": "tabsChangeHandler"
}, {
"propName": "notifications",
"methodName": "tabsChangeHandler"
}, {
"propName": "selectedTabKey",
"methodName": "tabSelectionChangeHandler"
}];
}
static get listeners() {
return [{
"name": "tabSelected",
"method": "tabSelectionHandler",
"target": undefined,
"capture": false,
"passive": false
}];
}
}