├── .commitlintrc.yml
├── .czrc
├── .eslintrc
├── .github
    └── workflows
    │   └── test.yml
├── .gitignore
├── .huskyrc.yml
├── .npmignore
├── LICENSE
├── babel.config.js
├── dev
    ├── App.vue
    └── index.js
├── examples
    ├── demo1.html
    └── img
    │   ├── 08 usher plus.png
    │   ├── edit.png
    │   ├── group-add.png
    │   ├── group.png
    │   ├── personal.png
    │   └── trash.png
├── img
    └── demo.gif
├── jest.config.js
├── package-lock.json
├── package.json
├── prettier.config.js
├── public
    └── index.html
├── readme.md
├── src
    ├── Tree.js
    ├── VueTreeList.vue
    ├── fonts
    │   ├── icomoon.eot
    │   ├── icomoon.svg
    │   ├── icomoon.ttf
    │   └── icomoon.woff
    ├── index.js
    └── tools.js
├── tests
    └── unit
    │   ├── __snapshots__
    │       ├── render.spec.js.snap
    │       └── slot.spec.js.snap
    │   ├── drag.spec.js
    │   ├── operation.spec.js
    │   ├── render.spec.js
    │   └── slot.spec.js
└── vue.config.js


/.commitlintrc.yml:
--------------------------------------------------------------------------------
1 | extends:
2 |   - "@commitlint/config-conventional"


--------------------------------------------------------------------------------
/.czrc:
--------------------------------------------------------------------------------
1 | {
2 |   "path": "cz-conventional-changelog"
3 | }


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "env": {
 4 |     "node": true
 5 |   },
 6 |   "extends": [
 7 |     "plugin:vue/essential",
 8 |     "plugin:prettier/recommended",
 9 |     "eslint:recommended"
10 |   ],
11 |   "rules": {
12 |     "prettier/prettier": "error",
13 |     "no-console": "warn"
14 |   },
15 |   "parserOptions": {
16 |     "parser": "babel-eslint"
17 |   },
18 |   "overrides": [
19 |     {
20 |       "files": [
21 |         "**/__tests__/*.{j,t}s?(x)",
22 |         "**/tests/unit/**/*.spec.{j,t}s?(x)"
23 |       ],
24 |       "env": {
25 |         "jest": true
26 |       }
27 |     }
28 |   ]
29 | }


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: Test
 2 | 
 3 | on: [pull_request, push]
 4 | 
 5 | jobs:
 6 |   test:
 7 |     runs-on: ubuntu-latest
 8 | 
 9 |     steps:
10 |       - uses: actions/checkout@v1
11 |       - name: npm install, lint and test
12 |         run: |
13 |           npm install
14 |           npm run lint
15 |           npm run test:coverage
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 
23 | coverage
24 | 


--------------------------------------------------------------------------------
/.huskyrc.yml:
--------------------------------------------------------------------------------
1 | hooks:
2 |   pre-commit: npm run lint-staged
3 |   commit-msg: commitlint -E HUSKY_GIT_PARAMS


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | npm-debug.log
 3 | .idea
 4 | coverage
 5 | examples
 6 | img
 7 | src
 8 | test
 9 | .babelrc
10 | .travis.yml
11 | karma.conf.js
12 | build


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 ayou
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/cli-plugin-babel/preset']
3 | }
4 | 


--------------------------------------------------------------------------------
/dev/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <button @click="addNode">Add Node</button>
  4 |     <vue-tree-list
  5 |       @click="onClick"
  6 |       @change-name="onChangeName"
  7 |       @end-edit="onEndEdit"
  8 |       @delete-node="onDel"
  9 |       @add-node="onAddNode"
 10 |       @drop="drop"
 11 |       @drop-before="dropBefore"
 12 |       @drop-after="dropAfter"
 13 |       :model="data"
 14 |       default-tree-node-name="new node"
 15 |       default-leaf-node-name="new leaf"
 16 |       v-bind:default-expanded="false"
 17 |     >
 18 |       <template v-slot:leafNameDisplay="slotProps">
 19 |         <span>
 20 |           {{ slotProps.model.name }} <span class="muted">#{{ slotProps.model.id }}</span>
 21 |         </span>
 22 |       </template>
 23 |       <template v-slot:addTreeNodeIcon="slotProps">
 24 |         <span class="icon">📂</span>
 25 |       </template>
 26 |       <template v-slot:addLeafNodeIcon="slotProps">
 27 |         <span class="icon">＋</span>
 28 |       </template>
 29 |       <template v-slot:editNodeIcon="slotProps">
 30 |         <span class="icon">📃</span>
 31 |       </template>
 32 |       <template v-slot:delNodeIcon="slotProps">
 33 |         <span class="icon">✂️</span>
 34 |       </template>
 35 |       <template v-slot:leafNodeIcon="slotProps">
 36 |         <span class="icon">🍃</span>
 37 |       </template>
 38 |       <template v-slot:treeNodeIcon="slotProps">
 39 |         <span class="icon">
 40 |           {{
 41 |             slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded
 42 |               ? '🌲'
 43 |               : ''
 44 |           }}</span
 45 |         >
 46 |       </template>
 47 |     </vue-tree-list>
 48 |     <button @click="getNewTree">Get new tree</button>
 49 |     <pre>
 50 |       {{ newTree }}
 51 |     </pre>
 52 |   </div>
 53 | </template>
 54 | <script>
 55 | import { VueTreeList, Tree, TreeNode } from '../src'
 56 | export default {
 57 |   components: {
 58 |     VueTreeList
 59 |   },
 60 |   data() {
 61 |     return {
 62 |       newTree: {},
 63 |       data: new Tree([
 64 |         {
 65 |           name: 'Node 1',
 66 |           id: 1,
 67 |           pid: 0,
 68 |           dragDisabled: true,
 69 |           addTreeNodeDisabled: true,
 70 |           addLeafNodeDisabled: true,
 71 |           editNodeDisabled: true,
 72 |           delNodeDisabled: true,
 73 |           children: [
 74 |             {
 75 |               name: 'Node 1-2',
 76 |               id: 2,
 77 |               isLeaf: true,
 78 |               pid: 1
 79 |             }
 80 |           ]
 81 |         },
 82 |         {
 83 |           name: 'Node 2',
 84 |           id: 3,
 85 |           pid: 0,
 86 |           disabled: true
 87 |         },
 88 |         {
 89 |           name: 'Node 3',
 90 |           id: 4,
 91 |           pid: 0
 92 |         }
 93 |       ])
 94 |     }
 95 |   },
 96 |   methods: {
 97 |     onDel(node) {
 98 |       // eslint-disable-next-line no-console
 99 |       console.log('onDel', node)
100 |       node.remove()
101 |     },
102 |     onEndEdit(params) {
103 |       console.log('onEndEdit', params)
104 |     },
105 | 
106 |     onChangeName(params) {
107 |       // eslint-disable-next-line no-console
108 |       console.log('onChangeName', params)
109 |     },
110 | 
111 |     onAddNode(params) {
112 |       // eslint-disable-next-line no-console
113 |       console.log('onAddNode', params)
114 |     },
115 | 
116 |     onClick(params) {
117 |       // eslint-disable-next-line no-console
118 |       console.log('onClick', params)
119 |     },
120 | 
121 |     drop: function({ node, src, target }) {
122 |       // eslint-disable-next-line no-console
123 |       console.log('drop', node, src, target)
124 |     },
125 | 
126 |     dropBefore: function({ node, src, target }) {
127 |       // eslint-disable-next-line no-console
128 |       console.log('drop-before', node, src, target)
129 |     },
130 | 
131 |     dropAfter: function({ node, src, target }) {
132 |       // eslint-disable-next-line no-console
133 |       console.log('drop-after', node, src, target)
134 |     },
135 | 
136 |     addNode() {
137 |       var node = new TreeNode({ name: 'new node', isLeaf: false })
138 |       if (!this.data.children) this.data.children = []
139 |       this.data.addChildren(node)
140 |     },
141 | 
142 |     getNewTree() {
143 |       var vm = this
144 |       function _dfs(oldNode) {
145 |         var newNode = {}
146 | 
147 |         for (var k in oldNode) {
148 |           if (k !== 'children' && k !== 'parent') {
149 |             newNode[k] = oldNode[k]
150 |           }
151 |         }
152 | 
153 |         if (oldNode.children && oldNode.children.length > 0) {
154 |           newNode.children = []
155 |           for (var i = 0, len = oldNode.children.length; i < len; i++) {
156 |             newNode.children.push(_dfs(oldNode.children[i]))
157 |           }
158 |         }
159 |         return newNode
160 |       }
161 | 
162 |       vm.newTree = _dfs(vm.data)
163 |     }
164 |   }
165 | }
166 | </script>
167 | <style lang="less" rel="stylesheet/less">
168 | .vtl {
169 |   .vtl-drag-disabled {
170 |     background-color: #d0cfcf;
171 |     &:hover {
172 |       background-color: #d0cfcf;
173 |     }
174 |   }
175 |   .vtl-disabled {
176 |     background-color: #d0cfcf;
177 |   }
178 | }
179 | </style>
180 | 
181 | <style lang="less" rel="stylesheet/less" scoped>
182 | .icon {
183 |   &:hover {
184 |     cursor: pointer;
185 |   }
186 | }
187 | 
188 | .muted {
189 |   color: gray;
190 |   font-size: 80%;
191 | }
192 | </style>
193 | 


--------------------------------------------------------------------------------
/dev/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by ayou on 18/3/7.
 3 |  */
 4 | import Vue from 'vue'
 5 | import App from './App.vue'
 6 | 
 7 | new Vue({
 8 |   render: h => h(App)
 9 | }).$mount('#app')
10 | 


