added disabled state

Author: adamberecz

README.md

@@ -116,6 +116,7 @@ Join our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](htt
 | --- | --- | --- | --- |
 | **id** | `string` | `toggle` | The `id` attribute of input field. Make sure to customize when using more toggles on a single page. |
 | **name** | `string` | `toggle` | The `name` attribute of input field. |
+| **disabled** | `boolean` | `false` | Whether the toggle should be disabled. |
 | **falseValue** | `string\|number\|boolean` | `false` | The value when the toggle is `off`. |
 | **trueValue** | `string\|number\|boolean` | `true` | The value when toggle is `on`. |
 | **offLabel** | `string` | | The label when toggle is `off`. |
@@ -125,9 +126,12 @@ Join our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](htt
 | **speed** | `number` | `300` | The speed of toggle switch in `milliseconds`. |
 | **offBackground** | `string` | `#d4e0e7` | The color of background when toggle is `off`. |
 | **onBackground** | `string` | `#41b883` | The color of background when toggle is `on`. |
-| **offTextColor** | `string` | `#888888` | The color of text when toggle is `off`. |
+| **disabledBackground** | `string` | `#d4e0e7` | The color of background when toggle is `disabled`. |
+| **offTextColor** | `string` | `#80878c` | The color of text when toggle is `off`. |
 | **onTextColor** | `string` | `#ffffff` | The color of text when toggle is `on`. |
+| **disabledTextColor** | `string` | `#80878c` | The color of text when toggle is `disabled`. |
 | **handleColor** | `string` | `#ffffff` | The background color of toggle handle. |
+| **disabledHandleColor** | `string` | `#f2faff` | The background color of toggle handle when toggle is `disabled`. |
 | **fontSize** | `string` | `13px` | The font size of toggle labels. |
 
 ## Events

src/Toggle.vue

@@ -7,6 +7,7 @@
       type="checkbox"
       :name="name"
       :id="id"
+      :disabled="disabled"
       :checked="checked"
       :trueValue="trueValue"
       :falseValue="falseValue"
@@ -61,6 +62,11 @@
         required: false,
         default: 'toggle'
       },
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       falseValue: {
         type: [String, Number, Boolean],
         required: false,
@@ -106,21 +112,36 @@
         required: false,
         default: '#41b883'
       },
+      disabledBackground: {
+        type: String,
+        required: false,
+        default: '#d4e0e7'
+      },
       offTextColor: {
         type: String,
         required: false,
-        default: '#888888'
+        default: '#80878c'
       },
       onTextColor: {
         type: String,
         required: false,
         default: '#ffffff'
       },
+      disabledTextColor: {
+        type: String,
+        required: false,
+        default: '#80878c'
+      },
       handleColor: {
         type: String,
         required: false,
         default: '#ffffff'
       },
+      disabledHandleColor: {
+        type: String,
+        required: false,
+        default: '#f2faff'
+      },
       fontSize: {
         type: String,
         required: false,

src/composables/useStyle.js

@@ -2,18 +2,21 @@ import { computed, toRefs } from 'composition-api'
 
 export default function useStyle (props, context, dependencies)
 {
-  const { width, height, speed, offBackground, onBackground, offTextColor,
-          onTextColor, fontSize, handleColor, } = toRefs(props)
+  const { width, height, speed, offBackground, onBackground, disabledBackground, offTextColor,
+          onTextColor, disabledTextColor, fontSize, handleColor, disabledHandleColor, } = toRefs(props)
 
   // ============== COMPUTED ==============
 
   const cssVars = computed(() => {
     let cssVars = {
       '--toggle-off-background': offBackground.value,
       '--toggle-on-background': onBackground.value,
+      '--toggle-disabled-background': disabledBackground.value,
       '--toggle-off-text-color': offTextColor.value,
       '--toggle-on-text-color': onTextColor.value,
+      '--toggle-disabled-text-color': disabledTextColor.value,
       '--toggle-handle-color': handleColor.value,
+      '--toggle-disabled-handle-color': disabledHandleColor.value,
       '--toggle-height': height.value + 'px',
       '--toggle-width': width.value + 'px',
       '--toggle-speed': (speed.value / 1000) + 's',

tests/unit/composables/useStyle.spec.js

@@ -10,18 +10,24 @@ describe('useStyle', () => {
         speed: 500,
         offBackground: '#e8e8e8',
         onBackground: 'blue',
+        disabledBackground: 'red',
         offTextColor: '#111111',
         onTextColor: '#f1f1f1',
+        disabledTextColor: '#222222',
         handleColor: '#000000',
+        disabledHandleColor: '#121212',
         fontSize: '14px'
       })
 
       expect(toggle.vm.cssVars).toStrictEqual({
         '--toggle-off-background': '#e8e8e8',
         '--toggle-on-background': 'blue',
+        '--toggle-disabled-background': 'red',
         '--toggle-off-text-color': '#111111',
         '--toggle-on-text-color': '#f1f1f1',
+        '--toggle-disabled-text-color': '#222222',
         '--toggle-handle-color': '#000000',
+        '--toggle-disabled-handle-color': '#121212',
         '--toggle-height': '50px',
         '--toggle-width': '200px',
         '--toggle-speed': '0.5s',

themes/default.scss

@@ -52,7 +52,7 @@
 
       .toggle-off {
         display: flex;
-        color: #888888;
+        color: #80878c;
         color: var(--toggle-off-text-color);
       }
     }
@@ -79,5 +79,22 @@
           display: none;
         }
       }
+
+      &:disabled + label {
+        background: #d4e0e7;
+        background: var(--toggle-disabled-background);
+        cursor: not-allowed;
+
+        &:before {
+          background: #f2faff;
+          background: var(--toggle-disabled-handle-color);
+        }
+
+        .toggle-on,
+        .toggle-off {
+          color: #80878c;
+          color: var(--toggle-disabled-text-color);
+        }
+      }
     }
   }