@kelvininc/ui-components
Version:
Kelvin UI Components
347 lines (346 loc) • 13.9 kB
JavaScript
import { Fragment, Host, h } from "@stencil/core";
import { get } from "lodash-es";
/**
* @part tree - The tree container.
* @part tree-item - The tree item container.
*/
export class KvTree {
constructor() {
/** (optional) Defines whether the all tree nodes is loading. */
this.loading = false;
this.onItemClick = (item) => this.nodeClick.emit(item);
this.onToggleExpand = (item) => this.nodeToggleExpand.emit(item);
}
drawNodes(nodes) {
return (h(Fragment, null, nodes.map(item => {
var _a;
return !get(this.hiddenNodes, [item.id], false) && (h("kv-tree-item", { slot: "child-slot", label: item.label, additionalLabel: item.additionalLabel, placeholder: item.placeholder, labelsSize: this.labelsSize, icon: item.icon, iconState: item.iconState, counter: item.counter, counterState: item.counterState, hasChildren: item.lazyLoadChildren, selected: this.selectedNode === item.id, expanded: get(this.expandedNodes, [item.id], false), disabled: get(this.disabledNodes, [item.id], false), preventDefault: item.preventDefault, highlighted: get(this.highlightedNodes, [item.id], false), spotlighted: get(this.spotlightedNodes, [item.id], false), expandIcon: this.expandIcon, loading: this.loading || get(this.loadingNodes, [item.id], false), onItemClick: _ => this.onItemClick(item), onToggleExpand: _ => this.onToggleExpand(item), showTooltip: this.showTooltip, tooltipDelay: this.tooltipDelay, part: "tree-item", exportparts: "icon,children" }, ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.drawNodes(item.children)));
})));
}
render() {
var _a;
return (h(Host, { key: 'bb5c31c4bc77593fc4f5ff25c539ba72cac6f66e' }, h("div", { key: '1d31d67041b8dca7905673a5521386be8e8ab780', class: "container", part: "tree" }, ((_a = this.nodes) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.drawNodes(this.nodes))));
}
static get is() { return "kv-tree"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"night": ["tree.night.scss"],
"light": ["tree.light.scss"]
};
}
static get styleUrls() {
return {
"night": ["tree.night.css"],
"light": ["tree.light.css"]
};
}
static get properties() {
return {
"nodes": {
"type": "unknown",
"attribute": "nodes",
"mutable": false,
"complexType": {
"original": "ITreeNodeItem[]",
"resolved": "ITreeNodeItem[]",
"references": {
"ITreeNodeItem": {
"location": "import",
"path": "./tree.types",
"id": "src/components/tree/tree.types.ts::ITreeNodeItem"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "(required) The tree hierarchy items to render in this component"
},
"getter": false,
"setter": false
},
"loading": {
"type": "boolean",
"attribute": "loading",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Defines whether the all tree nodes is loading."
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"selectedNode": {
"type": "string",
"attribute": "selected-node",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) The currently selected node id"
},
"getter": false,
"setter": false,
"reflect": false
},
"hiddenNodes": {
"type": "unknown",
"attribute": "hidden-nodes",
"mutable": false,
"complexType": {
"original": "{ [key: string]: boolean }",
"resolved": "{ [key: string]: boolean; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Dictionary that defines whether the tree node is hidden."
},
"getter": false,
"setter": false
},
"expandedNodes": {
"type": "unknown",
"attribute": "expanded-nodes",
"mutable": false,
"complexType": {
"original": "{ [key: string]: boolean }",
"resolved": "{ [key: string]: boolean; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Dictionary that defines whether the tree node is expanded or collapsed. Only has visual effect for tree nodes with children."
},
"getter": false,
"setter": false
},
"spotlightedNodes": {
"type": "unknown",
"attribute": "spotlighted-nodes",
"mutable": false,
"complexType": {
"original": "{ [key: string]: boolean }",
"resolved": "{ [key: string]: boolean; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Dictionary that defines whether the tree node is spotlight. Only has visual effect for tree nodes with children and expanded."
},
"getter": false,
"setter": false
},
"disabledNodes": {
"type": "unknown",
"attribute": "disabled-nodes",
"mutable": false,
"complexType": {
"original": "{ [key: string]: boolean }",
"resolved": "{ [key: string]: boolean; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Dictionary that defines whether the tree node is disabled."
},
"getter": false,
"setter": false
},
"highlightedNodes": {
"type": "unknown",
"attribute": "highlighted-nodes",
"mutable": false,
"complexType": {
"original": "{ [key: string]: boolean }",
"resolved": "{ [key: string]: boolean; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Dictionary that defines whether the tree node is highlighted."
},
"getter": false,
"setter": false
},
"loadingNodes": {
"type": "unknown",
"attribute": "loading-nodes",
"mutable": false,
"complexType": {
"original": "{ [key: string]: boolean }",
"resolved": "{ [key: string]: boolean; }",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "(optional) Dictionary that defines whether the tree node is loading."
},
"getter": false,
"setter": false
},
"labelsSize": {
"type": "string",
"attribute": "labels-size",
"mutable": false,
"complexType": {
"original": "ETreeItemLabelSize",
"resolved": "ETreeItemLabelSize.Regular | ETreeItemLabelSize.Small",
"references": {
"ETreeItemLabelSize": {
"location": "import",
"path": "../../types",
"id": "src/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
},
"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
},
"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
},
"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
}
};
}
static get events() {
return [{
"method": "nodeToggleExpand",
"name": "nodeToggleExpand",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the node expand toggle is clicked"
},
"complexType": {
"original": "ITreeNodeItem",
"resolved": "ITreeNodeItem",
"references": {
"ITreeNodeItem": {
"location": "import",
"path": "./tree.types",
"id": "src/components/tree/tree.types.ts::ITreeNodeItem"
}
}
}
}, {
"method": "nodeClick",
"name": "nodeClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the tree node item is clicked"
},
"complexType": {
"original": "ITreeNodeItem",
"resolved": "ITreeNodeItem",
"references": {
"ITreeNodeItem": {
"location": "import",
"path": "./tree.types",
"id": "src/components/tree/tree.types.ts::ITreeNodeItem"
}
}
}
}];
}
}