Add color label new prop and minor refactor #132
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
and a minor refactor to Button component.
euvl
reviewed
Mar 29, 2020
| } | ||
| }, | ||
| switchColor: { | ||
| colorLabel: { |
euvl
reviewed
Mar 29, 2020
| </template> | ||
| </label> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { isString, isObject, isBoolean, has, get, translate, px } from './utils' | ||
| import { isString, isObject, has, get, translate, px } from './utils' | ||
| import generalMixin from './general-mixin' |
There was a problem hiding this comment.
I think we use camel case for file names
euvl
reviewed
Mar 29, 2020
| @@ -239,30 +184,31 @@ export default { | |||
| }, | |||
| data () { | |||
| return { | |||
| toggled: !!this.value | |||
| toggled: !!this.value, | |||
| defaultColorChecked: '#75c791', | |||
There was a problem hiding this comment.
Not sure i understand this bit, seems you have this defined in another file aswell. Also what was wrong with having constants?
|
Thank you. I will separate this into multiple PRs when I get some time. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This closes #102 .
This PR adds a new prop called
colorLabelwhich 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 the
colorprop, 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 the
constsand changed todataproperties, 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.vueis being used for the label colors (font color).The prop color inside
Button.vueis being used for the background color of the toggle.The
v-switch-labelclass was moved to the children component.The slots was removed for now since there wasn't no used to them.
I also removed an
isBooleanimport that was not being used.I tested in my browser by importing the dist into another Vue project.
The
README.mdwas 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.