w-component-vue 2.1.78 → 2.1.81

package/docs/module-WTree.html

@@ -80,7 +80,7 @@
         <td>Number</td>
         <td><code>400</code></td>
         <td>No</td>
-        <td>輸入顯示區最大高度，單位為px，預設400</td>
+        <td>輸入顯示區最大高度，單位為px，若給予非數字則自動依照當前顯隱最高內容調整，預設400</td>
     </tr><tr>
         <td><code>defaultDisplayLevel</code></td>
         <td>Number</td>
@@ -566,7 +566,7 @@
 <br class="clear">
 
 <footer>
-    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.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a> on Sun Mar 06 2022 20:30:17 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 Mon Feb 28 2022 18:35:14 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 Sun Mar 06 2022 20:30:17 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 Mon Feb 28 2022 18:35:14 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 Sun Mar 06 2022 20:30:17 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 Mon Feb 28 2022 18:35:14 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 Sun Mar 06 2022 20:30:17 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.78",
+  "version": "2.1.81",
   "author": "yuda-lyu(semisphere)",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -536,9 +536,8 @@ export default {
                 {
                     name: 'tree',
                     cmps: [
-                        { name: 'WJsonView' },
                         { name: 'WTree' },
-
+                        { name: 'WJsonView' },
                     ]
                 },
                 {

package/src/AppZoneWJsonView.vue

@@ -40,13 +40,29 @@
             <div class="bk dz">
                 <demolink
                     :kbname="'w-json-view'"
-                    :casename="'sync viewHeightMax(change-height-of-items)'"
+                    :casename="'no viewHeightMax'"
+                ></demolink>
+
+                <w-json-view
+                    style="border:1px solid #ddd;"
+                    :viewHeightMax="null"
+                    :data="WJsonView.data3"
+                ></w-json-view>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'events'"
                 ></demolink>
 
                 <w-json-view
                     style="border:1px solid #ddd;"
                     :viewHeightMax="WJsonView.viewHeightMaxSync"
                     :data="WJsonView.data3"
+                    @change-view-items="changeViewItems"
                     @change-height-of-items="changeHeightOfItems"
                 ></w-json-view>
 
@@ -219,9 +235,11 @@ export default {
     //     console.log('WJsonView.data4', this.WJsonView.data4)
     // },
     methods: {
+        changeViewItems: function(msg) {
+            console.log('changeViewItems', msg)
+        },
         changeHeightOfItems: function(msg) {
             console.log('changeHeightOfItems', msg)
-            this.WJsonView.viewHeightMaxSync = msg.height
         },
     },
 }

package/src/AppZoneWPanelScrolly.vue

@@ -35,6 +35,7 @@
                     @scroll-infor="(msg)=>{getEvents('scroll-infor',msg)}"
                     @resize="(msg)=>{getEvents('resize',msg)}"
                     @mutation="(msg)=>{getEvents('mutation',msg)}"
+                    @visible="(msg)=>{getEvents('visible',msg)}"
                     @update:scrollTop="(msg)=>{getEvents('update:scrollTop',msg)}"
                 >
                     <table :style="WPanelScrolly.tableStyle"><tbody><tr><td :style="WPanelScrolly.tdStyle">11</td><td :style="WPanelScrolly.tdStyle">12</td><td :style="WPanelScrolly.tdStyle">13</td><td :style="WPanelScrolly.tdStyle">14</td></tr><tr><td :style="WPanelScrolly.tdStyle">21</td><td :style="WPanelScrolly.tdStyle">22</td><td :style="WPanelScrolly.tdStyle">23</td><td :style="WPanelScrolly.tdStyle">24</td></tr><tr><td :style="WPanelScrolly.tdStyle">31</td><td :style="WPanelScrolly.tdStyle">32</td><td :style="WPanelScrolly.tdStyle">33</td><td :style="WPanelScrolly.tdStyle">34</td></tr><tr><td :style="WPanelScrolly.tdStyle">41</td><td :style="WPanelScrolly.tdStyle">42</td><td :style="WPanelScrolly.tdStyle">43</td><td :style="WPanelScrolly.tdStyle">44</td></tr><tr><td :style="WPanelScrolly.tdStyle">51</td><td :style="WPanelScrolly.tdStyle">52</td><td :style="WPanelScrolly.tdStyle">53</td><td :style="WPanelScrolly.tdStyle">54</td></tr></tbody></table>

package/src/AppZoneWSwitch.vue

@@ -53,8 +53,8 @@
 
                 <w-switch
                     :text="'顯示文字(text)'"
-                    :textColor="'#24c'"
-                    :textColorHover="'#68c'"
+                    :textColor="'#44f'"
+                    :textColorHover="'#77f'"
                     v-model="WSwitch.valueBol"
                 ></w-switch>
             </div>
@@ -78,14 +78,30 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-switch'"
-                    :casename="'checkedSwitchColor & checkedSwitchColorHover & uncheckedSwitchColor & uncheckedSwitchColorHover'"
+                    :casename="'checkedSwitchCircleColor & checkedSwitchCircleColorHover & checkedSwitchBarColor & checkedSwitchBarColorHover'"
                 ></demolink>
 
                 <w-switch
-                    :checkedSwitchColor="'#f6a'"
-                    :checkedSwitchColorHover="'#f26'"
-                    :uncheckedSwitchColor="'#ccc'"
-                    :uncheckedSwitchColorHover="'#cccccc'"
+                    :checkedSwitchCircleColor="'#f6a'"
+                    :checkedSwitchCircleColorHover="'#f26'"
+                    :checkedSwitchBarColor="'rgba(255, 102, 170, 0.6)'"
+                    :checkedSwitchBarColorHover="'rgba(255, 54, 122, 0.6)'"
+                    v-model="WSwitch.valueBol"
+                ></w-switch>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-switch'"
+                    :casename="'uncheckedSwitchCircleColor & uncheckedSwitchCircleColorHover & uncheckedSwitchBarColor & uncheckedSwitchBarColorHover'"
+                ></demolink>
+
+                <w-switch
+                    :uncheckedSwitchCircleColor="'#74a4d9'"
+                    :uncheckedSwitchCircleColorHover="'#69e'"
+                    :uncheckedSwitchBarColor="'#d1e1f2'"
+                    :uncheckedSwitchBarColorHover="'#bce'"
                     v-model="WSwitch.valueBol"
                 ></w-switch>
             </div>
@@ -107,13 +123,15 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-switch'"
-                    :casename="'not editable & checkedSwitchColorDisabled & uncheckedSwitchColorDisabled'"
+                    :casename="'not editable & checkedSwitchCircleColorDisabled & checkedSwitchBarColorDisabled & uncheckedSwitchCircleColorDisabled & uncheckedSwitchBarColorDisabled'"
                 ></demolink>
 
                 <w-switch
                     :editable="false"
-                    :checkedSwitchColorDisabled="'#ff8a65'"
-                    :uncheckedSwitchColorDisabled="'#ffbca6'"
+                    :checkedSwitchCircleColorDisabled="'#ff8a65'"
+                    :checkedSwitchBarColorDisabled="'#ffbca6'"
+                    :uncheckedSwitchCircleColorDisabled="'rgba(255, 138, 101, 0.5)'"
+                    :uncheckedSwitchBarColorDisabled="'rgba(255, 188, 166, 0.5)'"
                     v-model="WSwitch.valueBol"
                 ></w-switch>
             </div>

package/src/AppZoneWTree.vue

@@ -71,13 +71,29 @@
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'sync viewHeightMax(change-height-of-items)'"
+                    :casename="'no viewHeightMax'"
+                ></demolink>
+
+                <w-tree
+                    style="border:1px solid #ddd;"
+                    :viewHeightMax="null"
+                    :data="WTree.option.items"
+                ></w-tree>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'events'"
                 ></demolink>
 
                 <w-tree
                     style="border:1px solid #ddd;"
                     :viewHeightMax="WTree.viewHeightMaxSync"
                     :data="WTree.option.items"
+                    @change-view-items="changeViewItems"
                     @change-height-of-items="changeHeightOfItems"
                 ></w-tree>
 
@@ -1315,10 +1331,6 @@ export default {
         }
     },
     methods: {
-        changeHeightOfItems: function(msg) {
-            console.log('changeHeightOfItems', msg)
-            this.WTree.viewHeightMaxSync = msg.height
-        },
         showSelection: function(selections) {
             let ss = {}
             for (let i = 0; i < selections.length; i++) {
@@ -1346,6 +1358,9 @@ export default {
         changeViewItems: function(msg) {
             console.log('changeViewItems', msg)
         },
+        changeHeightOfItems: function(msg) {
+            console.log('changeHeightOfItems', msg)
+        },
         mouseenter: function(msg) {
             console.log('mouseenter', msg)
             msg.ele.style.transition = 'all 0.3s'

package/src/components/WDrawer.vue

@@ -42,14 +42,14 @@
             <div
                 :style="`position:${effOverlayPosition}; ${effDrawerDetectLoction} top:0px; right:0px; bottom:0px; z-index:${effDrawerZIndex+1}; width:${effDrawerDetectWidth}; height:100%; overflow:hidden;`"
                 @click="(ev)=>{ckToggle(ev,false)}"
-                v-if="showOverlay2Detect"
+                v-show="showOverlay2Detect"
             >
 
                 <!-- drawer平移層 -->
                 <div
-                    class="ts"
+                    _class="ts"
                     :style="`height:100%; display:flex; justify-content:${ isAtLeft ? 'start' : 'end' };`"
-                    v-if="showOverlay4Translate"
+                    _v-show="showOverlay4Translate"
                 >
 
                     <div
@@ -138,7 +138,7 @@ export default {
             // effOverlay3Shadow: false,
 
             timerOverlay4Translate: null,
-            showOverlay4Translate: false,
+            // showOverlay4Translate: false,
             effOverlay4Translate: false,
 
         }
@@ -279,7 +279,7 @@ export default {
 
             let sec
 
-            //fsm
+            //check
             if (value) {
                 // vo.fsmShowOverlay.showOverlay()
                 // vo.fsmShowStateOverlay.showOverlay()
@@ -302,7 +302,7 @@ export default {
 
                 // showOverlay4Translate: false,
                 // effOverlay4Translate: false,
-                vo.showOverlay4Translate = true
+                // vo.showOverlay4Translate = true
                 vo.timerOverlay4Translate = setTimeout(() => {
                     vo.effOverlay4Translate = true
                 }, sec)
@@ -335,9 +335,9 @@ export default {
                 // showOverlay4Translate: false,
                 // effOverlay4Translate: false,
                 vo.effOverlay4Translate = false
-                vo.timerOverlay4Translate = setTimeout(() => {
-                    vo.showOverlay4Translate = false
-                }, sec)
+                // vo.timerOverlay4Translate = setTimeout(() => {
+                //     vo.showOverlay4Translate = false
+                // }, sec)
 
             }
 

package/src/components/WJsonView.vue

@@ -106,7 +106,7 @@ import WTree from './WTree.vue'
 
 /**
  * @vue-prop {Array|Object} [data={}] 輸入資料陣列或物件，預設{}
- * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，預設400
+ * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，若給予非數字則自動依照當前顯隱最高內容調整，預設400
  * @vue-prop {Number} [defaultDisplayLevel=null] 輸入初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
  * @vue-prop {Number} [indent=1] 輸入縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設1
  * @vue-prop {Number} [iconHeight=24] 輸入顯隱icon按鈕高度數字，單位為px，預設24

package/src/components/WListVertical.vue

@@ -245,9 +245,15 @@ export default {
                 footerHeight = eleFooter.offsetHeight
             }
 
-
             //listHeight
-            vo.listHeight = vo.panelHeight - headerHeight - footerHeight
+            let listHeight = vo.panelHeight - headerHeight - footerHeight
+            // console.log('vo.panelHeight', vo.panelHeight, 'headerHeight', headerHeight, 'footerHeight', footerHeight)
+            // console.log('listHeight',  listHeight)
+
+            //check
+            if (listHeight > 0 && vo.listHeight !== listHeight) {
+                vo.listHeight = listHeight
+            }
 
         },
 

package/src/components/WPanelScrollyCore.vue

@@ -36,6 +36,8 @@
                     :style="``"
                     v-dommutation
                     @dommutation="mutation"
+                    v-domvisible
+                    @domvisible="visible"
                 >
                     <slot></slot>
                 </div>
@@ -71,6 +73,7 @@ import waitFun from 'wsemi/src/waitFun.mjs'
 import debounce from 'wsemi/src/debounce.mjs'
 import domResize from '../js/domResize.mjs'
 import domMutation from '../js/domMutation.mjs'
+import domVisible from '../js/domVisible.mjs'
 
 
 /**
@@ -83,6 +86,7 @@ export default {
     directives: {
         domresize: domResize(),
         dommutation: domMutation(),
+        domvisible: domVisible(),
     },
     components: {
     },
@@ -217,8 +221,8 @@ export default {
             if (divContent) {
                 // console.log('resizeShell divContent.offsetHeight', divContent.offsetHeight)
 
-                //save
-                if (vo.contentHeight !== divContent.offsetHeight) {
+                //check, 若為隱藏則不偵測與更新
+                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {
                     // console.log('resizeShell 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)
                     vo.contentHeight = divContent.offsetHeight
                 }
@@ -246,13 +250,11 @@ export default {
 
             //divContent
             let divContent = get(vo, '$refs.divContent')
-
-            //check
             if (divContent) {
                 // console.log('mutation divContent.offsetHeight', divContent.offsetHeight)
 
-                //save
-                if (vo.contentHeight !== divContent.offsetHeight) {
+                //check, 若為隱藏則不偵測與更新
+                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {
                     // console.log('mutation 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)
                     vo.contentHeight = divContent.offsetHeight
                 }
@@ -267,6 +269,32 @@ export default {
 
         },
 
+        visible: function(v) {
+            // console.log('methods visible', v)
+
+            let vo = this
+
+            //divContent
+            let divContent = get(vo, '$refs.divContent')
+            if (divContent) {
+                // console.log('visible divContent.offsetHeight', divContent.offsetHeight)
+
+                //check, 若為隱藏則不偵測與更新
+                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {
+                    // console.log('visible 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)
+                    vo.contentHeight = divContent.offsetHeight
+                }
+
+            }
+
+            //updateRatio
+            vo.updateRatio()
+
+            //emit
+            vo.triggerEvent('visible', { visible: v, from: 'content' })
+
+        },
+
         updateRatio: function() {
             // console.log('methods updateRatio')
 

package/src/components/WSwitch.vue

@@ -13,10 +13,10 @@
             <div :style="`padding:2px 0px; height:${4+Math.max(heightCir,heightBar)}px;`">
                 <div :style="`position:relative; padding-top:${(heightCir-heightBar)/2}px;`">
 
-                    <div class="ts" :style="`width:${widthBar}px; height:${heightBar}px; border-radius:8px; opacity:0.6; background:${useSwitchColor};`">
+                    <div class="ts" :style="`width:${widthBar}px; height:${heightBar}px; border-radius:8px; background:${useSwitchBarColor};`">
                     </div>
 
-                    <div class="ts bs" :style="`position:absolute; top:0px; left:${ b ? widthBar-widthCir : 0 }px; width:${widthCir}px; height:${heightCir}px; border-radius:50%; background:${useSwitchColor};`">
+                    <div class="ts bs" :style="`position:absolute; top:0px; left:${ b ? widthBar-widthCir : 0 }px; width:${widthCir}px; height:${heightCir}px; border-radius:50%; background:${useSwitchCircleColor};`">
                     </div>
 
                 </div>
@@ -44,12 +44,18 @@ import color2hex from '../js/vuetifyColor.mjs'
  * @vue-prop {String} [textColorHover='grey darken-3'] 輸入滑鼠移入時文字顏色字串，預設'grey darken-3'
  * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字字型大小字串，預設'0.85rem'
  * @vue-prop {Number} [switchSize=24] 輸入切換器大小，單位為px，預設24
- * @vue-prop {String} [checkedSwitchColor='blue darken-3'] 輸入可編輯時，有效(true|'y')切換器顏色字串，預設'blue darken-3'
- * @vue-prop {String} [checkedSwitchColorHover='blue darken-2'] 輸入滑鼠移入時可編輯時，有效(true|'y')切換器顏色字串，預設'blue darken-2'
- * @@vue-prop {String} [checkedSwitchColorDisabled='grey'] 輸入不可編輯時，有效(true|'y')切換器顏色字串，預設'grey'
- * @vue-prop {String} [uncheckedSwitchColor='#8ad'] 輸入可編輯時，無效(false|'n')切換器顏色字串，預設'#8ad'
- * @vue-prop {String} [uncheckedSwitchColorHover='#9bd'] 輸入滑鼠移入時可編輯時，無效(false|'n')切換器顏色字串，預設'#9bd'
- * @@vue-prop {String} [uncheckedSwitchColorDisabled='#bbb'] 輸入不可編輯時，無效(false|'n')切換器顏色字串，預設'#bbb'
+ * @vue-prop {String} [checkedSwitchCircleColor='blue darken-3'] 輸入可編輯時，有效(true|'y')切換器鈕扣區顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [checkedSwitchCircleColorHover='blue darken-2'] 輸入滑鼠移入時可編輯時，有效(true|'y')切換器鈕扣區顏色字串，預設'blue darken-2'
+ * @vue-prop {String} [checkedSwitchCircleColorDisabled='grey'] 輸入不可編輯時，有效(true|'y')切換器鈕扣區顏色字串，預設'grey'
+ * @vue-prop {String} [uncheckedSwitchCircleColor='#8ad'] 輸入可編輯時，無效(false|'n')切換器鈕扣區顏色字串，預設'#8ad'
+ * @vue-prop {String} [uncheckedSwitchCircleColorHover='#9bd'] 輸入滑鼠移入時可編輯時，無效(false|'n')切換器鈕扣區顏色字串，預設'#9bd'
+ * @vue-prop {String} [uncheckedSwitchCircleColorDisabled='#bbb'] 輸入不可編輯時，無效(false|'n')切換器鈕扣區顏色字串，預設'#bbb'
+ * @vue-prop {String} [checkedSwitchBarColor='blue darken-3'] 輸入可編輯時，有效(true|'y')切換器滑動區顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [checkedSwitchBarColorHover='blue darken-2'] 輸入滑鼠移入時可編輯時，有效(true|'y')切換器滑動區顏色字串，預設'blue darken-2'
+ * @@vue-prop {String} [checkedSwitchBarColorDisabled='grey'] 輸入不可編輯時，有效(true|'y')切換器滑動區顏色字串，預設'grey'
+ * @vue-prop {String} [uncheckedSwitchBarColor='#8ad'] 輸入可編輯時，無效(false|'n')切換器滑動區顏色字串，預設'#8ad'
+ * @vue-prop {String} [uncheckedSwitchBarColorHover='#9bd'] 輸入滑鼠移入時可編輯時，無效(false|'n')切換器滑動區顏色字串，預設'#9bd'
+ * @vue-prop {String} [uncheckedSwitchBarColorDisabled='#bbb'] 輸入不可編輯時，無效(false|'n')切換器滑動區顏色字串，預設'#bbb'
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
@@ -78,30 +84,54 @@ export default {
             type: Number,
             default: 24,
         },
-        checkedSwitchColor: {
+        checkedSwitchCircleColor: {
             type: String,
             default: 'blue darken-3',
         },
-        checkedSwitchColorHover: {
+        checkedSwitchCircleColorHover: {
             type: String,
             default: 'blue darken-2',
         },
-        checkedSwitchColorDisabled: {
+        checkedSwitchCircleColorDisabled: {
             type: String,
             default: 'grey',
         },
-        uncheckedSwitchColor: {
+        uncheckedSwitchCircleColor: {
             type: String,
-            default: '#8ad',
+            default: '#fafafa',
         },
-        uncheckedSwitchColorHover: {
+        uncheckedSwitchCircleColorHover: {
             type: String,
-            default: '#9bd',
+            default: '#fff',
         },
-        uncheckedSwitchColorDisabled: {
+        uncheckedSwitchCircleColorDisabled: {
             type: String,
             default: '#bbb',
         },
+        checkedSwitchBarColor: {
+            type: String,
+            default: 'rgba(24, 103, 192, 0.6)',
+        },
+        checkedSwitchBarColorHover: {
+            type: String,
+            default: 'rgba(24, 103, 192, 0.5)',
+        },
+        checkedSwitchBarColorDisabled: {
+            type: String,
+            default: '#ececec',
+        },
+        uncheckedSwitchBarColor: {
+            type: String,
+            default: '#c5c5c5',
+        },
+        uncheckedSwitchBarColorHover: {
+            type: String,
+            default: '#ccc',
+        },
+        uncheckedSwitchBarColorDisabled: {
+            type: String,
+            default: '#ececec',
+        },
         editable: {
             type: Boolean,
             default: true,
@@ -186,55 +216,106 @@ export default {
             return `font-size:${s};`
         },
 
-        effCheckedSwitchColor: function() {
+        effCheckedSwitchCircleColor: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchCircleColor)
+        },
+
+        effCheckedSwitchCircleColorHover: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchCircleColorHover)
+        },
+
+        effCheckedSwitchCircleColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.checkedSwitchCircleColorDisabled)
+        },
+
+        useCheckedSwitchCircleColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effCheckedSwitchCircleColorDisabled
+            }
+            return vo.hoverTrans ? vo.effCheckedSwitchCircleColorHover : vo.effCheckedSwitchCircleColor
+        },
+
+        effUncheckedSwitchCircleColor: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchCircleColor)
+        },
+
+        effUncheckedSwitchCircleColorHover: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchCircleColorHover)
+        },
+
+        effUncheckedSwitchCircleColorDisabled: function() {
+            let vo = this
+            return color2hex(vo.uncheckedSwitchCircleColorDisabled)
+        },
+
+        useUncheckedSwitchCircleColor: function() {
+            let vo = this
+            if (!vo.editable) {
+                return vo.effUncheckedSwitchCircleColorDisabled
+            }
+            return vo.hoverTrans ? vo.effUncheckedSwitchCircleColorHover : vo.effUncheckedSwitchCircleColor
+        },
+
+        useSwitchCircleColor: function() {
+            let vo = this
+            return vo.b ? vo.useCheckedSwitchCircleColor : vo.useUncheckedSwitchCircleColor
+        },
+
+        effCheckedSwitchBarColor: function() {
             let vo = this
-            return color2hex(vo.checkedSwitchColor)
+            return color2hex(vo.checkedSwitchBarColor)
         },
 
-        effCheckedSwitchColorHover: function() {
+        effCheckedSwitchBarColorHover: function() {
             let vo = this
-            return color2hex(vo.checkedSwitchColorHover)
+            return color2hex(vo.checkedSwitchBarColorHover)
         },
 
-        effCheckedSwitchColorDisabled: function() {
+        effCheckedSwitchBarColorDisabled: function() {
             let vo = this
-            return color2hex(vo.checkedSwitchColorDisabled)
+            return color2hex(vo.checkedSwitchBarColorDisabled)
         },
 
-        useCheckedSwitchColor: function() {
+        useCheckedSwitchBarColor: function() {
             let vo = this
             if (!vo.editable) {
-                return vo.effCheckedSwitchColorDisabled
+                return vo.effCheckedSwitchBarColorDisabled
             }
-            return vo.hoverTrans ? vo.effCheckedSwitchColorHover : vo.effCheckedSwitchColor
+            return vo.hoverTrans ? vo.effCheckedSwitchBarColorHover : vo.effCheckedSwitchBarColor
         },
 
-        effUncheckedSwitchColor: function() {
+        effUncheckedSwitchBarColor: function() {
             let vo = this
-            return color2hex(vo.uncheckedSwitchColor)
+            return color2hex(vo.uncheckedSwitchBarColor)
         },
 
-        effUncheckedSwitchColorHover: function() {
+        effUncheckedSwitchBarColorHover: function() {
             let vo = this
-            return color2hex(vo.uncheckedSwitchColorHover)
+            return color2hex(vo.uncheckedSwitchBarColorHover)
         },
 
-        effUncheckedSwitchColorDisabled: function() {
+        effUncheckedSwitchBarColorDisabled: function() {
             let vo = this
-            return color2hex(vo.uncheckedSwitchColorDisabled)
+            return color2hex(vo.uncheckedSwitchBarColorDisabled)
         },
 
-        useUncheckedSwitchColor: function() {
+        useUncheckedSwitchBarColor: function() {
             let vo = this
             if (!vo.editable) {
-                return vo.effUncheckedSwitchColorDisabled
+                return vo.effUncheckedSwitchBarColorDisabled
             }
-            return vo.hoverTrans ? vo.effUncheckedSwitchColorHover : vo.effUncheckedSwitchColor
+            return vo.hoverTrans ? vo.effUncheckedSwitchBarColorHover : vo.effUncheckedSwitchBarColor
         },
 
-        useSwitchColor: function() {
+        useSwitchBarColor: function() {
             let vo = this
-            return vo.b ? vo.useCheckedSwitchColor : vo.useUncheckedSwitchColor
+            return vo.b ? vo.useCheckedSwitchBarColor : vo.useUncheckedSwitchBarColor
         },
 
     },