w-component-vue 2.2.37 → 2.2.40

package/src/AppZoneWExplorer.vue

@@ -8,7 +8,7 @@
         <div style="padding:0px;">
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'default'"
@@ -23,23 +23,25 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'bindRoot'"
+                    :casename="'treeWidth'"
                 ></demolink>
 
+                <div style="padding-bottom:10px;font-size:0.8rem;">treeWidth: {{WExplorer.treeWidth}}</div>
+
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :bindRoot="'本機'"
+                    :treeWidth.sync="WExplorer.treeWidth"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'treeWidthMin & treeWidthMax'"
@@ -56,7 +58,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'treeBackgroundColor'"
@@ -72,7 +74,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'showTree & treeAfloat'"
@@ -93,7 +95,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'treeDefaultDisplayLevel'"
@@ -109,7 +111,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'treeDefItemHeight & listDefItemHeight'"
@@ -126,7 +128,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'treePaddingStyle'"
@@ -142,7 +144,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'treeIndent'"
@@ -158,418 +160,434 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'toggleTreeIconSize'"
+                    :casename="'treeFolderIcon & treeFolderIconSize'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :toggleTreeIconSize="18"
+                    :treeFolderIcon="'fas fa-folder-open'"
+                    :treeFolderIconSize="18"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'toggleTreeIconColor & toggleTreeIconBackgroundColor & toggleTreeIconBackgroundColorHover'"
+                    :casename="'treeItemTextFontSize'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :toggleTreeIconColor="'#f58'"
-                    :toggleTreeIconBackgroundColor="'rgba(255,200,200,0.5)'"
-                    :toggleTreeIconBackgroundColorHover="'#fcc'"
+                    :treeItemTextFontSize="'0.75rem'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'treeFolderIcon & treeFolderIconSize'"
+                    :casename="'treeItemTextColor & treeItemTextColorHover & treeItemTextColorActive'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :treeFolderIcon="'fas fa-folder-open'"
-                    :treeFolderIconSize="18"
+                    :treeItemTextColor="'#a84'"
+                    :treeItemTextColorHover="'#864'"
+                    :treeItemTextColorActive="'#862'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'treeItemTextFontSize'"
+                    :casename="'treeFolderIconColor & treeFolderIconColorHover & treeFolderIconColorActive'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :treeItemTextFontSize="'0.75rem'"
+                    :treeFolderIconColor="'#ea6'"
+                    :treeFolderIconColorHover="'#c84'"
+                    :treeFolderIconColorActive="'#a62'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'treeItemTextColor & treeItemTextColorHover & treeItemTextColorActive'"
+                    :casename="'treeItemBackgroundColor & treeItemBackgroundColorHover & treeItemBackgroundColorActive'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :treeItemTextColor="'#a84'"
-                    :treeItemTextColorHover="'#864'"
-                    :treeItemTextColorActive="'#862'"
+                    :treeItemBackgroundColor="'transparent'"
+                    :treeItemBackgroundColorHover="'#FFF3E0'"
+                    :treeItemBackgroundColorActive="'#FFE0B2'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'treeFolderIconColor & treeFolderIconColorHover & treeFolderIconColorActive'"
+                    :casename="'treeItemRippleColor'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :treeFolderIconColor="'#ea6'"
-                    :treeFolderIconColorHover="'#c84'"
-                    :treeFolderIconColorActive="'#a62'"
+                    :treeItemRippleColor="'rgba(130, 180, 255, 0.4)'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'treeItemBackgroundColor & treeItemBackgroundColorHover & treeItemBackgroundColorActive'"
+                    :casename="'bindRoot'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :treeItemBackgroundColor="'transparent'"
-                    :treeItemBackgroundColorHover="'#FFF3E0'"
-                    :treeItemBackgroundColorActive="'#FFE0B2'"
+                    :bindRoot="'本機'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'treeItemRippleColor'"
+                    :casename="'treeToggleIconSize'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :treeItemRippleColor="'rgba(130, 180, 255, 0.4)'"
+                    :treeToggleIconSize="18"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'listPaddingStyle'"
+                    :casename="'treeToggleIconColor & treeToggleIconBackgroundColor & treeToggleIconBackgroundColorHover'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :listPaddingStyle="{v:2,h:8}"
+                    :treeToggleIconColor="'#f58'"
+                    :treeToggleIconBackgroundColor="'rgba(255,200,200,0.5)'"
+                    :treeToggleIconBackgroundColorHover="'#fcc'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'listBackgroundColor'"
+                    :casename="'pathBackgroundColor'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :listBackgroundColor="'#f8f8f8'"
+                    :pathBackgroundColor="'#f8f8f8'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'listFolderIcon & listFileIcon & listIconSize'"
+                    :casename="'pathSepIcon & pathSepIconColor & pathSepIconSize'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :listFolderIcon="'fas fa-folder-open'"
-                    :listFileIcon="'fas fa-tablet-alt'"
-                    :listIconSize="18"
+                    :pathSepIcon="'fas fa-angle-double-right'"
+                    :pathSepIconColor="'#00C853'"
+                    :pathSepIconSize="14"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'listItemTextFontSize'"
+                    :casename="'pathBtnTextFontSize'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :listItemTextFontSize="'0.75rem'"
+                    :pathBtnTextFontSize="'0.75rem'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'listItemTextColor & listItemTextColorHover & listItemTextColorActive'"
+                    :casename="'pathBtnTextColor & pathBtnTextColorHover'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :listItemTextColor="'#a84'"
-                    :listItemTextColorHover="'#864'"
-                    :listItemTextColorActive="'#862'"
+                    :pathBtnTextColor="'#EF5350'"
+                    :pathBtnTextColorHover="'#EC407A'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'listItemIconColor & listItemIconColorHover & listItemIconColorActive'"
+                    :casename="'pathBtnBackgroundColor & pathBtnBackgroundColorHover'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :listItemIconColor="'#ea6'"
-                    :listItemIconColorHover="'#c84'"
-                    :listItemIconColorActive="'#a62'"
+                    :pathBtnBackgroundColor="'#EDE7F6'"
+                    :pathBtnBackgroundColorHover="'#D1C4E9'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'listItemBackgroundColor & listItemBackgroundColorHover & listItemBackgroundColorActive'"
+                    :casename="'btnDisplayTreeIconShow & btnDisplayTreeIconHide & btnDisplayTreeIconSize'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :listItemBackgroundColor="'transparent'"
-                    :listItemBackgroundColorHover="'#FFF3E0'"
-                    :listItemBackgroundColorActive="'#FFE0B2'"
+                    :btnDisplayTreeIconShow="'fas fa-arrow-circle-right'"
+                    :btnDisplayTreeIconHide="'fas fa-arrow-circle-left'"
+                    :btnDisplayTreeIconSize="22"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'listItemRippleColor'"
+                    :casename="'btnDisplayTreeIconColor & btnDisplayTreeIconColorHover & btnDisplayTreeIconColorFocus'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :listItemRippleColor="'rgba(130, 180, 255, 0.4)'"
+                    :btnDisplayTreeIconColor="'rgb(240,70,120)'"
+                    :btnDisplayTreeIconColorHover="'rgb(240,50,100)'"
+                    :btnDisplayTreeIconColorFocus="'rgb(255,70,120)'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'pathBackgroundColor'"
+                    :casename="'btnDisplayTreeBackgroundColor & btnDisplayTreeBackgroundColorHover & btnDisplayTreeBackgroundColorFocus'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :pathBackgroundColor="'#f8f8f8'"
+                    :btnDisplayTreeBackgroundColor="'rgb(241,241,241)'"
+                    :btnDisplayTreeBackgroundColorHover="'rgb(220,220,220)'"
+                    :btnDisplayTreeBackgroundColorFocus="'rgb(200,200,200)'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'pathSepIcon & pathSepIconColor & pathSepIconSize'"
+                    :casename="'listPaddingStyle'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :pathSepIcon="'fas fa-angle-double-right'"
-                    :pathSepIconColor="'#00C853'"
-                    :pathSepIconSize="14"
+                    :listPaddingStyle="{v:2,h:8}"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'pathBtnTextFontSize'"
+                    :casename="'listBackgroundColor'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :pathBtnTextFontSize="'0.75rem'"
+                    :listBackgroundColor="'#f8f8f8'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'pathBtnTextColor & pathBtnTextColorHover'"
+                    :casename="'listFolderIcon & listFileIcon & listIconSize'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :pathBtnTextColor="'#EF5350'"
-                    :pathBtnTextColorHover="'#EC407A'"
+                    :listFolderIcon="'fas fa-folder-open'"
+                    :listFileIcon="'fas fa-tablet-alt'"
+                    :listIconSize="18"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'pathBtnBackgroundColor & pathBtnBackgroundColorHover'"
+                    :casename="'listItemTextFontSize'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :pathBtnBackgroundColor="'#EDE7F6'"
-                    :pathBtnBackgroundColorHover="'#D1C4E9'"
+                    :listItemTextFontSize="'0.75rem'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'btnDisplayTreeIconShow & btnDisplayTreeIconHide & btnDisplayTreeIconSize'"
+                    :casename="'listItemTextColor & listItemTextColorHover & listItemTextColorActive'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :btnDisplayTreeIconShow="'fas fa-arrow-circle-right'"
-                    :btnDisplayTreeIconHide="'fas fa-arrow-circle-left'"
-                    :btnDisplayTreeIconSize="22"
+                    :listItemTextColor="'#a84'"
+                    :listItemTextColorHover="'#864'"
+                    :listItemTextColorActive="'#862'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'btnDisplayTreeIconColor & btnDisplayTreeIconColorHover & btnDisplayTreeIconColorFocus'"
+                    :casename="'listItemIconColor & listItemIconColorHover & listItemIconColorActive'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :btnDisplayTreeIconColor="'rgb(240,70,120)'"
-                    :btnDisplayTreeIconColorHover="'rgb(240,50,100)'"
-                    :btnDisplayTreeIconColorFocus="'rgb(255,70,120)'"
+                    :listItemIconColor="'#ea6'"
+                    :listItemIconColorHover="'#c84'"
+                    :listItemIconColorActive="'#a62'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'btnDisplayTreeBackgroundColor & btnDisplayTreeBackgroundColorHover & btnDisplayTreeBackgroundColorFocus'"
+                    :casename="'listItemBackgroundColor & listItemBackgroundColorHover & listItemBackgroundColorActive'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :btnDisplayTreeBackgroundColor="'rgb(241,241,241)'"
-                    :btnDisplayTreeBackgroundColorHover="'rgb(220,220,220)'"
-                    :btnDisplayTreeBackgroundColorFocus="'rgb(200,200,200)'"
+                    :listItemBackgroundColor="'transparent'"
+                    :listItemBackgroundColorHover="'#FFF3E0'"
+                    :listItemBackgroundColorActive="'#FFE0B2'"
                 >
                 </w-explorer>
 
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'listItemRippleColor'"
+                ></demolink>
+
+                <w-explorer
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                    :listItemRippleColor="'rgba(130, 180, 255, 0.4)'"
+                >
+                </w-explorer>
+
+            </div>
+
+
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'noSelectedText'"
@@ -585,7 +603,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'events'"
@@ -603,7 +621,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'small text'"
@@ -621,7 +639,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'treeDrawerBarSize & treeDrawerBarColor'"
@@ -638,7 +656,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'lineBetweenPathAndListWidth & lineBetweenPathAndListColor'"
@@ -655,7 +673,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'toggleTreeFoldersByFun'"
@@ -680,7 +698,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'toggleTreeFoldersAll'"
@@ -701,7 +719,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'dark mode'"
@@ -724,17 +742,17 @@
                         :treeItemBackgroundColor="'transparent'"
                         :treeItemBackgroundColorHover="'rgba(150,150,150,0.4)'"
                         :treeItemBackgroundColorActive="'rgba(150,150,150,0.2)'"
