Commit 0fa9aeed authored by Francisco Godoy's avatar Francisco Godoy

feat: added disable buttons option

parent d5fdbc81
......@@ -2,9 +2,12 @@
- Changes before version 0.2.1 not documented (see commit history)
- Project follows [Semantic Versioning](http://semver.org/)
## Version 0.2.3
- Added 'disabled buttons' feature.
## Version 0.2.2
- Readme documentation updated.
## Version 0.2.1
- Added millions and thousands abbreviation props.
- Readme updated.
\ No newline at end of file
- Readme updated.
......@@ -45,31 +45,32 @@ $checked-color: darken($color-unchecked, 25%) !default;
@import "~vue-like-dislike-buttons/src/assets/scss/main.scss"
```
## API
### like-dislike-buttons
#### props
- `likes` ***Number*** (*optional*)
- `dislikes` ***Number*** (*optional*)
- `like-checked` ***Boolean*** (*optional*) `default: false`
- `dislike-btn-title` ***String*** (*optional*) `default: 'I don't like it'`
- `dislike-checked` ***Boolean*** (*optional*) `default: false`
- `only-like` ***Boolean*** (*optional*) `default: false`
- `dislikes` ***Number*** (*optional*)
- `is-disabled` ***Boolean*** (*optional*) `default: false`
- `like-btn-title` ***String*** (*optional*) `default: 'I like it'`
- `dislike-btn-title` ***String*** (*optional*) `default: 'I don't like it'`
- `like-checked` ***Boolean*** (*optional*) `default: false`
- `thousands-abbreviation` ***String*** (*optional*) `default: 'K'`
- `likes` ***Number*** (*optional*)
- `millions-abbreviation` ***String*** (*optional*) `default: 'M'`
- `only-like` ***Boolean*** (*optional*) `default: false`
- `thousands-abbreviation` ***String*** (*optional*) `default: 'K'`
#### methods
- `computeNumber(value)`
......@@ -125,3 +126,9 @@ yarn styleguide
```
yarn styleguide:build
```
### Update project version
```
yarn version
```
......@@ -16,6 +16,10 @@ $checked-color: darken($color-unchecked, 25%) !default;
color: $checked-color;
}
&[disabled] {
pointer-events: none;
}
&:hover,
&:focus {
color: $color-hover;
......
......@@ -4,6 +4,7 @@
class="like-dislike-buttons__btn"
href="#"
:class="{ 'is-checked': likeChecked }"
:disabled="isDisabled"
@click.prevent="$emit('like')"
>
<thumb-up-icon class="like-dislike-buttons__icon icon-2x" :title="likeBtnTitle" />
......@@ -15,6 +16,7 @@
class="like-dislike-buttons__btn"
href="#"
:class="{ 'is-checked': dislikeChecked }"
:disabled="isDisabled"
v-if="!onlyLike"
@click.prevent="$emit('dislike')"
>
......@@ -39,15 +41,16 @@ export default {
ThumbDownIcon
},
props: {
likes: { type: Number, default: 0 },
dislikeBtnTitle: { type: String, default: 'I don\'t like it'},
dislikeChecked: { type: Boolean, default: false },
dislikes: { type: Number, default: 0 },
isDisabled: { type: Boolean, default: false },
likeBtnTitle: { type: String, default: 'I like it'},
likeChecked: { type: Boolean, default: false },
dislikeChecked: { type: Boolean, default: false },
likes: { type: Number, default: 0 },
millionsAbbreviation: { type: String, default: 'M'},
onlyLike: { type: Boolean, default: false },
likeBtnTitle: { type: String, default: 'I like it'},
dislikeBtnTitle: { type: String, default: 'I don\'t like it'},
thousandsAbbreviation: { type: String, default: 'K'},
millionsAbbreviation: { type: String, default: 'M'}
thousandsAbbreviation: { type: String, default: 'K'}
},
methods: {
computeNumber(value) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment