w-component-vue 2.4.77 → 2.4.78

package/src/AppZoneWDrawer.vue

@@ -40,7 +40,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow101"
                 >
 
@@ -75,7 +75,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow102"
                     :drawerWidth="300"
                 >
@@ -117,7 +117,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow103"
                     :drawerWidth.sync="WDrawer.drawerWidth"
                     :dragDrawerWidth="true"
@@ -157,7 +157,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow104"
                     _drawerWidth.sync="WDrawer.drawerWidth"
                     :dragDrawerWidth="true"
@@ -197,7 +197,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow105"
                     _drawerWidth.sync="WDrawer.drawerWidth"
                     :dragDrawerWidth="true"
@@ -237,7 +237,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow106"
                     _drawerWidth.sync="WDrawer.drawerWidth"
                     :dragDrawerWidth="true"
@@ -273,7 +273,7 @@
                 ></demolink>
 
                 <w-drawer
-                    style="width:600px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:600px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow107a"
                     :dragDrawerWidth="true"
                     :drawerWidthMin="50"
@@ -360,7 +360,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow108"
                     :mode="'from-right'"
                 >
@@ -396,7 +396,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow109"
                     :mode="'from-right'"
                     :dragDrawerWidth="true"
@@ -434,7 +434,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow110"
                     :afloat="true"
                 >
@@ -471,7 +471,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow111"
                     :afloat="true"
                     :dragDrawerWidth="true"
@@ -515,7 +515,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow112"
                     :afloat="true"
                     :dragDrawerWidth="true"
@@ -555,7 +555,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow113"
                     :afloat="true"
                     :overlayOpacity="0.1"
@@ -593,7 +593,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow114"
                     :afloat="true"
                     :mode="'from-right'"
@@ -631,7 +631,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow115"
                     :afloat="true"
                     :mode="'from-right'"
@@ -676,7 +676,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow116"
                     :afloat="true"
                     :mode="'from-right'"
@@ -717,7 +717,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow117"
                     :afloat="true"
                     :afloatByFix="true"
@@ -755,7 +755,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow118"
                     :afloat="true"
                     :afloatByFix="true"
@@ -794,7 +794,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow119"
                     :afloat="true"
                     :afloatByFix="true"
@@ -833,7 +833,7 @@
                 </div>
 
                 <w-drawer
-                    style="width:500px; height:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:500px; height:400px; border:1px solid #ddd;"
                     v-model="WDrawer.bShow120"
                     :afloat="true"
                     :afloatByFix="true"
@@ -875,12 +875,12 @@
                 <div style="position:relative;">
 
                     <w-panel-divide-horizontal
-                        style="width:100%; height:400px; border:1px dashed #ec596b;"
+                        style="width:100%; box-sizing:border-box; height:400px; border:1px dashed #ec596b;"
                         :barColor="'#f26'"
                     >
                         <template v-slot:left="props">
                             <w-drawer
-                                :style="`width:${props.width}px; height:400px; border:1px solid #ddd;`"
+                                :style="`width:${props.width}px; box-sizing:border-box; height:400px; border:1px solid #ddd;`"
                                 v-model="WDrawer.bShow121"
                                 :autoSwitchToHide="true"
                                 _switchWidth="WDrawer.drawerWidth*2"
@@ -907,7 +907,7 @@
                     </w-panel-divide-horizontal>
 
                     <!-- 拖曳抽屜寬度越過此線測試效果 -->
-                    <div :style="`position:absolute; top:0; left:600px; height:400px; border-right:1px dashed #62f;`"></div>
+                    <div :style="`position:absolute; top:0; left:600px; box-sizing:border-box; height:400px; border-right:1px dashed #62f;`"></div>
 
                 </div>
 
@@ -927,12 +927,12 @@
                 <div style="position:relative;">
 
                     <w-panel-divide-horizontal
-                        style="width:100%; height:400px; border:1px dashed #ec596b;"
+                        style="width:100%; box-sizing:border-box; height:400px; border:1px dashed #ec596b;"
                         :barColor="'#f26'"
                     >
                         <template v-slot:left="props">
                             <w-drawer
-                                :style="`width:${props.width}px; height:400px; border:1px solid #ddd;`"
+                                :style="`width:${props.width}px; box-sizing:border-box; height:400px; border:1px solid #ddd;`"
                                 v-model="WDrawer.bShow122"
                                 :autoSwitchToShow="true"
                                 _switchWidth="WDrawer.drawerWidth*2"
