w-component-vue 2.2.34 → 2.2.37

package/docs/examples/w-tree_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,14 +134,14 @@
                 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">selectable</div>
 
             <!-- 用:style才能支援IE11因vue會自動把overflow-x:auto轉為-ms-overflow-x:auto -->
             <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"
@@ -670,19 +666,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_selectable_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" style="display:block; margin:0px 10px 0px 0px;">
+        <div class="bk" style="display:block;">
             <div class="item">selectable &amp; draggable</div>
 
             <div
@@ -149,7 +145,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;"
                         :draggable="true"
                         :data.sync="WTree.option.items"
                         :selectable="true"
@@ -675,19 +671,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_slot.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,10 +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">slot</div>
 
-            <w-tree style="border:1px solid #ddd;" :data="WTree.option.items">
+            <w-tree
+                style="width:350px; border:1px solid #ddd;"
+                :data="WTree.option.items"
+            >
                 <template v-slot:item="props">
                     <div style="display:flex;">
                         <div
@@ -693,19 +692,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_slot_iconUncheckedColor_iconUncheckedDisabledColor_iconCheckedColor.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"
             >slot &amp; iconUncheckedColor &amp; iconUncheckedDisabledColor &amp; iconCheckedColor &amp; iconCheckedDisabledColor &amp; iconCheckedPartiallyColor &amp; iconCheckedPartiallyDisabledColor &amp; locked &amp; selectable</div>
@@ -147,7 +143,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.optionLocked.items"
                         :selectable="true"
                         :selections.sync="WTree.optionLocked.selections"
@@ -728,19 +724,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_slot_locked_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,14 +134,14 @@
                 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">slot &amp; locked &amp; selectable</div>
 
             <!-- 用:style才能支援IE11因vue會自動把overflow-x:auto轉為-ms-overflow-x:auto -->
             <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.optionLocked.items"
                         :selectable="true"
                         :selections.sync="WTree.optionLocked.selections"
@@ -720,19 +716,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_slot_operatable.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">slot &amp; operatable</div>
 
             <div
@@ -146,7 +142,7 @@
             >* Disable show and hide nodes when using operatable</div>
 
             <w-tree
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
                 :data.sync="WTree.option.items"
                 :operatable="true"
                 @click-operate-item="clickOperateItem"
@@ -669,19 +665,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_slot_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,14 +134,14 @@
                 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">slot &amp; selectable</div>
 
             <!-- 用:style才能支援IE11因vue會自動把overflow-x:auto轉為-ms-overflow-x:auto -->
             <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"
@@ -719,19 +715,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_slot_selectable_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" style="display:block; margin:0px 10px 0px 0px;">
+        <div class="bk" style="display:block;">
             <div class="item">slot &amp; selectable &amp; draggable</div>
 
             <div
@@ -149,7 +145,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;"
                         :draggable="true"
                         :data.sync="WTree.option.items"
                         :selectable="true"
@@ -724,19 +720,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_slot_selectable_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.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"
             >slot &amp; selectable &amp; iconSize(20) &amp; defItemHeight(24)</div>
@@ -147,7 +143,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"
@@ -723,19 +719,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);
       }
     }
   });