w-component-vue 2.3.1 → 2.3.3

package/docs/module-WTimedayRangeCore.html

@@ -287,7 +287,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminute.html

@@ -563,7 +563,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteCore.html

@@ -347,7 +347,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRange.html

@@ -587,7 +587,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRangeCore.html

@@ -371,7 +371,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTinymceVueDyn.html

@@ -251,7 +251,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTooltip.html

@@ -78,18 +78,18 @@
         <td><code>'tooltip'</code></td>
         <td>No</td>
         <td>輸入組件模式字串，可選'tooltip'與'popup'，預設'tooltip'</td>
-    </tr><tr>
-        <td><code>displayType</code></td>
-        <td>String</td>
-        <td><code>'block'</code></td>
-        <td>No</td>
-        <td>輸入display設定字串，可選'block'與'line'，預設'block'</td>
     </tr><tr>
         <td><code>value</code></td>
         <td>Boolean</td>
         <td><code>false</code></td>
         <td>No</td>
         <td>輸入是否顯示布林值，預設false</td>
+    </tr><tr>
+        <td><code>displayType</code></td>
+        <td>String</td>
+        <td><code>'block'</code></td>
+        <td>No</td>
+        <td>輸入display設定字串，可選'block'與'line'，預設'block'</td>
     </tr><tr>
         <td><code>cmpZIndex</code></td>
         <td>Number</td>
@@ -264,18 +264,18 @@
         <td><code>'tooltip'</code></td>
         <td>No</td>
         <td>輸入組件模式字串，可選'tooltip'與'popup'，預設'tooltip'</td>
-    </tr><tr>
-        <td><code>displayType</code></td>
-        <td>String</td>
-        <td><code>'block'</code></td>
-        <td>No</td>
-        <td>輸入display設定字串，可選'block'與'line'，預設'block'</td>
     </tr><tr>
         <td><code>value</code></td>
         <td>Boolean</td>
         <td><code>false</code></td>
         <td>No</td>
         <td>輸入是否顯示布林值，預設false</td>
+    </tr><tr>
+        <td><code>displayType</code></td>
+        <td>String</td>
+        <td><code>'block'</code></td>
+        <td>No</td>
+        <td>輸入display設定字串，可選'block'與'line'，預設'block'</td>
     </tr><tr>
         <td><code>cmpZIndex</code></td>
         <td>Number</td>
@@ -431,7 +431,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTree.html

@@ -168,6 +168,12 @@
         <td><code>'grey'</code></td>
         <td>No</td>
         <td>輸入顯隱icon按鈕顏色字串，預設'grey'</td>
+    </tr><tr>
+        <td><code>iconToggleDisabledColor</code></td>
+        <td>String</td>
+        <td><code>'grey lighten-1'</code></td>
+        <td>No</td>
+        <td>輸入顯隱icon按鈕禁用時顏色字串，預設'grey lighten-1'</td>
     </tr><tr>
         <td><code>iconToggleBackgroundColor</code></td>
         <td>String</td>
@@ -474,6 +480,12 @@
         <td><code>'Operations'</code></td>
         <td>No</td>
         <td>輸入控制按鈕之提示文字字串，預設'Operations'</td>
+    </tr><tr>
+        <td><code>operateBtnIconSize</code></td>
+        <td>Number</td>
+        <td><code>22</code></td>
+        <td>No</td>
+        <td>輸入控制按鈕圖標尺寸數字，單位px，預設22</td>
     </tr><tr>
         <td><code>operateBtnBackgroundColor</code></td>
         <td>String</td>
@@ -870,6 +882,12 @@
         <td><code>'grey'</code></td>
         <td>No</td>
         <td>輸入顯隱icon按鈕顏色字串，預設'grey'</td>
+    </tr><tr>
+        <td><code>iconToggleDisabledColor</code></td>
+        <td>String</td>
+        <td><code>'grey lighten-1'</code></td>
+        <td>No</td>
+        <td>輸入顯隱icon按鈕禁用時顏色字串，預設'grey lighten-1'</td>
     </tr><tr>
         <td><code>iconToggleBackgroundColor</code></td>
         <td>String</td>
