@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
393 lines (392 loc) • 15.1 kB
JavaScript
import { computePosition, flip, offset, shift } from "@floating-ui/dom";
import { h, Host, } from "@stencil/core";
import { inheritAriaAttributes } from "../utils";
/**
* A customizable dropdown menu component used to render a button and toggleable menu.
*
* The component supports a 'button' and 'menu' `<slot>` for injecting custom HTML content.
*/
export class ModusWcDropdownMenu {
constructor() {
this.inheritedAttributes = {};
/** The color variant of the button. */
this.buttonColor = 'primary';
/** The size of the button. */
this.buttonSize = 'md';
/** The variant of the button. */
this.buttonVariant = 'filled';
/** Custom CSS class to apply to the host element. */
this.customClass = '';
/** If true, the button will be disabled. */
this.disabled = false;
/** Indicates that the menu should have a border. */
this.menuBordered = true;
/** Distance between the button and menu in pixels. */
this.menuOffset = 10;
/** The placement of the menu relative to the button. */
this.menuPlacement = 'bottom-start';
/** The size of the menu. */
this.menuSize = 'md';
/** Indicates that the menu is visible. */
this.menuVisible = false;
this.menuPosition = { x: 0, y: 0 };
this.handleButtonClick = () => {
const newVisibility = !this.menuVisible;
this.menuVisible = newVisibility;
this.menuVisibilityChange.emit({ isVisible: newVisibility });
};
this.updateMenuPosition = async () => {
// istanbul ignore next
if (!this.buttonRef || !this.menuRef)
return;
const { x, y } = await computePosition(this.buttonRef, this.menuRef, {
placement: this.menuPlacement,
middleware: [offset(this.menuOffset), flip(), shift({ padding: 8 })],
});
this.menuPosition = { x, y };
};
}
handleDocumentClick(event) {
const path = event.composedPath();
// Close the menu when the user clicks outside the component
if (!path.includes(this.el) && this.menuVisible) {
this.menuVisible = false;
this.menuVisibilityChange.emit({ isVisible: false });
}
}
handleKeyDown(event) {
// Close the menu when the user clicks escape
if (event.key === 'Escape' && this.menuVisible) {
this.menuVisible = false;
this.menuVisibilityChange.emit({ isVisible: false });
}
}
async onMenuVisibilityChange(newValue) {
if (newValue) {
await this.updateMenuPosition();
}
}
componentDidLoad() {
this.buttonRef = this.el.querySelector('modus-wc-button');
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getClasses() {
const classList = ['modus-wc-dropdown-menu'];
// The order CSS classes are added matters to CSS specificity
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
return (h(Host, Object.assign({ key: '2aec2909700b23ffa040648d0cfdebe03dfd5024', class: this.getClasses() }, this.inheritedAttributes), h("modus-wc-button", { key: '26c922324f07a452e568c1987c3cbdc92599c962', "aria-expanded": this.menuVisible.toString(), "aria-haspopup": "true", "aria-label": this.buttonAriaLabel, color: this.buttonColor, disabled: this.disabled, onButtonClick: this.handleButtonClick, size: this.buttonSize, variant: this.buttonVariant }, h("slot", { key: '08a62b131414ebe431105666acd3021e41b67451', name: "button" })), h("div", { key: '9e6729e97cd0043f8c7e48eee665ca0d4cb731a1', "aria-hidden": !this.menuVisible, class: "menu-wrapper", ref: (el) => (this.menuRef = el), style: {
// Positioning
position: 'absolute',
top: `${this.menuPosition.y}px`,
left: `${this.menuPosition.x}px`,
zIndex: '1000',
// Visibility
visibility: this.menuVisible ? 'visible' : 'hidden',
opacity: this.menuVisible ? '1' : '0',
pointerEvents: this.menuVisible ? 'auto' : 'none',
} }, h("modus-wc-menu", { key: 'd7478223f33db56bcc1978ae552390d1dd28a53e', bordered: this.menuBordered, size: this.menuSize }, h("slot", { key: '2060d1289751a8c27320b846f8f46d501f71f149', name: "menu" })))));
}
static get is() { return "modus-wc-dropdown-menu"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-dropdown-menu.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-dropdown-menu.css"]
};
}
static get properties() {
return {
"buttonAriaLabel": {
"type": "string",
"attribute": "button-aria-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The aria-label for the dropdown button."
},
"getter": false,
"setter": false,
"reflect": false
},
"buttonColor": {
"type": "string",
"attribute": "button-color",
"mutable": false,
"complexType": {
"original": "| 'primary'\n | 'secondary'\n | 'tertiary'\n | 'warning'\n | 'danger'",
"resolved": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\" | \"warning\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The color variant of the button."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'primary'"
},
"buttonSize": {
"type": "string",
"attribute": "button-size",
"mutable": false,
"complexType": {
"original": "DaisySize",
"resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\" | undefined",
"references": {
"DaisySize": {
"location": "import",
"path": "../types",
"id": "src/components/types.ts::DaisySize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The size of the button."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'md'"
},
"buttonVariant": {
"type": "string",
"attribute": "button-variant",
"mutable": false,
"complexType": {
"original": "'borderless' | 'filled' | 'outlined'",
"resolved": "\"borderless\" | \"filled\" | \"outlined\" | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The variant of the button."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'filled'"
},
"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 host element."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If true, the button will be disabled."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"menuBordered": {
"type": "boolean",
"attribute": "menu-bordered",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Indicates that the menu should have a border."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "true"
},
"menuOffset": {
"type": "number",
"attribute": "menu-offset",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Distance between the button and menu in pixels."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "10"
},
"menuPlacement": {
"type": "string",
"attribute": "menu-placement",
"mutable": false,
"complexType": {
"original": "PopoverPlacement",
"resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | undefined",
"references": {
"PopoverPlacement": {
"location": "import",
"path": "../types",
"id": "src/components/types.ts::PopoverPlacement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The placement of the menu relative to the button."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'bottom-start'"
},
"menuSize": {
"type": "string",
"attribute": "menu-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 menu."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "'md'"
},
"menuVisible": {
"type": "boolean",
"attribute": "menu-visible",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Indicates that the menu is visible."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"menuPosition": {}
};
}
static get events() {
return [{
"method": "menuVisibilityChange",
"name": "menuVisibilityChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Event emitted when the menuVisible prop changes."
},
"complexType": {
"original": "{ isVisible: boolean }",
"resolved": "{ isVisible: boolean; }",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "menuVisible",
"methodName": "onMenuVisibilityChange"
}];
}
static get listeners() {
return [{
"name": "click",
"method": "handleDocumentClick",
"target": "document",
"capture": false,
"passive": false
}, {
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": false
}];
}
}