w-component-vue 2.3.6 → 2.3.7

package/docs/module-WTimedayCore.html

@@ -263,7 +263,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 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-WTimedayRange.html

@@ -503,7 +503,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 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-WTimedayRangeCore.html

@@ -287,7 +287,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 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-WTimeminute.html

@@ -563,7 +563,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 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-WTimeminuteCore.html

@@ -347,7 +347,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 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-WTimeminuteRange.html

@@ -587,7 +587,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 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-WTimeminuteRangeCore.html

@@ -371,7 +371,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 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-WTinymceVueDyn.html

@@ -251,7 +251,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 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-WTooltip.html

@@ -431,7 +431,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 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-WTree.html

@@ -1487,7 +1487,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.2</a> on Mon Jul 17 2023 21:14:42 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-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 Mon Jul 17 2023 21:14:42 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 Mon Jul 17 2023 21:14:42 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 Mon Jul 17 2023 21:14:42 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.6",
+  "version": "2.3.7",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^7.2.96",

package/src/AppZoneWGroupTags.vue

@@ -688,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
@@ -704,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
@@ -800,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
@@ -852,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

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/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/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
 

package/src/components/WListItem.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        :style="`transition:all 0.3s; border-top-left-radius:${borderRadius}px; border-top-right-radius:${borderRadius}px; ${usePadding} background:${useBackgroundColor}; ${clickable&&cursorPointer?'cursor:pointer;':''}`"
+        :style="`position:relative; transition:all 0.3s; border-top-left-radius:${borderRadius}px; border-top-right-radius:${borderRadius}px; ${usePadding} background:${useBackgroundColor}; ${editable&&cursorPointer?'cursor:pointer;':''}`"
         v-domripple="{color:rippleColor}"
         @mouseenter="mouseEnter=true"
         @mouseleave="mouseEnter=false"
@@ -32,6 +32,16 @@
 
             </slot>
 
+            <div
+                style="position:absolute; left:0; right:0; top:0; bottom:0;"
+                v-if="!editable"
+            >
+                <div :style="`overflow:hidden; width:100%; height:100%;`">
+                    <div :style="`background:${effDisabledColor}; height:100%;`">
+                    </div>
+                </div>
+            </div>
+
         </div>
     </div>
 </template>
@@ -62,8 +72,9 @@ import WIcon from './WIcon.vue'
  * @vue-prop {String} [iconColorHover='#222'] 輸入滑鼠移入時圖標顏色字串，預設'#222'
  * @vue-prop {String} [iconColorActive='white'] 輸入主動模式時圖標顏色字串，預設'white'
  * @vue-prop {String} [rippleColor='rgba(255,255,255,0.4)'] 輸入ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
- * @vue-prop {Boolean} [clickable=true] 輸入是否為可點擊模式布林值，預設true
  * @vue-prop {Boolean} [cursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
+ * @vue-prop {Boolean} [editable=true] 輸入是否為可點擊模式布林值，預設true
+ * @vue-prop {String} [disabledColor='rgba(255,255,255,0.5)'] 輸入非編輯模式時遮罩顏色字串，預設'rgba(255,255,255,0.5)'
  */
 export default {
     directives: {
@@ -146,10 +157,14 @@ export default {
             type: String,
             default: 'rgba(255,255,255,0.4)',
         },
-        clickable: {
+        editable: {
             type: Boolean,
             default: true,
         },
+        disabledColor: {
+            type: String,
+            default: 'rgba(255,255,255,0.5)',
+        },
         cursorPointer: {
             type: Boolean,
             default: true,
@@ -258,6 +273,11 @@ export default {
             return vo.mouseEnter ? vo.effIconColorHover : vo.effIconColor
         },
 
+        effDisabledColor: function() {
+            let vo = this
+            return color2hex(vo.disabledColor)
+        },
+
     },
     methods: {
 
@@ -267,7 +287,7 @@ export default {
             let vo = this
 
             //check
-            if (!vo.clickable) {
+            if (!vo.editable) {
                 return
             }