w-component-vue 2.2.35 → 2.2.38

package/src/AppZoneWExplorer.vue

@@ -23,6 +23,24 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :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"
+                    :treeWidth.sync="WExplorer.treeWidth"
+                >
+                </w-explorer>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
@@ -63,7 +81,7 @@
                 ></demolink>
 
                 <div style="padding-bottom:10px;">
-                    <v-btn depressed small elevation="2" @click="WExplorer.bShowTree=!WExplorer.bShowTree">Show({{WExplorer.bShowTree}})</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="WExplorer.bShowTree=!WExplorer.bShowTree">Show({{WExplorer.bShowTree}})</v-btn>
                 </div>
 
                 <w-explorer
@@ -86,7 +104,7 @@
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :treeDefaultDisplayLevel="0"
+                    :treeDefaultDisplayLevel="1"
                 >
                 </w-explorer>
 
@@ -145,13 +163,14 @@
             <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>
 
@@ -161,15 +180,13 @@
             <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>
 
@@ -179,14 +196,15 @@
             <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>
 
@@ -196,13 +214,15 @@
             <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>
 
@@ -212,15 +232,15 @@
             <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>
 
@@ -230,15 +250,13 @@
             <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>
 
@@ -248,15 +266,13 @@
             <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>
 
@@ -266,13 +282,13 @@
             <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>
 
@@ -282,13 +298,15 @@
             <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>
 
@@ -298,13 +316,13 @@
             <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>
 
@@ -314,15 +332,15 @@
             <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>
 
@@ -332,13 +350,13 @@
             <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>
 
@@ -348,15 +366,14 @@
             <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>
 
@@ -366,15 +383,14 @@
             <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>
 
@@ -384,15 +400,15 @@
             <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>
 
@@ -402,13 +418,15 @@
             <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>
 
@@ -418,13 +436,15 @@
             <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>
 
@@ -434,15 +454,13 @@
             <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>
 
@@ -452,13 +470,13 @@
             <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>
 
@@ -468,14 +486,15 @@
             <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>
 
@@ -485,14 +504,13 @@
             <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>
 
@@ -502,15 +520,15 @@
             <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>
 
@@ -520,15 +538,15 @@
             <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>
 
@@ -538,15 +556,31 @@
             <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 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>
 
@@ -708,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'"
@@ -736,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)'"
@@ -755,6 +789,48 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'triggerClickTreeFolderById'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="ckTriggerClickTreeFolderById('root')">click(root)</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="ckTriggerClickTreeFolderById('root❯Applications')">click(Applications)</v-btn>
+                </div>
+
+                <w-explorer
+                    ref="we_triggerClickTreeFolderById"
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                >
+                </w-explorer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'triggerClickTreeFolderByFun'"
+                ></demolink>
+
+                <div style="padding-bottom:10px;">
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="ckTriggerClickTreeFolderByFun('Applications')">click(Applications)</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="ckTriggerClickTreeFolderByFun('Webs')">click(Webs)</v-btn>
+                </div>
+
+                <w-explorer
+                    ref="we_triggerClickTreeFolderByFun"
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                >
+                </w-explorer>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
@@ -808,7 +884,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'slot list-item & list-item-cover'"
+                    :casename="'slot list-item & list-item-cover & list-head & list-foot'"
                 ></demolink>
 
                 <w-explorer
@@ -818,30 +894,28 @@
                 >
 
                     <template v-slot:list-item="props">
-                        <div style="display:inline-block;">
-                            <div
-                                style="display:flex; align-items:center; cursor:pointer;"
-                                @click="props.funClickListItem()"
-                            >
-
-                                <div style="padding-right:5px;">
-                                    <w-icon
-                                        :icon="props.item.icon"
-                                        _color="props.item.iconColor"
-                                        :color="'#d7a72b'"
-                                        :size="props.item.iconSize"
-                                    ></w-icon>
-                                </div>
-
-                                <div style="">
-                                    {{props.item.data.text}}
-                                </div>
+                        <div
+                            style="display:flex; align-items:center; cursor:pointer;"
+                            @click="props.funClickListItem()"
+                        >
+
+                            <div style="padding-right:5px;">
+                                <w-icon
+                                    :icon="props.item.icon"
+                                    _color="props.item.iconColor"
+                                    :color="'#d7a72b'"
+                                    :size="props.item.iconSize"
+                                ></w-icon>
+                            </div>
 
+                            <div style="">
+                                {{props.item.data.text}}
                             </div>
