removed husky and git-cz

Feature: Added toggle() method to the node passed to TreeNode.click()…

.commitlintrc.yml

@@ -1,2 +0,0 @@
-extends:
-  - "@commitlint/config-conventional"

.czrc

@@ -1,3 +0,0 @@
-{
-  "path": "cz-conventional-changelog"
-}

.gitignore

@@ -21,3 +21,26 @@ yarn-error.log*
 *.sw?
 
 coverage
+
+
+# Created by https://www.toptal.com/developers/gitignore/api/yarn
+# Edit at https://www.toptal.com/developers/gitignore?templates=yarn
+
+### yarn ###
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+
+.yarn/*
+!.yarn/releases
+!.yarn/patches
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+# if you are NOT using Zero-installs, then:
+# comment the following lines
+#!.yarn/cache
+
+# and uncomment the following lines
+.pnp.*
+
+# End of https://www.toptal.com/developers/gitignore/api/yarn

.huskyrc.yml

@@ -1,3 +0,0 @@
-hooks:
-  pre-commit: npm run lint-staged
-  commit-msg: commitlint -E HUSKY_GIT_PARAMS

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

dev/App.vue

@@ -14,6 +14,11 @@
       default-leaf-node-name="new leaf"
       v-bind:default-expanded="false"
     >
+      <template v-slot:leafNameDisplay="slotProps">
+        <span>
+          {{ slotProps.model.name }} <span class="muted">#{{ slotProps.model.id }}</span>
+        </span>
+      </template>
       <template v-slot:addTreeNodeIcon="slotProps">
         <span class="icon">📂</span>
       </template>
@@ -41,9 +46,8 @@
     </vue-tree-list>
     <button @click="getNewTree">Get new tree</button>
     <pre>
-          {{ newTree }}
-        </pre
-    >
+      {{ newTree }}
+    </pre>
   </div>
 </template>
 <script>
@@ -176,4 +180,9 @@ export default {
     cursor: pointer;
   }
 }
+
+.muted {
+  color: gray;
+  font-size: 80%;
+}
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-tree-list",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "A vue component for tree structure. Support adding treenode/leafnode, editing node's name and dragging.",
   "author": "ayou",
   "scripts": {
@@ -10,11 +10,9 @@
     "test:coverage": "vue-cli-service test:unit --coverage",
     "lint": "vue-cli-service lint",
     "lint-staged": "lint-staged",
-    "commit": "npx git-cz",
     "prepublish": "npm run build"
   },
   "main": "dist/vue-tree-list.umd.min.js",
-  "dependencies": {},
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.0",
@@ -27,7 +25,6 @@
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-vue": "^5.0.0",
-    "husky": "^4.2.1",
     "jest-serializer-vue": "^2.0.2",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
@@ -58,5 +55,6 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ParadeTo/vue-tree-list.git"
-  }
+  },
+  "packageManager": "yarn@3.2.0"
 }

readme.md

@@ -1,6 +1,7 @@
 [![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.
 
 ![vue-tree-demo.gif](https://raw.githubusercontent.com/ParadeTo/vue-tree-list/master/img/demo.gif)
@@ -21,7 +22,8 @@ Vue.use(VueTreeList)
 Or just register locally like the example below.
 
 # use
-``npm install vue-tree-list``
+
+`npm install vue-tree-list`
 
 ```html
 <template>
@@ -35,7 +37,13 @@ Or just register locally like the example below.
       :model="data"
       default-tree-node-name="new node"
       default-leaf-node-name="new leaf"
-      v-bind:default-expanded="false">
+      v-bind:default-expanded="false"
+    >
+      <template v-slot:leafNameDisplay="slotProps">
+        <span>
+          {{ slotProps.model.name }} <span class="muted">#{{ slotProps.model.id }}</span>
+        </span>
+      </template>
       <span class="icon" slot="addTreeNodeIcon">📂</span>
       <span class="icon" slot="addLeafNodeIcon">＋</span>
       <span class="icon" slot="editNodeIcon">📃</span>
@@ -56,7 +64,7 @@ Or just register locally like the example below.
     components: {
       VueTreeList
     },
-    data () {
+    data() {
       return {
         newTree: {},
         data: new Tree([
@@ -93,32 +101,32 @@ Or just register locally like the example below.
       }
     },
     methods: {
-      onDel (node) {
+      onDel(node) {
         console.log(node)
         node.remove()
       },
 
-      onChangeName (params) {
+      onChangeName(params) {
         console.log(params)
       },
 
-      onAddNode (params) {
+      onAddNode(params) {
         console.log(params)
       },
 
-      onClick (params) {
+      onClick(params) {
         console.log(params)
       },
 
-      addNode () {
+      addNode() {
         var node = new TreeNode({ name: 'new node', isLeaf: false })
         if (!this.data.children) this.data.children = []
         this.data.addChildren(node)
       },
 
-      getNewTree () {
+      getNewTree() {
         var vm = this
-        function _dfs (oldNode) {
+        function _dfs(oldNode) {
           var newNode = {}
 
           for (var k in oldNode) {
@@ -137,8 +145,7 @@ Or just register locally like the example below.
         }
 
         vm.newTree = _dfs(vm.data)
-      },
-      
+      }
     }
   }
 </script>
@@ -163,58 +170,71 @@ Or just register locally like the example below.
       cursor: pointer;
     }
   }
-</style>
 
+  .muted {
+    color: gray;
+    font-size: 80%;
+  }
+</style>
 ```
 
 # props
-## 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
 
+## 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                                   |
 
 ## 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
+
+|        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
+
+|     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
-| 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
+
+|    name     |            params            |                                                                           description                                                                           |
+| :---------: | :--------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|    click    |           TreeNode           |                                Trigger when clicking a tree node. You can call `toggle` of `TreeNode` to toggle the folder 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  |
 
 # customize operation icons
+
 The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them and can access `model`, `root`, `expanded` as below:
 
 ```html
+<template v-slot:leafNameDisplay="slotProps">
+  <span>{{ slotProps.model.name }} #{{ slotProps.model.id }}</span>
+</template>
 <template v-slot:addTreeNodeIcon="slotProps">
   <span class="icon">📂</span>
 </template>
@@ -232,6 +252,8 @@ The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editN
 </template>
 <template v-slot:treeNodeIcon="slotProps">
   <span class="icon">
-    {{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ? '🌲' : '' }}</span>
+    {{ (slotProps.model.children && slotProps.model.children.length > 0 && !slotProps.expanded) ?
+    '🌲' : '' }}</span
+  >
 </template>
 ```

src/VueTreeList.vue

@@ -43,7 +43,9 @@
         </span>
 
         <div class="vtl-node-content" v-if="!editable">
-          {{ model.name }}
+          <slot name="leafNameDisplay" :expanded="expanded" :model="model" :root="rootNode">
+            {{ model.name }}
+          </slot>
         </div>
         <input
           v-else
@@ -56,7 +58,7 @@
         />
         <div class="vtl-operation" v-show="isHover">
           <span
-            title="add tree node"
+            :title="defaultAddTreeNodeTitle"
             @click.stop.prevent="addChild(false)"
             v-if="!model.isLeaf && !model.addTreeNodeDisabled"
           >
@@ -65,7 +67,7 @@
             </slot>
           </span>
           <span
-            title="add leaf node"
+            :title="defaultAddLeafNodeTitle"
             @click.stop.prevent="addChild(true)"
             v-if="!model.isLeaf && !model.addLeafNodeDisabled"
           >
@@ -110,6 +112,9 @@
         :model="model"
         :key="model.id"
       >
+        <template v-slot:leafNameDisplay="slotProps">
+          <slot name="leafNameDisplay" v-bind="slotProps" />
+        </template>
         <template v-slot:addTreeNodeIcon="slotProps">
           <slot name="addTreeNodeIcon" v-bind="slotProps" />
         </template>
@@ -157,11 +162,19 @@ export default {
     },
     defaultLeafNodeName: {
       type: String,
-      default: 'New leaf node'
+      default: 'Leaf Node'
     },
     defaultTreeNodeName: {
       type: String,
-      default: 'New tree node'
+      default: 'Tree Node'
+    },
+    defaultAddTreeNodeTitle: {
+      type: String,
+      default: 'Add Tree Node'
+    },
+    defaultAddLeafNodeTitle: {
+      type: String,
+      default: 'Add Leaf Node'
     },
     defaultExpanded: {
       type: Boolean,
@@ -267,7 +280,10 @@ export default {
     },
 
     click() {
-      this.rootNode.$emit('click', this.model)
+      this.rootNode.$emit('click', {
+        toggle: this.toggle,
+        ...this.model
+      })
     },
 
     addChild(isLeaf) {

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

@@ -47,7 +47,7 @@ exports[`Render render correctly 1`] = `
           <div class="vtl-node-content">
             Node 2
           </div>
-          <div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
+          <div class="vtl-operation" style="display: none;"><span title="Add Tree Node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="Add Leaf Node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
         </div>
         <!---->
       </div>
@@ -61,7 +61,7 @@ exports[`Render render correctly 1`] = `
           <div class="vtl-node-content">
             Node 3
           </div>
-          <div class="vtl-operation" style="display: none;"><span title="add tree node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="add leaf node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
+          <div class="vtl-operation" style="display: none;"><span title="Add Tree Node"><i class="vtl-icon vtl-icon-folder-plus-e"></i></span> <span title="Add Leaf Node"><i class="vtl-icon vtl-icon-plus"></i></span> <span title="edit"><i class="vtl-icon vtl-icon-edit"></i></span> <span title="delete"><i class="vtl-icon vtl-icon-trash"></i></span></div>
         </div>
         <!---->
       </div>

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

@@ -11,7 +11,7 @@ exports[`Slot render slot correctly 1`] = `
           <div class="vtl-node-content">
             Node 1
           </div>
-          <div class="vtl-operation" style="display: none;"><span title="add tree node"><span class="add-tree-node-icon">📂</span></span> <span title="add leaf node"><span class="icon">＋</span></span> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span></span></span></div>
+          <div class="vtl-operation" style="display: none;"><span title="Add Tree Node"><span class="add-tree-node-icon">📂</span></span> <span title="Add Leaf Node"><span class="icon">＋</span></span> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span></span></span></div>
         </div>
         <div class="vtl-border vtl-bottom"></div>
       </div>
@@ -42,7 +42,7 @@ exports[`Slot render slot correctly 1`] = `
           <div class="vtl-node-content">
             Node 2
           </div>
-          <div class="vtl-operation" style="display: none;"><span title="add tree node"><span class="add-tree-node-icon">📂</span></span> <span title="add leaf node"><span class="icon">＋</span></span> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span class="del-node-icon">✂️</span></span></div>
+          <div class="vtl-operation" style="display: none;"><span title="Add Tree Node"><span class="add-tree-node-icon">📂</span></span> <span title="Add Leaf Node"><span class="icon">＋</span></span> <span title="edit"><span class="icon">📃</span></span> <span title="delete"><span class="del-node-icon">✂️</span></span></div>
         </div>
         <!---->
       </div>

tests/unit/operation.spec.js

@@ -51,7 +51,7 @@ describe('Operation', () => {
   })
 
   it('add leaf node', done => {
-    const $node1AddLeafNode = wrapper.find('#t1 [title="add leaf node"]')
+    const $node1AddLeafNode = wrapper.find('#t1 [title="Add Leaf Node"]')
     $node1AddLeafNode.trigger('click')
     Vue.nextTick(() => {
       expect(wrapper.findAll('.vtl-leaf-node').length).toBe(2)
@@ -60,7 +60,7 @@ describe('Operation', () => {
   })
 
   it('add tree node', done => {
-    const $node1AddTreeNode = wrapper.find('#t1 [title="add tree node"]')
+    const $node1AddTreeNode = wrapper.find('#t1 [title="Add Tree Node"]')
     $node1AddTreeNode.trigger('click')
     Vue.nextTick(() => {
       expect(wrapper.findAll('.vtl-tree-node').length).toBe(3)