w-component-vue 2.2.34 → 2.2.37

package/docs/examples/w-tree_draggable.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.34/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.37/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -112,8 +112,7 @@
   }
   .bk {
     vertical-align: top;
-    margin: 10px 0px 0px 0px;
-    padding: 0px 0px 60px 0px;
+    padding: 10px 0px 60px 0px;
   }
   @media screen and (min-width: 1000px) {
     /* 寬版 */
@@ -121,9 +120,6 @@
       display: inline-block;
       margin: 0px 80px 0px 0px;
     }
-    .dz {
-      width: 400px;
-    }
   }
     </style>
 </head>
@@ -138,7 +134,7 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-tree</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div class="item">draggable</div>
 
             <div
@@ -146,7 +142,7 @@
             >* Disable show and hide nodes when using draggable</div>
 
             <w-tree
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
                 :draggable="true"
                 :data.sync="WTree.option.items"
             ></w-tree>
@@ -657,19 +653,27 @@
         }
         return b;
       },
-      toggleItems: function(ind, toUnfolding) {
-        console.log("toggleItems", ind, toUnfolding);
+      toggleItemsByFun: function(ind, toUnfolding) {
+        console.log("toggleItemsByFun", ind, toUnfolding);
 
         let vo = this;
 
         //toggleItemsByFun
         vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(rows => {
-          console.log("toggleItems rows", rows);
+          console.log("toggleItemsByFun rows", rows);
           return {
             row: rows[ind],
             toUnfolding
           };
         });
+      },
+      toggleItemsAll: function(toUnfolding) {
+        console.log("toggleItemsAll", toUnfolding);
+
+        let vo = this;
+
+        //toggleItemsAll
+        vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding);
       }
     }
   });

package/docs/examples/w-tree_draggable_dgInsertLineColor_dgInsertBackgroundColor_dgBelongBackgroundColor.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.34/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.37/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -112,8 +112,7 @@
   }
   .bk {
     vertical-align: top;
-    margin: 10px 0px 0px 0px;
-    padding: 0px 0px 60px 0px;
+    padding: 10px 0px 60px 0px;
   }
   @media screen and (min-width: 1000px) {
     /* 寬版 */
@@ -121,9 +120,6 @@
       display: inline-block;
       margin: 0px 80px 0px 0px;
     }
-    .dz {
-      width: 400px;
-    }
   }
     </style>
 </head>
@@ -138,7 +134,7 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-tree</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div
                 class="item"
             >draggable &amp; dgInsertLineColor &amp; dgInsertBackgroundColor &amp; dgBelongBackgroundColor</div>
@@ -148,7 +144,7 @@
             >* Disable show and hide nodes when using draggable</div>
 
             <w-tree
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
                 :draggable="true"
                 :data.sync="WTree.option.items"
                 :dg-insert-line-color="'rgba(120,220,150,0.9)'"
@@ -662,19 +658,27 @@
         }
         return b;
       },
-      toggleItems: function(ind, toUnfolding) {
-        console.log("toggleItems", ind, toUnfolding);
+      toggleItemsByFun: function(ind, toUnfolding) {
+        console.log("toggleItemsByFun", ind, toUnfolding);
 
         let vo = this;
 
         //toggleItemsByFun
         vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(rows => {
-          console.log("toggleItems rows", rows);
+          console.log("toggleItemsByFun rows", rows);
           return {
             row: rows[ind],
             toUnfolding
           };
         });
+      },
+      toggleItemsAll: function(toUnfolding) {
+        console.log("toggleItemsAll", toUnfolding);
+
+        let vo = this;
+
+        //toggleItemsAll
+        vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding);
       }
     }
   });

package/docs/examples/w-tree_draggable_dgPreviewOpacity_dgPreviewBorderWidth_dgBelongBackgroundColor.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.34/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.37/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -112,8 +112,7 @@
   }
   .bk {
     vertical-align: top;
-    margin: 10px 0px 0px 0px;
-    padding: 0px 0px 60px 0px;
+    padding: 10px 0px 60px 0px;
   }
   @media screen and (min-width: 1000px) {
     /* 寬版 */
@@ -121,9 +120,6 @@
       display: inline-block;
       margin: 0px 80px 0px 0px;
     }
-    .dz {
-      width: 400px;
-    }
   }
     </style>
 </head>
@@ -138,7 +134,7 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-tree</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div
                 class="item"
             >draggable &amp; dgPreviewOpacity &amp; dgPreviewBorderWidth &amp; dgBelongBackgroundColor</div>
@@ -148,7 +144,7 @@
             >* Disable show and hide nodes when using draggable</div>
 
             <w-tree
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
                 :draggable="true"
                 :data.sync="WTree.option.items"
                 :dg-preview-opacity="0.9"
@@ -663,19 +659,27 @@
         }
         return b;
       },
