w-component-vue 2.2.33 → 2.2.36

package/src/AppZoneWJsonView.vue

@@ -8,76 +8,92 @@
         <div style="padding:0px;">
 
 
-            <div class="bk dz">
+            <div class="bk">
                 <demolink
                     :kbname="'w-json-view'"
                     :casename="'default'"
                 ></demolink>
 
                 <w-json-view
-                    style="border:1px solid #ddd;"
+                    style="width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data1"
                 ></w-json-view>
 
             </div>
 
 
-            <div class="bk dz">
+            <div class="bk">
                 <demolink
                     :kbname="'w-json-view'"
                     :casename="'viewHeightMax'"
                 ></demolink>
 
                 <w-json-view
-                    style="border:1px solid #ddd;"
-                    :viewHeightMax="250"
+                    style="width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
+                    :viewHeightMax="250"
                 ></w-json-view>
 
             </div>
 
 
-            <div class="bk dz">
+            <div class="bk">
                 <demolink
                     :kbname="'w-json-view'"
                     :casename="'no viewHeightMax'"
                 ></demolink>
 
                 <w-json-view
-                    style="border:1px solid #ddd;"
-                    :viewHeightMax="null"
+                    style="width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
+                    :viewHeightMax="null"
                 ></w-json-view>
 
             </div>
 
 
-            <div class="bk dz">
+            <div class="bk">
                 <demolink
                     :kbname="'w-json-view'"
                     :casename="'iconSize(24) & defItemHeight(32)'"
                 ></demolink>
 
                 <w-json-view
-                    style="border:1px solid #ddd;"
+                    style="width:350px; border:1px solid #ddd;"
+                    :data="WJsonView.data1"
                     :iconSize="24"
                     :defItemHeight="32"
-                    :data="WJsonView.data1"
                 ></w-json-view>
 
             </div>
 
 
-            <div class="bk dz">
+            <div class="bk">
                 <demolink
                     :kbname="'w-json-view'"
-                    :casename="'events'"
+                    :casename="'rippleColor'"
                 ></demolink>
 
                 <w-json-view
-                    style="border:1px solid #ddd;"
+                    style="width:350px; border:1px solid #ddd;"
+                    :data="WJsonView.data3"
                     :viewHeightMax="WJsonView.viewHeightMaxSync"
+                    :rippleColor="'rgba(245,124,0,0.4)'"
+                ></w-json-view>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'events'"
+                ></demolink>
+
+                <w-json-view
+                    style="width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
+                    :viewHeightMax="WJsonView.viewHeightMaxSync"
                     @change-view-items="changeViewItems"
                     @change-height-of-items="changeHeightOfItems"
                 ></w-json-view>
@@ -85,31 +101,53 @@
             </div>
 
 
-            <div class="bk dz">
+            <div class="bk">
                 <demolink
                     :kbname="'w-json-view'"
                     :casename="'toggleItemsByFun'"
                 ></demolink>
 
                 <div>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItems(0)">toggle(rows[0])</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItems(0, true)">show(rows[0])</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItems(0, false)">hide(rows[0])</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItems(6)">toggle(rows[6])</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItems(9)">toggle(rows[9])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsByFun(0, true)">show(rows[0])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsByFun(0, false)">hide(rows[0])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsByFun(6, true)">show(rows[6])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsByFun(6, false)">hide(rows[6])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsByFun(9, true)">show(rows[9])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsByFun(9, false)">hide(rows[9])</v-btn>
                 </div>
 
                 <w-json-view
                     ref="ref_toggleItemsByFun"
-                    style="border:1px solid #ddd;"
+                    style="width:350px; border:1px solid #ddd;"
+                    :data="WJsonView.data3"
                     :viewHeightMax="WJsonView.viewHeightMaxSync"
+                ></w-json-view>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'toggleItemsAll'"
+                ></demolink>
+
+                <div>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsAll(true)">show all</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsAll(false)">hide all</v-btn>
+                </div>
+
+                <w-json-view
+                    ref="ref_toggleItemsAll"
+                    style="width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
+                    :viewHeightMax="WJsonView.viewHeightMaxSync"
                 ></w-json-view>
 
             </div>
 
 
-            <div class="bk dz">
+            <div class="bk">
                 <demolink
                     :kbname="'w-json-view'"
                     :casename="'filterKeywords & noResultsText'"
