Create LICENSE

.github/workflows/test.yml

@@ -12,4 +12,4 @@ jobs:
         run: |
           npm install
           npm run lint
-          npm run test:coverage
+          npm run test:unit

.gitignore

@@ -19,5 +19,3 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
-
-coverage

LICENSE

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

dev/App.vue

@@ -70,38 +70,31 @@
     },
     methods: {
       onDel (node) {
-        // eslint-disable-next-line no-console
         console.log(node)
         node.remove()
       },
 
       onChangeName (params) {
-        // eslint-disable-next-line no-console
         console.log(params)
       },
 
       onAddNode (params) {
-        // eslint-disable-next-line no-console
         console.log(params)
       },
 
       onClick (params) {
-        // eslint-disable-next-line no-console
         console.log(params)
       },
 
       drop: function ({node, src, target}) {
-        // eslint-disable-next-line no-console
         console.log('drop', node, src, target)
       },
 
       dropBefore: function ({node, src, target}) {
-        // eslint-disable-next-line no-console
         console.log('drop-before', node, src, target)
       },
 
       dropAfter: function ({node, src, target}) {
-        // eslint-disable-next-line no-console
         console.log('drop-after', node, src, target)
       },
 

jest.config.js

@@ -1,6 +1,4 @@
 module.exports = {
-  preset: '@vue/cli-plugin-unit-jest',
-  snapshotSerializers: ['jest-serializer-vue'],
-  collectCoverageFrom: ['src/**/*.{js,vue}'],
-  coveragePathIgnorePatterns: ['src/index.js']
-}
+  preset: "@vue/cli-plugin-unit-jest",
+  snapshotSerializers: ["jest-serializer-vue"]
+};

package.json

@@ -6,8 +6,7 @@
   "scripts": {
     "serve": "vue-cli-service serve dev",
     "build": "vue-cli-service build --target lib src/index.js",
-    "test:unit": "vue-cli-service test:unit --watch",
-    "test:coverage": "vue-cli-service test:unit --coverage",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
     "commit": "npx git-cz",
     "prepublish": "npm run build"

readme.md

@@ -1,5 +1,3 @@
-[![Actions Status](https://github.com/ParadeTo/vue-tree-list/workflows/Test/badge.svg)](https://github.com/ParadeTo/vue-tree-list/actions)
-
 # vue-tree-list
 A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.
 

src/Tree.js

@@ -115,7 +115,7 @@ TreeNode.prototype._beforeInsert = function (target) {
     return false
   }
 
-  // cannot insert ancestor to child
+  // cannot move ancestor to child
   if (this.isTargetChild(target)) {
     return false
   }

src/VueTreeList.vue

@@ -1,17 +1,12 @@
 <template>
   <div class='vtl'>
-    <div
-      v-if="model.name !== 'root'"
-      :id='model.id'
-      class="vtl-node"
-      :class="{'vtl-leaf-node': model.isLeaf, 'vtl-tree-node': ! model.isLeaf}"
-    >
+    <div v-if="model.name !== 'root'">
       <div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
         @drop="dropBefore"
         @dragenter="dragEnterUp"
         @dragover='dragOverUp'
-        @dragleave="dragLeaveUp" />
-      <div :class="treeNodeClass"
+        @dragleave="dragLeaveUp"></div>
+      <div :id='model.id' :class="treeNodeClass"
         :draggable="!model.dragDisabled"
         @dragstart='dragStart'
         @dragover='dragOver'
@@ -78,7 +73,7 @@
       <item v-for="model in model.children"
         :default-tree-node-name="defaultTreeNodeName"
         :default-leaf-node-name="defaultLeafNodeName"
-        :default-expanded="defaultExpanded"
+        v-bind:default-expanded="defaultExpanded"
         :model="model"
         :key='model.id'>
           <slot name="addTreeNodeIcon" slot="addTreeNodeIcon" />
@@ -127,6 +122,10 @@
       }
     },
     computed: {
+      itemIconClass () {
+        return this.model.isLeaf ? 'vtl-icon-file' : 'vtl-icon-folder'
+      },
+
       caretClass () {
         return this.expanded ? 'vtl-icon-caret-down' : 'vtl-icon-caret-right'
       },
@@ -146,7 +145,7 @@
         } = this
 
         return {
-          'vtl-node-main': true,
+          'vtl-tree-node': true,
           'vtl-active': isDragEnterNode,
           'vtl-drag-disabled': dragDisabled,
           'vtl-disabled': disabled
@@ -386,7 +385,7 @@
     }
   }
 
