w-component-vue 2.2.2 → 2.2.5

package/src/components/WTree.vue

@@ -3,6 +3,7 @@
     <div
         style="position:relative; overflow:hidden;"
         :changeViewHeightMax="changeViewHeightMax"
+        :changeActiveItem="changeActiveItem"
         :changeDefaultDisplayLevel="changeDefaultDisplayLevel"
         :changeDraggableAndOperatable="changeDraggableAndOperatable"
         :changeFilterKeyWords="changeFilterKeyWords"
@@ -17,6 +18,7 @@
             :noResultsText="noResultsText"
             :searchingText="searchingText"
             :show="show"
+            @render="(msg)=>{$emit('render',msg)}"
             @change-view-items="(msg)=>{$emit('change-view-items',msg)}"
             @change-height-of-items="(msg)=>{updateViewHeightMaxTrans(msg);$emit('change-height-of-items',msg)}"
         >
@@ -26,14 +28,14 @@
                 <!-- 要把原生拖曳功能關閉draggable=false -->
                 <div
                     :key="`wt-${props.index}`"
-                    :style="`${draggable?'user-select:none;':''}`"
+                    :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"
                     @domdragdrop="dragdrop"
                     draggable="false"
-                    @mouseenter="(e)=>{$emit('mouseenter',getEmitData(e,props))}"
-                    @mouseleave="(e)=>{$emit('mouseleave',getEmitData(e,props))}"
-                    @click="(e)=>{$emit('click',getEmitData(e,props))}"
+                    @mouseenter="(e)=>{mouseenterItem(e,props)}"
+                    @mouseleave="(e)=>{mouseleaveItem(e,props)}"
+                    @click="(e)=>{clickItem(e,props)}"
                 >
                     <div :style="`position:relative; display:table; ${usePadding}`">
 
@@ -54,39 +56,34 @@
                         <div :style="`display:table-cell; vertical-align:top; padding-right:${separation}px;`"></div>
 
                         <div :style="`display:table-cell; vertical-align:top; padding:0px ${separation}px;`">
