w-component-vue 2.1.75 → 2.1.78

package/docs/module-WTimeminuteCore.html

@@ -272,7 +272,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sat Feb 26 2022 17:06:52 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRange.html

@@ -380,7 +380,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sat Feb 26 2022 17:06:52 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRangeCore.html

@@ -284,7 +284,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sat Feb 26 2022 17:06:52 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTinymceVueDyn.html

@@ -224,7 +224,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sat Feb 26 2022 17:06:52 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTree.html

@@ -566,7 +566,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sat Feb 26 2022 17:06:52 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html

@@ -242,7 +242,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sat Feb 26 2022 17:06:52 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -218,7 +218,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sat Feb 26 2022 17:06:52 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html

@@ -144,7 +144,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sat Feb 26 2022 17:06:52 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 3.6.7</a> on Mon Feb 28 2022 18:35:14 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.1.75",
+  "version": "2.1.78",
   "author": "yuda-lyu(semisphere)",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/AppZoneWButtonCircle.vue

@@ -80,6 +80,25 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-button-circle'"
+                    :casename="'borderWidth & borderColor & borderColorHover & borderColorFocus'"
+                ></demolink>
+
+                <div style="display:inline-block; padding:15px; background:#888;">
+                    <w-button-circle
+                        :icon="mdiCheckUnderlineCircle"
+                        :borderWidth="1"
+                        :borderColor="'#aaa'"
+                        :borderColorHover="'#ccc'"
+                        :borderColorFocus="'#eee'"
+                    ></w-button-circle>
+                </div>
+
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-button-circle'"

package/src/AppZoneWCheckbox.vue

@@ -35,11 +35,26 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-checkbox'"
-                    :casename="'iconSize'"
+                    :casename="'text'"
                 ></demolink>
 
                 <w-checkbox
-                    :iconSize="18"
+                    :text="'顯示文字(text)'"
+                    v-model="WCheckbox.valueBol"
+                ></w-checkbox>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-checkbox'"
+                    :casename="'text & textColor & textColorHover'"
+                ></demolink>
+
+                <w-checkbox
+                    :text="'顯示文字(text)'"
+                    :textColor="'#24c'"
+                    :textColorHover="'#68c'"
                     v-model="WCheckbox.valueBol"
                 ></w-checkbox>
             </div>
@@ -48,12 +63,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-checkbox'"
-                    :casename="'checkedIconColor & uncheckedIconColor'"
+                    :casename="'iconSize & textFontSize'"
                 ></demolink>
 
                 <w-checkbox
-                    :checkedIconColor="'pink'"
-                    :uncheckedIconColor="'pink'"
+                    :text="'顯示文字(text)'"
+                    :iconSize="18"
+                    :textFontSize="'0.7rem'"
                     v-model="WCheckbox.valueBol"
                 ></w-checkbox>
             </div>
@@ -73,6 +89,22 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-checkbox'"
+                    :casename="'checkedIconColor & checkedIconColorHover & uncheckedIconColor & uncheckedIconColorHover'"
+                ></demolink>
+
+                <w-checkbox
+                    :checkedIconColor="'#f6a'"
+                    :checkedIconColorHover="'#f26'"
+                    :uncheckedIconColor="'#f6a'"
+                    :uncheckedIconColorHover="'#f26'"
+                    v-model="WCheckbox.valueBol"
+                ></w-checkbox>
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-checkbox'"
@@ -94,8 +126,8 @@
 
                 <w-checkbox
                     :editable="false"
-                    :checkedIconColorDisabled="'#FF8A65'"
-                    :uncheckedIconColorDisabled="'#FF8A65'"
+                    :checkedIconColorDisabled="'#ff8a65'"
+                    :uncheckedIconColorDisabled="'#ff8a65'"
                     v-model="WCheckbox.valueBol"
                 ></w-checkbox>
             </div>

package/src/AppZoneWSwitch.vue

@@ -14,7 +14,9 @@
                     :casename="'default'"
                 ></demolink>
 
-                <w-switch v-model="WSwitch.valueBol"></w-switch>
+                <w-switch
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
             </div>
 
 
@@ -24,19 +26,66 @@
                     :casename="'use string (y or n)'"
                 ></demolink>
 
-                <w-switch v-model="WSwitch.valueYN"></w-switch>
+                <w-switch
+                    v-model="WSwitch.valueYN"
+                ></w-switch>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-switch'"
+                    :casename="'text'"
+                ></demolink>
+
+                <w-switch
+                    :text="'顯示文字(text)'"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-switch'"
+                    :casename="'text & textColor & textColorHover'"
+                ></demolink>
+
+                <w-switch
+                    :text="'顯示文字(text)'"
+                    :textColor="'#24c'"
+                    :textColorHover="'#68c'"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-switch'"
+                    :casename="'switchSize & textFontSize'"
+                ></demolink>
+
+                <w-switch
+                    :text="'顯示文字(text)'"
+                    :switchSize="18"
+                    :textFontSize="'0.7rem'"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
             </div>
 
 
             <div class="bk">
                 <demolink
                     :kbname="'w-switch'"