+
                         </div>
                     </template>
 
-                    <template v-slot:list-head>
+                    <template v-slot:list-head="props">
                         <!-- 使用align-items:stretch讓分隔線div能有height:100%效果 -->
                         <div style="display:flex; align-items:stretch;">
 
@@ -893,6 +967,12 @@
                         </div>
                     </template>
 
+                    <template v-slot:list-foot="props">
+                        <div style="padding:1px 3px; background:#f8f8f8; border-top:1px solid #ddd; font-size:0.7rem; color:#888;">
+                            {{getFolderInfor(props)}}
+                        </div>
+                    </template>
+
                     <template v-slot:list-item-cover="props">
                         <div style="display:flex; align-items:center;" v-if="props.item.data._type==='file'">
 
@@ -946,6 +1026,62 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'slot list-item-sub'"
+                ></demolink>
+
+                <w-explorer
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                    @click="ckItem"
+                >
+
+                    <template v-slot:list-item-sub="props">
+                        <div :style="`transition:all 0.3s; padding:3px; background:${props.isHover?'#e2e2e2':'#fbf4f2'}; border-bottom:1px solid #ddd; font-size:0.7rem; line-height:0.7rem; display:flex; align-items:center; justify-content:flex-end;`" v-if="props.item.data._type==='file'">
+
+                            <div style="padding:0px 5px; display:flex; align-items:center;">
+                                <div style="padding-right:3px; color:#888;">
+                                    priority:
+                                </div>
+                                <div
+                                    style="width:20px; color:#2e31af; text-align:left; cursor:pointer;"
+                                    @click="ckItem('text-priority')"
+                                >
+                                    {{props.item.data.data.priority}}
+                                </div>
+                            </div>
+
+                            <div
+                                style="padding:0px 5px; color:#6fb57e; cursor:pointer;"
+                                @click="ckItem('icon-shield')"
+                            >
+                                <i class="fas fa-shield-virus"></i>
+                            </div>
+
+                            <div
+                                style="padding:0px 5px; color:#b894be; cursor:pointer;"
+                                @click="ckItem('icon-dice')"
+                            >
+                                <i class="fas fa-dice"></i>
+                            </div>
+
+                            <div
+                                style="padding:0px 5px; color:#c79f6b; cursor:pointer;"
+                                @click="ckItem('icon-wired')"
+                            >
+                                <i class="fas fa-network-wired"></i>
+                            </div>
+
+                        </div>
+                    </template>
+
+                </w-explorer>
+
+            </div>
+
+
         </div>
 
 
@@ -970,6 +1106,7 @@ export default {
         return {
             'WExplorer': {
                 bShowTree: true,
+                treeWidth: 250,
                 fps1: [
                     {
                         type: 'file',
@@ -1365,6 +1502,52 @@ export default {
             vo.$refs.ref_toggleTreeFoldersAll.toggleTreeFoldersAll(toUnfolding)
 
         },
+        ckTriggerClickTreeFolderById: function(treeItemId) {
+            console.log('ckTriggerClickTreeFolderById', treeItemId)
+
+            let vo = this
+
+            //triggerClickTreeFolderById
+            vo.$refs.we_triggerClickTreeFolderById.triggerClickTreeFolderById(treeItemId)
+
+        },
+        ckTriggerClickTreeFolderByFun: function(text) {
+            console.log('ckTriggerClickTreeFolderByFun', text)
+
+            let vo = this
+
+            //triggerClickTreeFolderByFun
+            vo.$refs.we_triggerClickTreeFolderByFun.triggerClickTreeFolderByFun((msg) => {
+                console.log('cb msg', msg)
+
+                //find and triggerClickTreeFolderById
+                for (let k = 0; k < msg.treeItemsSpread.length; k++) {
+                    let v = msg.treeItemsSpread[k]
+                    // console.log(v)
+                    if (v.text === text) {
+                        console.log('find and click', v)
+                        // vo.$refs.we_triggerClickTreeFolderByFun.triggerClickTreeFolderById(v.id)
+                        // break
+                        return v
+                    }
+                }
+
+                return null
+            })
+
+        },
+        getFolderInfor: function(props) {
+            console.log('getFolderInfor', props)
+            let k = 0
+            for (let i = 0; i < props.items.length; i++) {
+                let v = props.items[i]
+                let t = v.data._type
+                if (t === 'file') {
+                    k++
+                }
+            }
+            return `There are ${k} file(s) in this folder`
+        },
     }
 }
 </script>