w-component-vue 2.2.5 → 2.2.8

package/src/components/WDrawer.vue

@@ -2,11 +2,12 @@
     <div
         style=""
         :changeValue="changeValue"
+        :changeDrawerWidth="changeDrawerWidth"
     >
 
-        <div style="position:relative; height:100%;">
+        <div ref="divPanel" style="position:relative; height:100%;">
 
-            <div style="width:100%; height:100%; display:flex;">
+            <div style="width:100%; height:100%; display:flex; overflow-x:hidden;">
 
                 <!-- 撐開區, 需使用min-width避免被壓縮 -->
                 <div
@@ -15,7 +16,7 @@
                     v-if="isAtLeft"
                 ></div>
 
-                <div style="width:100%; height:100%;">
+                <div :style="`width:100%; height:100%;`">
 
                     <slot name="content"></slot>
 
@@ -33,32 +34,48 @@
             <!-- overlay半透明灰色層 -->
             <div
                 class="ts"
-                :style="`position:${effOverlayPosition}; ${effDrawerDetectLoction} top:0px; right:0px; bottom:0px; z-index:${effDrawerZIndex}; width:${effDrawerDetectWidth}; height:100%; opacity:${effOverlayOpacity}; background:${effOverlayColor};`"
+                :style="`position:${effOverlayPosition}; ${effDrawerDetectLoction} top:0px; bottom:0px; z-index:${effDrawerZIndex+1}; width:${effDrawerDetectWidth}; height:100%; opacity:${effOverlayOpacity}; background:${effOverlayColor};`"
                 v-if="showOverlay1Basic"
             >
             </div>
 
             <!-- overlay關閉事件監聽層, 與隱藏內層之向外陰影 -->
             <div
-                :style="`position:${effOverlayPosition}; ${effDrawerDetectLoction} top:0px; right:0px; bottom:0px; z-index:${effDrawerZIndex+1}; width:${effDrawerDetectWidth}; height:100%; overflow:hidden;`"
+                :style="`position:${effOverlayPosition}; ${effDrawerDetectLoction} top:0px; bottom:0px; z-index:${effDrawerZIndex+2}; width:${effDrawerDetectWidth}; height:100%; overflow:hidden;`"
                 @click="(ev)=>{ckToggle(ev,false)}"
                 v-show="showOverlay2Detect"
             >
 
                 <!-- drawer平移層 -->
                 <div
-                    _class="ts"
                     :style="`height:100%; display:flex; justify-content:${ isAtLeft ? 'start' : 'end' };`"
-                    _v-show="showOverlay4Translate"
                 >
 
                     <div
                         ref="divDrawer"
                         :class="`ts ${effDrawerClassShadow}`"
-                        :style="`width:${drawerWidth}px; height:100%; background:#fff; transform:translateX(${effDrawerTranslateX}%);`"
+                        :style="`width:${drawerWidthTrans}px; height:100%; background:#fff; transform:translateX(${effDrawerTranslateX}%);`"
                     >
 
-                        <slot name="drawer"></slot>
+                        <div
+                            class="ts"
+                            :style="`width:${drawerWidthTrans}px; height:100%; display:flex;`"
+                        >
+
+                            <div :style="`padding-left:${drawerBarSize/2}px;`" v-if="dragDrawerWidth && !isAtLeft"></div>
+
+                            <div
+                                class="ts"
+                                :style="`width:${drawerWidthTrans-drawerBarSize/2}px;`"
+                            >
+
+                                <slot name="drawer"></slot>
+
+                            </div>
+
+                            <div :style="`padding-left:${drawerBarSize/2}px;`" v-if="dragDrawerWidth && isAtLeft"></div>
+
+                        </div>
 
                     </div>
 
@@ -66,12 +83,29 @@
 
             </div>
 
+            <!-- 拖曳寬度bar, z-index需大於drawer區, 否則多層drawer開啟拖曳寬度bar時會被遮蔽 -->
+            <!-- 延遲至抽屜出現後才通過opacity=1顯示, 否則於浮動模式時會在外側陰影層馬上看到拖曳寬度bar, 使用者體驗不佳 -->
+            <div
+                ref="divBar"
+                :style="`position:${effOverlayPosition}; z-index:${effDrawerZIndex+3}; top:0px; ${isAtLeft?'left':'right'}:${drawerWidthTrans-bw/2}px; width:${bw}px; height:100%; border-left:${drawerBarBorderSize}px solid ${effDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${effDrawerBarBorderColor}; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
+                v-show="value && dragDrawerWidth"
+            >
+                <div :style="`width:${drawerBarSize}px; height:100%; background:${effDrawerBarColor};`"></div>
+            </div>
+
         </div>
 
     </div>
 </template>
 
 <script>
