w-component-vue 2.2.26 → 2.2.29

package/src/components/WTree.vue

@@ -53,10 +53,13 @@
 
                         <div :style="`display:table-cell; vertical-align:top; padding-right:${getLevel(props.row)*useIndent}px;`"></div>
 
-                        <div :style="`display:table-cell; vertical-align:top; padding-right:${separation}px;`"></div>
+                        <!-- 顯隱圖標左側因右邊為文字或核選圖標導致間距呈現相對較窄, 故*2 -->
+                        <div :style="`display:table-cell; vertical-align:top; padding-right:${2*separation}px;`"></div>
 
-                        <div :style="`display:table-cell; vertical-align:top; padding:0px ${separation}px;`">
-                            <div :style="`display:flex; align-items:${useIconVerticalAlign}; justify-content:center; height:${defItemHeight}px; overflow:hidden;`">
+                        <div :style="`display:table-cell; vertical-align:top; padding-right:${separation}px;`">
+
+                            <!-- 若有顯隱圖標才會有min-height效果 -->
+                            <div :style="`display:flex; align-items:${useIconVerticalAlign}; justify-content:center; min-height:${defItemHeight}px;`" v-if="hasChildren(props.index)">
                                 <WTreeIconToggle
                                     :dir="`${props.row.unfolding?'bottom':'right'}`"
                                     :iconSize="iconSize"
@@ -64,17 +67,20 @@
                                     :iconBackgroundColor="iconToggleBackgroundColor"
                                     :iconBackgroundColorHover="iconToggleBackgroundColorHover"
                                     @click.stop="toggleItems(props.row)"
-                                    v-if="hasChildren(props.index)"
                                 ></WTreeIconToggle>
-                                <div :style="`padding-right:${iconSize}px;`" v-else></div>
                             </div>
+
+                            <!-- 若無顯隱圖標至少要撐開寬度 -->
+                            <div :style="`padding-right:${iconSize}px;`" v-else></div>
+
                         </div>
 
-                        <!-- 因顯隱圖標比較小而勾選圖標比較大, 讓separation全灌到padding-right處使排版比較均勻 -->
-                        <div :style="`display:table-cell; vertical-align:top; padding:0px ${2*separation}px 0px 0px;`" v-if="selectable">
-                            <div :style="`display:flex; align-items:${useIconVerticalAlign}; justify-content:center; width:${defIconSize*(iconSize/defIconSize)}px; height:${defItemHeight}px; overflow:hidden;`">
+                        <!-- 因顯隱圖標較小而右側間距看起來較寬, 故核選圖標右側間距*3 -->
+                        <div :style="`display:table-cell; vertical-align:top; padding-right:${3*separation}px;`" v-if="selectable">
+                            <div :style="`display:flex; align-items:${useIconVerticalAlign}; justify-content:center; min-height:${defItemHeight}px;`">
                                 <WTreeIconCheckbox
                                     :mode="props.row.checked"
+                                    :iconSize="iconSize"
                                     :editable="getEditable(props.row.item)"
                                     :uncheckedColor="iconUncheckedColor"
                                     :uncheckedDisabledColor="iconUncheckedDisabledColor"
@@ -207,9 +213,11 @@ import genID from 'wsemi/src/genID.mjs'
 import sep from 'wsemi/src/sep.mjs'
 import isarr from 'wsemi/src/isarr.mjs'
 import isobj from 'wsemi/src/isobj.mjs'
+import iseobj from 'wsemi/src/iseobj.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
 import isestr from 'wsemi/src/isestr.mjs'
 import isnum from 'wsemi/src/isnum.mjs'
+import isbol from 'wsemi/src/isbol.mjs'
 import ispm from 'wsemi/src/ispm.mjs'
 import cint from 'wsemi/src/cint.mjs'
 import cdbl from 'wsemi/src/cdbl.mjs'
@@ -242,7 +250,7 @@ let gm = globalMemory()
  * @vue-prop {Number} [defaultDisplayLevel=null] 輸入初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
  * @vue-prop {Boolean} [activable=false] 輸入是否使用主動模式布林值，預設false
  * @vue-prop {Function} [funActive=null] 輸入主動模式時處理點擊項目函數，給予並回傳true時代表點擊項目給予主動模式，回傳false代表點擊項目不給予主動模式，可應用於資料夾與有效項目之區隔，預設null
- * @vue-prop {Object} [activeItem={}] 輸入主動模式時外部給予主動模式項目物件，物件內至少要給予keyPrimary鍵值方能進行識別，預設{}
+ * @vue-prop {Object} [itemActive={}] 輸入主動模式時外部給予主動模式項目物件，物件內至少要給予keyPrimary鍵值方能進行識別，預設{}
  * @vue-prop {String} [itemTextColor='#444'] 輸入文字顏色字串，預設'#444'
  * @vue-prop {String} [itemTextColorHover='#222'] 輸入滑鼠移入時文字顏色字串，預設'#222'
  * @vue-prop {String} [itemTextColorActive='#d72'] 輸入主動模式時文字顏色字串，預設'#d72'
@@ -273,7 +281,8 @@ let gm = globalMemory()
  * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
  * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
  * @vue-prop {String} [searchingText='Searching...'] 輸入搜索中字串，預設'Searching...'
