w-component-vue 2.2.41 → 2.2.44

package/src/AppZoneWExplorer.vue

@@ -120,8 +120,8 @@
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
-                    :treeDefItemHeight="24"
-                    :listDefItemHeight="24"
+                    :treeDefItemHeight="22"
+                    :listDefItemHeight="22"
                 >
                 </w-explorer>
 
@@ -442,9 +442,9 @@
                 <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)'"
+                    :btnDisplayTreeBackgroundColor="'rgba(241,241,255,0.7)'"
+                    :btnDisplayTreeBackgroundColorHover="'rgb(220,220,255)'"
+                    :btnDisplayTreeBackgroundColorFocus="'rgb(200,200,255)'"
                 >
                 </w-explorer>
 
@@ -590,12 +590,29 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
-                    :casename="'noSelectedText'"
+                    :casename="'defaultShowTreeFirst'"
                 ></demolink>
 
                 <w-explorer
                     style="width:600px; height:250px;"
                     :items="WExplorer.fps1"
+                    :defaultShowTreeFirst="false"
+                >
+                </w-explorer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'defaultShowTreeFirst & noSelectedText'"
+                ></demolink>
+
+                <w-explorer
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                    :defaultShowTreeFirst="false"
                     :noSelectedText="'尚未選擇資料夾'"
                 >
                 </w-explorer>
@@ -673,54 +690,6 @@
             </div>
 
 
-            <div class="bk">
-                <demolink
-                    :kbname="'w-explorer'"
-                    :casename="'toggleTreeFoldersByFun'"
-                ></demolink>
-
-                <div>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(0, true)">show(rows[0])</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(0, false)">hide(rows[0])</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(1, true)">show(rows[1])</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(1, false)">hide(rows[1])</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(2, true)">show(rows[2])</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(2, false)">hide(rows[2])</v-btn>
-                </div>
-
-                <w-explorer
-                    ref="ref_toggleTreeFoldersByFun"
-                    style="width:600px; height:250px;"
-                    :items="WExplorer.fps1"
-                >
-                </w-explorer>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-explorer'"
-                    :casename="'toggleTreeFoldersAll'"
-                ></demolink>
-
-                <div>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(true)">display all</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(false)">hide all</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(null,1)">display to level1</v-btn>
-                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(null,2)">display to level2</v-btn>
-                </div>
-
-                <w-explorer
-                    ref="ref_toggleTreeFoldersAll"
-                    style="width:600px; height:250px;"
-                    :items="WExplorer.fps1"
-                >
-                </w-explorer>
-
-            </div>
-
-
             <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
@@ -791,6 +760,54 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'toggleTreeFoldersByFun'"
+                ></demolink>
+
+                <div>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(0, true)">show(rows[0])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(0, false)">hide(rows[0])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(1, true)">show(rows[1])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(1, false)">hide(rows[1])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(2, true)">show(rows[2])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersByFun(2, false)">hide(rows[2])</v-btn>
+                </div>
+
+                <w-explorer
+                    ref="ref_toggleTreeFoldersByFun"
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                >
+                </w-explorer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'toggleTreeFoldersAll'"
+                ></demolink>
+
+                <div>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(true)">display all</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(false)">hide all</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(null,1)">display to level1</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleTreeFoldersAll(null,2)">display to level2</v-btn>
+                </div>
+
+                <w-explorer
+                    ref="ref_toggleTreeFoldersAll"
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                >
+                </w-explorer>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-explorer'"
@@ -867,7 +884,10 @@
                 >
 
                     <template v-slot:list-item-cover="props">
-                        <div style="display:flex; align-items:center;" v-if="props.item.data._type==='file'">
+                        <div
+                            style="display:flex; align-items:center;"
+                            v-if="props.item.data._type==='file'"
+                        >
 
                             <div
                                 style="padding:0px 5px; color:#6fb57e; cursor:pointer;"
@@ -997,7 +1017,10 @@
                     </template>
 
                     <template v-slot:list-item-cover="props">
-                        <div style="display:flex; align-items:center;" v-if="props.item.data._type==='file'">
+                        <div
+                            style="display:flex; align-items:center;"
+                            v-if="props.item.data._type==='file'"
+                        >
 
                             <div style="padding:0px 7px;">
                                 <div
@@ -1062,7 +1085,10 @@
                 >
 
                     <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="`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;">
@@ -1105,6 +1131,84 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'slot list-item-text-left'"
+                ></demolink>
+
+                <w-explorer
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                    @click="ckItem"
+                >
+
+                    <template v-slot:list-item-text-left="props">
+                        <div
+                            :style="`display:flex; align-items:center;`"
+                            v-if="props.item.data._type==='file'"
+                        >
+
+                            <div
+                                :style="`transition:all 0.3s; padding:3px 4px; border-radius:0px; font-size:0.7rem; line-height:0.7rem; color:#fff; cursor:pointer; background:${props.isHover?'#62a':'#84a'};`"
+                            >
+                                <div
+                                    style=""
+                                    @click="ckItem('text-priority')"
+                                >
+                                    {{props.item.data.data.priority}}
+                                </div>
+                            </div>
+
+                            <div style="padding-right:5px;"></div>
+
+                        </div>
+                    </template>
+
+                </w-explorer>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-explorer'"
+                    :casename="'slot list-item-text-right'"
+                ></demolink>
+
+                <w-explorer
+                    style="width:600px; height:250px;"
+                    :items="WExplorer.fps1"
+                    @click="ckItem"
+                >
+
+                    <template v-slot:list-item-text-right="props">
+                        <div
+                            :style="`display:flex; align-items:center;`"
+                            v-if="props.item.data._type==='file'"
+                        >
+
+                            <div style="padding-right:5px;"></div>
+
+                            <div
+                                :style="`transition:all 0.3s; padding:3px 5px; border-radius:4px; font-size:0.7rem; line-height:0.7rem; color:#fff; cursor:pointer; background:${props.isHover?'#f26':'#f48'};`"
+                            >
+                                <div
+                                    style=""
+                                    @click="ckItem('text-tester')"
+                                >
+                                    {{props.item.data.data.tester}}
+                                </div>
+                            </div>
+
+                        </div>
+                    </template>
+
+                </w-explorer>
+
+            </div>
+
+
         </div>
 
 
@@ -1481,7 +1585,14 @@ export default {
                         size: '676.7mb',
                         tester: 'Hector',
                         priority: 'L3',
-                    }
+                    },
+                    {
+                        type: 'folder',
+                        path: '/Videos/Empty',
+                        size: '',
+                        tester: '',
+                        priority: '',
+                    },
                 ],
             },
             'actions': [
@@ -1583,15 +1694,19 @@ export default {
         },
         getFolderInfor: function(props) {
             console.log('getFolderInfor', props)
-            let k = 0
+            let kfd = 0
+            let kfl = 0
             for (let i = 0; i < props.items.length; i++) {
                 let v = props.items[i]
                 let t = v.data._type
-                if (t === 'file') {
-                    k++
+                if (t === 'folder') {
+                    kfd++
+                }
+                else if (t === 'file') {
+                    kfl++
                 }
             }
-            return `There are ${k} file(s) in this folder`
+            return `There are ${kfd} folder(s) and ${kfl} file(s) in this folder`
         },
     }
 }

package/src/components/WExplorer.vue

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