chore(version): 1.3.0

feat: support closing operation icons
chore(version): 1.2.0
2019-02-23 11:54:26 +08:00 · 2019-02-23 11:52:58 +08:00 · 2019-02-23 10:46:47 +08:00 · 2019-02-23 10:44:34 +08:00
7 changed files with 225 additions and 151 deletions
--- a/dev/App.vue
+++ b/dev/App.vue
@@ -3,13 +3,17 @@
        <button @click="addNode">Add Node</button>
        <vue-tree-list
          @click="onClick"
-          @change-name="onChange"
-          @delete-node="onChange"
-          @add-node="onChange"
+          @change-name="onChangeName"
+          @delete-node="onDel"
+          @add-node="onAddNode"
          :model="data"
          default-tree-node-name="new node"
          default-leaf-node-name="new leaf"
          v-bind:default-expanded="false">
+          <span class="icon" slot="addTreeNode">addTreeNode</span>
+          <span class="icon" slot="addLeafNode">addLeafNode</span>
+          <span class="icon" slot="editNode">editNode</span>
+          <span class="icon" slot="delNode">delNode</span>
        </vue-tree-list>
        <button @click="getNewTree">Get new tree</button>
        <pre>
@@ -32,6 +36,10 @@
            id: 1,
            pid: 0,
            dragDisabled: true,
