w-component-vue 2.2.42 → 2.2.45

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
@@ -195,6 +220,8 @@
                             </template>
 
                             <template v-slot:item="props">
+
+                                <!-- 使用line-height使多行文字時依然能置頂對齊 -->
                                 <div :style="`position:relative; min-height:${listDefItemHeight}px; line-height:${listDefItemHeight}px;`">
 
                                     <!-- 由slot外側提供預設字型設定, 而字型顏色設定由更外側WListVertical組件提供 -->
@@ -211,6 +238,7 @@
                                             :funClickListItem="()=>{ckListItem(props)}"
                                         >
 
+                                            <!-- 僅使用display:flex使多行文字置頂對齊 -->
                                             <div :style="`display:flex;`">
 
                                                 <div
@@ -224,6 +252,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 +267,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"
@@ -255,6 +299,7 @@
                                     </slot>
 
                                 </div>
+
                             </template>
 
                             <template v-slot:footer>
@@ -288,6 +333,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 +348,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 +403,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 +445,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        defaultShowTreeFirst: {
+            type: Boolean,
+            default: true,
+        },
         treeWidth: {
             type: Number,
             default: 200,
@@ -626,11 +677,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 +809,10 @@ export default {
             vo.treeItems = r.treeItems
             vo.kpPath = r.kpPath
 
-            //defaultShowFirst
-            vo.defaultShowFirst()
+            //showTreeFirstFolder
+            if (vo.defaultShowTreeFirst) {
+                vo.showTreeFirstFolder()
+            }
 
             return ''
         },
@@ -835,14 +888,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 +933,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)
 
         },
 

package/src/components/WGroupBaggage.vue

