w-component-vue 2.2.91 → 2.3.1

package/docs/examples/w-tree_events.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -147,6 +147,8 @@
                 @change-view-items="changeViewItems"
                 @change-height-of-items="changeHeightOfItems"
                 @render="render"
+                @update:data="changeData"
+                @change-item="changeItem"
             ></w-tree>
         </div>
     </v-app>
@@ -595,6 +597,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -604,10 +609,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_filterKeywords_filterFunction.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -598,6 +598,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -607,10 +610,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_filterKeywords_noResultsText.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -598,6 +598,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -607,10 +610,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_filterKeywords_noResultsText_selectable.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -667,6 +667,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -676,10 +679,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_iconSize(20).html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -589,6 +589,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -598,10 +601,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_iconSize(20)_defItemHeight(24).html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -590,6 +590,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -599,10 +602,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_iconSize(30)_defItemHeight(36).html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -590,6 +590,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -599,10 +602,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_iconToggleColor_iconToggleBackgroundColor_iconToggleBackgroundColorHover.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -593,6 +593,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -602,10 +605,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_indent.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -589,6 +589,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -598,10 +601,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_itemRippleColor.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -589,6 +589,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -598,10 +601,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_itemTextColor_itemTextColorHover_itemBackgroundColor_itemBackgroundColorHover.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -594,6 +594,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -603,10 +606,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_keyPrimary_keyText_keyChildren.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -591,6 +591,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -600,10 +603,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_no viewHeightMax.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -589,6 +589,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -598,10 +601,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/w-tree_operatable.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -146,6 +146,8 @@
                 :data.sync="WTree.option.items"
                 :operatable="true"
                 @click-operate-item="clickOperateItem"
+                @update:data="changeData"
+                @change-item="changeItem"
             ></w-tree>
         </div>
     </v-app>
@@ -594,6 +596,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -603,10 +608,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);

package/docs/examples/{w-tree_operatable_operateBtnTooltip_operateItemTextForInsertBefore_perateItemTextForInsertChild.html → w-tree_operatable_draggable.html}

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.91/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.1/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -135,24 +135,20 @@
             >w-tree</span>
         </div>
         <div class="bk">
-            <div
-                class="item"
-            >operatable &amp; operateBtnTooltip &amp; operateItemTextForInsertBefore &amp; perateItemTextForInsertChild &amp; operateItemTextForInsertAfter &amp; operateItemTextForInsertDelete</div>
+            <div class="item">operatable &amp; draggable</div>
 
             <div
                 style="margin-bottom:5px; color:#f26; font-size:0.8rem;"
-            >* Disable show and hide nodes when using operatable</div>
+            >* Disable show and hide nodes when using operatable or draggable</div>
 
             <w-tree
                 style="width:350px; border:1px solid #ddd;"
                 :data.sync="WTree.option.items"
+                :draggable="true"
                 :operatable="true"
-                :operate-btn-tooltip="'編輯'"
-                :operate-item-text-for-insert-before="'插入前項目'"
-                :operate-item-text-for-insert-child="'插入子項目'"
-                :operate-item-text-for-insert-after="'插入後項目'"
-                :operate-item-text-for-insert-delete="'刪除項目'"
                 @click-operate-item="clickOperateItem"
+                @update:data="changeData"
+                @change-item="changeItem"
             ></w-tree>
         </div>
     </v-app>
@@ -601,6 +597,9 @@
         console.log("funActive", msg);
         return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
       },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
       changeSelections: function(msg) {
         console.log("changeSelections", msg);
       },
@@ -610,10 +609,17 @@
       changeHeightOfItems: function(msg) {
         console.log("changeHeightOfItems", msg);
       },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 
-        //fun
+        //fun, 僅處理並回傳新項目, 不處理刪除項目
         let fun = function() {
           return new Promise(function(resolve, reject) {
             let id = Math.floor(Math.random() * 1000);