cnc-vue

favicon Icon made with: https://favicon.io/?text=cT&shape=rounded&fontFamily=Dosis&fontSize=125&fontColor=%23ffffff&backgroundColor=%230096a9

A tree plugin for vue2 based on projects: https://github.com/zdy1988/vue-jstree and its fork https://github.com/lucafaggianelli/vue-jstree, insipred by JStree project and adapted for Vue. It had a drag-and-drop capability, but it was missing ability to move item between exising items, like the project https://github.com/plantain-00/tree-component

Also we added support for flat data source received from database with defined parentID.

NPM

    npm install cnc-vue

ES6

    import cncVueTree from 'cnc-vue'
 
    new Vue({
      components: {
        cncVueForm
      }
    })

Setup

    npm install
    npm run dev

Usage

With flat model

    <cnc-vue-jstree :data="data" show-checkbox multiple allow-batch whole-row draggable data-is-flat 
    text-field-name="title" id-field-name="id" order-field-name="order" parent-field-name="parent" 
    @item-drop="itemDrop" @item-click="itemClick"></cnc-vue-jstree>
 
    new Vue({
      data: {
        data: [
          {
            'id': '1',
            'order': 'A',
            'title': 'Same but with checkboxes'
          },
          {
            'id': '2',
            'parent': '1',
            'order': 'B',
            'title': 'initially selected',
            'selected': true
          },
          {
            'id': '3',
            'parent': '1',
            'order': 'C',
            'title': 'custom icon',
            'icon': 'fa fa-warning icon-state-danger'
          },
          {
            'id': '4',
            'parent': '1',
            'order': 'D',
            'title': 'initially open',
            'icon': 'fa fa-folder icon-state-default',
            'opened': true
          },
          {
            'id': '5',
            'parent': '4',
            'order': 'E',
            'title': 'Another node'
          },
          {
            'id': '6',
            'parent': '1',
            'order': 'G',
            'title': 'custom icon',
            'icon': 'fa fa-warning icon-state-warning'
          },
          {
            'id': '7',
            'parent': '1',
            'order': 'M',
            'title': 'disabled node',
            'icon': 'fa fa-check icon-state-success',
            'disabled': true
          },
          {
            'id': '8',
            'order': 'AA',
            'title': 'And wholerow selection'
          }
        ]
      },
      methods: {
        itemClick (node) {
          console.log(node.model.id + ' clicked !')
        },
        itemDrop (source, destination, changeObj) {
          console.log('dropped', source.title, destination.title, changeObj)
        }
      }
    })

With nested model

    <cnc-vue-jstree :data="data" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></cnc-vue-jstree>
 
    new Vue({
      data: {
        data: [
          {
            "text": "Same but with checkboxes",
            "children": [
              {
                "text": "initially selected",
                "selected": true
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-danger"
              },
              {
                "text": "initially open",
                "icon": "fa fa-folder icon-state-default",
                "opened": true,
                "children": [
                  {
                    "text": "Another node"
                  }
                ]
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-warning"
              },
              {
                "text": "disabled node",
                "icon": "fa fa-check icon-state-success",
                "disabled": true
              }
            ]
          },
          {
            "text": "Same but with checkboxes",
            "opened": true,
            "children": [
              {
                "text": "initially selected",
                "selected": true
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-danger"
              },
              {
                "text": "initially open",
                "icon": "fa fa-folder icon-state-default",
                "opened": true,
                "children": [
                  {
                    "text": "Another node"
                  }
                ]
              },
              {
                "text": "custom icon",
                "icon": "fa fa-warning icon-state-warning"
              },
              {
                "text": "disabled node",
                "icon": "fa fa-check icon-state-success",
                "disabled": true
              }
            ]
          },
          {
            "text": "And wholerow selection"
          }
        ]
      },
      methods: {
        itemClick (node) {
          console.log(node.model.text + ' clicked !')
        }
      }
    })

API

Vue Props

Props	Type	Default
data	Array
size	String
dataIsFlat	Boolean	false
showCheckbox	Boolean	false
wholeRow	Boolean	false
noDots	Boolean	false
multiple	Boolean	false
allowBatch	Boolean	false
textFieldName	String	'text'
orderFieldName	String	'text'
idFieldName	String	'text'
parentFieldName	String	'text'
valueFieldName	Boolean	'value'
async	Function
loadingText	String	'Loading'
draggable	Boolean	false
klass	String

Data Item Optional Properties

Name	Type	Default
icon	String
opened	Boolean	false
selected	Boolean	false
disabled	Boolean	false

Events

item-click(item)

item-drop(child, parent)

Publish new relese

Use npm scripts to automate process: 'npm run git -- "Message"' or 'nmp run publish', or do manual steps:

• Update package.json with new version number
• Compile new distribution npm run build
• Commit to GIT

git add --all
git commit -m "fix bug supporting Esc on item edit"
git push -u origin master

• Commit to NPM npm publish
• Set public registry: npm config set registry https://registry.npmjs.org
• Login to public registry: npm login

License

Licensed under the MIT license.

Thanks For jstree's UI