@@ -124,16 +162,16 @@
                 </div>
 
                 <w-json-view
-                    style="border:1px solid #ddd;"
+                    style="width:350px; border:1px solid #ddd;"
+                    :data="WJsonView.data3"
                     :filterKeywords="WJsonView.keywords"
                     :noResultsText="'There are no items to show...'"
-                    :data="WJsonView.data3"
                 ></w-json-view>
 
             </div>
 
 
-            <div class="bk dz">
+            <div class="bk">
                 <demolink
                     :kbname="'w-json-view'"
                     :casename="'filterKeywords & filterFunction'"
@@ -148,23 +186,24 @@
                 </div>
 
                 <w-json-view
-                    style="border:1px solid #ddd;"
+                    style="width:350px; border:1px solid #ddd;"
+                    :data="WJsonView.data3"
                     :filterKeywords="WJsonView.keywords"
                     :filterFunction="filterFunction"
-                    :data="WJsonView.data3"
                 ></w-json-view>
 
             </div>
 
 
-            <div class="bk dz">
+            <div class="bk">
                 <demolink
                     :kbname="'w-json-view'"
                     :casename="'iconColor & keyColor & keyNumbersColor & numColor & strColor & bolColor & funColor'"
                 ></demolink>
 
                 <w-json-view
-                    style="border:1px solid #ddd;"
+                    style="width:350px; border:1px solid #ddd;"
+                    :data="WJsonView.data1"
                     :iconColor="'#aaa'"
                     :keyColor="'#f6a'"
                     :keyNumbersColor="'#f26'"
@@ -172,13 +211,12 @@
                     :strColor="'#bbb'"
                     :bolColor="'#c5f'"
                     :funColor="'#fa6'"
-                    :data="WJsonView.data1"
                 ></w-json-view>
 
             </div>
 
 
-            <div class="bk" style="display:block; margin:0px 10px 0px 0px;">
+            <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-json-view'"
                     :casename="'large data (15,500 lines)'"
@@ -318,14 +356,14 @@ export default {
             }
             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,
@@ -333,6 +371,15 @@ export default {
             })
 
         },
+        toggleItemsAll: function(toUnfolding) {
+            console.log('toggleItemsAll', toUnfolding)
+
+            let vo = this
+
+            //toggleItemsAll
+            vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding)
+
+        },
     },
 }
 </script>

package/src/AppZoneWLeafletVueDyn.vue

@@ -22,56 +22,60 @@
         <div style="padding:0px;">
 
 
-            <div class="bk">
+            <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-leaflet-vue-dyn'"
                     :casename="'pointSets'"
                 ></demolink>
 
+                <!-- leaflet要給寬度否則無法撐開 -->
                 <w-leaflet-vue-dyn
-                    style="width:90vw; height:600px;"
+                    style="width:100%; height:600px;"
                     :opt="WLeafletVueDyn.pointSets"
                 ></w-leaflet-vue-dyn>
 
             </div>
 
 
-            <div class="bk">
+            <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-leaflet-vue-dyn'"
                     :casename="'polygonSets'"
                 ></demolink>
 
+                <!-- leaflet要給寬度否則無法撐開 -->
                 <w-leaflet-vue-dyn
-                    style="width:90vw; height:600px;"
+                    style="width:100%; height:600px;"
                     :opt="WLeafletVueDyn.polygonSets"
                 ></w-leaflet-vue-dyn>
 
             </div>
 
 
-            <div class="bk">
+            <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-leaflet-vue-dyn'"
                     :casename="'contourSets'"
                 ></demolink>
 
+                <!-- leaflet要給寬度否則無法撐開 -->
                 <w-leaflet-vue-dyn
-                    style="width:90vw; height:600px;"
+                    style="width:100%; height:600px;"
                     :opt="WLeafletVueDyn.contourSets"
                 ></w-leaflet-vue-dyn>
 
             </div>
 
 
-            <div class="bk">
+            <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-leaflet-vue-dyn'"
                     :casename="'contourSet for rain data'"
                 ></demolink>
 
+                <!-- leaflet要給寬度否則無法撐開 -->
                 <w-leaflet-vue-dyn
-                    style="width:90vw; height:600px;"
+                    style="width:100%; height:600px;"
                     :opt="WLeafletVueDyn.largeSet"
                 ></w-leaflet-vue-dyn>
 

