w-component-vue 2.2.84 → 2.2.86

package/src/components/WProgressBar.vue

@@ -1,14 +1,17 @@
 <template>
-    <div>
+    <div :changeContinuous="changeContinuous">
 
         <div
             :style="`color:${useTitleTextColor}; ${useTitleTextFontSize};`"
-            v-if="title"
+            v-if="hasTitle"
         >
             {{title}}
         </div>
 
-        <div style="display:flex; align-items:center;">
+        <div
+            :style="`display:flex; align-items:center;`"
+            v-if="!enableContinuous"
+        >
 
             <div :style="`${useBorderRadius} overflow:hidden; width:100%; height:${height}px;`">
                 <div :style="`background:${useProgBackgroundColor}; height:${height}px;`">
@@ -33,11 +36,21 @@
 
         </div>
 
+        <div
+            :style="`${useBorderRadius} overflow:hidden; width:100%; height:${height}px;`"
+            v-if="enableContinuous"
+        >
+            <div :style="`position:relative; background:${useProgBackgroundColor}; height:${height}px;`">
+                <div :style="`position:absolute; transition:all ${continuousFirst?0:continuousPeriod}ms linear; left:${continuousShiftX}%; top:0px; background:${useProgColor}; width:${continuousWidth}%; height:${height}px;`"></div>
+            </div>
+        </div>
+
     </div>
 </template>
 
 <script>
 import { mdiCheck, mdiOrbitVariant } from '@mdi/js'
+import isestr from 'wsemi/src/isestr.mjs'
 import dig from 'wsemi/src/dig.mjs'
 import replace from 'wsemi/src/replace.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
@@ -59,10 +72,13 @@ import WIcon from './WIcon.vue'
  * @vue-prop {String} [iconFinish='mdiCheck'] 輸入完成狀態(value>=100)圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設'mdiCheck'
  * @vue-prop {String} [iconWaitingColor='grey'] 輸入等待狀態(value<=0)圖標顏色字串，預設'grey'
  * @vue-prop {String} [iconFinishColor='green'] 輸入完成狀態(value>=100)圖標顏色字串，預設'green'
- * @vue-prop {Boolean} [enableIconWaiting=true] 輸入是否使用等待狀態(value<=0)圖標，預設true
- * @vue-prop {Boolean} [enableIconFinish=true] 輸入是否使用完成狀態(value>=100)圖標，預設true
+ * @vue-prop {Boolean} [enableIconWaiting=true] 輸入是否使用等待狀態(value<=0)圖標布林值，預設true
+ * @vue-prop {Boolean} [enableIconFinish=true] 輸入是否使用完成狀態(value>=100)圖標布林值，預設true
  * @vue-prop {String} [valueTextColor='grey darken-2'] 輸入文字顏色字串，預設'grey darken-2'
  * @vue-prop {String} [valueTextFontSize='0.85rem'] 輸入文字字型大小字串，預設'0.85rem'