-                    :casename="'text & color'"
+                    :casename="'checkedSwitchColor & checkedSwitchColorHover & uncheckedSwitchColor & uncheckedSwitchColorHover'"
                 ></demolink>
 
                 <w-switch
-                    :text="'是否開啟分享'"
-                    :color="'teal accent-3'"
+                    :checkedSwitchColor="'#f6a'"
+                    :checkedSwitchColorHover="'#f26'"
+                    :uncheckedSwitchColor="'#ccc'"
+                    :uncheckedSwitchColorHover="'#cccccc'"
                     v-model="WSwitch.valueBol"
                 ></w-switch>
             </div>
@@ -48,7 +97,25 @@
                     :casename="'not editable'"
                 ></demolink>
 
-                <w-switch :editable="false" v-model="WSwitch.valueBol"></w-switch>
+                <w-switch
+                    :editable="false"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-switch'"
+                    :casename="'not editable & checkedSwitchColorDisabled & uncheckedSwitchColorDisabled'"
+                ></demolink>
+
+                <w-switch
+                    :editable="false"
+                    :checkedSwitchColorDisabled="'#ff8a65'"
+                    :uncheckedSwitchColorDisabled="'#ffbca6'"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
             </div>
 
 

package/src/components/WButtonChip.vue

@@ -20,7 +20,7 @@
                     <!-- v-tooltip下第1層dom會無法拖曳, 點擊事件於這層觸發, 且組件內tabindex不能重複, 故本層設定為0 -->
                     <div
                         v-on="on"
-                        :style="`transition:all 0.3s; ${useBorderRadiusStyle} background:${useBackgroundColor}; ${editable?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
+                        :style="`transition:all 0.3s; ${useBorderRadiusStyle} background:${useBackgroundColor}; ${editable&&cursorPointer?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
                         tabindex="0"
                         v-domripple="useRipple"
                         @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
@@ -184,6 +184,7 @@ import WIconLoading from './WIconLoading.vue'
  * @vue-prop {Number} [shiftRight=0] 輸入右側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如關閉圖標與右側邊框距離，單位px，預設0
  * @vue-prop {Boolean} [active=false] 輸入是否為主動模式，預設false
  * @vue-prop {Boolean} [close=false] 輸入是否具有關閉按鈕模式，預設false
