w-component-vue 2.3.88 → 2.3.89

package/src/components/WTooltip.vue

@@ -42,22 +42,17 @@
 </template>
 
 <script>
-import get from 'lodash-es/get.js'
-import last from 'lodash-es/last.js'
-import pull from 'lodash-es/pull.js'
-import isNumber from 'lodash-es/isNumber.js'
+import get from 'lodash-es/get.js'
+import last from 'lodash-es/last.js'
+import pull from 'lodash-es/pull.js'
+import isNumber from 'lodash-es/isNumber.js'
 import genID from 'wsemi/src/genID.mjs'
 import replace from 'wsemi/src/replace.mjs'
-import domIsClientXYIn from 'wsemi/src/domIsClientXYIn.mjs'
+import isfun from 'wsemi/src/isfun.mjs'
 import convertColor from '../js/convertColor.mjs'
 import parseSpace from '../js/parseSpace.mjs'
 import domResize from '../js/domResize.mjs'
-import { createPopper } from '@popperjs/core/lib/popper-lite.js' //不用安裝@popperjs/core, 因wsemi安裝tippy.js內有依賴@popperjs/core
-import flip from '@popperjs/core/lib/modifiers/flip.js'
-import offset from '@popperjs/core/lib/modifiers/offset.js'
-import hide from '@popperjs/core/lib/modifiers/hide.js'
-import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow.js'
-import computeStyles from '@popperjs/core/lib/modifiers/computeStyles'
+import BuildPopper from '../js/buildPopper.mjs'
 
 
 //tootip與popup不共用已出現項目清單, 避免互相影響
@@ -87,7 +82,8 @@ function removeTriggerMode(mode, mmkey) {
  * @vue-prop {Boolean} [autoFitMinWidth=false] 輸入是否使用驅動區寬度作為提示窗或彈窗之最小寬度布林值，預設false
  * @vue-prop {Boolean} [autoFitMaxWidth=false] 輸入是否使用驅動區寬度作為提示窗或彈窗之最大寬度布林值，預設false
  * @vue-prop {String} [placement='bottom'] 輸入提示窗或彈窗出現位置字串，可選'top-start'、'top'、'top-end'、'bottom-start'、'bottom'、'bottom-end'、'left-start'、'left'、'left-end'、'right-start'、'right'、'right-end'、，預設'bottom'
- * @vue-prop {Number} [placementDist=5] 輸入提示窗或彈窗距離觸發元素距離數字，單位為px，預設5
+ * @vue-prop {Number} [placementDistX=0] 輸入提示窗或彈窗距離觸發元素之水平向右平移數字，單位為px，預設0
+ * @vue-prop {Number} [placementDistY=5] 輸入提示窗或彈窗距離觸發元素之垂直向下平移數字，單位為px，預設5
  * @vue-prop {Number} [borderRadius=4] 輸入提示窗或彈窗框圓角度數字，單位為px，預設4
  * @vue-prop {String} [textFontSize='0.85rem'] 輸入提示窗或彈窗文字字型大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='white'] 輸入提示窗或彈窗文字顏色字串，預設'white'
@@ -143,7 +139,11 @@ export default {
             type: String,
             default: 'bottom',
         },
-        placementDist: {
+        placementDistX: {
+            type: Number,
+            default: 0,
+        },
+        placementDistY: {
             type: Number,
             default: 5,
         },
@@ -202,19 +202,9 @@ export default {
             valueTrans: false,
 
             triggerWidth: null,
-            cursorTriggerInner: false,
-            clickContentInner: false,
-            windowMousedown: null,
-            windowMouseup: null,
-            windowScroll: null,
-
-            popperInstance: null,
-            popperShow: false,
-
             contentStyle: '',
 
-            mouseClientX: 0,
-            mouseClientY: 0,
+            bp: null,
 
         }
     },
