add demo

package.json

@@ -27,7 +27,6 @@
   },
   "homepage": "https://github.com/ParadeTo/vue-date-range#readme",
   "dependencies": {
-    "font-awesome": "4.7.0",
     "jquery": "^3.2.1"
   },
   "devDependencies": {

src/Tree.js

@@ -108,6 +108,11 @@ TreeNode.prototype.moveInto = function (target) {
     return
   }
 
+  // cannot move to leaf node
+  if (target.isLeaf) {
+    return
+  }
+
   this.parent._removeChild(this)
   this.parent = target
   this.pid = target.id
@@ -135,21 +140,22 @@ TreeNode.prototype.findChildIndex = function (child) {
 
 TreeNode.prototype._beforeInsert = function (target) {
   if (this.name === 'root' || this === target) {
-    return
+    return false
   }
 
   // cannot move ancestor to child
   if (this.isTargetChild(target)) {
-    return
+    return false
   }
 
   this.parent._removeChild(this)
   this.parent = target.parent
   this.pid = target.parent.id
+  return true
 }
 
 TreeNode.prototype.insertBefore = function (target) {
-  this._beforeInsert(target)
+  if (!this._beforeInsert(target)) return
 
   const pos = target.parent.findChildIndex(target)
   target.parent.children.splice(pos, 0, this)
@@ -161,7 +167,7 @@ TreeNode.prototype.insertBefore = function (target) {
 }
 
 TreeNode.prototype.insertAfter = function (target) {
-  this._beforeInsert(target)
+  if (!this._beforeInsert(target)) return
 
   const pos = target.parent.findChildIndex(target)
   target.parent.children.splice(pos + 1, 0, this)
@@ -182,7 +188,7 @@ Tree.prototype.initNode = function (node, data) {
   for (let i = 0, len = data.length; i < len; i++) {
     var _data = data[i]
 
-    var child = new TreeNode(_data.name, _data.attrs, _data.id)
+    var child = new TreeNode(_data.name, _data.isLeaf, _data.id)
     if (_data.children && _data.children.length > 0) {
       this.initNode(child, _data.children)
     }

src/VueTree.vue

@@ -6,6 +6,7 @@
         @dragenter="dragEnterUp"
         @dragover='dragOverUp'
         @dragleave="dragLeaveUp"></div>
+
       <div class='tree-node' :id='model.id' :class="{'active': isDragEnterNode}"
         draggable="true"
         @click=""
@@ -20,10 +21,22 @@
         <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>
+
+        <span v-if="model.isLeaf">
+          <slot name="leafNodeIcon">
+            <i class="vue-tree-icon item-icon icon-file"></i>
+          </slot>
+        </span>
+        <span v-else>
+          <slot name="treeNodeIcon">
+            <i class="vue-tree-icon item-icon icon-folder"></i>
+          </slot>
+        </span>
+
         <div class="node-content" v-if="!editable">
           {{model.name}}
         </div>
-        <input v-else class="input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
+        <input v-else class="vue-tree-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
         <div class="operation" v-show="isHover">
           <span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf">
             <slot name="addTreeNode">
@@ -47,6 +60,7 @@
           </span>
         </div>
       </div>
+
       <div v-if="model.children && model.children.length > 0 && expanded"
         class="border bottom"
         :class="{'active': isDragEnterBottom}"
@@ -55,8 +69,13 @@
         @dragover='dragOverBottom'
         @dragleave="dragLeaveBottom"></div>
     </div>
+
     <div :class="{'tree-margin': model.name !== 'root'}" v-show="expanded" v-if="isFolder">
-      <item v-for="model in model.children" :model="model" :key='model.id' :current-highlight='currentHighlight' :default-text='defaultText' 　:hover-color='hoverColor' :highlight-color='highlightColor'>
+      <item v-for="model in model.children"
+        :default-tree-node-name="defaultTreeNodeName"
+        :default-leaf-node-name="defaultLeafNodeName"
+        :model="model"
+        :key='model.id'>
       </item>
     </div>
   </div>
@@ -79,9 +98,23 @@
       }
     },
     props: {
-      model: Object
+      model: {
+        type: Object
+      },
+      defaultLeafNodeName: {
+        type: String,
+        default: 'New leaf node'
+      },
+      defaultTreeNodeName: {
+        type: String,
+        default: 'New tree node'
+      }
     },
     computed: {
+      itemIconClass () {
+        return this.model.isLeaf ? 'icon-file' : 'icon-folder'
+      },
+
       caretClass () {
         return this.expanded ? 'icon-caret-down' : 'icon-caret-right'
       },
@@ -141,6 +174,7 @@
       },
 
       addChild(isLeaf) {
+        const name = isLeaf ? this.defaultLeafNodeName : this.defaultTreeNodeName
         this.expanded = true
         var node = new TreeNode(name, isLeaf)
         this.model.addChildren(node, true)
@@ -160,6 +194,9 @@
         return true
       },
       dragEnter(e) {
+        if (this.model.isLeaf) {
+          return
+        }
         this.isDragEnterNode = true
       },
       dragLeave(e) {
@@ -231,11 +268,23 @@
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    &.item-icon {
+      margin-right: 4px;
+      &:hover {
+        color: inherit;
+      }
+    }
     &:hover {
       color: blue;
     }
   }
 
+  .icon-file:before {
+    content: "\e906";
+  }
+  .icon-folder:before {
+    content: "\e907";
+  }
   .icon-caret-down:before {
     content: "\e900";
   }
@@ -289,15 +338,9 @@
     .caret {
       margin-left: -1rem;
     }
-    /*.fa {*/
-      /*color: #ddd;*/
-      /*&:hover {*/
-        /*color: blue;*/
-      /*}*/
-    /*}*/
     .operation {
       margin-left: 2rem;
-      letter-spacing: 1.2px;
+      letter-spacing: 1px;
     }
   }
 

src/fonts/icomoon.svg

@@ -13,4 +13,6 @@
 <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" />
 <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" />
 <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" />
+<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" />
+<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" />
 </font></defs></svg>