@@ -959,7 +959,7 @@
                     </w-panel-divide-horizontal>
 
                     <!-- 拖曳抽屜寬度越過此線測試效果 -->
-                    <div :style="`position:absolute; top:0; left:600px; height:400px; border-right:1px dashed #62f;`"></div>
+                    <div :style="`position:absolute; top:0; left:600px; box-sizing:border-box; height:400px; border-right:1px dashed #62f;`"></div>
 
                 </div>
 
@@ -980,12 +980,12 @@
                 <div style="position:relative;">
 
                     <w-panel-divide-horizontal
-                        style="width:100%; height:400px; border:1px dashed #ec596b;"
+                        style="width:100%; box-sizing:border-box; height:400px; border:1px dashed #ec596b;"
                         :barColor="'#f26'"
                     >
                         <template v-slot:left="props">
                             <w-drawer
-                                :style="`width:${props.width}px; height:400px; border:1px solid #ddd;`"
+                                :style="`width:${props.width}px; box-sizing:border-box; height:400px; border:1px solid #ddd;`"
                                 v-model="WDrawer.bShow123"
                                 :autoSwitchToFloat="true"
                                 _switchWidth="WDrawer.drawerWidth*2"
@@ -1013,7 +1013,7 @@
                     </w-panel-divide-horizontal>
 
                     <!-- 拖曳抽屜寬度越過此線測試效果 -->
-                    <div :style="`position:absolute; top:0; left:600px; height:400px; border-right:1px dashed #62f;`"></div>
+                    <div :style="`position:absolute; top:0; left:600px; box-sizing:border-box; height:400px; border-right:1px dashed #62f;`"></div>
 
                 </div>
 

package/src/AppZoneWDynamicList.vue

@@ -15,7 +15,7 @@
                 ></demolink>
 
                 <w-dynamic-list
-                    style="width:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:400px; border:1px solid #ddd;"
                     :rows="WDynamicList.data1"
                 >
                     <template v-slot="props">
@@ -48,7 +48,7 @@
                 </div>
 
                 <w-dynamic-list
-                    style="width:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:400px; border:1px solid #ddd;"
                     :viewHeightMax="WDynamicList.viewHeightMax"
                     :rows="WDynamicList.data1"
                 >
@@ -82,7 +82,7 @@
                 </div>
 
                 <w-dynamic-list
-                    style="width:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:400px; border:1px solid #ddd;"
                     :rows="WDynamicList.changeText?WDynamicList.data2:WDynamicList.data1"
                 >
                     <template v-slot="props">
@@ -115,7 +115,7 @@
                 </div>
 
                 <w-dynamic-list
-                    style="width:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:400px; border:1px solid #ddd;"
                     :rows="WDynamicList.data1"
                 >
                     <template v-slot="props">
@@ -162,7 +162,7 @@
                 </div>
 
                 <w-dynamic-list
-                    style="width:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:400px; border:1px solid #ddd;"
                     :filterKeywords="WDynamicList.keywords"
                     :noResultsText="'There are no items to show...'"
                     :statePaddingStyle="{v:10,h:10}"
@@ -193,7 +193,7 @@
                 ></demolink>
 
                 <w-dynamic-list
-                    style="width:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:400px; border:1px solid #ddd;"
                     :rows="WDynamicList.data1"
                     @render="render"
                 >
@@ -222,7 +222,7 @@
                 ></demolink>
 
                 <w-dynamic-list
-                    style="width:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:400px; border:1px solid #ddd;"
                     :rows="WDynamicList.data3"
                 >
                     <template v-slot="props">
@@ -265,7 +265,7 @@
 
                 <w-dynamic-list
                     ref="wdl"
-                    style="width:400px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:400px; border:1px solid #ddd;"
                     :rows="WDynamicList.data4"
                 >
                     <template v-slot="props">

package/src/AppZoneWExplorer.vue

@@ -734,7 +734,7 @@
 
                 <div style="display:inline-block; padding:40px; background:#777;">
                     <w-explorer
-                        style="width:700px; height:400px; background:#333;
+                        style="box-sizing:border-box; width:700px; height:400px; background:#333;
                                border-radius:5px;
                                overflow:hidden;
                                box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);"

package/src/AppZoneWImageLazy.vue

@@ -14,7 +14,7 @@
                     :casename="'width & height'"
                 ></demolink>
 
