File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<ul class="tree-node">
<li
:class="{
'flex align-center justify-between cursor p-tree no-gutters': true,
'selected': displaySelectedNode === displayNode.id,
}"
@click="toggleNode(displayNode.id)"
>
<div class="gd-11 flex align-center no-gutters">
<div class="gd-1">
<svg-icon
type="mdi"
v-if="displayNode.childList.length"
:width="18"
:height="18"
:path="iconPath()"
></svg-icon>
</div>
<div class="gd-11 flex align-center">
<div class="gd-1">
<svg-icon
type="mdi"
v-if="displayNode.childList.length"
:width="18"
:height="18"
:path="icon"
:color="'#5089ef'"
></svg-icon>
</div>
<div class="gd-11">
<p class="node-name ml5" :title="displayNode.nm">{{ displayNode.nm }}</p>
</div>
</div>
</div>
</li>
<ul v-if="isOpen && displayNode.childList.length" class="child-node pl20">
<li v-for="child in displayNode.childList" :key="child.id">
<Hierachy
:nodeList="child"
:icon="icon"
:selectedNode="selectedNode"
@changeSelected="findByChildNode"
/>
</li>
</ul>
</ul>
</template>
<script>
import { mdiChevronRight, mdiChevronDown } from "@mdi/js";
export default {
name: "Hierachy",
props: {
nodeList: {
type: Object,
required: true,
},
icon: {
required: true,
},
selectedNode: {
type: String,
},
},
data() {
return {
isOpen: false,
};
},
methods: {
toggleNode(node) {
this.isOpen = !this.isOpen;
this.$emit("changeSelected", node);
},
iconPath() {
return this.isOpen ? mdiChevronDown : mdiChevronRight;
},
findByChildNode(node) {
this.$emit("changeSelected", node);
},
},
watch: {},
computed: {
displayNode() {
return this.nodeList;
},
displaySelectedNode() {
return this.selectedNode;
},
},
components: {},
mounted() {},
};
</script>
<style scoped>
.p-tree {
padding: 0.5rem 1rem;
}
.node-name {
font-size: 1.6rem;
}
.selected {
border: 1px solid var(--blue);
border-radius: 0.3rem;
}
</style>