w-component-vue 2.2.12 → 2.2.15

package/src/components/WPanelAvatar.vue

@@ -0,0 +1,339 @@
+<template>
+    <div
+        style="display:inline-block; position:relative;"
+    >
+
+        <div style="position:absolute; top:0px; left:0px;">
+
+            <div
+                :style="`transition:all 0.3s; padding:0px ${avatarOuterPadding}px ${avatarOuterPadding}px ${avatarOuterPadding}px;`"
+            >
+                <div
+                    :class="`${avatarShadow?'shadow-header':''}`"
+                    :style="`transition:all 0.3s; _box-sizing:border-box; border:${avatarBorderWidth}px solid ${useAvatarBorderColor}; border-radius:${avatarBorderRadius}px; background:${useAvatarBackgroundColor};`"
+                    v-domresize
+                    @domresize="resizeAvatar"
+                >
+
+                    <div style="height:100%; width:100%; display:flex; align-items:center; justify-content:center;">
+                        <div :style="`transition:all 0.3s; padding:${avatarInnerPadding}px;`">
+
+                            <slot name="avatar">
+                                <WIcon
+                                    :icon="avatarIcon"
+                                    :size="avatarIconSize"
+                                    :color="useAvatarIconColor"
+                                ></WIcon>
+                            </slot>
+
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
+        </div>
+
+        <div :style="`transition:all 0.3s; padding-top:${avatarHeight/2-shiftVFromAvaterCenter}px;`"></div>
+
+        <div
+            avatarWidth
+            :class="`${contentShadow?'shadow':''}`"
+            :style="`transition:all 0.3s; border-radius:${contentBorderRadius}px; background:${useContentBackgroundColor};`"
+        >
+
+            <div style="display:flex;">
+
+                <div :style="`transition:all 0.3s; min-width:${avatarOuterPadding+avatarWidth+spaceHBetweenAvatarAndHeader}px; min-height:${avatarOuterPadding+(avatarHeight/2+shiftVFromAvaterCenter)+spaceVBetweenHeaderAndContent}px;`"></div>
+
+                <div :style="`transition:all 0.3s; width:100%; padding:${headerPadding}px; display:flex; align-items:${useHeaderVerticalAlign}; justify-content:flex-end;`">
+
+                    <div style="text-align:right;">
+                        <div :style="`transition:all 0.3s; color:${useSubHeaderTextColor}; font-size:${subHeaderTextSize}; line-height:${subHeaderTextSize};`">
+                            {{subHeaderText}}
+                        </div>
+
+                        <div :style="`transition:all 0.3s; color:${useHeaderTextColor}; font-size:${headerTextSize};`">
+                            {{headerText}}
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div :style="`transition:all 0.3s; border-top:${sepLineWidth}px solid ${useSepLineColor};`">
+
+                <div style="transition:all 0.3s;">
+                    <slot></slot>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import { mdiForest } from '@mdi/js'
+import color2hex from '../js/vuetifyColor.mjs'
+import domResize from '../js/domResize.mjs'
+import WIcon from './WIcon.vue'
+
+
+/**
+ * @vue-prop {Number} [avatarOuterPadding=15] 輸入圖標區外側間距數字，單位為px，預設15
+ * @vue-prop {Number} [avatarInnerPadding=15] 輸入圖標區內側間距數字，單位為px，預設15
+ * @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
+ * @vue-prop {Number} [shiftVFromAvaterCenter=20] 輸入圖標區基於水平中線之朝下平移數字，單位為px，預設20
+ * @vue-prop {Number} [spaceHBetweenAvatarAndHeader=20] 輸入圖標區與右側標題區間距數字，單位為px，預設20
+ * @vue-prop {Number} [spaceVBetweenHeaderAndContent=0] 輸入標題區與下方內容區間距數字，單位為px，預設0
+ * @vue-prop {String} [headerVerticalAlign='center'] 輸入標題區內文字垂直對齊字串，可選'top'、'center'、'bottom'，預設'center'
+ * @vue-prop {Number} [headerPadding=15] 輸入標題區間距數字，單位為px，預設15
+ * @vue-prop {String} [headerText=''] 輸入標題區主要文字字串，預設''
+ * @vue-prop {String} [headerTextColor='#444'] 輸入標題區主要文字顏色字串，預設'#444'
+ * @vue-prop {String} [headerTextSize='1.0rem'] 輸入標題區主要文字字型大小數字，預設'1.0rem'
+ * @vue-prop {String} [subHeaderText=''] 輸入標題區次要文字字串，預設''
+ * @vue-prop {String} [subHeaderTextColor='#888'] 輸入標題區次要文字顏色字串，預設'#888'
+ * @vue-prop {String} [subHeaderTextSize='0.7rem'] 輸入標題區次要文字字型大小數字，預設'0.7rem'
+ * @vue-prop {Number} [sepLineWidth=1] 輸入標題區與內容區分隔線寬度數字，單位為px，預設1
+ * @vue-prop {String} [sepLineColor='#ddd'] 輸入標題區與內容區分隔線顏色字串，預設'#ddd'
+ * @vue-prop {Number} [contentBorderRadius=3] 輸入內容區框圓角程度數字，單位為px，預設3
+ * @vue-prop {String} [contentBackgroundColor='white'] 輸入內容區背景顏色字串，預設'white'
+ * @vue-prop {Boolean} [contentShadow=true] 輸入是否使用內容區陰影效果數字，預設true
+ */
+export default {
+    directives: {
+        domresize: domResize(),
+    },
+    components: {
+        WIcon,
+    },
+    props: {
+        avatarOuterPadding: {
+            type: Number,
+            default: 15,
+        },
+        avatarInnerPadding: {
+            type: Number,
+            default: 15,
+        },
+        avatarIcon: {
+            type: String,
+            default: mdiForest,
+        },
+        avatarIconSize: {
+            type: Number,
+            default: 60,
+        },
+        avatarIconColor: {
+            type: String,
+            default: 'white',
+        },
+        avatarBorderWidth: {
+            type: Number,
+            default: 1,
+        },
+        avatarBorderColor: {
+            type: String,
+            default: 'transparent',
+        },
+        avatarBackgroundColor: {
+            type: String,
+            default: 'rgba(239,108,0,0.5)',
+        },
+        avatarBorderRadius: {
+            type: Number,
+            default: 10,
+        },
+        avatarShadow: {
+            type: Boolean,
+            default: true,
+        },
+        shiftVFromAvaterCenter: {
+            type: Number,
+            default: 20,
+        },
+        spaceHBetweenAvatarAndHeader: {
+            type: Number,
+            default: 20,
+        },
+        spaceVBetweenHeaderAndContent: {
+            type: Number,
+            default: 0,
+        },
+        headerVerticalAlign: {
+            type: String,
+            default: 'center', //top, center, bottom
+        },
+        headerPadding: {
+            type: Number,
+            default: 15,
+        },
+        headerText: {
+            type: String,
+            default: '',
+        },
+        headerTextColor: {
+            type: String,
+            default: '#444',
+        },
+        headerTextSize: {
+            type: String,
+            default: '1.0rem',
+        },
+        subHeaderText: {
+            type: String,
+            default: '',
+        },
+        subHeaderTextColor: {
+            type: String,
+            default: '#888',
+        },
+        subHeaderTextSize: {
+            type: String,
+            default: '0.7rem',
+        },
+        sepLineWidth: {
+            type: Number,
+            default: 1,
+        },
+        sepLineColor: {
+            type: String,
+            default: '#ddd',
+        },
+        contentBorderRadius: {
+            type: Number,
+            default: 3,
+        },
+        contentBackgroundColor: {
+            type: String,
+            default: 'white',
+        },
+        contentShadow: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function() {
+        return {
+
+            avatarWidth: 0,
+            avatarHeight: 0,
+
+            // headerHeight: 0,
+
+        }
+    },
+    computed: {
+
+        useAvatarIconColor: function() {
+            //console.log('computed useAvatarIconColor')
+
+            let vo = this
+
+            return color2hex(vo.avatarIconColor)
+        },
+
+        useAvatarBorderColor: function() {
+            //console.log('computed useAvatarBorderColor')
+
+            let vo = this
+
+            return color2hex(vo.avatarBorderColor)
+        },
+
+        useAvatarBackgroundColor: function() {
+            //console.log('computed useAvatarBackgroundColor')
+
+            let vo = this
+
+            return color2hex(vo.avatarBackgroundColor)
+        },
+
+        useHeaderVerticalAlign: function() {
+            //console.log('computed useHeaderVerticalAlign')
+
+            let vo = this
+
+            let c = ''
+            if (vo.headerVerticalAlign === 'bottom') {
+                c = 'flex-end'
+            }
+            else if (vo.headerVerticalAlign === 'center') {
+                c = 'center'
+            }
+            else {
+                //top, default
+                c = 'flex-start'
+            }
+
+            return c
+        },
+
+        useHeaderTextColor: function() {
+            //console.log('computed useHeaderTextColor')
+
+            let vo = this
+
+            return color2hex(vo.headerTextColor)
+        },
+
+        useSubHeaderTextColor: function() {
+            //console.log('computed useSubHeaderTextColor')
+
+            let vo = this
+
+            return color2hex(vo.subHeaderTextColor)
+        },
+
+        useSepLineColor: function() {
+            //console.log('computed useSepLineColor')
+
+            let vo = this
+
+            return color2hex(vo.sepLineColor)
+        },
+
+        useContentBackgroundColor: function() {
+            //console.log('computed useContentBackgroundColor')
+
+            let vo = this
+
+            return color2hex(vo.contentBackgroundColor)
+        },
+
+    },
+    methods: {
+
+        resizeAvatar: function(msg) {
+            // console.log('methods resizeAvatar', msg)
+
+            let vo = this
+
+            //update
+            vo.avatarWidth = msg.snew.offsetWidth
+            vo.avatarHeight = msg.snew.offsetHeight
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.shadow {
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+}
+.shadow-header {
+    box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.12), 0px 7px 10px 1px rgba(0, 0, 0, 0.06), 0px 2px 16px 1px rgba(0, 0, 0, 0.04);
+}
+</style>

package/src/components/WPanelBulge.vue

@@ -2,17 +2,17 @@
     <div>
 
         <div
-            :style="`padding:${useHeaderPadding}; 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>
 
@@ -45,12 +45,13 @@
 <script>
 import isnum from 'wsemi/src/isnum.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
+import parseSpace from '../js/parseSpace.mjs'
 import domResize from '../js/domResize.mjs'
 
 
 /**
  * @vue-prop {Number} [headerBorderRadius=0] 輸入標題區圓角寬度，單位為px，預設0
- * @vue-prop {Number|String} [headerPadding='0px 20px'] 輸入標題區邊寬長度數字或字串，若輸入數字則單位為px，若輸入字串則需自己添加單位，預設'0px 20px'
+ * @vue-prop {Object} [paddingStyle={v:0,h:20}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:20}
  * @vue-prop {String} [headerText=''] 輸入標題文字字串，預設''
  * @vue-prop {String} [headerTextColor='white'] 輸入標題文字顏色字串，預設'white'
  * @vue-prop {String} [headerBackgroundColor='teal lighten-2'] 輸入標題背景顏色字串，預設'teal lighten-2'
@@ -69,9 +70,14 @@ export default {
             type: Number,
             default: 0,
         },
-        headerPadding: {
-            type: [Number, String],
-            default: '0px 20px',
+        paddingStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    v: 0,
+                    h: 20,
+                }
+            },
         },
         headerText: {
             type: String,
@@ -113,6 +119,20 @@ export default {
     },
     computed: {
 
+        usePadding: function() {
+            //console.log('computed usePadding')
+
+            let vo = this
+
+            //parseSpace
+            let cs = parseSpace(vo.paddingStyle, { ext: { left: vo.shiftLeft, right: vo.shiftRight } })
+
+            //padding
+            let padding = `padding:${cs};`
+
+            return padding
+        },
+
         useHeaderTextColor: function() {
             //console.log('computed useHeaderTextColor')
 
@@ -129,19 +149,6 @@ export default {
             return color2hex(vo.headerBackgroundColor)
         },
 
-        useHeaderPadding: function() {
-            //console.log('computed useHeaderPadding')
-
-            let vo = this
-
-            if (isnum(vo.headerPadding)) {
-                return `${vo.headerPadding}px`
-            }
-            else {
-                return vo.headerPadding
-            }
-        },
-
         useContentBackgroundColor: function() {
             //console.log('computed useContentBackgroundColor')