w-component-vue 2.5.2 → 2.5.3

package/docs/module-WTinymceVueDyn.html

@@ -285,7 +285,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Fri Aug 21 2026 12:10:25 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.5</a> on Tue Aug 25 2026 16:23:23 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTooltip.html

@@ -95,13 +95,13 @@
         <td>Number</td>
         <td><code>3000</code></td>
         <td>No</td>
-        <td>輸入提示窗或彈窗使用z-index數字，預設3000</td>
+        <td>輸入提示窗或彈窗使用z-index之基準數字，實際z-index為本數字加上顯示順序層級，故後顯示者z-index必大於先顯示者，預設3000。層級池依mode區分，mode為'tooltip'時自成一池；mode為'popup'時與WDialog共用'dialog+popup'池，此時本數字須與WDialog之dialogZIndex同基準(即2000)排序才會正確，故建議改用WPopup組件(其預設即2000)</td>
     </tr><tr>
         <td><code>isolated</code></td>
         <td>Boolean</td>
         <td><code>false</code></td>
         <td>No</td>
-        <td>輸入提示窗或彈窗當mode為'popup'時是否為獨立顯引狀態布林值，也就是可不接收外部傳入value值，預設false</td>
+        <td>輸入提示窗或彈窗當mode為'popup'時是否為獨立顯引狀態布林值，也就是不接收外部傳入value值，預設false</td>
     </tr><tr>
         <td><code>minWidth</code></td>
         <td>Number</td>
@@ -271,13 +271,13 @@
         <td>Number</td>
         <td><code>3000</code></td>
         <td>No</td>
-        <td>輸入提示窗或彈窗使用z-index數字，預設3000</td>
+        <td>輸入提示窗或彈窗使用z-index之基準數字，實際z-index為本數字加上顯示順序層級，故後顯示者z-index必大於先顯示者，預設3000。層級池依mode區分，mode為'tooltip'時自成一池；mode為'popup'時與WDialog共用'dialog+popup'池，此時本數字須與WDialog之dialogZIndex同基準(即2000)排序才會正確，故建議改用WPopup組件(其預設即2000)</td>
     </tr><tr>
         <td><code>isolated</code></td>
         <td>Boolean</td>
         <td><code>false</code></td>
         <td>No</td>
-        <td>輸入提示窗或彈窗當mode為'popup'時是否為獨立顯引狀態布林值，也就是可不接收外部傳入value值，預設false</td>
+        <td>輸入提示窗或彈窗當mode為'popup'時是否為獨立顯引狀態布林值，也就是不接收外部傳入value值，預設false</td>
     </tr><tr>
         <td><code>minWidth</code></td>
         <td>Number</td>
@@ -501,7 +501,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Fri Aug 21 2026 12:10:25 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.5</a> on Tue Aug 25 2026 16:23:23 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTree.html

@@ -735,9 +735,9 @@
     </tr><tr>
         <td><code>cmpZIndex</code></td>
         <td>Number</td>
-        <td><code>3000</code></td>
+        <td><code>2000</code></td>
         <td>No</td>
-        <td>輸入控制選項popup彈窗使用z-index數字，供嵌於高z-index彈窗內時提高層級，預設3000</td>
+        <td>輸入控制選項popup彈窗使用z-index之基準數字，實際z-index為本數字加上顯示順序層級，與WDialog共用同一層級池並同基準值，後顯示者z-index必大於先顯示者，預設2000</td>
     </tr><tr>
         <td><code>show</code></td>
         <td>Boolean</td>
@@ -1445,9 +1445,9 @@
     </tr><tr>
         <td><code>cmpZIndex</code></td>
         <td>Number</td>
-        <td><code>3000</code></td>
+        <td><code>2000</code></td>
         <td>No</td>
