w-component-vue 2.2.80 → 2.2.81

package/docs/global.html

@@ -485,7 +485,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Apr 27 2023 15:27:05 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Tue May 02 2023 16:14:31 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/index.html

@@ -71,7 +71,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Apr 27 2023 15:27:05 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Tue May 02 2023 16:14:31 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html

@@ -147,7 +147,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Apr 27 2023 15:27:05 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Tue May 02 2023 16:14:31 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-component-vue",
-  "version": "2.2.80",
+  "version": "2.2.81",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.2.96",

package/src/AppZoneWDialog.vue

@@ -8,7 +8,7 @@
         <div style="padding:0px;">
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'slot content'"
@@ -46,7 +46,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'icon (fontawesome)'"
@@ -85,7 +85,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'title'"
@@ -123,7 +123,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'headerBackgroundColor'"
@@ -162,7 +162,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'titleColor & headerIconColor & headerBackgroundColor'"
@@ -203,7 +203,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'headerShadow (no shadow)'"
@@ -242,7 +242,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'headerShadowStyle'"
@@ -281,7 +281,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'headerBtns'"
@@ -321,7 +321,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'slot header-left & header-right'"
@@ -377,7 +377,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'saveBtnTooltip & closeBtnTooltip'"
@@ -417,7 +417,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'hasSaveBtn, no save button'"
@@ -456,7 +456,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'hasSaveBtn and hasCloseBtn, no save and close button'"
@@ -496,7 +496,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'closeWithInterceptor'"
@@ -535,7 +535,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'contentTextColor & contentBackgroundColor'"
@@ -575,7 +575,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'maxWidth, for narrow width'"
@@ -614,7 +614,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'fullscreen'"
@@ -658,7 +658,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'panelBorderRadius'"
@@ -697,7 +697,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'panelShadow (no shadow)'"
@@ -736,7 +736,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'panelShadowStyle'"
@@ -775,7 +775,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'scrollable'"
@@ -816,7 +816,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'separate for slot content'"
@@ -861,7 +861,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'table in slot content'"
@@ -945,9 +945,9 @@
                 <v-btn depressed small elevation="2" @click="WDialog.bShow23a=!WDialog.bShow23a">Show({{WDialog.bShow23a}})</v-btn>
 
                 <w-dialog
-                    :show.sync="WDialog.bShow23a"
+                    :show.sync="WDialog.bShow23c"
                     :title="WDialog.title"
-                    :minWidth="1200"
+                    :minWidth="600"
                     @resize="resizeEvent"
                     @click-save="clickSave"
                     @click-close="clickClose"
@@ -957,13 +957,9 @@
                         <div style="padding:20px;">
 
                             <div style="margin:15px 0px;">
-                                Here is 1st window.
+                                Here is 3rd window.
                             </div>
 
-                            <v-btn depressed small elevation="2" @click="WDialog.bShow23b=!WDialog.bShow23b">Show({{WDialog.bShow23b}})</v-btn>
-
-                            <div style="height:160px;"></div>
-
                         </div>
                     </template>
 
@@ -995,9 +991,9 @@
                 </w-dialog>
 
                 <w-dialog
-                    :show.sync="WDialog.bShow23c"
+                    :show.sync="WDialog.bShow23a"
                     :title="WDialog.title"
-                    :minWidth="600"
+                    :minWidth="1200"
                     @resize="resizeEvent"
                     @click-save="clickSave"
                     @click-close="clickClose"
@@ -1007,9 +1003,13 @@
                         <div style="padding:20px;">
 
                             <div style="margin:15px 0px;">
-                                Here is 3rd window.
+                                Here is 1st window.
                             </div>
 
+                            <v-btn depressed small elevation="2" @click="WDialog.bShow23b=!WDialog.bShow23b">Show({{WDialog.bShow23b}})</v-btn>
+
+                            <div style="height:160px;"></div>
+
                         </div>
                     </template>
 
@@ -1018,7 +1018,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'isModal (not persistent)'"
@@ -1057,7 +1057,7 @@
             </div>
 
 
-            <div class="bk">
+            <div v-if="false" class="bk">
                 <demolink
                     :kbname="'w-dialog'"
                     :casename="'dialogZIndex'"

package/src/components/WDialog.vue