@@ -1176,6 +1194,12 @@
         <td><code>'Operations'</code></td>
         <td>No</td>
         <td>輸入控制按鈕之提示文字字串，預設'Operations'</td>
+    </tr><tr>
+        <td><code>operateBtnIconSize</code></td>
+        <td>Number</td>
+        <td><code>22</code></td>
+        <td>No</td>
+        <td>輸入控制按鈕圖標尺寸數字，單位px，預設22</td>
     </tr><tr>
         <td><code>operateBtnBackgroundColor</code></td>
         <td>String</td>
@@ -1463,7 +1487,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html

@@ -299,7 +299,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -73,7 +73,7 @@
     </tr>
     </thead>
     <tbody><tr>
-        <td><code>mode</code></td>
+        <td><code>dir</code></td>
         <td>String</td>
         <td><code>'right'</code></td>
         <td>No</td>
@@ -90,6 +90,12 @@
         <td><code>'grey'</code></td>
         <td>No</td>
         <td>輸入顯隱icon按鈕顏色字串，預設'grey'</td>
+    </tr><tr>
+        <td><code>iconDisabledColor</code></td>
+        <td>String</td>
+        <td><code>'grey lighten-1'</code></td>
+        <td>No</td>
+        <td>輸入顯隱icon按鈕禁用時顏色字串，預設'grey lighten-1'</td>
     </tr><tr>
         <td><code>iconBackgroundColor</code></td>
         <td>String</td>
@@ -102,6 +108,12 @@
         <td><code>'rgba(128,128,128,0.15)'</code></td>
         <td>No</td>
         <td>輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'</td>
+    </tr><tr>
+        <td><code>editable</code></td>
+        <td>Boolean</td>
+        <td><code>true</code></td>
+        <td>No</td>
+        <td>輸入是否為編輯模式，預設true</td>
     </tr></tbody>
 </table>
 
@@ -169,7 +181,7 @@
     </tr>
     </thead>
     <tbody><tr>
-        <td><code>mode</code></td>
+        <td><code>dir</code></td>
         <td>String</td>
         <td><code>'right'</code></td>
         <td>No</td>
@@ -186,6 +198,12 @@
         <td><code>'grey'</code></td>
         <td>No</td>
         <td>輸入顯隱icon按鈕顏色字串，預設'grey'</td>
+    </tr><tr>
+        <td><code>iconDisabledColor</code></td>
+        <td>String</td>
+        <td><code>'grey lighten-1'</code></td>
+        <td>No</td>
+        <td>輸入顯隱icon按鈕禁用時顏色字串，預設'grey lighten-1'</td>
     </tr><tr>
         <td><code>iconBackgroundColor</code></td>
         <td>String</td>
@@ -198,6 +216,12 @@
         <td><code>'rgba(128,128,128,0.15)'</code></td>
         <td>No</td>
         <td>輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'</td>
+    </tr><tr>
+        <td><code>editable</code></td>
+        <td>Boolean</td>
+        <td><code>true</code></td>
+        <td>No</td>
+        <td>輸入是否為編輯模式，預設true</td>
     </tr></tbody>
 </table>
 
@@ -251,7 +275,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 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 Jul 06 2023 18:19:04 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 Fri Jul 07 2023 12:49:39 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.3.1",
+  "version": "2.3.3",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.2.96",

package/src/AppZoneWExplorer.vue