-  .vtl-node-main {
+  .vtl-tree-node {
     display: flex;
     align-items: center;
     padding: 5px 0 5px 1rem;

tests/unit/__snapshots__/example.spec.js.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Render render correctly 1`] = `
+exports[`VueTreeList renders correctly 1`] = `
 <div class="vtl">
   <!---->
   <div class="">
     <div class="vtl">
-      <div id="1" class="vtl-node vtl-tree-node">
+      <div>
         <div class="vtl-border vtl-up"></div>
-        <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>
+        <div id="1" draggable="false" class="vtl-tree-node 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>
           <div class="vtl-node-content">
             Node 1
           </div>
@@ -22,9 +22,9 @@ exports[`Render render correctly 1`] = `
       </div>
       <div class="vtl-tree-margin" style="display: none;">
         <div class="vtl">
-          <div id="2" class="vtl-node vtl-leaf-node">
+          <div>
             <div class="vtl-border vtl-up"></div>
-            <div draggable="true" class="vtl-node-main">
+            <div id="2" draggable="true" class="vtl-tree-node">
               <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-file"></i></span>
               <div class="vtl-node-content">
                 Node 1-2
@@ -40,9 +40,9 @@ exports[`Render render correctly 1`] = `
       </div>
     </div>
     <div class="vtl">
-      <div id="3" class="vtl-node vtl-tree-node">
+      <div>
         <div class="vtl-border vtl-up"></div>
-        <div draggable="true" class="vtl-node-main vtl-disabled">
+        <div id="3" draggable="true" class="vtl-tree-node vtl-disabled">
           <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
           <div class="vtl-node-content">
             Node 2
@@ -54,9 +54,9 @@ exports[`Render render correctly 1`] = `
       <!---->
     </div>
     <div class="vtl">
-      <div id="4" class="vtl-node vtl-tree-node">
+      <div>
         <div class="vtl-border vtl-up"></div>
-        <div draggable="true" class="vtl-node-main">
+        <div id="4" draggable="true" class="vtl-tree-node">
           <!----> <span><i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i></span>
           <div class="vtl-node-content">
             Node 3

tests/unit/drag.spec.js

@@ -1,87 +0,0 @@
-import Vue from 'vue'
-import {mount} from '@vue/test-utils'
-import {Tree, VueTreeList} from '@/index'
-
-describe('Drag', () => {
-  let wrapper
-
-  beforeEach(() => {
-    const tree = new Tree([
-      {
-        name: 'Node 1',
-        id: 't1',
-        pid: 0,
-        children: [
-          {
-            name: 'Node 1-1',
-            id: 't11',
-            isLeaf: true,
-            pid: 't1'
-          },
-          {
-            name: 'Node 1-2',
-            id: 't12',
-            pid: 't1'
-          }
-        ]
-      },
-      {
-        name: 'Node 2',
-        id: 't2',
-        pid: 0
-      },
-      {
-        name: 'Node 3',
-        id: 't3',
-        pid: 0
-      }
-    ])
-    wrapper = mount(VueTreeList, {propsData: {model: new Tree([])}})
-    wrapper.setProps({model: tree})
-  })
-
-  it('drag before', done => {
-    const $tree2 = wrapper.find('#t2 .vtl-node-main')
-    const $tree1Up = wrapper.find('#t1 .vtl-up')
-    $tree2.trigger('dragstart', { dataTransfer: { setData: () => {} }})
-    $tree1Up.trigger('drop')
-    Vue.nextTick(() => {
-      expect(wrapper.find('.vtl-node').attributes('id')).toBe('t2')
-      done()
-    })
-  })
-
-  it('drag after', done => {
-    const $tree3 = wrapper.find('#t3 .vtl-node-main')
-    const $tree1Bottom = wrapper.find('#t1 .vtl-bottom')
-    $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} }})
-    $tree1Bottom.trigger('drop')
-    Vue.nextTick(() => {
-      expect(wrapper.findAll('.vtl-tree-node').at(2).attributes('id')).toBe('t3')
-      done()
-    })
-  })
-
-  it('drag into', done => {
-    const $tree3 = wrapper.find('#t3 .vtl-node-main')
-    const $tree1 = wrapper.find('#t1 .vtl-node-main')
-    $tree3.trigger('dragstart', { dataTransfer: { setData: () => {} }})
-    $tree1.trigger('drop')
-    Vue.nextTick(() => {
-      expect(wrapper.find('#t1 + .vtl-tree-margin .vtl-node').attributes('id')).toBe('t3')
-      done()
-    })
-  })
-
-  it('cannot drag ancestor into child', done => {
-    const snapshot = wrapper.html()
-    const $tree1 = wrapper.find('#t1 .vtl-node-main')
-    const $tree1Child = wrapper.find('#t12 .vtl-node-main')
-    $tree1.trigger('dragstart', { dataTransfer: { setData: () => {} }})
-    $tree1Child.trigger('drop')
-    Vue.nextTick(() => {
-      expect(wrapper.html()).toBe(snapshot)
-      done()
-    })
-  })
-})

