w-component-vue 2.2.85 → 2.2.86

package/src/components/WDialog.vue

@@ -40,7 +40,7 @@
                 >
 
                     <!-- 因toolbar陰影要顯示到content上, content給予background會遮蔽陰影, 故改由視窗本體提供content的background -->
-                    <!-- 因使用user-select:none屏蔽快速點擊, 故得於panel處恢復user-select:text提供選擇文字功能 -->
+                    <!-- 因使用user-select:none屏蔽快速點擊, 故得於divPanel處恢復user-select:text提供選擇文字功能 -->
                     <div
                         ref="divPanel"
                         :style="`
@@ -56,160 +56,172 @@
                         @domresize="resizePanel"
                     >
 
-                        <!-- 標題區 -->
-                        <div
-                            ref="divHeader"
-                            :style="`
-                                background:${useHeaderBackgroundColor};
-                                ${useHeaderShadowStyle}
-                            `"
+                        <slot
+                            name="panel"
+                            :panelWidth="panelWidth"
+                            :headerHeight="headerHeight"
+                            :contentHeight="contentHeight"
+                            :contentHeightMax="contentHeightMax"
+                            :footerHeight="footerHeight"
                         >
 
-                            <slot
-                                name="header"
-                                :panelWidth="panelWidth"
-                                :headerHeight="headerHeight"
-                                :contentHeight="contentHeight"
-                                :contentHeightMax="contentHeightMax"
-                                :footerHeight="footerHeight"
+                            <!-- 標題區 -->
+                            <div
+                                ref="divHeader"
+                                :style="`
+                                    background:${useHeaderBackgroundColor};
+                                    ${useHeaderShadowStyle}
+                                `"
                             >
 
-                                <div
-                                    :style="`
-                                        display:flex; align-items:center; padding:0px 12px;
-                                        height:${headerHeight}px; max-height:${headerHeight}px; overflow:hidden;
-                                    `"
+                                <slot
+                                    name="header"
+                                    :panelWidth="panelWidth"
+                                    :headerHeight="headerHeight"
+                                    :contentHeight="contentHeight"
+                                    :contentHeightMax="contentHeightMax"
+                                    :footerHeight="footerHeight"
                                 >
 
-                                    <div style="padding-right:10px;">
-
-                                        <WIcon
-                                            :icon="useHeaderIcon"
-                                            :color="headerIconColor"
-                                        ></WIcon>
+                                    <div
+                                        :style="`
+                                            display:flex; align-items:center; padding:0px 12px;
+                                            height:${headerHeight}px; max-height:${headerHeight}px; overflow:hidden;
+                                        `"
+                                    >
+
+                                        <div style="padding-right:10px;">
+
+                                            <WIcon
+                                                :icon="useHeaderIcon"
+                                                :color="headerIconColor"
+                                            ></WIcon>
+
+                                        </div>
+
+                                        <div style="padding-right:5px;">
+                                            <span :style="`${useTitleFontSize} color:${useTitleColor}; white-space:nowrap;`">
+                                                {{title}}
+                                            </span>
+                                        </div>
+
+                                        <!-- 記得slot name為小寫, 若使用駝峰於瀏覽器端會需要轉小寫, 但於vue-cli無法使用小寫識別得要用駝峰, 故統一都小寫較安全 -->
+                                        <slot name="header-left"></slot>
+
+                                        <div style="width:100%;"></div>
+
+                                        <!-- 記得slot name為小寫, 若使用駝峰於瀏覽器端會需要轉小寫, 但於vue-cli無法使用小寫識別得要用駝峰, 故統一都小寫較安全 -->
+                                        <slot name="header-right"></slot>
+
+                                        <template v-for="(btn,kbtn) in headerBtns">
+
+                                            <WButtonCircle
+                                                style="padding-left:5px;"
+                                                :key="kbtn"
+                                                :icon="get(btn,'icon')"
+                                                :shadow="false"
+                                                :paddingStyle="{v:9,h:9}"
+                                                :loadingColor="get(btn,'iconColor') || headerIconColor"
+                                                :iconColor="get(btn,'iconColor') || headerIconColor"
+                                                :iconColorHover="get(btn,'iconColor') || headerIconColor"
+                                                :iconColorFocus="get(btn,'iconColor') || headerIconColor"
+                                                :backgroundColor="get(btn,'backgroundColor') || 'transparent'"
+                                                :backgroundColorHover="'rgba(255, 255, 255, 0.1)'"
+                                                :backgroundColorFocus="'rgba(255, 255, 255, 0.3)'"
+                                                :rippleColor="'rgba(255, 255, 255, 0.4)'"
+                                                :tooltip="get(btn,'tooltip')"
+                                                @click="clickBtns(btn)"
+                                            ></WButtonCircle>
+
+                                        </template>
+
+                                        <template v-if="hasSaveBtn">
+                                            <WButtonCircle
+                                                style="padding-left:5px;"
+                                                :icon="mdiCheckCircle"
+                                                :shadow="false"
+                                                :paddingStyle="{v:9,h:9}"
+                                                :loadingColor="headerIconColor"
+                                                :iconColor="headerIconColor"
+                                                :iconColorHover="headerIconColor"
+                                                :iconColorFocus="headerIconColor"
+                                                :backgroundColor="'transparent'"
+                                                :backgroundColorHover="'rgba(255, 255, 255, 0.1)'"
+                                                :backgroundColorFocus="'rgba(255, 255, 255, 0.3)'"
+                                                :rippleColor="'rgba(255, 255, 255, 0.4)'"
+                                                :tooltip="saveBtnTooltip"
+                                                :promiseUnlock="true"
+                                                @click="clickSave"
+                                            ></WButtonCircle>
+                                        </template>
+
+                                        <template v-if="hasCloseBtn">
+                                            <WButtonCircle
+                                                style="padding-left:5px;"
+                                                :icon="mdiClose"
+                                                :shadow="false"
+                                                :paddingStyle="{v:9,h:9}"
+                                                :loadingColor="headerIconColor"
+                                                :iconColor="headerIconColor"
+                                                :iconColorHover="headerIconColor"
+                                                :iconColorFocus="headerIconColor"
+                                                :backgroundColor="'transparent'"
+                                                :backgroundColorHover="'rgba(255, 255, 255, 0.1)'"
+                                                :backgroundColorFocus="'rgba(255, 255, 255, 0.3)'"
+                                                :rippleColor="'rgba(255, 255, 255, 0.4)'"
+                                                :tooltip="closeBtnTooltip"
+                                                @click="clickClose(false)"
+                                            ></WButtonCircle>
+                                        </template>
 
                                     </div>
 
-                                    <div style="padding-right:5px;">
-                                        <span :style="`${useTitleFontSize} color:${useTitleColor}; white-space:nowrap;`">
-                                            {{title}}
-                                        </span>
-                                    </div>
+                                </slot>
 
-                                    <!-- 記得slot name為小寫, 若使用駝峰於瀏覽器端會需要轉小寫, 但於vue-cli無法使用小寫識別得要用駝峰, 故統一都小寫較安全 -->
-                                    <slot name="header-left"></slot>
-
-                                    <div style="width:100%;"></div>
-
-                                    <!-- 記得slot name為小寫, 若使用駝峰於瀏覽器端會需要轉小寫, 但於vue-cli無法使用小寫識別得要用駝峰, 故統一都小寫較安全 -->
-                                    <slot name="header-right"></slot>
-
-                                    <template v-for="(btn,kbtn) in headerBtns">
-
-                                        <WButtonCircle
-                                            style="padding-left:5px;"
-                                            :key="kbtn"
-                                            :icon="get(btn,'icon')"
-                                            :shadow="false"
-                                            :paddingStyle="{v:9,h:9}"
-                                            :loadingColor="get(btn,'iconColor') || headerIconColor"
-                                            :iconColor="get(btn,'iconColor') || headerIconColor"
-                                            :iconColorHover="get(btn,'iconColor') || headerIconColor"
-                                            :iconColorFocus="get(btn,'iconColor') || headerIconColor"
-                                            :backgroundColor="get(btn,'backgroundColor') || 'transparent'"
-                                            :backgroundColorHover="'rgba(255, 255, 255, 0.1)'"
-                                            :backgroundColorFocus="'rgba(255, 255, 255, 0.3)'"
-                                            :rippleColor="'rgba(255, 255, 255, 0.4)'"
-                                            :tooltip="get(btn,'tooltip')"
-                                            @click="clickBtns(btn)"
-                                        ></WButtonCircle>
-
-                                    </template>
-
-                                    <template v-if="hasSaveBtn">
-                                        <WButtonCircle
-                                            style="padding-left:5px;"
-                                            :icon="mdiCheckCircle"
-                                            :shadow="false"
-                                            :paddingStyle="{v:9,h:9}"
-                                            :loadingColor="headerIconColor"
-                                            :iconColor="headerIconColor"
-                                            :iconColorHover="headerIconColor"
-                                            :iconColorFocus="headerIconColor"
-                                            :backgroundColor="'transparent'"
-                                            :backgroundColorHover="'rgba(255, 255, 255, 0.1)'"
-                                            :backgroundColorFocus="'rgba(255, 255, 255, 0.3)'"
-                                            :rippleColor="'rgba(255, 255, 255, 0.4)'"
-                                            :tooltip="saveBtnTooltip"
-                                            :promiseUnlock="true"
-                                            @click="clickSave"
-                                        ></WButtonCircle>
-                                    </template>
-
-                                    <template v-if="hasCloseBtn">
-                                        <WButtonCircle
-                                            style="padding-left:5px;"
-                                            :icon="mdiClose"
-                                            :shadow="false"
-                                            :paddingStyle="{v:9,h:9}"
-                                            :loadingColor="headerIconColor"
-                                            :iconColor="headerIconColor"
-                                            :iconColorHover="headerIconColor"
-                                            :iconColorFocus="headerIconColor"
-                                            :backgroundColor="'transparent'"
-                                            :backgroundColorHover="'rgba(255, 255, 255, 0.1)'"
-                                            :backgroundColorFocus="'rgba(255, 255, 255, 0.3)'"
-                                            :rippleColor="'rgba(255, 255, 255, 0.4)'"
-                                            :tooltip="closeBtnTooltip"
-                                            @click="clickClose(false)"
-                                        ></WButtonCircle>
-                                    </template>
-
-                                </div>
-
-                            </slot>
-
-                        </div>
-
-                        <!-- 內容區, 因content給予background會遮蔽toolbar的陰影, 故改由視窗本體提供content的background, 此處background不使用 -->
-                        <div
-                            ref="divContent"
-                            :style="`
-                                color:${useContentTextColor};
-                                ${useContentHeight}
-                                overflow-y:auto;
-                            `"
-                            v-domresize
-                            @domresize="resizeContent"
-                        >
+                            </div>
 
-                            <slot
-                                name="content"
-                                :panelWidth="panelWidth"
-                                :headerHeight="headerHeight"
-                                :contentHeight="contentHeight"
-                                :contentHeightMax="contentHeightMax"
-                                :footerHeight="footerHeight"
-                            ></slot>
-
-                        </div>
-
-                        <div
-                            ref="divFooter"
-                            :style="`
-                            `"
-                        >
+                            <!-- 內容區, 因content給予background會遮蔽toolbar的陰影, 故改由視窗本體提供content的background, 此處background不使用 -->
+                            <div
+                                ref="divContent"
+                                :style="`
+                                    color:${useContentTextColor};
+                                    ${useContentHeight}
+                                    overflow-y:auto;
+                                `"
+                                v-domresize
+                                @domresize="resizeContent"
+                            >
 
-                            <slot
-                                name="footer"
-                                :panelWidth="panelWidth"
-                                :headerHeight="headerHeight"
-                                :contentHeight="contentHeight"
-                                :contentHeightMax="contentHeightMax"
-                                :footerHeight="footerHeight"
-                            ></slot>
+                                <slot
+                                    name="content"
+                                    :panelWidth="panelWidth"
+                                    :headerHeight="headerHeight"
+                                    :contentHeight="contentHeight"
+                                    :contentHeightMax="contentHeightMax"
+                                    :footerHeight="footerHeight"
+                                ></slot>
+
+                            </div>
+
+                            <!-- 下方區 -->
+                            <div
+                                ref="divFooter"
+                                :style="`
+                                `"
+                            >
+
+                                <slot
+                                    name="footer"
+                                    :panelWidth="panelWidth"
+                                    :headerHeight="headerHeight"
+                                    :contentHeight="contentHeight"
+                                    :contentHeightMax="contentHeightMax"
+                                    :footerHeight="footerHeight"
+                                ></slot>
 
-                        </div>
+                            </div>
+
+                        </slot>
 
                     </div>
 
@@ -478,9 +490,9 @@ export default {
 
         useIsModal: function() {
             let vo = this
-            if (!vo.hasSaveBtn && !vo.hasCloseBtn) {
-                return false
-            }
+            // if (!vo.hasSaveBtn && !vo.hasCloseBtn) {
+            //     return false
+            // }
             return vo.isModal
         },
 

package/src/components/WDynamicList.vue

@@ -930,6 +930,11 @@ export default {
                 //let items = vo.items
                 let items = gm.get(vo.mmkey)
 
+                //check
+                if (!isarr(items)) {
+                    return //因加速渲染技術是由外部wdl.setRows, wdl有可能出現未setRows但被調用processItems, 故導致gm內無數據
+                }
+
                 //外部使用fun直接修改items
                 let fun = get(opt, 'fun', null)
                 if (isfun(fun)) {

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/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)