@@ -0,0 +1,363 @@
+<template>
+    <div
+        :style="``"
+    >
+
+        <div
+            :style="`position:relative; _background:#dab78b;`"
+            :key="'kt-'+kt"
+            v-for="(t,kt) in items"
+        >
+
+            <div
+                :style="`display:flex; align-items:stretch;`"
+            >
+
+                <table :style="`border-collapse:collapse;`">
+                    <tbody>
+                        <tr :style="`height:${connLineZoneHeightMin/2}px;`">
+                            <td :style="`${getStyleWidth(connLineZoneWidth/2)} border-right:${connLineWidth}px solid ${effConnLineColor};`"></td>
+                            <td :style="`${getStyleWidth(connLineZoneWidth/2)} border-bottom:${connLineWidth}px solid ${effConnLineColor};`"></td>
+                        </tr>
+                        <tr :style="`_height:calc( 100% - ${connLineZoneHeightMin/2}px );`">
+                            <td :style="`${getStyleWidth(connLineZoneWidth/2)} border-right:${connLineWidth}px solid ${kt===(items.length-1)?'transparent':effConnLineColor};`"></td>
+                            <td :style="`${getStyleWidth(connLineZoneWidth/2)}`"></td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <WPanelSlotHover :style="`padding-top:${connLineZoneHeightMin/4}px;`">
+                    <template v-slot="{isHover}">
+                        <div :style="`transition:all 0.3s; ${useContentPaddingStyle} ${usetContentTextFontSize} color:${isHover?effContentTextColorHover:effContentTextColor}; border-radius:${contentBorderRadius}px; background:${isHover?effContentBackgroundColorHover:effContentBackgroundColor}; border:${contentBorderWidth}px solid ${isHover?effContentBorderColorHover:effContentBorderColor};`">
+
+                            <slot
+                                name="text"
+                                :items="t"
+                                :isHover="isHover"
+                            >
+                                {{getText(t)}}
+                            </slot>
+
+                        </div>
+                    </template>
+                </WPanelSlotHover>
+
+            </div>
+
+            <div :style="`position:absolute; left:${connLineZoneWidth/2}px; top:${connLineZoneHeightMin/2}px;`">
+                <WPanelSlotHover :style="`transform:translate(-50%, -50%);`">
+                    <template v-slot="{isHover}">
+                        <div :style="`transition:all 0.3s; ${useTagPaddingStyle} ${usetTagTextFontSize} color:${isHover?effTagTextColorHover:effTagTextColor}; border-radius:${tagBorderRadius}px; background:${isHover?effTagBackgroundColorHover:effTagBackgroundColor}; border:${tagBorderWidth}px solid ${isHover?effTagBorderColorHover:effTagBorderColor};`">
+
+                            <slot
+                                name="text"
+                                :items="t"
+                                :isHover="isHover"
+                            >
+                                {{getBag(t)}}
+                            </slot>
+
+                        </div>
+                    </template>
+                </WPanelSlotHover>
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import get from 'lodash/get'
+import each from 'lodash/each'
+import cloneDeep from 'lodash/cloneDeep'
+import trim from 'lodash/trim'
+import isNumber from 'lodash/isNumber'
+import pullAt from 'lodash/pullAt'
+import filter from 'lodash/filter'
+import isEqual from 'lodash/isEqual'
+import size from 'lodash/size'
+import genID from 'wsemi/src/genID.mjs'
+import o2j from 'wsemi/src/o2j.mjs'
+import isobj from 'wsemi/src/isobj.mjs'
+import genPm from 'wsemi/src/genPm.mjs'
+import replace from 'wsemi/src/replace.mjs'
+import WButtonChip from './WButtonChip.vue'
+import WTextSuggest from './WTextSuggest.vue'
+import parseSpace from '../js/parseSpace.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
+import WPanelSlotHover from './WPanelSlotHover.vue'
+
+
+/**
+ * @vue-prop {Array} [items=[]] 輸入項目的字串陣列或物件陣列，預設[]
+ *
+ */
+export default {
+    components: {
+        // WButtonChip,
+        // WTextSuggest,
+        WPanelSlotHover,
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => [],
+        },
+        keyBag: {
+            type: String,
+            default: 'tag',
+        },
+        keyText: {
+            type: String,
+            default: 'text',
+        },
+        connLineZoneWidth: {
+            type: Number,
+            default: 100,
+        },
+        connLineZoneHeightMin: {
+            type: Number,
+            default: 48,
+        },
+        connLineWidth: {
+            type: Number,
+            default: 1,
+        },
+        connLineColor: {
+            type: String,
+            default: '#ccc',
+        },
+        tagTextFontSize: {
+            type: String,
+            default: '0.7rem',
+        },
+        tagTextColor: {
+            type: String,
+            default: '#444',
+        },
+        tagTextColorHover: {
+            type: String,
+            default: '#222',
+        },
+        tagBorderRadius: {
+            type: Number,
+            default: 4,
+        },
+        tagBorderWidth: {
+            type: Number,
+            default: 1,
+        },
+        tagBorderColor: {
+            type: String,
+            default: '#ccc',
+        },
+        tagBorderColorHover: {
+            type: String,
+            default: '#dab78b',
+        },
+        tagBackgroundColor: {
+            type: String,
+            default: '#f3e7d8',
+        },
+        tagBackgroundColorHover: {
+            type: String,
+            default: '#f0e2d0',
+        },
+        tagPaddingStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    v: 1,
+                    h: 5,
+                }
+            },
+        },
+        contentTextFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
+        contentTextColor: {
+            type: String,
+            default: '#444',
+        },
+        contentTextColorHover: {
+            type: String,
+            default: '#222',
+        },
+        contentBorderRadius: {
+            type: Number,
+            default: 4,
+        },
+        contentBorderWidth: {
+            type: Number,
+            default: 1,
+        },
+        contentBorderColor: {
+            type: String,
+            default: '#ddd',
+        },
+        contentBorderColorHover: {
+            type: String,
+            default: '#cccccc',
+        },
+        contentBackgroundColor: {
+            type: String,
+            default: '#fff',
+        },
+        contentBackgroundColorHover: {
+            type: String,
+            default: '#f2f2f2',
+        },
+        contentPaddingStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    v: 1,
+                    h: 5,
+                }
+            },
+        },
+    },
+    data: function() {
+        return {
+
+        }
+    },
+    computed: {
+
+        effConnLineColor: function() {
+            let vo = this
+            return color2hex(vo.connLineColor)
+        },
+
+        effTagTextColor: function() {
+            let vo = this
+            return color2hex(vo.tagTextColor)
+        },
+
+        effTagTextColorHover: function() {
+            let vo = this
+            return color2hex(vo.tagTextColorHover)
+        },
+
+        effTagBorderColor: function() {
+            let vo = this
+            return color2hex(vo.tagBorderColor)
+        },
+
+        effTagBorderColorHover: function() {
+            let vo = this
+            return color2hex(vo.tagBorderColorHover)
+        },
+
+        effTagBackgroundColor: function() {
+            let vo = this
+            return color2hex(vo.tagBackgroundColor)
+        },
+
+        effTagBackgroundColorHover: function() {
+            let vo = this
+            return color2hex(vo.tagBackgroundColorHover)
+        },
+
+        useTagPaddingStyle: function() {
+            //console.log('computed useTagPaddingStyle')
+
+            let vo = this
+
+            //parseSpace
+            let cs = parseSpace(vo.tagPaddingStyle)
+
+            //padding
+            let padding = `padding:${cs};`
+
+            return padding
+        },
+
+        usetTagTextFontSize: function() {
+            let vo = this
+            let s = vo.tagTextFontSize
+            s = replace(s, ';', '')
+            return `font-size:${s};`
+        },
+
+        effContentTextColor: function() {
+            let vo = this
+            return color2hex(vo.contentTextColor)
+        },
+
+        effContentTextColorHover: function() {
+            let vo = this
+            return color2hex(vo.contentTextColorHover)
+        },
+
+        effContentBorderColor: function() {
+            let vo = this
+            return color2hex(vo.contentBorderColor)
+        },
+
+        effContentBorderColorHover: function() {
+            let vo = this
+            return color2hex(vo.contentBorderColorHover)
+        },
+
+        effContentBackgroundColor: function() {
+            let vo = this
+            return color2hex(vo.contentBackgroundColor)
+        },
+
+        effContentBackgroundColorHover: function() {
+            let vo = this
+            return color2hex(vo.contentBackgroundColorHover)
+        },
+
+        useContentPaddingStyle: function() {
+            //console.log('computed useContentPaddingStyle')
+
+            let vo = this
+
+            //parseSpace
+            let cs = parseSpace(vo.contentPaddingStyle)
+
+            //padding
+            let padding = `padding:${cs};`
+
+            return padding
+        },
+
+        usetContentTextFontSize: function() {
+            let vo = this
+            let s = vo.contentTextFontSize
+            s = replace(s, ';', '')
+            return `font-size:${s};`
+        },
+
+    },
+    methods: {
+
+        getStyleWidth: function(w) {
+            if (!isNumber(w)) {
+                return ''
+            }
+            return `width:${w}px; min-width:${w}px; max-width:${w}px;`
+        },
+
+        getBag: function(item) {
+            let vo = this
+            let r = get(item, vo.keyBag, '')
+            return r
+        },
+
+        getText: function(item) {
+            let vo = this
+            let r = get(item, vo.keyText, '')
+            return r
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WPanelSlotHover.vue

@@ -0,0 +1,36 @@
+<template>
+    <div
+        @mouseenter="mouseEnter=true"
+        @mouseleave="mouseEnter=false"
+    >
+
+        <slot
+            :isHover="mouseEnter"
+        >
+        </slot>
+
+    </div>
+</template>
+
+<script>
+
+
+export default {
+    components: {
+    },
+    props: {
+    },
+    data: function() {
+        return {
+            mouseEnter: false,
+        }
+    },
+    computed: {
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped>
+</style>