revsetter-maps v1.1.4

revsetter-maps

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

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', onMove: onNodeMove, onMoveEnd: onNodeMoveEnd }">
        <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 onNodeMove = (evt) => {
            // return true to permit drag and false if not 
            return true
        }
        const onNodeMoveEnd = (evt) => {
            // use to call any endpoints 
            console.log("Drag end)
        }
        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>

NPM

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

Import Plugins

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

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

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

// ...

API

props

events

Slots

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