--------------------------------------------------------------------------------
/examples/demo1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="with=device-width,initial-scale=1.0,
  6 |       maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
  7 |     <title>vue-tree</title>
  8 |     <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  9 |     <link href="https://cdn.bootcss.com/bulma/0.4.2/css/bulma.min.css" rel="stylesheet">
 10 |     <style>
 11 |         html {
 12 |           min-height: 100%;
 13 |           background: linear-gradient(to bottom right, #00ebcb, #dafffa)
 14 |         }
 15 | 
 16 | 
 17 |         .container {
 18 |           background-color: #fff;
 19 |           border-radius: 5px;
 20 |           box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1);
 21 |           padding: 1.25rem;
 22 |           max-width: 1024px !important;
 23 |           background-color: #fff;
 24 |           margin: 1rem auto 0 auto;
 25 |         }
 26 | 
 27 |         .wrapper {
 28 |             min-height: 100vh;
 29 |             padding: 0 0.5rem;
 30 |         }
 31 | 
 32 |         @media screen and (min-width: 768px) {
 33 |             .control:not(:last-child) {
 34 |                 margin-bottom: 0.2rem;
 35 |             }
 36 | 
 37 |             .is-full {
 38 |                 flex: 1;
 39 |             }
 40 | 
 41 |             .is-horizontal {
 42 |                 display: flex;
 43 |                 align-items: center;
 44 |             }
 45 | 
 46 |             .label {
 47 |                 margin-right: 1rem;
 48 |             }
 49 |         }
 50 | 
 51 | 
 52 | 
 53 |         @media all and (max-width: 375px) {
 54 |             .calendar-wrapper {
 55 |                 width: 120%;
 56 |                 max-width: 120%;
 57 |                 left: 50%;
 58 |                 transform: translateX(-50%);
 59 |             }
 60 |         }
 61 | 
 62 |         .vtl .vtl-drag-disabled, .vtl .vtl-drag-disabled:hover {
 63 |           background-color: #dbd7d7;
 64 |           position: relative;
 65 |         }
 66 | 
 67 |         .vtl .vtl-drag-disabled::after, .vtl .vtl-disabled::after {
 68 |           content: 'drag disabled';
 69 |           position: absolute;
 70 |           right: 10px;
 71 |           font-size: 12px;
 72 |           font-style: italic;
 73 |         }
 74 | 
 75 |         .vtl .vtl-disabled, .vtl .vtl-disabled:hover {
 76 |           background-color: red;
 77 |           position: relative;
 78 |         }
 79 | 
 80 |         .vtl .vtl-disabled::after {
 81 |           content: 'disabled';
 82 |         }
 83 |     </style>
 84 | </head>
 85 | <body>
 86 | <div id="app" :style="`padding-top: ${isMobile ? 0.5 : 3}rem;`" class="wrapper is-fullwidth">
 87 |     <a href="https://github.com/ParadeTo/vue-tree">
 88 |         <h1 class="has-text-centered title is-1" v-if="!isMobile" style="margin-bottom: 0.5rem;">
 89 |             <img style="width: 3rem; vertical-align: middle;"
 90 |                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd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"
 91 |                  alt="">
 92 |             vue-tree
 93 |         </h1>
 94 |     </a>
 95 |     <div class="container">
 96 |         <button class="button is-primary is-small" @click="addNode">
 97 |             <span class="icon is-small" style="margin-right: 2px;">
 98 |                 <i class="fa fa-plus-circle"></i>
 99 |             </span>
100 |             New Treenode
101 |         </button>
102 |         <vue-tree-list @click="onClick" :model="data" default-tree-node-name="new node" default-leaf-node-name="new leaf"></vue-tree-list>
103 |     </div>
104 | 
105 |     <div class="container">
106 |       <div class="has-text-centered" style="margin-bottom: 1rem">
107 |         <button class="button is-primary" type="button" name="button" @click="getNewTree">Get New Tree</button>
108 |       </div>
109 |       <pre>
110 |         {{newTree}}
111 |       </pre>
112 |     </div>
113 | </div>
114 | 
115 | <script src="https://unpkg.com/vue/dist/vue.js"></script>
116 | <script src="../dist/vue-tree-list.min.js"></script>
117 | <script>
118 |   function isMobile() {
119 |     var sUserAgent = navigator.userAgent.toLowerCase();
120 | 
121 |     var bIsIpad = /ipad/i.test(sUserAgent);
122 |     var bIsIphoneOs = /iphone os/i.test(sUserAgent);
123 |     var bIsMidp = /midp/i.test(sUserAgent);
124 |     var bIsUc7 = /rv:1.2.3.4/i.test(sUserAgent);
125 |     var bIsUc = /ucweb/i.test(sUserAgent);
126 |     var bIsAndroid = /android/i.test(sUserAgent);
127 |     var bIsCE = /windows ce/i.test(sUserAgent);
128 |     var bIsWM = /windows mobile/i.test(sUserAgent);
129 |     var bIsWx = /MicroMessenger/i.test(sUserAgent);
130 |     if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM || bIsWx) {
131 |       return true;
132 |     }
133 |     return false;
134 |   }
135 | 
136 |   new Vue({
137 |     el: '#app',
138 |     components: {
139 |       'VueTreeList': VueTreeList.VueTreeList
140 |     },
141 |     data () {
142 |       return {
143 |         isMobile: isMobile(),
144 |         record: null,
145 |         newTree: {},
146 |         data: new VueTreeList.Tree([
147 |           {
148 |             name: 'Node 1',
149 |             id: 1,
150 |             pid: 0,
151 |             dragDisabled: true,
152 |             children: [
153 |               {
154 |                 name: 'Node 1-2',
155 |                 id: 2,
156 |                 isLeaf: true,
157 |                 pid: 1
158 |               }
159 |             ]
160 |           },
161 |           {
162 |             name: 'Node 2',
163 |             id: 3,
164 |             pid: 0,
165 |             disabled: true
166 |           },
167 |           {
168 |             name: 'Node 3',
169 |             id: 4,
170 |             pid: 0
171 |           }
172 |         ])
173 |       }
174 |     },
175 |     methods: {
176 |       getTreeChange: function () {
177 |         this.record = Object.assign({}, VueTreeList.Record)
178 |       },
179 | 
180 |       addNode: function () {
181 |         var node = new VueTreeList.TreeNode({ name: 'new node', isLeaf: false })
182 |         if (!this.data.children) this.data.children = []
183 |         this.data.addChildren(node)
184 |       },
185 | 
186 |       getNewTree: function () {
187 |         var vm = this
188 |         function _dfs (oldNode) {
189 |           var newNode = {}
190 | 
191 |           for (var k in oldNode) {
192 |             if (k !== 'children' && k !== 'parent') {
193 |               newNode[k] = oldNode[k]
194 |             }
195 |           }
196 | 
197 |           if (oldNode.children && oldNode.children.length > 0) {
198 |             newNode.children = []
199 |             for (var i = 0, len = oldNode.children.length; i < len; i++) {
200 |               newNode.children.push(_dfs(oldNode.children[i]))
201 |             }
202 |           }
203 |           return newNode
204 |         }
205 | 
206 |         vm.newTree = _dfs(vm.data)
207 |       },
208 | 
209 |       onClick(model) {
210 |         console.log(model)
211 |       }
212 |     }
213 |   })
214 | </script>
215 | </body>
216 | </html>
217 | 


--------------------------------------------------------------------------------
/examples/img/08 usher plus.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ParadeTo/vue-tree-list/727ab3a69c070389e79410dc1750bcdcec1039fc/examples/img/08 usher plus.png


--------------------------------------------------------------------------------
/examples/img/edit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ParadeTo/vue-tree-list/727ab3a69c070389e79410dc1750bcdcec1039fc/examples/img/edit.png


--------------------------------------------------------------------------------
/examples/img/group-add.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ParadeTo/vue-tree-list/727ab3a69c070389e79410dc1750bcdcec1039fc/examples/img/group-add.png


--------------------------------------------------------------------------------
/examples/img/group.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ParadeTo/vue-tree-list/727ab3a69c070389e79410dc1750bcdcec1039fc/examples/img/group.png


--------------------------------------------------------------------------------
/examples/img/personal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ParadeTo/vue-tree-list/727ab3a69c070389e79410dc1750bcdcec1039fc/examples/img/personal.png


--------------------------------------------------------------------------------
/examples/img/trash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ParadeTo/vue-tree-list/727ab3a69c070389e79410dc1750bcdcec1039fc/examples/img/trash.png


--------------------------------------------------------------------------------
/img/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ParadeTo/vue-tree-list/727ab3a69c070389e79410dc1750bcdcec1039fc/img/demo.gif


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   preset: '@vue/cli-plugin-unit-jest',
3 |   snapshotSerializers: ['jest-serializer-vue'],
4 |   collectCoverageFrom: ['src/**/*.{js,vue}'],
5 |   coveragePathIgnorePatterns: ['src/index.js']
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-tree-list",
 3 |   "version": "1.5.0",
 4 |   "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
 5 |   "author": "ayou",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve dev",
 8 |     "build": "vue-cli-service build --target lib src/index.js",
 9 |     "test:unit": "vue-cli-service test:unit --watch",
