revsetter-maps

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

Usage

1
2<template>
3    <h1>Basic</h1>
4    <div>
5        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'"  :collapsable="true"></blocks-tree>
6    </div>
7
8    <h1>With slots</h1>
9    <div>
10        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'" :collapsable="true" :props="{label: 'label', expand: 'expand', children: 'children',  key:'some_id', onMove: onNodeMove, onMoveEnd: onNodeMoveEnd }">
11        <template #node="{data,context}">
12            <span>
13                <input type="checkbox" :checked="selected.indexOf(data.some_id)> -1" @change="(e)=>toggleSelect(data,e.target.checked)"/> {{data.label}}
14            </span>
15            <br/>
16            <span v-if="data.children && data.children.length">
17                <a href="#" @click="context.toggleExpand">toggle expand</a>
18            </span>
19        </template>
20        </blocks-tree>
21        <div>
22        Selected: {{selected}}
23        </div>
24    </div>
25
26    <h1>Change orientation</h1>
27    <select v-model="treeOrientation">
28        <option value="0">Vertical</option>
29        <option value="1">Horizontal</option>
30    </select>
31
32</template>
33<script>
34import { defineComponent,ref,reactive } from 'vue';
35
36export default defineComponent({
37
38    setup() {
39
40        let selected = ref([]);
41        let treeOrientation = ref("0");
42        let treeData = reactive({
43            label: 'root',
44            expand: true,
45            some_id: 1,
46            children: [
47                { label: 'child 1', some_id: 2, },
48                { label: 'child 2', some_id: 3, },
49                { 
50                    label: 'subparent 1', 
51                    some_id: 4, 
52                    expand: false, 
53                    children: [
54                        { label: 'subchild 1', some_id: 5 },
55                        {  
56                            label: 'subchild 2', 
57                            some_id: 6, 
58                            expand: false, 
59                            children: [
60                                { label: 'subchild 11', some_id: 7 },
61                                { label: 'subchild 22', some_id: 8 },
62                            ]
63                        },
64                    ]
65                },
66            ]
67        });
68
69        const onNodeMove = (evt) => {
70            // return true to permit drag and false if not 
71            return true
72        }
73        const onNodeMoveEnd = (evt) => {
74            // use to call any endpoints 
75            console.log("Drag end)
76        }
77        const toggleSelect = (node, isSelected) => {
78            isSelected ? selected.value.push(node.some_id) : selected.value.splice(selected.value.indexOf(node.some_id), 1);
79            if(node.children && node.children.length) {
80                node.children.forEach(ch=>{
81                    toggleSelect(ch,isSelected)
82                })
83            }
84        }
85
86        return {
87            treeData,
88            selected,
89            toggleSelect,
90            treeOrientation
91        }
92    }
93})
94
95</script>
96

NPM

# use npm
npm i https://github.com/revsetter/revsetter-maps.git

Import Plugins

1import {createApp} from 'vue';
2import VueBlocksTree from 'revsetter-maps';
3import 'revsetter-maps/dist/revsetter-maps.css';
4// or import 'revsetter-maps/src/styles/blocks-tree.less';
5
6let defaultoptions = {treeName:'blocks-tree'}
7
8createApp(App)
9    .use(VueBlocksTree,defaultoptions)
10    // or .component('blocks-tree',VueBlocksTree)
11
12// ...

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	-
labelClassName	node label class	Function | String	-
onMove	method to disallow and allow the drag	Function	-
onMoveEnd	method to run and api or updates	Function	-

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