+            addTreeNodeDisabled: true,
+            addLeafNodeDisabled: true,
+            editNodeDisabled: true,
+            delNodeDisabled: true,
            children: [
              {
                name: 'Node 1-2',
@@ -56,8 +64,21 @@
      }
    },
    methods: {
-      onChange (data) {
-        console.log(data)
+      onDel (params) {
+        console.log(params)
+        node.remove()
+      },
+
+      onChangeName (params) {
+        console.log(params)
+      },
+
+      onAddNode (params) {
+        console.log(params)
+      },
+
+      onClick (params) {
+        console.log(params)
      },

      addNode () {
@@ -108,3 +129,11 @@
    }
  }
 </style>
+
+<style lang="less" rel="stylesheet/less" scoped>
+  .icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+</style>
--- a/dev/index.html
+++ b/dev/index.html
@@ -3,7 +3,7 @@
 <head>
    <meta name="viewport" content="with=device-width,initial-scale=1.0,
      maximum-scale=1.0,minimum-scale=1.0,uses-scalable=no">
-    <title>vue-date-range</title>
+    <title>vue-tree-list</title>
 </head>
 <body>
 <div id="app"></div>
--- a/dist/vue-tree-list.min.js
+++ b/dist/vue-tree-list.min.js
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-tree-list",
-  "version": "1.1.2",
+  "version": "1.3.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": {
@@ -54,10 +54,10 @@
    "sourcemap": "^0.1.0",
    "standard": "^12.0.1",
    "url-loader": "^0.5.7",
-    "vue": "^2.3.4",
+    "vue": "^2.6.6",
    "vue-loader": "^11.1.3",
    "vue-style-loader": "^2.0.3",
-    "vue-template-compiler": "^2.2.0",
+    "vue-template-compiler": "^2.6.6",
    "webpack": "^1.13.2",
    "webpack-dev-server": "1.14.0",
    "webpack-merge": "^0.14.1"
--- a/readme.md
+++ b/readme.md
@@ -9,26 +9,32 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
 ``npm install vue-tree-list``

 ```javascript
-<div>
+<template>
+    <div>
        <button @click="addNode">Add Node</button>
        <vue-tree-list
          @click="onClick"
-      @change-name="onChange"
-      @delete-node="onChange"
-      @add-node="onChange"
+          @change-name="onChangeName"
+          @delete-node="onDel"
+          @add-node="onAddNode"
          :model="data"
          default-tree-node-name="new node"
          default-leaf-node-name="new leaf"
          v-bind:default-expanded="false">
+          <span class="icon" slot="addTreeNode">addTreeNode</span>
+          <span class="icon" slot="addLeafNode">addLeafNode</span>
+          <span class="icon" slot="editNode">editNode</span>
+          <span class="icon" slot="delNode">delNode</span>
        </vue-tree-list>
        <button @click="getNewTree">Get new tree</button>
        <pre>
          {{newTree}}
        </pre>
-</div>
-...
-import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
-export default {
+    </div>
+</template>
+<script>
+  import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
+  export default {
    components: {
      VueTreeList
    },
@@ -41,6 +47,10 @@ export default {
            id: 1,
            pid: 0,
            dragDisabled: true,
+            addTreeNodeDisabled: true,
+            addLeafNodeDisabled: true,
+            editNodeDisabled: true,
+            delNodeDisabled: true,
            children: [
              {
                name: 'Node 1-2',
@@ -65,8 +75,21 @@ export default {
      }
    },
    methods: {
-    onChange (data) {
-      console.log(data)
+      onDel (node) {
+        console.log(node)
+        node.remove()
+      },
+
+      onChangeName (params) {
+        console.log(params)
+      },
+
+      onAddNode (params) {
+        console.log(params)
+      },
+
+      onClick (params) {
+        console.log(params)
      },

      addNode () {
@@ -102,52 +125,79 @@ export default {
        console.log(model)
      }
    }
-}
+  }
+</script>
+<style lang="less" rel="stylesheet/less">
+  .vtl {
+    .vtl-drag-disabled {
+      background-color: #d0cfcf;
+      &:hover {
+        background-color: #d0cfcf;
+      }
+    }
+    .vtl-disabled {
+      background-color: #d0cfcf;
+    }
+  }
+</style>
+
+<style lang="less" rel="stylesheet/less" scoped>
+  .icon {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+</style>
+
 ```

 # props
-**default-tree-node-name**
-
-Default name for new treenode.
-
-**default-leaf-node-name**
-
-Default name for new leafnode.
+## props of vue-tree-list
+| name | type | default | description |
+|:-----:|:-------:|:------------:|:----:|
+model | TreeNode | - | You can use `const head = new Tree([])` to generate a tree with the head of `TreeNode` type
+default-tree-node-name | string | New node node | Default name for new treenode
+default-leaf-node-name | string | New leaf node | Default name for new leafnode
+default-expanded | boolean | true | Tree is expanded or not


-**onDeleteNode**
-
-```javascript
-onDeleteNode(confirm) {
-  if (something) {
-    confirm()
-  }
-}
-```
-
-**default-expanded**
-
-Default node is expanded or not.
+## props of TreeNode
+### attributes
+| name | type | default | description |
+|:-----:|:-------:|:------------:|:----:|
+id | string, number | current timestamp | The node's id
+isLeaf | boolean | false | The node is leaf or not
+dragDisabled | boolean | false | Forbid dragging tree node
+addTreeNodeDisabled | boolean | false | Show `addTreeNode` button or not
+addLeafNodeDisabled | boolean | false | Show `addLeafNode` button or not
+editNodeDisabled | boolean | false | Show `editNode` button or not
+delNodeDisabled | boolean | false | Show `delNode` button or not
+children | array | null | The children of node

+### methods
+| name | params | description |
+|:-----:|:-------:|:----:|
+changeName | name | Change node's name
+addChildren | children: object, array | Add children to node
+remove | - | Remove node from the tree
+moveInto | target: TreeNode | Move node into another node
+insertBefore | target: TreeNode | Move node before another node
+insertAfter | target: TreeNode | Move node after another node

 # events
-**click**
+| name | params | description |
+|:-----:|:-------:|:------------:|:----:|
+click | TreeNode | Trigger when clicking a tree node
+change-name | {'id', 'oldName', 'newName'} | Trigger after changing a node's name
+delete-node | TreeNode | Trigger when clicking `delNode` button. You can call `remove` of `TreeNode` to remove the node.
+add-node | TreeNode | Trigger after adding a new node

-**change-name**
+# customize operation icons
+The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:

-**delete-node**
-
-**add-node**
-
-# Forbid dragging
-Use `dragDisabled` to forbid dragging:
-```javascript
-data: new Tree([
-  {
-    name: 'Node 1',
-    id: 1,
-    pid: 0,
-    dragDisabled: true,
-  ...
+```html
+<span class="icon" slot="addTreeNode">addTreeNode</span>
+<span class="icon" slot="addLeafNode">addLeafNode</span>
+<span class="icon" slot="editNode">editNode</span>
+<span class="icon" slot="delNode">delNode</span>
 ```
-
--- a/src/Tree.js
+++ b/src/Tree.js
@@ -10,10 +10,8 @@
 */
 const TreeNode = function (data) {
  const { id, isLeaf } = data
-  // this.name = name
  this.id = (typeof id === 'undefined') ? new Date().valueOf() : id
  this.parent = null
-  // this.pid = null
  this.children = null
  this.isLeaf = !!isLeaf

@@ -29,7 +27,7 @@ TreeNode.prototype.changeName = function (name) {
  this.name = name
 }

-TreeNode.prototype.addChildren = function (children, isNew) {
+TreeNode.prototype.addChildren = function (children) {
  if (!this.children) {
    this.children = []
  }
--- a/src/VueTreeList.vue
+++ b/src/VueTreeList.vue
@@ -37,23 +37,23 @@
        </div>
        <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">
+          <span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf && !model.addTreeNodeDisabled">
            <slot name="addTreeNode">
              <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">
+          <span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf && !model.addLeafNodeDisabled">
            <slot name="addLeafNode">
              <i class="vtl-icon vtl-icon-plus"></i>
            </slot>
          </span>
-          <span title="edit" @click.stop.prevent="setEditable">
-            <slot name="edit">
+          <span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
+            <slot name="editNode">
              <i class="vtl-icon vtl-icon-edit"></i>
            </slot>
          </span>
-          <span title="delete" @click.stop.prevent="delNode">
-            <slot name="edit">
+          <span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
+            <slot name="delNode">
              <i class="vtl-icon vtl-icon-trash"></i>
            </slot>
          </span>
@@ -76,6 +76,10 @@
        v-bind:default-expanded="defaultExpanded"
        :model="model"
        :key='model.id'>
+          <slot name="addTreeNode" slot="addTreeNode" />
+          <slot name="addLeafNode" slot="addLeafNode" />
+          <slot name="editNode" slot="editNode" />
+          <slot name="delNode" slot="delNode" />
      </item>
    </div>
  </div>
@@ -110,10 +114,6 @@
        type: String,
        default: 'New tree node'
      },
-      onDeleteNode: {
-        type: Function,
-        default: confirm => { confirm() }
-      },
      defaultExpanded: {
        type: Boolean,
        default: true
@@ -171,9 +171,6 @@
      },

      delNode () {
-        const vm = this
-        const confirm = () => vm.model.remove()
-        this.onDeleteNode(confirm)
        var node = this.getRootNode()
        node.$emit('delete-node', this.model)
      },
Author	SHA1	Message	Date
youxingzhi	165d2dfb5d	chore(version): 1.3.0	2019-02-23 11:54:26 +08:00
youxingzhi	8f0a5d7737	feat: support closing operation icons	2019-02-23 11:52:58 +08:00
youxingzhi	a3b03a9579	chore(version): 1.2.0	2019-02-23 10:46:47 +08:00
youxingzhi	136b33971c	feat: support customizing operation icons	2019-02-23 10:44:34 +08:00