Skip to content

Commit f68ccdc

Browse files
adambereczadamberecz
committed
restructured colors property
1 parent e22a58f commit f68ccdc

File tree

5 files changed

+76
-67
lines changed

5 files changed

+76
-67
lines changed

‎README.md‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -124,14 +124,7 @@ Join our [Discord channel](https://discord.gg/WhX2nG6GTQ) or [open an issue](htt
124124
| **width** | `number` | `54` | The width of the toggle in `px`. |
125125
| **height** | `number` | `24` | The height of the toggle in `px`. |
126126
| **speed** | `number` | `300` | The speed of toggle switch in `milliseconds`. |
127-
| **offBackground** | `string` | `#d4e0e7` | The color of background when toggle is `off`. |
128-
| **onBackground** | `string` | `#41b883` | The color of background when toggle is `on`. |
129-
| **disabledBackground** | `string` | `#d4e0e7` | The color of background when toggle is `disabled`. |
130-
| **offTextColor** | `string` | `#80878c` | The color of text when toggle is `off`. |
131-
| **onTextColor** | `string` | `#ffffff` | The color of text when toggle is `on`. |
132-
| **disabledTextColor** | `string` | `#80878c` | The color of text when toggle is `disabled`. |
133-
| **handleColor** | `string` | `#ffffff` | The background color of toggle handle. |
134-
| **disabledHandleColor** | `string` | `#f2faff` | The background color of toggle handle when toggle is `disabled`. |
127+
| **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;`}` |
135128
| **fontSize** | `string` | `13px` | The font size of toggle labels. |
136129

137130
## Events

‎src/Toggle.vue‎

Lines changed: 3 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -102,45 +102,10 @@
102102
required: false,
103103
default: 300
104104
},
105-
offBackground: {
106-
type: String,
107-
required: false,
108-
default: '#d4e0e7'
109-
},
110-
onBackground: {
111-
type: String,
112-
required: false,
113-
default: '#41b883'
114-
},
115-
disabledBackground: {
116-
type: String,
117-
required: false,
118-
default: '#d4e0e7'
119-
},
120-
offTextColor: {
121-
type: String,
122-
required: false,
123-
default: '#80878c'
124-
},
125-
onTextColor: {
126-
type: String,
127-
required: false,
128-
default: '#ffffff'
129-
},
130-
disabledTextColor: {
131-
type: String,
132-
required: false,
133-
default: '#80878c'
134-
},
135-
handleColor: {
136-
type: String,
137-
required: false,
138-
default: '#ffffff'
139-
},
140-
disabledHandleColor: {
141-
type: String,
105+
colors: {
106+
type: Object,
142107
required: false,
143-
default: '#f2faff'
108+
default: () => ({})
144109
},
145110
fontSize: {
146111
type: String,

‎src/composables/useStyle.js‎

Lines changed: 51 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,62 @@
1-
import { computed, toRefs } from 'composition-api'
1+
import { ref, computed, toRefs } from 'composition-api'
22

33
export default function useStyle (props, context, dependencies)
44
{
5-
const { width, height, speed, offBackground, onBackground, disabledBackground, offTextColor,
6-
onTextColor, disabledTextColor, fontSize, handleColor, disabledHandleColor, } = toRefs(props)
5+
const { width, height, speed, colors, fontSize } = toRefs(props)
6+
7+
// ================ DATA ================
8+
9+
// no export
10+
const defaultColors = ref({
11+
background: {
12+
on: '#41b883',
13+
off: '#d4e0e7',
14+
disabled: '#d4e0e7',
15+
},
16+
text: {
17+
on: '#ffffff',
18+
off: '#80878c',
19+
disabled: '#80878c',
20+
},
21+
handle: {
22+
on: '#ffffff',
23+
off: '#ffffff',
24+
disabled: '#f2faff',
25+
},
26+
})
727

828
// ============== COMPUTED ==============
929

30+
// no export
31+
const cssColors = computed(() => {
32+
let cssColors = Object.assign({}, defaultColors.value)
33+
34+
if (colors.value.background) {
35+
cssColors.background = Object.assign({}, cssColors.background, colors.value.background)
36+
}
37+
38+
if (colors.value.text) {
39+
cssColors.text = Object.assign({}, cssColors.text, colors.value.text)
40+
}
41+
42+
if (colors.value.handle) {
43+
cssColors.handle = Object.assign({}, cssColors.handle, colors.value.handle)
44+
}
45+
46+
return cssColors
47+
})
48+
1049
const cssVars = computed(() => {
1150
let cssVars = {
12-
'--toggle-off-background': offBackground.value,
13-
'--toggle-on-background': onBackground.value,
14-
'--toggle-disabled-background': disabledBackground.value,
15-
'--toggle-off-text-color': offTextColor.value,
16-
'--toggle-on-text-color': onTextColor.value,
17-
'--toggle-disabled-text-color': disabledTextColor.value,
18-
'--toggle-handle-color': handleColor.value,
19-
'--toggle-disabled-handle-color': disabledHandleColor.value,
51+
'--toggle-off-background': cssColors.value.background.off,
52+
'--toggle-on-background': cssColors.value.background.on,
53+
'--toggle-disabled-background': cssColors.value.background.disabled,
54+
'--toggle-off-text-color': cssColors.value.text.off,
55+
'--toggle-on-text-color': cssColors.value.text.on,
56+
'--toggle-disabled-text-color': cssColors.value.text.disabled,
57+
'--toggle-on-handle-color': cssColors.value.handle.on,
58+
'--toggle-off-handle-color': cssColors.value.handle.off,
59+
'--toggle-disabled-handle-color': cssColors.value.handle.disabled,
2060
'--toggle-height': height.value + 'px',
2161
'--toggle-width': width.value + 'px',
2262
'--toggle-speed': (speed.value / 1000) + 's',

‎tests/unit/composables/useStyle.spec.js‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,22 @@ describe('useStyle', () => {
88
width: 200,
99
height: 50,
1010
speed: 500,
11-
offBackground: '#e8e8e8',
12-
onBackground: 'blue',
13-
disabledBackground: 'red',
14-
offTextColor: '#111111',
15-
onTextColor: '#f1f1f1',
16-
disabledTextColor: '#222222',
17-
handleColor: '#000000',
18-
disabledHandleColor: '#121212',
11+
colors: {
12+
background: {
13+
off: '#e8e8e8',
14+
on: 'blue',
15+
disabled: 'red',
16+
},
17+
text: {
18+
on: '#f1f1f1',
19+
off: '#111111',
20+
disabled: '#222222',
21+
},
22+
handle: {
23+
on: '#000000',
24+
disabled: '#121212',
25+
}
26+
},
1927
fontSize: '14px'
2028
})
2129

@@ -26,7 +34,8 @@ describe('useStyle', () => {
2634
'--toggle-off-text-color': '#111111',
2735
'--toggle-on-text-color': '#f1f1f1',
2836
'--toggle-disabled-text-color': '#222222',
29-
'--toggle-handle-color': '#000000',
37+
'--toggle-on-handle-color': '#000000',
38+
'--toggle-off-handle-color': '#ffffff',
3039
'--toggle-disabled-handle-color': '#121212',
3140
'--toggle-height': '50px',
3241
'--toggle-width': '200px',

‎themes/default.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
&:before {
2424
content: " ";
2525
background: #ffffff;
26-
background: var(--toggle-handle-color);
26+
background: var(--toggle-off-handle-color);
2727
width: 18px;
2828
width: var(--toggle-handle-size);
2929
height: 18px;
@@ -68,6 +68,8 @@
6868
padding-left: 6px;
6969

7070
&:before {
71+
background: #ffffff;
72+
background: var(--toggle-on-handle-color);
7173
left: calc(100% - var(--toggle-handle-right-on));
7274
}
7375

0 commit comments

Comments
 (0)