-                            <div :style="`display:flex; align-items:center; justify-content:center; width:${defItemHeight/defIconHeight*defIconWidth}px; height:${defItemHeight}px; overflow:hidden;`">
-                                <div :style="`transform-origin:center; transform:scale(${iconHeight/defIconHeight});`">
-                                    <WTreeIconToggle
-                                        :style="`width${defIconWidth}px; height:${defIconHeight}px;`"
-                                        :dir="`${props.row.unfolding?'bottom':'right'}`"
-                                        :iconColor="iconToggleColor"
-                                        :iconBackgroundColor="iconToggleBackgroundColor"
-                                        :iconBackgroundColorHover="iconToggleBackgroundColorHover"
-                                        @click.stop="toggleItems(props.row)"
-                                        v-if="hasChildren(props.index)"
-                                    ></WTreeIconToggle>
-                                    <div :style="`padding-right:${defIconWidth}px;`" v-else></div>
-                                </div>
+                            <div :style="`display:flex; align-items:${useIconVerticalAlign}; justify-content:center; height:${defItemHeight}px; overflow:hidden;`">
+                                <WTreeIconToggle
+                                    :dir="`${props.row.unfolding?'bottom':'right'}`"
+                                    :iconSize="iconSize"
+                                    :iconColor="iconToggleColor"
+                                    :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>
 
                         <!-- 因顯隱圖標比較小而勾選圖標比較大, 讓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:center; justify-content:center; width:${defItemHeight/defIconHeight*defIconWidth}px; height:${defItemHeight}px; overflow:hidden;`">
-                                <div :style="`transform-origin:center; transform:scale(${iconHeight/defIconHeight});`">
-                                    <WTreeIconCheckbox
-                                        :style="`width${defIconWidth}px; height:${defIconHeight}px;`"
-                                        :mode="props.row.checked"
-                                        :editable="getEditable(props.row.item)"
-                                        :uncheckedColor="iconUncheckedColor"
-                                        :uncheckedDisabledColor="iconUncheckedDisabledColor"
-                                        :checkedColor="iconCheckedColor"
-                                        :checkedDisabledColor="iconCheckedDisabledColor"
-                                        :checkedPartiallyColor="iconCheckedPartiallyColor"
-                                        :checkedPartiallyDisabledColor="iconCheckedPartiallyDisabledColor"
-                                        @click="checkItems(props.row)"
-                                    ></WTreeIconCheckbox>
-                                </div>
+                            <div :style="`display:flex; align-items:${useIconVerticalAlign}; justify-content:center; width:${defIconSize*(iconSize/defIconSize)}px; height:${defItemHeight}px; overflow:hidden;`">
+                                <WTreeIconCheckbox
+                                    :mode="props.row.checked"
+                                    :editable="getEditable(props.row.item)"
+                                    :uncheckedColor="iconUncheckedColor"
+                                    :uncheckedDisabledColor="iconUncheckedDisabledColor"
+                                    :checkedColor="iconCheckedColor"
+                                    :checkedDisabledColor="iconCheckedDisabledColor"
+                                    :checkedPartiallyColor="iconCheckedPartiallyColor"
+                                    :checkedPartiallyDisabledColor="iconCheckedPartiallyDisabledColor"
+                                    @click="checkItems(props.row)"
+                                ></WTreeIconCheckbox>
                             </div>
                         </div>
 
@@ -104,7 +101,7 @@
                                 :setDataByPathAndValue="setDataByPathAndValue"
                             >
                                 <!-- 得使用min-height否則無法撐開高度 -->
-                                <div :style="`min-height:${Math.max(iconHeight,defItemHeight)}px; display:flex; align-items:center;`">
+                                <div :style="`min-height:${Math.max(iconSize,defItemHeight)}px; display:flex; align-items:center;`">
                                     {{getText(props.row.item)}}
                                 </div>
                             </slot>
@@ -211,6 +208,8 @@ import sep from 'wsemi/src/sep.mjs'
 import isarr from 'wsemi/src/isarr.mjs'
 import isobj from 'wsemi/src/isobj.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
+import isestr from 'wsemi/src/isestr.mjs'
+import isnum from 'wsemi/src/isnum.mjs'
 import cint from 'wsemi/src/cint.mjs'
 import cdbl from 'wsemi/src/cdbl.mjs'
 import cstr from 'wsemi/src/cstr.mjs'
@@ -240,7 +239,16 @@ let gm = globalMemory()
  * @vue-prop {Array|Object} [data=[]] 輸入資料陣列，預設[]，各元素配合slot顯示即可，slot內提供row與irow，對應原始rows內各元素與指標，另外各元素slot時不要用margin避免計算高度有誤差
  * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，若給予非數字則自動依照當前顯隱最高內容調整，預設400
  * @vue-prop {Number} [defaultDisplayLevel=null] 輸入初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
- * @vue-prop {Boolean} [selectable=false] 輸入是否具有勾選模式，預設false
+ * @vue-prop {Boolean} [activable=false] 輸入是否使用主動模式布林值，預設false
+ * @vue-prop {Function} [funActive=null] 輸入主動模式時處理點擊項目函數，給予並回傳true時代表點擊項目給予主動模式，回傳false代表點擊項目不給予主動模式，可應用於資料夾與有效項目之區隔，預設null
+ * @vue-prop {Object} [activeItem={}] 輸入主動模式時外部給予主動模式項目物件，物件內至少要給予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'
  * @vue-prop {String} [keyText='text'] 輸入可選項目為物件時，顯示文字之欄位字串，預設'text'
@@ -248,16 +256,17 @@ 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} [iconHeight=34] 輸入顯隱icon按鈕高度數字，單位為px，預設34
+ * @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)'
- * @vue-prop {String} [iconUncheckedColor='grey darken-2'] 輸入未勾選時顏色字串，預設'grey darken-2'
- * @vue-prop {String} [iconUncheckedDisabledColor='grey'] 輸入禁用時未勾選時顏色字串，預設'grey'
- * @vue-prop {String} [iconCheckedColor='blue darken-3'] 輸入勾選時顏色字串，預設'blue darken-3'
- * @vue-prop {String} [iconCheckedDisabledColor='grey'] 輸入禁用時勾選時顏色字串，預設'grey'
- * @vue-prop {String} [iconCheckedPartiallyColor='blue darken-3'] 輸入部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'blue darken-3'
- * @vue-prop {String} [iconCheckedPartiallyDisabledColor='grey'] 輸入禁用部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'grey'
+ * @vue-prop {String} [iconUncheckedColor='grey darken-2'] 輸入核選icon未勾選時顏色字串，預設'grey darken-2'
+ * @vue-prop {String} [iconUncheckedDisabledColor='grey'] 輸入核選icon禁用時未勾選時顏色字串，預設'grey'
+ * @vue-prop {String} [iconCheckedColor='blue darken-3'] 輸入核選icon勾選時顏色字串，預設'blue darken-3'
+ * @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] 輸入過濾時呼叫處理函數，傳入為各項目物件資料，回傳布林值代表項目內是否含有關鍵字，預設null
  * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
@@ -265,7 +274,7 @@ let gm = globalMemory()
  * @vue-prop {String} [searchingText='Searching...'] 輸入搜索中字串，預設'Searching...'
  * @vue-prop {Number} [defItemHeight=34] 輸入按需顯示時各項目預設高度值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設34
  * @vue-prop {Number} [itemsPreload=5] 輸入上下方預先載入元素數量，預設5
- * @vue-prop {Boolean} [draggable=false] 輸入是否為可拖曳編輯模式，若draggable設定true，此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟draggable僅適用小規模數據。draggable預設false
+ * @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'
  * @vue-prop {Number} [dgTextDisabledPaddingLeft=15] 輸入禁止拖曳padding-left數字，單位px，預設15
@@ -279,7 +288,7 @@ let gm = globalMemory()
  * @vue-prop {Number} [dgPreviewBorderWidth=0] 輸入拖曳時預覽元素邊框寬度數字，預設0
  * @vue-prop {String} [dgPreviewBorderColor='#f26'] 輸入拖曳時預覽元素邊框顏色字串，預設'#f26'
  * @vue-prop {String} [dgPreviewBackground='transparent'] 輸入拖曳時預覽元素背景顏色字串，預設'transparent'
- * @vue-prop {Boolean} [operatable=false] 輸入是否使用控制節點模式，若operatable設定true，將於各項目右側顯示控制按鈕，點擊可彈出選單進行插入與刪除等項目，此時會觸發事件click-operate-item，而處理相應數據則需呼叫事件提供物件內operateItem函數，詳情請見範例。此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟operatable僅適用小規模數據。operatable預設false
+ * @vue-prop {Boolean} [operatable=false] 輸入是否使用控制節點模式布林值，若operatable設定true，將於各項目右側顯示控制按鈕，點擊可彈出選單進行插入與刪除等項目，此時會觸發事件click-operate-item，而處理相應數據則需呼叫事件提供物件內operateItem函數，詳情請見範例。此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟operatable僅適用小規模數據。operatable預設false
  * @vue-prop {String} [operateItemTextForInsertBefore='Insert before'] 輸入控制選項插入前項目之文字字串，預設'Insert before'
  * @vue-prop {String} [operateItemTextForInsertChild='Insert child'] 輸入控制選項插入子項目之文字字串，預設'Insert child'
  * @vue-prop {String} [operateItemTextForInsertAfter='Insert after'] 輸入控制選項插入後項目之文字字串，預設'Insert after'
@@ -298,7 +307,7 @@ let gm = globalMemory()
  * @vue-prop {Number} [operateItemIconSize=22] 輸入控制項目圖標尺寸數字，預設22
  * @vue-prop {String} [operateItemIconColor='#444'] 輸入控制項目圖標顏色字串，預設'#444'
  * @vue-prop {String} [operateItemIconColorHover='#222'] 輸入滑鼠移入時控制項目圖標顏色字串，預設'#222'
- * @vue-prop {Boolean} [show=true] 輸入是否為顯示模式，預設true，供組件嵌入popup時, 因先初始化但尚未顯示不需渲染, 可給予show=false避免無限偵測與重算高度問題
+ * @vue-prop {Boolean} [show=true] 輸入是否為顯示模式布林值，預設true，供組件嵌入popup時, 因先初始化但尚未顯示不需渲染, 可給予show=false避免無限偵測與重算高度問題
  */
 export default {
     directives: {
@@ -325,6 +334,18 @@ export default {
             type: Number,
             default: null,
         },
+        activable: {
+            type: Boolean,
+            default: false,
+        },
+        funActive: {
+            type: Function,
+            default: null
+        },
+        activeItem: {
+            type: Object,
+            default: () => {},
+        },
         selectable: {
             type: Boolean,
             default: false,
@@ -362,9 +383,9 @@ export default {
             type: Number,
             default: 1,
         },
-        iconHeight: {
+        iconSize: {
             type: Number,
-            default: 34,
+            default: 24,
         },
         iconToggleColor: {
             type: String,
@@ -402,6 +423,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        iconVerticalAlign: {
+            type: String,
+            default: 'middle', //middle, top
+        },
         filterKeywords: {
             type: String,
             default: '',
@@ -430,6 +455,30 @@ export default {
             type: Number,
             default: 5,
         },
+        itemTextColor: {
+            type: String,
+            default: '#444',
+        },
+        itemTextColorHover: {
+            type: String,
+            default: '#222',
+        },
+        itemTextColorActive: {
+            type: String,
+            default: '#d72',
+        },
+        itemBackgroundColor: {
+            type: String,
+            default: 'transparent',
+        },
+        itemBackgroundColorHover: {
+            type: String,
+            default: 'rgba(200,200,200,0.2)',
+        },
+        itemBackgroundColorActive: {
+            type: String,
+            default: 'rgba(255,167,38,0.2)',
+        },
         draggable: {
             type: Boolean,
             default: false,
@@ -583,8 +632,7 @@ export default {
             viewHeightMaxTrans: 2, //預設給予>=2最小內容區高度, 使能觸發顯示渲染連動機制
 
             separation: 3,
-            defIconWidth: 24,
-            defIconHeight: 34,
+            defIconSize: 24,
             selectionsTrans: [],
 
             filterKeywordsTrans: '',
@@ -601,6 +649,9 @@ export default {
             dgTipWidth: 0,
             dgTipHeight: 0,
 
+            pkActive: '',
+            pkHover: '',
+
         }
     },
     beforeDestroy: function() {
@@ -648,6 +699,24 @@ export default {
             return ''
         },
 
+        changeActiveItem: function() {
+            let vo = this
+
+            //pk
+            let pk = get(vo.activeItem, vo.keyPrimary)
+            // console.log('clickItem pk', pk)
+
+            //save pkActive
+            if (vo.isKey(pk)) {
+                vo.pkActive = pk
+            }
+            else {
+                vo.pkActive = ''
+            }
+
+            return ''
+        },
+
         changeDefaultDisplayLevel: function() {
             //console.log('computed changeDefaultDisplayLevel')
 
@@ -696,7 +765,7 @@ export default {
 
             let vo = this
 
-            return vo.indent * (vo.defIconWidth + 2 * vo.separation)
+            return vo.indent * (vo.defIconSize + 2 * vo.separation)
         },
 
         usePadding: function() {
@@ -713,6 +782,62 @@ 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')
+
+            let vo = this
+
+            return color2hex(vo.itemTextColor)
+        },
+
+        useItemBackgroundColor: function() {
+            //console.log('computed useItemBackgroundColor')
+
+            let vo = this
+
+            return color2hex(vo.itemBackgroundColor)
+        },
+
+        useItemTextColorHover: function() {
+            //console.log('computed useItemTextColorHover')
+
+            let vo = this
+
+            return color2hex(vo.itemTextColorHover)
+        },
+
+        useItemBackgroundColorHover: function() {
+            //console.log('computed useItemBackgroundColorHover')
+
+            let vo = this
+
+            return color2hex(vo.itemBackgroundColorHover)
+        },
+
+        useItemTextColorActive: function() {
+            //console.log('computed useItemTextColorActive')
+
+            let vo = this
+
+            return color2hex(vo.itemTextColorActive)
+        },
+
+        useItemBackgroundColorActive: function() {
+            //console.log('computed useItemBackgroundColorActive')
+
+            let vo = this
+
+            return color2hex(vo.itemBackgroundColorActive)
+        },
+
         useDgTextDisabledColor: function() {
             //console.log('computed useDgTextDisabledColor')
 
@@ -928,6 +1053,173 @@ export default {
             return !get(item, vo.keyLocked, false)
         },
 
+        isKey: function(k) {
+            return isestr(k) || isnum(k)
+        },
+
+        getCursor: function(e, props) {
+            // console.log('getCursor', e, props)
+            let vo = this
+
+            //activable
+            if (!vo.activable) {
+                return ''
+            }
+
+            //funActive
+            let ck = true
+            if (isfun(vo.funActive)) {
+                ck = vo.funActive(vo.getEmitData(e, props))
+            }
+
+            return ck ? 'cursor:pointer;' : ''
+        },
+
+        getTextColor: function(item) {
+            // console.log('getTextColor', item)
+            let vo = this
+
+            //pk
+            let pk = get(item, vo.keyPrimary)
+            // console.log('getTextColor pk', pk)
+
+            //check
+            if (!vo.isKey(pk)) {
+                return vo.useItemTextColor
+            }
+
+            //active
+            if (vo.isKey(vo.pkActive) && pk === vo.pkActive) {
+                // console.log('getTextColor vo.useItemTextColorActive', vo.useItemTextColorActive)
+                return vo.useItemTextColorActive
+            }
+
+            //hover
+            if (vo.isKey(vo.pkHover) && pk === vo.pkHover) {
+                // console.log('getTextColor vo.useItemTextColorHover', vo.useItemTextColorHover)
+                return vo.useItemTextColorHover
+            }
+
+            return vo.useItemTextColor
+        },
+
+        getBackgroundColor: function(item) {
+            // console.log('getBackgroundColor', item)
+            let vo = this
+
+            //pk
+            let pk = get(item, vo.keyPrimary)
+            // console.log('getBackgroundColor pk', pk)
+
+            //check
+            if (!vo.isKey(pk)) {
+                return vo.useItemBackgroundColor
+            }
+
+            //active
+            if (vo.isKey(vo.pkActive) && pk === vo.pkActive) {
+                // console.log('getBackgroundColor vo.useItemBackgroundColorActive', vo.useItemBackgroundColorActive)
+                return vo.useItemBackgroundColorActive
+            }
+
+            //hover
+            if (vo.isKey(vo.pkHover) && pk === vo.pkHover) {
+                // console.log('getBackgroundColor vo.useItemBackgroundColorHover', vo.useItemBackgroundColorHover)
+                return vo.useItemBackgroundColorHover
+            }
+
+            return vo.useItemBackgroundColor
+        },
+
+        mouseenterItem: function(e, props) {
+            // console.log('mouseenterItem', e, props)
+
+            let vo = this
+
+            //item
+            let item = get(props, 'row.item')
+
+            //pk
+            let pk = get(item, vo.keyPrimary)
+
+            //check
+            if (vo.isKey(pk)) {
+
+                //save pkHover
+                vo.pkHover = pk
+
+            }
+
+            //emit
+            vo.$emit('mouseenter', vo.getEmitData(e, props))
+
+        },
+
+        mouseleaveItem: function(e, props) {
+            // console.log('mouseleaveItem', e, props)
+
+            let vo = this
+
+            //clear pkHover
+            vo.pkHover = ''
+
+            //emit
+            vo.$emit('mouseleave', vo.getEmitData(e, props))
+
+        },
+
+        clickItem: function(e, props) {
+            // console.log('clickItem', e, props)
+
+            let vo = this
+
+            //activable
+            if (vo.activable) {
+                while (true) {
+
+                    //item
+                    let item = get(props, 'row.item')
+                    // console.log('clickItem item', item)
+
+                    //funActive
+                    let ck = true
+                    if (isfun(vo.funActive)) {
+                        ck = vo.funActive(vo.getEmitData(e, props))
+                    }
+
+                    //check
+                    if (!ck) {
+                        break
+                    }
+
+                    //pk
+                    let pk = get(item, vo.keyPrimary)
+                    // console.log('clickItem pk', pk)
+
+                    //check
+                    if (!vo.isKey(pk)) {
+                        break
+                    }
+
+                    //save pkActive
+                    vo.pkActive = pk
+
+                    //activeItem
+                    let activeItem = { [vo.keyPrimary]: pk }
+                    //  console.log('clickItem activeItem', activeItem)
+
+                    //emit
+                    vo.$emit('update:activeItem', activeItem)
+
+                    break
+                }
+            }
+
+            //emit
+            vo.$emit('click', vo.getEmitData(e, props))
+
+        },
+
         updateSelections: function() {
             // console.log('methods updateSelections')