tests/unit/example.spec.js

@@ -1,11 +1,11 @@
-import {mount} from '@vue/test-utils'
-import {Tree, VueTreeList} from '@/index'
+import { mount } from "@vue/test-utils";
+import { Tree, VueTreeList } from "@/index";
 
-describe('Render', () => {
-  it('render correctly', () => {
+describe("VueTreeList", () => {
+  it("renders correctly", () => {
     const tree = new Tree([
       {
-        name: 'Node 1',
+        name: "Node 1",
         id: 1,
         pid: 0,
         dragDisabled: true,
@@ -15,7 +15,7 @@ describe('Render', () => {
         delNodeDisabled: true,
         children: [
           {
-            name: 'Node 1-2',
+            name: "Node 1-2",
             id: 2,
             isLeaf: true,
             pid: 1
@@ -23,27 +23,27 @@ describe('Render', () => {
         ]
       },
       {
-        name: 'Node 2',
+        name: "Node 2",
         id: 3,
         pid: 0,
         disabled: true
       },
       {
-        name: 'Node 3',
+        name: "Node 3",
         id: 4,
         pid: 0
       }
-    ])
+    ]);
 
     const wrapper = mount(VueTreeList, {
       propsData: {
         model: tree,
-        defaultTreeNodeName: 'new node',
-        defaultLeafNodeName: 'new leaf',
+        defaultTreeNodeName: "new node",
+        defaultLeafNodeName: "new leaf",
         defaultExpanded: false
       }
-    })
+    });
 
-    expect(wrapper).toMatchSnapshot()
-  })
-})
+    expect(wrapper).toMatchSnapshot();
+  });
+});

tests/unit/operation.spec.js

@@ -1,86 +0,0 @@
-import Vue from 'vue'
-import {mount} from '@vue/test-utils'
-import {Tree, VueTreeList} from '@/index'
-
-describe('Operation', () => {
-  let wrapper
-
-  beforeEach(() => {
-    const tree = new Tree([
-      {
-        name: 'Node 1',
-        id: 't1',
-        pid: 0,
-        children: [
-          {
-            name: 'Node 1-1',
-            id: 't11',
-            isLeaf: true,
-            pid: 't1'
-          }
-        ]
-      },
-      {
-        name: 'Node 2',
-        id: 't2',
-        pid: 0
-      }
-    ])
-    wrapper = mount(VueTreeList, {propsData: {model: new Tree([])}})
-    wrapper.setProps({model: tree})
-  })
-
-  it('delete leaf node', done => {
-    const $node11Trash = wrapper.find('#t11 [title="delete"]')
-    $node11Trash.trigger('click')
-    wrapper.emitted('delete-node')[0][0].remove()
-    Vue.nextTick(() => {
-      expect(wrapper.findAll('.vtl-node').length).toBe(2)
-      done()
-    })
-  })
-
-  it('delete tree node', done => {
-    const $node11Trash = wrapper.find('#t1 [title="delete"]')
-    $node11Trash.trigger('click')
-    wrapper.emitted('delete-node')[0][0].remove()
-    Vue.nextTick(() => {
-      expect(wrapper.findAll('.vtl-node').length).toBe(1)
-      done()
-    })
-  })
-
-  it('add leaf node', done => {
-    const $node1AddLeafNode = wrapper.find('#t1 [title="add leaf node"]')
-    $node1AddLeafNode.trigger('click')
-    Vue.nextTick(() => {
-      expect(wrapper.findAll('.vtl-leaf-node').length).toBe(2)
-      done()
-    })
-  })
-
-  it('add tree node', done => {
-    const $node1AddTreeNode = wrapper.find('#t1 [title="add tree node"]')
-    $node1AddTreeNode.trigger('click')
-    Vue.nextTick(() => {
-      expect(wrapper.findAll('.vtl-tree-node').length).toBe(3)
-      done()
-    })
-  })
-
-  it('change node name', done => {
-    const $node1Edit = wrapper.find('#t1 [title="edit"]')
-    $node1Edit.trigger('click')
-    Vue.nextTick(() => {
-      const $input = wrapper.find('#t1 .vtl-input')
-      $input.element.value = 'New Node 1'
-      $input.trigger('input')
-      var event = new KeyboardEvent('keyup', {keyCode: 13})
-      window.dispatchEvent(event)
-      Vue.nextTick(() => {
-        expect(wrapper.find('#t1').text()).toBe('New Node 1')
-        done()
-      })
-    })
-  })
-})