w-component-vue 2.2.40 → 2.2.43

package/docs/module-WTextInt.html

@@ -374,7 +374,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextIntCore.html

@@ -278,7 +278,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSelect.html

@@ -434,7 +434,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSuggest.html

@@ -464,7 +464,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSuggestCore.html

@@ -368,7 +368,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextarea.html

@@ -218,7 +218,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeday.html

@@ -338,7 +338,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayCore.html

@@ -230,7 +230,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRange.html

@@ -350,7 +350,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRangeCore.html

@@ -242,7 +242,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminute.html

@@ -380,7 +380,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteCore.html

@@ -272,7 +272,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRange.html

@@ -392,7 +392,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRangeCore.html

@@ -284,7 +284,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTinymceVueDyn.html

@@ -224,7 +224,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTree.html

@@ -626,7 +626,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html

@@ -248,7 +248,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -224,7 +224,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html

@@ -144,7 +144,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Mon Aug 15 2022 17:23:34 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 3.6.10</a> on Tue Aug 16 2022 10:51:44 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.40",
+  "version": "2.2.43",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.0.96",

package/src/AppZoneWExplorer.vue

@@ -120,8 +120,8 @@
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :treeDefItemHeight="24"
-                    :listDefItemHeight="24"
+                    :treeDefItemHeight="22"
+                    :listDefItemHeight="22"
                 >
                 </w-explorer>
 
@@ -590,12 +590,29 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'noSelectedText'"
+                    :casename="'defaultShowTreeFirst'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
+                    :defaultShowTreeFirst="false"
+                >
+                </w-explorer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'defaultShowTreeFirst & noSelectedText'"
+                ></demolink>
+
+                <w-explorer
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                    :defaultShowTreeFirst="false"
                     :noSelectedText="'尚未選擇資料夾'"
                 >
                 </w-explorer>
@@ -705,8 +722,10 @@
                 ></demolink>
 
                 <div>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(true)">show all</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(true)">display all</v-btn>
                     <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(false)">hide all</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(null,1)">display to level1</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(null,2)">display to level2</v-btn>
                 </div>
 
                 <w-explorer
@@ -843,7 +862,6 @@
                 </div>
 
                 <w-explorer
-                    ref="we_triggerClickTreeFolderByFun"
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
                     :funSortTree="WExplorer.funSortTree"
@@ -1480,7 +1498,14 @@ export default {
                         size: '676.7mb',
                         tester: 'Hector',
                         priority: 'L3',
-                    }
+                    },
+                    {
+                        type: 'folder',
+                        path: '/Videos/Empty',
+                        size: '',
+                        tester: '',
+                        priority: '',
+                    },
                 ],
             },
             'actions': [
@@ -1516,13 +1541,13 @@ export default {
             })
 
         },
-        toggleTreeFoldersAll: function(toUnfolding) {
-            console.log('toggleTreeFoldersAll', toUnfolding)
+        toggleTreeFoldersAll: function(toUnfolding, toLevel) {
+            console.log('toggleTreeFoldersAll', toUnfolding, toLevel)
 
             let vo = this
 
             //toggleTreeFoldersAll
-            vo.$refs.ref_toggleTreeFoldersAll.toggleTreeFoldersAll(toUnfolding)
+            vo.$refs.ref_toggleTreeFoldersAll.toggleTreeFoldersAll(toUnfolding, toLevel)
 
         },
         ckTriggerClickTreeFolderById: function(treeItemId) {
@@ -1582,15 +1607,19 @@ export default {
         },
         getFolderInfor: function(props) {
             console.log('getFolderInfor', props)
-            let k = 0
+            let kfd = 0
+            let kfl = 0
             for (let i = 0; i < props.items.length; i++) {
                 let v = props.items[i]
                 let t = v.data._type
-                if (t === 'file') {
-                    k++
+                if (t === 'folder') {
+                    kfd++
+                }
+                else if (t === 'file') {
+                    kfl++
                 }
             }
-            return `There are ${k} file(s) in this folder`
+            return `There are ${kfd} folder(s) and ${kfl} file(s) in this folder`
         },
     }
 }

package/src/AppZoneWTree.vue

@@ -167,8 +167,10 @@
                 ></demolink>
 
                 <div>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsAll(true)">show all</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsAll(true)">display all</v-btn>
                     <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsAll(false)">hide all</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsAll(null,1)">display to level1</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItemsAll(null,2)">display to level2</v-btn>
                 </div>
 
                 <w-tree
@@ -1658,13 +1660,13 @@ export default {
             })
 
         },
-        toggleItemsAll: function(toUnfolding) {
-            console.log('toggleItemsAll', toUnfolding)
+        toggleItemsAll: function(toUnfolding, toLevel) {
+            console.log('toggleItemsAll', toUnfolding, toLevel)
 
             let vo = this
 
             //toggleItemsAll
-            vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding)
+            vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding, toLevel)
 
         },
     },

