w-component-vue 2.2.32 → 2.2.35

package/src/components/WPanelDivideVertical.vue

@@ -2,7 +2,7 @@
     <div
         :changeParam="changeParam"
         v-domresize
-        @domresize="updatePanelSize"
+        @domresize="resizePanel"
     >
 
         <div
@@ -41,6 +41,7 @@
 </template>
 
 <script>
+import isNumber from 'lodash/isNumber'
 import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
 import domResize from '../js/domResize.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
@@ -48,8 +49,12 @@ import color2hex from '../js/vuetifyColor.mjs'
 
 /**
  * @vue-prop {Number} [ratio=0.5] 輸入分隔條位置比例數字，範圍為0~1，預設0.5
- * @vue-prop {Number} [min=0] 輸入分隔條位置最小比例數字，範圍為0~1，需小於max，若min大於max則由min主導，預設0
- * @vue-prop {Number} [max=1] 輸入分隔條位置最大比例數字，範圍為0~1，需大於min，若min大於max則由min主導，預設1
+ * @vue-prop {Number} [ratioMin=0] 輸入分隔條位置最小比例數字，範圍為0~1，需小於ratioMax，若ratioMin大於ratioMax則由ratioMin主導，預設0
+ * @vue-prop {Number} [ratioMax=1] 輸入分隔條位置最大比例數字，範圍為0~1，需大於ratioMin，若ratioMin大於ratioMax則由ratioMin主導，預設1
+ * @vue-prop {Number} [topHeightMin=null] 輸入左側區最小寬度數字，處理優先權大於ratioMin與ratioMax，預設null
+ * @vue-prop {Number} [topHeightMax=null] 輸入左側區最大寬度數字，處理優先權大於ratioMin與ratioMax，預設null
+ * @vue-prop {Number} [bottomHeightMin=null] 輸入右側區最小寬度數字，處理優先權大於ratioMin、ratioMax、topHeightMin與topHeightMax，預設null
+ * @vue-prop {Number} [bottomHeightMax=null] 輸入右側區最大寬度數字，處理優先權大於ratioMin、ratioMax、topHeightMin與topHeightMax，預設null
  * @vue-prop {String} [barColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
  * @vue-prop {String} [barBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
  * @vue-prop {Number} [barSize=2] 輸入分隔條尺寸數字，為分隔條高度，單位為px，預設2
@@ -64,14 +69,30 @@ export default {
             type: Number,
             default: 0.5, //0~1
         },
-        min: {
+        ratioMin: {
             type: Number,
             default: 0,
         },
-        max: {
+        ratioMax: {
             type: Number,
             default: 1,
         },
+        topHeightMin: {
+            type: Number,
+            default: null,
+        },
+        topHeightMax: {
+            type: Number,
+            default: null,
+        },
+        bottomHeightMin: {
+            type: Number,
+            default: null,
+        },
+        bottomHeightMax: {
+            type: Number,
+            default: null,
+        },
         barColor: {
             type: String,
             default: '#ddd',
@@ -131,9 +152,8 @@ export default {
             //ratio
             let r = vo.ratio
 
-            //min, max
-            r = Math.min(r, vo.max)
-            r = Math.max(r, vo.min)
+            //limitRatio
+            r = vo.limitRatio(r)
 
             //save
             vo.r = r
@@ -160,8 +180,8 @@ export default {
     },
     methods: {
 
-        updatePanelSize: function(msg) {
-            //console.log('methods updatePanelSize', msg)
+        resizePanel: function(msg) {
+            //console.log('methods resizePanel', msg)
 
             let vo = this
 
@@ -174,6 +194,57 @@ export default {
 
         },
 
+        limitRatio: function(r) {
+            // console.log('methods limitRatio', r)
+
+            let vo = this
+
+            //ratioMin, ratioMax
+            r = Math.min(r, vo.ratioMax)
+            r = Math.max(r, vo.ratioMin)
+
+            //check
+            if (vo.panelHeight > 0) {
+
+                //topHeight
+                let topHeight = (r) * vo.panelHeight
+
+                //check topHeightMin
+                if (isNumber(vo.topHeightMin)) {
+                    if (topHeight < vo.topHeightMin) {
+                        r = vo.topHeightMin / vo.panelHeight
+                    }
+                }
+
+                //check topHeightMax
+                if (isNumber(vo.topHeightMax)) {
+                    if (topHeight > vo.topHeightMax) {
+                        r = vo.topHeightMax / vo.panelHeight
+                    }
+                }
+
+                //bottomHeight
+                let bottomHeight = (1 - r) * vo.panelHeight
+
+                //check bottomHeightMin
+                if (isNumber(vo.bottomHeightMin)) {
+                    if (bottomHeight < vo.bottomHeightMin) {
+                        r = -(vo.bottomHeightMin / vo.panelHeight - 1)
+                    }
+                }
+
+                //check bottomHeightMax
+                if (isNumber(vo.bottomHeightMax)) {
+                    if (bottomHeight > vo.bottomHeightMax) {
+                        r = -(vo.bottomHeightMax / vo.panelHeight - 1)
+                    }
+                }
+
+            }
+
+            return r
+        },
+
         dragBar: function({ clientY }) {
             //console.log('methods dragBar', clientY)
 
@@ -187,9 +258,8 @@ export default {
                 r = (y - bd.top) / h //clientX需扣除元件的top位置
             }
 
-            //min, max
-            r = Math.min(r, vo.max)
-            r = Math.max(r, vo.min)
+            //limitRatio
+            r = vo.limitRatio(r)
 
             //save
             vo.r = r

package/src/components/WTree.vue

@@ -31,6 +31,7 @@
                     :style="`transition:all 0.3s; ${draggable?'user-select:none;':''} ${getCursor({},props)} color:${getTextColor(props.row.item)}; background:${getBackgroundColor(props.row.item)};`"
                     :dragindex="props.index"
                     v-domdragdrop="isDraggable?getDgOpt():null"
+                    v-domripple="{color:itemRippleColor}"
                     @domdragdrop="dragdrop"
                     draggable="false"
                     @mouseenter="(e)=>{mouseenterItem(e,props)}"
@@ -59,7 +60,7 @@
                         <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)">
+                            <div :style="`${useItemHeightMin} display:flex; align-items:center; justify-content:center;`" v-if="hasChildren(props.index)">
                                 <WTreeIconToggle
                                     :dir="`${props.row.unfolding?'bottom':'right'}`"
                                     :iconSize="iconSize"
@@ -71,13 +72,13 @@
                             </div>
 
                             <!-- 若無顯隱圖標至少要撐開寬度 -->
-                            <div :style="`padding-right:${iconSize}px;`" v-else></div>
+                            <div :style="`${useItemHeightMin} padding-right:${iconSize}px;`" v-else></div>
 
                         </div>
 
                         <!-- 因顯隱圖標較小而右側間距看起來較寬, 故核選圖標右側間距*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;`">
+                            <div :style="`${useItemHeightMin} display:flex; align-items:center; justify-content:center;`">
                                 <WTreeIconCheckbox
                                     :mode="props.row.checked"
                                     :iconSize="iconSize"
@@ -105,9 +106,11 @@
                                 :keyText="keyText"
                                 :keyChildren="keyChildren"
                                 :setDataByPathAndValue="setDataByPathAndValue"
+                                :isHover="pkHover===props.row.item[keyPrimary]"
+                                :isActive="pkActive===props.row.item[keyPrimary]"
                             >
                                 <!-- 得使用min-height否則無法撐開高度 -->
-                                <div :style="`min-height:${Math.max(iconSize,defItemHeight)}px; display:flex; align-items:center;`">
+                                <div :style="`${useItemHeightMin} display:flex; align-items:center;`">
                                     {{getText(props.row.item)}}
                                 </div>
                             </slot>
@@ -232,6 +235,7 @@ import globalMemory from '../js/globalMemory.mjs'
 import parseSpace from '../js/parseSpace.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
 import domDragDrop from '../js/domDragDrop.mjs'
+import domRipple from '../js/domRipple.mjs'
 import WDynamicList from './WDynamicList.vue'
 import WButtonCircle from './WButtonCircle.vue'
 import WPopup from './WPopup.vue'
@@ -251,12 +255,6 @@ let gm = globalMemory()
  * @vue-prop {Boolean} [activable=false] 輸入是否使用主動模式布林值，預設false
  * @vue-prop {Function} [funActive=null] 輸入主動模式時處理點擊項目函數，給予並回傳true時代表點擊項目給予主動模式，回傳false代表點擊項目不給予主動模式，可應用於資料夾與有效項目之區隔，預設null
  * @vue-prop {Object} [itemActive={}] 輸入主動模式時外部給予主動模式項目物件，物件內至少要給予keyPrimary鍵值方能進行識別，預設{}
- * @vue-prop {String} [itemTextColor='#444'] 輸入文字顏色字串，預設'#444'
- * @vue-prop {String} [itemTextColorHover='#222'] 輸入滑鼠移入時文字顏色字串，預設'#222'
- * @vue-prop {String} [itemTextColorActive='#d72'] 輸入主動模式時文字顏色字串，預設'#d72'
- * @vue-prop {String} [itemBackgroundColor='transparent'] 輸入背景顏色字串，預設'transparent'
- * @vue-prop {String} [itemBackgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.2)'
- * @vue-prop {String} [itemBackgroundColorActive='rgba(255,167,38,0.2)'] 輸入主動模式時背景顏色字串，預設'rgba(255,167,38,0.2)'
  * @vue-prop {Boolean} [selectable=false] 輸入是否具有勾選模式布林值，預設false
  * @vue-prop {Array} [selections=[]] 輸入勾選項目陣列，當selectable=true時才可使用，預設[]
  * @vue-prop {String} [keyPrimary='id'] 輸入可選項目為物件時，主鍵之欄位字串，預設'id'
@@ -265,7 +263,7 @@ let gm = globalMemory()
  * @vue-prop {String} [keyLock='locked'] 輸入可選項目為物件時，禁止勾選之欄位字串，物件給予此欄位需為布林值，預設'locked'
  * @vue-prop {Object} [paddingStyle={v:0,h:0}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}
  * @vue-prop {Number} [indent=1] 輸入縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設1
- * @vue-prop {Number} [iconSize=24] 輸入顯隱icon按鈕高度數字，單位為px，預設24
+ * @vue-prop {Number} [iconSize=24] 輸入顯隱與核選icon按鈕高度數字，單位為px，預設24
  * @vue-prop {String} [iconToggleColor='grey'] 輸入顯隱icon按鈕顏色字串，預設'grey'
  * @vue-prop {String} [iconToggleBackgroundColor='transparent'] 輸入顯隱icon按鈕背景顏色字串，預設'transparent'
  * @vue-prop {String} [iconToggleBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
@@ -275,15 +273,20 @@ let gm = globalMemory()
  * @vue-prop {String} [iconCheckedDisabledColor='grey'] 輸入核選icon禁用時勾選時顏色字串，預設'grey'
  * @vue-prop {String} [iconCheckedPartiallyColor='blue darken-3'] 輸入核選icon部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'blue darken-3'
  * @vue-prop {String} [iconCheckedPartiallyDisabledColor='grey'] 輸入核選icon禁用時部份勾選時顏色字串，預設'grey'
- * @vue-prop {String} [iconVerticalAlign='middle'] 輸入icon垂直對齊字串，預設'middle'
  * @vue-prop {String} [filterKeywords=''] 輸入過濾關鍵字字串，多關鍵字用空白分隔，預設''
  * @vue-prop {Function} [filterFunction=null] 輸入過濾時呼叫處理函數，可使用sync或async函數，傳入為各項目物件資料，若為sync函數回傳布林值，若為async函數等待resolve結果為布林值，代表項目內是否含有關鍵字，預設null
  * @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] 輸入按需顯示時各項目預設最小高度(min-height)值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設34
- * @vue-prop {Number} [=null] 輸入按需顯示時各項目圖標預設最小高度(min-height)值，通常不給由defItemHeight決定，若有給則取與defItemHeight之較大者，單位為px，預設null
  * @vue-prop {Number} [itemsPreload=5] 輸入上下方預先載入元素數量，預設5
+ * @vue-prop {String} [itemTextColor='#444'] 輸入文字顏色字串，預設'#444'
+ * @vue-prop {String} [itemTextColorHover='#222'] 輸入滑鼠移入時文字顏色字串，預設'#222'
+ * @vue-prop {String} [itemTextColorActive='#d72'] 輸入主動模式時文字顏色字串，預設'#d72'
+ * @vue-prop {String} [itemBackgroundColor='transparent'] 輸入背景顏色字串，預設'transparent'
+ * @vue-prop {String} [itemBackgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.2)'
+ * @vue-prop {String} [itemBackgroundColorActive='rgba(255,167,38,0.2)'] 輸入主動模式時背景顏色字串，預設'rgba(255,167,38,0.2)'
+ * @vue-prop {String} [itemRippleColor='rgba(200,200,200,0.4)'] 輸入ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
  * @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'
  * @vue-prop {String} [dgTextDisabledColor='#812'] 輸入禁止拖曳文字顏色字串，預設'#812'
@@ -322,6 +325,7 @@ let gm = globalMemory()
 export default {
     directives: {
         domdragdrop: domDragDrop(),
+        domripple: domRipple(),
     },
     components: {
         WDynamicList,
@@ -350,7 +354,7 @@ export default {
         },
         funActive: {
             type: Function,
-            default: null
+            default: null,
         },
         itemActive: {
             type: Object,
@@ -433,10 +437,6 @@ export default {
             type: String,
             default: 'grey',
         },
-        iconVerticalAlign: {
-            type: String,
-            default: 'middle', //middle, top
-        },
         filterKeywords: {
             type: String,
             default: '',
@@ -489,6 +489,10 @@ export default {
             type: String,
             default: 'rgba(255,167,38,0.2)',
         },
+        itemRippleColor: {
+            type: String,
+            default: 'rgba(200,200,200,0.4)',
+        },
         draggable: {
             type: Boolean,
             default: false,
@@ -770,6 +774,14 @@ export default {
             return ''
         },
 
+        useItemHeightMin: function() {
+            //console.log('computed useItemHeightMin')
+
+            let vo = this
+
+            return `min-height:${Math.max(vo.iconSize, vo.defItemHeight)}px;`
+        },
+
         useIndent: function() {
             //console.log('computed useIndent')
 
@@ -792,14 +804,6 @@ export default {
             return padding
         },
 
-        useIconVerticalAlign: function() {
-            //console.log('computed useIconVerticalAlign')
-
-            let vo = this
-
-            return vo.iconVerticalAlign === 'top' ? 'flex-start' : 'center'
-        },
-
         useItemTextColor: function() {
             //console.log('computed useItemTextColor')
 
@@ -1496,7 +1500,7 @@ export default {
 
             let vo = this
 
-            //unfoldingChain
+            //unfoldingChain, 紀錄自己與其下子節點的unfolding值
             let unfoldingChain = []
 
             //依照unfoldingChain計算節點displayShow
@@ -1526,7 +1530,7 @@ export default {
                 //level
                 let level = get(items, `${ind}.row.item.level`, null)
                 if (level === null) {
-                    console.log('invalid level')
+                    console.log('invalid items[i].row.item.level')
                     return
                 }
 
@@ -1537,7 +1541,7 @@ export default {
                     //levelNow
                     let levelNow = get(items, `${i}.row.item.level`, null)
                     if (levelNow === null) {
-                        console.log('invalid levelNow')
+                        console.log('invalid items[i].row.item.level')
                         return
                     }
 
@@ -1584,9 +1588,70 @@ export default {
 
             //modifySelf
             modifySelf(ind, unfolding)
+            // console.log('modifySelf unfoldingChain', unfoldingChain)
 
             //modifyChildren
             modifyChildren(ind, unfolding)
+            // console.log('modifyChildren unfoldingChain', unfoldingChain)
+
+        },
+
+        unfoldingItemParentsCore: function(items, ind) {
+            // console.log('methods unfoldingItemParentsCore', items, ind)
+
+            let vo = this
+
+            //unfolding parents
+            let level = -1
+            let rs = []
+            for (let i = ind; i >= 0; i--) {
+
+                //levelNow
+                let levelNow = get(items, `${i}.row.item.level`, null)
+                if (levelNow === null) {
+                    console.log('invalid items[i].row.item.level')
+                    return
+                }
+
+                //check
+                if (level !== levelNow) {
+                    // console.log('get level', levelNow, items[i])
+
+                    //ind
+                    let ind = get(items, `${i}.row.index`, null)
+                    if (ind === null) {
+                        console.log('invalid items[i].row.index')
+                        return
+                    }
+
+                    //push, 紀錄需展開之父層節點編號(含自己)
+                    rs.push(ind)
+
+                    //update
+                    level = levelNow
+
+                }
+
+                //check
+                if (level === 0) {
+                    break //已處理至最頂層可先跳出加速
+                }
+
+            }
+
+            //reverse, 由最頂層往下排
+            rs = reverse(rs)
+
+            //dropRight, 剔除自己
+            rs = dropRight(rs)
+
+            //由頂層往下依序展開
+            each(rs, (ind) => {
+
+                //toggleItemsCore
+                vo.toggleItemsCore(items, ind, true) //展開指定父層
+
+            })
 
         },
 
@@ -1615,7 +1680,7 @@ export default {
                         //l, 有指定預先展開層數
                         let l = cint(vo.defaultDisplayLevelTrans)
 
-                        // toggleItemsCore
+                        //toggleItemsCore
                         each(items, (v, k) => {
                             if ((v.row.item.level + 1) > l && v.row.unfolding) {
                                 vo.toggleItemsCore(items, k, false) //非指定層數則隱藏
@@ -1640,6 +1705,58 @@ export default {
 
         },
 
+        toggleItemsAllCore: function(items, toUnfolding) {
+            // console.log('methods toggleItemsAllCore', items, toUnfolding)
+
+            let vo = this
+
+            //toggleItemsCore
+            each(items, (v, k) => {
+                if (v.row.unfolding !== toUnfolding) {
+                    vo.toggleItemsCore(items, k, toUnfolding)
+                }
+            })
+
+        },
+
+        toggleItemsAll: function(toUnfolding) {
+            // console.log('methods toggleItemsAll', toUnfolding)
+
+            let vo = this
+
+            async function core() {
+
+                //check
+                if (!vo.$refs.wdl) {
+                    return
+                }
+
+                //opt
+                let opt = {
+                    fun: function(items) {
+                        // console.log('items', cloneDeep(items))
+
+                        //toggleItemsAllCore
+                        vo.toggleItemsAllCore(items, toUnfolding)
+
+                    }
+                }
+
+                //processItems
+                if (vo.$refs.wdl) { //於async中組件切換時還是有可能消失
+                    await vo.$refs.wdl.processItems(opt)
+                }
+
+            }
+
+            //core
+            core()
+                .catch((err) => {
+                    console.log(err)
+                })
+
+        },
+
         toggleItems: function(item, toUnfolding) {
             // console.log('methods toggleItems', item, toUnfolding)
 
@@ -1666,30 +1783,31 @@ export default {
                         //ind
                         let ind = get(item, 'index', null)
                         if (ind === null) {
-                            console.log('invalid ind')
+                            console.log('invalid item.index')
                             return
                         }
 
-                        //wdl rows, 取得wdl內展示數據
-                        let rows = vo.$refs.wdl.getRows()
-                        // console.log('wdl rows', rows)
+                        // //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)
+                        // //displayShow, 提取節點之直接顯示狀態
+                        // let displayShow = get(rows, `${ind}.displayShow`)
+                        // // console.log('displayShow', displayShow)
 
-                        //filterShow, 提取節點之過濾後顯示狀態
-                        let filterShow = get(rows, `${ind}.filterShow`)
-                        // console.log('filterShow', filterShow)
+                        // //filterShow, 提取節點之過濾後顯示狀態
+                        // let filterShow = get(rows, `${ind}.filterShow`)
+                        // // console.log('filterShow', filterShow)
 
-                        //show, 節點是否為顯示狀態
-                        let show = !(!displayShow || !filterShow)
-                        // console.log('show', show)
+                        // //show, 節點是否為顯示狀態
+                        // let show = !(!displayShow || !filterShow)
+                        // // console.log('show', show)
 
-                        //check show, 若非顯示代表由上層隱藏或被過濾而隱藏, 不提供切換功能
-                        if (!show) {
-                            return
-                        }
+                        // //check show, 若非顯示代表由上層隱藏或被過濾而隱藏, 不提供切換功能
+                        // if (!show) {
+                        //     console.log('本節點為非顯示狀態(包含節點隱藏與過濾被剔除)')
+                        //     return
+                        // }
 
                         //unfolding
                         let unfolding = get(items, `${ind}.row.unfolding`, null)
@@ -1700,14 +1818,34 @@ export default {
 
                         //toUnfolding
                         if (isbol(toUnfolding)) { //若有指定要展開或隱藏
-                            // console.log('toUnfolding', toUnfolding, '(!unfolding)', (!unfolding))
-                            if (toUnfolding === unfolding) { //若節點當前已為指定要展開或隱藏, 則不用處理
-                                return
+
+                            //check 若節點當前已為指定要展開或隱藏, 則不用處理
+                            // if (toUnfolding === unfolding) {
+                            //     return
+                            // }
+
+                            //update
+                            unfolding = toUnfolding
+
+                            //若指定展開(toUnfolding=true), 得展開各父層節點
+                            if (toUnfolding) {
+                                // console.log('toUnfolding=true: call unfoldingItemParentsCore')
+                                vo.unfoldingItemParentsCore(items, ind)
                             }
+
                         }
+                        else {
+
+                            //本身節點變更unfolding
+                            unfolding = !unfolding
 
-                        //本身節點變更unfolding
-                        unfolding = !unfolding
+                            //若原本為隱藏而需展開(unfolding=!unfolding), 得展開各父層節點
+                            if (unfolding) {
+                                // console.log('unfolding=!unfolding: call unfoldingItemParentsCore')
+                                vo.unfoldingItemParentsCore(items, ind)
+                            }
+
+                        }
 
                         //toggleItemsCore
                         vo.toggleItemsCore(items, ind, unfolding)
@@ -1752,6 +1890,7 @@ export default {
 
             //row
             let row = get(r, 'row')
+            // console.log('row', row)
 
             //check
             if (!iseobj(row)) {
@@ -1867,7 +2006,7 @@ export default {
                     //level
                     let level = get(items, `${ind}.row.item.level`, null)
                     if (level === null) {
-                        console.log('invalid level')
+                        console.log('invalid items[i].row.item.level')
                         return
                     }
 
@@ -1878,7 +2017,7 @@ export default {
                         //levelNow
                         let levelNow = get(items, `${i}.row.item.level`, null)
                         if (levelNow === null) {
-                            console.log('invalid levelNow')
+                            console.log('invalid items[i].row.item.level')
                             return
                         }
 
@@ -1908,7 +2047,7 @@ export default {
                 //level
                 let level = get(items, `${ind}.row.item.level`, null)
                 if (level === null) {
-                    console.log('invalid level')
+                    console.log('invalid items[i].row.item.level')
                     return null
                 }
 
@@ -1924,7 +2063,7 @@ export default {
                     //levelNow
                     let levelNow = get(items, `${i}.row.item.level`, null)
                     if (levelNow === null) {
-                        console.log('invalid levelNow')
+                        console.log('invalid items[i].row.item.level')
                         return
                     }
 
@@ -1952,7 +2091,7 @@ export default {
                     //levelNow
                     let levelNow = get(items, `${i}.row.item.level`, null)
                     if (levelNow === null) {
-                        console.log('invalid levelNow')
+                        console.log('invalid items[i].row.item.level')
                         return
                     }
 

package/src/js/domRipple.mjs

@@ -62,7 +62,8 @@ function domRipple(opt = {}) {
         //color
         let color = get(binding, 'value.color')
         if (!isestr(color)) {
-            color = 'rgba(255, 255, 255, 0.5)'
+            // color = 'rgba(255, 255, 255, 0.5)'
+            return //若不給顏色則不使用
         }
         color = color2hex(color)
 

package/toolg/gExtractHtml.mjs

@@ -135,17 +135,13 @@ function writeHtml(v) {
             }
             .bk {
                 vertical-align: top;
-                margin: 10px 0px 0px 0px;
-                padding: 0px 0px 60px 0px;
+                padding: 10px 0px 60px 0px;
             }
             @media screen and (min-width:1000px){ /* 寬版 */
                 .bk {
                     display: inline-block;
                     margin: 0px 80px 0px 0px;
                 }
-                .dz {
-                    width: 400px;
-                }
             }
         </style>