megafetis / vue3-blocks-tree

A vue3 block organization tree view component. Hierarchical horizontal or vertical tree

vue3-blocks-tree

A simple organization structure tree view based on Vue3.x. It supports events, slots, horizontal vision and nodes manipulation

Thanks to hukaibaihu and his sources for vue 2 taken as basis.

Usage

<template>
    <h1>Basic</h1>
    <div>
        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'"  :collapsable="true"></blocks-tree>
    </div>

    <h1>With slots</h1>
    <div>
        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'" :collapsable="true" :props="{label: 'label', expand: 'expand', children: 'children',  key:'some_id'}">
        <template #node="{data,context}">
            <span>
                <input type="checkbox" :checked="selected.indexOf(data.some_id)> -1" @change="(e)=>toggleSelect(data,e.target.checked)"/> {{data.label}}
            </span>
            <br/>
            <span v-if="data.children && data.children.length">
                <a href="#" @click="context.toggleExpand">toggle expand</a>
            </span>
        </template>
        </blocks-tree>
        <div>
        Selected: {{selected}}
        </div>
    </div>

    <h1>Change orientation</h1>
    <select v-model="treeOrientation">
        <option value="0">Vertical</option>
        <option value="1">Horizontal</option>
    </select>

</template>
<script>
import { defineComponent,ref,reactive } from 'vue';

export default defineComponent({

    setup() {

        let selected = ref([]);
        let treeOrientation = ref("0");
        let treeData = reactive({
            label: 'root',
            expand: true,
            some_id: 1,
            children: [
                { label: 'child 1', some_id: 2, },
                { label: 'child 2', some_id: 3, },
                { 
                    label: 'subparent 1', 
                    some_id: 4, 
                    expand: false, 
                    children: [
                        { label: 'subchild 1', some_id: 5 },
                        {  
                            label: 'subchild 2', 
                            some_id: 6, 
                            expand: false, 
                            children: [
                                { label: 'subchild 11', some_id: 7 },
                                { label: 'subchild 22', some_id: 8 },
                            ]
                        },
                    ]
                },
            ]
        });

        const toggleSelect = (node, isSelected) => {
            isSelected ? selected.value.push(node.some_id) : selected.value.splice(selected.value.indexOf(node.some_id), 1);
            if(node.children && node.children.length) {
                node.children.forEach(ch=>{
                    toggleSelect(ch,isSelected)
                })
            }
        }

        return {
            treeData,
            selected,
            toggleSelect,
            treeOrientation
        }
    }
})

</script>

Demo

