w-component-vue 2.2.63 → 2.2.65

package/src/components/WPopup.vue

@@ -1,92 +1,44 @@
 <template>
-    <div style="display:inline-block;" :changeValue="changeValue">
-
-        <div
-            ref="divTrigger"
-            style="outline:none;"
-            tabindex="0"
-            @keyup.enter="clickTrigger"
-            @click.stop="clickTrigger"
-        >
-
-            <slot name="trigger"></slot>
-
-        </div>
-
-        <!-- 需外層使用position包覆隔離, 因popper會對外層產生影響(添加class) -->
-        <div style="position:fixed; left:0; top:0; z-index:99999;">
-            <!-- style不給予position因會被popper洗掉改用translate定位 -->
-            <!-- 若使用minWidth, 會使popupjs重算給予minWidth用以自動撐開彈窗寬度失效, 若於其內slot外添加div給予minWidth, 亦會使popupjs給予minWidth機制失效, 待研究 -->
-            <div
-                divContent
-                ref="divContent"
-                class="WPopup-Content"
-                :style="`z-index:100000; background:${useBackgroundColor}; ${useMinWidth} ${useMaxWidth} ${useBorderRadius} ${useShadow}`"
-                v-show="valueTrans"
-                v-domresize
-                @domresize="updatePopper"
-            >
-                <template v-if="valueTrans">
-                    <slot
-                        name="content"
-                        :funHide="()=>{updateValue(false)}"
-                    ></slot>
-                </template>
-            </div>
-        </div>
-
-    </div>
+    <WTooltip
+        v-bind="{...$props,mode:'popup'}"
+        v-on="$listeners"
+    >
+        <template v-slot:trigger>
+            <slot
+                name="trigger"
+            ></slot>
+        </template>
+        <template v-slot:content="props">
+            <slot
+                name="content"
+                :funHide="props.funHide"
+            ></slot>
+        </template>
+    </WTooltip>
 </template>
 
 <script>
