w-component-vue 2.2.14 → 2.2.17

package/src/AppZoneWPanelAvatar.vue

@@ -16,7 +16,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                     >
@@ -27,6 +26,44 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-panel-avatar'"
+                    :casename="'avatarIcon (material)'"
+                ></demolink>
+
+                <div style="max-width:400px; padding:40px; background:#bbb;">
+                    <w-panel-avatar
+                        :subHeaderText="WPanelAvatar.subTitle"
+                        :headerText="WPanelAvatar.title"
+                        :avatarIcon="mdiLaravel"
+                    >
+                        <div style="padding:20px;" v-html="WPanelAvatar.table"></div>
+                    </w-panel-avatar>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-panel-avatar'"
+                    :casename="'avatarIcon (fontawesome)'"
+                ></demolink>
+
+                <div style="max-width:400px; padding:40px; background:#bbb;">
+                    <w-panel-avatar
+                        :subHeaderText="WPanelAvatar.subTitle"
+                        :headerText="WPanelAvatar.title"
+                        :avatarIcon="'fas fa-skiing'"
+                    >
+                        <div style="padding:20px;" v-html="WPanelAvatar.table"></div>
+                    </w-panel-avatar>
+                </div>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-panel-avatar'"
@@ -35,7 +72,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :avatarOuterPadding="20"
@@ -56,7 +92,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :avatarBackgroundColor="'rgba(40,150,60,0.4)'"
@@ -68,6 +103,27 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-panel-avatar'"
+                    :casename="'avatarBorderWidth & avatarBorderColor & avatarBackgroundColor'"
+                ></demolink>
+
+                <div style="max-width:400px; padding:40px; background:#bbb;">
+                    <w-panel-avatar
+                        :subHeaderText="WPanelAvatar.subTitle"
+                        :headerText="WPanelAvatar.title"
+                        :avatarBorderWidth="5"
+                        :avatarBorderColor="'rgba(200,170,180,0.3)'"
+                        :avatarBackgroundColor="'rgba(255,60,120,0.3)'"
+                    >
+                        <div style="padding:20px;" v-html="WPanelAvatar.table"></div>
+                    </w-panel-avatar>
+                </div>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-panel-avatar'"
@@ -76,7 +132,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :avatarBorderRadius="50"
@@ -96,7 +151,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :avatarIcon="'fas fa-cloud-sun'"
@@ -119,7 +173,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :avatarShadow="false"
@@ -139,7 +192,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :shiftVFromAvaterCenter="0"
@@ -159,7 +211,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :spaceHBetweenAvatarAndHeader="40"
@@ -185,7 +236,6 @@
 
                     <div style="padding:40px 0px;">
                         <w-panel-avatar
-                            style=""
                             :subHeaderText="WPanelAvatar.subTitle"
                             :headerText="WPanelAvatar.title"
                             :headerVerticalAlign="'top'"
@@ -206,7 +256,6 @@
 
                     <div style="padding:40px 0px;">
                         <w-panel-avatar
-                            style=""
                             :subHeaderText="WPanelAvatar.subTitle"
                             :headerText="WPanelAvatar.title"
                             :headerVerticalAlign="'center'"
@@ -227,7 +276,6 @@
 
                     <div style="padding:40px 0px;">
                         <w-panel-avatar
-                            style=""
                             :subHeaderText="WPanelAvatar.subTitle"
                             :headerText="WPanelAvatar.title"
                             :headerVerticalAlign="'bottom'"
@@ -259,7 +307,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="'Capture and storage'"
                         :headerText="'358,912'"
                         :headerPadding="10"
@@ -283,7 +330,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :contentBorderRadius="0"
@@ -303,7 +349,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :sepLineWidth="5"
@@ -326,7 +371,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :contentBackgroundColor="'rgba(255,255,255,0.5)'"
@@ -348,7 +392,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :contentShadow="false"
@@ -368,7 +411,6 @@
 
                 <div style="max-width:400px; padding:40px; background:#bbb;">
                     <w-panel-avatar
-                        style=""
                         :subHeaderText="WPanelAvatar.subTitle"
                         :headerText="WPanelAvatar.title"
                         :avatarBackgroundColor="'rgba(120,120,190,0.4)'"
@@ -394,7 +436,7 @@
 </template>
 
 <script>
-import { mdiViewDashboard, mdiClockTimeEightOutline, mdiBlenderSoftware, mdiApple, mdiSpoonSugar } from '@mdi/js'
+import { mdiLaravel } from '@mdi/js'
 import demolink from './components/demolink.vue'
 import WPanelAvatar from './components/WPanelAvatar.vue'
 
