w-component-vue 2.1.69 → 2.1.73

package/src/components/WDynamicList.vue

@@ -1,57 +1,77 @@
 <template>
     <WPanelScrollyCore
         ref="wpsc"
-        :ratio.sync="scrollRatio"
+        :scrollTop.sync="scrollTop"
         :viewHeightMax="viewHeightMax"
-        :contentHeight="itemsHeight"
         :changeFilterKeyWords="changeFilterKeyWords"
-        @change="changeScrollInfor"
+        @change-infor="changeInfor"
     >
 
-        <template v-for="(item,kitem) in useItems">
-            <!-- 需設定width:100%, 因ie11的flex內文字會自動撐開版面導致不會換行 -->
-            <div
-                ref="wdsDiv"
-                :key="`wpsc-${kitem}`"
-                :style="`position:absolute; top:${item.screenY}px; left:0px; width:100%; opacity:${(item.nowShow && item.delayShow)?1:0.001}; ${item.delayShow?'transition:opacity 0.1s':''};`"
-                :index="item.index"
-                :nowShow="item.nowShow"
-                :delayShow="item.delayShow"
-                :y="item.y"
-            >
-                <!-- 因分隔線若是直接用border或translateY或_padding, 於渲染時會有多層更新而讓迭代收斂更為困難, 此處直接用定位div去繪製分隔線 -->
-                <div :style="`position:relative;`">
+        <!-- panel內需使用單1個div顯示動態內容, 若有多個div會因panel渲染時有次序顯示問題, 導致捲軸多次更新, 體驗上不佳且會多重觸發scroll事件, 故上下撐開區改用padding-top與padding-bottom處理 -->
+        <div :style="`padding-top:${itemsHeightPre}px; padding-bottom:${itemsHeightAft}px;`">
+
+            <template v-for="(item,kitem) in useItems">
+                <div
+                    ref="wdsDiv"
+                    :key="`kitem-${kitem}`"
+                    :style="`_opacity:${item.nowShow?1:0.001};`"
+                    :kitem="kitem"
+                    :index="item.index"
+                    :nowShow="'c:'+item.nowShow"
+                    :y="item.y"
+                    :h="item.height"
+                    :top="item.top"
+                >
 
                     <slot
                         :row="item.row"
                         :index="item.index"
                     ></slot>
 
-                    <!-- 用position:absolute定位方式繪製分隔線, top為(-高度/2), 直接畫在兩元素中間, 故線設定太高會遮蔽過多元素內容 -->
-                    <div :style="`position:absolute; top:${-getSeparatorHeight(kitem)/2}px; left:0px; width:100%; border-top:${getSeparatorHeight(kitem)}px solid ${useSeparatorColor};`"></div>
-
                 </div>
-            </div>
-        </template>
+            </template>
+
+        </div>
 
-        <div style="padding:12px; font-size:0.8rem;" v-if="useItems.length===0">
-            {{searchEmpty}}
+        <div style="padding:12px; font-size:0.8rem;" v-if="!disableLoadingText && lockFromSetRows">
+            {{loadingText}}
         </div>
 
+        <template v-else>
+
+            <!-- 因暫時還沒刷新需顯示項目(useItems.length=0), 又確定已有搜尋結果searchingResults>0, 才顯示searchingText -->
+            <div style="padding:12px; font-size:0.8rem;" v-if="useItems.length===0 && searchingResults>0">
+                {{searchingText}}
+            </div>
+
+            <template v-else>
+
+                <!-- 已確定無搜尋結果searchingResults=0, 才顯示noResultsText -->
+                <div style="padding:12px; font-size:0.8rem;" v-if="searchingResults===0 && noResultsText!==''">
+                    {{noResultsText}}
+                </div>
+
+            </template>
+
+        </template>
+
     </WPanelScrollyCore>
 </template>
 
 <script>
-import each from 'lodash/each'
 import get from 'lodash/get'
+import each from 'lodash/each'
 import map from 'lodash/map'
+// import find from 'lodash/find'
 import join from 'lodash/join'
+import isNumber from 'lodash/isNumber'
 import values from 'lodash/values'
 import isEqual from 'lodash/isEqual'
 import size from 'lodash/size'
 import toString from 'lodash/toString'
 import cloneDeep from 'lodash/cloneDeep'
 import cint from 'wsemi/src/cint.mjs'
+// import cstr from 'wsemi/src/cstr.mjs'
 import genID from 'wsemi/src/genID.mjs'
 import genPm from 'wsemi/src/genPm.mjs'
 import delay from 'wsemi/src/delay.mjs'
@@ -61,14 +81,18 @@ import isnum from 'wsemi/src/isnum.mjs'
 import iseobj from 'wsemi/src/iseobj.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
 import isint from 'wsemi/src/isint.mjs'
+import isp0int from 'wsemi/src/isp0int.mjs'
 import isbol from 'wsemi/src/isbol.mjs'