package/src/components/WExplorer.vue

@@ -24,7 +24,7 @@
 
             <template v-slot:drawer="props">
                 <!-- tree高度是使用viewHeightMax為動態高度, 故外部封裝一層給予背景色 -->
-                <div :style="`height:100%; background:${effTreeBackgroundColor};`">
+                <div :style="`position:relative; height:100%; background:${effTreeBackgroundColor};`">
 
                     <WTree
                         ref="wt"
@@ -73,6 +73,28 @@
                         </template>
                     </WTree>
 
+                    <div :style="`position:absolute; top:0px; right:0px;`" v-if="showTreeTrans">
+                        <!-- drawer可能有捲軸, 給予預留空間padding-right:8px -->
+                        <div :style="`padding-right:8px; min-height:${btnDisplayTreeInDrawerHeightMin}px; display:flex; align-items:center;`">
+
+                            <!-- 切換顯隱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="emitShowTree(!showTreeTrans)"
+                            ></WButtonCircle>
+
+                        </div>
+                    </div>
+
                 </div>
             </template>
 
@@ -86,9 +108,12 @@
                         @domresize="resizePath"
                     >
 
-                        <div :style="`display:flex; align-items:flex-start;`">
+                        <div :style="`padding-left:5px; display:flex; align-items:flex-start;`">
 
-                            <div :style="`min-height:${btnDisplayTreeIconSize+8}px; padding:0px 2px 0px 5px; display:flex; align-items:center;`">
+                            <div
+                                :style="`min-height:${btnDisplayTreeIconSize+8}px; padding-right:2px; display:flex; align-items:center;`"
+                                v-if="!showTreeTrans"
+                            >
 
                                 <!-- 切換顯隱tree按鈕 -->
                                 <WButtonCircle
@@ -183,7 +208,7 @@
                             _itemIconColorActive="listItemIconColorActive"
                             :itemRippleColor="listItemRippleColor"
                             _click="ckListItem"
-                            v-if="listItems.length>0"
+                            _v-if="listItems.length>0"
                         >
 
                             <template v-slot:header>
@@ -236,7 +261,7 @@
                                         </slot>
                                     </div>
 
-                                    <div :style="`position:absolute; top:0px; right:0px; _width:100%; _height:100%;`">
+                                    <div :style="`position:absolute; top:0px; right:0px;`">
                                         <slot
                                             name="list-item-cover"
                                             :item="props.item"
@@ -288,6 +313,7 @@ import ispm from 'wsemi/src/ispm.mjs'
 import replace from 'wsemi/src/replace.mjs'
 import arrSort from 'wsemi/src/arrSort.mjs'
 import filepathToTree from 'wsemi/src/filepathToTree.mjs'
+import parseSpace from '../js/parseSpace.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
 import domResize from '../js/domResize.mjs'
 import WIcon from './WIcon.vue'
@@ -302,10 +328,11 @@ import WButtonCircle from './WButtonCircle.vue'
  * @vue-prop {Array} [items=[]] 輸入項目物件陣列，預設[]
  * @vue-prop {String} [bindRoot='root'] 輸入建置根目錄名稱字串，預設'root'
  * @vue-prop {Function} [funSortTree=null] 輸入排序樹狀資料夾名稱函數，預設null
- * @vue-prop {Boolean} [showTree=false] 輸入是否顯示樹狀資料夾布林值，預設false
- * @vue-prop {Number} [treeWidth=200] 輸入拖曳抽屜寬度數字，單位為px，預設200
- * @vue-prop {Number} [treeWidthMin=null] 輸入拖曳抽屜寬度最小值數字，單位為px，預設null
- * @vue-prop {Number} [treeWidthMax=null] 輸入拖曳抽屜寬度最大值數字，單位為px，預設null
+ * @vue-prop {Boolean} [showTree=true] 輸入是否顯示樹狀資料夾布林值，預設true
+ * @vue-prop {Boolean} [defaultShowTreeFirst=true] 輸入是否預先顯示樹狀資料夾之第1個資料夾布林值，預設true
+ * @vue-prop {Number} [treeWidth=200] 輸入樹狀資料夾寬度數字，單位為px，預設200
+ * @vue-prop {Number} [treeWidthMin=null] 輸入樹狀資料夾可拖曳寬度之最小值數字，單位為px，預設null
+ * @vue-prop {Number} [treeWidthMax=null] 輸入樹狀資料夾可拖曳寬度之最大值數字，單位為px，預設null
  * @vue-prop {Boolean} [treeAfloat=false] 輸入是否樹狀資料夾為浮動顯示布林值，設為true時浮在內容區上故不壓縮內容區寬度，預設false
  * @vue-prop {Number} [treeDefItemHeight=30] 輸入樹狀資料夾之按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設30
  * @vue-prop {Number} [treeDefaultDisplayLevel=null] 輸入樹狀資料夾之初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
