@limetech/lime-elements
Version:
258 lines (257 loc) • 9.37 kB
JavaScript
import { Host, h } from "@stencil/core";
/**
* A split button is a button with two components:
* a button and a side-menu attached to it.
*
* Clicking on the button runs a default action,
* and clicking on the arrow opens up a list of other possible actions.
*
* :::warning
* - Never use a split button for navigation purposes, such as going to next page.
* The button should only be used for performing commands!
* - Never use this component instead of a Select or Menu component!
* :::
*
* @exampleComponent limel-example-split-button-basic
* @exampleComponent limel-example-split-button-loading
* @exampleComponent limel-example-split-button-repeat-default-command
*/
export class SplitButton {
constructor() {
/**
* Set to `true` to make the button primary.
*/
this.primary = false;
/**
* Set to `true` to disable the button.
*/
this.disabled = false;
/**
* Set to `true` to put the button in the `loading` state.
* This also disables the button.
*/
this.loading = false;
/**
* Set to `true` to indicate failure instead of success when the button is
* no longer in the `loading` state.
*/
this.loadingFailed = false;
/**
* A list of items and separators to show in the menu.
*/
this.items = [];
this.renderMenu = () => {
if (this.items.length === 0) {
return;
}
return (h("limel-menu", { class: {
primary: this.primary,
}, disabled: this.disabled || this.loading, items: this.items, openDirection: "bottom" }, h("button", { class: "menu-trigger", slot: "trigger", disabled: this.disabled }, "\u22EE")));
};
this.filterClickWhenDisabled = (e) => {
if (this.disabled) {
e.preventDefault();
}
};
}
render() {
return (h(Host, { key: '4ddbc6a1d81d69c50340512ed8a7112b2288fa3e', class: {
'has-menu': this.items.length > 0,
}, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '050586c28af81bc598021a602d4f274afd7a777b', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
}
static get is() { return "limel-split-button"; }
static get encapsulation() { return "shadow"; }
static get delegatesFocus() { return true; }
static get originalStyleUrls() {
return {
"$": ["split-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["split-button.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The text to show on the default action part of the button."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "label"
},
"primary": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to make the button primary."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "primary",
"defaultValue": "false"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set icon for the button"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "icon"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to disable the button."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"defaultValue": "false"
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to put the button in the `loading` state.\nThis also disables the button."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "loading",
"defaultValue": "false"
},
"loadingFailed": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to indicate failure instead of success when the button is\nno longer in the `loading` state."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "loading-failed",
"defaultValue": "false"
},
"items": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<MenuItem | ListSeparator>",
"resolved": "(ListSeparator | MenuItem<any>)[]",
"references": {
"Array": {
"location": "global",
"id": "global::Array"
},
"MenuItem": {
"location": "import",
"path": "../menu/menu.types",
"id": "src/components/menu/menu.types.ts::MenuItem",
"referenceLocation": "MenuItem"
},
"ListSeparator": {
"location": "import",
"path": "../list-item/list-item.types",
"id": "src/components/list-item/list-item.types.ts::ListSeparator",
"referenceLocation": "ListSeparator"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "A list of items and separators to show in the menu."
},
"getter": false,
"setter": false,
"defaultValue": "[]"
}
};
}
static get events() {
return [{
"method": "select",
"name": "select",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Is emitted when a menu item is selected."
},
"complexType": {
"original": "MenuItem",
"resolved": "MenuItem<any>",
"references": {
"MenuItem": {
"location": "import",
"path": "../menu/menu.types",
"id": "src/components/menu/menu.types.ts::MenuItem",
"referenceLocation": "MenuItem"
}
}
}
}];
}
}