-                        :treeBackgroundColor="'transparent'"
+                        :treeBackgroundColor="'#333'"
 
-                        :toggleTreeIconColor="'rgba(255,255,255,0.6)'"
-                        :toggleTreeIconBackgroundColor="'transparent'"
-                        :toggleTreeIconBackgroundColorHover="'rgba(150,150,150,0.2)'"
+                        :treeToggleIconColor="'rgba(255,255,255,0.6)'"
+                        :treeToggleIconBackgroundColor="'transparent'"
+                        :treeToggleIconBackgroundColorHover="'rgba(150,150,150,0.2)'"
 
                         :pathBtnTextColor="'#ddd'"
                         :pathBtnTextColorHover="'#eee'"
                         :pathBtnBackgroundColor="'transparent'"
                         :pathBtnBackgroundColorHover="'rgba(150,150,150,0.2)'"
-                        :pathBackgroundColor="'transparent'"
+                        :pathBackgroundColor="'#333'"
 
                         :btnDisplayTreeIconColor="'#ccc'"
                         :btnDisplayTreeIconColorHover="'#eee'"
@@ -752,7 +770,7 @@
                         :listItemBackgroundColor="'transparent'"
                         :listItemBackgroundColorHover="'rgba(150,150,150,0.4)'"
                         :listItemBackgroundColorActive="'rgba(150,150,150,0.2)'"
