@kelvininc/ui-components
Version:
Kelvin UI Components
563 lines (562 loc) • 24.1 kB
JavaScript
import { Fragment, Host, h } from "@stencil/core";
import { EIconName } from "../icon/icon.types";
import { ETreeItemLabelSize } from "./tree-item.types";
import { isEmpty, isNumber, throttle } from "lodash-es";
import { DEFAULT_THROTTLE_WAIT } from "../../config";
import { STATE_ICONS } from "./tree-item.config";
/**
* @slot child-slot - Content is placed in the child subgroup and can be expanded and collapsed.
* @part children - The children container.
*/
export class KvTreeItem {
constructor() {
/** (optional) Defines the font size of title and subtitle labels.*/
this.labelsSize = ETreeItemLabelSize.Small;
/** (optional) Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.
* This property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.
* Set this to <code>true</code> for nodes you intend to load lazily, when the user clicks the expand button.
* It is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway.
*/
this.hasChildren = false;
/** (optional) Defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children.*/
this.expanded = false;
/** (optional) Defines whether the tree node is disabled.*/
this.disabled = false;
/** (optional) Defines whether the tree node is selected by the user.*/
this.selected = false;
/** (optional) Defines whether the tree node is highlighted.*/
this.highlighted = false;
/** (optional) Defines whether the tree node is spotlight.*/
this.spotlighted = false;
/** (optional) Defines whether the label should be displayed as tooltip.*/
this.showTooltip = false;
/** (optional) Defines whether the tree node is loading. */
this.loading = false;
/** (optional) Defines if the item click event should prevent default behaviour. */
this.preventDefault = false;
/** (optional) Defines if icon to use for expanding, should be and arrow like icon pointing up. */
this.expandIcon = EIconName.ArrowDropUp;
}
/** Don't propagate the children click event */
itemClickHandler(event) {
event.stopPropagation();
}
/** Don't propagate the children toggle event */
toggleExpandHandler(event) {
event.stopPropagation();
}
get hasChildrenSlot() {
return !isEmpty(this.el.querySelector('[slot="child-slot"]'));
}
get requiresToggleButton() {
return this.hasChildren || this.hasChildrenSlot;
}
connectedCallback() {
this.toggleClickThrottler = throttle((event) => this.toggleExpand.emit(event), DEFAULT_THROTTLE_WAIT);
this.itemClickThrottler = throttle((event) => this.itemClick.emit(event), DEFAULT_THROTTLE_WAIT);
}
onItemClick(event) {
if (this.preventDefault) {
event.preventDefault();
}
this.itemClickThrottler(event);
}
render() {
return (h(Host, { key: '759d4f137e4083ee7920b5084a771936662c7d44' }, h("div", { key: '9970ceb8229d9b066d57c1497f86c36d0659c476', class: "node-container" }, h("div", { key: '9c00f621e28de7c5650c1a213559247b88c02876', class: {
'node-wrapper': true,
'disabled': this.disabled,
'selected': this.selected,
'highlighted': this.highlighted,
'spotlight': this.spotlighted,
'loading': this.loading
} }, !this.loading && (h(Fragment, { key: 'c3c666b4c08c0aefad262c059f2579862ead0fd0' }, this.requiresToggleButton && (h("div", { key: 'd22362ed25b57444689af695ad9712ab97d7d356', class: "expander-arrow", onClick: this.toggleClickThrottler }, h("kv-icon", { key: '3c2f7c17114c6ec78a63803b63156bce8ea04c87', name: this.expandIcon, customClass: {
'pk-grey3': true,
'rotate-180': this.expanded,
'rotate-90': !this.expanded
} }))), h("div", { key: '5eb1be0add38be59ddb6cf3ed2528f91bcc1855d', class: {
'node-content-wrapper': true,
'disabled': this.disabled,
'selected': this.selected,
'no-filled': isEmpty(this.label) && !isEmpty(this.placeholder)
}, onClick: !this.disabled && this.onItemClick.bind(this) }, this.icon && (h("div", { key: '8f935b3628e9f92acfde722b1a5f1ade42a4b4aa', class: "node-icon" }, h("kv-icon", { key: '0ec19df274ebc8220a59b0f912586978b09ea1d9', name: this.icon, class: "main-icon", exportparts: "icon" }), this.iconState && (h("kv-icon", { key: '77d03607ca88187d2b571b8f5dfa7fee53c016d8', name: STATE_ICONS[this.iconState], customClass: "icon-12", class: { 'state-icon': true, [this.iconState]: true } })))), (this.label || this.placeholder) && (h("div", { key: '65c0976fe97897fde602c2119a4b8ae8c812bf7e', class: `labels labels-${this.labelsSize}` }, h("kv-tooltip", { key: 'e86087a50d51f87bd7dd86c7f8e9229a345d3854', delay: this.tooltipDelay, disabled: !this.showTooltip, text: this.label || this.placeholder, truncate: true }, h("div", { key: 'c856957529d3a1b4cbfffa576458dde4b42f6137', class: { title: true, [`title-${this.labelsSize}`]: true } }, this.label || this.placeholder)), this.additionalLabel && h("div", { key: '3073f81359a5a4b4ceda1a7e0e11e8af6590ecf7', class: "sub-title" }, this.additionalLabel))), h("div", { key: 'b30acc409616174c521c0d02100f16072ac81d78', class: "right-indicators" }, isNumber(this.counter) && this.counter >= 0 && (h("div", { key: 'd83f6af94073716ab1d8c41cd3aace6439184aa6', class: "alarm-bubble" }, h("kv-badge", { key: '06ded66755edab9c623ec026b517ec00dd785c91', state: this.counterState }, this.counter > 100 ? '+99' : this.counter))))))), this.loading && h("div", { key: 'b5ea0167b58bb744efabdbddb7829dcc788b3499', class: "node-loading" })), h("div", { key: '942d559bb1414787056cc96ba71b332d86926045', part: "children", class: "children", style: { display: this.expanded ? 'block' : 'none' } }, h("slot", { key: '040f1d4d3d7accf14f016154f1fe56128911bf0e', name: "child-slot" })))));
}
static get is() { return "kv-tree-item"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"night": ["tree-item.night.scss"],
"light": ["tree-item.light.scss"]
};
}
static get styleUrls() {
return {
"night": ["tree-item.night.css"],
"light": ["tree-item.light.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines the title of the tree item."
},
"getter": false,
"setter": false,
"reflect": true
},
"additionalLabel": {
"type": "string",
"attribute": "additional-label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines the sub-title of the tree item, displayed under the title."
},
"getter": false,
"setter": false,
"reflect": true
},
"placeholder": {
"type": "string",
"attribute": "placeholder",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines the placeholder of the tree item, displayed when title is not filled."
},
"getter": false,
"setter": false,
"reflect": true
},
"labelsSize": {
"type": "string",
"attribute": "labels-size",
"mutable": false,
"complexType": {
"original": "ETreeItemLabelSize",
"resolved": "ETreeItemLabelSize.Regular | ETreeItemLabelSize.Small",
"references": {
"ETreeItemLabelSize": {
"location": "import",
"path": "./tree-item.types",
"id": "src/components/tree-item/tree-item.types.ts::ETreeItemLabelSize"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines the font size of title and subtitle labels."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "ETreeItemLabelSize.Small"
},
"icon": {
"type": "string",
"attribute": "icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines the icon of the tree item. If set, an icon will be displayed before the label."
},
"getter": false,
"setter": false,
"reflect": true
},
"iconState": {
"type": "string",
"attribute": "icon-state",
"mutable": false,
"complexType": {
"original": "ETreeItemState",
"resolved": "ETreeItemState.Error | ETreeItemState.Info | ETreeItemState.None | ETreeItemState.Success | ETreeItemState.Warning",
"references": {
"ETreeItemState": {
"location": "import",
"path": "./tree-item.types",
"id": "src/components/tree-item/tree-item.types.ts::ETreeItemState"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines the state of the icon."
},
"getter": false,
"setter": false,
"reflect": true
},
"counter": {
"type": "number",
"attribute": "counter",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines the counter info of the tree item. If set, an badge will be displayed in the end of tree item."
},
"getter": false,
"setter": false,
"reflect": true
},
"counterState": {
"type": "string",
"attribute": "counter-state",
"mutable": false,
"complexType": {
"original": "EBadgeState",
"resolved": "EBadgeState.Error | EBadgeState.Info | EBadgeState.None | EBadgeState.Success | EBadgeState.Warning",
"references": {
"EBadgeState": {
"location": "import",
"path": "../badge/badge.types",
"id": "src/components/badge/badge.types.ts::EBadgeState"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines the state of the counter."
},
"getter": false,
"setter": false,
"reflect": true
},
"hasChildren": {
"type": "boolean",
"attribute": "has-children",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the tree node has children, even if currently no other tree nodes are slotted inside.\nThis property is useful for showing big tree structures where not all nodes are initially loaded due to performance reasons.\nSet this to <code>true</code> for nodes you intend to load lazily, when the user clicks the expand button.\nIt is not necessary to set this property otherwise. If a tree item has children, the expand button will be displayed anyway."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"expanded": {
"type": "boolean",
"attribute": "expanded",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the tree node is disabled."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"selected": {
"type": "boolean",
"attribute": "selected",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the tree node is selected by the user."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"highlighted": {
"type": "boolean",
"attribute": "highlighted",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the tree node is highlighted."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"spotlighted": {
"type": "boolean",
"attribute": "spotlighted",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the tree node is spotlight."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"showTooltip": {
"type": "boolean",
"attribute": "show-tooltip",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the label should be displayed as tooltip."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"tooltipDelay": {
"type": "number",
"attribute": "tooltip-delay",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Delay to show tooltip in milliseconds."
},
"getter": false,
"setter": false,
"reflect": true
},
"loading": {
"type": "boolean",
"attribute": "loading",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the tree node is loading."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"preventDefault": {
"type": "boolean",
"attribute": "prevent-default",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines if the item click event should prevent default behaviour."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"expandIcon": {
"type": "string",
"attribute": "expand-icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../icon/icon.types",
"id": "src/components/icon/icon.types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines if icon to use for expanding, should be and arrow like icon pointing up."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "EIconName.ArrowDropUp"
}
};
}
static get events() {
return [{
"method": "toggleExpand",
"name": "toggleExpand",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the expand toggle is clicked"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"method": "itemClick",
"name": "itemClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the tree item is clicked"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "itemClick",
"method": "itemClickHandler",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "toggleExpand",
"method": "toggleExpandHandler",
"target": undefined,
"capture": false,
"passive": false
}];
}
}