@@ -11,7 +11,7 @@
             :style="`
                 position:fixed; left:0px; top:0px;
                 width:calc( 100vw + ${nativeBarWidth+1}px ); height:100vh; overflow-x:hidden; overflow-y:scroll;
-                z-index:${dialogZIndex};
+                z-index:${useDialogZIndex};
                 overscroll-behavior:contain;
                 user-select:none;
             `"
@@ -227,11 +227,13 @@ import { mdiCheckCircle, mdiClose, mdiCheckerboard } from '@mdi/js'
 import get from 'lodash/get'
 import isEqual from 'lodash/isEqual'
 import cloneDeep from 'lodash/cloneDeep'
+import genID from 'wsemi/src/genID.mjs'
 import genPm from 'wsemi/src/genPm.mjs'
 import replace from 'wsemi/src/replace.mjs'
 import domIsClientXYIn from 'wsemi/src/domIsClientXYIn.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
 import domResize from '../js/domResize.mjs'
+import domZIndex from '../js/domZIndex.mjs'
 import WButtonCircle from './WButtonCircle.vue'
 import WIcon from './WIcon.vue'
 
@@ -239,7 +241,7 @@ import WIcon from './WIcon.vue'
 /**
  * @vue-prop {Boolean} [show=false] 輸入是否顯示布林值，預設false
  * @vue-prop {Boolean} [isModal=true] 輸入是否為強制模式布林值，預設true
- * @vue-prop {Number} [dialogZIndex=100] 輸入彈窗使用z-index數字，預設100
+ * @vue-prop {Number} [dialogZIndex=2000] 輸入彈窗使用z-index數字，預設2000
  * @vue-prop {Boolean} [fullscreen=false] 輸入是否為全螢幕顯示布林值，若為true則忽略minWidth與maxWidth設定，預設false
  * @vue-prop {Number} [minWidth=200] 輸入彈窗最小寬度數值，單位為px，預設200，當裝置寬度小於彈窗最小寬度時則使用裝置寬度
  * @vue-prop {Number} [maxWidth=1000] 輸入彈窗最大寬度數值，單位為px，預設1000
@@ -286,7 +288,7 @@ export default {
         },
         dialogZIndex: {
             type: Number,
-            default: 100,
+            default: 2000,
         },
         fullscreen: {
             type: Boolean,
@@ -397,6 +399,15 @@ export default {
         return {
             get,
 
+            // mmkey: null,
+            mmkey: genID(), //beforeMount內無法變更data, mounted內會晚於computed, 故優先放於data生成
+            // mmkey: (() => {
+            //     let id = genID()
+            //     console.log('data gen mmkey', id)
+            //     return id
+            // })(),
+            zind: 0,
+
             mdiCheckCircle,
             mdiClose,
             mdiCheckerboard,
@@ -437,12 +448,34 @@ export default {
             // console.log('changeParam vo.showTrans', vo.showTrans)
 
             if (vo.showTrans) {
+                // console.log('changeParam showTrans', vo.showTrans)
+
+                //getLevel
+                vo.zind = domZIndex.getLevel('dialog', vo.mmkey)
+                // console.log('changeParam mmkey', vo.mmkey, 'getLevel zind', vo.zind)
+
+                //showPanel
                 vo.showPanel()
+
+            }
+            else {
+                // console.log('changeParam showTrans', vo.showTrans)
+
+                //destroyLevel
+                domZIndex.destroyLevel('dialog', vo.mmkey)
+                // console.log('changeParam mmkey', vo.mmkey, 'destroyLevel')
+
             }
 
             return ''
         },
 
+        useDialogZIndex: function() {
+            let vo = this
+            let zind = vo.dialogZIndex + vo.zind
+            return zind
+        },
+
         useIsModal: function() {
             let vo = this
             if (!vo.hasSaveBtn && !vo.hasCloseBtn) {

package/src/components/WDrawer.vue

@@ -133,7 +133,7 @@ import color2hex from '../js/vuetifyColor.mjs'
  * @vue-prop {Boolean} [afloatByFix=false] 輸入浮動顯示時是否使用fixed使能具有滿版配置布林值，預設false
  * @vue-prop {Number} [overlayOpacity=0.45] 輸入浮動顯示時抽屜外側陰影層之透明度數字，預設0.45
  * @vue-prop {String} [overlayColor='grey darken-2'] 輸入浮動顯示時抽屜外側陰影層背景顏色字串，預設'grey darken-2'
- * @vue-prop {Number} [drawerZIndex=1] 輸入浮動顯示時抽屜使用z-index數字，預設1
+ * @vue-prop {Number} [drawerZIndex=1000] 輸入浮動顯示時抽屜使用z-index數字，預設1000
  * @vue-prop {Boolean} [dragDrawerWidth=false] 輸入是否使用拖曳抽屜寬度分隔條布林值，預設false
  * @vue-prop {String} [drawerBarColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
  * @vue-prop {Number} [drawerBarSize=2] 輸入分隔條尺寸數字，為分隔條寬度，單位為px，預設2
@@ -183,7 +183,7 @@ export default {
         },
         drawerZIndex: {
             type: Number,
-            default: 1,
+            default: 1000,
         },
         dragDrawerWidth: {
             type: Boolean,
@@ -336,10 +336,10 @@ export default {
         useDrawerZIndex: function() {
             let i = this.drawerZIndex
             if (this.afloat) {
-                i += 1000
+                i += 1
             }
             if (this.afloatByFix) {
-                i += 10000
+                i += 500 //drawer, dialog, tooltip分配z-index值差為1000, 故內部分配給500
             }
             return i
         },

package/src/components/WDynamicList.vue

@@ -160,7 +160,13 @@ export default {
             dbcRefresh: debounce(),
             dbcSetRows: debounce(),
 
-            mmkey: null,
+            // mmkey: null,
+            mmkey: genID(), //beforeMount內無法變更data, mounted內會晚於computed, 故優先放於data生成
+            // mmkey: (() => {
+            //     let id = genID()
+            //     console.log('data gen mmkey', id)
+            //     return id
+            // })(),
 
             changeHeight: true, //是否有變更高度, 初始化給true使第一次顯示能自動重算節點高度
             changeDisplay: false, //是否有變更節點顯隱狀態
@@ -201,7 +207,7 @@ export default {
 
     },
     beforeDestroy: function() {
-        //console.log('beforeMount')
+        //console.log('beforeDestroy')
 
         let vo = this
 
@@ -305,11 +311,11 @@ export default {
                 return msg
             }
 
-            //mmkey, 產生mmkey要放在資料變更的地方, 否則beforeCreate只有1次(mounted會比computed還慢), 於vue-cli編譯情況下會有部份情境有問題
+            //mmkey, 產生mmkey要放在資料變更的地方, 否則須放在beforeMount, 且於vue-cli編譯情況下會有部份情境有問題
             if (vo.mmkey === null) {
 
-                //mmkey
-                vo.mmkey = genID()
+                // //mmkey
+                // vo.mmkey = genID()
 
             }
             else {

package/src/components/WJsonView.vue

@@ -252,7 +252,7 @@ export default {
         }
     },
     // beforeDestroy: function() {
-    //     //console.log('beforeMount')
+    //     //console.log('beforeDestroy')
 
     //     let vo = this
 

package/src/components/WTooltip.vue

@@ -19,13 +19,13 @@
 
         <!-- 需外層使用position包覆隔離, 因popper會對外層產生影響(添加class) -->
         <!--   -->
-        <div style="position:fixed; left:0; top:0; z-index:99999;">
+        <div :style="`position:fixed; left:0; top:0; z-index:${cmpZIndex};`">
             <!-- style不給予position因會被popper洗掉改用translate定位 -->
             <!-- 若使用minWidth, 會使popupjs重算給予minWidth用以自動撐開彈窗寬度失效, 若於其內slot外添加div給予minWidth, 亦會使popupjs給予minWidth機制失效, 待研究 -->
             <div
                 ref="divContent"
                 class="WPopup-Content"
-                :style="`z-index:100000;`"
+                :style="`z-index:${cmpZIndex+1};`"
                 v-show="valueTrans"
                 v-domresize
                 @domresize="updatePopper"
@@ -85,6 +85,7 @@ function removeTriggerMode(mode, mmkey) {
  * @vue-prop {String} [mode='tooltip'] 輸入組件模式字串，可選'tooltip'與'popup'，預設'tooltip'
  * @vue-prop {String} [displayType='block'] 輸入display設定字串，可選'block'與'line'，預設'block'
  * @vue-prop {Boolean} [value=false] 輸入是否顯示布林值，預設false
+ * @vue-prop {Number} [cmpZIndex=3000] 輸入彈窗使用z-index數字，預設3000
  * @vue-prop {Boolean} [isolated=false] 輸入當mode為'popup'時是否為獨立顯引狀態布林值，也就是可不接收外部傳入value值，預設false
  * @vue-prop {String} [placement='bottom'] 輸入內容區出現位置字串，可選'top-start'、'top'、'top-end'、'bottom-start'、'bottom'、'bottom-end'、'left-start'、'left'、'left-end'、'right-start'、'right'、'right-end'、，預設'bottom'
  * @vue-prop {Number} [minWidth=null] 輸入最小寬度數字，單位為px，預設null
@@ -119,6 +120,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        cmpZIndex: {
+            type: Number,
+            default: 3000,
+        },
         isolated: {
             type: Boolean,
             default: false,
@@ -191,7 +196,13 @@ export default {
     },
     data: function() {
         return {
-            mmkey: null,
+            // mmkey: null,
+            mmkey: genID(), //beforeMount內無法變更data, mounted內會晚於computed, 故優先放於data生成
+            // mmkey: (() => {
+            //     let id = genID()
+            //     console.log('data gen mmkey', id)
+            //     return id
+            // })(),
 
             valueTrans: false,
 
@@ -217,8 +228,8 @@ export default {
 
         let vo = this
 
-        //mmkey
-        vo.mmkey = genID()
+        // //mmkey
+        // vo.mmkey = genID()
 
         //windowMousemove
         vo.windowMousemove = (e) => {

package/src/components/WTree.vue

@@ -641,7 +641,13 @@ export default {
 
             dbc: debounce(),
 
-            mmkey: null,
+            // mmkey: null,
+            mmkey: genID(), //beforeMount內無法變更data, mounted內會晚於computed, 故優先放於data生成
+            // mmkey: (() => {
+            //     let id = genID()
+            //     console.log('data gen mmkey', id)
+            //     return id
+            // })(),
 
             viewHeightMaxTrans: 2, //預設給予>=2最小內容區高度, 使能觸發顯示渲染連動機制
 
@@ -669,7 +675,7 @@ export default {
         }
     },
     beforeDestroy: function() {
-        //console.log('beforeMount')
+        //console.log('beforeDestroy')
 
         let vo = this
 
@@ -1011,11 +1017,11 @@ export default {
                     return msg
                 }
 
-                //mmkey, 產生mmkey要放在資料變更的地方, 否則beforeCreate只有1次(mounted會比computed還慢), 於vue-cli編譯情況下會有部份情境有問題
+                //mmkey, 產生mmkey要放在資料變更的地方, 否則須放在beforeMount, 且於vue-cli編譯情況下會有部份情境有問題
                 if (vo.mmkey === null) {
 
-                    //mmkey
-                    vo.mmkey = genID()
+                    // //mmkey
+                    // vo.mmkey = genID()
 
                 }
                 else {

package/src/js/domZIndex.mjs

@@ -0,0 +1,76 @@
+import get from 'lodash/get'
+import isNumber from 'lodash/isNumber'
+import values from 'lodash/values'
+import size from 'lodash/size'
+import max from 'lodash/max'
+import haskey from 'wsemi/src/haskey.mjs'
+
+
+let kpAll = {}
+
+
+function getLevel(type, key) {
+
+    //check
+    if (!haskey(kpAll, type)) {
+        kpAll[type] = {}
+    }
+
+    //kp
+    let kp = get(kpAll, type, {})
+
+    //l
+    let l = get(kp, key, null)
+
+    //check
+    if (isNumber(l)) {
+        return l
+    }
+
+    //vs
+    let vs = values(kpAll[type])
+    // console.log('getLevel kpAll[type]', kpAll[type])
+    // console.log('getLevel vs', vs)
+
+    //check
+    if (size(vs) === 0) {
+
+        //default
+        l = 1
+
+        //save
+        kpAll[type][key] = l
+
+        return l
+    }
+
+    //max+1
+    l = max(vs) + 1
+
+    //save
+    kpAll[type][key] = l
+
+    return l
+}
+
+
+function destroyLevel(type, key) {
+
+    //check
+    if (!haskey(kpAll, type)) {
+        return
+    }
+
+    //delete
+    delete kpAll[type][key]
+
+}
+
+
+let domZIndex = {
+    getLevel,
+    destroyLevel,
+}
+
+
+export default domZIndex