+import isEle from 'wsemi/src/isEle.mjs'
+// import haskey from 'wsemi/src/haskey.mjs'
+// import waitFun from 'wsemi/src/waitFun.mjs'
 import arrFilterByKeywords from 'wsemi/src/arrFilterByKeywords.mjs'
 import o2j from 'wsemi/src/o2j.mjs'
 import debounce from 'wsemi/src/debounce.mjs'
 import pmThrottle from 'wsemi/src/pmThrottle.mjs'
 import binarySearch from '../js/binarySearch.mjs'
 import globalMemory from '../js/globalMemory.mjs'
-import color2hex from '../js/vuetifyColor.mjs'
+// import color2hex from '../js/vuetifyColor.mjs'
 import WPanelScrollyCore from './WPanelScrollyCore.vue'
 
 
@@ -80,11 +104,11 @@ let gm = globalMemory()
  * @vue-prop {Array} [rows=[]] 輸入資料陣列，預設[]，各元素配合slot顯示即可，slot內提供row與irow，對應原始rows內各元素與指標，另外各元素slot時不要用margin避免計算高度有誤差
  * @vue-prop {String} [filterKeywords=''] 輸入過濾關鍵字字串，多關鍵字用空白分隔，預設''
  * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，預設400
- * @vue-prop {Number} [itemMinHeight=24] 輸入各元素顯示高度，單位為px，預設24，會於真實顯示後自動更新高度
+ * @vue-prop {Number} [itemMinHeight=24] 輸入各元素顯示高度，單位為px，預設24，會於真實顯示後自動更新高度，原則上盡量設定為最多項目可能的高度值，而按需顯示時才自動調整避免大幅刷新
  * @vue-prop {Number} [itemsPreload=5] 輸入上下方預先載入元素數量，預設5