- * @vue-prop {Number} [defItemHeight=34] 輸入按需顯示時各項目預設高度值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設34
+ * @vue-prop {Number} [defItemHeight=34] 輸入按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設34
+ * @vue-prop {Number} [=null] 輸入按需顯示時各項目圖標預設最小高度(min-height)值，通常不給由defItemHeight決定，若有給則取與defItemHeight之較大者，單位為px，預設null
  * @vue-prop {Number} [itemsPreload=5] 輸入上下方預先載入元素數量，預設5
  * @vue-prop {Boolean} [draggable=false] 輸入是否為可拖曳編輯模式布林值，若draggable設定true，此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟draggable僅適用小規模數據。draggable預設false
  * @vue-prop {String} [dgTextDisabled='Can not drop here'] 輸入禁止拖曳文字字串，預設'Can not drop here'
@@ -343,7 +352,7 @@ export default {
             type: Function,
             default: null
         },
-        activeItem: {
+        itemActive: {
             type: Object,
             default: () => {},
         },
@@ -704,8 +713,8 @@ export default {
             let vo = this
 
             //pk
-            let pk = get(vo.activeItem, vo.keyPrimary)
-            // console.log('clickItem pk', pk)
+            let pk = get(vo.itemActive, vo.keyPrimary)
+            // console.log('pk', pk)
 
             //save pkActive
             if (vo.isKey(pk)) {
@@ -1205,12 +1214,12 @@ export default {
                     //save pkActive
                     vo.pkActive = pk
 
-                    //activeItem
-                    let activeItem = { [vo.keyPrimary]: pk }
-                    //  console.log('clickItem activeItem', activeItem)
+                    //itemActive
+                    let itemActive = { [vo.keyPrimary]: pk }
+                    //  console.log('clickItem itemActive', itemActive)
 
                     //emit
-                    vo.$emit('update:activeItem', activeItem)
+                    vo.$emit('update:itemActive', itemActive)
 
                     break
                 }
@@ -1631,8 +1640,8 @@ export default {
 
         },
 
-        toggleItems: function(item) {
-            //console.log('methods toggleItems', item)
+        toggleItems: function(item, toUnfolding) {
+            // console.log('methods toggleItems', item, toUnfolding)
 
             let vo = this
 
@@ -1655,7 +1664,32 @@ export default {
                         //console.log('items', cloneDeep(items))
 
                         //ind
-                        let ind = item.index
+                        let ind = get(item, 'index', null)
+                        if (ind === null) {
+                            console.log('invalid ind')
+                            return
+                        }
+
+                        //wdl rows, 取得wdl內展示數據
+                        let rows = vo.$refs.wdl.getRows()
+                        // console.log('wdl rows', rows)
+
+                        //displayShow, 提取節點之直接顯示狀態
+                        let displayShow = get(rows, `${ind}.displayShow`)
+                        // console.log('displayShow', displayShow)
+
+                        //filterShow, 提取節點之過濾後顯示狀態
+                        let filterShow = get(rows, `${ind}.filterShow`)
+                        // console.log('filterShow', filterShow)
+
+                        //show, 節點是否為顯示狀態
+                        let show = !(!displayShow || !filterShow)
+                        // console.log('show', show)
+
+                        //check show, 若非顯示代表由上層隱藏或被過濾而隱藏, 不提供切換功能
+                        if (!show) {
+                            return
+                        }
 
                         //unfolding
                         let unfolding = get(items, `${ind}.row.unfolding`, null)
@@ -1664,6 +1698,14 @@ export default {
                             return
                         }
 
+                        //toUnfolding
+                        if (isbol(toUnfolding)) { //若有指定要展開或隱藏
+                            // console.log('toUnfolding', toUnfolding, '(!unfolding)', (!unfolding))
+                            if (toUnfolding === unfolding) { //若節點當前已為指定要展開或隱藏, 則不用處理
+                                return
+                            }
+                        }
+
                         //本身節點變更unfolding
                         unfolding = !unfolding
 
@@ -1686,6 +1728,51 @@ export default {
 
         },
 
+        toggleItemsByFun: async function(cb) {
+            // console.log('methods toggleItemsByFun', cb)
+
+            let vo = this
+
+            //check
+            if (!isfun(cb)) {
+                return
+            }
+
+            //getRows, 取得展開後數據
+            let rows = vo.getRows()
+            // console.log('rows', rows)
+
+            //r, 通過cb回傳操作物件, 包含欲顯隱之row與toUnfolding, 若toUnfolding不給則進行反向切換顯隱, cb亦支援使用async function使用resolve回傳操作物件
+            let r = cb(rows)
+
+            //check
+            if (ispm(r)) {
+                r = await r
+            }
+
+            //row
+            let row = get(r, 'row')
+
+            //check
+            if (!iseobj(row)) {
+                console.log('invalid row', row)
+                return
+            }
+
+            //toUnfolding
+            let toUnfolding = get(r, 'toUnfolding')
+
+            //check
+            if (!isbol(toUnfolding)) {
+                // console.log('invalid toUnfolding', toUnfolding, 'default to null')
+                toUnfolding = null
+            }
+
+            //toggleItems, 切換或指定顯隱狀態
+            vo.toggleItems(row, toUnfolding)
+
+        },
+
         getAllParentIndex: function(items, ind) {
             //console.log('methods getAllParentIndex', items, ind)
             //取得全部父層節點指標與path