@@ -408,39 +450,11 @@ export default {
     },
     data: function() {
         return {
-            mdiViewDashboard,
-            mdiClockTimeEightOutline,
-            mdiBlenderSoftware,
-            mdiSpoonSugar,
-            mdiApple,
+            mdiLaravel,
             'WPanelAvatar': {
                 'table': '\n<div style="margin-bottom:10px; padding:0px 10px;">\n                        <span>A data table</span>\n                    </div>\n\n                    <table style="width:100%; font-size:0.7rem; border-collapse:collapse;">\n                        <thead>\n                            <tr>\n                                <th style="padding:2px 8px; text-align:left;">Dessert</th>\n                                <th style="padding:2px 8px; text-align:left;">Calories</th>\n                                <th style="padding:2px 8px; text-align:left;">Fat</th>\n                                <th style="padding:2px 8px; text-align:left;">Carbs</th>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            <tr>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">Frozen Yogurt</td>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">159</td>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">6</td>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">24</td>\n                            </tr>\n                            <tr>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">Ice cream sandwich</td>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">237</td>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">9</td>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">37</td>\n                            </tr>\n                            <tr>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">Eclair</td>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">262</td>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">16</td>\n                                <td style="padding:2px 8px; border-top:1px solid #ddd;">23</td>\n                            </tr>\n                        </tbody>\n                    </table>\n',
                 'title': '52/128',
                 'subTitle': 'Recovery rate',
-                'menu': {
-                    'items': [
-                        {
-                            text: 'Dashboard',
-                            icon: mdiViewDashboard,
-                        },
-                        {
-                            text: 'Schedule',
-                            icon: mdiClockTimeEightOutline,
-                        },
-                        {
-                            text: 'Profile',
-                            icon: mdiBlenderSoftware,
-                        },
-                        {
-                            text: 'History',
-                            icon: mdiSpoonSugar,
-                        },
-                    ],
-                    'select': {
-                        text: 'Dashboard',
-                        icon: mdiViewDashboard,
-                    }
-                },
             },
             'actions': [
             ],

package/src/components/WDrawer.vue

@@ -56,7 +56,7 @@
                     <div
                         ref="divDrawer"
                         :class="`ts ${useDrawerClassShadow}`"
-                        :style="`width:${useDrawerWidthTrans}px; height:100%; background:#fff; transform:translateX(${useDrawerTranslateX}%);`"
+                        :style="`width:${useDrawerWidthTrans}px; height:100%; transform:translateX(${useDrawerTranslateX}%);`"
                     >
 
                         <div
@@ -64,18 +64,18 @@
                             :style="`width:${useDrawerWidthTrans}px; height:100%; display:flex;`"
                         >
 
-                            <div :style="`padding-left:${drawerBarSize/2}px;`" v-if="dragDrawerWidth && !isAtLeft"></div>
+                            <div :style="`padding-left:${useDrawerBarSize/2}px;`" v-if="dragDrawerWidth && !isAtLeft"></div>
 
                             <div
                                 class="ts"
-                                :style="`width:${useDrawerWidthTrans-drawerBarSize/2}px;`"
+                                :style="`width:${useDrawerWidthTrans-useDrawerBarSize/2}px;`"
                             >
 
                                 <slot name="drawer"></slot>
 
                             </div>
 
-                            <div :style="`padding-left:${drawerBarSize/2}px;`" v-if="dragDrawerWidth && isAtLeft"></div>
+                            <div :style="`padding-left:${useDrawerBarSize/2}px;`" v-if="dragDrawerWidth && isAtLeft"></div>
 
                         </div>
 
@@ -89,10 +89,10 @@
             <!-- 延遲至抽屜出現後才通過opacity=1顯示, 否則於浮動模式時會在外側陰影層馬上看到拖曳寬度bar, 使用者體驗不佳 -->
             <div
                 ref="divBar"
-                :style="`position:${useOverlayPosition}; z-index:${useDrawerZIndex+3}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-bw/2}px; width:${bw}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
+                :style="`position:${useOverlayPosition}; z-index:${useDrawerZIndex+3}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-useDrawerBarWidth/2}px; width:${useDrawerBarWidth}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
                 v-show="value && dragDrawerWidth"
             >
-                <div :style="`width:${drawerBarSize}px; height:100%; background:${useDrawerBarColor};`"></div>
+                <div :style="`width:${useDrawerBarSize}px; height:100%; background:${useDrawerBarColor};`"></div>
             </div>
 
         </div>
@@ -365,14 +365,16 @@ export default {
             return this.afloat && this.showOverlay3Shadow ? 'bs' : ''
         },
 
-        bw: function() {
-            //console.log('computed changeParam')
-
+        useDrawerBarWidth: function() {
             let vo = this
-
             return vo.drawerBarSize + vo.drawerBarBorderSize * 2
         },
 
+        useDrawerBarSize: function() {
+            let vo = this
+            return vo.dragDrawerWidth ? vo.drawerBarSize : 0
+        },
+
         useDrawerBarColor: function() {
             return color2hex(this.drawerBarColor)
         },

package/src/components/WPanelAvatar.vue

@@ -10,7 +10,7 @@
             >
                 <div
                     :class="`${avatarShadow?'shadow-header':''}`"
-                    :style="`transition:all 0.3s; border-radius:${avatarBorderRadius}px; background:${useAvatarBackgroundColor};`"
+                    :style="`transition:all 0.3s; _box-sizing:border-box; border:${avatarBorderWidth}px solid ${useAvatarBorderColor}; border-radius:${avatarBorderRadius}px; background:${useAvatarBackgroundColor};`"
                     v-domresize
                     @domresize="resizeAvatar"
                 >
@@ -88,6 +88,8 @@ import WIcon from './WIcon.vue'
  * @vue-prop {String} [avatarIcon=mdiForest] 輸入圖標字串，預設mdiForest
  * @vue-prop {Number} [avatarIconSize=60] 輸入圖標尺寸數字，單位為px，預設60
  * @vue-prop {String} [avatarIconColor='white'] 輸入圖標顏色字串，預設'white'
+ * @vue-prop {Number} [avatarBorderWidth=1] 輸入圖標區框線寬度數字，單位為px，預設1
+ * @vue-prop {String} [avatarBorderColor='transparnet'] 輸入圖標區框線顏色字串，預設'transparnet'
  * @vue-prop {String} [avatarBackgroundColor='rgba(239,108,0,0.5)'] 輸入圖標區背景顏色字串，預設'rgba(239,108,0,0.5)'
  * @vue-prop {Number} [avatarBorderRadius=10] 輸入圖標區框圓角程度數字，單位為px，預設10
  * @vue-prop {Boolean} [avatarShadow=true] 輸入是否使用圖標區陰影效果數字，預設true
@@ -136,6 +138,14 @@ export default {
             type: String,
             default: 'white',
         },
+        avatarBorderWidth: {
+            type: Number,
+            default: 1,
+        },
+        avatarBorderColor: {
+            type: String,
+            default: 'transparent',
+        },
         avatarBackgroundColor: {
             type: String,
             default: 'rgba(239,108,0,0.5)',
@@ -233,6 +243,14 @@ export default {
             return color2hex(vo.avatarIconColor)
         },
 
+        useAvatarBorderColor: function() {
+            //console.log('computed useAvatarBorderColor')
+
+            let vo = this
+
+            return color2hex(vo.avatarBorderColor)
+        },
+
         useAvatarBackgroundColor: function() {
             //console.log('computed useAvatarBackgroundColor')
 
@@ -302,8 +320,8 @@ export default {
             let vo = this
 
             //update
-            vo.avatarWidth = msg.snew.clientWidth
-            vo.avatarHeight = msg.snew.clientHeight
+            vo.avatarWidth = msg.snew.offsetWidth
+            vo.avatarHeight = msg.snew.offsetHeight
 
         },
 

package/src/components/WPanelBulge.vue

@@ -2,17 +2,17 @@
     <div>
 
         <div
-            :style="`${usePadding} z-index:2;`"
+            :style="`transition:all 0.3s; ${usePadding} z-index:2;`"
         >
             <div
                 :class="{'shadow-header':headerShadow}"
-                :style="`display:inline-block; background:${useHeaderBackgroundColor}; border-radius:${headerBorderRadius}px;`"
+                :style="`transition:all 0.3s; display:inline-block; background:${useHeaderBackgroundColor}; border-radius:${headerBorderRadius}px;`"
                 v-domresize
                 @domresize="updateHeaderHeight"
             >
 
                 <slot name="header">
-                    <div :style="`padding:5px 10px; color:${useHeaderTextColor};`">
+                    <div :style="`transition:all 0.3s; padding:5px 10px; color:${useHeaderTextColor};`">
                         {{headerText}}
                     </div>
                 </slot>
@@ -20,16 +20,16 @@
             </div>
         </div>
 
-        <div :style="`margin-top:-${headerHeight/2}px; z-index:1;`">
+        <div :style="`transition:all 0.3s; margin-top:-${headerHeight/2}px; z-index:1;`">
 
             <div
                 :class="{'shadow':contentShadow}"
-                :style="`background:${useContentBackgroundColor}; border-radius:${contentBorderRadius}px;`"
+                :style="`transition:all 0.3s; background:${useContentBackgroundColor}; border-radius:${contentBorderRadius}px;`"
             >
 
-                <div :style="`padding:${useContentPadding};`">
+                <div :style="`transition:all 0.3s; padding:${useContentPadding};`">
 
-                    <div :style="`height:${headerHeight/2}px;`"></div>
+                    <div :style="`transition:all 0.3s; height:${headerHeight/2}px;`"></div>
 
                     <slot></slot>
 

package/src/components/WTree.vue

@@ -2066,7 +2066,7 @@ export default {
                     if (isfun(vo.filterFunction)) {
 
                         //filterFunction
-                        b = vo.filterFunction(items[i].row.item)
+                        b = vo.filterFunction(items[i].row.item, kws)
 
                     }
                     else {