w-component-vue 2.2.84 → 2.2.86

package/src/AppZoneWProgressBar.vue

@@ -309,6 +309,52 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'enableContinuous'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :enableContinuous="true"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'enableContinuous & progColor & progBackgroundColor'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :enableContinuous="true"
+                    :progColor="'orange lighten-1'"
+                    :progBackgroundColor="'orange lighten-5'"
+                ></w-progress-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-progress-bar'"
+                    :casename="'enableContinuous & continuousIncrease & continuousPeriod'"
+                ></demolink>
+
+                <w-progress-bar
+                    style="width:400px;"
+                    :enableContinuous="true"
+                    :continuousIncrease="10"
+                    :continuousPeriod="200"
+                ></w-progress-bar>
+
+            </div>
+
+
         </div>
 
 

package/src/AppZoneWTree.vue

@@ -102,13 +102,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'rippleColor'"
+                    :casename="'itemRippleColor'"
                 ></demolink>
 
                 <w-tree
                     style="width:350px; border:1px solid #ddd;"
                     :data="WTree.option.items"
-                    :rippleColor="'rgba(245,124,0,0.4)'"
+                    :itemRippleColor="'rgba(245,124,0,0.4)'"
                 ></w-tree>
 
             </div>
@@ -1601,8 +1601,8 @@ export default {
                     let id = Math.floor(Math.random() * 1000)
                     let text = 'node-' + id //msg.rowItem.row.item.text + '-' + msg.opItem.key
                     let dataNew = {
-                        id: id,
-                        text: text,
+                        id,
+                        text,
                     }
                     resolve(dataNew)
                 })

package/src/components/WConfirm.vue

@@ -9,10 +9,7 @@
 
         <template v-slot:header>
 
-            <div
-                :style="``"
-                v-if="showTrans"
-            >
+            <div v-if="showTrans">
                 <slot name="header">
                     <div :style="useHeaderStyle">
                         {{title}}
@@ -24,10 +21,7 @@
 
         <template v-slot:content>
 
-            <div
-                :style="``"
-                v-if="showTrans"
-            >
+            <div v-if="showTrans">
                 <slot name="content">
                     <div :style="useContentStyle">
 
@@ -49,10 +43,7 @@
 
         <template v-slot:footer>
 
-            <div
-                :style="``"
-                v-if="showTrans"
-            >
+            <div v-if="showTrans">
                 <slot name="footer">
                     <div :style="useFooterStyle">
 

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/WDrawer.vue

@@ -1,15 +1,18 @@
 <template>
     <div
-        style=""
         :changeValue="changeValue"
         :changeDrawerWidth="changeDrawerWidth"
         v-domresize
         @domresize="resizePanel"
     >
 
-        <div ref="divPanel" style="position:relative; height:100%;">
+        <!-- 因拖曳寬度bar現放置於divPanel下並且浮動定位, 左右側之拖曳區會超出divPanel, 故須使用overflow-x:hidden -->
+        <div
+            ref="divPanel"
+            style="position:relative; width:100%; height:100%; overflow-x:hidden;"
+        >
 
-            <!-- 需要配合overflow-x:hidden, 否則右側抽屜會無法被內容區裁切遮蔽 -->
+            <!-- 因右側抽屜會無法被內容區裁切遮蔽, 故須使用overflow-x:hidden -->
             <div style="width:100%; height:100%; display:flex; overflow-x:hidden;">
 
                 <!-- 撐開區, 需使用min-width避免被壓縮 -->
@@ -19,7 +22,7 @@
                     v-if="isAtLeft"
                 ></div>
 
-                <!-- 因外層使用overflow-x:hidden且內容區具有無法崩塌元素, 故也得使用overflow-x:hidden進行裁切 -->
+                <!-- 因外層使用overflow-x:hidden且內容區具有無法崩塌元素, 故也須使用overflow:hidden進行裁切 -->
                 <div :style="`width:100%; height:100%; overflow:hidden;`">
 
                     <slot
@@ -49,14 +52,14 @@
 
             <!-- overlay關閉事件監聽層, 與隱藏內層之向外陰影 -->
             <div