-                <div style="width:340px; height:400px; overflow-y:auto; border:1px solid #ddd;">
+                <div style="box-sizing:border-box; width:340px; height:400px; overflow-y:auto; border:1px solid #ddd;">
 
                     <div
                         :key="'kurl-'+kurl"
@@ -41,7 +41,7 @@
                     :casename="'width & height & delay'"
                 ></demolink>
 
-                <div style="width:340px; height:400px; overflow-y:auto; border:1px solid #ddd;">
+                <div style="box-sizing:border-box; width:340px; height:400px; overflow-y:auto; border:1px solid #ddd;">
 
                     <div
                         :key="'kurl-'+kurl"

package/src/AppZoneWJsonView.vue

@@ -15,7 +15,7 @@
                 ></demolink>
 
                 <w-json-view
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data1"
                 ></w-json-view>
 
@@ -29,7 +29,7 @@
                 ></demolink>
 
                 <w-json-view
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
                     :viewHeightMax="250"
                 ></w-json-view>
@@ -44,7 +44,7 @@
                 ></demolink>
 
                 <w-json-view
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
                     :viewHeightMax="null"
                 ></w-json-view>
@@ -59,7 +59,7 @@
                 ></demolink>
 
                 <w-json-view
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data1"
                     :iconSize="24"
                     :defItemHeight="32"
@@ -75,7 +75,7 @@
                 ></demolink>
 
                 <w-json-view
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
                     :viewHeightMax="WJsonView.viewHeightMaxSync"
                     :rippleColor="'rgba(245,124,0,0.4)'"
@@ -91,7 +91,7 @@
                 ></demolink>
 
                 <w-json-view
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
                     :viewHeightMax="WJsonView.viewHeightMaxSync"
                     @change-view-items="changeViewItems"
@@ -118,7 +118,7 @@
 
                 <w-json-view
                     ref="ref_toggleItemsByFun"
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
                     :viewHeightMax="WJsonView.viewHeightMaxSync"
                 ></w-json-view>
@@ -139,7 +139,7 @@
 
                 <w-json-view
                     ref="ref_toggleItemsAll"
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
                     :viewHeightMax="WJsonView.viewHeightMaxSync"
                 ></w-json-view>
@@ -162,7 +162,7 @@
                 </div>
 
                 <w-json-view
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
                     :filterKeywords="WJsonView.keywords"
                     :noResultsText="'There are no items to show...'"
@@ -186,7 +186,7 @@
                 </div>
 
                 <w-json-view
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data3"
                     :filterKeywords="WJsonView.keywords"
                     :funFilter="funFilter"
@@ -202,7 +202,7 @@
                 ></demolink>
 
                 <w-json-view
-                    style="width:350px; border:1px solid #ddd;"
+                    style="box-sizing:border-box; width:350px; border:1px solid #ddd;"
                     :data="WJsonView.data1"
                     :iconColor="'#aaa'"
                     :keyColor="'#f6a'"

package/src/AppZoneWLeafletVueDyn.vue

@@ -35,7 +35,7 @@
                 >
 
                     <template v-slot:point-popup="props">
-                        <div style="padding:15px; width:300px;">
+                        <div style="padding:15px; box-sizing:border-box; width:300px;">
                             <div style="padding-bottom:8px;">
                                 <div style="font-size:0.90rem; color:#f26;">[Popup]</div>
                             </div>
@@ -68,7 +68,7 @@
                 >
 
                     <template v-slot:polygon-popup="props">
-                        <div style="padding:15px; width:300px;">
+                        <div style="padding:15px; box-sizing:border-box; width:300px;">
                             <div style="padding-bottom:8px;">
                                 <div style="font-size:0.90rem; color:#f26;">[Popup]</div>
                             </div>
@@ -97,7 +97,7 @@
                 >
 
                     <template v-slot:contour-popup="props">
-                        <div style="padding:15px; width:300px;">
+                        <div style="padding:15px; box-sizing:border-box; width:300px;">
                             <div style="padding-bottom:8px;">
                                 <div style="font-size:0.90rem; color:#f26;">[Popup]</div>
                             </div>
@@ -126,7 +126,7 @@
                 >
 
                     <template v-slot:contour-popup="props">
-                        <div style="padding:15px; width:300px;">
+                        <div style="padding:15px; box-sizing:border-box; width:300px;">
                             <div style="padding-bottom:8px;">
                                 <div style="font-size:0.90rem; color:#f26;">[Popup]</div>
                             </div>