-        <td>輸入控制選項popup彈窗使用z-index數字，供嵌於高z-index彈窗內時提高層級，預設3000</td>
+        <td>輸入控制選項popup彈窗使用z-index之基準數字，實際z-index為本數字加上顯示順序層級，與WDialog共用同一層級池並同基準值，後顯示者z-index必大於先顯示者，預設2000</td>
     </tr><tr>
         <td><code>show</code></td>
         <td>Boolean</td>
@@ -1569,7 +1569,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Fri Aug 21 2026 12:10:25 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.5</a> on Tue Aug 25 2026 16:23:23 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html

@@ -333,7 +333,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Fri Aug 21 2026 12:10:25 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.5</a> on Tue Aug 25 2026 16:23:23 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -309,7 +309,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Fri Aug 21 2026 12:10:25 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.5</a> on Tue Aug 25 2026 16:23:23 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WVditorDyn.html

@@ -509,7 +509,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.5</a> on Fri Aug 21 2026 12:10:25 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.5</a> on Tue Aug 25 2026 16:23:23 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.5.2",
+  "version": "2.5.3",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.4.47",

package/src/components/WColorSelect.vue

@@ -290,7 +290,7 @@ import WIcon from './WIcon.vue'
  * @vue-prop {String} [btnBackgroundColorActive='rgb(236,236,236)'] 輸入主動模式時確認按鈕之背景顏色字串，預設'rgb(236,236,236)'
  * @vue-prop {Boolean} [btnShadow=true] 輸入確認按鈕之是否顯示陰影布林值，預設true
  * @vue-prop {String} [labelContent=null] 輸入針對teleport至body內之內容div所給予之wtlp屬性值字串，供查找使用，預設null
