w-component-vue 2.3.5 → 2.3.7

package/docs/module-WTreeIconCheckbox.html

@@ -299,7 +299,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 22:21:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Jul 23 2023 16:36:20 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -275,7 +275,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 22:21:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Jul 23 2023 16:36:20 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html

@@ -147,7 +147,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Thu Jul 13 2023 22:21:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Sun Jul 23 2023 16:36:20 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-component-vue",
-  "version": "2.3.5",
+  "version": "2.3.7",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.2.96",

package/src/AppZoneWExplorer.vue

@@ -2195,7 +2195,7 @@ export default {
         clickOperateItem: function(msg) {
             console.log('clickOperateItem', msg)
 
-            //fun, 僅處理並回傳新項目, 不處理刪除項目
+            //fun, 僅處理並回傳新項目, 不處理其他項目
             let fun = function() {
                 return new Promise(function(resolve, reject) {
                     let id = Math.floor(Math.random() * 1000)

package/src/AppZoneWGroupTags.vue

@@ -165,7 +165,7 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'inputTextColor & inputTextBorderColor & inputTextBorderColorHover & inputTextBorderColorFocus & inputTextButtonColor & inputTextButtonColorHover & inputTextButtonColorHover & inputTextBackgroundColor & inputTextBackgroundColorHover & inputTextBackgroundColorFocus'"
+                    :casename="'inputTextColor & inputTextBorderColor & inputTextBorderColorHover & inputTextBorderColorFocus & inputTextButtonIcon & inputTextButtonColor & inputTextButtonColorHover & inputTextButtonColorHover & inputTextBackgroundColor & inputTextBackgroundColorHover & inputTextBackgroundColorFocus'"
                 ></demolink>
 
                 <w-group-tags
@@ -174,6 +174,7 @@
                     :inputTextBorderColor="'indigo darken-1'"
                     :inputTextBorderColorHover="'indigo darken-1'"
                     :inputTextBorderColorFocus="'indigo darken-2'"
+                    :inputTextButtonIcon="mdiCloudPlus"
                     :inputTextButtonColor="'indigo'"
                     :inputTextButtonColorHover="'indigo'"
                     :inputTextButtonColorFocus="'indigo darken-1'"
@@ -267,11 +268,12 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'object items & addButtonTextColor & addButtonTextColorHover & addButtonIconColor & addButtonIconColorHover & addButtonBackgroundColor &  addButtonBackgroundColorHover'"
+                    :casename="'object items & addButtonIcon & addButtonTextColor & addButtonTextColorHover & addButtonIconColor & addButtonIconColorHover & addButtonBackgroundColor &  addButtonBackgroundColorHover'"
                 ></demolink>
 
                 <w-group-tags
                     v-model="WGroupTags.objects"
+                    :addButtonIcon="mdiCloudPlus"
                     :addButtonTextColor="'white'"
                     :addButtonTextColorHover="'white'"
                     :addButtonIconColor="'white'"
@@ -686,7 +688,7 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'editableInput(no slot input)'"
+                    :casename="'editableInput(no input text)'"
                 ></demolink>
 
                 <w-group-tags
@@ -702,7 +704,23 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'iconColor & iconColorHover & textColor & textColorHover & borderColor & borderColorHover & backgroundColor & backgroundColorHover & not draggable & no shadow & editableClose(no close button) & editableInput(no slot input)'"
+                    :casename="'editableInput(no input button)'"
+                ></demolink>
+
+                <w-group-tags
+                    v-model="WGroupTags.objects"
+                    :icon="mdiChartBubble"
+                    :editableInput="false"
+                ></w-group-tags>
+
+                <div style="padding-left:5px; font-size:0.9rem; color:#ea6;">binding: objects</div>
+            </div>
+
+
+            <div class="bk" style="display:block;">
+                <demolink
+                    :kbname="'w-group-tags'"
+                    :casename="'iconColor & iconColorHover & textColor & textColorHover & borderColor & borderColorHover & backgroundColor & backgroundColorHover & not draggable & no shadow & editableClose(no close button) & editableInput(no input text)'"
                 ></demolink>
 
                 <w-group-tags
@@ -798,7 +816,7 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'object items & slot item & editableInput(no slot input) & useActive & valueActive & paddingStyle & textColor & textColorHover & textColorActive & backgroundColor & backgroundColorActive & shadowActiveStyle'"
+                    :casename="'object items & slot item & editableInput(no input button) & useActive & valueActive & paddingStyle & textColor & textColorHover & textColorActive & backgroundColor & backgroundColorActive & shadowActiveStyle'"
                 ></demolink>
 
                 <w-group-tags
@@ -850,7 +868,7 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'object items & slot item & useColorsFromItem & editableInput(no slot input) & no shadow & no shadowActive & useActive & valueActive & paddingStyle'"
+                    :casename="'object items & slot item & useColorsFromItem & editableInput(no input button) & no shadow & no shadowActive & useActive & valueActive & paddingStyle'"
                 ></demolink>
 
                 <w-group-tags
@@ -889,7 +907,7 @@
 </template>
 
 <script>
-import { mdiEmailVariant, mdiChartBubble, mdiCodepen, mdiPlusCircle } from '@mdi/js'
+import { mdiEmailVariant, mdiChartBubble, mdiCodepen, mdiPlusCircle, mdiCloudPlus } from '@mdi/js'
 import demolink from './components/demolink.vue'
 import WGroupTags from './components/WGroupTags.vue'
 import WButtonChip from './components/WButtonChip.vue'
@@ -909,6 +927,7 @@ export default {
             mdiChartBubble,
             mdiCodepen,
             mdiPlusCircle,
+            mdiCloudPlus,
             'WGroupTags': {
                 'strings': [
                     'Dashboard',

package/src/AppZoneWListHorizontal.vue

@@ -104,6 +104,38 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'item with no editable'"
+                ></demolink>
+
+                <w-list-horizontal
+                    :items="WListHorizontal.itemsObjForNoEditable"
+                >
+                </w-list-horizontal>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-horizontal'"
+                    :casename="'item with no editable & itemDisabledColor'"
+                ></demolink>
+
+                <!-- itemDisabledColor是對item故會對背景有影響, 原則是基於item背景色RGB並給予其他半透明度作為禁用效果 -->
+                <div style="padding:25px 30px; background:rgb(245,245,245);">
+                    <w-list-horizontal
+                        :items="WListHorizontal.itemsObjForNoEditable"
+                        :itemDisabledColor="'rgba(245,245,245,0.4)'"
+                    >
+                    </w-list-horizontal>
+                </div>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-list-horizontal'"
@@ -277,7 +309,7 @@
                                 <w-icon
                                     :icon="props.item.icon"
                                     :size="32"
-                                    :color="props.item.isActive?'#FF9800':'#666'"
+                                    :color="props.isActive?'#CDDC39':props.isHover?'#444':'#666'"
                                 ></w-icon>
 
                             </div>
@@ -285,15 +317,15 @@
                             <div style="">
 
                                 <w-badge
-                                    :text="props.item.ind"
+                                    :text="props.kitem"
                                     :badge-align="'left'"
                                 >
-                                    <div :style="`padding:0px 11px 0px 0px; font-size:0.9rem; line-height:0.9rem; color:${props.item.isActive?'#FF9800':'#666'}`">
+                                    <div :style="`padding:0px 11px 0px 0px; font-size:0.9rem; line-height:0.9rem; color:${props.isActive?'#FF9800':props.isHover?'#444':'#666'};`">
                                         {{props.item.text}}
                                     </div>
                                 </w-badge>
 
-                                <div :style="`font-size:0.7rem; line-height:0.7rem; opacity:0.7; color:${props.item.isActive?'#FF9800':'#666'}`">
+                                <div :style="`font-size:0.7rem; line-height:0.7rem; opacity:0.7; color:${props.isActive?'#FF9800':props.isHover?'#444':'#666'};`">
                                     {{props.item.type}}
                                 </div>
 
@@ -450,6 +482,44 @@ export default {
                         path: mdiGestureDoubleTap,
                     },
                 ],
+                'itemsObjForNoEditable': [
+                    {
+                        text: 'Real-Time',
+                        icon: mdiStackOverflow,
+                        type: 'Default',
+                        editable: true,
+                    },
+                    {
+                        text: 'Audience',
+                        icon: mdiBookMusicOutline,
+                        type: 'Default',
+                        editable: true,
+                    },
+                    {
+                        text: 'Conversions',
+                        icon: mdiCharity,
+                        type: 'Default',
+                        editable: false,
+                    },
+                    {
+                        text: 'Management',
+                        icon: mdiLightbulbGroupOutline,
+                        type: 'Default',
+                        editable: true,
+                    },
+                    {
+                        text: 'Settings',
+                        icon: mdiMessageCogOutline,
+                        type: 'Primary',
+                        editable: false,
+                    },
+                    {
+                        text: 'Actions',
+                        icon: mdiGestureDoubleTap,
+                        type: 'Primary',
+                        editable: true,
+                    },
+                ],
                 'itemsStringActive': 'Real-Time',
                 'itemActive': {
                     text: 'Audience',

package/src/AppZoneWListVertical.vue

@@ -44,6 +44,41 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-vertical'"
+                    :casename="'item with no editable'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #ddd;">
+                    <w-list-vertical
+                        style="height:400px; width:250px;"
+                        :items="WListVertical.itemsObjForNoEditable"
+                    >
+                    </w-list-vertical>
+                </div>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-list-vertical'"
+                    :casename="'item with no editable & itemDisabledColor'"
+                ></demolink>
+
+                <div style="display:inline-block; border:1px dashed #ddd;">
+                    <w-list-vertical
+                        style="height:400px; width:250px;"
+                        :items="WListVertical.itemsObjForNoEditable"
+                        :itemDisabledColor="'rgba(245,245,245,0.4)'"
+                    >
+                    </w-list-vertical>
+                </div>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-list-vertical'"
@@ -260,10 +295,10 @@
                                         style="margin-right:8px;"
                                         :icon="props.item.icon"
                                         :size="16"
-                                        :color="props.item.isActive?'#CDDC39':'#666'"
+                                        :color="props.isActive?'#CDDC39':props.isHover?'#444':'#666'"
                                     ></w-icon>
 
-                                    <div :style="'transition:all 0.3s; font-size:0.8rem; color:'.concat(props.item.isActive?'#B388FF':'#666')">
+                                    <div :style="`transition:all 0.3s; font-size:0.8rem; color:${props.isActive?'#B388FF':props.isHover?'#444':'#666'};`">
 
                                         <div>{{props.item.type}}</div>
 
@@ -277,10 +312,10 @@
                                         style="margin-right:8px;"
                                         :icon="mdiLightbulbOnOutline"
                                         :size="16"
-                                        :color="props.item.isActive?'#CDDC39':'#666'"
+                                        :color="props.isActive?'#CDDC39':'#666'"
                                     ></w-icon>
 
-                                    <div :style="'transition:all 0.3s; color:'.concat(props.item.isActive?'#fff':'#666')+';'">{{props.item.text}}</div>
+                                    <div :style="'transition:all 0.3s; color:'.concat(props.isActive?'#fff':'#666')+';'">{{props.item.text}}</div>
 
                                 </div>
 
@@ -464,6 +499,44 @@ export default {
                         path: mdiGestureDoubleTap,
                     },
                 ],
+                'itemsObjForNoEditable': [
+                    {
+                        text: 'Real-Time',
+                        icon: mdiStackOverflow,
+                        type: 'Default',
+                        editable: true,
+                    },
+                    {
+                        text: 'Audience',
+                        icon: mdiBookMusicOutline,
+                        type: 'Default',
+                        editable: true,
+                    },
+                    {
+                        text: 'Conversions',
+                        icon: mdiCharity,
+                        type: 'Default',
+                        editable: false,
+                    },
+                    {
+                        text: 'Management',
+                        icon: mdiLightbulbGroupOutline,
+                        type: 'Default',
+                        editable: true,
+                    },
+                    {
+                        text: 'Settings',
+                        icon: mdiMessageCogOutline,
+                        type: 'Primary',
+                        editable: false,
+                    },
+                    {
+                        text: 'Actions',
+                        icon: mdiGestureDoubleTap,
+                        type: 'Primary',
+                        editable: true,
+                    },
+                ],
                 'itemActive': {
                     text: 'Audience',
                     icon: mdiBookMusicOutline,

package/src/AppZoneWTree.vue

@@ -1915,7 +1915,7 @@ export default {
         clickOperateItem: function(msg) {
             console.log('clickOperateItem', msg)
 
-            //fun, 僅處理並回傳新項目, 不處理刪除項目
+            //fun, 僅處理並回傳新項目, 不處理其他項目
             let fun = function() {
                 return new Promise(function(resolve, reject) {
                     let id = Math.floor(Math.random() * 1000)

package/src/components/WExplorer.vue

@@ -269,7 +269,6 @@
                             :style="`width:${props.width}px; min-width:${props.width}px; height:${listHeight}px;`"
                             :items="listItems"
                             :itemActive.sync="listItemActive"
-                            :itemClickable="true"
                             :itemCursorPointer="false"
                             :paddingStyle="listPaddingStyle"
                             :itemBackgroundColor="listItemBackgroundColor"

package/src/components/WGroupTags.vue

@@ -114,7 +114,7 @@
                 <template v-if="isObjValue">
                     <WButtonChip
                         :style="`${useMarginStyle}`"
-                        :icon="mdiPlusCircle"
+                        :icon="addButtonIcon"
                         :iconColor="addButtonIconColor"
                         :iconColorHover="addButtonIconColorHover"
                         :text="addButtonText"
@@ -123,6 +123,9 @@
                         :backgroundColor="addButtonBackgroundColor"
                         :backgroundColorHover="addButtonBackgroundColorHover"
                         :tooltip="addButtonTooltip"
+                        :paddingStyle="{v:3,h:12}"
+                        _shiftLeft="shiftLeft"
+                        _shiftRight="shiftRight"
                         @click="clickAddBtn"
                     ></WButtonChip>
                 </template>
@@ -145,7 +148,7 @@
                         :backgroundColorHover="inputTextBackgroundColorHover"
                         :backgroundColorFocus="inputTextBackgroundColorFocus"
                         :showExpansionIcon="false"
-                        :rightIcon="mdiPlusCircle"
+                        :rightIcon="inputTextButtonIcon"
                         :rightIconColor="inputTextButtonColor"
                         :rightIconColorHover="inputTextButtonColorHover"
                         :rightIconColorFocus="inputTextButtonColorFocus"
@@ -231,6 +234,7 @@ import domDragDrop from '../js/domDragDrop.mjs'
  * @vue-prop {String} [inputTextBorderColor='grey lighten-1'] 輸入輸入框邊框顏色字串，預設'grey lighten-1'
  * @vue-prop {String} [inputTextBorderColorHover='grey'] 輸入滑鼠移入時輸入框邊框字串，預設'grey'
  * @vue-prop {String} [inputTextBorderColorFocus='grey'] 輸入取得焦點時輸入框文字邊框字串，預設'grey'
+ * @vue-prop {String} [inputTextButtonIcon=mdiPlusCircle] 輸入新增按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiPlusCircle
  * @vue-prop {String} [inputTextButtonColor='grey lighten-1'] 輸入輸入框按鈕顏色字串，預設'grey lighten-1'
  * @vue-prop {String} [inputTextButtonColorHover='grey'] 輸入滑鼠移入時輸入框按鈕顏色字串，預設'grey'
  * @vue-prop {String} [inputTextButtonColorFocus='grey'] 輸入取得焦點時輸入框按鈕顏色字串，預設'grey'
@@ -244,6 +248,7 @@ import domDragDrop from '../js/domDragDrop.mjs'
  * @vue-prop {String} [addButtonText='Add'] 輸入新增按鈕文字字串，預設'Add'
  * @vue-prop {String} [addButtonTextColor='black'] 輸入新增按鈕文字顏色字串，預設'black'
  * @vue-prop {String} [addButtonTextColorHover='black'] 輸入滑鼠移入時新增按鈕文字顏色字串，預設'black'
+ * @vue-prop {String} [addButtonIcon=mdiPlusCircle] 輸入新增按鈕圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiPlusCircle
  * @vue-prop {String} [addButtonIconColor='pink darken-1'] 輸入新增按鈕圖標顏色字串，預設'pink darken-1'
  * @vue-prop {String} [addButtonIconColorHover='pink darken-1'] 輸入滑鼠移入時新增按鈕圖標顏色字串，預設'pink darken-1'
  * @vue-prop {String} [addButtonBackgroundColor='white'] 輸入新增按鈕背景顏色字串，預設'white'
@@ -457,6 +462,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        inputTextButtonIcon: {
+            type: String,
+            default: mdiPlusCircle,
+        },
         inputTextButtonColor: {
             type: String,
             default: 'grey lighten-1',
@@ -509,6 +518,10 @@ export default {
             type: String,
             default: 'black',
         },
+        addButtonIcon: {
+            type: String,
+            default: mdiPlusCircle,
+        },
         addButtonIconColor: {
             type: String,
             default: 'pink darken-1',
@@ -779,47 +792,63 @@ export default {
 
             let vo = this
 
-            //check
-            if (trim(vo.userinput) === '') {
-                return
-            }
-
-            //check
-            let r = filter(vo.itemsTrans, (v) => {
-                return isEqual(v, vo.userinput)
-            })
-            if (size(r) >= 1) {
+            //isObjValue
+            if (vo.isObjValue) {
 
                 //$nextTick
                 vo.$nextTick(() => {
 
                     //emit
-                    vo.$emit('error', 'disable duplicate values')
-
-                    //clear
-                    vo.userinput = ''
+                    vo.$emit('click-add', null)
 
                 })
 
-                return
             }
+            else {
 
-            //$nextTick
-            vo.$nextTick(() => {
+                //check
+                if (trim(vo.userinput) === '') {
+                    return
+                }
+
+                //check
+                let r = filter(vo.itemsTrans, (v) => {
+                    return isEqual(v, vo.userinput)
+                })
+                if (size(r) >= 1) {
 
-                //push
-                vo.itemsTrans.push(trim(vo.userinput))
+                    //$nextTick
+                    vo.$nextTick(() => {
 
-                //emit
-                vo.$emit('input', vo.itemsTrans)
+                        //emit
+                        vo.$emit('error', 'disable duplicate values')
 
-                //emit
-                vo.$emit('click-add', vo.userinput)
+                        //clear
+                        vo.userinput = ''
 
-                //clear
-                vo.userinput = ''
+                    })
 
-            })
+                    return
+                }
+
+                //$nextTick
+                vo.$nextTick(() => {
+
+                    //push
+                    vo.itemsTrans.push(trim(vo.userinput))
+
+                    //emit
+                    vo.$emit('input', vo.itemsTrans)
+
+                    //emit
+                    vo.$emit('click-add', vo.userinput)
+
+                    //clear
+                    vo.userinput = ''
+
+                })
+
+            }
 
         },
 

package/src/components/WListHorizontal.vue

@@ -40,9 +40,10 @@
                         :iconColor="itemIconColor"
                         :iconColorHover="itemIconColorHover"
                         :iconColorActive="itemIconColorActive"
-                        :rippleColor="itemRippleColor"
-                        :clickable="itemClickable"
-                        :cursorPointer="itemCursorPointer"
+                        :rippleColor="getEditable(item)?itemRippleColor:null"
+                        :editable="getEditable(item)"
+                        :disabledColor="itemDisabledColor"
+                        :cursorPointer="true"
                         @click="ckItem(item)"
                     >
 
@@ -51,7 +52,10 @@
                         >
                             <slot
                                 name="item"
-                                :item="{ind:kitem,...item,...props}"
+                                :item="item"
+                                :kitem="kitem"
+                                :isHover="props.isHover"
+                                :isActive="props.isActive"
                             >
                             </slot>
                         </template>
@@ -100,11 +104,11 @@ import WListItem from './WListItem.vue'
  * @vue-prop {String} [itemIconColorHover='#222'] 輸入滑鼠移入時圖標顏色字串，預設'#222'
  * @vue-prop {String} [itemIconColorActive='orange darken-3'] 輸入主動模式時圖標顏色字串，預設'orange darken-3'
  * @vue-prop {String} [itemRippleColor='rgba(245,124,0,0.4)'] 輸入ripple效果顏色字串，預設'rgba(245,124,0,0.4)'
- * @vue-prop {Boolean} [itemClickable=true] 輸入是否為可點擊模式布林值，預設true
- * @vue-prop {Boolean} [itemCursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  * @vue-prop {Boolean} [borderBottom=true] 輸入主動模式時是否於項目底部顯示高亮線條，預設true
  * @vue-prop {Number} [borderBottomSize=2] 輸入底部高亮線條尺寸(高度)數字，單位px，預設2
  * @vue-prop {String} [borderBottomColor='rgba(245,124,0,0.8)'] 輸入底部高亮線條顏色字串，預設'rgba(245,124,0,0.8)'
+ * @vue-prop {String} [itemDisabledColor='rgba(255,255,255,0.5)'] 輸入非編輯模式時遮罩顏色字串，預設'rgba(255,255,255,0.5)'
+ * @vue-prop {Boolean} [itemCursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  */
 export default {
     directives: {
@@ -199,14 +203,6 @@ export default {
             type: String,
             default: 'rgba(245,124,0,0.4)',
         },
-        itemClickable: {
-            type: Boolean,
-            default: true,
-        },
-        itemCursorPointer: {
-            type: Boolean,
-            default: true,
-        },
         borderBottom: {
             type: Boolean,
             default: true,
@@ -219,6 +215,14 @@ export default {
             type: String,
             default: 'rgba(245,124,0,0.8)',
         },
+        itemDisabledColor: {
+            type: String,
+            default: 'rgba(255,255,255,0.5)',
+        },
+        itemCursorPointer: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: function() {
         return {
@@ -314,6 +318,12 @@ export default {
             return b
         },
 
+        getEditable: function(item) {
+            // let vo = this
+            let b = get(item, 'editable', true)
+            return b
+        },
+
         updateBorderBottom: function() {
             // console.log('methods updateBorderBottom')
 
@@ -391,6 +401,11 @@ export default {
 
             let vo = this
 
+            //check
+            if (!vo.getEditable(item)) {
+                return
+            }
+
             //save itemActiveTrans
             vo.itemActiveTrans = item