@codedungeon/vue-topiary

vue-topiary

VueTopiary is a modern, elegant looking tree component (requires VueJS 2.6.10 or grater), including inline node editing and full drag n drop support.

Feature

• Icons use any icon library of your choosing, the icon object property accepts standard HTML style icon fonts (see example before for more information)
• Drag and Drop tree nodes within current component instance, or across components!
• Expanded can be defined at runtime so tree objects can appear expanded by default
• Editable nodes allow double-click support allowing in-place editing
• Custom Drop Nodes all nodes have an acceptDrag property so you choose which node can be used as a drop target
• Contextual event support (right mouse or control-clicking) will pass node details to callback method
• Customize your node display, including icon support

Example Project

Preview

---

Semantic Versioning

Vue Topiary follows Semantic Versioning in all its official projects for documented features and behavior. For undocumented behavior or exposed internals, changes are described in release notes

Getting Started

---

Install

npm install @codedungeon/vue-topiary

or

yarn add @codedungeon/vue-topiary

Usage

You can see Vue Topiary in action here

NOTE: If you receive an error about Vue packages version mismatch execute the following

// Update the version of Vue and vue-template-compiler to latest is fine.
npm install vue@latest -S
npm install vue-template-compiler@latest -D

main.js

import Vue from 'vue' import VueTopiary from '@codedungeon/vue-topiary' import
'@codedungeon/vue-topiary/dist/vue-topiary.min.css' Vue.use(VueTopiary)

test.vue

<template>
	<vue-topiary :data='data' :allowDrag='allowDrag' :allowDrop='allowDrop' @current-node-clicked='curNodeClicked' @drag="dragHandler" @drag-enter="dragEnterHandler" @drag-leave="dragLeaveHandler" @drag-over="dragOverHandler" @drag-end="dragEndHandler" @drop="dropHandler" v-slot="slotProps">
    <!-- customize your node here if don't like the default -->
    <span :class="[slotProps.isClicked ? 'i-am-clicked' : 'i-am-not-clicked']"></span>
    <span class='i-am-node-name'>{{slotProps.nodeName}}</span>
    </vue-topiary>
</template>
<script>
export default{
  data(){
    return{
      data: [
        {
          name: 'Node 0-0',
          id: 0,
          children: [
            {
              name: 'Node 1-1',
              id: 3,
              children: [
                {
                  name: 'Node 2-1',
                  id: 4,
                  children: []
                },
                {
                  name: 'Node 2-2',
                  id: 10,
                  children: []
                }
              ]
            },
            {
              name: 'Node 1-2',
              id: 13,
              children: []
            }
          ]
        },
        {
          name: 'Node 0-1',
          id: 14,
          children: []
        }
      ]
    }
  },
  methods: {
   	allowDrag(model, component) {
      if (model.name === 'Node 0-1') {
        // can't be dragged
        return false;
      }
      // can be dragged
      return true;
    },

    allowDrop(model, component) {
      if (model.name === 'Node 2-2') {
        // can't be placed
        return false;
      }
      // can be placed
      return true;
    },

    curNodeClicked(model, component) {
      // console.log('curNodeClicked', model, component);
    },

    dragHandler(model, component, e) {
      // console.log('dragHandler: ', model, component, e);
    },

    dragEnterHandler(model, component, e) {
      // console.log('dragEnterHandler: ', model, component, e);
    },

    dragLeaveHandler(model, component, e) {
      // console.log('dragLeaveHandler: ', model, component, e);
    },

    dragOverHandler(model, component, e) {
      // console.log('dragOverHandler: ', model, component, e);
    },

    dragEndHandler(model, component, e) {
      // console.log('dragEndHandler: ', model, component, e);
    },

    dropHandler(model, component, e) {
      // console.log('dropHandler: ', model, component, e);
    }
  }
}
<script>

API

---

Attributes

Name	Description	Type	Default
data	data of the tree	Array	－－
allowDrag	Judging which node can be dragged	Function	()=>true
allowDrop	Judging which node can be plugged into other nodes	Function	()=>true
allowHideShow	Show Hide / Show Label at top of tree	Boolean	true
hideLabel	hide label text	String	"Hide"
showLabel	show label text	String	"Show"

Method

Name	Description	arguments
current-node-clicked	Tell you which node was clicked	(model,component) model: node data was clicked． component: VNode data for the node was clicked
drag	The drag event is fired every few hundred milliseconds as an node is being dragged by the user	(model,component,e) model: node data was dragged. component: VNode data for the node was dragged; e: drag event
drag-enter	The drag-enter event is fired when a dragged node enters a valid drop target	(model,component,e) model: data of the valid drop target; component: VNode of the valid drop target; e: drag event
drag-leave	The drag-leave event is fired when a dragged node leaves a valid drop target	(model,component,e) model: data of the valid drop target; component: VNode of the valid drop target; e: drag event
drag-over	The drag-over event is fired when an node is being dragged over a valid drop target	(model,component,e) model: data of the valid drop target; component: VNode of the valid drop target; e: drag event
drag-end	The drag-end event is fired when a drag operation is being ended	(model,component,e) model: node data was dragged. component: VNode data for the node was dragged; e: drag event
drop	The drop event is fired when an node is dropped on a valid drop target.	(model,component,e) model: data of the valid drop target; component: VNode of the valid drop target; e: drag event

Slot

<vue-topiary ... v-slot="slotProps">
    <!-- customize your node here if don't like the default -->
    <span :class="[slotProps.isClicked ? 'i-am-clicked' : 'i-am-not-clicked']"></span>
    <span class='i-am-node-name'>{{slotProps.nodeName}}</span>
</vue-topiary>

slotPropshas two attributes：

attribute name	description	value type
nodeName	the name of displaying node	String
isClicked	if the node is clicked (true means expanded)	Boolean