10 |     "test:coverage": "vue-cli-service test:unit --coverage",
11 |     "lint": "vue-cli-service lint",
12 |     "lint-staged": "lint-staged",
13 |     "commit": "git-cz",
14 |     "prepublish": "npm run build"
15 |   },
16 |   "main": "dist/vue-tree-list.umd.min.js",
17 |   "dependencies": {},
18 |   "devDependencies": {
19 |     "@vue/cli-plugin-babel": "^4.1.0",
20 |     "@vue/cli-plugin-eslint": "^4.1.0",
21 |     "@vue/cli-plugin-unit-jest": "^4.1.1",
22 |     "@vue/cli-service": "^4.1.0",
23 |     "@vue/test-utils": "1.0.0-beta.29",
24 |     "babel-eslint": "^10.0.3",
25 |     "core-js": "^3.4.3",
26 |     "eslint": "^5.16.0",
27 |     "eslint-config-prettier": "^6.10.0",
28 |     "eslint-plugin-prettier": "^3.1.2",
29 |     "eslint-plugin-vue": "^5.0.0",
30 |     "git-cz": "^4.7.4",
31 |     "husky": "^4.2.1",
32 |     "jest-serializer-vue": "^2.0.2",
33 |     "less": "^3.10.3",
34 |     "less-loader": "^5.0.0",
35 |     "lint-staged": "^10.0.4",
36 |     "prettier": "^1.19.1",
37 |     "prettier-eslint-cli": "^5.0.0",
38 |     "vue": "^2.6.10",
39 |     "vue-template-compiler": "^2.6.10"
40 |   },
41 |   "lint-staged": {
42 |     "**/*.{js,json,md,vue}": [
43 |       "prettier --write"
44 |     ]
45 |   },
46 |   "browserslist": [
47 |     "> 1%",
48 |     "last 2 versions"
49 |   ],
50 |   "bugs": {
51 |     "url": "https://github.com/ParadeTo/vue-tree-list/issues"
52 |   },
53 |   "homepage": "https://github.com/ParadeTo/vue-tree-list#readme",
54 |   "keywords": [
55 |     "vue",
56 |     "tree"
57 |   ],
58 |   "license": "ISC",
59 |   "repository": {
60 |     "type": "git",
61 |     "url": "git+https://github.com/ParadeTo/vue-tree-list.git"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   printWidth: 100,
 3 |   tabWidth: 2,
 4 |   useTabs: false,
 5 |   semi: false,
 6 |   singleQuote: true,
 7 |   jsxSingleQuote: true,
 8 |   bracketSpacing: true,
 9 |   jsxBracketSameLine: false,
10 |   rangeStart: 0,
11 |   rangeEnd: Infinity,
12 |   requirePragma: false,
13 |   insertPragma: false,
14 |   htmlWhitespaceSensitivity: 'css'
15 | }
16 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-tree-list</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-tree-list doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | [![Actions Status](https://github.com/ParadeTo/vue-tree-list/workflows/Test/badge.svg)](https://github.com/ParadeTo/vue-tree-list/actions)
  2 | 
  3 | # vue-tree-list
  4 | 
  5 | A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.
  6 | 
  7 | ![vue-tree-demo.gif](https://raw.githubusercontent.com/ParadeTo/vue-tree-list/master/img/demo.gif)
  8 | 
  9 | [Live Demo](http://paradeto.com/vue-tree-list/)
 10 | 
 11 | # install
 12 | 
 13 | Install the plugin then you can use the component globally.
 14 | 
 15 | ```js
 16 | import Vue from 'vue'
 17 | import VueTreeList from 'vue-tree-list'
 18 | 
 19 | Vue.use(VueTreeList)
 20 | ```
 21 | 
 22 | Or just register locally like the example below.
 23 | 
 24 | # use
 25 | 
 26 | `npm install vue-tree-list`
 27 | 
 28 | ```html
 29 | <template>
 30 |   <div>
 31 |     <button @click="addNode">Add Node</button>
 32 |     <vue-tree-list
 33 |       @click="onClick"
 34 |       @change-name="onChangeName"
 35 |       @delete-node="onDel"
 36 |       @add-node="onAddNode"
 37 |       :model="data"
 38 |       default-tree-node-name="new node"
 39 |       default-leaf-node-name="new leaf"
 40 |       v-bind:default-expanded="false"
 41 |     >
 42 |       <template v-slot:leafNameDisplay="slotProps">
 43 |         <span>
 44 |           {{ slotProps.model.name }} <span class="muted">#{{ slotProps.model.id }}</span>
 45 |         </span>
 46 |       </template>
 47 |       <span class="icon" slot="addTreeNodeIcon">📂</span>
 48 |       <span class="icon" slot="addLeafNodeIcon">＋</span>
 49 |       <span class="icon" slot="editNodeIcon">📃</span>
 50 |       <span class="icon" slot="delNodeIcon">✂️</span>
 51 |       <span class="icon" slot="leafNodeIcon">🍃</span>
 52 |       <span class="icon" slot="treeNodeIcon">🌲</span>
 53 |     </vue-tree-list>
 54 |     <button @click="getNewTree">Get new tree</button>
 55 |     <pre>
 56 |       {{newTree}}
 57 |     </pre>
 58 |   </div>
 59 | </template>
 60 | 
 61 | <script>
 62 |   import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
 63 |   export default {
 64 |     components: {
 65 |       VueTreeList
 66 |     },
 67 |     data() {
 68 |       return {
 69 |         newTree: {},
 70 |         data: new Tree([
 71 |           {
 72 |             name: 'Node 1',
 73 |             id: 1,
 74 |             pid: 0,
 75 |             dragDisabled: true,
 76 |             addTreeNodeDisabled: true,
 77 |             addLeafNodeDisabled: true,
 78 |             editNodeDisabled: true,
 79 |             delNodeDisabled: true,
 80 |             children: [
 81 |               {
 82 |                 name: 'Node 1-2',
 83 |                 id: 2,
 84 |                 isLeaf: true,
 85 |                 pid: 1
 86 |               }
 87 |             ]
 88 |           },
 89 |           {
 90 |             name: 'Node 2',
 91 |             id: 3,
 92 |             pid: 0,
 93 |             disabled: true
 94 |           },
 95 |           {
 96 |             name: 'Node 3',
 97 |             id: 4,
 98 |             pid: 0
 99 |           }
100 |         ])
101 |       }
102 |     },
103 |     methods: {
104 |       onDel(node) {
105 |         console.log(node)
106 |         node.remove()
107 |       },
108 | 
109 |       onChangeName(params) {
110 |         console.log(params)
111 |       },
112 | 
113 |       onAddNode(params) {
114 |         console.log(params)
115 |       },
116 | 
117 |       onClick(params) {
118 |         console.log(params)
119 |       },
120 | 
121 |       addNode() {
122 |         var node = new TreeNode({ name: 'new node', isLeaf: false })
123 |         if (!this.data.children) this.data.children = []
124 |         this.data.addChildren(node)
125 |       },
126 | 
127 |       getNewTree() {
128 |         var vm = this
129 |         function _dfs(oldNode) {
130 |           var newNode = {}
131 | 
132 |           for (var k in oldNode) {
133 |             if (k !== 'children' && k !== 'parent') {
134 |               newNode[k] = oldNode[k]
135 |             }
136 |           }
137 | 
138 |           if (oldNode.children && oldNode.children.length > 0) {
139 |             newNode.children = []
140 |             for (var i = 0, len = oldNode.children.length; i < len; i++) {
141 |               newNode.children.push(_dfs(oldNode.children[i]))
142 |             }
143 |           }
144 |           return newNode
145 |         }
146 | 
147 |         vm.newTree = _dfs(vm.data)
148 |       }
149 |     }
150 |   }
151 | </script>
152 | 
153 | <style lang="less" rel="stylesheet/less">
154 |   .vtl {
155 |     .vtl-drag-disabled {
156 |       background-color: #d0cfcf;
157 |       &:hover {
158 |         background-color: #d0cfcf;
159 |       }
160 |     }
161 |     .vtl-disabled {
162 |       background-color: #d0cfcf;
163 |     }
164 |   }
165 | </style>
166 | 
167 | <style lang="less" rel="stylesheet/less" scoped>
168 |   .icon {
169 |     &:hover {
170 |       cursor: pointer;
171 |     }
172 |   }
173 | 
174 |   .muted {
175 |     color: gray;
176 |     font-size: 80%;
177 |   }
178 | </style>
179 | ```
180 | 
181 | # props
182 | 
183 | ## props of vue-tree-list
184 | 
185 | |          name          |   type   |    default    |                                         description                                         |
186 | | :--------------------: | :------: | :-----------: | :-----------------------------------------------------------------------------------------: |
187 | |         model          | TreeNode |       -       | You can use `const head = new Tree([])` to generate a tree with the head of `TreeNode` type |
188 | | default-tree-node-name |  string  | New node node |                                Default name for new treenode                                |
189 | | default-leaf-node-name |  string  | New leaf node |                                Default name for new leafnode                                |
190 | |    default-expanded    | boolean  |     true      |                                   Tree is expanded or not                                   |
191 | 
192 | ## props of TreeNode
193 | 
194 | ### attributes
195 | 
196 | |        name         |      type      |      default      |           description            |
197 | | :-----------------: | :------------: | :---------------: | :------------------------------: |
198 | |         id          | string, number | current timestamp |          The node's id           |
199 | |       isLeaf        |    boolean     |       false       |     The node is leaf or not      |
200 | |    dragDisabled     |    boolean     |       false       |    Forbid dragging tree node     |
201 | | addTreeNodeDisabled |    boolean     |       false       | Show `addTreeNode` button or not |
202 | | addLeafNodeDisabled |    boolean     |       false       | Show `addLeafNode` button or not |
203 | |  editNodeDisabled   |    boolean     |       false       |  Show `editNode` button or not   |
204 | |   delNodeDisabled   |    boolean     |       false       |   Show `delNode` button or not   |
205 | |      children       |     array      |       null        |       The children of node       |
206 | 
207 | ### methods
208 | 
209 | |     name     |         params          |          description          |
210 | | :----------: | :---------------------: | :---------------------------: |
211 | |  changeName  |          name           |      Change node's name       |
212 | | addChildren  | children: object, array |     Add children to node      |
213 | |    remove    |            -            |   Remove node from the tree   |
214 | |   moveInto   |    target: TreeNode     |  Move node into another node  |
215 | | insertBefore |    target: TreeNode     | Move node before another node |
216 | | insertAfter  |    target: TreeNode     | Move node after another node  |
217 | 
218 | # events
219 | 
220 | |    name     |            params            |                                                                           description                                                                           |
221 | | :---------: | :--------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------: |
222 | |    click    |           TreeNode           |                                Trigger when clicking a tree node. You can call `toggle` of `TreeNode` to toggle the folder node.                                |
223 | | change-name | {'id', 'oldName', 'newName'} |                                                              Trigger after changing a node's name                                                               |
224 | | delete-node |           TreeNode           |                                 Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node.                                 |
225 | |  add-node   |           TreeNode           |                                                                 Trigger after adding a new node                                                                 |
226 | |    drop     |     {node, src, target}      |   Trigger after dropping a node into another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop into   |
227 | | drop-before |     {node, src, target}      | Trigger after dropping a node before another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop before |
228 | | drop-after  |     {node, src, target}      |  Trigger after dropping a node after another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop after  |
229 | 
230 | # customize operation icons
231 | 
232 | The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them and can access `model`, `root`, `expanded` as below:
233 | 
234 | ```html
235 | <template v-slot:leafNameDisplay="slotProps">
236 |   <span>{{ slotProps.model.name }} #{{ slotProps.model.id }}</span>
237 | </template>
238 | <template v-slot:addTreeNodeIcon="slotProps">
239 |   <span class="icon">📂</span>
240 | </template>
241 | <template v-slot:addLeafNodeIcon="slotProps">
242 |   <span class="icon">＋</span>
243 | </template>
244 | <template v-slot:editNodeIcon="slotProps">
245 |   <span class="icon">📃</span>
246 | </template>
247 | <template v-slot:delNodeIcon="slotProps">
248 |   <span class="icon">✂️</span>
249 | </template>
250 | <template v-slot:leafNodeIcon="slotProps">
251 |   <span class="icon">🍃</span>
252 | </template>
253 | <template v-slot:treeNodeIcon="slotProps">
254 |   <span class="icon">
255 |     {{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ?
256 |     '🌲' : '' }}</span
257 |   >
258 | </template>
259 | ```
260 | 


--------------------------------------------------------------------------------
/src/Tree.js:
--------------------------------------------------------------------------------
  1 | import { traverseTree } from './tools'
  2 | /**
  3 |  * Tree data struct
  4 |  * Created by ayou on 2017/7/20.
  5 |  * @param data: treenode's params
  6 |  *   name: treenode's name
  7 |  *   isLeaf: treenode is leaf node or not
  8 |  *   id: id
  9 |  *   dragDisabled: decide if it can be dragged
 10 |  *   disabled: desabled all operation
 11 |  */
 12 | export class TreeNode {
 13 |   constructor(data) {
 14 |     const { id, isLeaf } = data
 15 |     this.id = typeof id === 'undefined' ? new Date().valueOf() : id
 16 |     this.parent = null
 17 |     this.children = null
 18 |     this.isLeaf = !!isLeaf
 19 | 
 20 |     // other params
 21 |     for (var k in data) {
 22 |       if (k !== 'id' && k !== 'children' && k !== 'isLeaf') {
 23 |         this[k] = data[k]
 24 |       }
 25 |     }
 26 |   }
 27 | 
 28 |   changeName(name) {
 29 |     this.name = name
 30 |   }
 31 | 
 32 |   addChildren(children) {
 33 |     if (!this.children) {
 34 |       this.children = []
 35 |     }
 36 | 
 37 |     if (Array.isArray(children)) {
 38 |       for (let i = 0, len = children.length; i < len; i++) {
 39 |         const child = children[i]
 40 |         child.parent = this
 41 |         child.pid = this.id
 42 |       }
 43 |       this.children.concat(children)
 44 |     } else {
 45 |       const child = children
 46 |       child.parent = this
 47 |       child.pid = this.id
 48 |       this.children.push(child)
 49 |     }
 50 |   }
 51 | 
 52 |   // remove self
 53 |   remove() {
 54 |     const parent = this.parent
 55 |     const index = parent.findChildIndex(this)
 56 |     parent.children.splice(index, 1)
 57 |   }
 58 | 
 59 |   // remove child
 60 |   _removeChild(child) {
 61 |     for (var i = 0, len = this.children.length; i < len; i++) {
 62 |       if (this.children[i] === child) {
 63 |         this.children.splice(i, 1)
 64 |         break
 65 |       }
 66 |     }
 67 |   }
 68 | 
 69 |   isTargetChild(target) {
 70 |     let parent = target.parent
 71 |     while (parent) {
 72 |       if (parent === this) {
 73 |         return true
 74 |       }
 75 |       parent = parent.parent
 76 |     }
 77 |     return false
 78 |   }
 79 | 
 80 |   moveInto(target) {
 81 |     if (this.name === 'root' || this === target) {
 82 |       return
 83 |     }
 84 | 
 85 |     // cannot move ancestor to child
 86 |     if (this.isTargetChild(target)) {
 87 |       return
 88 |     }
 89 | 
 90 |     // cannot move to leaf node
 91 |     if (target.isLeaf) {
 92 |       return
 93 |     }
 94 | 
 95 |     this.parent._removeChild(this)
 96 |     this.parent = target
 97 |     this.pid = target.id
 98 |     if (!target.children) {
 99 |       target.children = []
100 |     }
101 |     target.children.unshift(this)
102 |   }
103 | 
104 |   findChildIndex(child) {
105 |     var index
106 |     for (let i = 0, len = this.children.length; i < len; i++) {
107 |       if (this.children[i] === child) {
108 |         index = i
109 |         break
110 |       }
111 |     }
112 |     return index
113 |   }
114 | 
115 |   _canInsert(target) {
116 |     if (this.name === 'root' || this === target) {
117 |       return false
118 |     }
119 | 
120 |     // cannot insert ancestor to child
121 |     if (this.isTargetChild(target)) {
122 |       return false
123 |     }
124 | 
125 |     this.parent._removeChild(this)
126 |     this.parent = target.parent
127 |     this.pid = target.parent.id
128 |     return true
129 |   }
130 | 
131 |   insertBefore(target) {
132 |     if (!this._canInsert(target)) return
133 | 
134 |     const pos = target.parent.findChildIndex(target)
135 |     target.parent.children.splice(pos, 0, this)
136 |   }
137 | 
138 |   insertAfter(target) {
139 |     if (!this._canInsert(target)) return
140 | 
141 |     const pos = target.parent.findChildIndex(target)
142 |     target.parent.children.splice(pos + 1, 0, this)
143 |   }
144 | 
145 |   toString() {
146 |     return JSON.stringify(traverseTree(this))
147 |   }
148 | }
149 | 
150 | export class Tree {
151 |   constructor(data) {
152 |     this.root = new TreeNode({ name: 'root', isLeaf: false, id: 0 })
153 |     this.initNode(this.root, data)
154 |     return this.root
155 |   }
156 | 
157 |   initNode(node, data) {
158 |     for (let i = 0, len = data.length; i < len; i++) {
159 |       var _data = data[i]
160 | 
161 |       var child = new TreeNode(_data)
162 |       if (_data.children && _data.children.length > 0) {
163 |         this.initNode(child, _data.children)
164 |       }
165 |       node.addChildren(child)
166 |     }
167 |   }
168 | }
169 | 


--------------------------------------------------------------------------------
/src/VueTreeList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vtl">
  3 |     <div
  4 |       v-if="model.name !== 'root'"
  5 |       :id="model.id"
  6 |       class="vtl-node"
  7 |       :class="{ 'vtl-leaf-node': model.isLeaf, 'vtl-tree-node': !model.isLeaf }"
  8 |     >
  9 |       <div
 10 |         class="vtl-border vtl-up"
 11 |         :class="{ 'vtl-active': isDragEnterUp }"
 12 |         @drop="dropBefore"
 13 |         @dragenter="dragEnterUp"
 14 |         @dragover="dragOverUp"
 15 |         @dragleave="dragLeaveUp"
 16 |       />
 17 |       <div
 18 |         :class="treeNodeClass"
 19 |         :draggable="!model.dragDisabled"
 20 |         @dragstart="dragStart"
 21 |         @dragover="dragOver"
 22 |         @dragenter="dragEnter"
 23 |         @dragleave="dragLeave"
 24 |         @drop="drop"
 25 |         @dragend="dragEnd"
 26 |         @mouseover="mouseOver"
 27 |         @mouseout="mouseOut"
 28 |         @click.stop="click"
 29 |       >
 30 |         <span class="vtl-caret vtl-is-small" v-if="model.children && model.children.length > 0">
 31 |           <i class="vtl-icon" :class="caretClass" @click.prevent.stop="toggle"></i>
 32 |         </span>
 33 | 
 34 |         <span v-if="model.isLeaf">
 35 |           <slot name="leafNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
 36 |             <i class="vtl-icon vtl-menu-icon vtl-icon-file"></i>
 37 |           </slot>
 38 |         </span>
 39 |         <span v-else>
 40 |           <slot name="treeNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
 41 |             <i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i>
 42 |           </slot>
 43 |         </span>
 44 | 
 45 |         <div class="vtl-node-content" v-if="!editable">
 46 |           <slot name="leafNameDisplay" :expanded="expanded" :model="model" :root="rootNode">
 47 |             {{ model.name }}
 48 |           </slot>
 49 |         </div>
 50 |         <input
 51 |           v-else
 52 |           class="vtl-input"
 53 |           type="text"
 54 |           ref="nodeInput"
 55 |           :value="model.name"
 56 |           @input="updateName"
 57 |           @blur="setUnEditable"
 58 |           @keyup.enter="setUnEditable"
 59 |         />
 60 |         <div class="vtl-operation" v-show="isHover">
 61 |           <span
 62 |             :title="defaultAddTreeNodeTitle"
 63 |             @click.stop.prevent="addChild(false)"
 64 |             v-if="!model.isLeaf && !model.addTreeNodeDisabled"
 65 |           >
 66 |             <slot name="addTreeNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
 67 |               <i class="vtl-icon vtl-icon-folder-plus-e"></i>
 68 |             </slot>
 69 |           </span>
 70 |           <span
 71 |             :title="defaultAddLeafNodeTitle"
 72 |             @click.stop.prevent="addChild(true)"
 73 |             v-if="!model.isLeaf && !model.addLeafNodeDisabled"
 74 |           >
 75 |             <slot name="addLeafNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
 76 |               <i class="vtl-icon vtl-icon-plus"></i>
 77 |             </slot>
 78 |           </span>
 79 |           <span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
 80 |             <slot name="editNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
 81 |               <i class="vtl-icon vtl-icon-edit"></i>
 82 |             </slot>
 83 |           </span>
 84 |           <span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
 85 |             <slot name="delNodeIcon" :expanded="expanded" :model="model" :root="rootNode">
 86 |               <i class="vtl-icon vtl-icon-trash"></i>
 87 |             </slot>
 88 |           </span>
 89 |         </div>
 90 |       </div>
 91 | 
 92 |       <div
 93 |         v-if="model.children && model.children.length > 0 && expanded"
 94 |         class="vtl-border vtl-bottom"
 95 |         :class="{ 'vtl-active': isDragEnterBottom }"
 96 |         @drop="dropAfter"
 97 |         @dragenter="dragEnterBottom"
 98 |         @dragover="dragOverBottom"
 99 |         @dragleave="dragLeaveBottom"
100 |       ></div>
101 |     </div>
102 | 
103 |     <div
104 |       :class="{ 'vtl-tree-margin': model.name !== 'root' }"
105 |       v-show="model.name === 'root' || expanded"
106 |       v-if="isFolder"
107 |     >
108 |       <item
109 |         v-for="model in model.children"
110 |         :default-tree-node-name="defaultTreeNodeName"
111 |         :default-leaf-node-name="defaultLeafNodeName"
112 |         :default-expanded="defaultExpanded"
113 |         :model="model"
114 |         :key="model.id"
115 |       >
116 |         <template v-slot:leafNameDisplay="slotProps">
117 |           <slot name="leafNameDisplay" v-bind="slotProps" />
118 |         </template>
119 |         <template v-slot:addTreeNodeIcon="slotProps">
120 |           <slot name="addTreeNodeIcon" v-bind="slotProps" />
121 |         </template>
122 |         <template v-slot:addLeafNodeIcon="slotProps">
123 |           <slot name="addLeafNodeIcon" v-bind="slotProps" />
124 |         </template>
125 |         <template v-slot:editNodeIcon="slotProps">
126 |           <slot name="editNodeIcon" v-bind="slotProps" />
127 |         </template>
128 |         <template v-slot:delNodeIcon="slotProps">
129 |           <slot name="delNodeIcon" v-bind="slotProps" />
130 |         </template>
131 |         <template v-slot:leafNodeIcon="slotProps">
132 |           <slot name="leafNodeIcon" v-bind="slotProps" />
133 |         </template>
134 |         <template v-slot:treeNodeIcon="slotProps">
135 |           <slot name="treeNodeIcon" v-bind="slotProps" />
136 |         </template>
137 |       </item>
138 |     </div>
139 |   </div>
140 | </template>
141 | 
142 | <script>
143 | import { TreeNode } from './Tree.js'
144 | import { removeHandler } from './tools.js'
145 | 
146 | let compInOperation = null
147 | 
148 | export default {
149 |   name: 'vue-tree-list',
150 |   data: function() {
151 |     return {
152 |       isHover: false,
153 |       editable: false,
154 |       isDragEnterUp: false,
155 |       isDragEnterBottom: false,
156 |       isDragEnterNode: false,
157 |       expanded: this.defaultExpanded
158 |     }
159 |   },
160 |   props: {
161 |     model: {
162 |       type: Object
163 |     },
164 |     defaultLeafNodeName: {
165 |       type: String,
166 |       default: 'Leaf Node'
167 |     },
168 |     defaultTreeNodeName: {
169 |       type: String,
170 |       default: 'Tree Node'
171 |     },
172 |     defaultAddTreeNodeTitle: {
173 |       type: String,
174 |       default: 'Add Tree Node'
175 |     },
176 |     defaultAddLeafNodeTitle: {
177 |       type: String,
178 |       default: 'Add Leaf Node'
179 |     },
180 |     defaultExpanded: {
181 |       type: Boolean,
182 |       default: true
183 |     }
184 |   },
185 |   computed: {
186 |     rootNode() {
187 |       var node = this.$parent
188 |       while (node._props.model.name !== 'root') {
189 |         node = node.$parent
190 |       }
191 |       return node
192 |     },
193 | 
194 |     caretClass() {
195 |       return this.expanded ? 'vtl-icon-caret-down' : 'vtl-icon-caret-right'
196 |     },
197 | 
198 |     isFolder() {
199 |       return this.model.children && this.model.children.length
200 |     },
201 | 
202 |     treeNodeClass() {
203 |       const {
204 |         model: { dragDisabled, disabled },
205 |         isDragEnterNode
206 |       } = this
207 | 
208 |       return {
209 |         'vtl-node-main': true,
210 |         'vtl-active': isDragEnterNode,
211 |         'vtl-drag-disabled': dragDisabled,
212 |         'vtl-disabled': disabled
213 |       }
214 |     }
215 |   },
216 |   beforeCreate() {
217 |     this.$options.components.item = require('./VueTreeList').default
218 |   },
219 |   beforeDestroy() {
220 |     removeHandler(window, 'keyup')
221 |   },
222 |   methods: {
223 |     updateName(e) {
224 |       var oldName = this.model.name
225 |       this.model.changeName(e.target.value)
226 |       // eslint-disable-next-line no-console
227 |       console.log('update Name')
228 |       this.rootNode.$emit('change-name', {
229 |         id: this.model.id,
230 |         oldName: oldName,
231 |         newName: e.target.value,
232 |         node: this.model
233 |       })
234 |     },
235 | 
236 |     delNode() {
237 |       this.rootNode.$emit('delete-node', this.model)
238 |     },
239 | 
240 |     setEditable() {
241 |       this.editable = true
242 |       this.$nextTick(() => {
243 |         const $input = this.$refs.nodeInput
244 |         $input.focus()
245 |         $input.setSelectionRange(0, $input.value.length)
246 |       })
247 |     },
248 | 
249 |     setUnEditable(e) {
250 |       if (this.editable === false) return
251 |       this.editable = false
252 |       var oldName = this.model.name
253 |       this.model.changeName(e.target.value)
254 |       this.rootNode.$emit('change-name', {
255 |         id: this.model.id,
256 |         oldName: oldName,
257 |         newName: e.target.value,
258 |         eventType: 'blur'
259 |       })
260 |       this.rootNode.$emit('end-edit', {
261 |         id: this.model.id,
262 |         oldName: oldName,
263 |         newName: e.target.value
264 |       })
265 |     },
266 | 
267 |     toggle() {
268 |       if (this.isFolder) {
269 |         this.expanded = !this.expanded
270 |       }
271 |     },
272 | 
273 |     mouseOver() {
274 |       if (this.model.disabled) return
275 |       this.isHover = true
276 |     },
277 | 
278 |     mouseOut() {
279 |       this.isHover = false
280 |     },
281 | 
282 |     click() {
283 |       this.rootNode.$emit('click', {
284 |         toggle: this.toggle,
285 |         ...this.model
286 |       })
287 |     },
288 | 
289 |     addChild(isLeaf) {
290 |       const name = isLeaf ? this.defaultLeafNodeName : this.defaultTreeNodeName
291 |       this.expanded = true
292 |       var node = new TreeNode({ name, isLeaf })
293 |       this.model.addChildren(node, true)
294 |       this.rootNode.$emit('add-node', node)
295 |     },
296 | 
297 |     dragStart(e) {
298 |       if (!(this.model.dragDisabled || this.model.disabled)) {
299 |         compInOperation = this
300 |         // for firefox
301 |         e.dataTransfer.setData('data', 'data')
302 |         e.dataTransfer.effectAllowed = 'move'
303 |         return true
304 |       }
305 |       return false
306 |     },
307 |     dragEnd() {
308 |       compInOperation = null
309 |     },
310 |     dragOver(e) {
311 |       e.preventDefault()
312 |       return true
313 |     },
314 |     dragEnter() {
315 |       if (!compInOperation) return
316 |       if (compInOperation.model.id === this.model.id || !compInOperation || this.model.isLeaf)
317 |         return
318 |       this.isDragEnterNode = true
319 |     },
320 |     dragLeave() {
321 |       this.isDragEnterNode = false
322 |     },
323 |     drop() {
324 |       if (!compInOperation) return
325 |       const oldParent = compInOperation.model.parent
326 |       compInOperation.model.moveInto(this.model)
327 |       this.isDragEnterNode = false
328 |       this.rootNode.$emit('drop', {
329 |         target: this.model,
330 |         node: compInOperation.model,
331 |         src: oldParent
332 |       })
333 |     },
334 | 
335 |     dragEnterUp() {
336 |       if (!compInOperation) return
337 |       this.isDragEnterUp = true
338 |     },
339 |     dragOverUp(e) {
340 |       e.preventDefault()
341 |       return true
342 |     },
343 |     dragLeaveUp() {
344 |       if (!compInOperation) return
345 |       this.isDragEnterUp = false
346 |     },
347 |     dropBefore() {
348 |       if (!compInOperation) return
349 |       const oldParent = compInOperation.model.parent
350 |       compInOperation.model.insertBefore(this.model)
351 |       this.isDragEnterUp = false
352 |       this.rootNode.$emit('drop-before', {
353 |         target: this.model,
354 |         node: compInOperation.model,
355 |         src: oldParent
356 |       })
357 |     },
358 | 
359 |     dragEnterBottom() {
360 |       if (!compInOperation) return
361 |       this.isDragEnterBottom = true
362 |     },
363 |     dragOverBottom(e) {
364 |       e.preventDefault()
365 |       return true
366 |     },
367 |     dragLeaveBottom() {
368 |       if (!compInOperation) return
369 |       this.isDragEnterBottom = false
370 |     },
371 |     dropAfter() {
372 |       if (!compInOperation) return
373 |       const oldParent = compInOperation.model.parent
374 |       compInOperation.model.insertAfter(this.model)
375 |       this.isDragEnterBottom = false
376 |       this.rootNode.$emit('drop-after', {
377 |         target: this.model,
378 |         node: compInOperation.model,
379 |         src: oldParent
380 |       })
381 |     }
382 |   }
383 | }
384 | </script>
385 | 
386 | <style lang="less" rel="stylesheet/less">
387 | @font-face {
388 |   font-family: 'icomoon';
389 |   src: url('fonts/icomoon.eot?ui1hbx');
390 |   src: url('fonts/icomoon.eot?ui1hbx#iefix') format('embedded-opentype'),
391 |     url('fonts/icomoon.ttf?ui1hbx') format('truetype'),
392 |     url('fonts/icomoon.woff?ui1hbx') format('woff'),
393 |     url('fonts/icomoon.svg?ui1hbx#icomoon') format('svg');
394 |   font-weight: normal;
395 |   font-style: normal;
396 | }
397 | 
398 | .vtl-icon {
399 |   /* use !important to prevent issues with browser extensions that change fonts */
400 |   font-family: 'icomoon' !important;
401 |   speak: none;
402 |   font-style: normal;
403 |   font-weight: normal;
404 |   font-variant: normal;
405 |   text-transform: none;
406 |   line-height: 1;
407 | 
408 |   /* Better Font Rendering =========== */
409 |   -webkit-font-smoothing: antialiased;
410 |   -moz-osx-font-smoothing: grayscale;
411 |   &.vtl-menu-icon {
412 |     margin-right: 4px;
413 |     &:hover {
414 |       color: inherit;
415 |     }
416 |   }
417 |   &:hover {
418 |     color: blue;
419 |   }
420 | }
421 | 
422 | .vtl-icon-file:before {
423 |   content: '\e906';
424 | }
425 | .vtl-icon-folder:before {
426 |   content: '\e907';
427 | }
428 | .vtl-icon-caret-down:before {
429 |   content: '\e901';
430 | }
431 | .vtl-icon-caret-right:before {
432 |   content: '\e900';
433 | }
434 | .vtl-icon-edit:before {
435 |   content: '\e902';
436 | }
437 | .vtl-icon-folder-plus-e:before {
438 |   content: '\e903';
439 | }
440 | .vtl-icon-plus:before {
441 |   content: '\e904';
442 | }
443 | .vtl-icon-trash:before {
444 |   content: '\e905';
445 | }
446 | 
447 | .vtl-border {
448 |   height: 5px;
449 |   &.vtl-up {
450 |     margin-top: -5px;
451 |     background-color: transparent;
452 |   }
453 |   &.vtl-bottom {
454 |     background-color: transparent;
455 |   }
456 |   &.vtl-active {
457 |     border-bottom: 3px dashed blue;
458 |     /*background-color: blue;*/
459 |   }
460 | }
461 | 
462 | .vtl-node-main {
463 |   display: flex;
464 |   align-items: center;
465 |   padding: 5px 0 5px 1rem;
466 |   .vtl-input {
467 |     border: none;
468 |     max-width: 150px;
469 |     border-bottom: 1px solid blue;
470 |   }
471 |   &:hover {
472 |     background-color: #f0f0f0;
473 |   }
474 |   &.vtl-active {
475 |     outline: 2px dashed pink;
476 |   }
477 |   .vtl-caret {
478 |     margin-left: -1rem;
479 |   }
480 |   .vtl-operation {
481 |     margin-left: 2rem;
482 |     letter-spacing: 1px;
483 |   }
484 | }
485 | 
486 | .vtl-item {
487 |   cursor: pointer;
488 | }
489 | .vtl-tree-margin {
490 |   margin-left: 2em;
491 | }
492 | </style>
493 | 


--------------------------------------------------------------------------------
/src/fonts/icomoon.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ParadeTo/vue-tree-list/727ab3a69c070389e79410dc1750bcdcec1039fc/src/fonts/icomoon.eot


--------------------------------------------------------------------------------
/src/fonts/icomoon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>Generated by IcoMoon</metadata>
 5 | <defs>
 6 | <font id="icomoon" horiz-adv-x="1024">
 7 | <font-face units-per-em="1024" ascent="960" descent="-64" />
 8 | <missing-glyph horiz-adv-x="1024" />
 9 | <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
10 | <glyph unicode="&#xe900;" glyph-name="caret-down" d="M635.311 448q0-14.848-10.848-25.728l-256-256q-10.848-10.848-25.728-10.848t-25.728 10.848-10.848 25.728v512q0 14.848 10.848 25.728t25.728 10.848 25.728-10.848l256-256q10.848-10.848 10.848-25.728z" />
11 | <glyph unicode="&#xe901;" glyph-name="caret-right" d="M512 301.714q-14.848 0-25.746 10.825l-256 256q-10.825 10.825-10.825 25.746t10.825 25.746 25.746 10.825h512q14.848 0 25.746-10.825t10.825-25.746-10.825-25.746l-256-256q-10.825-10.825-25.746-10.825z" />
12 | <glyph unicode="&#xe902;" glyph-name="edit" d="M816.001 594.256c-11.151 0-20.203-9.053-20.203-20.201v-363.665c0-22.31-18.089-40.402-40.401-40.402h-505.083c-22.318 0-40.405 18.093-40.405 40.402v505.086c0 22.317 18.094 40.401 40.405 40.401h343.46c11.168 0 20.2 9.038 20.2 20.204 0 11.161-9.036 20.201-20.2 20.201h-363.675c-33.483 0-60.612-27.136-60.612-60.61v-545.494c0-33.481 27.13-60.612 60.612-60.612h545.494c33.482 0 60.613 27.133 60.613 60.612v383.877c-0.004 11.148-9.040 20.201-20.205 20.201zM417.158 397.194c7.893-7.868 20.674-7.868 28.572 0l363.068 365.049c7.889 7.894 7.889 20.689 0 28.572-7.89 7.893-20.678 7.893-28.563 0l-363.077-365.035c-7.897-7.891-7.897-20.692 0-28.586z" />
13 | <glyph unicode="&#xe903;" glyph-name="folder-plus-e" d="M946.471 884.169h-548.426l-42.856 51.918c-17.498 21.394-39.525 25.1-46.676 23.629h-230.922c-42.788 0-77.591-34.803-77.591-77.525v-688.284l6.327-39.784h19.857c10.467-7.603 23.121-11.751 36.469-11.751h509.37v65.392h-494.433l-12.194-1.020v675.448c0 6.704 5.486 12.133 12.194 12.133l227.025 0.256 43.551-52.108c6.96-11.43 22.799-23.693 46.424-23.693h551.88c6.709 0 12.133-5.49 12.133-12.198v-202.19h65.397v202.189c0 42.787-34.803 77.589-77.529 77.589zM988.451 391.215h-142.197v142.197c0 19.65-15.9 35.549-35.549 35.549s-35.549-15.9-35.549-35.549v-142.197h-142.197c-19.65 0-35.549-15.9-35.549-35.549s15.9-35.549 35.549-35.549h142.197v-142.197c0-19.65 15.9-35.549 35.549-35.549s35.549 15.9 35.549 35.549v142.197h142.197c19.65 0 35.549 15.9 35.549 35.549s-15.9 35.549-35.549 35.549z" />
14 | <glyph unicode="&#xe904;" glyph-name="plus" d="M863.328 478.66l-317.344-0.1v318.622c0 17.665-14.336 32.001-32 32.001s-32-14.336-32-32v-318.401l-322.465 0.177c-17.632 0-31.935-14.24-32-31.904-0.097-17.665 14.208-32.032 31.871-32.096l322.593-0.177v-319.167c0-17.696 14.336-32.001 31.999-32.001s32 14.303 32 32v318.946l317.216 0.1c17.632 0 31.935 14.24 32 31.905s-14.238 32.031-31.87 32.095z" />
15 | <glyph unicode="&#xe905;" glyph-name="trash" d="M607.904 191.952c-17.712 0-32 14.288-32 32v352.112c0 17.712 14.288 32 32 32s31.984-14.288 31.984-32v-351.936c0-0.033 0-0.073 0-0.112 0-17.68-14.31-32.019-31.98-32.064h-0.004zM415.936 191.952c-17.712 0-32 14.288-32 32v352.112c0 17.712 14.272 32 32 32s32-14.288 32-32v-351.936c0-0.024 0-0.052 0-0.080 0-17.692-14.315-32.041-31.995-32.096h-0.005zM928.016 736.032h-159.968v63.984c0 52.992-42.672 95.984-95.296 95.984h-320.816c-52.999-0.027-95.957-42.984-95.984-95.981v-63.987h-159.968c-17.712 0-32-14.288-32-32s14.272-32 32-32h832.032c0.014 0 0.031 0 0.048 0 17.638 0 31.936 14.298 31.936 31.936 0 0.023 0 0.045 0 0.068v-0.004c0 17.728-14.272 32-31.984 32zM319.952 800.016c0 17.552 14.448 32 32 32h320.816c17.536 0 31.312-14.112 31.312-32v-63.984h-384.128v63.984zM736.048 0h-447.92c-53.001 0.009-95.966 42.968-95.984 95.966v480.434c0 17.712 14.272 32 32 32s32-14.288 32-32v-480.432c0-17.712 14.448-32 32-32h448.096c17.712 0 32 14.288 32 32v479.232c0 17.712 14.288 32 32 32s31.984-14.288 31.984-32v-479.232c-0.192-52.816-43.2-95.968-96.176-95.968z" />
16 | <glyph unicode="&#xe906;" glyph-name="file" d="M620.792 832.218h-430.076v-767.753h640.521v556.933l-210.445 210.819zM639.538 722.765l82.441-82.588h-82.441v82.588zM254.775 128.524v639.635h320.704v-192.041h191.699v-447.595h-512.403z" />
17 | <glyph unicode="&#xe907;" glyph-name="folder" d="M903.813 687.206h-407.918l-141.342 118.095c-7.946 10.51-20.476 16.774-33.521 16.774h-207.504c-23.271 0-42.223-19.158-42.223-42.714v-666.599c0-23.299 18.95-42.251 42.223-42.251h790.286c23.296 0 42.246 18.95 42.246 42.251v532.223c0.001 23.274-18.949 42.223-42.245 42.223zM124.32 687.206v81.852h191.869l97.435-81.852h-289.305zM124.32 634.187h768.72v-510.657h-768.72v510.657z" />
18 | </font></defs></svg>


--------------------------------------------------------------------------------
/src/fonts/icomoon.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ParadeTo/vue-tree-list/727ab3a69c070389e79410dc1750bcdcec1039fc/src/fonts/icomoon.ttf


--------------------------------------------------------------------------------
/src/fonts/icomoon.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ParadeTo/vue-tree-list/727ab3a69c070389e79410dc1750bcdcec1039fc/src/fonts/icomoon.woff


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by ayou on 17/7/21.
 3 |  */
 4 | 
 5 | import VueTreeList from './VueTreeList'
 6 | import { Tree, TreeNode } from './Tree'
 7 | 
 8 | VueTreeList.install = Vue => {
 9 |   Vue.component(VueTreeList.name, VueTreeList)
10 | }
11 | 
12 | export default VueTreeList
13 | export { Tree, TreeNode, VueTreeList }
14 | 


--------------------------------------------------------------------------------
/src/tools.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by ayou on 18/2/6.
 3 |  */
 4 | 
 5 | var handlerCache
 6 | 
 7 | export const addHandler = function(element, type, handler) {
 8 |   handlerCache = handler
 9 |   if (element.addEventListener) {
10 |     element.addEventListener(type, handler, false)
11 |   } else if (element.attachEvent) {
12 |     element.attachEvent('on' + type, handler)
13 |   } else {
14 |     element['on' + type] = handler
15 |   }
16 | }
17 | 
18 | export const removeHandler = function(element, type) {
19 |   if (element.removeEventListener) {
20 |     element.removeEventListener(type, handlerCache, false)
21 |   } else if (element.detachEvent) {
22 |     element.detachEvent('on' + type, handlerCache)
23 |   } else {
24 |     element['on' + type] = null
25 |   }
26 | }
27 | 
28 | // depth first search
29 | export const traverseTree = root => {
30 |   var newRoot = {}
31 | 
32 |   for (var k in root) {
33 |     if (k !== 'children' && k !== 'parent') {
34 |       newRoot[k] = root[k]
35 |     }
36 |   }
37 | 
38 |   if (root.children && root.children.length > 0) {
39 |     newRoot.children = []
40 |     for (var i = 0, len = root.children.length; i < len; i++) {
41 |       newRoot.children.push(traverseTree(root.children[i]))
42 |     }
43 |   }
44 |   return newRoot
45 | }
46 | 


--------------------------------------------------------------------------------
/tests/unit/__snapshots__/render.spec.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Render render correctly 1`] = `
 4 | <div class="vtl">
 5 |   <!---->
 6 |   <div class="">
 7 |     <div class="vtl">
 8 |       <div id="1" class="vtl-node vtl-tree-node">
 9 |         <div class="vtl-border vtl-up"></div>
10 |         <div draggable="false" class="vtl-node-main vtl-drag-disabled"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-right"></i></span> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
11 |           <div class="vtl-node-content">
12 |             Node 1
13 |           </div>
14 |           <div class="vtl-operation" style="display: none;">
15 |             <!---->
16 |             <!---->
17 |             <!---->
18 |             <!---->
19 |           </div>
20 |         </div>
21 |         <!---->
22 |       </div>
23 |       <div class="vtl-tree-margin" style="display: none;">
24 |         <div class="vtl">
25 |           <div id="2" class="vtl-node vtl-leaf-node">
26 |             <div class="vtl-border vtl-up"></div>
27 |             <div draggable="true" class="vtl-node-main">
28 |               <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
29 |               <div class="vtl-node-content">
30 |                 Node 1-2
31 |               </div>
32 |               <div class="vtl-operation" style="display: none;">
33 |                 <!---->
34 |                 <!----> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
35 |             </div>
36 |             <!---->
37 |           </div>
38 |           <!---->
39 |         </div>
40 |       </div>
41 |     </div>
42 |     <div class="vtl">
43 |       <div id="3" class="vtl-node vtl-tree-node">
44 |         <div class="vtl-border vtl-up"></div>
45 |         <div draggable="true" class="vtl-node-main vtl-disabled">
46 |           <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
47 |           <div class="vtl-node-content">
48 |             Node 2
49 |           </div>
50 |           <div class="vtl-operation" style="display: none;"><span title="Add Tree Node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="Add Leaf Node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
51 |         </div>
52 |         <!---->
53 |       </div>
54 |       <!---->
55 |     </div>
56 |     <div class="vtl">
57 |       <div id="4" class="vtl-node vtl-tree-node">
58 |         <div class="vtl-border vtl-up"></div>
59 |         <div draggable="true" class="vtl-node-main">
60 |           <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
61 |           <div class="vtl-node-content">
62 |             Node 3
63 |           </div>
64 |           <div class="vtl-operation" style="display: none;"><span title="Add Tree Node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="Add Leaf Node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
65 |         </div>
66 |         <!---->
67 |       </div>
68 |       <!---->
69 |     </div>
70 |   </div>
71 | </div>
72 | `;
73 | 


--------------------------------------------------------------------------------
/tests/unit/__snapshots__/slot.spec.js.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Slot render slot correctly 1`] = `
 4 | <div class="vtl">
 5 |   <!---->
 6 |   <div class="">
 7 |     <div class="vtl">
 8 |       <div id="t1" class="vtl-node vtl-tree-node">
 9 |         <div class="vtl-border vtl-up"></div>
10 |         <div draggable="true" class="vtl-node-main"><span class="vtl-caret vtl-is-small"><i class="vtl-icon vtl-icon-caret-down"></i></span> <span><span class="tree-node-icon icon">❀</span></span>
11 |           <div class="vtl-node-content">
12 |             Node 1
13 |           </div>
14 |           <div class="vtl-operation" style="display: none;"><span title="Add Tree Node"><span class="add-tree-node-icon">📂</span></span> <span title="Add Leaf Node"><span class="icon">＋</span></span> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span></span></span></div>
15 |         </div>
16 |         <div class="vtl-border vtl-bottom"></div>
17 |       </div>
18 |       <div class="vtl-tree-margin">
19 |         <div class="vtl">
20 |           <div id="t11" class="vtl-node vtl-leaf-node">
21 |             <div class="vtl-border vtl-up"></div>
22 |             <div draggable="true" class="vtl-node-main">
23 |               <!----> <span><span class="icon">🍃</span></span>
24 |               <div class="vtl-node-content">
25 |                 Node 1-1
26 |               </div>
27 |               <div class="vtl-operation" style="display: none;">
28 |                 <!---->
29 |                 <!----> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span class="del-node-icon">✂️</span></span></div>
30 |             </div>
31 |             <!---->
32 |           </div>
33 |           <!---->
34 |         </div>
35 |       </div>
36 |     </div>
37 |     <div class="vtl">
38 |       <div id="t2" class="vtl-node vtl-tree-node">
39 |         <div class="vtl-border vtl-up"></div>
40 |         <div draggable="true" class="vtl-node-main">
41 |           <!----> <span><span class="tree-node-icon icon">❀</span></span>
42 |           <div class="vtl-node-content">
43 |             Node 2
44 |           </div>
45 |           <div class="vtl-operation" style="display: none;"><span title="Add Tree Node"><span class="add-tree-node-icon">📂</span></span> <span title="Add Leaf Node"><span class="icon">＋</span></span> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span class="del-node-icon">✂️</span></span></div>
46 |         </div>
47 |         <!---->
48 |       </div>
49 |       <!---->
50 |     </div>
51 |   </div>
52 | </div>
53 | `;
54 | 


--------------------------------------------------------------------------------
/tests/unit/drag.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { mount } from '@vue/test-utils'
 3 | import { Tree, VueTreeList } from '@/index'
 4 | 
 5 | describe('Drag', () => {
 6 |   let wrapper
 7 | 
 8 |   beforeEach(() => {
 9 |     const tree = new Tree([
10 |       {
11 |         name: 'Node 1',
12 |         id: 't1',
13 |         pid: 0,
14 |         children: [
15 |           {
16 |             name: 'Node 1-1',
17 |             id: 't11',
18 |             isLeaf: true,
19 |             pid: 't1'
20 |           },
21 |           {
22 |             name: 'Node 1-2',
23 |             id: 't12',
24 |             pid: 't1'
25 |           }
26 |         ]
27 |       },
28 |       {
29 |         name: 'Node 2',
30 |         id: 't2',
31 |         pid: 0
32 |       },
33 |       {
34 |         name: 'Node 3',
35 |         id: 't3',
36 |         pid: 0
37 |       }
38 |     ])
39 |     wrapper = mount(VueTreeList, { propsData: { model: new Tree([]) } })
40 |     wrapper.setProps({ model: tree })
41 |   })
42 | 
43 |   it('drag before', done => {
44 |     const $tree2 = wrapper.find('#t2 .vtl-node-main')
45 |     const $tree1Up = wrapper.find('#t1 .vtl-up')
46 |     $tree2.trigger('dragstart', { dataTransfer: { setData: () => {} } })
47 |     $tree1Up.trigger('drop')
48 |     Vue.nextTick(() => {
49 |       expect(wrapper.find('.vtl-node').attributes('id')).toBe('t2')
50 |       done()
51 |     })
52 |   })
53 | 
54 |   it('drag after', done => {
55 |     const $tree3 = wrapper.find('#t3 .vtl-node-main')
56 |     const $tree1Bottom = wrapper.find('#t1 .vtl-bottom')
57 |     $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} } })
58 |     $tree1Bottom.trigger('drop')
59 |     Vue.nextTick(() => {
60 |       expect(
61 |         wrapper
62 |           .findAll('.vtl-tree-node')
63 |           .at(2)
64 |           .attributes('id')
65 |       ).toBe('t3')
66 |       done()
67 |     })
68 |   })
69 | 
70 |   it('drag into', done => {
71 |     const $tree3 = wrapper.find('#t3 .vtl-node-main')
72 |     const $tree1 = wrapper.find('#t1 .vtl-node-main')
73 |     $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} } })
74 |     $tree1.trigger('drop')
75 |     Vue.nextTick(() => {
76 |       expect(wrapper.find('#t1 + .vtl-tree-margin .vtl-node').attributes('id')).toBe('t3')
77 |       done()
78 |     })
79 |   })
80 | 
81 |   it('cannot drag ancestor into child', done => {
82 |     const snapshot = wrapper.html()
83 |     const $tree1 = wrapper.find('#t1 .vtl-node-main')
84 |     const $tree1Child = wrapper.find('#t12 .vtl-node-main')
85 |     $tree1.trigger('dragstart', { dataTransfer: { setData: () => {} } })
86 |     $tree1Child.trigger('drop')
87 |     Vue.nextTick(() => {
88 |       expect(wrapper.html()).toBe(snapshot)
89 |       done()
90 |     })
91 |   })
92 | })
93 | 


