This PR adds a new prop called colorLabel which is basically the same as the prop color, but it changes the color of the label instead of the background.
Since it's using the same logic (computed properties) as the color prop, I decided to create a new component specific for labels called ButtonLabel.vue (since the other component is called Button.vue), and to reuse the logic I created a mixin that is being used by both components. That way all the computed properties and some props are being reused and there isn't no code duplication.
I had to just remove the consts and changed to data properties, so that the colors are different in between those two components.
For me to reuse those computed properties in a mixin between those two components, the prop color being used differently in each component.
The prop color inside ButtonLabel.vue is being used for the label colors (font color).
The prop color inside Button.vue is being used for the background color of the toggle.
The v-switch-label class was moved to the children component.
The slots was removed for now since there wasn't no used to them.
I also removed an isBoolean import that was not being used.
I tested in my browser by importing the dist into another Vue project.
The README.md was also updated.
This is the best I could do for this to be as cleanest as possible, and to have no code duplication.
Please let me know what do you think of this.
Thank you.
This closes #102 .
This PR adds a new prop called
colorLabel
which is basically the same as the propcolor
, but it changes the color of the label instead of the background. Since it's using the same logic (computed properties) as thecolor
prop, I decided to create a new component specific for labels calledButtonLabel.vue
(since the other component is calledButton.vue
), and to reuse the logic I created a mixin that is being used by both components. That way all the computed properties and some props are being reused and there isn't no code duplication. I had to just remove theconsts
and changed todata
properties, so that the colors are different in between those two components. For me to reuse those computed properties in a mixin between those two components, the prop color being used differently in each component. The prop color insideButtonLabel.vue
is being used for the label colors (font color). The prop color insideButton.vue
is being used for the background color of the toggle. Thev-switch-label
class was moved to the children component. The slots was removed for now since there wasn't no used to them. I also removed anisBoolean
import that was not being used. I tested in my browser by importing the dist into another Vue project. TheREADME.md
was also updated.This is the best I could do for this to be as cleanest as possible, and to have no code duplication.
Please let me know what do you think of this. Thank you.