+ * @vue-prop {Boolean} [enableContinuous=false] 輸入是否使用持續變化展示布林值，使用true時進度數字(value)與圖標(icon)失效，預設false
+ * @vue-prop {Number} [continuousIncrease=12] 輸入持續變化時進度寬度增量數字，單位為px，預設12
+ * @vue-prop {Number} [continuousPeriod=100] 輸入持續變化時定時器週期數字，單位為ms，預設100
  */
 export default {
     components: {
@@ -141,15 +157,63 @@ export default {
             type: String,
             default: '0.85rem',
         },
+        enableContinuous: {
+            type: Boolean,
+            default: false,
+        },
+        continuousIncrease: {
+            type: Number,
+            default: 12,
+        },
+        continuousPeriod: {
+            type: Number,
+            default: 100,
+        },
     },
     data: function() {
         return {
             mdiCheck,
             mdiOrbitVariant,
+
+            timer: null,
+            continuousFirst: true,
+            continuousRatio: 0,
+            continuousShiftX: 0,
+            continuousWidth: 0,
+
         }
     },
+    beforeDestroy: function() {
+        //console.log('beforeDestroy')
+
+        let vo = this
+
+        //clearInterval
+        if (vo.timer !== null) {
+            clearInterval(vo.timer)
+            vo.timer = null
+        }
+
+    },
     computed: {
 
+        changeContinuous: function() {
+            let vo = this
+            if (vo.enableContinuous) {
+                vo.runContinuous()
+            }
+            else {
+                vo.destroyContinuous()
+            }
+            return ''
+        },
+
+        hasTitle: function() {
+            let vo = this
+            let b = isestr(vo.title)
+            return b
+        },
+
         status: function() {
             let vo = this
             if (vo.value <= 0) {
@@ -228,6 +292,74 @@ export default {
             return dig(value, vo.decimal)
         },
 
+        runContinuous: function() {
+            // console.log('methods runContinuous')
+            let vo = this
+
+            //waveInOutCubic
+            let waveInOutCubic = (x) => {
+                x /= 100
+                let y = x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2
+                y = Math.max(Math.min(y, 1), 0)
+                y *= 100
+                return y
+            }
+            // for (let x = -20; x <= 120; x++) {
+            //     let y = waveInOutCubic(x)
+            //     console.log('waveInOutCubic', x, y)
+            // }
+
+            //waveGausian
+            let waveGausian = (x) => {
+                x -= 50
+                x *= 2
+                x /= 100
+                x = Math.max(Math.min(x, 1), -1)
+                let landa = 1
+                let alpha = 2
+                let y = landa * Math.exp(-alpha * x ** 2)
+                y = Math.max(Math.min(y, 1), 0)
+                let ym = 0.1353352832366127
+                y -= ym
+                y *= 1 / (1 - 0.1353352832366127)
+                y *= 100
+                return y
+            }
+            // for (let x = -20; x <= 120; x++) {
+            //     let y = waveGausian(x)
+            //     console.log('waveGausian', x, y)
+            // }
+
+            if (vo.timer === null) {
+                vo.timer = setInterval(() => {
+
+                    //continuousRatio
+                    vo.continuousRatio += vo.continuousIncrease
+                    vo.continuousFirst = false
+                    if (vo.continuousRatio >= (100 + vo.continuousIncrease)) {
+                        vo.continuousFirst = true
+                        vo.continuousRatio = -vo.continuousIncrease
+                    }
+
+                    //continuousShiftX
+                    vo.continuousShiftX = waveInOutCubic(vo.continuousRatio)
+
+                    //continuousWidth
+                    vo.continuousWidth = waveGausian(vo.continuousRatio)
+
+                }, vo.continuousPeriod)
+            }
+        },
+
+        destroyContinuous: function() {
+            // console.log('methods destroyContinuous')
+            let vo = this
+            if (vo.timer !== null) {
+                clearInterval(vo.timer)
+                vo.timer = null
+            }
+        },
+
     },
 }
 </script>

package/src/components/WTooltip.vue

@@ -634,7 +634,7 @@ export default {
 
             //@popperjs/core 2.x
             let opt = {
-                strategy: 'absolute', //盡量使用absolute而不用fixesd, 避免跟其他組件處於不同stacking context, 統一用absolute避免後續衍生問題
+                strategy: 'fixed', //盡量使用'fixed'而不用'absolute', 否則位於多層dialog或多層drawer內popup顯示會異常
                 placement: vo.placement,
                 modifiers: [
                     // preventOverflow,

package/src/components/WTree.vue

@@ -684,9 +684,6 @@ export default {
             gm.remove(vo.mmkey)
         }
 
-        // //dragClear
-        // vo.dragClear()
-
     },
     watch: {
 
@@ -708,7 +705,7 @@ export default {
             immediate: true,
             deep: true,
             handler(value) {
-                //console.log('watch selections', value)
+                // console.log('watch selections', value)
 
                 let vo = this
 
@@ -964,7 +961,7 @@ export default {
         },
 
         updateViewHeightMaxTrans: function(msg) {
-            //console.log('methods updateViewHeightMaxTrans', msg)
+            // console.log('methods updateViewHeightMaxTrans', msg)
 
             let vo = this
 
@@ -1899,7 +1896,9 @@ export default {
                 }
 
                 //processItems
-                await vo.$refs.wdl.processItems(opt)
+                if (vo.$refs.wdl) { //於async中組件切換時還是有可能消失
+                    await vo.$refs.wdl.processItems(opt)
+                }
 
             }
 
@@ -2230,7 +2229,7 @@ export default {
         },
 
         checkItems: function(item) {
-            //console.log('methods checkItems', item)
+            // console.log('methods checkItems', item)
 
             let vo = this
 
@@ -2277,7 +2276,9 @@ export default {
                 }
 
                 //processItems
-                await vo.$refs.wdl.processItems(opt)
+                if (vo.$refs.wdl) { //於async中組件切換時還是有可能消失
+                    await vo.$refs.wdl.processItems(opt)
+                }
 
                 //save
                 vo.selectionsTrans = selectionsTrans
@@ -2296,7 +2297,7 @@ export default {
         },
 
         filterKeyWordsCore: async function(items) {
-            //console.log('methods filterKeyWordsCore', items)
+            // console.log('methods filterKeyWordsCore', items)
 
             let vo = this
 
@@ -2418,7 +2419,7 @@ export default {
         },
 
         filterKeyWords: function() {
-            //console.log('methods filterKeyWords')
+            // console.log('methods filterKeyWords')
 
             let vo = this
 
@@ -2441,7 +2442,6 @@ export default {
                 let searchingResults = -1
                 let opt = {
                     fun: async function(items) {
-                        //console.log('items', cloneDeep(items))
 
                         //filterKeyWordsCore
                         searchingResults = await vo.filterKeyWordsCore(items)
@@ -2453,7 +2453,9 @@ export default {
                 vo.$refs.wdl.setSearchingResults(-1)
 
                 //processItems
-                await vo.$refs.wdl.processItems(opt)
+                if (vo.$refs.wdl) { //於async中組件切換時還是有可能消失
+                    await vo.$refs.wdl.processItems(opt)
+                }
 
                 //setSearchingResults, 依照搜尋結果數量給予wdl, 否則沒辦法呈現無搜尋結果
                 vo.$refs.wdl.setSearchingResults(searchingResults)