Add ability to customize color for disabled state (#63)

Author: xavier

README.md

@@ -55,7 +55,7 @@ import ToggleButton from 'vue-js-toggle-button/src/Button'
 | sync      | Boolean           | false       | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop changes |
 | speed     | Number            | 300        | Transition time for the animation   |
 | disabled  | Boolean           | false      | Button does not react on mouse events |
-| color     | [String, Object]  | `#75C791`  | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/uncheked <br>Example: `{checked: '#00FF00', unchecked: '#FF0000'}`  |
+| color     | [String, Object]  | `#75C791`  | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/unchecked or disabled<br>Example: `{checked: '#00FF00', unchecked: '#FF0000, disabled: '#CCCCCC'}`  |
 | cssColors | Boolean           | false      | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling |
 | labels    | [Boolean, Object] | false      | If `Boolean` - shows/hides default labels ("on" and "off") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}`   |
 | switchColor     | [String, Object]            | `#BFCBD9`         | If `String` - color or background property of the switch when checked <br>If `Object` - colors or background property for the switch when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}`   |

demo/src/App.vue

@@ -31,9 +31,15 @@
 
         <toggle-button
           :value="false"
-          :width="110"
-          :color="{unchecked: '#FF6699'}"
-          :labels="{unchecked: 'Disabled button'}"
+          :width="80"
+          :labels="{unchecked: 'Disabled'}"
+          :disabled="true"/>
+
+        <toggle-button
+          :value="false"
+          :width="140"
+          :color="{disabled: '#FF6699'}"
+          :labels="{unchecked: 'Custom disabled color'}"
           :disabled="true"/>
 
         <toggle-button :value="true"

dist/index.js

@@ -118,7 +118,9 @@ export default {
       return {
         width: px(this.width),
         height: px(this.height),
-        backgroundColor: this.cssColors ? null : this.colorCurrent,
+        backgroundColor: this.cssColors
+          ? null
+          : (this.disabled ? this.colorDisabled : this.colorCurrent),
         borderRadius: px(Math.round(this.height / 2))
       }
     },
@@ -169,6 +171,14 @@ export default {
         : constants.colorUnchecked
     },
 
+    colorDisabled () {
+      let { color } = this
+
+      return contains(color, 'disabled')
+        ? color.disabled
+        : this.colorCurrent
+    },
+
     colorCurrent () {
       return this.toggled
         ? this.colorChecked