--------------------------------------------------------------------------------
/tests/unit/operation.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { mount } from '@vue/test-utils'
 3 | import { Tree, VueTreeList } from '@/index'
 4 | 
 5 | describe('Operation', () => {
 6 |   let wrapper
 7 | 
 8 |   beforeEach(() => {
 9 |     const tree = new Tree([
10 |       {
11 |         name: 'Node 1',
12 |         id: 't1',
13 |         pid: 0,
14 |         children: [
15 |           {
16 |             name: 'Node 1-1',
17 |             id: 't11',
18 |             isLeaf: true,
19 |             pid: 't1'
20 |           }
21 |         ]
22 |       },
23 |       {
24 |         name: 'Node 2',
25 |         id: 't2',
26 |         pid: 0
27 |       }
28 |     ])
29 |     wrapper = mount(VueTreeList, { propsData: { model: new Tree([]) } })
30 |     wrapper.setProps({ model: tree })
31 |   })
32 | 
33 |   it('delete leaf node', done => {
34 |     const $node11Trash = wrapper.find('#t11 [title="delete"]')
35 |     $node11Trash.trigger('click')
36 |     wrapper.emitted('delete-node')[0][0].remove()
37 |     Vue.nextTick(() => {
38 |       expect(wrapper.findAll('.vtl-node').length).toBe(2)
39 |       done()
40 |     })
41 |   })
42 | 
43 |   it('delete tree node', done => {
44 |     const $node11Trash = wrapper.find('#t1 [title="delete"]')
45 |     $node11Trash.trigger('click')
46 |     wrapper.emitted('delete-node')[0][0].remove()
47 |     Vue.nextTick(() => {
48 |       expect(wrapper.findAll('.vtl-node').length).toBe(1)
49 |       done()
50 |     })
51 |   })
52 | 
53 |   it('add leaf node', done => {
54 |     const $node1AddLeafNode = wrapper.find('#t1 [title="Add Leaf Node"]')
55 |     $node1AddLeafNode.trigger('click')
56 |     Vue.nextTick(() => {
57 |       expect(wrapper.findAll('.vtl-leaf-node').length).toBe(2)
58 |       done()
59 |     })
60 |   })
61 | 
62 |   it('add tree node', done => {
63 |     const $node1AddTreeNode = wrapper.find('#t1 [title="Add Tree Node"]')
64 |     $node1AddTreeNode.trigger('click')
65 |     Vue.nextTick(() => {
66 |       expect(wrapper.findAll('.vtl-tree-node').length).toBe(3)
67 |       done()
68 |     })
69 |   })
70 | 
71 |   it('change node name', done => {
72 |     const $node1Edit = wrapper.find('#t1 [title="edit"]')
73 |     $node1Edit.trigger('click')
74 |     Vue.nextTick(() => {
75 |       const $input = wrapper.find('#t1 .vtl-input')
76 |       $input.element.value = 'New Node 1'
77 |       $input.trigger('input')
78 |       $input.trigger('blur')
79 |       Vue.nextTick(() => {
80 |         expect(wrapper.find('#t1').text()).toBe('New Node 1')
81 |         done()
82 |       })
83 |     })
84 |   })
85 | })
86 | 


