w-component-vue 2.2.35 → 2.2.38

package/src/components/WExplorer.vue

@@ -2,6 +2,7 @@
     <div
         style=""
         :changeShowTree="changeShowTree"
+        :changeTreeWidth="changeTreeWidth"
         :changeItems="changeItems"
         v-domresize
         @domresize="resizePanel"
@@ -10,7 +11,7 @@
         <WDrawer
             :style="`width:${panelWidth}px; height:${panelHeight}px;`"
             :afloat="treeAfloat"
-            :drawerWidth.sync="treeWidth"
+            :drawerWidth="treeWidthTrans"
             :drawerWidthMin="treeWidthMin"
             :drawerWidthMax="treeWidthMax"
             :dragDrawerWidth="true"
@@ -18,6 +19,7 @@
             :drawerBarSize="treeDrawerBarSize"
             :value="showTreeTrans"
             @input="emitShowTree"
+            @update:drawerWidth="emitDrawerWidth"
         >
 
             <template v-slot:drawer="props">
@@ -32,13 +34,13 @@
                         :defaultDisplayLevel="treeDefaultDisplayLevel"
                         :data="treeItemsFolder"
                         :activable="true"
-                        :itemActive.sync="folderItemActive"
+                        :itemActive.sync="treeItemActive"
                         :paddingStyle="treePaddingStyle"
                         :indent="treeIndent"
-                        :iconSize="toggleTreeIconSize"
-                        :iconToggleColor="toggleTreeIconColor"
-                        :iconToggleBackgroundColor="toggleTreeIconBackgroundColor"
-                        :iconToggleBackgroundColorHover="toggleTreeIconBackgroundColorHover"
+                        :iconSize="treeToggleIconSize"
+                        :iconToggleColor="treeToggleIconColor"
+                        :iconToggleBackgroundColor="treeToggleIconBackgroundColor"
+                        :iconToggleBackgroundColorHover="treeToggleIconBackgroundColorHover"
                         :itemTextColor="treeItemTextColor"
                         :itemTextColorHover="treeItemTextColorHover"
                         :itemTextColorActive="treeItemTextColorActive"
@@ -161,10 +163,11 @@
                     <div
                         :style="`height:${listHeight}px; background:${effListBackgroundColor};`"
                     >
+
                         <WListVertical
                             :style="`width:${props.width}px; min-width:${props.width}px; height:${listHeight}px;`"
-                            :items="folderItems"
-                            :itemActive.sync="fileItemActive"
+                            :items="listItems"
+                            :itemActive.sync="listItemActive"
                             :itemClickable="true"
                             :itemCursorPointer="false"
                             :paddingStyle="listPaddingStyle"
@@ -180,12 +183,13 @@
                             _itemIconColorActive="listItemIconColorActive"
                             :itemRippleColor="listItemRippleColor"
                             _click="ckListItem"
-                            v-if="folderItems.length>0"
+                            v-if="listItems.length>0"
                         >
 
                             <template v-slot:header>
                                 <slot
                                     name="list-head"
+                                    :items="listItems"
                                 >
                                 </slot>
                             </template>
@@ -202,6 +206,8 @@
                                                 iconColor:getListItemIconColor(props),
                                                 iconSize:listItemIconSize,
                                             }"
+                                            :isHover="props.isHover"
+                                            :isActive="props.isActive"
                                             :funClickListItem="()=>{ckListItem(props)}"
                                         >
 
@@ -230,17 +236,21 @@
                                         </slot>
                                     </div>
 
-                                    <div :style="`position:absolute; top:0px; right:0px; _width:100%; height:100%;`">
+                                    <div :style="`position:absolute; top:0px; right:0px; _width:100%; _height:100%;`">
                                         <slot
                                             name="list-item-cover"
                                             :item="props.item"
+                                            :isHover="props.isHover"
+                                            :isActive="props.isActive"
                                         >
                                         </slot>
                                     </div>
 
                                     <slot
-                                        name="list-item-pkg"
+                                        name="list-item-sub"
                                         :item="props.item"
+                                        :isHover="props.isHover"
+                                        :isActive="props.isActive"
                                     >
                                     </slot>
 
@@ -250,6 +260,7 @@
                             <template v-slot:footer>
                                 <slot
                                     name="list-foot"
