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 |