--------------------------------------------------------------------------------
/tests/unit/render.spec.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | import { Tree, VueTreeList } from '@/index'
 3 | 
 4 | describe('Render', () => {
 5 |   it('render correctly', () => {
 6 |     const tree = new Tree([
 7 |       {
 8 |         name: 'Node 1',
 9 |         id: 1,
10 |         pid: 0,
11 |         dragDisabled: true,
12 |         addTreeNodeDisabled: true,
13 |         addLeafNodeDisabled: true,
14 |         editNodeDisabled: true,
15 |         delNodeDisabled: true,
16 |         children: [
17 |           {
18 |             name: 'Node 1-2',
19 |             id: 2,
20 |             isLeaf: true,
21 |             pid: 1
22 |           }
23 |         ]
24 |       },
25 |       {
26 |         name: 'Node 2',
27 |         id: 3,
28 |         pid: 0,
29 |         disabled: true
30 |       },
31 |       {
32 |         name: 'Node 3',
33 |         id: 4,
34 |         pid: 0
35 |       }
36 |     ])
37 | 
38 |     const wrapper = mount(VueTreeList, {
39 |       propsData: {
40 |         model: tree,
41 |         defaultTreeNodeName: 'new node',
42 |         defaultLeafNodeName: 'new leaf',
43 |         defaultExpanded: false
44 |       }
45 |     })
46 | 
47 |     expect(wrapper).toMatchSnapshot()
48 |   })
49 | })
50 | 