- * @vue-prop {String} [searchEmpty='Empty'] 輸入無過濾結果字串，預設'Empty'
- * @vue-prop {Number} [separatorHeight=1] 輸入分隔線高度數字，預設1
- * @vue-prop {String} [separatorColor='transparent'] 輸入分隔線顏色字串，預設'transparent'
+ * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
+ * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
+ * @vue-prop {String} [searchingText='Searching...'] 輸入搜索中字串，預設'Searching...'
  * @vue-prop {Boolean} [show=true] 輸入是否為顯示模式布林值，預設true，供組件嵌入popup時, 因先初始化但尚未顯示不需渲染, 可給予show=false避免無限偵測與重算高度問題
  */
 export default {
@@ -112,17 +136,17 @@ export default {
             type: Number,
             default: 5,
         },
-        searchEmpty: {
+        loadingText: {
             type: String,
-            default: 'Empty',
+            default: 'Loading...',
         },
-        separatorHeight: {
-            type: Number,
-            default: 1,
+        noResultsText: {
+            type: String,
+            default: 'No results',
         },
-        separatorColor: {
+        searchingText: {
             type: String,
-            default: 'transparent',
+            default: 'Searching...',
         },
         show: {
             type: Boolean,
@@ -131,22 +155,39 @@ export default {
     },
     data: function() {
         return {
-            pmt: pmThrottle(),
-            dbc: debounce(),
+            pmtRefresh: pmThrottle(),
+            dbcRefresh: debounce(),
+            dbcSetRows: debounce(),
+
             mmkey: null,
+
             changeHeight: true, //是否有變更高度, 初始化給true使第一次顯示能自動重算節點高度
             changeDisplay: false, //是否有變更節點顯隱狀態
             changeFilter: false, //是否有變更過濾關鍵字
+
+            lockFromSetRows: false, //上鎖, 指定數據時禁止變更
             lockFromProcess: false, //上鎖, 使能由外部強制變更內部數據items而不會重產items
-            lockFromSetRows: false, //上鎖
-            scrollRatio: 0, //捲動比例
+            lockFromRefreshUseItems: false, //上鎖, 顯示與調整items高度時禁止變更
+            disableLoadingText: false, //禁止顯示載入中文字, 小數據時自動使用
+            searchingResults: -1, //過濾結果, -1初始無狀態, 0過濾無結果, >0有結果
+
+            // scrollRatio: 0, //捲動比例
+            scrollTop: 0, //捲動值
+            // scrollTopTemp: 0, //上次捲動值
             scrollInfor: null, //目前捲軸資訊
+
             filterKeywordsTemp: '', //上次過濾關鍵字
+
             itemsHeight: 0, //全部節點高度
+            // itemsHeightTemp: 0, //上次全部節點高度
+            itemsHeightPre: 0,
+            itemsHeightAft: 0,
             useItems: [], //實際需顯示節點陣列
             emItemsTemp: [], //實際需顯示節點之指標陣列
-            iNochangeScrollInfor: 0, //觸發changeScrollInfor時但所到scrollInfor為同值之次數
-            tNochangeScrollInfor: 0, //增加scrollInfor同值次數時之時間
+
+            // iNochangeScrollInfor: 0, //觸發changeScrollInfor時但所到scrollInfor為同值之次數
+            // tNochangeScrollInfor: 0, //增加scrollInfor同值次數時之時間
+
         }
     },
     mounted: function() {
@@ -175,13 +216,27 @@ export default {
             immediate: true,
             deep: true,
             handler(value) {
-                //console.log('watch rows', value)
+                // console.log('watch rows', value)
 
                 let vo = this
 
                 //setRows
                 vo.setRows(value)
 
+                // //依照數量調用儲存數據函數
+                // if (size(value) < 1000) {
+
+                //     //setRows
+                //     vo.setRows(value)
+
+                // }
+                // else {
+
+                //     //setRowsDebounce, 若數據value有被修改則會再次觸發watch, 故得用debounce拖勾, 但大量數據時會發生迭代次數過高報錯
+                //     vo.setRowsDebounce(value)
+
+                // }
+
             }
         },
 
@@ -196,31 +251,15 @@ export default {
             //ft for trigger
             let ft = vo.filterKeywords
 
-            //refreshDebounce
-            vo.refreshDebounce('changeFilterKeyWords')
+            //filterDebounce
+            vo.filterDebounce()
 
             return ft
         },
 
-        useSeparatorColor: function() {
-            //console.log('computed useSeparatorColor')
-
-            let vo = this
-
-            return color2hex(vo.separatorColor)
-        },
-
     },
     methods: {
 
-        getSeparatorHeight: function(kitem) {
-            //console.log('methods getSeparatorHeight', kitem)
-
-            let vo = this
-
-            return kitem > 0 ? vo.separatorHeight : 0
-        },
-
         setRowsCore: function(rows) {
             // console.log('methods setRowsCore', rows)
 
@@ -229,12 +268,18 @@ export default {
             //check
             if (vo.lockFromProcess) {
                 let msg = 'disabling call when lockFromProcess'
+                //console.log(msg)
                 return msg
             }
             // if (vo.lockFromSetRows) { //setRows內需呼叫setRowsCore故不能上鎖
             //     let msg = 'disabling call when lockFromSetRows'
+            //     //console.log(msg)
             //     return msg
             // }
+            // if (vo.lockFromRefreshUseItems) { //更新時可能會切換組件並塞入數據故不能上鎖
+            //     console.log('return by lockFromRefreshUseItems')
+            //     return
+            // }
 
             //check
             if (!isarr(rows)) {
@@ -273,6 +318,7 @@ export default {
                     row: v,
                 }
             })
+            // console.log('setRowsCore items', items)
 
             //save
             //vo.items = items
@@ -281,12 +327,9 @@ export default {
             //changeDisplay, 若由外部強制變更rows或呼叫setRows變更rows, 則需重設changeDisplay使能重算全部節點高度
             vo.changeDisplay = true
 
-            // //refresh
-            // vo.refresh('setRowsCore')
-
         },
 
-        setRows: function(rows) {
+        setRows: async function(rows) {
             // console.log('methods setRows', rows)
 
             let vo = this
@@ -296,8 +339,9 @@ export default {
                 //lock
                 vo.lockFromSetRows = true
 
-                //先儲存scrollInfor一份至scrollInforTemp, 供顯隱後重算scrollInfor
-                vo.scrollInforTemp = cloneDeep(vo.scrollInfor)
+                //lock
+                vo.disableLoadingText = size(rows) <= 10000
+                // console.log('disableLoadingText', size(rows), vo.disableLoadingText)
 
                 //setRowsCore
                 vo.setRowsCore(rows)
@@ -305,120 +349,38 @@ export default {
                 //refreshCore
                 await vo.refreshCore('setRows')
 
-                //resumeScrollRatio
-                vo.resumeScrollRatio()
-
-                //triggerEvent
-                vo.triggerEvent('setRows')
-
-                //unlock
-                vo.lockFromSetRows = false
-
             }
 
             //core
-            core()
+            await core()
                 .catch((err) => {
                     console.log(err)
                 })
+                .finally(() => {
 
-        },
+                    //unlock
+                    vo.lockFromSetRows = false
 
-        refresh: function(from) {
-            //console.log('methods refresh', from)
-
-            let vo = this
+                    //unlock
+                    vo.disableLoadingText = false
 
-            //refreshCore
-            vo.pmt(vo.refreshCore, from)
-                .catch(() => { })
+                })
 
         },
 
-        refreshCore: async function(from) {
-            // console.log('methods refreshCore', from)
+        setRowsDebounce: function(rows) {
+            //console.log('methods setRowsDebounce', rows)
 
             let vo = this
 
-            //check
-            if (vo.mmkey === null) {
-                return
-            }
+            //lock, 若直接調用debounce版則需初始就lock
+            vo.lockFromSetRows = true
 
-            //core
-            let n = 0
-            let limit = 3
-            async function core() {
-                let pm = genPm()
+            //dbcSetRows
+            vo.dbcSetRows(() => {
 
-                //n
-                n += 1
-                // console.log('n', n)
-
-                //check, 取得元素高度因文字換行會有來回變動問題, 需有強制跳出機制
-                if (n > limit) {
-                    // console.log(`forced termination: call refreshCore ${limit} [from: ${from}]`)
-                    pm.resolve(false)
-                    return pm
-                }
-
-                //genUseItems
-                vo.genUseItems()
-
-                //delay
-                await delay(1)
-
-                //filterItems
-                vo.filterItems()
-
-                //delay
-                await delay(1)
-
-                //updateItemsHeight
-                let b = vo.updateItemsHeight()
-
-                //resolve
-                pm.resolve(b)
-
-                return pm
-            }
-
-            async function call() {
-
-                //若任何元素高度有變更則再重新計算需顯示的節點, 此時的確有可能會載入新節點, 所以原本給予節點之預設高度不能太高, 偵測時元素就多是變高, 所以需顯示的節點就會變少, 避免造成重新載入新節點狀況
-                let r = await core()
-                while (r) {
-                    r = await core()
-                }
-
-            }
-
-            //call
-            await call()
-
-            //genUseItems
-            vo.genUseItems()
-
-            //delayShow
-            for (let k = 0; k < size(vo.useItems); k++) {
-                let v = vo.useItems[k]
-                if (!v.delayShow) {
-                    v.delayShow = true
-                }
-            }
-
-        },
-
-        refreshDebounce: function(from) {
-            //console.log('methods refreshDebounce', from)
-
-            let vo = this
-
-            //dbc
-            vo.dbc(() => {
-
-                //refresh
-                vo.refresh(from)
+                //setRows, 若rows被修改會導致watch監測再次觸發, 故使用debounce中斷關聯
+                vo.setRows(rows)
 
             })
 
@@ -434,16 +396,6 @@ export default {
                 return
             }
 
-            //default scrollInfor
-            if (vo.scrollInfor === null) {
-                vo.scrollInfor = {
-                    r: 0,
-                    t: 0,
-                    b: vo.viewHeightMax,
-                    ch: vo.itemsHeight,
-                }
-            }
-
             //items
             //let items = vo.items
             let items = gm.get(vo.mmkey)
@@ -465,7 +417,8 @@ export default {
             if (indStartActual === null) {
                 indStartActual = 0
             }
-            let indStart = Math.max(indStartActual - vo.itemsPreload, 0)
+            // let indStart = Math.max(indStartActual - vo.itemsPreload, 0)
+            let indStart = Math.max(indStartActual - 1, 0) //只先預載上方1個
 
             //indEnd, 該元素區(頂部)有侵入顯示區
             let indEndActual = binarySearch(items, (ind) => {
@@ -478,28 +431,60 @@ export default {
             }
             let indEnd = Math.min(indEndActual + vo.itemsPreload, n - 1)
 
-            //kpDelayShow
-            let kpDelayShow = {}
-            each(vo.useItems, (v) => {
-                kpDelayShow[v.index] = true
-            })
+            //itemsHeightPre
+            let itemsHeightPre = 0
+            for (let k = 0; k < indStart; k++) {
+                let v = items[k]
+                if (v.displayShow && v.filterShow) {
+                    itemsHeightPre += v.height
+                }
+            }
+
+            //itemsHeightAft
+            let itemsHeightAft = 0
+            for (let k = indEnd + 1; k <= n - 1; k++) {
+                let v = items[k]
+                if (v.displayShow && v.filterShow) {
+                    itemsHeightAft += v.height
+                }
+            }
+            // console.log('indStartActual', indStartActual, 'indEndActual', indEndActual, 'indStart', indStart, 'indEnd', indEnd)
 
             //useItems
             let useItems = []
             for (let k = indStart; k <= indEnd; k++) {
-                let v = {
-                    ...items[k]
-                }
+                // let v = {
+                //     ...items[k]
+                // }
+                let v = cloneDeep(items[k])
                 if (v.displayShow && v.filterShow) {
-                    v.screenY = v.y - vo.scrollInfor.t //換算成實際顯示y向的px位置
-                    v.nowShow = k >= indStartActual //顯示區下方之預載節點都直接顯示供重算高度
-                    v.delayShow = kpDelayShow[k] === true //已經顯示的節點就直接顯示, 否則delayShow=false就是延遲顯示
+                    v.nowShow = true //k >= indStartActual //顯示區下方之預載節點都直接顯示供重算高度
+                    v.top = v.y - vo.scrollInfor.t
                     useItems.push(v)
                 }
             }
 
             //save
-            vo.useItems = useItems
+            let bPadding = false
+            if (vo.itemsHeightPre !== itemsHeightPre) {
+                bPadding = true
+                vo.itemsHeightPre = itemsHeightPre
+            }
+            if (vo.itemsHeightAft !== itemsHeightAft) {
+                bPadding = true
+                vo.itemsHeightAft = itemsHeightAft
+            }
+            let bItems = false
+            if (!isEqual(vo.useItems, useItems)) {
+                bItems = true
+                vo.useItems = useItems
+                // console.log('更新useItems', size(useItems), cloneDeep(useItems))
+            }
+            // let hs = 0
+            // each(useItems, (v) => {
+            //     hs += v.height
+            // })
+            // console.log('h(all)=', itemsHeightPre + hs + itemsHeightAft, 'itemsHeightPre', itemsHeightPre, 'itemsHeightAft', itemsHeightAft, 'itemsHeight', hs, 'useItems', cloneDeep(useItems))
 
             //偵測是否已有wdsDiv
             if (vo.$refs.wdsDiv) {
@@ -524,6 +509,81 @@ export default {
 
             }
 
+            return {
+                change: bPadding || bItems,
+            }
+        },
+
+        syncItemsHeight: function(items, fun) {
+            // console.log('methods syncItemsHeight')
+
+            let vo = this
+
+            //wdsDiv
+            let wdsDiv = get(vo, '$refs.wdsDiv', [])
+            // console.log('wdsDiv', wdsDiv)
+
+            //只偵測已顯示dom的高度是否有變化, 若是變更未顯示節點例如於最末新增節點, 就無法得知有變
+            let changeHeight = false
+            each(wdsDiv, (v, k) => {
+                // console.log('wdsDiv', k, v)
+                //採分層級判斷用以加速, 但可讀性變差
+
+                //check getAttribute, 可能因切換組件導致元素消失
+                if (!v.getAttribute) {
+                    console.log('找不到getAttribute')
+                    return true //跳出換下一個
+                }
+
+                //因更新次數不能太多, 若無算準nowShow會導致無法顯示, 若用以偵測也會導致已顯示節點會更新高度但無法顯示
+                // //有標記nowShow顯示才計算高度, 現在nowShow=false一樣顯示只是高度透明, 故需要更新高度, 否則會因為先拉到後面且預設項目高度過低, 導致上方項目所儲存之高度很小但又已撐開為實際高度, 導致顯示誤差
+                // let nowShow = v.getAttribute('nowShow')
+                // if (nowShow !== 'c:true') {
+                //     return true //跳出換下一個
+                // }
+
+                //取得數據儲存指標
+                let index = v.getAttribute('index')
+                if (!isp0int(index)) { //index >= 0 && index < n
+                    console.log('!isp0int(index)', index)
+                    return true //跳出換下一個
+                }
+
+                //cint
+                index = cint(index)
+
+                //找偵測高度元素, 需針對slot外層元素判斷offsetHeight比較準確, 否則用v.offsetHeight跟cnode.offsetHeight不同(通常差1px), 則會出現捲動後項目位置跳動問題
+                let cnode = get(v, 'children.0')
+                if (!isEle(cnode)) {
+                    console.log('!isEle(cnode)', cnode)
+                    return true //跳出換下一個
+                }
+
+                //記得slot提供繪製元素不要用margin避免計算高度有誤差
+                // let h = v.offsetHeight
+                let h = cnode.offsetHeight
+                // console.log('index', index, '1-height', items[index].height, '2-height', cnode.offsetHeight, cnode)
+
+                //detect height
+                if (items[index].height !== h) {
+                    // console.log('元素高度有更新', 'index', index, ',', items[index].height, '->', h, items[index])
+
+                    //fun
+                    if (isfun(fun)) {
+                        fun('diff-new', index, h)
+                    }
+
+                    //標記為高度有更新
+                    changeHeight = true
+
+                }
+                else {
+                    // console.log('元素高度無更新', 'index', index, ',', h, items[index])
+                }
+
+            })
+
+            return changeHeight
         },
 
         updateItemsHeight: function() {
@@ -543,22 +603,13 @@ export default {
             //n
             let n = size(items)
 
-            //check changeHeight, 只偵測已顯示dom的高度是否有變化, 若是變更未顯示節點例如於最末新增節點, 就無法得知有變
-            let wdsDiv = get(vo, '$refs.wdsDiv', []) //可能因切換組件導致元素消失
-            each(wdsDiv, (v) => {
-                if (v.getAttribute) {
-                    let nowShow = v.getAttribute('nowShow')
-                    if (nowShow) {
-                        let index = cint(v.getAttribute('index'))
-                        if (index >= 0 && index < n) {
-                            let h = v.offsetHeight //元素不要用margin避免計算高度有誤差
-                            if (items[index].height !== h) {
-                                items[index].height = h
-                                vo.changeHeight = true
-                            }
-                        }
-                    }
+            //changeHeight, syncItemsHeight
+            vo.changeHeight = vo.syncItemsHeight(items, (mode, index, h) => {
+                if (mode !== 'diff-new') {
+                    return
                 }
+                // console.log('修改高度', 'index', index, items[index].height, '->', h)
+                items[index].height = h
             })
 
             //check visible, 若組件未顯示(例如display:none)則不視為高度有變更狀態, 避免無限更新
@@ -567,6 +618,7 @@ export default {
             }
 
             //check
+            let itemsHeightTemp = null
             let b = vo.changeHeight || vo.changeDisplay || vo.changeFilter
             if (b) {
 
@@ -575,7 +627,7 @@ export default {
                 for (let i = 0; i < n; i++) {
                     let v = items[i]
                     if (v.y !== y) {
-                        v.y = y
+                        items[i].y = y
                     }
                     if (v.displayShow && v.filterShow) {
                         y += v.height
@@ -583,7 +635,7 @@ export default {
                 }
 
                 //update itemsHeight
-                let itemsHeightTemp = vo.itemsHeight
+                itemsHeightTemp = vo.itemsHeight
                 if (itemsHeightTemp !== y) {
                     itemsHeightTemp = y
                 }
@@ -591,17 +643,19 @@ export default {
                 //check empty
                 if (itemsHeightTemp === 0) {
                     //console.log('偵測出現itemsHeightTemp=0, 強制改為43')
-                    itemsHeightTemp = 43 //先預算出empty時高度
+                    itemsHeightTemp = 43 //先預算出empty時高度, 使顯示加速
                 }
 
-                //check same
-                let pxLimit = 4 //全部項目高度誤差門檻(px)
-                if (Math.abs(vo.itemsHeight - itemsHeightTemp) > pxLimit) { //偵測總項目高度是否與前次差超過pxLimit
-                    vo.itemsHeight = itemsHeightTemp
-                }
-                else {
-                    b = vo.changeDisplay || vo.changeFilter //若沒超過門檻pxLimit, 則b直接使用changeDisplay與changeFilter, 否則b包含changeHeight會影響導致refresh while導致無限偵測
-                }
+                //check
+                // let pxLimit = 4 //全部項目高度誤差門檻(px)
+                // if (Math.abs(vo.itemsHeight - itemsHeightTemp) > pxLimit) { //偵測總項目高度是否與前次差超過pxLimit
+                //     console.log('updateItemsHeight 需更新itemsHeight', vo.itemsHeight, '->', itemsHeightTemp)
+                //     vo.itemsHeightTemp = vo.itemsHeight
+                //     vo.itemsHeight = itemsHeightTemp
+                // }
+                // else {
+                //     b = vo.changeDisplay || vo.changeFilter //若沒超過門檻pxLimit, 則b直接使用changeDisplay與changeFilter, 否則b包含changeHeight會影響導致refresh while導致無限偵測
+                // }
 
                 //reset
                 vo.changeHeight = false
@@ -610,11 +664,14 @@ export default {
 
             }
 
-            return b
+            return {
+                change: b,
+                itemsHeight: itemsHeightTemp,
+            }
         },
 
-        changeScrollInfor: async function(e) {
-            // console.log('methods changeScrollInfor', e)
+        refreshCore: async function(from) {
+            // console.log('methods refreshCore', from)
 
             let vo = this
 
@@ -623,61 +680,215 @@ export default {
                 return
             }
 
-            //check
-            //不能直接使用偵測scrollInfor是否相等, 因wsp會有resize觸發此事件, 會給出內部的scrollInfor與上次相同故為原值, 若檢查相同則離開將無法重算各動態項目高度
-            //仍有非預期行為會持續觸發changeScrollInfor, 且提供的scrollInfor相同, 故改採最大觸發限制
-            //因外部不同操作行為會累計次數, 故需要給予指定時間內判斷最大觸發限制
-            // console.log('isEqual(vo.scrollInfor, e)', e)
-            if (isEqual(vo.scrollInfor, e)) {
-                let limitNum = 3 //指定時間內最大相同scrollInfor次數
-                let limitTime = 200 //指定時間
+            //check visible, 若組件未顯示(例如display:none)則不更新
+            if (!vo.show) {
+                return
+            }
 
-                //check
-                let t = Date.now()
-                if (t - vo.tNochangeScrollInfor > limitTime) {
-                    vo.iNochangeScrollInfor = 0
-                    vo.tNochangeScrollInfor = 0
+            //check, 初始化scrollInfor時預先給予t與b, 否則此時沒有scrollInfor無法計算
+            if (vo.scrollInfor === null) {
+                vo.scrollInfor = {
+                    r: 0,
+                    t: 0,
+                    b: vo.viewHeightMax,
+                    ch: vo.itemsHeight,
                 }
+            }
 
-                //update
-                vo.iNochangeScrollInfor += 1
-                vo.tNochangeScrollInfor = Date.now()
+            //coreItems
+            let n = 0
+            let limit = 3
+            async function coreItems() {
+                let pm = genPm()
+
+                //n
+                n += 1
+                // console.log('refreshCore n', n, 'scrollInfor', cloneDeep(vo.scrollInfor))
+
+                //check, 取得元素高度因文字換行會有來回變動問題, 需有強制跳出機制
+                if (n > limit) {
+                    // console.log(`forced termination: call refreshCore ${limit} [from: ${from}]`)
+                    pm.resolve(null)
+                    return pm
+                }
+
+                //filterItems
+                vo.filterItems()
+
+                //genUseItems
+                let rg = vo.genUseItems()
+
+                //delay
+                await delay(20)
+
+                //updateItemsHeight
+                let ru = vo.updateItemsHeight()
+                // console.log('refreshCore updateItemsHeight r', r)
+
+                //resolve
+                pm.resolve({
+                    genUseItems: rg,
+                    updateItemsHeight: ru,
+                })
+
+                return pm
+            }
+
+            //coreInfor
+            async function coreInfor() {
+
+                //lock
+                vo.lockFromRefreshUseItems = true
+
+                //scrollInforTemp, 主要儲存r=ratio, 也就是基於scrollTop(viewTop)所在處的比例, 於內容高度更新後重算
+                let scrollInforTemp = cloneDeep(vo.scrollInfor)
+                // console.log('ratio=', scrollInforTemp.r, 'scrollTop=', scrollInforTemp.stn, 'scrollInforTemp=', scrollInforTemp)
+
+                //coreItems, 若任何元素高度有變更則再重新計算需顯示的節點, 此時的確有可能會載入新節點, 所以原本給予節點之預設高度不能太高, 偵測時元素就多是變高, 所以需顯示的節點就會變少, 避免造成重新載入新節點狀況
+                let r = await coreItems()
+
+                //change
+                let change = get(r, 'genUseItems.change', false) || get(r, 'updateItemsHeight.change', false)
+
+                //itemsHeight
+                let itemsHeight = get(r, 'updateItemsHeight.itemsHeight', null)
+
+                //check, 為數字代表需更新itemsHeight
+                if (isNumber(itemsHeight)) {
+                    // console.log('refreshCore 需更新itemsHeight', vo.itemsHeight, '->', itemsHeight)
+
+                    //check, 當點擊瞬間減少顯示內容區高度可能比外框高度小, 此時外部給予之scrollTop只能給0
+                    if (itemsHeight <= vo.viewHeightMax) {
+
+                        //check, 若scrollTop非0則需歸零
+                        if (vo.scrollTop > 0) {
+                            // console.log('refreshCore 需歸零scrollTop', vo.scrollTop, '->', 0)
+
+                            //set 0
+                            vo.scrollTop = 0
+
+                        }
+
+                    }
+                    else {
+
+                        //scrollTopRecover, 需恢復的scrollTop
+                        // let scrollTopRecover = ratioOld * contentHeightEff
+                        let scrollTopDiff = 0
+                        if (scrollInforTemp.dir === 'up') {
+                            // scrollTopDiff = itemsHeight - vo.itemsHeightTemp
+                            scrollTopDiff = itemsHeight - scrollInforTemp.ch
+                        }
+                        let scrollTopRecover = vo.scrollTop + scrollTopDiff
+
+                        // //check, 若本來已捲到最底部
+                        // if (vo.scrollTop === 1) {
+                        //     scrollTopRecover = 1
+                        // }
+
+                        //更新scrollTop
+                        if (vo.scrollTop !== scrollTopRecover) {
+                            // console.log('refreshCore 需更新scrollTop', vo.scrollTop, '->', scrollTopRecover)
+                            vo.scrollTop = scrollTopRecover
+                        }
+
+                        //更新itemsHeight
+                        vo.itemsHeight = itemsHeight
+
+                    }
+
+                }
+
+                //check change
+                if (change) {
+
+                    //unlock
+                    vo.lockFromRefreshUseItems = false
+
+                    //triggerEvent, 因內容物有改故需triggerEvent, 記得先解索
+                    vo.triggerEvent('mutation', { from: 'wdl-refreshCore' })
 
-                //check
-                if (vo.iNochangeScrollInfor >= limitNum) {
-                    // console.log(`forced termination: call changeScrollInfor ${limit}`)
-                    vo.iNochangeScrollInfor = 0
-                    return
                 }
 
             }
 
+            //coreInfor
+            await coreInfor()
+                .catch((err) => {
+                    console.log(err)
+                })
+                .finally(() => {
+
+                    //unlock
+                    vo.lockFromRefreshUseItems = false
+
+                })
+
+        },
+
+        refresh: function(from) {
+            //console.log('methods refresh', from)
+
+            let vo = this
+
+            //refreshCore
+            vo.pmtRefresh(vo.refreshCore, from)
+                .catch(() => { })
+
+        },
+
+        filterDebounce: function() {
+            //console.log('methods filterDebounce')
+
+            let vo = this
+
+            //dbcRefresh
+            vo.dbcRefresh(() => {
+
+                //refreshCore
+                vo.refreshCore('filterDebounce')
+
+            })
+
+        },
+
+        changeInfor: function(msg) {
+            // console.log('methods changeInfor', msg)
+
+            let vo = this
+
+            //check
+            if (vo.mmkey === null) {
+                return
+            }
+
             //check, 有上鎖時不能執行
             if (vo.lockFromProcess) {
+                // console.log('return by lockFromProcess')
                 return
             }
             if (vo.lockFromSetRows) {
+                // console.log('return by lockFromSetRows')
                 return
             }
+            if (vo.lockFromRefreshUseItems) {
+                // console.log('return by lockFromRefreshUseItems')
+                return
+            }
+            // console.log('changeInfor dbcRefresh call', msg)
 
-            //save
-            vo.scrollInfor = e
-
-            //refresh
-            vo.refresh('changeScrollInfor')
+            //dbcRefresh
+            vo.dbcRefresh(() => {
+                // console.log('changeInfor dbcRefresh run')
 
-        },
+                //save scrollInfor
+                vo.scrollInfor = msg
+                // console.log('changeInfor scrollInfor', cloneDeep(msg))
 
-        resumeScrollRatio: function() {
-            //console.log('methods resumeScrollRatio')
-
-            let vo = this
+                //refresh
+                vo.refresh('changeInfor')
 
-            //resumeRatio
-            let t = get(vo, '$refs.wpsc.resumeRatio', null)
-            if (t) {
-                t(vo.scrollInforTemp)
-            }
+            })
 
         },
 
@@ -697,9 +908,6 @@ export default {
                 //lock
                 vo.lockFromProcess = true
 
-                //先儲存scrollInfor一份至scrollInforTemp, 供顯隱後重算scrollInfor
-                vo.scrollInforTemp = cloneDeep(vo.scrollInfor)
-
                 //items
                 //let items = vo.items
                 let items = gm.get(vo.mmkey)
@@ -760,20 +968,15 @@ export default {
 
                 }
 
-                //refreshCore
-                //要先變更changeDisplay才能呼叫refresh, 使內部能重算各顯示元素高度
-                //需先refreshCore才能呼叫resumeScrollRatio, 因需由前次scrollInforTemp重算最新的scrollInfor, 使點擊節點於顯隱節點後不會改變位置
+                //refreshCore, 變更changeDisplay與changeFilter需refresh, 使內部能重算需顯示元素與高度
                 await vo.refreshCore('processItems')
 
-                //resumeScrollRatio
-                vo.resumeScrollRatio()
-
-                //triggerEvent
-                vo.triggerEvent('processItems')
-
-                //unluck
+                //unluck, 因上鎖無法refresh(mutation), 得先解鎖
                 vo.lockFromProcess = false
 
+                //triggerEvent, 因內容物有改故需triggerEvent, 記得先解索
+                vo.triggerEvent('mutation', { from: 'wdl-processItems' })
+
             }
 
             //core
@@ -781,6 +984,12 @@ export default {
                 .catch((err) => {
                     console.log(err)
                 })
+                .finally(() => {
+
+                    //unluck
+                    vo.lockFromProcess = false
+
+                })
 
         },
 
@@ -808,6 +1017,7 @@ export default {
             let n = size(items)
 
             //check
+            vo.searchingResults = -1
             if (size(vo.filterKeywords) === 0) {
 
                 //預設可見
@@ -815,11 +1025,15 @@ export default {
                     items[k].filterShow = true
                 }
 
+                //update searchingResults
+                vo.searchingResults = 1
+
             }
             else {
 
                 //fkws, 關鍵字轉小寫再查詢
                 let fkws = vo.filterKeywords.toLowerCase()
+                // console.log('fkws', fkws)
 
                 //產生目標字串陣列
                 let cs = map(items, (v) => {
@@ -836,7 +1050,7 @@ export default {
                         c = toString(r)
                     }
                     else if (iseobj(r)) {
-                        c = join(values(r), '')
+                        c = join(values(r), ' ')
                     }
                     else {
                         c = o2j(r)
@@ -850,11 +1064,19 @@ export default {
                 let rs = arrFilterByKeywords(cs, fkws)
 
                 //update filterShow
+                let isr = 0
                 each(items, (v, k) => {
                     let r = rs[k]
+                    // console.log(k, cs[k], r)
                     items[k].filterShow = r.hasKeyword
+                    if (r.hasKeyword) {
+                        isr++
+                    }
                 })
 
+                //update searchingResults
+                vo.searchingResults = isr
+
             }
 
             //changeFilter
@@ -862,33 +1084,19 @@ export default {
 
         },
 
-        triggerEvent: function(from) {
-            //console.log('methods triggerEvent', from)
+        triggerEvent: function(name, msg) {
+            //console.log('methods triggerEvent', name, msg)
 
             let vo = this
 
             //triggerEvent
             let t = get(vo, '$refs.wpsc.triggerEvent', null)
             if (t) {
-                t(from)
+                t(name, msg)
             }
 
         },
 
-        refreshAndTriggerEvent: async function(from) {
-            //console.log('methods refreshAndTriggerEvent', from)
-            //供外部呼叫之用
-
-            let vo = this
-
-            //refresh
-            await vo.refreshCore(from)
-
-            //triggerEvent
-            vo.triggerEvent(from)
-
-        },
-
     },
 }
 </script>