w-component-vue 2.2.34 → 2.2.37

package/docs/examples/w-json-view_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">viewHeightMax</div>
 
             <w-json-view
-                style="border:1px solid #ddd;"
-                :view-height-max="250"
+                style="width:350px; border:1px solid #ddd;"
                 :data="WJsonView.data3"
+                :view-height-max="250"
             ></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);
       }
     }
   });

package/docs/examples/w-leaflet-vue-dyn_contourSet for rain data.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,11 +134,12 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-leaflet-vue-dyn</span>
         </div>
-        <div class="bk">
+        <div class="bk" style="display:block;">
             <div class="item">contourSet for rain data</div>
 
+            <!-- leaflet要給寬度否則無法撐開 -->
             <w-leaflet-vue-dyn
-                style="width:90vw; height:600px;"
+                style="width:100%; height:600px;"
                 :opt="WLeafletVueDyn.largeSet"
             ></w-leaflet-vue-dyn>
         </div>

package/docs/examples/w-leaflet-vue-dyn_contourSets.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,11 +134,12 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-leaflet-vue-dyn</span>
         </div>
-        <div class="bk">
+        <div class="bk" style="display:block;">
             <div class="item">contourSets</div>
 
+            <!-- leaflet要給寬度否則無法撐開 -->
             <w-leaflet-vue-dyn
-                style="width:90vw; height:600px;"
+                style="width:100%; height:600px;"
                 :opt="WLeafletVueDyn.contourSets"
             ></w-leaflet-vue-dyn>
         </div>

package/docs/examples/w-leaflet-vue-dyn_pointSets.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,11 +134,12 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-leaflet-vue-dyn</span>
         </div>
-        <div class="bk">
+        <div class="bk" style="display:block;">
             <div class="item">pointSets</div>
 
+            <!-- leaflet要給寬度否則無法撐開 -->
             <w-leaflet-vue-dyn
-                style="width:90vw; height:600px;"
+                style="width:100%; height:600px;"
                 :opt="WLeafletVueDyn.pointSets"
             ></w-leaflet-vue-dyn>
         </div>

package/docs/examples/w-leaflet-vue-dyn_polygonSets.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,11 +134,12 @@
                 onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
             >w-leaflet-vue-dyn</span>
         </div>
-        <div class="bk">
+        <div class="bk" style="display:block;">
             <div class="item">polygonSets</div>
 
+            <!-- leaflet要給寬度否則無法撐開 -->
             <w-leaflet-vue-dyn
-                style="width:90vw; height:600px;"
+                style="width:100%; height:600px;"
                 :opt="WLeafletVueDyn.polygonSets"
             ></w-leaflet-vue-dyn>
         </div>

package/docs/examples/w-list-expand_activeMode(multi).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>

package/docs/examples/w-list-expand_auto scroll.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>

package/docs/examples/w-list-expand_default.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>

package/docs/examples/w-list-expand_itemBackgroundColor_itemBackgroundColorHover_itemBackgroundColorActive.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-list-expand</span>
         </div>
-        <div class="bk" style="width:500px;">
+        <div class="bk">
             <div
                 class="item"
             >itemBackgroundColor &amp; itemBackgroundColorHover &amp; itemBackgroundColorActive</div>

package/docs/examples/w-list-expand_keyText_keyIcon_keyDsp.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>

package/docs/examples/w-list-expand_paddingStyle.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>

package/docs/examples/w-list-expand_slot footer.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>

package/docs/examples/w-list-expand_slot header.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>

package/docs/examples/w-list-expand_slot item-content_itemTextColor_itemTextColorHover_itemTextColorActive.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-list-expand</span>
         </div>
-        <div class="bk" style="width:500px;">
+        <div class="bk">
             <div
                 class="item"
             >slot item-content &amp; itemTextColor &amp; itemTextColorHover &amp; itemTextColorActive &amp; itemIconColor &amp; itemIconColorHover &amp; itemIconColorActive &amp; itemBackgroundColor &amp; itemBackgroundColorHover &amp; itemBackgroundColorActive</div>

package/docs/examples/w-list-expand_slot item-header_item-content.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>

package/docs/examples/w-list-horizontal_borderBottomSize.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>

package/docs/examples/w-list-horizontal_default.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>

package/docs/examples/w-list-horizontal_itemBackgroundColor_itemBackgroundColorHover_itemBackgroundColorActive.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>

package/docs/examples/w-list-horizontal_itemBorderRadius.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>