+import get from 'lodash/get'
+import filter from 'lodash/filter'
+import min from 'lodash/min'
+import isNumber from 'lodash/isNumber'
+import isnum from 'wsemi/src/isnum.mjs'
+import cdbl from 'wsemi/src/cdbl.mjs'
+import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
 
 
@@ -79,11 +113,18 @@ import color2hex from '../js/vuetifyColor.mjs'
  * @vue-prop {Boolean} [value=false] 輸入是否顯示布林值，預設false
  * @vue-prop {String} [mode='from-left'] 輸入抽屜顯示位置字串，可使用'from-left'與'from-right'，預設'from-left'
  * @vue-prop {Number} [drawerWidth=200] 輸入抽屜寬度數字，單位為px，預設200
+ * @vue-prop {Number} [drawerWidthMin=null] 輸入使用拖曳抽屜寬度分隔條(dragDrawerWidth=true)時，拖曳抽屜寬度分隔條最小值數字，預設null
+ * @vue-prop {Number} [drawerWidthMax=null] 輸入使用拖曳抽屜寬度分隔條(dragDrawerWidth=true)時，拖曳抽屜寬度分隔條最大值數字，預設null
  * @vue-prop {Boolean} [afloat=false] 輸入是否為浮動顯示布林值，設為true時浮在內容區上故不壓縮內容區寬度，預設false
  * @vue-prop {Boolean} [afloatByFix=false] 輸入浮動顯示時是否使用fixed使能具有滿版配置布林值，預設false
  * @vue-prop {Number} [overlayOpacity=0.45] 輸入浮動顯示時抽屜外側陰影層之透明度數字，預設0.45
  * @vue-prop {String} [overlayColor='grey darken-2'] 輸入浮動顯示時抽屜外側陰影層背景顏色字串，預設'grey darken-2'
  * @vue-prop {Number} [drawerZIndex=1] 輸入浮動顯示時抽屜使用z-index數字，預設1
