1.1.3 using random treeId instead of vm._uid

Author: phphe

dist/he-tree-vue.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * he-tree-vue v1.1.2
+ * he-tree-vue v1.1.3
  * (c) phphe <phphe@outlook.com> (https://github.com/phphe)
  * Homepage: https://he-tree-vue.phphe.com
  * Released under the MIT License.
@@ -117,7 +117,7 @@ const template = function template(h) {
   return h("div", {
     "class": `he-tree ${this.treeClass}`,
     "attrs": {
-      "data-tree-id": this._uid
+      "data-tree-id": this.treeId
     }
   }, [this.blockHeader && this.blockHeader(), childrenListTpl(this.rootNode.children, this.rootNode, []), this.blockFooter && this.blockFooter()]);
 };
@@ -145,7 +145,8 @@ const Tree = {
   data() {
     return {
       trees,
-      treeClass: ''
+      treeClass: '',
+      treeId: hp.strRand()
     };
   },
 
@@ -225,9 +226,9 @@ const Tree = {
       immediate: true
     }); //
 
-    this.$set(this.trees, this._uid, this);
+    this.$set(this.trees, this.treeId, this);
     this.$once('hook:beforeDestroy', () => {
-      this.$delete(this.trees, this._uid);
+      this.$delete(this.trees, this.treeId);
     });
   },
 

dist/he-tree-vue.esm.js

@@ -1,11 +1,11 @@
 /*!
- * he-tree-vue v1.1.2
+ * he-tree-vue v1.1.3
  * (c) phphe <phphe@outlook.com> (https://github.com/phphe)
  * Homepage: https://he-tree-vue.phphe.com
  * Released under the MIT License.
  */
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { TreeData, findParent, hasClass, getOffset, getBoundingClientRect, elementsFromPoint, isDescendantOf, attachCache, insertAfter, removeEl, waitTime, binarySearch, findNodeList, appendTo, insertBefore, prependTo, createElementFromHTML, addClass, iterateAll, resolveValueOrGettter, arrayWithoutEnd, arrayLast } from 'helper-js';
+import { TreeData, strRand, findParent, hasClass, getOffset, getBoundingClientRect, elementsFromPoint, isDescendantOf, attachCache, insertAfter, removeEl, waitTime, binarySearch, findNodeList, appendTo, insertBefore, prependTo, createElementFromHTML, addClass, iterateAll, resolveValueOrGettter, arrayWithoutEnd, arrayLast } from 'helper-js';
 import { updatablePropsEvenUnbound, hookHelper } from 'vue-functions';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
 import Vue from 'vue';
@@ -111,7 +111,7 @@ var template = function template(h) {
   return h("div", {
     "class": "he-tree ".concat(this.treeClass),
     "attrs": {
-      "data-tree-id": this._uid
+      "data-tree-id": this.treeId
     }
   }, [this.blockHeader && this.blockHeader(), childrenListTpl(this.rootNode.children, this.rootNode, []), this.blockFooter && this.blockFooter()]);
 };
@@ -139,7 +139,8 @@ var Tree = {
   data() {
     return {
       trees,
-      treeClass: ''
+      treeClass: '',
+      treeId: strRand()
     };
   },
 
@@ -219,9 +220,9 @@ var Tree = {
       immediate: true
     }); //
 
-    this.$set(this.trees, this._uid, this);
+    this.$set(this.trees, this.treeId, this);
     this.$once('hook:beforeDestroy', () => {
-      this.$delete(this.trees, this._uid);
+      this.$delete(this.trees, this.treeId);
     });
   },
 

dist/he-tree-vue.js

@@ -1,5 +1,5 @@
 /*!
- * he-tree-vue v1.1.2
+ * he-tree-vue v1.1.3
  * (c) phphe <phphe@outlook.com> (https://github.com/phphe)
  * Homepage: https://he-tree-vue.phphe.com
  * Released under the MIT License.
@@ -949,6 +949,29 @@
   }
 
 
+  function numRand(min, max) {
+    if (arguments.length === 1) {
+      max = min;
+      min = 0;
+    }
+
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+
+  function strRand() {
+    var len = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 8;
+    var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var r = '';
+    var seeds = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+    for (var i = 0; i < len; i++) {
+      r += seeds[numRand(seeds.length - 1)];
+    }
+
+    return prefix + r;
+  }
+
+
   function arrayRemove(arr, v) {
     var index;
     var count = 0;
@@ -2261,7 +2284,7 @@
     return h("div", {
       "class": "he-tree ".concat(this.treeClass),
       "attrs": {
-        "data-tree-id": this._uid
+        "data-tree-id": this.treeId
       }
     }, [this.blockHeader && this.blockHeader(), childrenListTpl(this.rootNode.children, this.rootNode, []), this.blockFooter && this.blockFooter()]);
   };
@@ -2290,7 +2313,8 @@
     data: function data() {
       return {
         trees: trees,
-        treeClass: ''
+        treeClass: '',
+        treeId: strRand()
       };
     },
     // computed: {},
@@ -2358,9 +2382,9 @@
         immediate: true
       }); //
 
-      this.$set(this.trees, this._uid, this);
+      this.$set(this.trees, this.treeId, this);
       this.$once('hook:beforeDestroy', function () {
-        _this2.$delete(_this2.trees, _this2._uid);
+        _this2.$delete(_this2.trees, _this2.treeId);
       });
     },
     // mounted() {},

dist/he-tree-vue.min.js

@@ -1,6 +1,6 @@
 {
   "name": "he-tree-vue",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A draggable sortable nested vue tree component.",
   "main": "dist/he-tree-vue.cjs.js",
   "module": "dist/he-tree-vue.esm.js",

package.json

@@ -52,7 +52,7 @@ const template = function (h) {
       {nodes.map(branchTpl)}
     </div>
   }
-  return <div class={`he-tree ${this.treeClass}`} data-tree-id={this._uid}>
+  return <div class={`he-tree ${this.treeClass}`} data-tree-id={this.treeId}>
     {this.blockHeader && this.blockHeader()}
     {childrenListTpl(this.rootNode.children, this.rootNode, [])}
     {this.blockFooter && this.blockFooter()}
@@ -78,6 +78,7 @@ const Tree = {
     return {
       trees,
       treeClass: '',
+      treeId: hp.strRand(),
     }
   },
   // computed: {},
@@ -134,9 +135,9 @@ const Tree = {
     this.$watch('rootNode', updateRootNode, {immediate: true})
     this.$watch('treeData', updateRootNode, {immediate: true})
     //
-    this.$set(this.trees, this._uid, this)
+    this.$set(this.trees, this.treeId, this)
     this.$once('hook:beforeDestroy', () => {
-      this.$delete(this.trees, this._uid)
+      this.$delete(this.trees, this.treeId)
     })
   },
   // mounted() {},

src/components/Tree.vue

@@ -48,6 +48,7 @@ export class Tree extends Vue{
   // data
   trees: Trees
   treeClass: string
+  treeId: string
   // methods
   iteratePath(path: Path, opt?: iteratePathOptions): IterableIterator<[Path, Node]>
   getTreeVmByTreeEl(treeEl: HTMLElement): Vue