1.1.0

dev/App.vue

@@ -9,7 +9,7 @@
     </div>
 </template>
 <script>
-  import { VueTreeList, Tree, TreeNode } from '../dist/vue-tree-list.min'
+  import { VueTreeList, Tree, TreeNode } from '../src'
   export default {
     components: {
       VueTreeList
@@ -36,7 +36,7 @@
             name: 'Node 2',
             id: 3,
             pid: 0,
-            dragDisabled: true
+            disabled: true
           },
           {
             name: 'Node 3',
@@ -82,3 +82,16 @@
     }
   }
 </script>
+<style lang="less" rel="stylesheet/less">
+  .vtl {
+    .vtl-drag-disabled {
+      background-color: #d0cfcf;
+      &:hover {
+        background-color: #d0cfcf;
+      }
+    }
+    .vtl-disabled {
+      background-color: #d0cfcf;
+    }
+  }
+</style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tree-list",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
   "main": "dist/vue-tree-list.min.js",
   "scripts": {
@@ -8,7 +8,8 @@
     "unit": "karma start --watch",
     "coveralls": "npm run test -- --report lcovonly && cat ./coverage/lcov.info | coveralls",
     "build": "webpack --config build/webpack.build.conf.js",
-    "dev": "webpack-dev-server --config build/webpack.dev.conf.js"
+    "dev": "webpack-dev-server --config build/webpack.dev.conf.js",
+    "prepublishOnly": "npm run build"
   },
   "repository": {
     "type": "git",

src/Tree.js

@@ -1,6 +1,3 @@
-// used to record treenode's change
-// let Record = {}
-// treenode's id
 let nodeId = 1
 
 /**
@@ -11,6 +8,7 @@ let nodeId = 1
  *   isLeaf: treenode is leaf node or not
  *   id: id
  *   dragDisabled: decide if it can be dragged
+ *   disabled: desabled all operation
  */
 const TreeNode = function (data) {
   const { id, isLeaf } = data
@@ -29,22 +27,8 @@ const TreeNode = function (data) {
   }
 }
 
-// TreeNode.prototype.updateRecordProperty = function () {
-//   if (!Record[this.id]) {
-//     Record[this.id] = {}
-//   }
-//
-//   Record[this.id].name = this.name
-//   Record[this.id].id = this.id
-//   Record[this.id].pid = this.pid
-//   Record[this.id].isLeaf = this.isLeaf
-// }
-
 TreeNode.prototype.changeName = function (name) {
   this.name = name
-
-  // this.updateRecordProperty()
-  // Record[this.id].modify = true
 }
 
 TreeNode.prototype.addChildren = function (children, isNew) {
@@ -57,11 +41,6 @@ TreeNode.prototype.addChildren = function (children, isNew) {
       const child = children[i]
       child.parent = this
       child.pid = this.id
-
-      // if (isNew) {
-        // child.updateRecordProperty()
-        // Record[child.id].add = true
-      // }
     }
     this.children.concat(children)
   } else {
@@ -69,11 +48,6 @@ TreeNode.prototype.addChildren = function (children, isNew) {
     child.parent = this
     child.pid = this.id
     this.children.push(child)
-
-    // if (isNew) {
-      // child.updateRecordProperty()
-      // Record[child.id].add = true
-    // }
   }
 }
 
@@ -82,9 +56,6 @@ TreeNode.prototype.remove = function () {
   const parent = this.parent
   const index = parent.findChildIndex(this)
   parent.children.splice(index, 1)
-
-  // this.updateRecordProperty()
-  // Record[this.id].remove = true
 }
 
 // remove child
@@ -130,11 +101,6 @@ TreeNode.prototype.moveInto = function (target) {
     target.children = []
   }
   target.children.unshift(this)
-
-  // this.updateRecordProperty()
-  // Record[this.id].targetId = target.id
-  // Record[this.id].move = true
-  // Record[this.id].moveType = 'inside'
 }
 
 TreeNode.prototype.findChildIndex = function (child) {
@@ -169,11 +135,6 @@ TreeNode.prototype.insertBefore = function (target) {
 
   const pos = target.parent.findChildIndex(target)
   target.parent.children.splice(pos, 0, this)
-
-  // this.updateRecordProperty()
-  // Record[this.id].targetId = target.id
-  // Record[this.id].move = true
-  // Record[this.id].moveType = 'before'
 }
 
 TreeNode.prototype.insertAfter = function (target) {
@@ -181,14 +142,9 @@ TreeNode.prototype.insertAfter = function (target) {
 
   const pos = target.parent.findChildIndex(target)
   target.parent.children.splice(pos + 1, 0, this)
-
-  // this.updateRecordProperty()
-  // Record[this.id].targetId = target.id
-  // Record[this.id].move = true
-  // Record[this.id].moveType = 'after'
 }
 
-function Tree(data) {
+function Tree (data) {
   this.root = new TreeNode({ name: 'root', isLeaf: false, id: 0 })
   this.initNode(this.root, data)
   return this.root
@@ -208,4 +164,3 @@ Tree.prototype.initNode = function (node, data) {
 
 exports.Tree = Tree
 exports.TreeNode = TreeNode
-// exports.Record = Record

src/VueTreeList.vue

@@ -1,12 +1,12 @@
 <template>
-  <div>
+  <div class='vtl'>
     <div v-if="model.name !== 'root'">
-      <div class="border up" :class="{'active': isDragEnterUp}"
+      <div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
         @drop="dropUp"
         @dragenter="dragEnterUp"
         @dragover='dragOverUp'
         @dragleave="dragLeaveUp"></div>
-      <div class='tree-node' :id='model.id' :class="{'active': isDragEnterNode}"
+      <div :id='model.id' :class="treeNodeClass"
         :draggable="!model.dragDisabled"
         @dragstart='dragStart'
         @dragover='dragOver'
@@ -17,59 +17,59 @@
         @mouseover='mouseOver'
         @mouseout='mouseOut'
         @click.stop='click'>
-        <span class="caret icon is-small" v-if="model.children && model.children.length > 0">
-          <i class="vue-tree-icon" :class="caretClass" @click.prevent.stop="toggle"></i>
+        <span class="vtl-caret vtl-is-small" v-if="model.children && model.children.length > 0">
+          <i class="vtl-icon" :class="caretClass" @click.prevent.stop="toggle"></i>
         </span>
 
         <span v-if="model.isLeaf">
           <slot name="leafNodeIcon">
-            <i class="vue-tree-icon item-icon icon-file"></i>
+            <i class="vtl-icon vtl-menu-icon vtl-icon-file"></i>
           </slot>
         </span>
         <span v-else>
           <slot name="treeNodeIcon">
-            <i class="vue-tree-icon item-icon icon-folder"></i>
+            <i class="vtl-icon vtl-menu-icon vtl-icon-folder"></i>
           </slot>
         </span>
 
-        <div class="node-content" v-if="!editable">
+        <div class="vtl-node-content" v-if="!editable">
           {{model.name}}
         </div>
-        <input v-else class="vue-tree-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
-        <div class="operation" v-show="isHover">
+        <input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
+        <div class="vtl-operation" v-show="isHover">
           <span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf">
             <slot name="addTreeNode">
-              <i class="vue-tree-icon icon-folder-plus-e"></i>
+              <i class="vtl-icon vtl-icon-folder-plus-e"></i>
             </slot>
           </span>
           <span title="add tree node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf">
             <slot name="addLeafNode">
-              <i class="vue-tree-icon icon-plus"></i>
+              <i class="vtl-icon vtl-icon-plus"></i>
             </slot>
           </span>
           <span title="edit" @click.stop.prevent="setEditable">
             <slot name="edit">
-              <i class="vue-tree-icon icon-edit"></i>
+              <i class="vtl-icon vtl-icon-edit"></i>
             </slot>
           </span>
           <span title="delete" @click.stop.prevent="delNode">
             <slot name="edit">
-              <i class="vue-tree-icon icon-trash"></i>
+              <i class="vtl-icon vtl-icon-trash"></i>
             </slot>
           </span>
         </div>
       </div>
 
       <div v-if="model.children && model.children.length > 0 && expanded"
-        class="border bottom"
-        :class="{'active': isDragEnterBottom}"
+        class="vtl-border vtl-bottom"
+        :class="{'vtl-active': isDragEnterBottom}"
         @drop="dropBottom"
         @dragenter="dragEnterBottom"
         @dragover='dragOverBottom'
         @dragleave="dragLeaveBottom"></div>
     </div>
 
-    <div :class="{'tree-margin': model.name !== 'root'}" v-show="expanded" v-if="isFolder">
+    <div :class="{'vtl-tree-margin': model.name !== 'root'}" v-show="expanded" v-if="isFolder">
       <item v-for="model in model.children"
         :default-tree-node-name="defaultTreeNodeName"
         :default-leaf-node-name="defaultLeafNodeName"
@@ -112,16 +112,33 @@
     },
     computed: {
       itemIconClass () {
-        return this.model.isLeaf ? 'icon-file' : 'icon-folder'
+        return this.model.isLeaf ? 'vtl-icon-file' : 'vtl-icon-folder'
       },
 
       caretClass () {
-        return this.expanded ? 'icon-caret-down' : 'icon-caret-right'
+        return this.expanded ? 'vtl-icon-caret-down' : 'vtl-icon-caret-right'
       },
 
-      isFolder() {
+      isFolder () {
         return this.model.children &&
           this.model.children.length
+      },
+
+      treeNodeClass () {
+        const {
+          model: {
+            dragDisabled,
+            disabled
+          },
+          isDragEnterNode
+        } = this
+
+        return {
+          'vtl-tree-node': true,
+          'vtl-active': isDragEnterNode,
+          'vtl-drag-disabled': dragDisabled,
+          'vtl-disabled': disabled
+        }
       }
     },
     mounted () {
@@ -167,6 +184,7 @@
       },
 
       mouseOver(e) {
+        if (this.model.disabled) return
         this.isHover = true
       },
 
@@ -191,7 +209,7 @@
       },
 
       dragStart(e) {
-        if (!this.model.dragDisabled) {
+        if (!(this.model.dragDisabled || this.model.disabled)) {
           fromComp = this
           // for firefox
           e.dataTransfer.setData("data","data");
@@ -263,7 +281,7 @@
   }
 </script>
 
-<style lang="less" rel="stylesheet/less" scoped>
+<style lang="less" rel="stylesheet/less">
   @font-face {
     font-family: 'icomoon';
     src:  url('fonts/icomoon.eot?ui1hbx');
@@ -275,7 +293,7 @@
     font-style: normal;
   }
 
-  .vue-tree-icon {
+  .vtl-icon {
     /* use !important to prevent issues with browser extensions that change fonts */
     font-family: 'icomoon' !important;
     speak: none;
@@ -288,7 +306,7 @@
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    &.item-icon {
+    &.vtl-menu-icon {
       margin-right: 4px;
       &:hover {
         color: inherit;
@@ -299,52 +317,52 @@
     }
   }
 
-  .icon-file:before {
+  .vtl-icon-file:before {
     content: "\e906";
   }
-  .icon-folder:before {
+  .vtl-icon-folder:before {
     content: "\e907";
   }
-  .icon-caret-down:before {
-    content: "\e900";
-  }
-  .icon-caret-right:before {
+  .vtl-icon-caret-down:before {
     content: "\e901";
   }
-  .icon-edit:before {
+  .vtl-icon-caret-right:before {
+    content: "\e900";
+  }
+  .vtl-icon-edit:before {
     content: "\e902";
   }
-  .icon-folder-plus-e:before {
+  .vtl-icon-folder-plus-e:before {
     content: "\e903";
   }
-  .icon-plus:before {
+  .vtl-icon-plus:before {
     content: "\e904";
   }
-  .icon-trash:before {
+  .vtl-icon-trash:before {
     content: "\e905";
   }
 
 
-  .border {
+  .vtl-border {
     height: 5px;
-    &.up {
+    &.vtl-up {
       margin-top: -5px;
       background-color: transparent;
     }
-    &.bottom {
+    &.vtl-bottom {
       background-color: transparent;
     }
-    &.active {
+    &.vtl-active {
       border-bottom: 3px dashed blue;
       /*background-color: blue;*/
     }
   }
 
-  .tree-node {
+  .vtl-tree-node {
     display: flex;
     align-items: center;
     padding: 5px 0 5px 1rem;
-    .input {
+    .vtl-input {
       border: none;
       max-width: 150px;
       border-bottom: 1px solid blue;
@@ -352,23 +370,23 @@
     &:hover {
       background-color: #f0f0f0;
     }
-    &.active {
+    &.vtl-active {
       outline: 2px dashed pink;
     }
-    .caret {
+    .vtl-caret {
       margin-left: -1rem;
     }
-    .operation {
+    .vtl-operation {
       margin-left: 2rem;
       letter-spacing: 1px;
     }
   }
 
 
-  .item {
+  .vtl-item {
     cursor: pointer;
   }
-  .tree-margin {
+  .vtl-tree-margin {
     margin-left: 2em;
   }
 </style>