@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
218 lines (217 loc) • 8.66 kB
JavaScript
import { Fragment, h, Host, } from "@stencil/core";
import { convertPropsToClasses, convertPropsToClassesTab as convertPropsToTabClasses, } from "./modus-wc-tabs.tailwind";
import { inheritAriaAttributes } from "../utils";
/**
* A customizable tabs component used to create groups of tabs.
*/
export class ModusWcTabs {
constructor() {
this.inheritedAttributes = {};
/** The current active tab */
this.activeTabIndex = 0;
/** Custom CSS class to apply to the inner div. */
this.customClass = '';
/** The size of the tabs. */
this.size = 'md';
/** The tabs to display. */
this.tabs = [];
/** Additional styling for the tabs. */
this.tabStyle = 'bordered';
}
componentWillLoad() {
if (!this.el.ariaLabel) {
this.el.ariaLabel = 'Tab Group';
}
if (!this.tabs || this.tabs.length === 0) {
console.error('ModusWcTabs: tab data is required.');
}
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
handleClick(tab, index) {
if (tab.disabled)
return;
this.tabChange.emit({ previousTab: this.activeTabIndex, newTab: index });
this.activeTabIndex = index;
}
getClasses() {
const classList = ['modus-wc-tabs'];
const propClasses = convertPropsToClasses({
tabStyle: this.tabStyle,
size: this.size,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
getTabClasses(tab, index) {
const classList = ['modus-wc-tab'];
const propClasses = convertPropsToTabClasses({
active: index === this.activeTabIndex,
disabled: tab.disabled,
});
// The order CSS classes are added matters to CSS specificity
if (propClasses)
classList.push(propClasses);
if (tab.customClass)
classList.push(tab.customClass);
return classList.join(' ');
}
render() {
const renderTabContent = (tab) => tab.label === undefined ? (tab.icon && h("modus-wc-icon", { name: tab.icon, size: this.size })) : (h(Fragment, null, tab.icon && tab.iconPosition === 'left' && (h("modus-wc-icon", { name: tab.icon, size: this.size })), h("span", null, tab.label), tab.icon && tab.iconPosition === 'right' && (h("modus-wc-icon", { name: tab.icon, size: this.size }))));
const tabs = this.tabs.map((tab, index) => {
var _a;
return (h("button", { role: "tab", "aria-disabled": tab.disabled, "aria-label": ((_a = tab.label) !== null && _a !== void 0 ? _a : tab.icon) + ' tab', class: this.getTabClasses(tab, index), id: `tab-${index}`, onClick: () => this.handleClick(tab, index) }, renderTabContent(tab)));
});
return (h(Host, { key: '02539e84a3b948096d9b78bd9efc42f4dd4f6270' }, h("div", Object.assign({ key: 'af17c217fd670d6f2115d6cab267f1958f5e4c3d', role: "tablist", class: this.getClasses() }, this.inheritedAttributes), tabs), h("div", { key: '0754e4b14b7ff0d2f1fba03c0b2c93c06eed98cb', class: "modus-wc-tab-panel", role: "tabpanel", tabIndex: 0 }, this.tabs.map((_, index) => (h("div", { class: this.activeTabIndex === index
? 'modus-wc-tab-active'
: undefined, hidden: this.activeTabIndex !== index }, h("slot", { name: `tab-${index}` })))))));
}
static get is() { return "modus-wc-tabs"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-tabs.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-tabs.css"]
};
}
static get properties() {
return {
"activeTabIndex": {
"type": "number",
"attribute": "active-tab-index",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The current active tab"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "0"
},
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom CSS class to apply to the inner div."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"size": {
"type": "string",
"attribute": "size",
"mutable": false,
"complexType": {
"original": "ModusSize",
"resolved": "\"lg\" | \"md\" | \"sm\" | undefined",
"references": {
"ModusSize": {
"location": "import",
"path": "../types",
"id": "src/components/types.ts::ModusSize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The size of the tabs."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'md'"
},
"tabs": {
"type": "unknown",
"attribute": "tabs",
"mutable": false,
"complexType": {
"original": "ITab[]",
"resolved": "ITab[]",
"references": {
"ITab": {
"location": "local",
"path": "/home/runner/work/modus-wc-2.0/modus-wc-2.0/src/components/modus-wc-tabs/modus-wc-tabs.tsx",
"id": "src/components/modus-wc-tabs/modus-wc-tabs.tsx::ITab"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The tabs to display."
},
"getter": false,
"setter": false,
"defaultValue": "[]"
},
"tabStyle": {
"type": "string",
"attribute": "tab-style",
"mutable": false,
"complexType": {
"original": "'boxed' | 'bordered' | 'lifted' | 'none'",
"resolved": "\"bordered\" | \"boxed\" | \"lifted\" | \"none\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Additional styling for the tabs."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'bordered'"
}
};
}
static get events() {
return [{
"method": "tabChange",
"name": "tabChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "When a tab is switched to, this event outputs the relevant indices"
},
"complexType": {
"original": "{\n previousTab: number;\n newTab: number;\n }",
"resolved": "{ previousTab: number; newTab: number; }",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
}