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="{ 'p-tree flex justify-start align-center cursor mb5 no-gutters': true, 'selected': node.dscsnCtgryId == selectedNode.dscsnCtgryId }"
@click="toggleNode">
<!-- <svg-icon type="mdi" v-if="node.children.length" :width="18" :height="18" :path="iconPath()"></svg-icon> -->
<div class="gd-12 flex justify-start align-center no-gutters">
<div class="gd-1">
<svg-icon type="mdi" :width="18" :height="18" :path="icon" :color="'#5089ef'"></svg-icon>
</div>
<div class="gd-11">
<p class="node-name ml5" :title="node.dscsnCtgryNm">{{ node.dscsnCtgryNm }}</p>
</div>
</div>
</li>
<ul v-if="node.children" class="child-node pl15"> <!--isOpen &&-->
<li v-for="child in node.children" :key="child.id">
<Hierachy :node="child" :icon="icon" :selectedNode="selectedNode" @callback="nodeCallBack" />
<!-- <Hierachy :node="child" :icon="icon"></Hierachy> -->
</li>
</ul>
</ul>
</template>
<script>
import { mdiChevronRight, mdiChevronDown } from '@mdi/js';
export default {
name: 'Hierachy',
props: {
node: {
type: Object,
required: true
},
icon: {
required: true,
},
selectedNode: {
type: Object,
}
},
data() {
return {
isOpen: false,
};
},
methods: {
toggleNode: function () {
this.isOpen = !this.isOpen;
this.$emit('callback', this.node);
},
nodeCallBack: function (node) {
this.$emit('callback', node);
},
iconPath: function () {
return this.isOpen ? mdiChevronDown : mdiChevronRight;
},
},
watch: {},
computed: {
},
components: {
},
mounted() { }
};
</script>
<style scoped>
.p-tree {
padding: .5rem 1rem;
}
.node-name {
font-size: 1.5rem;
}
.selected {
border: 1px solid var(--blue);
border-radius: .3rem;
}
</style>