-                        :listBackgroundColor="'transparent'"
+                        :listBackgroundColor="'#333'"
 
                         :treeDrawerBarSize="1"
                         :treeDrawerBarColor="'rgba(150,150,150,0.4)'"
@@ -771,7 +789,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'triggerClickTreeFolderById'"
@@ -792,7 +810,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'triggerClickTreeFolderByFun'"
@@ -813,7 +831,29 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'funSortTree'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="ckFunSortTree('funSortTree')">funSortTree(reverse)</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="ckFunSortTree('default')">default</v-btn>
+                </div>
+
+                <w-explorer
+                    ref="we_triggerClickTreeFolderByFun"
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                    :funSortTree="WExplorer.funSortTree"
+                >
+                </w-explorer>
+
+            </div>
+
+
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'slot list-item-cover'"
@@ -1008,7 +1048,7 @@
             </div>
 
 
-            <div v-if="false" class="bk">
+            <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
                     :casename="'slot list-item-sub'"
@@ -1088,6 +1128,8 @@ export default {
         return {
             'WExplorer': {
                 bShowTree: true,
+                treeWidth: 250,
+                funSortTree: null,
                 fps1: [
                     {
                         type: 'file',
@@ -1168,98 +1210,98 @@ export default {
                     },
                     {
                         type: 'file',
-                        path: '/Applications/Systems/Regulator/vers/settings-v01.st',
+                        path: '/Applications/Systems/Regulator/vers/1-settings.st',
                         size: '56.2kb',
                         tester: 'Mavis',
                         priority: 'L5',
                     },
                     {
                         type: 'file',
-                        path: '/Applications/Systems/Regulator/vers/settings-v02.st',
+                        path: '/Applications/Systems/Regulator/vers/2-settings.st',
                         size: '87.2kb',
                         tester: 'Geraint',
                         priority: 'L5',
                     },
                     {
                         type: 'file',
-                        path: '/Applications/Systems/Regulator/vers/settings-v03.st',
+                        path: '/Applications/Systems/Regulator/vers/3-settings.st',
                         size: '224.2kb',
                         tester: 'Penelope',
                         priority: 'L5',
                     },
                     {
                         type: 'file',
-                        path: '/Applications/Systems/Regulator/vers/settings-v04.st',
+                        path: '/Applications/Systems/Regulator/vers/10-settings.st',
                         size: '72.7kb',
                         tester: 'Heman',
                         priority: 'L5',
                     },
                     {
                         type: 'file',
-                        path: '/Applications/Systems/Regulator/vers/settings-v05.st',
+                        path: '/Applications/Systems/Regulator/vers/111-settings.st',
                         size: '91.2kb',
                         tester: 'Tessa',
                         priority: 'L5',
                     },
                     {
                         type: 'file',
-                        path: '/Applications//Systems/device01.iso',
+                        path: '/Applications//Systems/device1.iso',
                         size: '1.2gb',
                         tester: 'Una',
                         priority: 'L2',
                     },
                     {
                         type: 'file',
-                        path: '/Applications//Systems/device02.iso',
+                        path: '/Applications//Systems/device2.iso',
                         size: '1.3gb',
                         tester: 'Jasper',
                         priority: 'L2',
                     },
                     {
                         type: 'file',
-                        path: '/Applications//Systems/device03.iso',
+                        path: '/Applications//Systems/device3.iso',
                         size: '1.1gb',
                         tester: 'Violet',
                         priority: 'L2',
                     },
                     {
                         type: 'file',
-                        path: '/Applications//Systems/device04.iso',
+                        path: '/Applications//Systems/device4.iso',
                         size: '1.7gb',
                         tester: 'Perter',
                         priority: 'L2',
                     },
                     {
                         type: 'file',
-                        path: '/Applications//Systems/device05.iso',
+                        path: '/Applications//Systems/device5.iso',
                         size: '2.0gb',
                         tester: 'Winifred',
                         priority: 'L2',
                     },
                     {
                         type: 'file',
-                        path: '/Applications//Systems/device06.iso',
+                        path: '/Applications//Systems/device6.iso',
                         size: '1.7gb',
                         tester: 'Lance',
                         priority: 'L2',
                     },
                     {
                         type: 'file',
-                        path: '/Applications//Systems/device07.iso',
+                        path: '/Applications//Systems/device7.iso',
                         size: '2.1gb',
                         tester: 'Marvin',
                         priority: 'L2',
                     },
                     {
                         type: 'file',
-                        path: '/Applications//Systems/device08.iso',
+                        path: '/Applications//Systems/device8.iso',
                         size: '1.5gb',
                         tester: 'Nat',
                         priority: 'L2',
                     },
                     {
                         type: 'file',
-                        path: '/Applications//Systems/device09.iso',
+                        path: '/Applications//Systems/device9.iso',
                         size: '1.8gb',
                         tester: 'Nahum',
                         priority: 'L2',
@@ -1516,6 +1558,27 @@ export default {
                 return null
             })
 
+        },
+        ckFunSortTree: function(m) {
+            console.log('ckFunSortTree', m)
+
+            let vo = this
+
+            //fun
+            let fun = (rs) => {
+                console.log('rs', rs)
+                rs.reverse()
+                return rs
+            }
+
+            //funSortTree
+            if (m === 'default') {
+                vo.WExplorer.funSortTree = null
+            }
+            else {
+                vo.WExplorer.funSortTree = fun
+            }
+
         },
         getFolderInfor: function(props) {
             console.log('getFolderInfor', props)