w-component-vue 2.2.34 → 2.2.37

package/docs/examples/w-json-view_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-json-view</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div class="item">events</div>
 
             <w-json-view
-                style="border:1px solid #ddd;"
-                :view-height-max="WJsonView.viewHeightMaxSync"
+                style="width:350px; border:1px solid #ddd;"
                 :data="WJsonView.data3"
+                :view-height-max="WJsonView.viewHeightMaxSync"
                 @change-view-items="changeViewItems"
                 @change-height-of-items="changeHeightOfItems"
             ></w-json-view>
@@ -484,19 +480,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-json-view_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-json-view</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-json-view
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
+                :data="WJsonView.data3"
                 :filter-keywords="WJsonView.keywords"
                 :filter-function="filterFunction"
-                :data="WJsonView.data3"
             ></w-json-view>
         </div>
     </v-app>
@@ -491,19 +487,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-json-view_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-json-view</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-json-view
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
+                :data="WJsonView.data3"
                 :filter-keywords="WJsonView.keywords"
                 :no-results-text="'There are no items to show...'"
-                :data="WJsonView.data3"
             ></w-json-view>
         </div>
     </v-app>
@@ -491,19 +487,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-json-view_iconColor_keyColor_keyNumbersColor_numColor.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,14 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-json-view</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div
                 class="item"
             >iconColor &amp; keyColor &amp; keyNumbersColor &amp; numColor &amp; strColor &amp; bolColor &amp; funColor</div>
 
             <w-json-view
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
+                :data="WJsonView.data1"
                 :icon-color="'#aaa'"
                 :key-color="'#f6a'"
                 :key-numbers-color="'#f26'"
@@ -152,7 +149,6 @@
                 :str-color="'#bbb'"
                 :bol-color="'#c5f'"
                 :fun-color="'#fa6'"
-                :data="WJsonView.data1"
             ></w-json-view>
         </div>
     </v-app>
@@ -490,19 +486,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-json-view_iconSize(24)_defItemHeight(32).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-json-view</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div class="item">iconSize(24) &amp; defItemHeight(32)</div>
 
             <w-json-view
-                style="border:1px solid #ddd;"
+                style="width:350px; border:1px solid #ddd;"
+                :data="WJsonView.data1"
                 :icon-size="24"
                 :def-item-height="32"
-                :data="WJsonView.data1"
             ></w-json-view>
         </div>
     </v-app>
@@ -483,19 +479,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-json-view_large data (15,500 lines).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-json-view</span>
         </div>
-        <div class="bk" style="display:block; margin:0px 10px 0px 0px;">
+        <div class="bk" style="display:block;">
             <div class="item">large data (15,500 lines)</div>
 
             <w-json-view style="border:1px solid #ddd;" :data="WJsonView.data4"></w-json-view>
@@ -478,19 +474,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-json-view_no viewHeightMax.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-json-view</span>
         </div>
-        <div class="bk dz">
+        <div class="bk">
             <div class="item">no viewHeightMax</div>
 
             <w-json-view
-                style="border:1px solid #ddd;"
-                :view-height-max="null"
+                style="width:350px; border:1px solid #ddd;"
                 :data="WJsonView.data3"
+                :view-height-max="null"
             ></w-json-view>
         </div>
     </v-app>
@@ -482,19 +478,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);
       }
     }
   });