@@ -1233,7 +1233,7 @@
                     :casename="'draggable'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using draggable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using draggable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1253,7 +1253,7 @@
                     :casename="'draggable & dgPreviewOpacity & dgPreviewBorderWidth & dgBelongBackgroundColor'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using draggable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using draggable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1277,7 +1277,7 @@
                     :casename="'draggable & dgInsertLineColor & dgInsertBackgroundColor & dgBelongBackgroundColor'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using draggable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using draggable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1300,7 +1300,7 @@
                     :casename="'draggable & dgTextDisabled & dgTextDisabledColor & dgTextDisabledPaddingLeft & dgTextDisabledFontSize & dgTextDisabledBackgroundColor'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using draggable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using draggable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1325,7 +1325,7 @@
                     :casename="'operatable'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1345,7 +1345,7 @@
                     :casename="'operatable & operateBtnTooltip & operateItemTextForRename & perateItemTextForInsertChild & operateItemTextForDelete'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1369,7 +1369,7 @@
                     :casename="'operatable & operatePanelWidth & operatePanelHeight & operateItemIconSize & operateItemPaddingStyle'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1393,7 +1393,7 @@
                     :casename="'operatable & operateItemHeight & operateItemIconSize & operateItemPaddingStyle'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1416,7 +1416,7 @@
                     :casename="'operatable & operateBtnBackgroundColor & operateBtnBackgroundColorHover & operateBtnBackgroundColorFocus'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1439,7 +1439,7 @@
                     :casename="'operatable & operateItemBackgroundColor & operateItemBackgroundColorHover & operateItemTextColor & operateItemTextColorHover & operateItemIconColor & operateItemIconColorHover'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1465,7 +1465,7 @@
                     :casename="'operatable & operateItemIconForRename & operateItemIconForInsertChild & operateItemIconForDelete'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1488,7 +1488,7 @@
                     :casename="'operatable & editorRenameContentBackgroundColor & editorRenameFooterBackgroundColor'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1510,7 +1510,7 @@
                     :casename="'operatable & editorRenameInputTextColor & editorRenameInputTextBottomLineBorderColor & editorRenameInputTextBottomLineBorderColorHover & editorRenameInputTextBottomLineBorderColorFocus'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1534,7 +1534,7 @@
                     :casename="'operatable & editorRenameCancelBtnText & editorRenameCancelBtnTextColor & editorRenameCancelBtnTextColorHover'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1557,7 +1557,7 @@
                     :casename="'operatable & editorRenameCancelBtnIcon & editorRenameCancelBtnIconSize & editorRenameCancelBtnIconColor & editorRenameCancelBtnIconColorHover & editorRenameCancelBtnIconRippleColor'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1582,7 +1582,7 @@
                     :casename="'operatable & editorRenameCancelBtnBackgroundColor & editorRenameCancelBtnBackgroundColorHover'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1604,7 +1604,7 @@
                     :casename="'operatable & editorRenameSaveBtnText & editorRenameSaveBtnTextColor & editorRenameSaveBtnTextColorHover'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1627,7 +1627,7 @@
                     :casename="'operatable & editorRenameSaveBtnIcon & editorRenameSaveBtnIconSize & editorRenameSaveBtnIconColor & editorRenameSaveBtnIconColorHover & editorRenameSaveBtnIconRippleColor'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1652,7 +1652,7 @@
                     :casename="'operatable & editorRenameSaveBtnBackgroundColor & editorRenameSaveBtnBackgroundColorHover'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"
@@ -1674,7 +1674,7 @@
                     :casename="'operatable & draggable'"
                 ></demolink>
 
-                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable or draggable</div>
+                <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide folders when using operatable or draggable</div>
 
                 <w-explorer
                     style="width:800px; height:450px;"

package/src/AppZoneWTree.vue

@@ -502,7 +502,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'operatable & operateBtnBackgroundColor & operateBtnBackgroundColorHover & operateBtnBackgroundColorFocus'"
+                    :casename="'operatable & operateBtnIconSize & operateBtnBackgroundColor & operateBtnBackgroundColorHover & operateBtnBackgroundColorFocus'"
                 ></demolink>
 
                 <div style="margin-bottom:5px; color:#f26; font-size:0.8rem;">* Disable show and hide nodes when using operatable</div>
@@ -511,6 +511,7 @@
                     style="width:350px; border:1px solid #ddd;"
                     :data.sync="WTree.option.items"
                     :operatable="true"
+                    :operateBtnIconSize="20"
                     :operateBtnBackgroundColor="'rgba(230,230,230,0.4)'"
                     :operateBtnBackgroundColorHover="'rgba(230,230,255,0.8)'"
                     :operateBtnBackgroundColorFocus="'rgba(210,210,255,0.8)'"