+                                    :items="listItems"
                                 >
                                 </slot>
                             </template>
@@ -268,8 +279,12 @@
 <script>
 import { mdiFolder, mdiFileOutline, mdiChevronRight, mdiArrowLeftBoldHexagonOutline, mdiArrowRightBoldHexagonOutline } from '@mdi/js'
 import get from 'lodash/get'
+import each from 'lodash/each'
 import map from 'lodash/map'
 import isbol from 'wsemi/src/isbol.mjs'
+import isestr from 'wsemi/src/isestr.mjs'
+import isfun from 'wsemi/src/isfun.mjs'
+import ispm from 'wsemi/src/ispm.mjs'
 import replace from 'wsemi/src/replace.mjs'
 import filepathToTree from 'wsemi/src/filepathToTree.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
@@ -283,9 +298,74 @@ import WButtonCircle from './WButtonCircle.vue'
 
 
 /**
- *
- *
-
+ * @vue-prop {Array} [items=[]] 輸入項目物件陣列，預設[]
+ * @vue-prop {String} [bindRoot='root'] 輸入建置根目錄名稱字串，預設'root'
+ * @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} [treeAfloat=false] 輸入是否樹狀資料夾為浮動顯示布林值，設為true時浮在內容區上故不壓縮內容區寬度，預設false
+ * @vue-prop {Number} [treeDefItemHeight=30] 輸入樹狀資料夾之按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設30
+ * @vue-prop {Number} [treeDefaultDisplayLevel=null] 輸入樹狀資料夾之初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
+ * @vue-prop {Object} [treePaddingStyle={v:0,h:0}] 輸入樹狀資料夾之內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}
+ * @vue-prop {Number} [treeIndent=0.7] 輸入樹狀資料夾之縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設0.7
+ * @vue-prop {String} [treeItemTextColor='#444'] 輸入樹狀資料夾之文字顏色字串，預設'#444'
+ * @vue-prop {String} [treeItemTextColorHover='#222'] 輸入滑鼠移入時樹狀資料夾之文字顏色字串，預設'#222'
+ * @vue-prop {String} [treeItemTextColorActive='#000'] 輸入主動模式時樹狀資料夾之文字顏色字串，預設'#000'
+ * @vue-prop {String} [treeFolderIcon=mdiFolder] 輸入樹狀資料夾之資料夾圖標字串，預設mdiFolder
+ * @vue-prop {Number} [treeFolderIconSize=20] 輸入樹狀資料夾之資料夾圖標之尺寸數字，單位為px，預設20
+ * @vue-prop {String} [treeFolderIconColor='#888'] 輸入樹狀資料夾之資料夾圖標顏色字串，預設'#888'
+ * @vue-prop {String} [treeFolderIconColorHover='#777'] 輸入滑鼠移入時樹狀資料夾之資料夾圖標顏色字串，預設'#777'
+ * @vue-prop {String} [treeFolderIconColorActive='#666'] 輸入主動模式時樹狀資料夾之資料夾圖標顏色字串，預設'#666'
+ * @vue-prop {String} [treeItemBackgroundColor='transparent'] 輸入樹狀資料夾之項目區背景顏色字串，預設'transparent'
+ * @vue-prop {String} [treeItemBackgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時樹狀資料夾之項目區背景顏色字串，預設'rgba(200,200,200,0.2)'
+ * @vue-prop {String} [treeItemBackgroundColorActive='rgba(100,100,100,0.2)'] 輸入主動模式時樹狀資料夾之項目區背景顏色字串，預設'rgba(100,100,100,0.2)'
+ * @vue-prop {String} [treeItemRippleColor='rgba(200,200,200,0.4)'] 輸入樹狀資料夾之項目區ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
+ * @vue-prop {String} [treeBackgroundColor='#fff'] 輸入樹狀資料夾背景顏色字串，預設'#fff'
+ * @vue-prop {Number} [treeDrawerBarSize=2] 輸入樹狀資料夾抽屜之分隔條尺寸數字，為分隔條寬度，單位為px，預設2
+ * @vue-prop {String} [treeDrawerBarColor='#ddd'] 輸入樹狀資料夾抽屜之分隔條顏色字串，預設'#ddd'
+ * @vue-prop {Number} [treeToggleIconSize=24] 輸入顯隱樹狀資料夾按鈕之圖標尺寸數字，單位為px，預設24
+ * @vue-prop {String} [treeToggleIconColor='grey'] 輸入顯隱樹狀資料夾按鈕之圖標顏色字串，預設'grey'
+ * @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
+ * @vue-prop {String} [lineBetweenPathAndListColor='#ddd'] 輸入路徑區與清單區之間分隔線顏色字串，預設'#ddd'
+ * @vue-prop {Number} [listDefItemHeight=30] 輸入清單區按需顯示時各項目預設最小高度(min-height)值，單位為px，預設30
+ * @vue-prop {Object} [listPaddingStyle={v:0,h:6}] 輸入清單區項目之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:6}
+ * @vue-prop {String} [listItemTextFontSize='0.85rem'] 輸入清單區項目之文字字型大小字串，預設'0.85rem'
+ * @vue-prop {String} [listItemTextColor='#444'] 輸入清單區項目之文字顏色字串，預設'#444'
+ * @vue-prop {String} [listItemTextColorHover='#222'] 輸入滑鼠移入時清單區項目之文字顏色字串，預設'#222'
+ * @vue-prop {String} [listItemTextColorActive='#000'] 輸入主動模式時清單區項目之文字顏色字串，預設'#000'
+ * @vue-prop {String} [listFolderIcon=mdiFolder] 輸入清單區項目之資料夾圖標字串，預設mdiFolder
+ * @vue-prop {String} [listFileIcon=mdiFileOutline] 輸入清單區項目之檔案圖標字串，預設mdiFileOutline
+ * @vue-prop {Number} [listItemIconSize=22] 輸入清單區項目之圖標尺寸數字，單位為px，預設22
+ * @vue-prop {String} [listItemIconColor='#888'] 輸入清單區項目之圖標顏色字串，預設'#888'
+ * @vue-prop {String} [listItemIconColorHover='#777'] 輸入滑鼠移入時清單區項目之圖標顏色字串，預設'#777'
+ * @vue-prop {String} [listItemIconColorActive='#666'] 輸入主動模式時清單區項目之圖標顏色字串，預設'#666'
+ * @vue-prop {String} [listItemBackgroundColor='transparent'] 輸入清單區項目之背景顏色字串，預設'transparent'
+ * @vue-prop {String} [listItemBackgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時清單區項目之背景顏色字串，預設'rgba(200,200,200,0.2)'
+ * @vue-prop {String} [listItemBackgroundColorActive='rgba(100,100,100,0.2)'] 輸入主動模式時清單區項目之背景顏色字串，預設'rgba(100,100,100,0.2)'
+ * @vue-prop {String} [listItemRippleColor='rgba(255,255,255,0.4)'] 輸入清單區項目之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
+ * @vue-prop {String} [listBackgroundColor='#fff'] 輸入清單區背景顏色字串，預設'#fff'
+ * @vue-prop {String} [btnDisplayTreeIconShow=mdiArrowRightBoldHexagonOutline] 輸入顯示樹狀資料夾按鈕圖標字串，預設mdiArrowRightBoldHexagonOutline
+ * @vue-prop {String} [btnDisplayTreeIconShow=mdiArrowLeftBoldHexagonOutline] 輸入隱藏樹狀資料夾按鈕圖標字串，預設mdiArrowLeftBoldHexagonOutline
+ * @vue-prop {Number} [btnDisplayTreeIconSize=20] 輸入顯隱樹狀資料夾按鈕圖標之尺寸數字，單位為px，預設20
+ * @vue-prop {String} [btnDisplayTreeIconColor='grey darken-1'] 輸入顯隱樹狀資料夾按鈕圖標顏色字串，預設'grey darken-1'
+ * @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} [pathBtnTextColor='#444'] 輸入路徑區按鈕之文字顏色字串，預設'#444'
+ * @vue-prop {String} [pathBtnTextColorHover='#222'] 輸入滑鼠移入時路徑區按鈕之文字顏色字串，預設'#222'
+ * @vue-prop {String} [pathBtnTextFontSize='0.85rem'] 輸入路徑區按鈕之文字字型大小字串，預設'0.85rem'
+ * @vue-prop {String} [pathBtnBackgroundColor='transparent'] 輸入路徑區按鈕之背景顏色字串，預設'transparent'
+ * @vue-prop {String} [pathBtnBackgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時路徑區按鈕之背景顏色字串，預設'rgb(236,236,236)'
+ * @vue-prop {String} [pathSepIcon=mdiChevronRight] 輸入路徑區分隔符號之圖標字串，預設mdiChevronRight
+ * @vue-prop {String} [pathSepIconColor='#888'] 輸入路徑區分隔符號之圖標顏色字串，預設'#888'
+ * @vue-prop {Number} [pathSepIconSize=18] 輸入路徑區分隔符號之圖標尺寸數字，單位為px，預設18
+ * @vue-prop {String} [pathBackgroundColor='transparent'] 輸入路徑區背景顏色字串，預設'#fff'
+ * @vue-prop {String} [noSelectedText='No selected folder'] 輸入尚未選擇資料夾文字字串，預設'No selected folder'
  */
 export default {
     directives: {
@@ -300,14 +380,22 @@ export default {
         WButtonCircle,
     },
     props: {
-
-        //  * @vue-prop {Array} [items=[]] 輸入項目物件陣列，預設[]
-        //  * @vue-prop {Number} [treeWidthMin=null] 輸入使用拖曳抽屜寬度分隔條(dragDrawerWidth=true)時，拖曳抽屜寬度分隔條最小值數字，預設null
-        //  * @vue-prop {Number} [treeWidthMax=null] 輸入使用拖曳抽屜寬度分隔條(dragDrawerWidth=true)時，拖曳抽屜寬度分隔條最大值數字，預設null
         items: {
             type: Array,
             default: () => [],
         },
+        bindRoot: {
+            type: String,
+            default: 'root',
+        },
+        showTree: {
+            type: Boolean,
+            default: true,
+        },
+        treeWidth: {
+            type: Number,
+            default: 200,
+        },
         treeWidthMin: {
             type: Number,
             default: null,
@@ -316,34 +404,6 @@ export default {
             type: Number,
             default: null,
         },
-
-        //  * @vue-prop {Boolean} [showTree=false] 輸入是否顯示樹狀資料夾布林值，預設false
-        //  * @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
-        //  * @vue-prop {Object} [treePaddingStyle={v:0,h:0}] 輸入樹狀資料夾之內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}
-        //  * @vue-prop {Number} [treeIndent=0.7] 輸入樹狀資料夾之縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設0.7
-        //  * @vue-prop {Number} [toggleTreeIconSize=24] 輸入樹狀資料夾之顯隱icon按鈕高度數字，單位為px，預設24
-        //  * @vue-prop {String} [toggleTreeIconColor='grey'] 輸入樹狀資料夾之顯隱icon按鈕顏色字串，預設'grey'
-        //  * @vue-prop {String} [toggleTreeIconBackgroundColor='transparent'] 輸入樹狀資料夾之顯隱icon按鈕背景顏色字串，預設'transparent'
-        //  * @vue-prop {String} [toggleTreeIconBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時樹狀資料夾之顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
-        //  * @vue-prop {String} [treeItemTextColor='#444'] 輸入樹狀資料夾之文字顏色字串，預設'#444'
-        //  * @vue-prop {String} [treeItemTextColorHover='#222'] 輸入滑鼠移入時樹狀資料夾之文字顏色字串，預設'#222'
-        //  * @vue-prop {String} [treeItemTextColorActive='#000'] 輸入主動模式時樹狀資料夾之文字顏色字串，預設'#000'
-        //  * @vue-prop {String} [treeFolderIcon=mdiFolder] 輸入樹狀資料夾之資料夾圖標字串，預設mdiFolder
-        //  * @vue-prop {Number} [treeFolderIconSize=20] 輸入樹狀資料夾之資料夾圖標之尺寸數字，單位px，預設20
-        //  * @vue-prop {String} [treeFolderIconColor='#888'] 輸入樹狀資料夾之資料夾圖標顏色字串，預設'#888'
-        //  * @vue-prop {String} [treeFolderIconColorHover='#777'] 輸入滑鼠移入時樹狀資料夾之資料夾圖標顏色字串，預設'#777'
-        //  * @vue-prop {String} [treeFolderIconColorActive='#666'] 輸入主動模式時樹狀資料夾之資料夾圖標顏色字串，預設'#666'
-        //  * @vue-prop {String} [treeItemBackgroundColor='transparent'] 輸入樹狀資料夾之項目區背景顏色字串，預設'transparent'
-        //  * @vue-prop {String} [treeItemBackgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時樹狀資料夾之項目區背景顏色字串，預設'rgba(200,200,200,0.2)'
-        //  * @vue-prop {String} [treeItemBackgroundColorActive='rgba(100,100,100,0.2)'] 輸入主動模式時樹狀資料夾之項目區背景顏色字串，預設'rgba(100,100,100,0.2)'
-        //  * @vue-prop {String} [treeItemRippleColor='rgba(200,200,200,0.4)'] 輸入樹狀資料夾之項目區ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
-        //  * @vue-prop {String} [treeBackgroundColor='#fff'] 輸入樹狀資料夾背景顏色字串，預設'#fff'
-        showTree: {
-            type: Boolean,
-            default: true,
-        },
         treeAfloat: {
             type: Boolean,
             default: false,
@@ -369,22 +429,6 @@ export default {
             type: Number,
             default: 0.7,
         },
-        toggleTreeIconSize: {
-            type: Number,
-            default: 24,
-        },
-        toggleTreeIconColor: {
-            type: String,
-            default: 'grey',
-        },
-        toggleTreeIconBackgroundColor: {
-            type: String,
-            default: 'transparent',
-        },
-        toggleTreeIconBackgroundColorHover: {
-            type: String,
-            default: 'rgba(128,128,128,0.15)',
-        },
         treeItemTextFontSize: {
             type: String,
             default: '0.85rem',
@@ -441,9 +485,6 @@ export default {
             type: String,
             default: '#fff',
         },
-
-        //  * @vue-prop {Number} [treeDrawerBarSize=2] 輸入樹狀資料夾抽屜之分隔條尺寸數字，為分隔條寬度，單位為px，預設2
-        //  * @vue-prop {String} [treeDrawerBarColor='#ddd'] 輸入樹狀資料夾抽屜之分隔條顏色字串，預設'#ddd'
         treeDrawerBarSize: {
             type: Number,
             default: 2,
@@ -452,9 +493,22 @@ export default {
             type: String,
             default: '#ddd',
         },
-
-        //  * @vue-prop {Number} [lineBetweenPathAndListWidth=1] 輸入路徑區與清單區之間分隔線寬度，單位為px，預設1
-        //  * @vue-prop {String} [lineBetweenPathAndListColor='#ddd'] 輸入路徑區與清單區之間分隔線顏色字串，預設'#ddd'
+        treeToggleIconSize: {
+            type: Number,
+            default: 24,
+        },
+        treeToggleIconColor: {
+            type: String,
+            default: 'grey',
+        },
+        treeToggleIconBackgroundColor: {
+            type: String,
+            default: 'transparent',
+        },
+        treeToggleIconBackgroundColorHover: {
+            type: String,
+            default: 'rgba(128,128,128,0.15)',
+        },
         lineBetweenPathAndListWidth: {
             type: Number,
             default: 1,
@@ -463,24 +517,6 @@ export default {
             type: String,
             default: '#ddd',
         },
-
-        //  * @vue-prop {Number} [listDefItemHeight=30] 輸入清單區按需顯示時各項目預設最小高度(min-height)值，單位為px，預設30
-        //  * @vue-prop {Object} [listPaddingStyle={v:0,h:6}] 輸入清單區項目之內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:6}
-        //  * @vue-prop {String} [listItemBackgroundColor='transparent'] 輸入清單區項目之背景顏色字串，預設'transparent'
-        //  * @vue-prop {String} [listItemBackgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時清單區項目之背景顏色字串，預設'rgba(200,200,200,0.2)'
-        //  * @vue-prop {String} [listItemBackgroundColorActive='rgba(100,100,100,0.2)'] 輸入主動模式時清單區項目之背景顏色字串，預設'rgba(100,100,100,0.2)'
-        //  * @vue-prop {String} [listItemTextFontSize='0.85rem'] 輸入清單區項目之文字字型大小字串，預設'0.85rem'
-        //  * @vue-prop {String} [listItemTextColor='#444'] 輸入清單區項目之文字顏色字串，預設'#444'
-        //  * @vue-prop {String} [listItemTextColorHover='#222'] 輸入滑鼠移入時清單區項目之文字顏色字串，預設'#222'
-        //  * @vue-prop {String} [listItemTextColorActive='#000'] 輸入主動模式時清單區項目之文字顏色字串，預設'#000'
-        //  * @vue-prop {String} [listFolderIcon=mdiFolder] 輸入清單區項目之資料夾圖標字串，預設mdiFolder
-        //  * @vue-prop {String} [listFileIcon=mdiFileOutline] 輸入清單區項目之檔案圖標字串，預設mdiFileOutline
-        //  * @vue-prop {Number} [listItemIconSize=22] 輸入清單區項目之圖標尺寸數字，單位px，預設22
-        //  * @vue-prop {String} [listItemIconColor='#888'] 輸入清單區項目之圖標顏色字串，預設'#888'
-        //  * @vue-prop {String} [listItemIconColorHover='#777'] 輸入滑鼠移入時清單區項目之圖標顏色字串，預設'#777'
-        //  * @vue-prop {String} [listItemIconColorActive='#666'] 輸入主動模式時清單區項目之圖標顏色字串，預設'#666'
-        //  * @vue-prop {String} [listItemRippleColor='rgba(255,255,255,0.4)'] 輸入清單區項目之ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
-        //  * @vue-prop {String} [listBackgroundColor='#fff'] 輸入清單區背景顏色字串，預設'#fff'
         listDefItemHeight: {
             type: Number,
             default: 30,
@@ -494,18 +530,6 @@ export default {
                 }
             },
         },
-        listItemBackgroundColor: {
-            type: String,
-            default: 'transparent',
-        },
-        listItemBackgroundColorHover: {
-            type: String,
-            default: 'rgba(200,200,200,0.2)',
-        },
-        listItemBackgroundColorActive: {
-            type: String,
-            default: 'rgba(100,100,100,0.2)',
-        },
         listItemTextFontSize: {
             type: String,
             default: '0.85rem',
@@ -546,6 +570,18 @@ export default {
             type: String,
             default: '#666',
         },
+        listItemBackgroundColor: {
+            type: String,
+            default: 'transparent',
+        },
+        listItemBackgroundColorHover: {
+            type: String,
+            default: 'rgba(200,200,200,0.2)',
+        },
+        listItemBackgroundColorActive: {
+            type: String,
+            default: 'rgba(100,100,100,0.2)',
+        },
         listItemRippleColor: {
             type: String,
             default: 'rgba(255,255,255,0.4)',
@@ -554,16 +590,6 @@ export default {
             type: String,
             default: '#fff',
         },
-
-        //  * @vue-prop {String} [btnDisplayTreeIconShow=mdiArrowRightBoldHexagonOutline] 輸入顯示tree按鈕圖標字串，預設mdiArrowRightBoldHexagonOutline
-        //  * @vue-prop {String} [btnDisplayTreeIconShow=mdiArrowLeftBoldHexagonOutline] 輸入隱藏tree按鈕圖標字串，預設mdiArrowLeftBoldHexagonOutline
-        //  * @vue-prop {Number} [btnDisplayTreeIconSize=20] 輸入顯隱tree按鈕圖標之尺寸數字，單位px，預設20
-        //  * @vue-prop {String} [btnDisplayTreeIconColor='grey darken-1'] 輸入顯隱tree按鈕圖標顏色字串，預設'grey darken-1'
-        //  * @vue-prop {String} [btnDisplayTreeIconColorHover='grey darken-2'] 輸入滑鼠移入時顯隱tree按鈕圖標顏色字串，預設'grey darken-2'
-        //  * @vue-prop {String} [btnDisplayTreeIconColorFocus='grey darken-3'] 輸入取得焦點時顯隱tree按鈕圖標顏色字串，預設'grey darken-3'
-        //  * @vue-prop {String} [btnDisplayTreeBackgroundColor='transparent'] 輸入顯隱tree按鈕背景顏色字串，預設'transparent'
-        //  * @vue-prop {String} [btnDisplayTreeBackgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時顯隱tree按鈕背景顏色字串，預設'rgb(236,236,236)'
-        //  * @vue-prop {String} [btnDisplayTreeBackgroundColorFocus='rgb(230,230,230)'] 輸入主動模式時顯隱tree按鈕背景顏色字串，預設'rgb(230,230,230)'
         btnDisplayTreeIconShow: {
             type: String,
             default: mdiArrowRightBoldHexagonOutline,
@@ -600,16 +626,6 @@ export default {
             type: String,
             default: 'rgb(230,230,230)',
         },
-
-        //  * @vue-prop {String} [pathBtnTextColor='#444'] 輸入路徑區按鈕之文字顏色字串，預設'#444'
-        //  * @vue-prop {String} [pathBtnTextColorHover='#222'] 輸入滑鼠移入時路徑區按鈕之文字顏色字串，預設'#222'
-        //  * @vue-prop {String} [pathBtnTextFontSize='0.85rem'] 輸入路徑區按鈕之文字字型大小字串，預設'0.85rem'
-        //  * @vue-prop {String} [pathBtnBackgroundColor='transparent'] 輸入路徑區按鈕之背景顏色字串，預設'transparent'
-        //  * @vue-prop {String} [pathBtnBackgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時路徑區按鈕之背景顏色字串，預設'rgb(236,236,236)'
-        //  * @vue-prop {String} [pathSepIcon=mdiChevronRight] 輸入路徑區分隔符號之圖標字串，預設mdiChevronRight
-        //  * @vue-prop {String} [pathSepIconColor='#888'] 輸入路徑區分隔符號之圖標顏色字串，預設'#888'
-        //  * @vue-prop {Number} [pathSepIconSize=18] 輸入路徑區分隔符號之圖標尺寸數字，單位px，預設18
-        //  * @vue-prop {String} [pathBackgroundColor='transparent'] 輸入路徑區背景顏色字串，預設'#fff'
         pathBtnTextColor: {
             type: String,
             default: '#444',
@@ -646,13 +662,10 @@ export default {
             type: String,
             default: '#fff',
         },
-
-        //  * @vue-prop {String} [noSelectedText='No selected folder'] 輸入尚未選擇資料夾字串，預設'No selected folder'
         noSelectedText: {
             type: String,
             default: 'No selected folder',
         },
-
     },
     data: function() {
         return {
@@ -662,36 +675,60 @@ export default {
             pathHeight: 0,
 
             showTreeTrans: true,
-            treeWidth: 200,
-
-            folderItemActive: null,
-            folderItems: [],
-            fileItemActive: null,
+            treeWidthTrans: 200,
 
+            kpPath: null,
             treeItemsFolder: null,
             treeItems: null,
-            kpPath: null,
+            treeItemActive: null,
 
             parentInfors: [],
 
+            listItems: [],
+            listItemActive: null,
+
         }
     },
     computed: {
 
         changeShowTree: function() {
             // console.log('changeShowTree')
+
             let vo = this
+
+            //save
             vo.showTreeTrans = vo.showTree
+
+            return ''
+        },
+
+        changeTreeWidth: function() {
+            // console.log('changeTreeWidth')
+
+            let vo = this
+
+            //save
+            vo.treeWidthTrans = vo.treeWidth
+
             return ''
         },
 
         changeItems: function() {
             // console.log('changeItems')
+
             let vo = this
-            let r = filepathToTree(vo.items)
+
+            //filepathToTree
+            let r = filepathToTree(vo.items, { bindRoot: vo.bindRoot })
+
+            //save
             vo.treeItemsFolder = r.treeItemsFolder
             vo.treeItems = r.treeItems
             vo.kpPath = r.kpPath
+
+            //defaultShowFirst
+            vo.defaultShowFirst()
+
             return ''
         },
 
@@ -801,6 +838,22 @@ export default {
 
         },
 
+        defaultShowFirst: function() {
+            // console.log('methods defaultShowFirst')
+
+            let vo = this
+
+            //nextTick
+            vo.$nextTick(() => {
+
+                //triggerClickTreeFolderById
+                let id = vo.bindRoot
+                vo.triggerClickTreeFolderById(id)
+
+            })
+
+        },
+
         emitShowTree: function(b) {
             // console.log('methods emitShowTree', b)
 
@@ -814,6 +867,19 @@ export default {
 
         },
 
+        emitDrawerWidth: function(w) {
+            // console.log('methods emitDrawerWidth', w)
+
+            let vo = this
+
+            //update
+            vo.treeWidthTrans = w
+
+            //emit
+            vo.$emit('update:treeWidth', w)
+
+        },
+
         getTreeFolderIconColor: function(props) {
             // console.log('methods getTreeFolderIconColor', props)
 
@@ -896,7 +962,7 @@ export default {
             // console.log('rs', rs)
 
             //save
-            vo.folderItems = rs
+            vo.listItems = rs
 
         },
 
@@ -907,11 +973,13 @@ export default {
 
             //pt
             let pt = vo.kpPath[id]
+            // console.log('id', id)
             // console.log('vo.kpPath', vo.kpPath)
-            // console.log('id', id, 'pt', pt)
+            // console.log('pt', pt)
 
             //self
             let self = get(vo.treeItems, pt)
+            // console.log('vo.treeItems', vo.treeItems)
             // console.log('self', self)
 
             //chpt
@@ -926,6 +994,7 @@ export default {
 
             //parentInfors
             let parentInfors = get(self, 'parentInfors', [])
+            // console.log('parentInfors', parentInfors)
 
             //save
             vo.parentInfors = parentInfors
@@ -954,8 +1023,8 @@ export default {
 
             //clear
             vo.$nextTick(() => {
-                vo.folderItemActive = null
-                vo.fileItemActive = null
+                // vo.treeItemActive = null //tree點擊不能清除主動項目
+                vo.listItemActive = null
             })
 
         },
@@ -986,10 +1055,10 @@ export default {
                 vo.$emit('click-folder', { from: 'list', item })
                 vo.$emit('click', { type: 'folder', from: 'list', item })
 
-                //clear, 因點擊之滑鼠放開會造成切換list內容後觸發對新項目的點擊, 故得要使用setTimeout給予更長延遲後才清除
+                //clear
                 setTimeout(() => {
-                    vo.folderItemActive = null
-                    vo.fileItemActive = null
+                    vo.treeItemActive = null //點擊list則清除tree主動項目
+                    vo.listItemActive = null //因點擊之滑鼠放開會造成切換list內容後觸發對新項目的點擊, 故得要使用setTimeout給予更長延遲後才清除
                 }, 300)
 
             }
@@ -1021,8 +1090,8 @@ export default {
 
             //clear
             vo.$nextTick(() => {
-                vo.folderItemActive = null
-                vo.fileItemActive = null
+                vo.treeItemActive = null //點擊path則清除tree主動項目
+                vo.listItemActive = null //點擊path則清除list主動項目
             })
 
         },
@@ -1043,6 +1112,75 @@ export default {
             return vo.$refs.wt.toggleItemsAll(toUnfolding)
         },
 
+        triggerClickTreeFolderById: function(id) {
+            // console.log('methods triggerClickTreeFolderById', id)
+
+            let vo = this
+
+            //props
+            let props = {
+                data: {
+                    id,
+                }
+            }
+
+            //ckTreeFolder
+            vo.ckTreeFolder(props)
+
+            //treeItemActive
+            vo.treeItemActive = { id }
+
+        },
+
+        triggerClickTreeFolderByFun: async function(cb) {
+            // console.log('methods triggerClickTreeFolderByFun', cb)
+
+            let vo = this
+
+            //check
+            if (!isfun(cb)) {
+                return
+            }
+
+            //treeItemsSpread
+            let treeItemsSpread = []
+            each(vo.kpPath, (pt) => {
+                let r = get(vo.treeItems, pt, '')
+                treeItemsSpread.push(r)
+            })
+
+            //msg
+            let msg = {
+                treeItemsFolder: vo.treeItemsFolder,
+                treeItems: vo.treeItems,
+                kpPath: vo.kpPath,
+                treeItemsSpread,
+            }
+
+            //r, 通過cb回傳操作物件, 包含欲顯隱之row與toUnfolding, 若toUnfolding不給則進行反向切換顯隱, cb亦支援使用async function使用resolve回傳操作物件
+            let r = cb(msg)
+
+            //check
+            if (ispm(r)) {
+                r = await r
+            }
+            // console.log('r', r)
+
+            //id
+            let id = get(r, 'id')
+            // console.log('id', id)
+
+            //check
+            if (!isestr(id)) {
+                console.log('invalid id', id)
+                return
+            }
+
+            //triggerClickTreeFolderById
+            vo.triggerClickTreeFolderById(id)
+
+        },
+
     },
 }
 </script>