[https://megafetis.github.io/vue3-blocks-tree-demo]

NPM

# use npm
npm i vue3-blocks-tree

# use yarn
yarn add vue3-blocks-tree

Import Plugins

import {createApp} from 'vue';
import VueBlocksTree from 'vue3-blocks-tree';
import 'vue3-blocks-tree/dist/vue3-blocks-tree.css';
// or import 'vue3-blocks-tree/src/styles/blocks-tree.less';

let defaultoptions = {treeName:'blocks-tree'}

createApp(App)
    .use(VueBlocksTree,defaultoptions)
    // or .component('blocks-tree',VueBlocksTree)

// ...

API

api	descripton	type
node context	Context to node manipulation in slot or in event callback	interface NodeContext { isExpanded():boolean; toggleExpand():void; }

props

prop	descripton	type	default
data		Object
props	configure props	Object	{label: 'label', children: 'children', expand: 'expand',key: 'id'}
labelWidth	node label width	String | Number	auto
collapsable	children node is collapsable	Boolean	true
renderContent	how to render node label	Function	-
nodeClassName	custom node class	Function | String	-
labelClassName	node label class	Function | String	-

events

event name	descripton	type
node-click	Click event	Function
node-mouseover	onMouseOver event	Function
node-mouseout	onMouseOut event	Function
node-expand	click expand button event	Function

Slots

slot name	descripton	params
node	current node scoped slot	data - node data, context - node context

node-expand

well be called when the collapse-btn clicked

• params e Event
• params data Current node data
• params context Node context

node-click

well be called when the node-label clicked

• params e Event
• params data Current node data
• params context Node context

node-mouseover

It is called when the mouse hovers over the label.

• params e Event
• params data Current node data
• params context Node context

node-mouseout

It is called when the mouse leaves the label.

• params e Event
• params data Current node data
• params context Node context

Example

• default

  

• horizontal

  

• use node slot

  

License

MIT

vue3-blocks-tree's Issues

504 getaway error

Hello, I got a 504 getaeway error just importing library inside my Component
http://127.0.0.1:8080/node_modules/.vite/deps/vue3-blocks-tree.js?t=1694414932384&v=28ebc17f net::ERR_ABORTED 504 (Gateway Timeout)

Sorry, all I needed was to restart my app. Thank you, Great Tree Component!

Vue 2 Version

Do you have a vue 2 version of this or will any of the previous releases work with vue 2?
I find https://github.com/hukaibaihu/vue-org-tree this rather hard to follow

Is it possible to expand whole tree

Hello. its not rly a issue, am just wondering if its possible to expand the whole tree at the start?
When i load it, without pressing all the buttons to expand it.

(hope i didnt miss it)

not working with nuxt 3

I face a problem when when tring to add it to nuxt 3

    <h1>Basic</h1>
    <div>
        <VueBlocksTree :data="treeData" :horizontal="treeOrientation == '1'" :collapsable="true"></VueBlocksTree>
    </div>
    
    </template>
    <script setup>
        import VueBlocksTree from 'vue3-blocks-tree';
        import 'vue3-blocks-tree/dist/vue3-blocks-tree.css';
        console.log("VueBlocksTree", VueBlocksTree)
        let selected = ref([]);
        let treeOrientation = ref('0');
        let treeData = reactive({
            label: 'root',
            expand: true,
            some_id: 1,
            children: [
                { label: 'child 1', some_id: 2 },
                { label: 'child 2', some_id: 3 },
                {
                    label: 'subparent 1',
                    some_id: 4,
                    expand: false,
                    children: [
                        { label: 'subchild 1', some_id: 5 },
                        {
                            label: 'subchild 2',
                            some_id: 6,
                            expand: false,
                            children: [
                                { label: 'subchild 11', some_id: 7 },
                                { label: 'subchild 22', some_id: 8 },
                            ],
                        },
                    ],
                },
            ],
        });
    
        const toggleSelect = (node, isSelected) => {
            isSelected ? selected.value.push(node.some_id) : selected.value.splice(selected.value.indexOf(node.some_id), 1);
            if (node.children && node.children.length) {
                node.children.forEach((ch) => {
                    toggleSelect(ch, isSelected);
                });
            }
        };
    </script>

Feature: Pan and Zoom

Any chance of adding a pan and zoom feature to it as well? Would be nice when dealing with larger trees where you need zoom out in order for it to fit on the screen.

[Vue warn]: Failed to resolve component: _self

Using vite2 + vue3, this problem shows up when I use the component.
The problem seems to happen when blocks-node tried to repeat itself.

The child look like this in DOM tree:

<_self data="[object Object]" props="[object Object]" collapsable="false" labelwidth="auto"></_self>

treeData is not reactive ?

I have imported this plugin in a particular component (I don't want to use it globally)

In chart component:

<template>
    <div>
        <blocks-tree :data="treeData" :collapsable="false"></blocks-tree>
    </div>
</template>

import VueBlocksTree from 'vue3-blocks-tree';
import 'vue3-blocks-tree/dist/vue3-blocks-tree.css';

setup() {
let treeData = reactive({
            label: 'root',            
            children: [
                { label: 'child 1' },
                { label: 'child 2'},
                { 
                    label: 'subparent 1',                     
                    children: [
                        { label: 'subchild 1'},
                        {  
                            label: 'subchild 2',                            
                            children: [
                                { label: 'subchild 11' },
                                { label: 'subchild 22' },
                            ]
                        },
                    ]
                },
            ]
        });

return treeData;
}

It shows fine.

The problem is I want to use treeData dynamic. So changing the data in "treeData" variable is not reactive.

I created a button and when click update the "treeData" (set the new object to the treeData)

let treeData = ref({})

const onClickBtn = () => {
   treeData.value = {
            label: 'root',            
            children: [
                { label: 'child 1' },
                { label: 'child 2'},
                { 
                    label: 'subparent 1',                     
                    children: [
                        { label: 'subchild 1'},
                        {  
                            label: 'subchild 2',                            
                            children: [
                                { label: 'subchild 11' },
                                { label: 'subchild 22' },
                            ]
                        },
                    ]
                },
            ]
        }
}

and.... not working. How to make it reactive dynamic .... to change data dynamic (ex: with the ones that comes from a response request) ???

Or is there an event to update the chart ? reload , refresh ?

Multiple parent to one leaf node

Is there any way to make a leaf that have multiple ancestors? If not, this could be a killer feature.