@bulmil/core
Version:
115 lines (114 loc) • 4 kB
JavaScript
/*!
* Bulmil - MIT License
*/
import { h } from "@stencil/core";
export class Dropdown {
constructor() {
/**
* Handle Trigger click action
*/
this.handleTriggerClick = () => {
this.isActive = !this.isActive;
};
this.isActive = false;
this.isRight = false;
this.isUp = false;
this.isHoverable = false;
}
render() {
return (h("div", { key: 'e37f1cfab3c96fae6ae1852cff38826253748a44', class: {
dropdown: true,
'is-active': this.isActive,
'is-right': this.isRight,
'is-up': this.isUp,
'is-hoverable': this.isHoverable,
} }, h("div", { key: 'bd90928096efde8d3c32c5ea30cb5f6d5b85a6c7', onClick: this.handleTriggerClick, class: "dropdown-trigger" }, h("slot", { key: '8c1e78d312d575b510e29752a31e932f0865ea8e', name: "trigger", "aria-haspopup": "true" })), h("div", { key: '249a9dd1881b8a65a1acd3acbc3100046a8a0571', class: "dropdown-menu", role: "menu" }, h("div", { key: '725e18d94661826219b1ef0b03088f639a37bb20', class: "dropdown-content" }, h("slot", { key: 'feefa783f2588e82f9d765c063db8433f3f42251' })))));
}
static get is() { return "bm-dropdown"; }
static get originalStyleUrls() {
return {
"$": ["dropdown.scss"]
};
}
static get styleUrls() {
return {
"$": ["dropdown.css"]
};
}
static get properties() {
return {
"isActive": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The dropdown visibility"
},
"attribute": "is-active",
"reflect": true,
"defaultValue": "false"
},
"isRight": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Align the dropdown to the right"
},
"attribute": "is-right",
"reflect": false,
"defaultValue": "false"
},
"isUp": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Dropdown menu that appears above the dropdown button"
},
"attribute": "is-up",
"reflect": false,
"defaultValue": "false"
},
"isHoverable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The dropdown will show up when hovering the dropdown-trigger"
},
"attribute": "is-hoverable",
"reflect": false,
"defaultValue": "false"
}
};
}
}