w-component-vue 2.2.3 → 2.2.6

package/src/components/WGroupCheck.vue

@@ -67,7 +67,7 @@ import parseSpace from '../js/parseSpace.mjs'
 
 
 /**
- * @vue-prop {Boolean} [multiCheck=true] 輸入是否為複選模式，預設true
+ * @vue-prop {Boolean} [multiCheck=true] 輸入是否為複選模式布林值，預設true
  * @vue-prop {Array} [items=[]] 輸入全部可選字串或物件陣列，預設[]
  * @vue-prop {Array|String|Object} value 輸入複選字串或物件陣列，無預設
  * @vue-prop {String} [keyText='text'] 輸入可選項目為物件時，存放顯示文字之欄位字串，預設'text'
@@ -91,20 +91,20 @@ import parseSpace from '../js/parseSpace.mjs'
  * @vue-prop {String} [backgroundColorHover='rgba(200,200,200,0.25)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.25)'
  * @vue-prop {String} [backgroundColorActive='orange'] 輸入主動模式時背景顏色字串，預設'orange'
  * @vue-prop {Object} [marginStyle={top:10,bottom:10,left:0,right:10}] 輸入外距設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{top:10,bottom:10,left:0,right:10}
- * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影，預設false
+ * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影布林值，預設false
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
- * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影，預設true
+ * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowActiveStyle=''] 輸入主動模式時陰影顏色字串，預設值詳見props
  * @vue-prop {Object} [paddingStyle={v:3,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:3,h:15}
  * @vue-prop {Number} [shiftLeft=0] 輸入左側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如圖標與左側邊框距離，單位px，預設0
  * @vue-prop {Number} [shiftRight=0] 輸入右側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如關閉圖標與右側邊框距離，單位px，預設0
- * @vue-prop {Boolean} [group=false] 輸入是否為群組模式，若group=true時會取消marginStyle、borderWidth、borderRadiusStyle設定，預設false
+ * @vue-prop {Boolean} [group=false] 輸入是否為群組模式布林值，若group=true時會取消marginStyle、borderWidth、borderRadiusStyle設定，預設false
  * @vue-prop {Object} [groupBorderRadiusStyle={left:true,right:true}] 輸入框圓角樣式物件，當群組模式group=true時才生效，可用鍵值為left、right、top、bottom、top-left、bottom-left、top-right、bottom-right，各鍵值為布林值，預設{left:true,right:true}
  * @vue-prop {Number} [groupShift=5] 輸入群組模式時第一按鈕左側以及最末按鈕右側與邊框距離數字，單位px，預設5
- * @vue-prop {Boolean} [close=false] 輸入是否具有關閉按鈕模式，預設false
- * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
+ * @vue-prop {Boolean} [close=false] 輸入是否具有關閉按鈕模式布林值，預設false
+ * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式布林值，預設false
  * @vue-prop {String} [loadingColor='black'] 輸入載入圖標顏色字串，預設'black'
- * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
  */
 export default {
     components: {

package/src/components/WGroupRadio.vue

@@ -40,20 +40,20 @@ import WGroupCheck from './WGroupCheck.vue'
  * @vue-prop {String} [backgroundColorHover='rgba(200,200,200,0.25)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.25)'
  * @vue-prop {String} [backgroundColorActive='orange'] 輸入主動模式時背景顏色字串，預設'orange'
  * @vue-prop {Object} [marginStyle={top:10,bottom:10,left:0,right:10}] 輸入外距設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{top:10,bottom:10,left:0,right:10}
- * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影，預設false
+ * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影布林值，預設false
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
- * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影，預設true
+ * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowActiveStyle=''] 輸入主動模式時陰影顏色字串，預設值詳見props
  * @vue-prop {Object} [paddingStyle={v:3,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:3,h:15}
  * @vue-prop {Number} [shiftLeft=0] 輸入左側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如圖標與左側邊框距離，單位px，預設0
  * @vue-prop {Number} [shiftRight=0] 輸入右側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如關閉圖標與右側邊框距離，單位px，預設0
- * @vue-prop {Boolean} [group=false] 輸入是否為群組模式，若group=true時會取消marginStyle、borderWidth、borderRadiusStyle設定，預設false
+ * @vue-prop {Boolean} [group=false] 輸入是否為群組模式布林值，若group=true時會取消marginStyle、borderWidth、borderRadiusStyle設定，預設false
  * @vue-prop {Object} [groupBorderRadiusStyle={left:true,right:true}] 輸入框圓角樣式物件，當群組模式group=true時才生效，可用鍵值為left、right、top、bottom、top-left、bottom-left、top-right、bottom-right，各鍵值為布林值，預設{left:true,right:true}
  * @vue-prop {Number} [groupShift=5] 輸入群組模式時第一按鈕左側以及最末按鈕右側與邊框距離數字，單位px，預設5
- * @vue-prop {Boolean} [close=false] 輸入是否具有關閉按鈕模式，預設false
- * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
+ * @vue-prop {Boolean} [close=false] 輸入是否具有關閉按鈕模式布林值，預設false
+ * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式布林值，預設false
  * @vue-prop {String} [loadingColor='black'] 輸入載入圖標顏色字串，預設'black'
- * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
  */
 export default {
     components: {

package/src/components/WGroupTags.vue

@@ -188,12 +188,12 @@ import domDragDrop from '../js/domDragDrop.mjs'
 
 /**
  * @vue-prop {Array} [value=[]] 輸入項目的字串陣列或物件陣列，預設[]
- * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態，預設false
+ * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態布林值，預設false
  * @vue-prop {Object} [valueActive=null] 輸入活耀項目物件，預設null
  * @vue-prop {String} [keyText='text'] 輸入項目為物件時，存放顯示文字之欄位字串，預設'text'
  * @vue-prop {String} [keyIcon='icon'] 輸入項目為物件時，存放圖標之欄位字串，預設'icon'
  * @vue-prop {String} [keyTooltip='tooltip'] 輸入項目為物件時，存放提示之欄位字串，預設'tooltip'
- * @vue-prop {Boolean} [useColorsFromItem=false] 輸入當項目為物件時，是否使用其內相關顏色設定用以覆蓋預設值，預設false
+ * @vue-prop {Boolean} [useColorsFromItem=false] 輸入當項目為物件時是否使用其內相關顏色設定用以覆蓋預設值布林值，預設false
  * @vue-prop {String} [icon=''] 輸入左側圖標字串，預設''
  * @vue-prop {String} [iconColor='black'] 輸入圖標顏色字串，預設'black'
  * @vue-prop {String} [iconColorHover='grey darken-3'] 輸入滑鼠移入時圖標顏色字串，預設'grey darken-3'
@@ -213,9 +213,9 @@ import domDragDrop from '../js/domDragDrop.mjs'
  * @vue-prop {String} [backgroundColorHover='rgba(200,200,200,0.25)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.25)'
  * @vue-prop {String} [backgroundColorActive='orange'] 輸入主動模式時背景顏色字串，預設'orange'
  * @vue-prop {Object} [marginStyle={top:10,bottom:10,left:0,right:10}] 輸入外距設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{top:10,bottom:10,left:0,right:10}
- * @vue-prop {Boolean} [shadow=true] 輸入是否顯示陰影，預設true
+ * @vue-prop {Boolean} [shadow=true] 輸入是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
- * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影，預設true
+ * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowActiveStyle=''] 輸入主動模式時陰影顏色字串，預設值詳見props
  * @vue-prop {Object} [paddingStyle={v:3,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:3,h:15}
  * @vue-prop {Number} [shiftLeft=0] 輸入左側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如圖標與左側邊框距離，單位px，預設0
@@ -249,11 +249,11 @@ import domDragDrop from '../js/domDragDrop.mjs'
  * @vue-prop {String} [addButtonBackgroundColor='white'] 輸入新增按鈕背景顏色字串，預設'white'
  * @vue-prop {String} [addButtonBackgroundColorHover='white'] 輸入滑鼠移入時新增按鈕背景顏色字串，預設'white'
  * @vue-prop {String} [addButtonTooltip='Add'] 輸入新增按鈕提示文字字串，預設'Add'
- * @vue-prop {Boolean} [closeWithInterceptor=false] 輸入是否通過攔截器來決定是否進行關閉，此處之攔截器係用promise來控制，當使用者點擊關閉時可先行確認或提示。當closeWithInterceptor=true時，於click-close事件所接收物件資訊中的pm，使用pm.resolve()則代表確定關閉，反之pm.reject()則取消關閉事件，預設false
- * @vue-prop {Boolean} [draggable=true] 輸入是否可拖曳模式，預設true
- * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
- * @vue-prop {Boolean} [editableClose=true] 輸入editable=true時，是否顯示關閉按鈕，預設true
- * @vue-prop {Boolean} [editableInput=true] 輸入editable=true時，是否使用預設的slot input，預設true
+ * @vue-prop {Boolean} [closeWithInterceptor=false] 輸入是否通過攔截器來決定是否進行關閉布林值，此處之攔截器係用promise來控制，當使用者點擊關閉時可先行確認或提示。當closeWithInterceptor=true時，於click-close事件所接收物件資訊中的pm，使用pm.resolve()則代表確定關閉，反之pm.reject()則取消關閉事件，預設false
+ * @vue-prop {Boolean} [draggable=true] 輸入是否可拖曳模式布林值，預設true
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
+ * @vue-prop {Boolean} [editableClose=true] 輸入editable=true時是否顯示關閉按鈕布林值，預設true
+ * @vue-prop {Boolean} [editableInput=true] 輸入editable=true時是否使用預設的slot input布林值，預設true
  * @vue-prop {Boolean} [enableCloseEventOnly=false] 輸入點擊移除按鈕時是否僅開啟關閉事件，代表不自動刪除項目，需通過監聽關閉事件@click-close自行處理刪除功能，預設false
  * @vue-prop {String} [nodata='無'] 輸入無任何字串陣列時的預設文字字串，預設'無'
  */

package/src/components/WImageCascadingDyn.vue

@@ -37,17 +37,25 @@
                     </div>
 
                     <div style="background:rgba(0,0,0,0.65); padding:5px;">
-                        <div style="font-size:0.8rem; color:#fff;">{{img.name}}</div>
+                        <input
+                            type="text"
+                            class="inp"
+                            style="font-size:0.8rem; color:#fff;"
+                            _spellcheck="false"
+                            readonly
+                            :value="img.name"
+                        >
                     </div>
 
                     <div style="background:rgba(200,200,200,0.5); padding:3px 5px;">
-                            <input
-                                type="text"
-                                class="inp"
-                                _spellcheck="false"
-                                readonly
-                                :value="img.src"
-                            >
+                        <input
+                            type="text"
+                            class="inp"
+                            style="font-size:0.7rem; opacity:0.75;"
+                            _spellcheck="false"
+                            readonly
+                            :value="img.src"
+                        >
                     </div>
 
                 </div>
@@ -65,6 +73,7 @@ import map from 'lodash/map'
 import get from 'lodash/get'
 import times from 'lodash/times'
 import size from 'lodash/size'
+import isNumber from 'lodash/isNumber'
 import importResources from 'wsemi/src/importResources.mjs'
 import domShowImagesDyn from 'wsemi/src/domShowImagesDyn.mjs'
 import ispint from 'wsemi/src/ispint.mjs'
@@ -93,6 +102,7 @@ function getFileName(str) {
  * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入viewerjs組件js與css檔案位置字串陣列，預設詳見原始碼處props->pathItems->default
  * @vue-prop {Array} [images=[]] 輸入圖片網址陣列，預設[]
  * @vue-prop {Number} [imageWidth=300] 輸入圖片寬度數字，單位為px，預設300
+ * @vue-prop {Number} [imageWidthSoft=null] 輸入自動計算最小需滿足的圖片寬度數字，單位為px，預設null
  * @vue-prop {Number} [colNum=null] 輸入組件寬度圖片欄位(水平向有幾張圖片)數量數字，預設null
  * @vue-prop {Number} [space=15] 輸入圖片間間距長度數字，單位為px，預設15
  * @vue-prop {Object} [imageStyle={}] 輸入圖片style物件，預設{}
@@ -124,6 +134,10 @@ export default {
             type: Number,
             default: 300,
         },
+        imageWidthSoft: {
+            type: Number,
+            default: null,
+        },
         colNum: {
             type: Number,
             default: null,
@@ -198,7 +212,6 @@ export default {
             return ''
         },
 
-
         changeStyle: function() {
             // console.log('computed changeStyle')
 
@@ -379,8 +392,22 @@ export default {
             //uesImageWidth, colNum
             let uesImageWidth = null
             let colNum = null
-            if (ispint(vo.colNum)) {
-                //優先使用colNum計算imageWidth
+            if (isNumber(vo.imageWidthSoft) && vo.imageWidthSoft > 0) {
+                // console.log('優先使用imageWidthSoft計算colNum與imageWidth')
+
+                //colNum
+                colNum = (vo.widthPanel + vo.space) / (vo.imageWidthSoft + vo.space)
+                colNum = Math.floor(colNum)
+                colNum = Math.max(colNum, 1)
+                // console.log('colNum', colNum)
+
+                //uesImageWidth
+                uesImageWidth = (vo.widthPanel - vo.space * (colNum - 1)) / colNum
+                // console.log('uesImageWidth', uesImageWidth)
+
+            }
+            else if (ispint(vo.colNum)) {
+                // console.log('次先使用colNum計算imageWidth')
 
                 //colNum
                 colNum = cint(vo.colNum)
@@ -390,7 +417,8 @@ export default {
                 uesImageWidth = Math.floor(uesImageWidth)
 
             }
-            else if (vo.imageWidth > 0) {
+            else if (isNumber(vo.imageWidth) && vo.imageWidth > 0) {
+                // console.log('最後使用imageWidth計算colNum')
 
                 //uesImageWidth
                 uesImageWidth = vo.imageWidth
@@ -404,7 +432,7 @@ export default {
 
             }
             else {
-                console.log('invalid colNum or imageWidth')
+                console.log('invalid colNum or imageWidth or imageWidthSoft', vo.colNum, vo.imageWidth, vo.imageWidthSoft)
                 colNum = 4
                 uesImageWidth = 300
             }
@@ -567,9 +595,7 @@ export default {
 
 <style scoped>
 .inp {
-    opacity: 0.75;
     font: inherit;
-    font-size: 0.7rem;
     height: 1rem;
     line-height: 1rem;
     width: 100%;

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}`">
 
@@ -206,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'
@@ -235,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'
@@ -261,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
@@ -275,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'
@@ -294,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: {
@@ -321,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,
@@ -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,
@@ -600,6 +649,9 @@ export default {
             dgTipWidth: 0,
             dgTipHeight: 0,
 
+            pkActive: '',
+            pkHover: '',
+
         }
     },
     beforeDestroy: function() {
@@ -647,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')
 
@@ -720,6 +790,54 @@ export default {
             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')
 
@@ -935,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')