+ * @vue-prop {Boolean} [cursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
  * @vue-prop {String} [loadingColor='grey darken-2'] 輸入載入圖標顏色字串，預設'grey darken-2'
  * @vue-prop {String} [role='button'] 輸入角色字串，預設'button'
@@ -362,6 +363,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        cursorPointer: {
+            type: Boolean,
+            default: true,
+        },
         loading: {
             type: Boolean,
             default: false,

package/src/components/WButtonCircle.vue

@@ -16,7 +16,7 @@
                 <!-- v-tooltip下第1層dom會無法拖曳, 點擊事件於這層觸發, 且組件內tabindex不能重複, 故本層設定為0 -->
                 <div
                     v-on="on"
-                    :style="`position:relative; transition:all 0.3s; border-radius:50%; ${usePadding} background:${useBackgroundColor}; ${editable?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
+                    :style="`position:relative; transition:all 0.3s; ${usePadding} border-radius:50%; border:${borderWidth}px solid ${useBorderColor}; background:${useBackgroundColor}; ${editable&&cursorPointer?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
                     tabindex="0"
                     @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
                     @mouseleave="hoverTrans=false;$emit('mouseleave',$event)"
@@ -90,6 +90,10 @@ import WIconLoading from './WIconLoading.vue'
  * @vue-prop {String} [iconColor='grey darken-1'] 輸入按鈕圖標顏色字串，預設'grey darken-1'
  * @vue-prop {String} [iconColorHover='grey darken-2'] 輸入滑鼠移入時按鈕圖標顏色字串，預設'grey darken-2'
  * @vue-prop {String} [iconColorFocus='grey darken-3'] 輸入取得焦點時按鈕圖標顏色字串，預設'grey darken-3'
+ * @vue-prop {Number} [borderWidth=0] 輸入框線寬度數字，單位為px，預設0
+ * @vue-prop {String} [borderColor='transparent'] 輸入按鈕框線顏色字串，預設'transparent'
+ * @vue-prop {String} [borderColorHover='transparent'] 輸入滑鼠移入時按鈕框線顏色字串，預設'transparent'
+ * @vue-prop {String} [borderColorFocus='transparent'] 輸入取得焦點時按鈕框線顏色字串，預設'transparent'
  * @vue-prop {String} [backgroundColor='rgb(241,241,241)'] 輸入按鈕背景顏色字串，預設'rgb(241,241,241)'
  * @vue-prop {String} [backgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時按鈕背景顏色字串，預設'rgb(236,236,236)'
  * @vue-prop {String} [backgroundColorFocus='rgb(230,230,230)'] 輸入取得焦點時按鈕背景顏色字串，預設'rgb(230,230,230)'
@@ -97,6 +101,7 @@ import WIconLoading from './WIconLoading.vue'
  * @vue-prop {Object} [paddingStyle={v:4,h:4}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:4,h:4}
  * @vue-prop {Boolean} [shadow=true] 輸入是否為陰影模式，預設true
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
+ * @vue-prop {Boolean} [cursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
  * @vue-prop {String} [loadingColor='grey darken-2'] 輸入載入圖標顏色字串，預設'grey darken-2'
  * @vue-prop {Boolean} [promiseUnlock=false] 輸入是否點擊後自動設定為loading為true並需使用promise解鎖布林值，預設false
@@ -134,6 +139,22 @@ export default {
             type: String,
             default: 'grey darken-3',
         },
+        borderWidth: {
+            type: Number,
+            default: 0,
+        },
+        borderColor: {
+            type: String,
+            default: 'transparent',
+        },
+        borderColorHover: {
+            type: String,
+            default: 'transparent',
+        },
+        borderColorFocus: {
+            type: String,
+            default: 'transparent',
+        },
         backgroundColor: {
             type: String,
             default: 'rgb(241,241,241)',
@@ -169,6 +190,10 @@ export default {
                 }
             },
         },
+        cursorPointer: {
+            type: Boolean,
+            default: true,
+        },
         loading: {
             type: Boolean,
             default: false,
@@ -245,6 +270,34 @@ export default {
             return r
         },
 
+        effBorderColor: function() {
+            let vo = this
+            return color2hex(vo.borderColor)
+        },
+
+        effBorderColorHover: function() {
+            let vo = this
+            return color2hex(vo.borderColorHover)
+        },
+
+        effBorderColorFocus: function() {
+            let vo = this
+            return color2hex(vo.borderColorFocus)
+        },
+
+        useBorderColor: function() {
+            let vo = this
+            let r
+            if (vo.loadingTrans) {
+                return vo.effBorderColor
+            }
+            r = vo.focusTrans ? vo.effBorderColorFocus : vo.hoverTrans ? vo.effBorderColorHover : vo.effBorderColor
+            if (!vo.editable) {
+                r = vo.focusTrans ? vo.effBorderColorFocus : vo.effBorderColor
+            }
+            return r
+        },
+
         effBackgroundColor: function() {
             let vo = this
             return color2hex(vo.backgroundColor)

package/src/components/WCheckbox.vue

@@ -1,38 +1,59 @@
 <template>
     <div
         :style="`display:inline-block; ${editable?'cursor:pointer;':''}`"
+        tabindex="0"
         :changeParam="changeParam"
         @click="toogleValue"
+        @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
+        @mouseleave="hoverTrans=false;$emit('mouseleave',$event)"
     >
-        <WIcon
-            :icon="checkedIcon"
-            :color="editable?checkedIconColor:checkedIconColorDisabled"
-            :size="iconSize"
-            v-if="b"
-        ></WIcon>
-        <WIcon
-            :icon="uncheckedIcon"
-            :color="editable?uncheckedIconColor:uncheckedIconColorDisabled"
-            :size="iconSize"
-            v-else
-        ></WIcon>
+
+        <div style="display:flex; align-items:center;">
+
+            <WIcon
+                :icon="checkedIcon"
+                :color="useCheckedIconColor"
+                :size="iconSize"
+                v-if="b"
+            ></WIcon>
+            <WIcon
+                :icon="uncheckedIcon"
+                :color="useUncheckedIconColor"
+                :size="iconSize"
+                v-else
+            ></WIcon>
+
+            <div :style="`transition:all 0.3s; text-transform:none; padding-left:5px; color:${useTextColor}; ${useTextFontSize}`" v-if="text!==''">
+                {{text}}
+            </div>
+
+        </div>
+
     </div>
 </template>
 
 <script>
 import { mdiCheckboxMarked, mdiCheckboxBlankOutline } from '@mdi/js/mdi.js'
 import isbol from 'wsemi/src/isbol.mjs'
+import replace from 'wsemi/src/replace.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
 import WIcon from './WIcon.vue'
 
 
 /**
  * @vue-prop {Boolean|String} [value=false] 輸入是否狀態的布林值或字串，可接受true或false，或是'y'或'n'，預設false
+ * @vue-prop {String} [text=''] 輸入文字字串，預設''
+ * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
+ * @vue-prop {String} [textColorHover='grey darken-3'] 輸入滑鼠移入時文字顏色字串，預設'grey darken-3'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字字型大小字串，預設'0.85rem'
  * @vue-prop {Number} [iconSize=24] 輸入圖標大小，單位為px，預設24
  * @vue-prop {String} [checkedIcon=mdiCheckboxMarked] 輸入有效(true|'y')圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxMarked
  * @vue-prop {String} [checkedIconColor='blue darken-3'] 輸入可編輯時，有效(true|'y')圖標顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [checkedIconColorHover='blue darken-2'] 輸入滑鼠移入時可編輯時，有效(true|'y')圖標顏色字串，預設'blue darken-2'
  * @@vue-prop {String} [checkedIconColorDisabled='grey'] 輸入不可編輯時，有效(true|'y')圖標顏色字串，預設'grey'
  * @vue-prop {String} [uncheckedIcon=mdiCheckboxBlankOutline] 輸入無效(false|'n')圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設mdiCheckboxBlankOutline
  * @vue-prop {String} [uncheckedIconColor='blue darken-3'] 輸入可編輯時，無效(false|'n')圖標顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [uncheckedIconColorHover='blue darken-2'] 輸入滑鼠移入時可編輯時，無效(false|'n')圖標顏色字串，預設'blue darken-2'
  * @@vue-prop {String} [uncheckedIconColorDisabled='grey'] 輸入不可編輯時，無效(false|'n')圖標顏色字串，預設'grey'
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
@@ -45,6 +66,22 @@ export default {
             type: [Boolean, String],
             default: false,
         },
+        text: {
+            type: String,
+            default: '',
+        },
+        textColor: {
+            type: String,
+            default: 'black',
+        },
+        textColorHover: {
+            type: String,
+            default: 'grey darken-3',
+        },
+        textFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
         iconSize: {
             type: Number,
             default: 24,
@@ -57,6 +94,10 @@ export default {
             type: String,
             default: 'blue darken-3',
         },
+        checkedIconColorHover: {
+            type: String,
+            default: 'blue darken-2',
+        },
         checkedIconColorDisabled: {
             type: String,
             default: 'grey',
@@ -69,6 +110,10 @@ export default {
             type: String,
             default: 'blue darken-3',
         },
+        uncheckedIconColorHover: {
+            type: String,
+            default: 'blue darken-2',
+        },
         uncheckedIconColorDisabled: {
             type: String,
             default: 'grey',
@@ -80,7 +125,11 @@ export default {
     },
     data: function() {
         return {
+
+            hoverTrans: false,
+
             b: false,
+
         }
     },
     computed: {
@@ -104,6 +153,79 @@ export default {
             return ''
         },
 
+        effTextColor: function() {
+            let vo = this
+            return color2hex(vo.textColor)
+        },
+
+        effTextColorHover: function() {
+            let vo = this
+            return color2hex(vo.textColorHover)
+        },
+
+        useTextColor: function() {
+            let vo = this
+            let r
+            if (!vo.editable) {
+                return vo.effTextColor
+            }
+            r = vo.hoverTrans ? vo.effTextColorHover : vo.effTextColor
+            return r
+        },
+
+        useTextFontSize: function() {
+            let vo = this
+            let s = vo.textFontSize
+            s = replace(s, ';', '')
+            return `font-size:${s};`
+        },
+
+        effCheckedIconColor: function() {
+            let vo = this
+            return color2hex(vo.checkedIconColor)
+        },
+
+        effCheckedIconColorHover: function() {
+            let vo = this
+            return color2hex(vo.checkedIconColorHover)
+        },
+
+        effCheckedIconColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.checkedIconColorDisabled)
+        },
+
+        useCheckedIconColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effCheckedIconColorDisabled
+            }
+            return vo.hoverTrans ? vo.effCheckedIconColorHover : vo.effCheckedIconColor
+        },
+
+        effUncheckedIconColor: function() {
+            let vo = this
+            return color2hex(vo.uncheckedIconColor)
+        },
+
+        effUncheckedIconColorHover: function() {
+            let vo = this
+            return color2hex(vo.uncheckedIconColorHover)
+        },
+
+        effUncheckedIconColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.uncheckedIconColorDisabled)
+        },
+
+        useUncheckedIconColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effUncheckedIconColorDisabled
+            }
+            return vo.hoverTrans ? vo.effUncheckedIconColorHover : vo.effUncheckedIconColor
+        },
+
     },
     methods: {