-      toggleItems: function(ind, toUnfolding) {
-        console.log("toggleItems", ind, toUnfolding);
+      toggleItemsByFun: function(ind, toUnfolding) {
+        console.log("toggleItemsByFun", ind, toUnfolding);
 
         let vo = this;
 
         //toggleItemsByFun
         vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(rows => {
-          console.log("toggleItems rows", rows);
+          console.log("toggleItemsByFun rows", rows);
           return {
             row: rows[ind],
             toUnfolding
           };
         });
+      },
+      toggleItemsAll: function(toUnfolding) {
+        console.log("toggleItemsAll", toUnfolding);
+
+        let vo = this;
+
+        //toggleItemsAll
+        vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding);
       }
     }
   });

package/docs/examples/w-tree_draggable_dgTextDisabled_dgTextDisabledColor_dgTextDisabledPaddingLeft.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.34/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.37/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -112,8 +112,7 @@
   }
   .bk {
     vertical-align: top;
-    margin: 10px 0px 0px 0px;
-    padding: 0px 0px 60px 0px;
+    padding: 10px 0px 60px 0px;
   }
   @media screen and (min-width: 1000px) {
     /* 寬版 */
@@ -121,9 +120,6 @@
       display: inline-block;
       margin: 0px 80px 0px 0px;
     }
-    .dz {
-      width: 400px;
-    }
   }
     </style>
 </head>
@@ -138,7 +134,7 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-tree</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div
                 class="item"
             >draggable &amp; dgTextDisabled &amp; dgTextDisabledColor &amp; dgTextDisabledPaddingLeft &amp; dgTextDisabledFontSize &amp; dgTextDisabledBackgroundColor</div>
@@ -148,7 +144,7 @@
             >* Disable show and hide nodes when using draggable</div>
 
             <w-tree
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
                 :draggable="true"
                 :data.sync="WTree.option.items"
                 :dg-text-disabled="'禁止拖曳至自己子節點當中'"
@@ -664,19 +660,27 @@
         }
         return b;
       },
-      toggleItems: function(ind, toUnfolding) {
-        console.log("toggleItems", ind, toUnfolding);
+      toggleItemsByFun: function(ind, toUnfolding) {
+        console.log("toggleItemsByFun", ind, toUnfolding);
 
         let vo = this;
 
         //toggleItemsByFun
         vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(rows => {
-          console.log("toggleItems rows", rows);
+          console.log("toggleItemsByFun rows", rows);
           return {
             row: rows[ind],
             toUnfolding
           };
         });
+      },
+      toggleItemsAll: function(toUnfolding) {
+        console.log("toggleItemsAll", toUnfolding);
+
+        let vo = this;
+
+        //toggleItemsAll
+        vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding);
       }
     }
   });

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.34/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.37/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -112,8 +112,7 @@
   }
   .bk {
     vertical-align: top;
-    margin: 10px 0px 0px 0px;
-    padding: 0px 0px 60px 0px;
+    padding: 10px 0px 60px 0px;
   }
   @media screen and (min-width: 1000px) {
     /* 寬版 */
@@ -121,9 +120,6 @@
       display: inline-block;
       margin: 0px 80px 0px 0px;
     }
-    .dz {
-      width: 400px;
-    }
   }
     </style>
 </head>
@@ -138,13 +134,13 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-tree</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div class="item">events</div>
 
             <w-tree
-                style="border:1px solid #ddd;"
-                :view-height-max="WTree.viewHeightMaxSync"
+                style="width:350px; border:1px solid #ddd;"
                 :data="WTree.option.items"
+                :view-height-max="WTree.viewHeightMaxSync"
                 @mouseenter="mouseenter"
                 @mouseleave="mouseleave"
                 @click="click"
@@ -659,19 +655,27 @@
         }
         return b;
       },
-      toggleItems: function(ind, toUnfolding) {
-        console.log("toggleItems", ind, toUnfolding);
+      toggleItemsByFun: function(ind, toUnfolding) {
+        console.log("toggleItemsByFun", ind, toUnfolding);
 
         let vo = this;
 
         //toggleItemsByFun
         vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(rows => {
-          console.log("toggleItems rows", rows);
+          console.log("toggleItemsByFun rows", rows);
           return {
             row: rows[ind],
             toUnfolding
           };
         });
+      },
+      toggleItemsAll: function(toUnfolding) {
+        console.log("toggleItemsAll", toUnfolding);
+
+        let vo = this;
+
+        //toggleItemsAll
+        vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding);
       }
     }
   });

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.34/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.37/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -112,8 +112,7 @@
   }
   .bk {
     vertical-align: top;
-    margin: 10px 0px 0px 0px;
-    padding: 0px 0px 60px 0px;
+    padding: 10px 0px 60px 0px;
   }
   @media screen and (min-width: 1000px) {
     /* 寬版 */
@@ -121,9 +120,6 @@
       display: inline-block;
       margin: 0px 80px 0px 0px;
     }
-    .dz {
-      width: 400px;
-    }
   }
     </style>
 </head>
