euvl / vue-js-toggle-button

:fish_cake: Vue.js 2 toggle / switch button - simple, pretty, customizable
http://vue-js-toggle-button.yev.io/
MIT License
934 stars 133 forks source link

Add color label new prop and minor refactor #132

Closed guastallaigor closed 4 years ago

guastallaigor commented 4 years ago

This closes #102 .

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.

image image

Please let me know what do you think of this. Thank you.

guastallaigor commented 4 years ago

Thank you. I will separate this into multiple PRs when I get some time.