jobdone-shared-files 1.1.21 → 1.1.22

package/autocompleteSelect.vue

@@ -6,8 +6,8 @@
                 selectedPreviewText
             }}</button>
         <!-- search input -->
-        <input class='form-control autocomplete-select-component-keyword-filter-input' :class="[triggerClass, searchInput]"
-            type="text" ref="keywordFilterInput" v-model="keyword"
+        <input class='form-control autocomplete-select-component-keyword-filter-input'
+            :class="[triggerClass, searchInput]" type="text" ref="keywordFilterInput" v-model="keyword"
             :placeholder="searchPlaceholder == '' ? selectedPreviewText : searchPlaceholder" maxlength="50"
             @keydown.enter="keyboardSelectConfirm($event)" @keydown.up="keyboardSwitch($event, -1)"
             @keydown.down="keyboardSwitch($event, 1)" @change="keyboardSwitchIndexReset()">
@@ -27,8 +27,8 @@
                         </div>
                     </li>
                     <template v-if="active">
-                        <li v-for="(opt, idx) in filterList" :key="idx" @click.stop="selectConfirm(opt)" :title="opt?.name"
-                            :id="`autocomplete-select-component-opt-item_${idx}`">
+                        <li v-for="(opt, idx) in filterList" :key="idx" @click.stop="selectConfirm(opt)"
+                            :title="opt?.name" :id="`autocomplete-select-component-opt-item_${idx}`">
                             <button class="autocomplete-select-component-opt-item" type="button"
                                 :class="`${idx == keyboardSwitchIndex ? 'active' : ''} ${optClass}`">
                                 <template v-if="htmlOption">
@@ -55,7 +55,7 @@
 // enum Data & Functions
 
 // vue & bootstrap
-import { ref, onMounted, onUnmounted, computed, toRaw } from 'vue'
+import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue'
 
 // plugins
 
