npm - w-component-vue - Versions diffs - 2.1.78 → 2.1.79 - Mend

w-component-vue 2.1.78 → 2.1.79

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (841) hide show

package/docs/module-WTableDyn.html CHANGED Viewed

@@ -684,7 +684,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WText.html CHANGED Viewed

@@ -422,7 +422,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTextCore.html CHANGED Viewed

@@ -248,7 +248,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTextInt.html CHANGED Viewed

@@ -374,7 +374,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTextIntCore.html CHANGED Viewed

@@ -278,7 +278,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTextSelect.html CHANGED Viewed

@@ -434,7 +434,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTextSuggest.html CHANGED Viewed

@@ -464,7 +464,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTextSuggestCore.html CHANGED Viewed

@@ -368,7 +368,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTextarea.html CHANGED Viewed

@@ -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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTimeday.html CHANGED Viewed

@@ -332,7 +332,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTimedayCore.html CHANGED Viewed

@@ -230,7 +230,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTimedayRange.html CHANGED Viewed

@@ -338,7 +338,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTimedayRangeCore.html CHANGED Viewed

@@ -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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTimeminute.html CHANGED Viewed

@@ -368,7 +368,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteCore.html CHANGED Viewed

@@ -272,7 +272,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRange.html CHANGED Viewed

@@ -380,7 +380,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRangeCore.html CHANGED Viewed

@@ -284,7 +284,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTinymceVueDyn.html CHANGED Viewed

@@ -224,7 +224,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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTree.html CHANGED Viewed

@@ -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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html CHANGED Viewed

@@ -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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html CHANGED Viewed

@@ -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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html CHANGED Viewed

@@ -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 Mon Feb 28 2022 21:08:12 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 <script>prettyPrint();</script>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "w-component-vue",
-  "version": "2.1.78",
+  "version": "2.1.79",
   "author": "yuda-lyu(semisphere)",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/AppZoneWSwitch.vue CHANGED Viewed

@@ -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/components/WSwitch.vue CHANGED Viewed

@@ -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
         },
     },