-import get from 'lodash/get'
-import last from 'lodash/last'
-import pull from 'lodash/pull'
-import isNumber from 'lodash/isNumber'
-import genID from 'wsemi/src/genID.mjs'
-import replace from 'wsemi/src/replace.mjs'
-import domIsClientXYIn from 'wsemi/src/domIsClientXYIn.mjs'
-// import domCancelEvent from 'wsemi/src/domCancelEvent.mjs' //同樣都監聽window(非dom階層)故無法cancel
-import color2hex from '../js/vuetifyColor.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'
-
-
-let respList = []
-function addTrigger(mmkey) {
-    respList.push(mmkey)
-}
-function checkTriggerEff(mmkey) {
-    return last(respList) === mmkey
-}
-function removeTrigger(mmkey) {
-    // console.log('removeTrigger 1', mmkey, last(respList))
-    // respList.pop()
-    pull(respList, mmkey)
-    // console.log('removeTrigger 2', respList)
-}
+import WTooltip from './WTooltip.vue'
 
 
 /**
  * @vue-prop {Boolean} [value=false] 輸入是否顯示布林值，預設false
- * @vue-prop {Boolean} [isolated=false] 輸入是否為獨立顯引狀態布林值，也就是可不接收外部傳入value值，預設false
- * @vue-prop {Number} [minWidth=null] 輸入最小寬度，單位為px，預設null
- * @vue-prop {Number} [maxWidth=null] 輸入最大寬度，單位為px，預設null
- * @vue-prop {Number} [distY=5] 輸入彈窗距離觸發元素底部的距離，單位為px，預設5
+ * @vue-prop {Boolean} [isolated=false] 輸入當mode為'popup'時是否為獨立顯引狀態布林值，也就是可不接收外部傳入value值，預設false
+ * @vue-prop {String} [placement='bottom-start'] 輸入內容區出現位置字串，可選'top-start'、'top'、'top-end'、'bottom-start'、'bottom'、'bottom-end'、'left-start'、'left'、'left-end'、'right-start'、'right'、'right-end'、，預設'bottom-start'
+ * @vue-prop {Number} [minWidth=null] 輸入最小寬度數字，單位為px，預設null
+ * @vue-prop {Number} [maxWidth=null] 輸入最大寬度數字，單位為px，預設null
+ * @vue-prop {Boolean} [autoFitMinWidth=false] 輸入是否使用驅動區寬度作為內容區之最小寬度布林值，預設false
+ * @vue-prop {Number} [placementDist=5] 輸入彈窗距離觸發元素距離數字，單位為px，預設5
  * @vue-prop {Number} [borderRadius=4] 輸入框圓角度數字，單位為px，預設4
  * @vue-prop {String} [backgroundColor='white'] 輸入內容區塊背景顏色字串，預設'white'
  * @vue-prop {Boolean} [shadow=true] 輸入是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
+ * @vue-prop {Number} [transitionTime=200] 輸入淡入出現時間數字，單位為ms，預設200
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
  */
 export default {
-    directives: {
-        domresize: domResize(),
+    components: {
+        WTooltip,
     },
     props: {
         value: {
@@ -97,6 +49,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        placement: {
+            type: String,
+            default: 'bottom-start',
+        },
         minWidth: {
             type: Number,
             default: null,
@@ -105,7 +61,11 @@ export default {
             type: Number,
             default: null,
         },
-        distY: {
+        autoFitMinWidth: {
+            type: Boolean,
+            default: false,
+        },
+        placementDist: {
             type: Number,
             default: 5,
         },
@@ -125,6 +85,10 @@ export default {
             type: String,
             default: '0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)',
         },
+        transitionTime: {
+            type: Number,
+            default: 200,
+        },
         editable: {
             type: Boolean,
             default: true,
@@ -132,396 +96,16 @@ export default {
     },
     data: function() {
         return {
-            mmkey: null,
-
-            valueTrans: false,
-
-            triggerWidth: null,
-            clickTriggerInner: false,
-            clickContentInner: false,
-            windowMousedown: null,
-            windowMouseup: null,
-
-            popperInstance: null,
-            popperShow: false,
-
         }
     },
     mounted: function() {
-        //console.log('mounted')
-
-        let vo = this
-
-        //mmkey
-        vo.mmkey = genID()
-
-        //windowMousedown
-        vo.windowMousedown = (e) => {
-            // console.log(vo.mmkey, 'windowMousedown', e)
-
-            //divTrigger
-            let divTrigger = get(vo, '$refs.divTrigger', null)
-
-            //是否點擊於觸發區內
-            if (divTrigger) {
-                vo.clickTriggerInner = domIsClientXYIn(e.clientX, e.clientY, divTrigger)
-            }
-            else {
-                vo.clickTriggerInner = false
-            }
-
-            //divContent
-            let divContent = get(vo, '$refs.divContent', null)
-
-            //是否當前為顯示且擊於內容區內
-            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, checkTriggerEff(vo.mmkey))
-
-            //check
-            if (!checkTriggerEff(vo.mmkey)) {
-                return
-            }
-
-            //console.log(vo.mmkey, 'windowMouseup', `clickOuter`, !vo.clickContentInner)
-            //console.log(vo.mmkey, 'windowMouseup', `valueTrans`, vo.valueTrans)
-            //當前為顯示時, 非點擊於觸發區與內容區, 才觸發隱藏事件
-            if (vo.valueTrans && !vo.clickTriggerInner && !vo.clickContentInner) {
-                // console.log(vo.mmkey, 'vo.valueTrans', vo.valueTrans)
-                // console.log(vo.mmkey, 'vo.clickTriggerInner', vo.clickTriggerInner)
-                // console.log(vo.mmkey, 'vo.clickContentInner', vo.clickContentInner)
-
-                //triggerEvent for hide
-                vo.triggerEvent(false)
-
-                //console.log(vo.mmkey, '隱藏')
-            }
-            else {
-                vo.clickTriggerInner = false
-                vo.clickContentInner = false
-                //console.log(vo.mmkey, '不隱藏')
-            }
-
-        }
-        window.addEventListener('mouseup', vo.windowMouseup, false)
-
-    },
-    beforeDestroy: function() {
-        //console.log('beforeDestroy')
-
-        let vo = this
-
-        //window remove mousedown mouseup
-        window.removeEventListener('mousedown', vo.windowMousedown, false)
-        window.removeEventListener('mouseup', vo.windowMouseup, false)
-
-        //hidePopper
-        vo.hidePopper()
-
     },
     computed: {
-
-        changeValue: function () {
-            //console.log('computed changeValue')
-
-            let vo = this
-
-            //trigger
-            let value = vo.value
-            let isolated = vo.isolated
-
-            //updateValue
-            if (!isolated) {
-                vo.updateValue(value)
-            }
-
-            return ''
-        },
-
-        useMinWidth: function() {
-            //console.log('computed useMinWidth')
-
-            let vo = this
-
-            //minWidth
-            let minWidth = vo.triggerWidth
-            if (isNumber(vo.minWidth)) {
-                minWidth = vo.minWidth
-            }
-            return `min-width:${minWidth}px;`
-        },
-
-        useMaxWidth: function() {
-            //console.log('computed useMaxWidth')
-
-            let vo = this
-
-            if (isNumber(vo.maxWidth)) {
-                return `max-width:${vo.maxWidth}px;`
-            }
-            return ''
-        },
-
-        useBorderRadius: function() {
-            //console.log('computed useBorderRadius')
-
-            let vo = this
-
-            if (isNumber(vo.borderRadius)) {
-                return `border-radius:${vo.borderRadius}px;`
-            }
-            return ''
-        },
-
-        useBackgroundColor: function() {
-            //console.log('computed useBackgroundColor')
-
-            let vo = this
-
-            return color2hex(vo.backgroundColor)
-        },
-
-        useShadow: function() {
-            //console.log('computed useShadow')
-
-            let vo = this
-
-            //check
-            if (!vo.shadow) {
-                return ''
-            }
-
-            //shadowStyle
-            let s = replace(vo.shadowStyle, ';', '')
-            if (s !== '') {
-                return `box-shadow:${s};`
-            }
-
-            return ''
-        },
-
     },
     methods: {
-
-        updateValue: function (value) {
-            //console.log('methods updateValue', value)
-
-            let vo = this
-
-            //check, 不可編輯時跳出
-            if (!vo.editable) {
-                return
-            }
-
-            //save
-            vo.valueTrans = value
-
-            //display
-            vo.display()
-
-        },
-
-        display: function() {
-            //console.log('methods display')
-
-            let vo = this
-
-            //showPopper or hidePopper
-            vo.$nextTick(() => {
-
-                //b
-                let b = vo.editable && vo.valueTrans //顯示時valueTrans=true與可編輯時才顯示, 否則一律隱藏
-
-                if (b && !vo.popperShow) {
-                    vo.showPopper()
-                    vo.popperShow = true
-                    vo.$emit('show')
-                }
-                else if (!b && vo.popperShow) {
-                    vo.hidePopper()
-                    vo.popperShow = false
-                    vo.$emit('hide')
-                }
-
-            })
-
-        },
-
-        triggerEvent: function(value) {
-            // console.log('methods triggerEvent', value)
-
-            let vo = this
-
-            if (vo.isolated) {
-
-                //updateValue
-                vo.updateValue(value)
-
-            }
-            else {
-
-                //$nextTick
-                vo.$nextTick(() => {
-
-                    //emit
-                    vo.$emit('input', value)
-
-                })
-
-            }
-
-        },
-
-        showPopper: function() {
-            // console.log(this.mmkey, 'methods showPopper')
-
-            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就會進清單
-            addTrigger(vo.mmkey)
-
-            //@popperjs/core 2.x
-            let opt = {
-                strategy: 'fixed', //需使用fixed, 否則popup彈窗會盡量基於trigger寬度而盡量窄化
-                placement: 'bottom-start',
-                modifiers: [
-                    // preventOverflow,
-                    // computeStyles,
-                    // {
-                    //     name: 'computeStyles',
-                    //     options: {
-                    //         gpuAcceleration: false, //預設true, 可關閉GPU加速
-                    //     },
-                    // },
-                    flip,
-                    hide,
-                    offset,
-                    {
-                        name: 'offset',
-                        options: {
-                            //offset: [0, 5], //因popperjs會自動調位置, 故得通過callback函數處理指定位置時的偏移量
-                            offset: ({ placement, reference, popper }) => {
-                                // console.log('offset', placement, reference, popper, vo.distY)
-                                if (placement === 'bottom-start' || placement === 'bottom-end') {
-                                    // console.log('placement', placement, 'reference', reference, 'popper', popper, 'distY', vo.distY)
-                                    return [0, vo.distY]
-                                }
-                                else if (placement === 'top-start' || placement === 'top-end') {
-                                    return [0, vo.distY]
-                                }
-                                else {
-                                    return []
-                                }
-                            },
-                        },
-                    },
-                ],
-            }
-            vo.popperInstance = createPopper(divTrigger, divContent, opt)
-            // console.log('popperInstance', vo.popperInstance)
-
-        },
-
-        hidePopper: function() {
-            // console.log(this.mmkey, 'methods hidePopper')
-
-            let vo = this
-
-            //check
-            if (vo.popperInstance) {
-
-                //destroy
-                vo.popperInstance.destroy()
-                vo.popperInstance = null
-
-            }
-
-            //非同步移除用nextTick會太快, 得使用setTimeout
-            //不管有沒有popperInstance都進行移除, 於開發階段避免熱更新問題
-            setTimeout(() => {
-
-                //removeTrigger, 需採非同步移除, 避免window事件結束後, 此時會繼續觸發前面popup內的window事件, 若採同步移除就無法讓前面popup判斷是否需屏蔽
-                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)
-
-        },
-
-        clickTrigger: function() {
-            //console.log('methods clickTrigger')
-
-            let vo = this
-
-            //check, 不可編輯時跳出
-            if (!vo.editable) {
-                return
-            }
-
-            //check, 已經顯示就不再顯示
-            if (vo.valueTrans) {
-                return
-            }
-
-            //triggerEvent for show
-            vo.triggerEvent(true)
-
-        },
-
     },
 }
 </script>
 
 <style scoped>
-.WPopup-Content[data-popper-reference-hidden] {
-    visibility: hidden;
-    pointer-events: none;
-}
 </style>
-

package/src/components/WTextSelect.vue

@@ -53,7 +53,7 @@
                     :expansionIcon="showExpansionIcon?undefined:''"
                     :expansionIconSize="expansionIconSize"
                     :expansionIconColor="expansionIconColor"
-                    :distY="useDistY"
+                    :placementDist="useDistY"
                     :defItemHeight="defItemHeight"
                     :editable="editable"
                     :focused="focusedTrans"

package/src/components/WTextSuggest.vue

@@ -58,7 +58,7 @@
                     :loadingText="loadingText"
                     :noResultsText="noResultsText"
                     :searchingText="searchingText"
-                    :distY="useDistY"
+                    :placementDist="useDistY"
                     :defItemHeight="defItemHeight"
                     :editable="editable"
                     :focused="focusedTrans"

package/src/components/WTextSuggestCore.vue

@@ -3,7 +3,8 @@
         style="display:block;"
         :minWidth="minWidth"
         :maxWidth="maxWidth"
-        :distY="distY"
+        :autoFitMinWidth="autoFitMinWidth"
+        :placementDist="placementDist"
         :editable="editable"
         :value="showPanelTrans"
         @input="(v)=>{updateShowPanel(v,'WPopup')}"
@@ -18,9 +19,10 @@
                 <!-- 盡量不要讓display:flex暴露至外層 -->
                 <div style="display:flex; align-items:center;">
 
+                    <!-- 不能使用tabindex=0禁用駐點, 會導致點擊無法觸發windowMousedown與windowMouseup事件, 進而導致無法自動取消popup -->
                     <div
                         :style="`width:100%; _height:${height}px; _line-height:${height}px; color:${useTextColor}; ${useTextFontSize} vertical-align:middle; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; outline:none;`"
-                        tabindex="0"
+                        _tabindex="0"
                         @focus="focusText"
                         v-if="mode==='select'"
                     >
@@ -148,7 +150,8 @@ import WIcon from './WIcon.vue'
  * @vue-prop {Number} [maxHeight=200] 輸入顯示區最大高度數字，單位為px，預設200
  * @vue-prop {Number} [minWidth=null] 輸入最小寬度，單位為px，預設null
  * @vue-prop {Number} [maxWidth=null] 輸入最大寬度，單位為px，預設null
- * @vue-prop {Number} [distY=5] 輸入彈窗距離觸發元素底部的距離數字，單位為px，預設5
+ * @vue-prop {Boolean} [autoFitMinWidth=true] 輸入是否使用驅動區寬度作為內容區之最小寬度布林值，預設true
+ * @vue-prop {Number} [placementDist=5] 輸入彈窗距離觸發元素距離數字，單位為px，預設5
  * @vue-prop {String} [placeholder=''] 輸入無文字時的替代字符字串，預設''
  * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
  * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
@@ -251,7 +254,11 @@ export default {
             type: Number,
             default: null,
         },
-        distY: {
+        autoFitMinWidth: {
+            type: Boolean,
+            default: true,
+        },
+        placementDist: {
             type: Number,
             default: 5,
         },

package/src/components/WTimeday.vue

@@ -33,7 +33,7 @@
                 :textColor="textColor"
                 :pickColor="pickColor"
                 :value="value"
-                :distY="distY"
+                :placementDist="placementDist"
                 :editable="editable"
                 @update:focused="changeFocused"
                 @input="(v)=>{$emit('input', v)}"
@@ -72,7 +72,7 @@ import WTimedayCore from './WTimedayCore.vue'
  * @vue-prop {String} [borderColorHover='white'] 輸入滑鼠移入時邊框顏色字串，預設'white'
  * @vue-prop {String} [borderColorFocus='white'] 輸入取得焦點時邊框顏色字串，預設'white'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
- * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
+ * @vue-prop {Number} [placementDist=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  * @vue-prop {Boolean} [focused=false] 輸入是否為取得焦點狀態，預設false
  */
@@ -171,7 +171,7 @@ export default {
             type: String,
             default: 'deep-orange darken-1',
         },
-        distY: {
+        placementDist: {
             type: Number,
             default: 7,
         },

package/src/components/WTimedayCore.vue

@@ -6,7 +6,7 @@
 
         <v-menu
             offset-y
-            :nudge-bottom="distY"
+            :nudge-bottom="placementDist"
             :close-on-content-click="false"
             :disabled="!editable"
             v-model="show"
@@ -53,7 +53,7 @@ import color2hex from '../js/vuetifyColor.mjs'
  * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
- * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
+ * @vue-prop {Number} [placementDist=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
@@ -74,7 +74,7 @@ export default {
             type: String,
             default: 'deep-orange darken-1',
         },
-        distY: {
+        placementDist: {
             type: Number,
             default: 7,
         },