@@ -106,7 +106,6 @@ const props = defineProps({
         default: false
     },
 
-
     previewKey: {
         type: String,
         default: '',
@@ -140,22 +139,15 @@ const componentContentInput = ref(null)
 const componentContentList = ref(null)
 const keywordFilterInput = ref(null)
 
-const valueIsUnselected = computed(()=>{
+const valueIsUnselected = computed(() => {
     const defaultPlaceholderValue = [null, undefined, 0, '']
-    let ary =[]
-    for (let index = 0; index < defaultPlaceholderValue.length; index++) {
-        const element = defaultPlaceholderValue[index];
-        if(!props.isUnselectedExtendValue.includes(element)){
-            ary.push(element)  
-        }
-    }
-    return ary || []
+    return defaultPlaceholderValue.filter(v => !props.isUnselectedExtendValue.includes(v))
 })
 const checkValueIsUnselected = (checkValue) => {
-    if(valueIsUnselected.value.includes(checkValue)){
+    if (valueIsUnselected.value.includes(checkValue)) {
         return true
     }
-    if((typeof checkValue) === 'object' && checkValue !== null && Object.keys(checkValue).length === 0){
+    if ((typeof checkValue) === 'object' && checkValue !== null && Object.keys(checkValue).length === 0) {
         return true
     }
     return false
@@ -163,36 +155,110 @@ const checkValueIsUnselected = (checkValue) => {
 
 // 是否開啟下拉選單
 const active = ref(false)
-const domPosition = ref({ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0, x: 0, y: 0 })
-function activeSelector() {
-    if (props.disabled) {
-        return
-    }
-    active.value = true
-    keywordFilterInput.value.focus()
-    domPosition.value = componentContentInput.value.getBoundingClientRect()
-}
 const listIsOnTop = ref(false)
-const positionStyle = computed(() => {
-    let screenHeight = window.innerHeight;
-    let info = toRaw(domPosition.value)
-    listIsOnTop.value = info.top >= (screenHeight - info.bottom)
-    let str = ''
+const positionStyle = ref('')
+
+// 自製定位：position fixed + getBoundingClientRect，不依賴外部套件
+const OFFSET = 4 // 下拉與 input 的間距(px)
+
+function updatePosition() {
+    if (!componentContentInput.value || !componentContentList.value) return
+
+    const rect = componentContentInput.value.getBoundingClientRect()
+    const listEl = componentContentList.value
+    const screenH = window.innerHeight
+    const spaceBelow = screenH - rect.bottom
+    const spaceAbove = rect.top
+    const listH = listEl.scrollHeight || 200
+
+    // flip: 下方空間不夠且上方比較多 → 顯示在上面
+    listIsOnTop.value = spaceBelow < listH && spaceAbove > spaceBelow
+
+    let style = `position:fixed;left:${rect.left}px;min-width:${rect.width}px;max-width:calc(90vw - ${rect.left}px);`
     if (listIsOnTop.value) {
-        str = `bottom:${screenHeight - info.top}px;max-height:calc(${info.top}px - 10%);`
+        style += `bottom:${screenH - rect.top + OFFSET}px;max-height:${spaceAbove - OFFSET}px;`
     } else {
-        str = `top:${info.bottom}px;max-height:calc(${screenHeight - info.bottom}px - 10%);`
+        style += `top:${rect.bottom + OFFSET}px;max-height:${spaceBelow - OFFSET}px;`
     }
-    return `${str}left:${info.x}px;max-width:calc(90% - ${info.x}px);min-width:${Math.abs(info.x - info.right)}px;`
-})
+    positionStyle.value = style
+}
+
+// 追蹤監聽器的清理函式
+let cleanupListeners = null
+let visibilityObserver = null
+
+function startTracking() {
+    // 收集所有可滾動的祖層
+    const scrollParents = getScrollParents(componentContentInput.value)
+    let rafId = null
+    const onUpdate = () => {
+        if (rafId) return
+        rafId = requestAnimationFrame(() => {
+            updatePosition()
+            rafId = null
+        })
+    }
+
+    scrollParents.forEach(el => el.addEventListener('scroll', onUpdate, { passive: true }))
+    window.addEventListener('resize', onUpdate, { passive: true })
+
+    // 偵測 input 離開可視區域時自動關閉
+    visibilityObserver = new IntersectionObserver((entries) => {
+        if (!entries[0].isIntersecting && active.value) {
+            leave()
+        }
+    }, { threshold: 0 })
+    visibilityObserver.observe(componentContentInput.value)
+
+    cleanupListeners = () => {
+        scrollParents.forEach(el => el.removeEventListener('scroll', onUpdate))
+        window.removeEventListener('resize', onUpdate)
+        if (visibilityObserver) {
+            visibilityObserver.disconnect()
+            visibilityObserver = null
+        }
+        cleanupListeners = null
+    }
+}
+
+function stopTracking() {
+    if (cleanupListeners) cleanupListeners()
+}
+
+// 找出所有可滾動的祖層元素
+function getScrollParents(el) {
+    const parents = []
+    let current = el?.parentElement
+    while (current) {
+        const style = getComputedStyle(current)
+        if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
+            parents.push(current)
+        }
+        current = current.parentElement
+    }
+    parents.push(window)
+    return parents
+}
+
+async function activeSelector() {
+    if (props.disabled) return
+    const wasActive = active.value
+    active.value = true
+    keywordFilterInput.value.focus()
+    if (!wasActive) {
+        await nextTick()
+        updatePosition()
+        startTracking()
+    }
+}
 
 function leave() {
+    stopTracking()
     listIsOnTop.value = false
     active.value = false
     keyword.value = ''
-    // TODO SCROLL CLOSE
     keyboardSwitchIndexReset()
-    keywordFilterInput.value.blur()
+    keywordFilterInput.value?.blur()
 }
 
 // 確認傳入選單列表內的選項Type，只檢查第一個，請內容統一，不要傳奇怪的東西進來
@@ -206,7 +272,7 @@ const optItemType = computed(() => {
     if (!allowOptItemType.includes(type)) {
         return ''
     }
-    if ((sampling instanceof Date) && (sampling instanceof RegExp) && Array.isArray(sampling)) {
+    if ((sampling instanceof Date) || (sampling instanceof RegExp) || Array.isArray(sampling)) {
         return ''
     }
     return type?.toLowerCase()
@@ -223,23 +289,14 @@ const filterList = computed(() => {
     if (keyword.value == '') {
         return props.opts
     }
-    let kwReplace = keyword.value.replace(/[.*+?^${}()|[\]\\]/g, "");
+    let kwReplace = keyword.value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     let regex = new RegExp(kwReplace, "i");
     if (optItemType.value === 'object') {
-        let final = props.opts.filter(i => {
-            for (var idx = 0; idx < props.filterKeys.length; idx++) {
-                if (regex.test(i[props.filterKeys[idx].toString()])) {
-                    return i
-                };
-            }
-        })
-        return final
+        return props.opts.filter(i =>
+            props.filterKeys.some(key => regex.test(i[key.toString()]))
+        )
     }
-    return props.opts.filter(i => {
-        if (regex.test(i)) {
-            return i
-        }
-    })
+    return props.opts.filter(i => regex.test(i))
 })
 
 // 從選項列表中挖出整個選中的item，因選中的值(可能是某個key)
@@ -262,6 +319,7 @@ function previewAdjust(itemObj) {
         let strAry = props.previewKey.split('+')
         let isUndefined = false
 
+        const undefinedKeys = []
         let finalStr = strAry.reduce((acc, cur) => {
             let v = cur.trim()
             if (v.match(/'[^']+'/g)) {
@@ -269,11 +327,17 @@ function previewAdjust(itemObj) {
             } else {
                 if (itemObj[v] === undefined) {
                     isUndefined = true
+                    undefinedKeys.push(v)
                 }
                 return acc + itemObj[v]
             }
         }, '')
         if (isUndefined) {
+            console.error(
+                `[autocompleteSelect] previewKey 中找不到對應欄位: [${undefinedKeys.join(', ')}]，` +
+                `物件實際擁有的 key: [${Object.keys(itemObj).join(', ')}]`,
+                itemObj
+            )
             return props.isUndefinedHint
         }
         return finalStr ? finalStr : props.placeholder
@@ -360,9 +424,10 @@ const searchInput = computed(() => {
     return ''
 })
 function initTrigger(event) {
-    if (componentContentInput.value.contains(event.target) || componentContentList.value.contains(event.target)) {
+    if (!componentContentInput.value) return
+    if (componentContentInput.value.contains(event.target) || componentContentList.value?.contains(event.target)) {
         activeSelector()
-    } else {
+    } else if (active.value) {
         leave()
     }
 }
@@ -372,6 +437,7 @@ onMounted(() => {
 
 onUnmounted(() => {
     window.removeEventListener("click", initTrigger);
+    stopTracking()
 })
 
 </script>
@@ -424,10 +490,7 @@ onUnmounted(() => {
 .autocomplete-select-component-selector-content {
     visibility: hidden;
     display: none;
-    position: fixed;
     z-index: 2000;
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
     max-height: 76vh;
     overflow: auto;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jobdone-shared-files",
-  "version": "1.1.21",
+  "version": "1.1.22",
   "description": "Shared JS and SCSS for Jobdone Enterprise.",
   "main": "index.js",
   "scripts": {