@@ -138,7 +134,7 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-tree</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div class="item">filterKeywords &amp; filterFunction</div>
 
             <div style="margin-bottom:10px;">
@@ -150,10 +146,10 @@
             </div>
 
             <w-tree
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
+                :data="WTree.option.items"
                 :filter-keywords="WTree.option.keywords"
                 :filter-function="filterFunction"
-                :data="WTree.option.items"
             ></w-tree>
         </div>
     </v-app>
@@ -662,19 +658,27 @@
         }
         return b;
       },
-      toggleItems: function(ind, toUnfolding) {
-        console.log("toggleItems", ind, toUnfolding);
+      toggleItemsByFun: function(ind, toUnfolding) {
+        console.log("toggleItemsByFun", ind, toUnfolding);
 
         let vo = this;
 
         //toggleItemsByFun
         vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(rows => {
-          console.log("toggleItems rows", rows);
+          console.log("toggleItemsByFun rows", rows);
           return {
             row: rows[ind],
             toUnfolding
           };
         });
+      },
+      toggleItemsAll: function(toUnfolding) {
+        console.log("toggleItemsAll", toUnfolding);
+
+        let vo = this;
+
+        //toggleItemsAll
+        vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding);
       }
     }
   });

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.34/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.37/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -112,8 +112,7 @@
   }
   .bk {
     vertical-align: top;
-    margin: 10px 0px 0px 0px;
-    padding: 0px 0px 60px 0px;
+    padding: 10px 0px 60px 0px;
   }
   @media screen and (min-width: 1000px) {
     /* 寬版 */
@@ -121,9 +120,6 @@
       display: inline-block;
       margin: 0px 80px 0px 0px;
     }
-    .dz {
-      width: 400px;
-    }
   }
     </style>
 </head>
@@ -138,7 +134,7 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-tree</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div class="item">filterKeywords &amp; noResultsText</div>
 
             <div style="margin-bottom:10px;">
@@ -150,10 +146,10 @@
             </div>
 
             <w-tree
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
+                :data="WTree.option.items"
                 :filter-keywords="WTree.option.keywords"
                 :no-results-text="'There are no items to show...'"
-                :data="WTree.option.items"
             ></w-tree>
         </div>
     </v-app>
@@ -662,19 +658,27 @@
         }
         return b;
       },
-      toggleItems: function(ind, toUnfolding) {
-        console.log("toggleItems", ind, toUnfolding);
+      toggleItemsByFun: function(ind, toUnfolding) {
+        console.log("toggleItemsByFun", ind, toUnfolding);
 
         let vo = this;
 
         //toggleItemsByFun
         vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(rows => {
-          console.log("toggleItems rows", rows);
+          console.log("toggleItemsByFun rows", rows);
           return {
             row: rows[ind],
             toUnfolding
           };
         });
+      },
+      toggleItemsAll: function(toUnfolding) {
+        console.log("toggleItemsAll", toUnfolding);
+
+        let vo = this;
+
+        //toggleItemsAll
+        vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding);
       }
     }
   });

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.34/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.37/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -112,8 +112,7 @@
   }
   .bk {
     vertical-align: top;
-    margin: 10px 0px 0px 0px;
-    padding: 0px 0px 60px 0px;
+    padding: 10px 0px 60px 0px;
   }
   @media screen and (min-width: 1000px) {
     /* 寬版 */
@@ -121,9 +120,6 @@
       display: inline-block;
       margin: 0px 80px 0px 0px;
     }
-    .dz {
-      width: 400px;
-    }
   }
     </style>
 </head>
@@ -138,7 +134,7 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-tree</span>
         </div>
-        <div class="bk" style="display:block; margin:0px 10px 0px 0px;">
+        <div class="bk" style="display:block;">
             <div
                 class="item"
             >filterKeywords &amp; noResultsText &amp; selectable</div>
@@ -155,7 +151,7 @@
             <div :style="'overflow-x:auto;'">
                 <div style="display:table-cell; vertical-align:top;">
                     <w-tree
-                        style="width:500px; border:1px solid #ddd;"
+                        style="width:350px; border:1px solid #ddd;"
                         :data="WTree.option.items"
                         :selectable="true"
                         :selections.sync="WTree.option.selections"
@@ -731,19 +727,27 @@
         }
         return b;
       },
-      toggleItems: function(ind, toUnfolding) {
-        console.log("toggleItems", ind, toUnfolding);
+      toggleItemsByFun: function(ind, toUnfolding) {
+        console.log("toggleItemsByFun", ind, toUnfolding);
 
         let vo = this;
 
         //toggleItemsByFun
         vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(rows => {
-          console.log("toggleItems rows", rows);
+          console.log("toggleItemsByFun rows", rows);
           return {
             row: rows[ind],
             toUnfolding
           };
         });
+      },
+      toggleItemsAll: function(toUnfolding) {
+        console.log("toggleItemsAll", toUnfolding);
+
+        let vo = this;
+
+        //toggleItemsAll
+        vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding);
       }
     }
   });