@codedungeon/vue-topiary v0.5.0

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

Method

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：