add :key, publish version 0.5.0, update demo

Author: megafetis

README.md

@@ -10,12 +10,12 @@ Thanks to [hukaibaihu](https://github.com/hukaibaihu/vue-org-tree) and his sourc
 <template>
     <h1>Basic</h1>
     <div>
-        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'" :collapsable="true"></blocks-tree>
+        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'"  :collapsable="true"></blocks-tree>
     </div>
 
     <h1>With slots</h1>
     <div>
-        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'" :collapsable="true">
+        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'" :collapsable="true" :props="{label: 'label', expand: 'expand', children: 'children',  key:'some_id'}">
         <template #node="{data,context}">
             <span>
                 <input type="checkbox" :checked="selected.indexOf(data.some_id)> -1" @change="(e)=>toggleSelect(data,e.target.checked)"/> {{data.label}}
@@ -141,7 +141,7 @@ createApp(App)
   prop              | descripton                              | type                   | default
   ------------------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
   data              |                                         | `Object`               |
-  props             |  configure props                        | `Object`               | `{label: 'label', children: 'children', expand: 'expand'}`
+  props             |  configure props                        | `Object`               | `{label: 'label', children: 'children', expand: 'expand',key: 'id'}`
   labelWidth        |  node label width                       | `String` \| `Number`   | `auto`
   collapsable       |  children node is collapsable           | `Boolean`              | `true`
   renderContent     |  how to render node label               | `Function`             |     -

demo/demo-app.vue

@@ -7,24 +7,32 @@
 
     <h1>Basic</h1>
     <div>
-        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'" :collapsable="true"></blocks-tree>
+        <blocks-tree :props="{label: 'label', expand: 'expand', children: 'children',  key:'some_id'}" :data="treeData" :horizontal="treeOrientation=='1'" :collapsable="true"></blocks-tree>
     </div>
     <h1>With slots</h1>
     <div>
-        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'" :collapsable="true">
+        <blocks-tree :data="treeData" :props="{label: 'label', expand: 'expand', children: 'children',  key:'some_id'}" :horizontal="treeOrientation=='1'" :collapsable="true">
         <template #node="{data,context}">
             <span>
-                <input type="checkbox" :checked="selected.indexOf(data.some_id)> -1" @change="(e)=>toggleSelect(data,e.target.checked)"/> {{data.label}}
+                <input type="checkbox" :checked="selected.indexOf(data.some_id)> -1" @change="(e)=>toggleSelect(data,e.target.checked)"/> <strong>#{{data.some_id}}</strong> {{data.label}} &nbsp; <a v-if="data.some_id != treeData.some_id" title="Delete item" style="color:red;cursor:pointer;" @click="()=>deleteNode(data,treeData)">x</a>
             </span>
             <br/>
             <span v-if="data.children && data.children.length">
                 <a href="#" @click="context.toggleExpand">toggle expand</a>
             </span>
+
+
+
         </template>
         </blocks-tree>
         <div>
         Selected: {{selected}}
         </div>
+        <div>
+            <label for="add_leaf">Add leaf to item with id:</label>
+            <input id="add_leaf" v-model="inputLeafId" type="number"/> <button @click="()=>tryAddLeaf(inputLeafId,treeData)">+</button>
+
+        </div>
     </div>
 </template>
 <script>
@@ -33,7 +41,7 @@ import { defineComponent,ref,reactive } from 'vue';
 export default defineComponent({
 
     setup() {
-
+        let inputLeafId = ref();
         let selected = ref([]);
         let treeOrientation = ref("0");
         let treeData = reactive({
@@ -72,11 +80,47 @@ export default defineComponent({
             }
         }
 
+        const tryAddLeaf = (parentId,tree) => {
+            
+            let isParent = tree.some_id == parentId;
+            if(isParent){
+                let some_id = parseInt(Math.random()*100)
+                let leaf = {
+                    label:`child of ${tree.label}`,
+                    some_id:some_id,
+                }
+                if(!tree.children) {
+                    tree.expand = true;
+                    tree.children = [];
+                }
+
+                tree.children.push(leaf);
+
+            }else if(tree.children){
+                tree.children.forEach(ch=> tryAddLeaf(parentId,ch))
+            }
+        }
+
+        const deleteNode = (node,tree) => {
+
+            let parent = tree.children ? tree.children.find(p=>p.some_id == node.some_id) : null;
+            if(parent){
+                tree.children.splice(tree.children.indexOf(node),1)
+            }else if(tree.children) {
+                tree.children.forEach(ch=> deleteNode(node,ch))
+            }
+
+
+        }
+
         return {
             treeData,
             selected,
             toggleSelect,
-            treeOrientation
+            treeOrientation,
+            inputLeafId,
+            tryAddLeaf,
+            deleteNode
         }
     }
 })

dist/vue3-blocks-tree.common.js

@@ -1,6 +1,6 @@
 {
   "name": "vue3-blocks-tree",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "A vue3 block organization tree view component. Hierarchical horizontal or vertical tree",
   "main": "dist/vue3-blocks-tree.common.js",
   "unpkg": "dist/vue3-blocks-tree.umd.js",

dist/vue3-blocks-tree.common.js.map

@@ -14,7 +14,7 @@
             </div>
         </div>
         <div v-if="(collapsable && expanded && !isLeaf) || (!collapsable && !isLeaf)" class="org-tree-node-children">
-            <blocks-node v-for="ch in data[props.children]"
+            <blocks-node v-for="ch in data[props.children]" :key="ch[props.key] || ch[props.label]"
                 :data="ch"
                 :props="props"
                 :collapsable="collapsable"
@@ -51,7 +51,8 @@ export default defineComponent({
             default:()=>({
                 label: 'label',
                 expand: 'expand',
-                children: 'children'
+                children: 'children',
+                key:'id'
             })
         },
         collapsable:{

dist/vue3-blocks-tree.umd.js

@@ -2,6 +2,7 @@
   <div class="org-tree-container">
     <div class="org-tree" :class="{horizontal, collapsable}">
       <blocks-node
+        :key="data[props.key] || data[props.label]"
         :data="data"
         :props="props"
         :horizontal="horizontal"
@@ -42,7 +43,8 @@ export default defineComponent({
       default: () => (<PropsType>{
         label: 'label',
         expand: 'expand',
-        children: 'children'
+        children: 'children',
+        key:'id'
       })
     },
     horizontal: Boolean,