package/src/components/WExplorer.vue

@@ -39,6 +39,7 @@
                         :indent="treeIndent"
                         :iconSize="treeToggleIconSize"
                         :iconToggleColor="treeToggleIconColor"
+                        :iconToggleDisabledColor="treeToggleIconDisabledColor"
                         :iconToggleBackgroundColor="treeToggleIconBackgroundColor"
                         :iconToggleBackgroundColorHover="treeToggleIconBackgroundColorHover"
                         :itemTextColor="treeItemTextColor"
@@ -143,26 +144,29 @@
                         </template>
                     </WTree>
 
-                    <div :style="`position:absolute; top:1px; right:${8+operatable?32:0}px;`" v-if="showTreeTrans">
-                        <!-- drawer可能有捲軸, 給予預留空間padding-right:8px -->
-                        <div :style="``">
-
-                            <!-- 切換顯隱tree按鈕 -->
-                            <WButtonCircle
-                                :paddingStyle="{h:2,v:2}"
-                                :icon="showTreeTrans?btnDisplayTreeIconHide:btnDisplayTreeIconShow"
-                                :iconSize="btnDisplayTreeIconSize"
-                                :iconColor="btnDisplayTreeIconColor"
-                                :iconColorHover="btnDisplayTreeIconColorHover"
-                                :iconColorFocus="btnDisplayTreeIconColorFocus"
-                                :backgroundColor="btnDisplayTreeBackgroundColor"
-                                :backgroundColorHover="btnDisplayTreeBackgroundColorHover"
-                                :backgroundColorFocus="btnDisplayTreeBackgroundColorFocus"
-                                :shadow="false"
-                                @click="emitShowTreeDelay(!showTreeTrans)"
-                            ></WButtonCircle>
+                    <!-- drawer可能有捲軸, 給予預留與右側空間8px -->
+                    <div
+                        :style="`position:absolute; top:${(useTreeItemHeightMin-(btnDisplayTreeIconSize+2*2))/2}px; right:${8+(operatable?(btnDisplayTreeIconSize+2*2):0)}px;`"
+                        v-if="showTreeTrans"
+                    >
+
+                        <!-- 切換顯隱tree按鈕 -->
+                        <!-- 指定display:block避免有text-node間隙 -->
+                        <WButtonCircle
+                            style="display:block;"
+                            :paddingStyle="{h:2,v:2}"
+                            :icon="showTreeTrans?btnDisplayTreeIconHide:btnDisplayTreeIconShow"
+                            :iconSize="btnDisplayTreeIconSize"
+                            :iconColor="btnDisplayTreeIconColor"
+                            :iconColorHover="btnDisplayTreeIconColorHover"
+                            :iconColorFocus="btnDisplayTreeIconColorFocus"
+                            :backgroundColor="btnDisplayTreeBackgroundColor"
+                            :backgroundColorHover="btnDisplayTreeBackgroundColorHover"
+                            :backgroundColorFocus="btnDisplayTreeBackgroundColorFocus"
+                            :shadow="false"
+                            @click="emitShowTreeDelay(!showTreeTrans)"
+                        ></WButtonCircle>
 
-                        </div>
                     </div>
 
                 </div>
@@ -186,7 +190,9 @@
                             >
 
                                 <!-- 切換顯隱tree按鈕 -->
+                                <!-- 指定display:block避免有text-node間隙 -->
                                 <WButtonCircle
+                                    style="display:block;"
                                     :paddingStyle="{h:2,v:2}"
                                     :icon="showTreeTrans?btnDisplayTreeIconHide:btnDisplayTreeIconShow"
                                     :iconSize="btnDisplayTreeIconSize"