--------------------------------------------------------------------------------
/tests/unit/slot.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { mount } from '@vue/test-utils'
 3 | import { Tree, VueTreeList } from '@/index'
 4 | 
 5 | describe('Slot', () => {
 6 |   let wrapper
 7 | 
 8 |   beforeEach(() => {
 9 |     const tree = new Tree([
10 |       {
11 |         name: 'Node 1',
12 |         id: 't1',
13 |         pid: 0,
14 |         children: [
15 |           {
16 |             name: 'Node 1-1',
17 |             id: 't11',
18 |             isLeaf: true,
19 |             pid: 't1'
20 |           }
21 |         ]
22 |       },
23 |       {
24 |         name: 'Node 2',
25 |         id: 't2',
26 |         pid: 0
27 |       }
28 |     ])
29 |     wrapper = mount(VueTreeList, {
30 |       propsData: { model: new Tree([]) },
31 |       scopedSlots: {
32 |         addTreeNodeIcon() {
33 |           return <span class='add-tree-node-icon'>📂</span>
34 |         },
35 |         addLeafNodeIcon() {
36 |           return <span class='icon'>＋</span>
37 |         },
38 |         editNodeIcon() {
39 |           return <span class='icon'>📃</span>
40 |         },
41 |         delNodeIcon(slotProps) {
42 |           return slotProps.model.isLeaf || !slotProps.model.children ? (
43 |             <span class='del-node-icon'>✂️</span>
44 |           ) : (
45 |             <span />
46 |           )
47 |         },
48 |         leafNodeIcon() {
49 |           return <span class='icon'>🍃</span>
50 |         },
51 |         treeNodeIcon(slotProps) {
52 |           return (
53 |             <span class='tree-node-icon icon'>
54 |               {slotProps.model.children &&
55 |               slotProps.model.children.length > 0 &&
56 |               !slotProps.expanded
57 |                 ? '🌲'
58 |                 : '❀'}
59 |             </span>
60 |           )
61 |         }
62 |       }
63 |     })
64 |     wrapper.setProps({ model: tree })
65 |   })
66 | 
67 |   it('render slot correctly', () => {
68 |     expect(wrapper).toMatchSnapshot()
69 |   })
70 | 
71 |   it('toggle tree node show different icon', done => {
72 |     const $caretDown = wrapper.find('.vtl-icon-caret-down')
73 |     expect(wrapper.find('#t1 .tree-node-icon').text()).toBe('❀')
74 |     $caretDown.trigger('click')
75 |     Vue.nextTick(() => {
76 |       expect(wrapper.exists('.vtl-icon-caret-right')).toBe(true)
77 |       expect(wrapper.find('#t1 .tree-node-icon').text()).toBe('🌲')
78 |       done()
79 |     })
80 |   })
81 | 
82 |   it('dont show ✂️ after add child ', done => {
83 |     const $addTreeNodeIcon = wrapper.find('#t2 .add-tree-node-icon')
84 |     expect(wrapper.find('#t2 .del-node-icon').exists()).toBe(true)
85 |     $addTreeNodeIcon.trigger('click')
86 |     Vue.nextTick(() => {
87 |       expect(wrapper.find('#t2 .del-node-icon').exists()).toBe(false)
88 |       done()
89 |     })
90 |   })
91 | })
92 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   css: {
3 |     extract: false
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------