-                :style="`position:${useOverlayPosition}; ${useDrawerDetectLoction} top:0px; bottom:0px; z-index:${useDrawerZIndex+2}; width:${useDrawerDetectWidth}; height:100%; overflow:hidden;`"
+                :style="`position:${useOverlayPosition}; ${useDrawerDetectLoction} top:0px; bottom:0px; z-index:${useDrawerZIndex+2}; width:${useDrawerDetectWidth}; height:100%;`"
                 @click="(ev)=>{ckToggle(ev,false)}"
                 v-show="showOverlay2Detect"
             >
 
                 <!-- drawer平移層 -->
                 <div
-                    :style="`height:100%; display:flex; justify-content:${ isAtLeft ? 'start' : 'end' };`"
+                    :style="`width:100%; height:100%; display:flex; justify-content:${ isAtLeft ? 'start' : 'end' };`"
                 >
 
                     <div
@@ -91,7 +94,7 @@
                             <!-- 延遲至抽屜出現後才通過opacity=1顯示, 否則於浮動模式時會在外側陰影層馬上看到拖曳寬度bar, 使用者體驗不佳 -->
                             <div
                                 ref="divBar"
-                                :style="`position:${useOverlayPosition}; z-index:${useDrawerZIndex+2}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-useDrawerBarWidth/2}px; width:${useDrawerBarWidth}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
+                                :style="`position:${useOverlayPosition}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-useDrawerBarWidth/2}px; width:${useDrawerBarWidth}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
                                 v-show="valueTrans && dragDrawerWidth"
                             >
                                 <div :style="`width:${useDrawerBarSize}px; height:100%; background:${useDrawerBarColor};`"></div>
@@ -203,7 +206,7 @@ export default {
         },
         drawerBarBorderSize: {
             type: Number,
-            default: 3, //抽屜內捲軸通常是WPanelScrolly的捲軸故寬度是8px, 而拖曳寬度bar邊寬是雙向展開, 故不能超過此8px
+            default: 3,
         },
     },
     data: function() {
@@ -216,6 +219,8 @@ export default {
 
             valueTrans: false,
 
+            lockToggle: false,
+
             drawerWidthTrans: 200,
 
             timerOverlay1Basic: null,
@@ -247,6 +252,16 @@ export default {
         //das
         let das = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar, { useTouchDragForPanel: false })
         das.on('dragBar', vo.dragBar)
+        das.on('pressBar', () => {
+            // console.log('pressBar')
+            vo.lockToggle = true
+        })
+        das.on('freeBar', () => {
+            setTimeout(() => { //因拖曳寬度bar現在位於overlay關閉事件監聽層之內, 故會優先觸發點擊事件後才冒泡出去, 導致放掉拖曳時會觸發點擊關閉事件, 故改採通過delay脫勾與上鎖機制避免關閉
+                // console.log('freeBar')
+                vo.lockToggle = false
+            }, 1)
+        })
 
         //save
         vo.das = das
@@ -328,7 +343,6 @@ export default {
             return r
         },
 
-
         virtualZoneWidth: function() {
             if (!this.valueTrans) {
                 return 0
@@ -460,10 +474,18 @@ export default {
                 return
             }
 
+            //check, 上鎖時禁止觸發
+            if (vo.lockToggle) {
+                return
+            }
+
             //偵測點擊為抽屜區之外
             let b = false
             try {
                 b = !vo.$refs.divDrawer.contains(ev.target)
+                // if (b) {
+                //     console.log('偵測點擊為抽屜區之外 domContains')
+                // }
             }
             catch (err) {}
             // console.log('vo.$refs.divDrawer', vo.$refs.divDrawer)
@@ -475,6 +497,9 @@ export default {
                 try {
                     b = !domIsClientXYIn(ev.clientX, ev.clientY, vo.$refs.divDrawer)
                     // console.log(`domIsClientXYIn(ev.clientX, ev.clientY, vo.$refs.divPanel)`,domIsClientXYIn(ev.clientX, ev.clientY, vo.$refs.divPanel))
+                    // if (b) {
+                    //     console.log('偵測點擊為抽屜區之外: domIsClientXYIn')
+                    // }
                 }
                 catch (err) {}
             }

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