+ * @vue-prop {Boolean} [dragDrawerWidth=false] 輸入是否使用拖曳抽屜寬度分隔條布林值，預設false
+ * @vue-prop {String} [drawerBarColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
+ * @vue-prop {Number} [drawerBarSize=2] 輸入分隔條尺寸數字，為分隔條寬度，單位為px，預設2
+ * @vue-prop {String} [drawerBarBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
+ * @vue-prop {Number} [drawerBarBorderSize=3] 輸入分隔條框線寬度數字，單位為px，預設3，通常配合barBorderColor='transparent'使可拖曳區加大又不遮蔽可視區
  */
 export default {
     directives: {
@@ -101,6 +142,14 @@ export default {
             type: Number,
             default: 200,
         },
+        drawerWidthMin: {
+            type: Number,
+            default: null,
+        },
+        drawerWidthMax: {
+            type: Number,
+            default: null,
+        },
         afloat: {
             type: Boolean,
             default: false,
@@ -121,10 +170,34 @@ export default {
             type: Number,
             default: 1,
         },
+        dragDrawerWidth: {
+            type: Boolean,
+            default: false,
+        },
+        drawerBarColor: {
+            type: String,
+            default: '#ddd',
+        },
+        drawerBarSize: {
+            type: Number,
+            default: 2,
+        },
+        drawerBarBorderColor: {
+            type: String,
+            default: 'transparent',
+        },
+        drawerBarBorderSize: {
+            type: Number,
+            default: 3, //抽屜內捲軸通常是WPanelScrolly的捲軸故寬度是8px, 而拖曳寬度bar邊寬是雙向展開, 故不能超過此8px
+        },
     },
     data: function() {
         return {
 
+            das: null,
+
+            drawerWidthTrans: 200,
+
             timerOverlay1Basic: null,
             showOverlay1Basic: false,
             effOverlay1Basic: false,
@@ -141,7 +214,34 @@ export default {
             // showOverlay4Translate: false,
             effOverlay4Translate: false,
 
+            timerOverlay5DragDrawerBar: null,
+            showOverlay5DragDrawerBar: false,
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //das
+        let das = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar, { useTouchDragForPanel: false })
+        das.on('dragBar', vo.dragBar)
+
+        //save
+        vo.das = das
+
+    },
+    beforeDestroy: function() {
+        //console.log('beforeDestroy')
+
+        let vo = this
+
+        //clear
+        if (vo.das) {
+            vo.das.clear()
         }
+
     },
     computed: {
 
@@ -159,6 +259,12 @@ export default {
             return ''
         },
 
+        changeDrawerWidth: function() {
+            let vo = this
+            vo.drawerWidthTrans = vo.drawerWidth
+            return ''
+        },
+
         virtualZoneWidth: function() {
             if (!this.value) {
                 return 0
@@ -166,7 +272,7 @@ export default {
             if (this.afloat) {
                 return 0
             }
-            return this.drawerWidth
+            return this.drawerWidthTrans
         },
 
         isAtLeft: function() {
@@ -221,13 +327,29 @@ export default {
             if (this.afloat) {
                 return '100%'
             }
-            return `${this.drawerWidth}px`
+            return `${this.drawerWidthTrans}px`
         },
 
         effDrawerClassShadow: function() {
             return this.afloat && this.showOverlay3Shadow ? 'bs' : ''
         },
 
+        bw: function() {
+            //console.log('computed changeParam')
+
+            let vo = this
+
+            return vo.drawerBarSize + vo.drawerBarBorderSize * 2
+        },
+
+        effDrawerBarColor: function() {
+            return color2hex(this.drawerBarColor)
+        },
+
+        effDrawerBarBorderColor: function() {
+            return color2hex(this.drawerBarBorderColor)
+        },
+
     },
     methods: {
 
@@ -276,11 +398,14 @@ export default {
             clearTimeout(vo.timerOverlay2Detect)
             clearTimeout(vo.timerOverlay3Shadow)
             clearTimeout(vo.timerOverlay4Translate)
+            clearTimeout(vo.timerOverlay5DragDrawerBar)
 
             let sec
 
             //check
             if (value) {
+                //顯示
+
                 // vo.fsmShowOverlay.showOverlay()
                 // vo.fsmShowStateOverlay.showOverlay()
                 sec = 20
@@ -307,8 +432,14 @@ export default {
                     vo.effOverlay4Translate = true
                 }, sec)
 
+                vo.timerOverlay5DragDrawerBar = setTimeout(() => {
+                    vo.showOverlay5DragDrawerBar = true
+                }, 300)
+
             }
             else {
+                //隱藏
+
                 // vo.fsmShowOverlay.hideOverlay()
                 // vo.fsmShowStateOverlay.hideOverlay()
                 sec = 300
@@ -339,6 +470,8 @@ export default {
                 //     vo.showOverlay4Translate = false
                 // }, sec)
 
+                vo.showOverlay5DragDrawerBar = false
+
             }
 
             //emit
@@ -346,6 +479,100 @@ export default {
 
         },
 
+        dragBar: function({ clientX }) {
+            // console.log('methods dragBar', clientX)
+
+            let vo = this
+
+            //check dragDrawerWidth
+            if (!vo.dragDrawerWidth) {
+                return
+            }
+
+            //check value
+            if (!vo.value) {
+                return
+            }
+
+            //getWindowWidth
+            let getWindowWidth = () => {
+                let w1 = get(window, 'innerWidth')
+                // console.log('window.innerWidth', window.innerWidth)
+                let w2 = get(document, 'documentElement.clientWidth')
+                // console.log('document.documentElement.clientWidth', document.documentElement.clientWidth)
+                let w3 = get(document, 'body.clientWidth')
+                // console.log('document.body.clientWidth', document.body.clientWidth)
+                let ws = [w1, w2, w3]
+                ws = filter(ws, isNumber)
+                let w = min(ws)
+                return w
+            }
+
+            //getWindowWidth
+            let windowWidth = getWindowWidth()
+
+            //bd
+            let bd = null
+            if (!vo.afloatByFix) {
+                //抽屜浮動於組件panel
+                bd = vo.$el.getBoundingClientRect()
+            }
+            else {
+                //抽屜浮動於body
+                bd = {
+                    left: 0,
+                    width: windowWidth,
+                }
+            }
+
+            let x = clientX
+
+            //dw
+            let dw = null
+            if (vo.isAtLeft) {
+                //抽屜在左
+                dw = x - bd.left
+            }
+            else {
+                //抽屜在右
+                dw = bd.width - (x - bd.left)
+            }
+            // console.log(bd, 'x', x, 'dw', dw)
+
+            //dwMax
+            let dwMax = null
+            if (!vo.afloatByFix) {
+                //抽屜浮動於組件panel
+                dwMax = vo.$el.offsetWidth
+            }
+            else {
+                //抽屜浮動於body
+                dwMax = windowWidth
+            }
+            if (isnum(vo.drawerWidthMax)) {
+                dwMax = cdbl(vo.drawerWidthMax)
+            }
+            // console.log('dwMax', dwMax, 'windowWidth', windowWidth)
+
+            //dwMin
+            let dwMin = 0
+            if (isnum(vo.drawerWidthMin)) {
+                dwMin = cdbl(vo.drawerWidthMin)
+            }
+
+            //min, max
+            dw = Math.min(dw, dwMax)
+            dw = Math.max(dw, dwMin)
+
+            //update
+            vo.drawerWidthTrans = dw
+            // console.log('dw', dw)
+
+            //emit
+            vo.$emit('update:drawerWidth', dw)
+
+        },
+
     },
 }
 </script>

package/src/components/WImageCascadingDyn.vue

@@ -73,6 +73,7 @@ import map from 'lodash/map'
 import get from 'lodash/get'
 import times from 'lodash/times'
 import size from 'lodash/size'
+import isNumber from 'lodash/isNumber'
 import importResources from 'wsemi/src/importResources.mjs'
 import domShowImagesDyn from 'wsemi/src/domShowImagesDyn.mjs'
 import ispint from 'wsemi/src/ispint.mjs'
@@ -101,6 +102,7 @@ function getFileName(str) {
  * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入viewerjs組件js與css檔案位置字串陣列，預設詳見原始碼處props->pathItems->default
  * @vue-prop {Array} [images=[]] 輸入圖片網址陣列，預設[]
  * @vue-prop {Number} [imageWidth=300] 輸入圖片寬度數字，單位為px，預設300
+ * @vue-prop {Number} [imageWidthSoft=null] 輸入自動計算最小需滿足的圖片寬度數字，單位為px，預設null
  * @vue-prop {Number} [colNum=null] 輸入組件寬度圖片欄位(水平向有幾張圖片)數量數字，預設null
  * @vue-prop {Number} [space=15] 輸入圖片間間距長度數字，單位為px，預設15
  * @vue-prop {Object} [imageStyle={}] 輸入圖片style物件，預設{}
@@ -132,6 +134,10 @@ export default {
             type: Number,
             default: 300,
         },
+        imageWidthSoft: {
+            type: Number,
+            default: null,
+        },
         colNum: {
             type: Number,
             default: null,
@@ -206,7 +212,6 @@ export default {
             return ''
         },
 
-
         changeStyle: function() {
             // console.log('computed changeStyle')
 
@@ -387,8 +392,22 @@ export default {
             //uesImageWidth, colNum
             let uesImageWidth = null
             let colNum = null
-            if (ispint(vo.colNum)) {
-                //優先使用colNum計算imageWidth
+            if (isNumber(vo.imageWidthSoft) && vo.imageWidthSoft > 0) {
+                // console.log('優先使用imageWidthSoft計算colNum與imageWidth')
+
+                //colNum
+                colNum = (vo.widthPanel + vo.space) / (vo.imageWidthSoft + vo.space)
+                colNum = Math.floor(colNum)
+                colNum = Math.max(colNum, 1)
+                // console.log('colNum', colNum)
+
+                //uesImageWidth
+                uesImageWidth = (vo.widthPanel - vo.space * (colNum - 1)) / colNum
+                // console.log('uesImageWidth', uesImageWidth)
+
+            }
+            else if (ispint(vo.colNum)) {
+                // console.log('次先使用colNum計算imageWidth')
 
                 //colNum
                 colNum = cint(vo.colNum)
@@ -398,7 +417,8 @@ export default {
                 uesImageWidth = Math.floor(uesImageWidth)
 
             }
-            else if (vo.imageWidth > 0) {
+            else if (isNumber(vo.imageWidth) && vo.imageWidth > 0) {
+                // console.log('最後使用imageWidth計算colNum')
 
                 //uesImageWidth
                 uesImageWidth = vo.imageWidth
@@ -412,7 +432,7 @@ export default {
 
             }
             else {
-                console.log('invalid colNum or imageWidth')
+                console.log('invalid colNum or imageWidth or imageWidthSoft', vo.colNum, vo.imageWidth, vo.imageWidthSoft)
                 colNum = 4
                 uesImageWidth = 300
             }
@@ -582,7 +602,7 @@ export default {
     margin: 0;
     padding: 0;
     display: block;
-    background-color: transparent;
+    background: transparent;
     border-style: none;
 }
 .inp:focus {