restructured colors property

Author: adamberecz

README.md

@@ -124,14 +124,7 @@ Join our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](htt
 | **width** | `number` | `54` | The width of the toggle in `px`. |
 | **height** | `number` | `24` | The height of the toggle in `px`. |
 | **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`. |
-| **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`. |
+| **colors** | `object` |  | The colors of toggle. Default:<br/>`{`<br/>&nbsp;&nbsp;`background: {`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`on: '#41b883',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`off: '#d4e0e7',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`disabled: '#d4e0e7'`<br/>&nbsp;&nbsp;`},`<br/>&nbsp;&nbsp;`text: {`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`on: '#ffffff',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`off: '#80878c',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`disabled: '#80878c'`<br/>&nbsp;&nbsp;`},`<br/>&nbsp;&nbsp;`handle: {`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`on: '#ffffff',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`off: '#ffffff',`<br/>&nbsp;&nbsp;&nbsp;&nbsp;`disabled: '#f2faff'`<br/>&nbsp;&nbsp;`}` |
 | **fontSize** | `string` | `13px` | The font size of toggle labels. |
 
 ## Events

src/Toggle.vue

@@ -102,45 +102,10 @@
         required: false,
         default: 300
       },
-      offBackground: {
-        type: String,
-        required: false,
-        default: '#d4e0e7'
-      },
-      onBackground: {
-        type: String,
-        required: false,
-        default: '#41b883'
-      },
-      disabledBackground: {
-        type: String,
-        required: false,
-        default: '#d4e0e7'
-      },
-      offTextColor: {
-        type: String,
-        required: false,
-        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,
+      colors: {
+        type: Object,
         required: false,
-        default: '#f2faff'
+        default: () => ({})
       },
       fontSize: {
         type: String,

src/composables/useStyle.js

@@ -1,22 +1,62 @@
-import { computed, toRefs } from 'composition-api'
+import { ref, computed, toRefs } from 'composition-api'
 
 export default function useStyle (props, context, dependencies)
 {
-  const { width, height, speed, offBackground, onBackground, disabledBackground, offTextColor,
-          onTextColor, disabledTextColor, fontSize, handleColor, disabledHandleColor, } = toRefs(props)
+  const { width, height, speed, colors, fontSize } = toRefs(props)
+
+  // ================ DATA ================
+
+  // no export
+  const defaultColors = ref({
+    background: {
+      on: '#41b883',
+      off: '#d4e0e7',
+      disabled: '#d4e0e7',
+    },
+    text: {
+      on: '#ffffff',
+      off: '#80878c',
+      disabled: '#80878c',
+    },
+    handle: {
+      on: '#ffffff',
+      off: '#ffffff',
+      disabled: '#f2faff',
+    },
+  })
 
   // ============== COMPUTED ==============
 
+  // no export
+  const cssColors = computed(() => {
+    let cssColors = Object.assign({}, defaultColors.value)
+
+    if (colors.value.background) {
+      cssColors.background = Object.assign({}, cssColors.background, colors.value.background)
+    }
+
+    if (colors.value.text) {
+      cssColors.text = Object.assign({}, cssColors.text, colors.value.text)
+    }
+
+    if (colors.value.handle) {
+      cssColors.handle = Object.assign({}, cssColors.handle, colors.value.handle)
+    }
+
+    return cssColors
+  })
+
   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-off-background': cssColors.value.background.off,
+      '--toggle-on-background': cssColors.value.background.on,
+      '--toggle-disabled-background': cssColors.value.background.disabled,
+      '--toggle-off-text-color': cssColors.value.text.off,
+      '--toggle-on-text-color': cssColors.value.text.on,
+      '--toggle-disabled-text-color': cssColors.value.text.disabled,
+      '--toggle-on-handle-color': cssColors.value.handle.on,
+      '--toggle-off-handle-color': cssColors.value.handle.off,
+      '--toggle-disabled-handle-color': cssColors.value.handle.disabled,
       '--toggle-height': height.value + 'px',
       '--toggle-width': width.value + 'px',
       '--toggle-speed': (speed.value / 1000) + 's',

tests/unit/composables/useStyle.spec.js

@@ -8,14 +8,22 @@ describe('useStyle', () => {
         width: 200,
         height: 50,
         speed: 500,
-        offBackground: '#e8e8e8',
-        onBackground: 'blue',
-        disabledBackground: 'red',
-        offTextColor: '#111111',
-        onTextColor: '#f1f1f1',
-        disabledTextColor: '#222222',
-        handleColor: '#000000',
-        disabledHandleColor: '#121212',
+        colors: {
+          background: {
+            off: '#e8e8e8',
+            on: 'blue',
+            disabled: 'red',
+          },
+          text: {
+            on: '#f1f1f1',
+            off: '#111111',
+            disabled: '#222222',
+          },
+          handle: {
+            on: '#000000',
+            disabled: '#121212',
+          }
+        },
         fontSize: '14px'
       })
 
@@ -26,7 +34,8 @@ describe('useStyle', () => {
         '--toggle-off-text-color': '#111111',
         '--toggle-on-text-color': '#f1f1f1',
         '--toggle-disabled-text-color': '#222222',
-        '--toggle-handle-color': '#000000',
+        '--toggle-on-handle-color': '#000000',
+        '--toggle-off-handle-color': '#ffffff',
         '--toggle-disabled-handle-color': '#121212',
         '--toggle-height': '50px',
         '--toggle-width': '200px',

themes/default.scss

@@ -23,7 +23,7 @@
       &:before {
         content: " ";
         background: #ffffff;
-        background: var(--toggle-handle-color);
+        background: var(--toggle-off-handle-color);
         width: 18px;
         width: var(--toggle-handle-size);
         height: 18px;
@@ -68,6 +68,8 @@
         padding-left: 6px;
 
         &:before {
+          background: #ffffff;
+          background: var(--toggle-on-handle-color);
           left: calc(100% - var(--toggle-handle-right-on));
         }