@@ -452,6 +458,7 @@ import WButtonCircle from './WButtonCircle.vue'
  * @vue-prop {String} [treeDrawerBarColor='#ddd'] 輸入樹狀資料夾抽屜之分隔條顏色字串，預設'#ddd'
  * @vue-prop {Number} [treeToggleIconSize=24] 輸入顯隱樹狀資料夾按鈕之圖標尺寸數字，單位為px，預設24
  * @vue-prop {String} [treeToggleIconColor='grey'] 輸入顯隱樹狀資料夾按鈕之圖標顏色字串，預設'grey'
+ * @vue-prop {String} [treeToggleIconDisabledColor='grey lighten-1'] 輸入顯隱樹狀資料夾按鈕之禁用時圖標顏色字串，預設'grey lighten-1'
  * @vue-prop {String} [treeToggleIconBackgroundColor='transparent'] 輸入顯隱樹狀資料夾按鈕之圖標背景顏色字串，預設'transparent'
  * @vue-prop {String} [treeToggleIconBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時顯隱樹狀資料夾按鈕之圖標背景顏色字串，預設'rgba(128,128,128,0.15)'
  * @vue-prop {Number} [lineBetweenPathAndListWidth=1] 輸入路徑區與清單區之間分隔線寬度，單位為px，預設1
@@ -697,6 +704,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        treeToggleIconDisabledColor: {
+            type: String,
+            default: 'grey lighten-1',
+        },
         treeToggleIconBackgroundColor: {
             type: String,
             default: 'transparent',
@@ -1190,6 +1201,14 @@ export default {
             return ''
         },
 
+        useTreeItemHeightMin: function() {
+            //console.log('computed useTreeItemHeightMin')
+
+            let vo = this
+
+            return Math.max(vo.treeToggleIconSize, vo.treeDefItemHeight)
+        },
+
         effTreeBackgroundColor: function() {
             let vo = this
             return color2hex(vo.treeBackgroundColor)

package/src/components/WPopup.vue

@@ -23,18 +23,20 @@ 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 {String} [placement='bottom-start'] 輸入內容區出現位置字串，可選'top-start'、'top'、'top-end'、'bottom-start'、'bottom'、'bottom-end'、'left-start'、'left'、'left-end'、'right-start'、'right'、'right-end'、，預設'bottom-start'
+ * @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
  * @vue-prop {Number} [maxWidth=null] 輸入最大寬度數字，單位為px，預設null
  * @vue-prop {Boolean} [autoFitMinWidth=false] 輸入是否使用驅動區寬度作為內容區之最小寬度布林值，預設false
  * @vue-prop {Boolean} [autoFitMaxWidth=false] 輸入是否使用驅動區寬度作為內容區之最大寬度布林值，預設false
  * @vue-prop {Number} [placementDist=5] 輸入彈窗距離觸發元素距離數字，單位為px，預設5
  * @vue-prop {Number} [borderRadius=4] 輸入框圓角度數字，單位為px，預設4
- * @vue-prop {String} [textFontSize='inherit'] 輸入入內容區塊文字字型大小字串，預設'inherit'
- * @vue-prop {String} [textColor='black'] 輸入內容區塊文字顏色字串，預設'black'
- * @vue-prop {String} [backgroundColor='white'] 輸入內容區塊背景顏色字串，預設'white'
- * @vue-prop {Object} [paddingStyle={v:0,h:0}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入入內容區塊文字字型大小字串，預設'0.85rem'
+ * @vue-prop {String} [textColor='white'] 輸入內容區塊文字顏色字串，預設'white'
+ * @vue-prop {String} [backgroundColor='rgba(60,60,60,0.75)'] 輸入內容區塊背景顏色字串，預設'rgba(60,60,60,0.75)'
+ * @vue-prop {Object} [paddingStyle={v:2,h:10}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:2,h:10}
  * @vue-prop {Boolean} [shadow=true] 輸入是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
  * @vue-prop {Number} [transitionTime=200] 輸入淡入出現時間數字，單位為ms，預設200
@@ -49,6 +51,14 @@ export default {
             type: Boolean,
             default: false,
         },
+        displayType: {
+            type: String,
+            default: 'block', //line, block
+        },
+        cmpZIndex: {
+            type: Number,
+            default: 3000,
+        },
         isolated: {
             type: Boolean,
             default: false,