@@ -356,8 +383,8 @@ import WButtonCircle from './WButtonCircle.vue'
  * @vue-prop {String} [btnDisplayTreeIconColorHover='grey darken-2'] 輸入滑鼠移入時顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-2'
  * @vue-prop {String} [btnDisplayTreeIconColorFocus='grey darken-3'] 輸入取得焦點時顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-3'
  * @vue-prop {String} [btnDisplayTreeBackgroundColor='transparent'] 輸入顯隱樹狀資料夾按鈕背景顏色字串，預設'transparent'
- * @vue-prop {String} [btnDisplayTreeBackgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgb(236,236,236)'
- * @vue-prop {String} [btnDisplayTreeBackgroundColorFocus='rgb(230,230,230)'] 輸入主動模式時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgb(230,230,230)'
+ * @vue-prop {String} [btnDisplayTreeBackgroundColorHover='rgba(200,200,200,0.3)'] 輸入滑鼠移入時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgba(200,200,200,0.3)'
+ * @vue-prop {String} [btnDisplayTreeBackgroundColorFocus='rgba(180,180,180,0.3)'] 輸入主動模式時顯隱樹狀資料夾按鈕背景顏色字串，預設'rgba(180,180,180,0.3)'
  * @vue-prop {String} [pathBtnTextColor='#444'] 輸入路徑區按鈕之文字顏色字串，預設'#444'
  * @vue-prop {String} [pathBtnTextColorHover='#222'] 輸入滑鼠移入時路徑區按鈕之文字顏色字串，預設'#222'
  * @vue-prop {String} [pathBtnTextFontSize='0.85rem'] 輸入路徑區按鈕之文字字型大小字串，預設'0.85rem'
@@ -398,6 +425,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        defaultShowTreeFirst: {
+            type: Boolean,
+            default: true,
+        },
         treeWidth: {
             type: Number,
             default: 200,
@@ -626,11 +657,11 @@ export default {
         },
         btnDisplayTreeBackgroundColorHover: {
             type: String,
-            default: 'rgb(236,236,236)',
+            default: 'rgba(200,200,200,0.3)',
         },
         btnDisplayTreeBackgroundColorFocus: {
             type: String,
-            default: 'rgb(230,230,230)',
+            default: 'rgba(180,180,180,0.3)',
         },
         pathBtnTextColor: {
             type: String,
@@ -758,8 +789,10 @@ export default {
             vo.treeItems = r.treeItems
             vo.kpPath = r.kpPath
 
-            //defaultShowFirst
-            vo.defaultShowFirst()
+            //showTreeFirstFolder
+            if (vo.defaultShowTreeFirst) {
+                vo.showTreeFirstFolder()
+            }
 
             return ''
         },
@@ -835,14 +868,24 @@ export default {
             return `font-size:${s};`
         },
 
+        effPathBtnTextColor: function() {
+            let vo = this
+            return color2hex(vo.pathBtnTextColor)
+        },
+
         listHeight: function() {
             let vo = this
             return vo.panelHeight - vo.pathHeight
         },
 
-        effPathBtnTextColor: function() {
+        btnDisplayTreeInDrawerHeightMin: function() {
             let vo = this
-            return color2hex(vo.pathBtnTextColor)
+            let o = parseSpace(vo.treePaddingStyle, { returnObj: true })
+            // console.log('btnDisplayTreeInDrawerHeightMin', o)
+            let t = o.top
+            let b = o.bottom
+            let h = vo.treeDefItemHeight
+            return h + t + b
         },
 
     },
@@ -870,19 +913,14 @@ export default {
 
         },
 
-        defaultShowFirst: function() {
-            // console.log('methods defaultShowFirst')
+        showTreeFirstFolder: function() {
+            // console.log('methods showTreeFirstFolder')
 
             let vo = this
 
-            //nextTick
-            vo.$nextTick(() => {
-
-                //triggerClickTreeFolderById
-                let id = vo.bindRoot
-                vo.triggerClickTreeFolderById(id)
-
-            })
+            //triggerClickTreeFolderById
+            let id = vo.bindRoot
+            vo.triggerClickTreeFolderById(id)
 
         },
 
@@ -1136,12 +1174,12 @@ export default {
             return vo.$refs.wt.toggleItemsByFun(cb)
         },
 
-        toggleTreeFoldersAll: function(toUnfolding) {
-            // console.log('methods toggleTreeFoldersAll', toUnfolding)
+        toggleTreeFoldersAll: function(toUnfolding, toLevel) {
+            // console.log('methods toggleTreeFoldersAll', toUnfolding, toLevel)
 
             let vo = this
 
-            return vo.$refs.wt.toggleItemsAll(toUnfolding)
+            return vo.$refs.wt.toggleItemsAll(toUnfolding, toLevel)
         },
 
         triggerClickTreeFolderById: function(id) {