377 lines
11 KiB
Vue
377 lines
11 KiB
Vue
|
<template>
|
||
|
|
<div :class="containerClass">
|
||
|
|
<template v-if="loading">
|
||
|
|
<div class="p-tree-loading-overlay p-component-overlay">
|
||
|
|
<i :class="loadingIconClass" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<div class="p-tree-filter-container" v-if="filter">
|
||
|
|
<input type="text" autocomplete="off" class="p-tree-filter p-inputtext p-component" :placeholder="filterPlaceholder"
|
||
|
|
@keydown="onFilterKeydown" v-model="filterValue" />
|
||
|
|
<span class="p-tree-filter-icon pi pi-search"></span>
|
||
|
|
</div>
|
||
|
|
<div class="p-tree-wrapper" :style="{maxHeight: scrollHeight}">
|
||
|
|
<ul class="p-tree-container" role="tree">
|
||
|
|
<TreeNode v-for="(node, index) of valueToRender" :key="node.key" :node="node" :templates="$slots" :level="level + 1" :index="index"
|
||
|
|
:expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" @node-click="onNodeClick"
|
||
|
|
:selectionMode="selectionMode" :selectionKeys="selectionKeys" @checkbox-change="onCheckboxChange"></TreeNode>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import TreeNode from './TreeNode.vue';
|
||
|
|
import {ObjectUtils} from 'primevue/utils';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Tree',
|
||
|
|
emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect'],
|
||
|
|
props: {
|
||
|
|
value: {
|
||
|
|
type: null,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
expandedKeys: {
|
||
|
|
type: null,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
selectionKeys: {
|
||
|
|
type: null,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
selectionMode: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
metaKeySelection: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
loading: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
loadingIcon: {
|
||
|
|
type: String,
|
||
|
|
default: 'pi pi-spinner'
|
||
|
|
},
|
||
|
|
filter: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
filterBy: {
|
||
|
|
type: String,
|
||
|
|
default: 'label'
|
||
|
|
},
|
||
|
|
filterMode: {
|
||
|
|
type: String,
|
||
|
|
default: 'lenient'
|
||
|
|
},
|
||
|
|
filterPlaceholder: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
filterLocale: {
|
||
|
|
type: String,
|
||
|
|
default: undefined
|
||
|
|
},
|
||
|
|
scrollHeight: {
|
||
|
|
type: String,
|
||
|
|
default: null
|
||
|
|
},
|
||
|
|
level: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
d_expandedKeys: this.expandedKeys || {},
|
||
|
|
filterValue: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
expandedKeys(newValue) {
|
||
|
|
this.d_expandedKeys = newValue;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onNodeToggle(node) {
|
||
|
|
const key = node.key;
|
||
|
|
|
||
|
|
if (this.d_expandedKeys[key]) {
|
||
|
|
delete this.d_expandedKeys[key];
|
||
|
|
this.$emit('node-collapse', node);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.d_expandedKeys[key] = true;
|
||
|
|
this.$emit('node-expand', node);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.d_expandedKeys = {...this.d_expandedKeys};
|
||
|
|
this.$emit('update:expandedKeys', this.d_expandedKeys);
|
||
|
|
},
|
||
|
|
onNodeClick(event) {
|
||
|
|
if (this.selectionMode != null && event.node.selectable !== false) {
|
||
|
|
const metaSelection = event.nodeTouched ? false : this.metaKeySelection;
|
||
|
|
const _selectionKeys = metaSelection ? this.handleSelectionWithMetaKey(event) : this.handleSelectionWithoutMetaKey(event);
|
||
|
|
|
||
|
|
this.$emit('update:selectionKeys', _selectionKeys);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onCheckboxChange(event) {
|
||
|
|
this.$emit('update:selectionKeys', event.selectionKeys);
|
||
|
|
|
||
|
|
if (event.check)
|
||
|
|
this.$emit('node-select', event.node);
|
||
|
|
else
|
||
|
|
this.$emit('node-unselect', event.node);
|
||
|
|
},
|
||
|
|
handleSelectionWithMetaKey(event) {
|
||
|
|
const originalEvent = event.originalEvent;
|
||
|
|
const node = event.node;
|
||
|
|
const metaKey = (originalEvent.metaKey||originalEvent.ctrlKey);
|
||
|
|
const selected = this.isNodeSelected(node);
|
||
|
|
let _selectionKeys;
|
||
|
|
|
||
|
|
if (selected && metaKey) {
|
||
|
|
if (this.isSingleSelectionMode()) {
|
||
|
|
_selectionKeys = {};
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_selectionKeys = {...this.selectionKeys};
|
||
|
|
delete _selectionKeys[node.key];
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$emit('node-unselect', node);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (this.isSingleSelectionMode()) {
|
||
|
|
_selectionKeys = {};
|
||
|
|
}
|
||
|
|
else if (this.isMultipleSelectionMode()) {
|
||
|
|
_selectionKeys = !metaKey ? {} : (this.selectionKeys ? {...this.selectionKeys} : {});
|
||
|
|
}
|
||
|
|
|
||
|
|
_selectionKeys[node.key] = true;
|
||
|
|
this.$emit('node-select', node);
|
||
|
|
}
|
||
|
|
|
||
|
|
return _selectionKeys;
|
||
|
|
},
|
||
|
|
handleSelectionWithoutMetaKey(event) {
|
||
|
|
const node = event.node;
|
||
|
|
const selected = this.isNodeSelected(node);
|
||
|
|
let _selectionKeys;
|
||
|
|
|
||
|
|
if (this.isSingleSelectionMode()) {
|
||
|
|
if (selected) {
|
||
|
|
_selectionKeys = {};
|
||
|
|
this.$emit('node-unselect', node);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_selectionKeys = {};
|
||
|
|
_selectionKeys[node.key] = true;
|
||
|
|
this.$emit('node-select', node);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
if (selected) {
|
||
|
|
_selectionKeys = {...this.selectionKeys};
|
||
|
|
delete _selectionKeys[node.key];
|
||
|
|
|
||
|
|
this.$emit('node-unselect', node);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
_selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
|
||
|
|
_selectionKeys[node.key] = true;
|
||
|
|
|
||
|
|
this.$emit('node-select', node);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return _selectionKeys;
|
||
|
|
},
|
||
|
|
isSingleSelectionMode() {
|
||
|
|
return this.selectionMode === 'single';
|
||
|
|
},
|
||
|
|
isMultipleSelectionMode() {
|
||
|
|
return this.selectionMode === 'multiple';
|
||
|
|
},
|
||
|
|
isNodeSelected(node) {
|
||
|
|
return (this.selectionMode && this.selectionKeys) ? this.selectionKeys[node.key] === true : false;
|
||
|
|
},
|
||
|
|
isChecked(node) {
|
||
|
|
return this.selectionKeys ? this.selectionKeys[node.key] && this.selectionKeys[node.key].checked: false;
|
||
|
|
},
|
||
|
|
isNodeLeaf(node) {
|
||
|
|
return node.leaf === false ? false : !(node.children && node.children.length);
|
||
|
|
},
|
||
|
|
onFilterKeydown(event) {
|
||
|
|
if (event.which === 13) {
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
findFilteredNodes(node, paramsWithoutNode) {
|
||
|
|
if (node) {
|
||
|
|
let matched = false;
|
||
|
|
if (node.children) {
|
||
|
|
let childNodes = [...node.children];
|
||
|
|
node.children = [];
|
||
|
|
for (let childNode of childNodes) {
|
||
|
|
let copyChildNode = {...childNode};
|
||
|
|
if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
|
||
|
|
matched = true;
|
||
|
|
node.children.push(copyChildNode);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (matched) {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
isFilterMatched(node, {searchFields, filterText, strict}) {
|
||
|
|
let matched = false;
|
||
|
|
for(let field of searchFields) {
|
||
|
|
let fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLocaleLowerCase(this.filterLocale);
|
||
|
|
if(fieldValue.indexOf(filterText) > -1) {
|
||
|
|
matched = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!matched || (strict && !this.isNodeLeaf(node))) {
|
||
|
|
matched = this.findFilteredNodes(node, {searchFields, filterText, strict}) || matched;
|
||
|
|
}
|
||
|
|
|
||
|
|
return matched;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
containerClass() {
|
||
|
|
return ['p-tree p-component', {
|
||
|
|
'p-tree-selectable': this.selectionMode != null,
|
||
|
|
'p-tree-loading': this.loading,
|
||
|
|
'p-tree-flex-scrollable': this.scrollHeight === 'flex'
|
||
|
|
}];
|
||
|
|
},
|
||
|
|
loadingIconClass() {
|
||
|
|
return ['p-tree-loading-icon pi-spin', this.loadingIcon];
|
||
|
|
},
|
||
|
|
filteredValue() {
|
||
|
|
let filteredNodes = [];
|
||
|
|
const searchFields = this.filterBy.split(',');
|
||
|
|
const filterText = this.filterValue.trim().toLocaleLowerCase(this.filterLocale);
|
||
|
|
const strict = this.filterMode === 'strict';
|
||
|
|
|
||
|
|
for (let node of this.value) {
|
||
|
|
let _node = {...node};
|
||
|
|
let paramsWithoutNode = {searchFields, filterText, strict};
|
||
|
|
|
||
|
|
if ((strict && (this.findFilteredNodes(_node, paramsWithoutNode) || this.isFilterMatched(_node, paramsWithoutNode))) ||
|
||
|
|
(!strict && (this.isFilterMatched(_node, paramsWithoutNode) || this.findFilteredNodes(_node, paramsWithoutNode)))) {
|
||
|
|
filteredNodes.push(_node);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return filteredNodes;
|
||
|
|
},
|
||
|
|
valueToRender() {
|
||
|
|
if (this.filterValue && this.filterValue.trim().length > 0)
|
||
|
|
return this.filteredValue;
|
||
|
|
else
|
||
|
|
return this.value;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
'TreeNode': TreeNode
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.p-tree-container {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
list-style-type: none;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-treenode-children {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
list-style-type: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-tree-wrapper {
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-treenode-selectable {
|
||
|
|
cursor: pointer;
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-tree-toggler {
|
||
|
|
cursor: pointer;
|
||
|
|
user-select: none;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-treenode-content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-tree-filter {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-tree-filter-container {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-tree-filter-icon {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
margin-top: -.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-tree-loading {
|
||
|
|
position: relative;
|
||
|
|
min-height: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-tree .p-tree-loading-overlay {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-tree-flex-scrollable {
|
||
|
|
display: flex;
|
||
|
|
flex: 1;
|
||
|
|
height: 100%;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-tree-flex-scrollable .p-tree-wrapper {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
</style>
|