package/src/AppZoneWPopup.vue

@@ -373,7 +373,7 @@
                     </template>
 
                     <template v-slot:content>
-                        <div style="width:200px; padding:10px;">{{ WPopup.text }}</div>
+                        <div style="box-sizing:border-box; width:200px; padding:10px;">{{ WPopup.text }}</div>
                     </template>
 
                 </w-popup>
@@ -398,7 +398,7 @@
                     </template>
 
                     <template v-slot:content>
-                        <div style="width:200px; padding:10px;">{{ WPopup.text }}</div>
+                        <div style="box-sizing:border-box; width:200px; padding:10px;">{{ WPopup.text }}</div>
                     </template>
 
                 </w-popup>
@@ -915,7 +915,7 @@
                     :casename="'in scroll panel'"
                 ></demolink>
 
-                <div :style="'width:200px; height:300px; border:1px solid #ddd; overflow-y:auto;'">
+                <div :style="'width:200px; box-sizing:border-box; height:300px; border:1px solid #ddd; overflow-y:auto;'">
                     <div style="height:600px;">
 
                         <div style="height:200px;"></div>
@@ -957,7 +957,7 @@
                 ></demolink>
 
                 <div style="width:95vw; text-align:right;">
-                    <div :style="'display:inline-block; width:200px; height:300px; border:1px solid #ddd; overflow-y:auto;'">
+                    <div :style="'display:inline-block; box-sizing:border-box; width:200px; height:300px; border:1px solid #ddd; overflow-y:auto;'">
                         <div style="text-align:left; height:600px;">
 
                             <div style="height:200px;"></div>
@@ -1084,7 +1084,7 @@
                 >
 
                     <template v-slot:content>
-                        <div style="padding:20px; height:400px;">
+                        <div style="padding:20px; box-sizing:border-box; height:400px;">
 
                             <div style="height:300px;"></div>
 

package/src/AppZoneWSegmentsVertical.vue

@@ -177,7 +177,7 @@
                     :items="WSegmentsVertical.items"
                     :segmentBackgroundColor="'rgba(255,120,150,0.9)'"
                     :segmentBorderColor="'#f26'"
-                    :segmentSize="4"
+                    :segmentSize="6"
                 ></w-segments-vertical>
 
             </div>
@@ -239,6 +239,45 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-segments-vertical'"
+                    :casename="'segmentWithPopup & slot segment-popup'"
+                ></demolink>
+
+                <w-segments-vertical
+                    :items="WSegmentsVertical.items"
+                    :segmentSize="6"
+                    :segmentWithPopup="true"
+                >
+                    <template v-slot:segment-popup="props">
+                        <div style="padding:5px 0px; max-width:400px;">
+                            <div style="display:flex; align-items:center; padding:10px 20px; background:#666;">
+                                <w-icon
+                                    :icon="props.item.icon"
+                                    :size="20"
+                                    :color="'#fff'"
+                                ></w-icon>
+                                <span style="padding-left:8px; color:#fff;">{{props.item.text}}</span>
+                            </div>
+                            <div style="padding:5px;">
+                                <div style="padding:5px 10px; font-size:0.8rem;">
+                                    <span style="color:#888;">Type: </span>
+                                    <span style="color:#444;">{{props.item.type}}</span>
+                                </div>
+                                <div style="padding:5px 10px; font-size:0.8rem;">
+                                    <span style="color:#888;">Range: </span>
+                                    <span style="color:#f26;">{{props.item.valueStart}} ~ {{props.item.valueEnd}}</span>
+                                    <span style="color:#888;"> ({{props.item.valueEnd-props.item.valueStart}} years)</span>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </w-segments-vertical>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-segments-vertical'"
@@ -350,7 +389,7 @@
                         left: 95,
                     }"
                     :tickSize="30"
-                    :segmentSize="50"
+                    :segmentSize="25"
                     :segmentBackgroundType="'image'"
                     :funSegmentBackgroundImage="getSegmentBackgroundIcon"
                     :segmentBorderColor="{v:'transparent',h:'#444'}"
@@ -419,7 +458,7 @@
                         left: 80,
                     }"
                     :tickSize="30"
-                    :segmentSize="50"
+                    :segmentSize="25"
                     :segmentBackgroundType="'image'"
                     :funSegmentBackgroundImage="getSegmentBackgroundIcon"
                     :segmentBorderColor="{v:'transparent',h:'#444'}"