feat(event): add drop-before and drop-after

Merge pull request #37 from zymawy/patch-1
Duplicate Declaration On onClick Method
2019-07-17 09:54:15 +08:00 · 2019-06-16 10:47:35 +08:00 · 2019-06-15 05:56:21 +03:00 · 2019-03-15 22:49:45 +08:00 · 2019-03-13 09:48:20 +01:00 · 2019-03-13 09:45:25 +01:00
6 changed files with 243 additions and 152 deletions
--- a/dev/App.vue
+++ b/dev/App.vue
@@ -3,9 +3,12 @@
        <button @click="addNode">Add Node</button>
        <vue-tree-list
          @click="onClick"
-          @change-name="onChange"
+          @change-name="onChangeName"
          @delete-node="onDel"
-          @add-node="onChange"
+          @add-node="onAddNode"
          @drop="drop"
          @drop-before="dropBefore"
          @drop-after="dropAfter"
          :model="data"
          default-tree-node-name="new node"
          default-leaf-node-name="new leaf"
@@ -36,6 +39,10 @@
            id: 1,
            pid: 0,
            dragDisabled: true,
            addTreeNodeDisabled: true,
            addLeafNodeDisabled: true,
            editNodeDisabled: true,
            delNodeDisabled: true,
            children: [
              {
                name: 'Node 1-2',
@@ -61,11 +68,32 @@
    },
    methods: {
      onDel (node) {
        console.log(node)
        node.remove()
      },
-      onChange (data) {
+      onChangeName (params) {
-        console.log(data)
+        console.log(params)
      },
      onAddNode (params) {
        console.log(params)
      },
      onClick (params) {
        console.log(params)
      },
      drop: function ({node, src, target}) {
        console.log('drop', node, src, target)
      },
      dropBefore: function ({node, src, target}) {
        console.log('drop-before', node, src, target)
      },
      dropAfter: function ({node, src, target}) {
        console.log('drop-after', node, src, target)
      },
      addNode () {
--- 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.2.0",
+  "version": "1.3.2",
  "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": {
--- a/readme.md
+++ b/readme.md
@@ -9,24 +9,30 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
 ``npm install vue-tree-list``
 ```javascript
 <template>
    <div>
        <button @click="addNode">Add Node</button>
        <vue-tree-list
          @click="onClick"
-      @change-name="onChange"
+          @change-name="onChangeName"
-      @delete-node="onChange"
+          @delete-node="onDel"
-      @add-node="onChange"
+          @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>
-...
+</template>
 <script>
  import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'
  export default {
    components: {
@@ -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) {
+      onDel (node) {
-      console.log(data)
+        console.log(node)
        node.remove()
      },
      onChangeName (params) {
        console.log(params)
      },
      onAddNode (params) {
        console.log(params)
      },
      onClick (params) {
        console.log(params)
      },
      addNode () {
@@ -98,53 +121,83 @@ export default {
        vm.newTree = _dfs(vm.data)
      },
    onClick(model) {
      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**
+## 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
 Default name for new treenode.
-**default-leaf-node-name**
+## props of TreeNode
-
+### attributes
-Default name for new leafnode.
+| name | type | default | description |
-
+|:-----:|:-------:|:------------:|:----:|
-**default-expanded**
+id | string, number | current timestamp | The node's id
-
+isLeaf | boolean | false | The node is leaf or not
-Default node is expanded 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
 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
 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
 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
-**change-name**
+# customize operation icons
 The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:
-**delete-node**
+```html
-
+<span class="icon" slot="addTreeNode">addTreeNode</span>
-```javascript
+<span class="icon" slot="addLeafNode">addLeafNode</span>
-@delete-node="onDel"
+<span class="icon" slot="editNode">editNode</span>
-...
+<span class="icon" slot="delNode">delNode</span>
 onDel (node) {
  node.remove()
 },
 ```
 **add-node**
 # Forbid dragging
 Use `dragDisabled` to forbid dragging:
 ```javascript
 data: new Tree([
  {
    name: 'Node 1',
    id: 1,
    pid: 0,
    dragDisabled: true,
  ...
 ```
--- a/src/VueTreeList.vue
+++ b/src/VueTreeList.vue
@@ -2,7 +2,7 @@
  <div class='vtl'>
    <div v-if="model.name !== 'root'">
      <div class="vtl-border vtl-up" :class="{'vtl-active': isDragEnterUp}"
-        @drop="dropUp"
+        @drop="dropBefore"
        @dragenter="dragEnterUp"
        @dragover='dragOverUp'
        @dragleave="dragLeaveUp"></div>
@@ -37,22 +37,22 @@
        </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 leaf 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">
+          <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">
+          <span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
            <slot name="delNode">
              <i class="vtl-icon vtl-icon-trash"></i>
            </slot>
@@ -63,7 +63,7 @@
      <div v-if="model.children && model.children.length > 0 && expanded"
        class="vtl-border vtl-bottom"
        :class="{'vtl-active': isDragEnterBottom}"
-        @drop="dropBottom"
+        @drop="dropAfter"
        @dragenter="dragEnterBottom"
        @dragover='dragOverBottom'
        @dragleave="dragLeaveBottom"></div>
@@ -89,7 +89,7 @@
  import { Tree, TreeNode } from './Tree.js'
  import { addHandler, removeHandler } from './tools.js'
-  let fromComp = null
+  let compInOperation = null
  export default {
    data: function () {
@@ -178,8 +178,9 @@
      setEditable () {
        this.editable = true
        this.$nextTick(() => {
-          this.$refs.nodeInput.focus()
+          const $input = this.$refs.nodeInput
-//          fireFocusEvent(this.$refs.nodeInput)
+          $input.focus()
          $input.setSelectionRange(0, $input.value.length)
        })
      },
@@ -218,7 +219,7 @@
      dragStart(e) {
        if (!(this.model.dragDisabled || this.model.disabled)) {
-          fromComp = this
+          compInOperation = this
          // for firefox
          e.dataTransfer.setData("data","data");
          e.dataTransfer.effectAllowed = 'move'
@@ -227,14 +228,14 @@
        return false
      },
      dragEnd(e) {
-        fromComp = null
+        compInOperation = null
      },
      dragOver(e) {
        e.preventDefault()
        return true
      },
      dragEnter(e) {
-        if (!fromComp) return
+        if (!compInOperation) return
        if (this.model.isLeaf) return
        this.isDragEnterNode = true
      },
@@ -242,13 +243,16 @@
        this.isDragEnterNode = false
      },
      drop(e) {
-        if (!fromComp) return
+        if (!compInOperation) return
-        fromComp.model.moveInto(this.model)
+        const oldParent = compInOperation.model.parent;
        compInOperation.model.moveInto(this.model)
        this.isDragEnterNode = false
        var node = this.getRootNode();
        node.$emit('drop', {target: this.model, node: compInOperation.model, src: oldParent})
      },
      dragEnterUp () {
-        if (!fromComp) return
+        if (!compInOperation) return
        this.isDragEnterUp = true
      },
      dragOverUp (e) {
@@ -256,17 +260,20 @@
        return true
      },
      dragLeaveUp () {
-        if (!fromComp) return
+        if (!compInOperation) return
        this.isDragEnterUp = false
      },
-      dropUp () {
+      dropBefore () {
-        if (!fromComp) return
+        if (!compInOperation) return
-        fromComp.model.insertBefore(this.model)
+        const oldParent = compInOperation.model.parent;
        compInOperation.model.insertBefore(this.model)
        this.isDragEnterUp = false
        var node = this.getRootNode();
        node.$emit('drop-before', {target: this.model, node: compInOperation.model, src: oldParent})
      },
      dragEnterBottom () {
-        if (!fromComp) return
+        if (!compInOperation) return
        this.isDragEnterBottom = true
      },
      dragOverBottom (e) {
@@ -274,13 +281,16 @@
        return true
      },
      dragLeaveBottom () {
-        if (!fromComp) return
+        if (!compInOperation) return
        this.isDragEnterBottom = false
      },
-      dropBottom () {
+      dropAfter () {
-        if (!fromComp) return
+        if (!compInOperation) return
-        fromComp.model.insertAfter(this.model)
+        const oldParent = compInOperation.model.parent;
        compInOperation.model.insertAfter(this.model)
        this.isDragEnterBottom = false
        var node = this.getRootNode();
        node.$emit('drop-after', {target: this.model, node: compInOperation.model, src: oldParent})
      },
      getRootNode() {
        var node = this.$parent
Author	SHA1	Message	Date
youxingzhi	cf41282fcf	feat(event): add drop-before and drop-after	2019-07-17 09:54:15 +08:00
ayou	6154cfd1ad	Merge pull request #37 from zymawy/patch-1 Duplicate Declaration On onClick Method	2019-06-16 10:47:35 +08:00
Hamza Ironside	51167862c9	Duplicate Declaration On onClick Method There Were Two Methods With The Same Name	2019-06-15 05:56:21 +03:00
ayou	e38102ed71	Merge pull request #27 from iakta/feature/drop-events Feature/drop events	2019-03-15 22:49:45 +08:00
Salvatore Giordano	d605642199	feat(events): add docs for drop and drop-up	2019-03-13 09:48:20 +01:00
Salvatore Giordano	62335d9eac	feat(events): rename event using dashes	2019-03-13 09:45:25 +01:00
Salvatore Giordano	625dadcb44	feat(events): add dropBottom event	2019-03-13 09:30:13 +01:00
youxingzhi	87b8a30bfb	fix(demo): change param name	2019-03-13 12:09:53 +08:00
youxingzhi	2164d032ca	feat: #23	2019-03-13 12:05:34 +08:00
Salvatore Giordano	538678d916	fix(events): fix oldParent object in drop events	2019-03-12 16:29:49 +01:00
Salvatore Giordano	dd3d61ddf7	feat(events): update version	2019-03-12 16:21:58 +01:00
Salvatore Giordano	e7757b97a7	feat(events): add oldParent information in drop event	2019-03-12 16:15:18 +01:00
Salvatore Giordano	76e67c583c	feat(events): emit drop and dropup events	2019-03-12 15:20:52 +01:00
youxingzhi	106708217f	chore(readme): fix format	2019-02-23 11:58:16 +08:00
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