@@ -223,145 +213,22 @@ export default {
 
         let vo = this
 
-        //windowMousemove
-        vo.windowMousemove = (e) => {
-            // console.log(vo.mmkey, 'windowMousemove', e)
-
-            //save
-            vo.mouseClientX = e.clientX
-            vo.mouseClientY = e.clientY
-
-        }
-        window.addEventListener('mousemove', vo.windowMousemove, false)
-
-        //windowMousedown
-        vo.windowMousedown = (e) => {
-            // console.log(vo.mmkey, 'windowMousedown', e)
-
-            //divTrigger
-            let divTrigger = get(vo, '$refs.divTrigger', null)
-
-            //cursorTriggerInner, 滑鼠游標是否點擊於觸發區內
-            if (divTrigger) {
-                vo.cursorTriggerInner = domIsClientXYIn(e.clientX, e.clientY, divTrigger)
-            }
-            else {
-                vo.cursorTriggerInner = false
-            }
-
-            //divContent
-            let divContent = get(vo, '$refs.divContent', null)
-
-            //clickContentInner, 是否當前為顯示且擊於內容區內
-            if (vo.valueTrans && divContent) {
-                vo.clickContentInner = domIsClientXYIn(e.clientX, e.clientY, divContent)
-            }
-            else {
-                vo.clickContentInner = false
-            }
-
-        }
-        window.addEventListener('mousedown', vo.windowMousedown, false)
-
-        //windowMouseup
-        vo.windowMouseup = (e) => {
-            // console.log(vo.mmkey, 'windowMouseup', e, vo.checkTriggerEff(vo.mmkey))
-
-            //check
-            if (!vo.checkTriggerEff(vo.mmkey)) {
-                return
-            }
-
-            //當前為顯示時, 非點擊於觸發區與內容區, 才觸發隱藏事件
-            if (vo.valueTrans && !vo.cursorTriggerInner && !vo.clickContentInner) {
-                //console.log(vo.mmkey, 'click隱藏')
-
-                //evHide
-                vo.evHide('click', 'windowMouseup')
-
-            }
-            else {
-                //console.log(vo.mmkey, 'click不隱藏')
-                vo.cursorTriggerInner = false
-                vo.clickContentInner = false
-            }
-
-        }
-        window.addEventListener('mouseup', vo.windowMouseup, false)
-
-        //windowScroll
-        vo.windowScroll = (e) => {
-            // console.log(vo.mmkey, 'windowScroll', e, vo.checkTriggerEff(vo.mmkey))
-
-            // //check, 不能偵測checkTriggerEff, 因須支援由隱藏但通過捲動而滑鼠進入組件而顯示機制
-            // if (!vo.checkTriggerEff(vo.mmkey)) {
-            //     return
-            // }
-
-            //check, 只針對hover做處理
-            if (vo.kind !== 'hover') {
-                return
-            }
-
-            //divTrigger
-            let divTrigger = get(vo, '$refs.divTrigger', null)
-
-            //check
-            if (!divTrigger) {
-                return
-            }
-
-            //cursorTriggerInner, 滑鼠游標是否點擊於觸發區內
-            if (divTrigger) {
-                vo.cursorTriggerInner = domIsClientXYIn(vo.mouseClientX, vo.mouseClientY, divTrigger)
-                // console.log('domIsClientXYIn vo.cursorTriggerInner', vo.cursorTriggerInner)
-            }
-            else {
-                vo.cursorTriggerInner = false
-                // console.log('force vo.cursorTriggerInner', vo.cursorTriggerInner)
-            }
-
-            if (vo.cursorTriggerInner) {
-                //滑鼠位於於觸發區
-
-                if (vo.valueTrans) {
-                    //當前為顯示
-
-                    //不處理
-
-                }
-                else {
-                    //當前為隱藏
-                    // console.log(vo.mmkey, 'scroll顯示')
-
-                    //evShow
-                    vo.evShow('hover', 'windowScroll')
-
-                }
-
-            }
-            else {
-                //滑鼠非位於於觸發區
-
-                if (vo.valueTrans) {
-                    //當前為顯示
-                    // console.log(vo.mmkey, 'scroll隱藏')
-
-                    //evHide
-                    vo.evHide('hover', 'windowScroll')
-
-                }
-                else {
-                    //當前為隱藏
-
-                    //不處理
-
-                }
-
-            }
+        //BuildPopper
+        let keyShow = 'valueTrans'
+        let evNameValue = 'input'
+        vo.bp = new BuildPopper(vo,
+            vo.funGetDivTrigger,
+            vo.funGetDivContent,
+            keyShow,
+            evNameValue,
+            {
+                addTriggerMode,
+                checkTriggerEffMode,
+                removeTriggerMode,
+            })
 
-        }
-        window.addEventListener('scroll', vo.windowScroll, false)
+        //mounted
+        vo.bp.mounted()
 
     },
     beforeDestroy: function() {
@@ -369,20 +236,8 @@ export default {
 
         let vo = this
 
-        //window remove mousemove, mousedown, mouseup, scroll
-        window.removeEventListener('mousemove', vo.windowMousemove, false)
-        window.removeEventListener('mousedown', vo.windowMousedown, false)
-        window.removeEventListener('mouseup', vo.windowMouseup, false)
-        window.removeEventListener('scroll', vo.windowMouseup, false)
-
-        // //hidePopper, 不論click或hover一律隱藏
-        // vo.hidePopper('beforeDestroy')
-
-        //triggerEvent for hide
-        vo.triggerEvent(false)
-
-        //bbb
-        clearInterval(vo.trt)
+        //destroy
+        vo.bp.destroy()
 
     },
     computed: {
@@ -518,296 +373,48 @@ export default {
     },
     methods: {
 
-        addTrigger: function(mmkey) {
+        funGetDivTrigger: function() {
             let vo = this
-            return addTriggerMode(vo.mode, mmkey)
-        },
-
-        checkTriggerEff: function(mmkey) {
-            let vo = this
-            return checkTriggerEffMode(vo.mode, mmkey)
-        },
-
-        removeTrigger: function(mmkey) {
-            let vo = this
-            return removeTriggerMode(vo.mode, mmkey)
-        },
-
-        showPopper: function(from) {
-            // console.log('methods showPopper', this.mmkey, from)
-
-            let vo = this
-
-            //divTrigger
             let divTrigger = get(vo, '$refs.divTrigger', null)
-            if (divTrigger === null) {
-                return //console.log('無法找到點擊區元素')
-            }
-
-            //$nextTick, 因顯示後popperjs會用divContent撐開導致divTrigger寬度等同於divContent, 需延遲取得offsetWidth才是正確寬度
-            vo.$nextTick(() => {
-
-                //update triggerWidth
-                vo.triggerWidth = divTrigger.offsetWidth
-
-            })
-
-            //divContent
-            let divContent = get(vo, '$refs.divContent', null)
-
-            //check
-            if (divContent === null) {
-                return //console.log('無法找到顯示元素')
-            }
-
-            //addTrigger, 採同步方式添加, popup顯示前就會mmkey就會進清單
-            vo.addTrigger(vo.mmkey)
-
-            //@popperjs/core 2.x
-            let opt = {
-                strategy: 'fixed', //盡量使用'fixed'而不用'absolute', 否則位於多層dialog或多層drawer內popup顯示會異常
-                placement: vo.placement,
-                modifiers: [
-                    preventOverflow,
-                    computeStyles,
-                    {
-                        name: 'computeStyles',
-                        options: {
-                            gpuAcceleration: false, //預設true, 可關閉GPU加速
-                        },
-                    },
-                    flip,
-                    {
-                        name: 'flip',
-                        options: {
-                            fallbackPlacements: ['bottom-start', 'bottom-end', 'top-start', 'top-end', 'top', 'right-start', 'right-end', 'right', 'left-start', 'left-end', 'left'],
-                        },
-                    },
-                    offset,
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [0, vo.placementDist],
-                            //因popperjs會自動調位置, 故得通過callback函數處理指定位置時的偏移量
-                            // offset: ({ placement, reference, popper }) => {
-                            //     console.log('offset', placement, reference, popper, vo.placementDist)
-                            //     if (placement === 'bottom-start' || placement === 'bottom' || placement === 'bottom-end') {
-                            //         return [0, vo.placementDist]
-                            //     }
-                            //     else if (placement === 'top-start' || placement === 'top' || placement === 'top-end') {
-                            //         return [0, vo.placementDist]
-                            //     }
-                            //     else if (placement === 'left-start' || placement === 'left' || placement === 'left-end') {
-                            //         return [0, vo.placementDist]
-                            //     }
-                            //     else if (placement === 'right-start' || placement === 'right' || placement === 'right-end') {
-                            //         return [0, vo.placementDist]
-                            //     }
-                            //     else {
-                            //         return []
-                            //     }
-                            //     // return [0, vo.placementDist] //[Skidding, Distance]
-                            // },
-                        },
-                    },
-                    hide,
-                ],
-            }
-            vo.popperInstance = createPopper(divTrigger, divContent, opt)
-            // console.log('popperInstance', vo.popperInstance)
-
-        },
-
-        hidePopper: function(from) {
-            // console.log('methods hidePopper', from, this.mmkey)
-
-            let vo = this
-
-            //check
-            if (vo.popperInstance) {
-
-                //destroy
-                vo.popperInstance.destroy()
-                vo.popperInstance = null
-
-            }
-
-            //非同步移除用nextTick會太快, 得使用setTimeout
-            //不管有沒有popperInstance都進行移除, 於開發階段避免熱更新問題
-            setTimeout(() => {
-
-                //removeTrigger, 需採非同步移除, 避免window事件結束後, 此時會繼續觸發前面popup內的window事件, 若採同步移除就無法讓前面popup判斷是否需屏蔽
-                vo.removeTrigger(vo.mmkey)
-
-            }, 20)
-
-        },
-
-        updatePopper: function(msg) {
-            //console.log('methods updatePopper', msg)
-
-            let vo = this
-
-            //update
-            if (vo.popperInstance) {
-                vo.popperInstance.update()
-            }
-
-            //emit
-            vo.$emit('resize', msg)
-
+            return divTrigger
         },
 
-        displayPopper: function() {
-            //console.log('methods displayPopper')
-
+        funGetDivContent: function() {
             let vo = this
-
-            //showPopper or hidePopper
-            vo.$nextTick(() => {
-
-                //b
-                let b = vo.editable && vo.valueTrans //顯示時valueTrans=true與可編輯時才顯示, 否則一律隱藏
-
-                if (b && !vo.popperShow) {
-                    // console.log('call showPopper', vo.mmkey)
-
-                    //shift, 暫時無法取得popper自動變更的placement, shift無法即時連動, 待研究
-                    let shift = -15
-                    // if (vo.placement.indexOf('top') >= 0) {
-                    //     shift = 15
-                    // }
-                    // console.log('vo.placement', vo.placement, vo.placement.indexOf('top'))
-                    // console.log('shift', shift)
-
-                    //contentStyle, 初始化使用pointer-events:none避免彈出區遮蔽驅動區導致觸發隱藏
-                    vo.contentStyle = `opacity:0; pointer-events:none; transform:translateY(${shift}px);`
-
-                    vo.showPopper('displayPopper')
-                    vo.popperShow = true
-                    vo.$emit('show')
-                    // console.log('emit show')
-
-                    //contentStyle, 顯示才給予transition用以驅動動畫, 動畫期間使用pointer-events:none避免彈出區遮蔽驅動區導致觸發隱藏
-                    setTimeout(() => {
-                        vo.contentStyle = `transition:all ${vo.transitionTime}ms ease-out; opacity:1; pointer-events:none;`
-                    }, 1)
-
-                    //contentStyle, 動畫結束清除pointer-events:none, 使內部能接收事件
-                    setTimeout(() => {
-                        vo.contentStyle = ``
-                    }, vo.transitionTime)
-
-                }
-                else if (!b && vo.popperShow) {
-                    // console.log('call hidePopper', vo.mmkey)
-
-                    vo.hidePopper('displayPopper')
-                    vo.popperShow = false
-                    vo.$emit('hide')
-                    // console.log('emit hide')
-
-                }
-
-            })
-
+            let divContent = get(vo, '$refs.divContent', null)
+            return divContent
         },
 
-        updateValue: function (value, from) {
-            // console.log('methods updateValue', value, from)
-
+        evShow: function(kind, from) {
             let vo = this
-
-            //check, 不可編輯時跳出
-            if (!vo.editable) {
-                return
+            let f = get(vo, 'bp.evShow')
+            if (isfun(f)) {
+                vo.bp.evShow(kind, from)
             }
-
-            //save
-            vo.valueTrans = value
-            // console.log('updateValue', vo.valueTrans, from, vo.mmkey)
-
-            //displayPopper
-            vo.displayPopper()
-
         },
 
-        triggerEvent: function(value) {
-            // console.log('methods triggerEvent', value)
-
+        evHide: function(kind, from) {
             let vo = this
-
-            //check, 不可編輯時跳出
-            if (!vo.editable) {
-                return
-            }
-
-            //check
-            if (vo.isolated) {
-
-                //updateValue
-                vo.updateValue(value, 'triggerEvent')
-
+            let f = get(vo, 'bp.evHide')
+            if (isfun(f)) {
+                vo.bp.evHide(kind, from)
             }
-
-            //$nextTick, 不論是否isolated都須emit
-            vo.$nextTick(() => {
-
-                //emit
-                vo.$emit('input', value)
-
-            })
-
         },
 
-        evShow: function(kind, from) {
-            // console.log('methods evShow', kind, from)
-
+        updatePopper: function(msg, from) {
             let vo = this
-
-            //check, 不可編輯時跳出
-            if (!vo.editable) {
-                return
+            let f = get(vo, 'bp.updatePopper')
+            if (isfun(f)) {
+                vo.bp.updatePopper(msg, from)
             }
-
-            //check, 已經顯示就不再顯示
-            if (vo.valueTrans) {
-                return
-            }
-
-            //check, 只允許限制模式
-            if (vo.kind !== kind) {
-                return
-            }
-
-            //triggerEvent for show
-            vo.triggerEvent(true)
-
         },
 
-        evHide: function(kind, from) {
-            // console.log('methods evHide', kind, from)
-
+        updateValue: function(value, from) {
             let vo = this
-
-            //check, 不可編輯時跳出
-            if (!vo.editable) {
-                return
-            }
-
-            //check, 已經隱藏就不再隱藏
-            if (!vo.valueTrans) {
-                return
-            }
-
-            //check, 只允許限制模式
-            if (vo.kind !== kind) {
-                return
+            let f = get(vo, 'bp.updateValue')
+            if (isfun(f)) {
+                vo.bp.updateValue(value, from)
             }
-
-            //triggerEvent for hide
-            vo.triggerEvent(false)
-
         },
 
     },