- * @vue-prop {Number} [cmpZIndex=3000] 輸入彈窗使用z-index數字，供嵌於高z-index彈窗內時提高層級，預設3000
+ * @vue-prop {Number} [cmpZIndex=2000] 輸入彈窗使用z-index之基準數字，實際z-index為本數字加上顯示順序層級，與WDialog共用同一層級池並同基準值，後顯示者z-index必大於先顯示者，預設2000
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
  */
 export default {
@@ -568,7 +568,7 @@ export default {
         },
         cmpZIndex: {
             type: Number,
-            default: 3000,
+            default: 2000, //與WDialog之dialogZIndex同基準值, 因內部WPopup與其共用'dialog+popup'層級池
         },
         editable: {
             type: Boolean,

package/src/components/WDialog.vue

@@ -506,6 +506,15 @@ export default {
 
         }
     },
+    beforeDestroy: function() {
+        //console.log('beforeDestroy')
+
+        let vo = this
+
+        //destroyLevel, 顯示中被銷毀時仍須釋放層級, 否則該號碼永久殘留於共用池, 墊高後續dialog與popup之起算值
+        domZIndex.destroyLevel('dialog+popup', vo.mmkey)
+
+    },
     computed: {
 
         changeParam: function () {
@@ -521,7 +530,7 @@ export default {
                 // console.log('changeParam showTrans', vo.showTrans)
 
                 //getLevel
-                vo.zind = domZIndex.getLevel('dialog', vo.mmkey)
+                vo.zind = domZIndex.getLevel('dialog+popup', vo.mmkey)
                 // console.log('changeParam mmkey', vo.mmkey, 'getLevel zind', vo.zind)
 
                 //showPanel
@@ -532,7 +541,7 @@ export default {
                 // console.log('changeParam showTrans', vo.showTrans)
 
                 //destroyLevel
-                domZIndex.destroyLevel('dialog', vo.mmkey)
+                domZIndex.destroyLevel('dialog+popup', vo.mmkey)
                 // console.log('changeParam mmkey', vo.mmkey, 'destroyLevel')
 
             }

package/src/components/WPopup.vue

@@ -24,8 +24,8 @@ import WTooltip from './WTooltip.vue'
 /**
  * @vue-prop {Boolean} [value=false] 輸入是否顯示布林值，預設false
  * @vue-prop {String} [displayType='block'] 輸入display設定字串，可選'block'與'line'，預設'block'
- * @vue-prop {Number} [cmpZIndex=3000] 輸入彈窗使用z-index數字，預設3000
- * @vue-prop {Boolean} [isolated=false] 輸入彈窗當mode為'popup'時是否為獨立顯引狀態布林值，也就是可不接收外部傳入value值，預設false
+ * @vue-prop {Number} [cmpZIndex=2000] 輸入彈窗使用z-index之基準數字，實際z-index為本數字加上顯示順序層級，且與WDialog共用同一層級池並同基準值，故彈窗與對話框不論何者先開，後開者z-index必大於先開者，預設2000
+ * @vue-prop {Boolean} [isolated=false] 輸入彈窗當mode為'popup'時是否為獨立顯引狀態布林值，也就是不接收外部傳入value值，預設false
  * @vue-prop {Number} [minWidth=null] 輸入彈窗最小寬度數字，不含paddingStyle的寬度，單位為px，預設null
  * @vue-prop {Number} [maxWidth=null] 輸入彈窗最大寬度數字，不含paddingStyle的寬度，單位為px，預設null
  * @vue-prop {Boolean} [autoFitMinWidth=false] 輸入是否使用驅動區寬度作為彈窗之最小寬度布林值，不含paddingStyle的寬度，預設false
@@ -60,7 +60,7 @@ export default {
         },
         cmpZIndex: {
             type: Number,
-            default: 3000,
+            default: 2000, //與WDialog之dialogZIndex同基準值, 因兩者共用'dialog+popup'層級池
         },
         isolated: {
             type: Boolean,

package/src/components/WPopupEditText.vue

@@ -114,7 +114,7 @@ import WIcon from './WIcon.vue'
  * @vue-prop {Number} [minWidthForValue=30] 輸入數據value展示時最小寬度數字，單位為px，預設30
  * @vue-prop {Number} [minWidthForPopup=300] 輸入彈窗最小寬度數字，單位為px，預設300
  * @vue-prop {String} [labelContent=null] 輸入針對teleport至body內之內容div所給予之wtlp屬性值字串，供查找使用，預設null
- * @vue-prop {Number} [cmpZIndex=3000] 輸入彈窗使用z-index數字，供嵌於高z-index彈窗內時提高層級，預設3000
+ * @vue-prop {Number} [cmpZIndex=2000] 輸入彈窗使用z-index之基準數字，實際z-index為本數字加上顯示順序層級，與WDialog共用同一層級池並同基準值，後顯示者z-index必大於先顯示者，預設2000
  */
 export default {
     components: {
@@ -234,7 +234,7 @@ export default {
         },
         cmpZIndex: {
             type: Number,
-            default: 3000,
+            default: 2000, //與WDialog之dialogZIndex同基準值, 因內部WPopup與其共用'dialog+popup'層級池
         },
     },
     data: function() {

package/src/components/WSegmentsVertical.vue

@@ -265,7 +265,7 @@ import convertColor from '../js/convertColor.mjs'
  * @vue-prop {Boolean} [textCanClick=false] 輸入項目文字是否可點擊布林值，預設false
  * @vue-prop {String} [labelContentForSegment=null] 輸入針對區塊之popup彈窗teleport至body內之內容div所給予之wtlp屬性值字串，供查找使用，預設null
  * @vue-prop {String} [labelContentForText=null] 輸入針對項目文字之popup彈窗teleport至body內之內容div所給予之wtlp屬性值字串，供查找使用，預設null
- * @vue-prop {Number} [cmpZIndex=3000] 輸入彈窗使用z-index數字，供嵌於高z-index彈窗內時提高層級，預設3000
+ * @vue-prop {Number} [cmpZIndex=2000] 輸入彈窗使用z-index之基準數字，實際z-index為本數字加上顯示順序層級，與WDialog共用同一層級池並同基準值，後顯示者z-index必大於先顯示者，預設2000
  */
 export default {
     components: {
@@ -449,7 +449,7 @@ export default {
         },
         cmpZIndex: {
             type: Number,
-            default: 3000,
+            default: 2000, //與WDialog之dialogZIndex同基準值, 因內部WPopup與其共用'dialog+popup'層級池
         },
     },
     data: function() {

package/src/components/WTooltip.vue

@@ -2,6 +2,7 @@
     <div
         :style="`${useDisplayType}`"
         :changeValue="changeValue"
+        :changeValueTrans="changeValueTrans"
     >
 
         <div
@@ -23,7 +24,7 @@
             <div
                 ref="divContent"
                 class="WPopperFix"
-                :style="`z-index:${cmpZIndex};`"
+                :style="`z-index:${useCmpZIndex};`"
                 :wtlp="labelContent"
                 v-show="valueTrans"
                 v-domresize
@@ -54,6 +55,7 @@ import replace from 'wsemi/src/replace.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
 import Teleport from './Teleport.vue'
 import convertColor from '../js/convertColor.mjs'
+import domZIndex from '../js/domZIndex.mjs'
 import parseSpace from '../js/parseSpace.mjs'
 import domResize from '../js/domResize.mjs'
 import BuildPopper from '../js/buildPopper.mjs'
@@ -79,8 +81,8 @@ function funRemoveTrigger(mode, mmkey) {
  * @vue-prop {String} [mode='tooltip'] 輸入組件模式字串，可選'tooltip'與'popup'，預設'tooltip'
  * @vue-prop {Boolean} [value=false] 輸入是否顯示布林值，預設false
  * @vue-prop {String} [displayType='block'] 輸入display設定字串，可選'block'與'line'，預設'block'
- * @vue-prop {Number} [cmpZIndex=3000] 輸入提示窗或彈窗使用z-index數字，預設3000
- * @vue-prop {Boolean} [isolated=false] 輸入提示窗或彈窗當mode為'popup'時是否為獨立顯引狀態布林值，也就是可不接收外部傳入value值，預設false
+ * @vue-prop {Number} [cmpZIndex=3000] 輸入提示窗或彈窗使用z-index之基準數字，實際z-index為本數字加上顯示順序層級，故後顯示者z-index必大於先顯示者，預設3000。層級池依mode區分，mode為'tooltip'時自成一池；mode為'popup'時與WDialog共用'dialog+popup'池，此時本數字須與WDialog之dialogZIndex同基準(即2000)排序才會正確，故建議改用WPopup組件(其預設即2000)
+ * @vue-prop {Boolean} [isolated=false] 輸入提示窗或彈窗當mode為'popup'時是否為獨立顯引狀態布林值，也就是不接收外部傳入value值，預設false
  * @vue-prop {Number} [minWidth=null] 輸入提示窗或彈窗最小寬度數字，不含paddingStyle的寬度，單位為px，預設null
  * @vue-prop {Number} [maxWidth=null] 輸入提示窗或彈窗最大寬度數字，不含paddingStyle的寬度，單位為px，預設null
  * @vue-prop {Boolean} [autoFitMinWidth=false] 輸入是否使用驅動區寬度作為提示窗或彈窗之最小寬度布林值，不含paddingStyle的寬度，預設false
@@ -215,6 +217,7 @@ export default {
             //     console.log('data gen mmkey', id)
             //     return id
             // })(),
+            zind: 0,
 
             valueTrans: false,
 
@@ -254,12 +257,39 @@ export default {
 
         let vo = this
 
+        //destroyLevel, 顯示中被銷毀時仍須釋放層級, 否則該號碼永不回收
+        domZIndex.destroyLevel(vo.useCmpLevelType, vo.mmkey)
+
         //destroy
         vo.bp.destroy()
 
     },
     computed: {
 
+        changeValueTrans: function () {
+            //console.log('computed changeValueTrans')
+
+            //與WDialog之changeParam同款computed驅動; 不可併入changeValue, 因changeValue內有updateValue(vo.value),
+            //若其依賴valueTrans, 當內部自關(如slot之funHide)致valueTrans與value分歧時, 重算會把value灌回而重新開啟
+
+            let vo = this
+
+            if (vo.valueTrans) {
+
+                //getLevel, tooltip自成一池, popup與WDialog共用一池, 後開者取得較大z-index
+                vo.zind = domZIndex.getLevel(vo.useCmpLevelType, vo.mmkey)
+
+            }
+            else {
+
+                //destroyLevel
+                domZIndex.destroyLevel(vo.useCmpLevelType, vo.mmkey)
+
+            }
+
+            return ''
+        },
+
         changeValue: function () {
             //console.log('computed changeValue')
 
@@ -277,6 +307,23 @@ export default {
             return ''
         },
 
+        useCmpLevelType: function() {
+            let vo = this
+
+            //popup與WDialog共用同一層級池, 使兩者交互巢狀開啟時後開者必定蓋住先開者
+            if (vo.mode === 'popup') {
+                return 'dialog+popup'
+            }
+
+            return vo.mode
+        },
+
+        useCmpZIndex: function() {
+            let vo = this
+            let zind = vo.cmpZIndex + vo.zind
+            return zind
+        },
+
         useDisplayType: function() {
             let vo = this
             if (vo.displayType === 'line') {

package/src/components/WTree.vue

@@ -454,7 +454,7 @@ let gm = globalMemory()
  * @vue-prop {String} [editorRenameSaveBtnBackgroundColorHover='grey lighten-3'] 輸入變更文字彈窗之滑鼠移入時儲存按鈕背景顏色字串，預設'grey lighten-3'
  * @vue-prop {String} [labelPanelForOperate=null] 輸入針對控制選項之popup彈窗teleport至body內之內容div所給予之wtlp屬性值字串，供查找使用，預設null
  * @vue-prop {String} [labelDialogForEditor=null] 輸入針對teleport至body內之WDialog所給予之wtre屬性值字串，供查找使用，預設null
- * @vue-prop {Number} [cmpZIndex=3000] 輸入控制選項popup彈窗使用z-index數字，供嵌於高z-index彈窗內時提高層級，預設3000
+ * @vue-prop {Number} [cmpZIndex=2000] 輸入控制選項popup彈窗使用z-index之基準數字，實際z-index為本數字加上顯示順序層級，與WDialog共用同一層級池並同基準值，後顯示者z-index必大於先顯示者，預設2000
  * @vue-prop {Boolean} [show=true] 輸入是否為顯示模式布林值，預設true，供組件嵌入popup時, 因先初始化但尚未顯示不需渲染, 可給予show=false避免無限偵測與重算高度問題
  */
 export default {
@@ -932,7 +932,7 @@ export default {
         },
         cmpZIndex: {
             type: Number,
-            default: 3000,
+            default: 2000, //與WDialog之dialogZIndex同基準值, 因內部WPopup與其共用'dialog+popup'層級池
         },
         show: {
             type: Boolean,

package/vue.config.js

@@ -6,6 +6,12 @@ module.exports = {
             template: 'public/index.html',
             filename: 'index.html',
         },
+        //dev-only z-index 疊放測試頁: dialog與popup共用層級池之驗證 (驗證後可移除)
+        'zindex-test': {
+            entry: 'tmp/zindex-test/main.js',
+            template: 'tmp/zindex-test/index.html',
+            filename: 'zindex-test.html',
+        },
         // //dev-only 精簡測試頁: 一頁一棵 WTree, 避免示範頁多樹佔滿單執行緒CPU致wdl渲染被餓死 (重構等價測試用, 之後可移除)
         // 'wtree-test': {
         //     entry: 'tmp/wtree-test/main.js',