package/src/AppZoneWListExpand.vue

@@ -126,7 +126,7 @@
             </div>
 
 
-            <div class="bk" style="width:500px;">
+            <div class="bk">
                 <demolink
                     :kbname="'w-list-expand'"
                     :casename="'itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
@@ -147,7 +147,7 @@
             </div>
 
 
-            <div class="bk" style="width:500px;">
+            <div class="bk">
                 <demolink
                     :kbname="'w-list-expand'"
                     :casename="'slot item-content & itemTextColor & itemTextColorHover & itemTextColorActive & itemIconColor & itemIconColorHover & itemIconColorActive & itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"

package/src/AppZoneWListVertical.vue

@@ -79,7 +79,7 @@
             </div>
 
 
-            <div class="bk" style="width:500px;">
+            <div class="bk">
                 <demolink
                     :kbname="'w-list-vertical'"
                     :casename="'itemActive & itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
@@ -100,7 +100,7 @@
             </div>
 
 
-            <div class="bk" style="width:500px;">
+            <div class="bk">
                 <demolink
                     :kbname="'w-list-vertical'"
                     :casename="'itemActive & itemTextColor & itemTextColorHover & itemTextColorActive & itemIconColor & itemIconColorHover & itemIconColorActive & itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"

package/src/AppZoneWPanelAvatar.vue

@@ -14,7 +14,7 @@
                     :casename="'default'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -32,7 +32,7 @@
                     :casename="'avatarIcon (material)'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -51,7 +51,7 @@
                     :casename="'avatarIcon (fontawesome)'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -70,7 +70,7 @@
                     :casename="'avatarOuterPadding & avatarInnerPadding'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -90,7 +90,7 @@
                     :casename="'avatarBackgroundColor'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -109,7 +109,7 @@
                     :casename="'avatarBorderWidth & avatarBorderColor & avatarBackgroundColor'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -130,7 +130,7 @@
                     :casename="'avatarBorderRadius'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -149,7 +149,7 @@
                     :casename="'avatarIcon & avatarIconSize & avatarIconColor & avatarBackgroundColor'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -171,7 +171,7 @@
                     :casename="'no avatarShadow'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -190,7 +190,7 @@
                     :casename="'shiftVFromAvaterCenter'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -209,7 +209,7 @@
                     :casename="'spaceHBetweenAvatarAndHeader & spaceVBetweenHeaderAndContent'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -232,7 +232,7 @@
                     :casename="'headerVerticalAlign & spaceVBetweenHeaderAndContent'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:0px 40px; background:#bbb;">
+                <div style="display:inline-block; padding:0px 40px; background:#bbb;">
 
                     <div style="padding:40px 0px;">
                         <w-panel-avatar
@@ -305,7 +305,7 @@
                     :casename="'headerPadding & headerTextColor & headerTextSize & subHeaderTextColor & subHeaderTextSize'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="'Capture and storage'"
                         :headerText="'358,912'"
@@ -328,7 +328,7 @@
                     :casename="'contentBorderRadius'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -347,7 +347,7 @@
                     :casename="'sepLineWidth & sepLineColor'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -369,7 +369,7 @@
                     :casename="'contentBackgroundColor'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -390,7 +390,7 @@
                     :casename="'contentShadow'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
@@ -409,7 +409,7 @@
                     :casename="'slot avatar & avatarBackgroundColor'"
                 ></demolink>
 
-                <div style="max-width:400px; padding:40px; background:#bbb;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-avatar
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"

package/src/AppZoneWPanelBulge.vue

@@ -78,7 +78,7 @@
                     :casename="'with grey outer'"
                 ></demolink>
 
-                <div style="background:#bbb; padding:40px;">
+                <div style="display:inline-block; padding:40px; background:#bbb;">
                     <w-panel-bulge
                         style="min-width:500px;"
                         :headerText="WPanelBulge.title"
@@ -95,7 +95,7 @@
                     :casename="'no headerShadow & no contentShadow, with green outer'"
                 ></demolink>
 
-                <div style="background:#8FF4B1; padding:40px;">
+                <div style="display:inline-block; padding:40px; background:#8FF4B1;">
                     <w-panel-bulge
                         style="min-width:500px;"
                         :headerText="WPanelBulge.title"