From 4b07c3c5ef3a909970a7efbdbb044cef8ceb9842 Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 02:43:07 +0000 Subject: [PATCH 01/36] [rating-bar] initial commit *add rating bar component --- src/components/mdRatingBar/index.js | 8 ++++ src/components/mdRatingBar/mdRatingBar.scss | 31 +++++++++++++++ src/components/mdRatingBar/mdRatingBar.theme | 3 ++ src/components/mdRatingBar/mdRatingBar.vue | 41 ++++++++++++++++++++ src/index.js | 2 + 5 files changed, 85 insertions(+) create mode 100644 src/components/mdRatingBar/index.js create mode 100644 src/components/mdRatingBar/mdRatingBar.scss create mode 100644 src/components/mdRatingBar/mdRatingBar.theme create mode 100644 src/components/mdRatingBar/mdRatingBar.vue diff --git a/src/components/mdRatingBar/index.js b/src/components/mdRatingBar/index.js new file mode 100644 index 0000000..6f8dc7d --- /dev/null +++ b/src/components/mdRatingBar/index.js @@ -0,0 +1,8 @@ +import mdRatingBar from './mdRatingBar.vue'; +import mdRatingBarTheme from './mdRatingBar.theme'; + +export default function install(Vue) { + Vue.component('md-rating-bar', mdRatingBar); + + Vue.material.styles.push(mdRatingBarTheme); +} diff --git a/src/components/mdRatingBar/mdRatingBar.scss b/src/components/mdRatingBar/mdRatingBar.scss new file mode 100644 index 0000000..5891ef1 --- /dev/null +++ b/src/components/mdRatingBar/mdRatingBar.scss @@ -0,0 +1,31 @@ +@import '../../core/stylesheets/variables.scss'; + +$button-radius: 2px; + +.md-rating-bar { + width: auto; + display: flex; + color: rgba(#000, .3); + width: fit-content; + + > .front-stars { + overflow-x: hidden; + display: inherit; + } + + > .back-stars { + &:not([disabled]) { + &:hover{ + background-color: rgba(#999, .2); + text-decoration: none; + } + } + } + + > .back-stars, > .front-stars { + > .md-icon { + margin: 0; + white-space: nowrap; + } + } +} diff --git a/src/components/mdRatingBar/mdRatingBar.theme b/src/components/mdRatingBar/mdRatingBar.theme new file mode 100644 index 0000000..edc0d56 --- /dev/null +++ b/src/components/mdRatingBar/mdRatingBar.theme @@ -0,0 +1,3 @@ +.THEME_NAME { + +} diff --git a/src/components/mdRatingBar/mdRatingBar.vue b/src/components/mdRatingBar/mdRatingBar.vue new file mode 100644 index 0000000..da0a668 --- /dev/null +++ b/src/components/mdRatingBar/mdRatingBar.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/index.js b/src/index.js index 9a0f757..7148d71 100644 --- a/src/index.js +++ b/src/index.js @@ -18,6 +18,7 @@ import MdList from './components/mdList'; import MdMenu from './components/mdMenu'; import MdProgress from './components/mdProgress'; import MdRadio from './components/mdRadio'; +import MdRatingBar from './components/mdRatingBar'; import MdSelect from './components/mdSelect'; import MdSidenav from './components/mdSidenav'; import MdSnackbar from './components/mdSnackbar'; @@ -52,6 +53,7 @@ const options = { MdMenu, MdProgress, MdRadio, + MdRatingBar, MdSelect, MdSidenav, MdSnackbar, From b76463634b3811ea7e7b5fa886a956b6fcb11bcd Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 05:38:10 +0000 Subject: [PATCH 02/36] [rating-bar] implement user input --- src/components/mdRatingBar/mdRatingBar.vue | 63 ++++++++++++++++++++-- 1 file changed, 58 insertions(+), 5 deletions(-) diff --git a/src/components/mdRatingBar/mdRatingBar.vue b/src/components/mdRatingBar/mdRatingBar.vue index da0a668..a643999 100644 --- a/src/components/mdRatingBar/mdRatingBar.vue +++ b/src/components/mdRatingBar/mdRatingBar.vue @@ -1,10 +1,15 @@ @@ -22,13 +27,22 @@ type: Number, default: 5 }, - rating: { + disabled: Boolean, + value: { type: Number, + validator: (value) => { + return value >= 0 && value <= 1; + }, default: 0 - }, - disabled: Boolean + } }, mixins: [theme], + data: () => ({ + rating: NaN + }), + mounted: function() { + this.rating = this.value; + }, computed: { frontStarsStyle() { return { @@ -36,6 +50,45 @@ 'margin-left': -iconSize * this.numStars + 'px' }; } + }, + watch: { + value(val) { + this.rating = this.value; + } + }, + methods: { + hoverStars(evt) { + if (!this.disabled) { + var selected = this.getIconIndex(evt.target); + + this.rating = selected / this.numStars; + } + }, + clickStars(evt) { + if (!this.disabled) { + var selected = this.getIconIndex(evt.target); + + this.$emit('input', selected / this.numStars); + } + }, + getIconIndex(iconSelected) {//icon is a dom element + let ratingIcons = this.$el.querySelectorAll('.back-stars > .md-icon, .front-stars > .md-icon'); + let selected = -1; + + ratingIcons = Array.prototype.slice.call(ratingIcons); + ratingIcons.some((icon, i) => {//find index + if (icon === iconSelected) { + selected = (i + 1) % this.numStars; + selected = !selected ? this.numStars : selected; + return true; + } + }); + + return selected; + }, + onMouseOut() { + this.rating = this.value; + } } }; From 763ca4d328b25db62301e405b189246bc18ec29b Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 11:38:41 -0300 Subject: [PATCH 03/36] [rating-bar] changes on cursor --- src/components/mdRatingBar/mdRatingBar.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/mdRatingBar/mdRatingBar.scss b/src/components/mdRatingBar/mdRatingBar.scss index 5891ef1..c69ec37 100644 --- a/src/components/mdRatingBar/mdRatingBar.scss +++ b/src/components/mdRatingBar/mdRatingBar.scss @@ -26,6 +26,15 @@ $button-radius: 2px; > .md-icon { margin: 0; white-space: nowrap; + cursor: pointer; + } + } + + &[disabled] { + > .back-stars, > .front-stars { + > .md-icon { + cursor: default; + } } } } From f4a60c686392f11ba13242dda5ed9e1c67c13652 Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 11:53:10 -0300 Subject: [PATCH 04/36] [rating-bar] fix background --- src/components/mdRatingBar/mdRatingBar.scss | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/mdRatingBar/mdRatingBar.scss b/src/components/mdRatingBar/mdRatingBar.scss index c69ec37..eb21ed7 100644 --- a/src/components/mdRatingBar/mdRatingBar.scss +++ b/src/components/mdRatingBar/mdRatingBar.scss @@ -13,15 +13,6 @@ $button-radius: 2px; display: inherit; } - > .back-stars { - &:not([disabled]) { - &:hover{ - background-color: rgba(#999, .2); - text-decoration: none; - } - } - } - > .back-stars, > .front-stars { > .md-icon { margin: 0; @@ -30,6 +21,12 @@ $button-radius: 2px; } } + &:not([disabled]) { + &:hover{ + background-color: rgba(#999, .2); + } + } + &[disabled] { > .back-stars, > .front-stars { > .md-icon { From edb724463eec0ed9982635ef0161278a4a18208f Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 11:56:23 -0300 Subject: [PATCH 05/36] [rating-bar] fix bug when mouse out --- src/components/mdRatingBar/mdRatingBar.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/mdRatingBar/mdRatingBar.vue b/src/components/mdRatingBar/mdRatingBar.vue index a643999..cc9e1a8 100644 --- a/src/components/mdRatingBar/mdRatingBar.vue +++ b/src/components/mdRatingBar/mdRatingBar.vue @@ -3,7 +3,8 @@
star + @click.native="clickStars" + @mouseout.native="onMouseOut">star
Date: Sat, 18 Mar 2017 17:16:47 -0300 Subject: [PATCH 06/36] [rating-bar] add basic colors support --- src/components/mdRatingBar/mdRatingBar.scss | 1 - src/components/mdRatingBar/mdRatingBar.theme | 17 +++++++++++++++++ src/components/mdRatingBar/mdRatingBar.vue | 2 +- 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/mdRatingBar/mdRatingBar.scss b/src/components/mdRatingBar/mdRatingBar.scss index eb21ed7..8c71d46 100644 --- a/src/components/mdRatingBar/mdRatingBar.scss +++ b/src/components/mdRatingBar/mdRatingBar.scss @@ -5,7 +5,6 @@ $button-radius: 2px; .md-rating-bar { width: auto; display: flex; - color: rgba(#000, .3); width: fit-content; > .front-stars { diff --git a/src/components/mdRatingBar/mdRatingBar.theme b/src/components/mdRatingBar/mdRatingBar.theme index edc0d56..2156809 100644 --- a/src/components/mdRatingBar/mdRatingBar.theme +++ b/src/components/mdRatingBar/mdRatingBar.theme @@ -1,3 +1,20 @@ .THEME_NAME { + &.md-rating-bar { + .md-icon { + color: #{'BACKGROUND-CONTRAST-0.3'}; + } + &.md-primary > .front-stars .md-icon { + color: #{'PRIMARY-COLOR'}; + } + + &.md-accent > .front-stars .md-icon { + color: #{'ACCENT-COLOR'}; + + } + + &.md-warn > .front-stars .md-icon { + color: #{'WARN-COLOR'}; + } + } } diff --git a/src/components/mdRatingBar/mdRatingBar.vue b/src/components/mdRatingBar/mdRatingBar.vue index cc9e1a8..36781f3 100644 --- a/src/components/mdRatingBar/mdRatingBar.vue +++ b/src/components/mdRatingBar/mdRatingBar.vue @@ -7,7 +7,7 @@ @mouseout.native="onMouseOut">star
- star From a5285b2b8706e9099a6668b7c1aed497b87513e5 Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 17:31:17 -0300 Subject: [PATCH 07/36] [rating-bar] add support to custom font icon --- src/components/mdRatingBar/mdRatingBar.vue | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/mdRatingBar/mdRatingBar.vue b/src/components/mdRatingBar/mdRatingBar.vue index 36781f3..4ccf866 100644 --- a/src/components/mdRatingBar/mdRatingBar.vue +++ b/src/components/mdRatingBar/mdRatingBar.vue @@ -4,13 +4,13 @@ star + @mouseout.native="onMouseOut">{{ backIcon }}
star + @mouseout.native="onMouseOut">{{ frontIcon }}
@@ -35,6 +35,14 @@ return value >= 0 && value <= 1; }, default: 0 + }, + frontIcon: { + type: String, + default: 'star' + }, + backIcon: { + type: String, + default: 'star' } }, mixins: [theme], From b4543922d58cad2839905c2aa895e3c3ec1fd92a Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 17:36:07 -0300 Subject: [PATCH 08/36] [rating-bar] changes on theme --- src/components/mdRatingBar/mdRatingBar.theme | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/mdRatingBar/mdRatingBar.theme b/src/components/mdRatingBar/mdRatingBar.theme index 2156809..2bed1a1 100644 --- a/src/components/mdRatingBar/mdRatingBar.theme +++ b/src/components/mdRatingBar/mdRatingBar.theme @@ -1,9 +1,13 @@ .THEME_NAME { &.md-rating-bar { - .md-icon { + > .back-stars .md-icon { color: #{'BACKGROUND-CONTRAST-0.3'}; } + > .front-stars .md-icon { + color: #{'BACKGROUND-CONTRAST-0.4'}; + } + &.md-primary > .front-stars .md-icon { color: #{'PRIMARY-COLOR'}; } From 52f376069dc41ab37d6307a8a53b797b6edb635f Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 17:54:40 -0300 Subject: [PATCH 09/36] [rating-bar] add entry to documentation --- docs/src/App.vue | 4 +++ docs/src/pages/components/RatingBar.vue | 33 +++++++++++++++++++++++++ docs/src/routes.js | 6 +++++ 3 files changed, 43 insertions(+) create mode 100644 docs/src/pages/components/RatingBar.vue diff --git a/docs/src/App.vue b/docs/src/App.vue index 4e3a9c8..a9f2e60 100644 --- a/docs/src/App.vue +++ b/docs/src/App.vue @@ -107,6 +107,10 @@ Radio + + Rating Bar + + Select diff --git a/docs/src/pages/components/RatingBar.vue b/docs/src/pages/components/RatingBar.vue new file mode 100644 index 0000000..6f27e17 --- /dev/null +++ b/docs/src/pages/components/RatingBar.vue @@ -0,0 +1,33 @@ + + + diff --git a/docs/src/routes.js b/docs/src/routes.js index 4f220ea..1753e43 100644 --- a/docs/src/routes.js +++ b/docs/src/routes.js @@ -23,6 +23,7 @@ const List = (r) => require.ensure([], () => r(require('./pages/components/List' const Menu = (r) => require.ensure([], () => r(require('./pages/components/Menu')), 'menu'); const Progress = (r) => require.ensure([], () => r(require('./pages/components/Progress')), 'progress'); const Radio = (r) => require.ensure([], () => r(require('./pages/components/Radio')), 'radio'); +const RatingBar = (r) => require.ensure([], () => r(require('./pages/components/RatingBar')), 'rating-bar'); const Select = (r) => require.ensure([], () => r(require('./pages/components/Select')), 'select'); const Sidenav = (r) => require.ensure([], () => r(require('./pages/components/Sidenav')), 'sidenav'); const Snackbar = (r) => require.ensure([], () => r(require('./pages/components/Snackbar')), 'snackbar'); @@ -158,6 +159,11 @@ const components = [ name: 'components:radio', component: Radio }, + { + path: '/components/rating-bar', + name: 'components:rating-bar', + component: RatingBar + }, { path: '/components/select', name: 'components:select', From b62eb825af34530fb8f012db1f0f26f15e3cca12 Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 18:08:41 -0300 Subject: [PATCH 10/36] [rating-bar] add properties to the doc --- docs/src/pages/components/RatingBar.vue | 42 +++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/docs/src/pages/components/RatingBar.vue b/docs/src/pages/components/RatingBar.vue index 6f27e17..4add99c 100644 --- a/docs/src/pages/components/RatingBar.vue +++ b/docs/src/pages/components/RatingBar.vue @@ -12,7 +12,49 @@
+ + + + + Name + Type + Description + + + + + v-model + String + A required model object to bind the value. + + + + num-stars + Number + Number of the stars. Default is 5. + + + + front-icon + String + The font icon used to represent full star. Default is star. + + + + back-icon + String + The font icon used to represent empty star. Default is star. + + + + disabled + Boolean + Disable the radio and prevent his actions. Default false + + + +
From 6a33d47351f102ba310ad8f17d6fd50ba75c7757 Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 18:12:26 -0300 Subject: [PATCH 11/36] [rating-bar] add on change event --- src/components/mdRatingBar/mdRatingBar.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/mdRatingBar/mdRatingBar.vue b/src/components/mdRatingBar/mdRatingBar.vue index 4ccf866..6ad7922 100644 --- a/src/components/mdRatingBar/mdRatingBar.vue +++ b/src/components/mdRatingBar/mdRatingBar.vue @@ -78,6 +78,7 @@ var selected = this.getIconIndex(evt.target); this.$emit('input', selected / this.numStars); + this.$emit('change', selected / this.numStars); } }, getIconIndex(iconSelected) {//icon is a dom element From e0da31eafb059cbe87d31e7647949132b5200308 Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sat, 18 Mar 2017 18:16:05 -0300 Subject: [PATCH 12/36] [rating-bar] add change event on the doc --- docs/src/pages/About.vue | 22 ++++++++++++++++++++++ docs/src/pages/components/RatingBar.vue | 18 ++++++++++++++++++ 2 files changed, 40 insertions(+) diff --git a/docs/src/pages/About.vue b/docs/src/pages/About.vue index d404cbd..028f29d 100644 --- a/docs/src/pages/About.vue +++ b/docs/src/pages/About.vue @@ -62,10 +62,32 @@

License

MIT

+ +
+ + From 4323ef84d1419f84a66b42fd4c56eb2e57f16eb0 Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Thu, 23 Mar 2017 22:09:55 -0300 Subject: [PATCH 32/36] [rating-bar] fix on indentation --- src/components/mdRatingBar/mdRatingBar.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/mdRatingBar/mdRatingBar.scss b/src/components/mdRatingBar/mdRatingBar.scss index 90faeed..e53b744 100644 --- a/src/components/mdRatingBar/mdRatingBar.scss +++ b/src/components/mdRatingBar/mdRatingBar.scss @@ -30,7 +30,8 @@ $button-radius: 2px; } &[disabled] { - > .md-back-stars, > .md-front-stars { + > .md-back-stars, + > .md-front-stars { > .md-icon { cursor: default; } From 676537a24f0240aa8c5e9b9579d3b8b8a064d59a Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Mon, 15 May 2017 17:29:14 -0300 Subject: [PATCH 33/36] [rating-bar] changes in variables names to improvement api interface --- docs/src/pages/components/RatingBar.vue | 84 +++++++++--------- src/components/mdRatingBar/mdRatingBar.scss | 10 +-- src/components/mdRatingBar/mdRatingBar.theme | 10 +-- src/components/mdRatingBar/mdRatingBar.vue | 92 ++++++++++---------- 4 files changed, 98 insertions(+), 98 deletions(-) diff --git a/docs/src/pages/components/RatingBar.vue b/docs/src/pages/components/RatingBar.vue index bc5475b..bf5d5f7 100644 --- a/docs/src/pages/components/RatingBar.vue +++ b/docs/src/pages/components/RatingBar.vue @@ -30,39 +30,39 @@ - md-num-stars + md-max-rating Number - Number of the stars. Default 5. + Max rating allowed. Default 5. - md-front-icon + md-full-icon String The icon used to represent full star. Can be a material icon from google font or src of the image file (svg or png). Default star. - md-back-icon + md-empty-icon String The icon used to represent empty star. Can be a material icon from google font or src of the image file (svg or png). Default star. - md-front-iconset + md-full-iconset String The font icon set used on full star. Example: md-iconset="fa fa-heart" for font awesome. - md-back-iconset + md-empty-iconset String The font icon set used on empty star. Example: md-iconset="fa fa-heart-o" for font awesome. - md-size + md-icon-size Number - Change the size. From 1 to 5. Default 1. + Change the icon size. From 1 to 5. Default 1. @@ -97,23 +97,23 @@
- - - - - - + + + + + +
<md-rating-bar v-model="rating1" disabled></md-rating-bar>
- <md-rating-bar v-model="rating2" :md-num-stars="10" disabled></md-rating-bar>
- <md-rating-bar v-model="rating3" :md-num-stars="7" class="md-primary" disabled></md-rating-bar>
- <md-rating-bar v-model="rating4" :md-num-stars="7" class="md-accent" disabled></md-rating-bar>
- <md-rating-bar v-model="rating5" :md-num-stars="7" class="md-warn" disabled></md-rating-bar>
- <md-rating-bar v-model="rating6" :md-num-stars="7" class="md-primary" :md-back-icon="'star_border'"></md-rating-bar>
- <md-rating-bar v-model="rating7" :md-num-stars="5" class="md-warn" :md-back-icon="'panorama_fish_eye'" :md-front-icon="'lens'"></md-rating-bar> + <md-rating-bar v-model="rating2" :md-max-rating="10" disabled></md-rating-bar>
+ <md-rating-bar v-model="rating3" :md-max-rating="7" class="md-primary" disabled></md-rating-bar>
+ <md-rating-bar v-model="rating4" :md-max-rating="7" class="md-accent" disabled></md-rating-bar>
+ <md-rating-bar v-model="rating5" :md-max-rating="7" class="md-warn" disabled></md-rating-bar>
+ <md-rating-bar v-model="rating6" :md-max-rating="7" class="md-primary" :md-empty-icon="'star_border'"></md-rating-bar>
+ <md-rating-bar v-model="rating7" :md-max-rating="5" class="md-warn" :md-empty-icon="'panorama_fish_eye'" :md-full-icon="'lens'"></md-rating-bar>
@@ -123,7 +123,7 @@ - +
@@ -131,7 +131,7 @@ <md-rating-bar v-model="rating8" class="md-primary" md-theme="orange" disabled></md-rating-bar>
<md-rating-bar v-model="rating9" class="md-primary" md-theme="brown" disabled></md-rating-bar>
<md-rating-bar v-model="rating10" class="md-primary" md-theme="light-blue"></md-rating-bar>
- <md-rating-bar v-model="rating11" class="md-primary" md-theme="teal" :md-back-icon="'star_border'"></md-rating-bar> + <md-rating-bar v-model="rating11" class="md-primary" md-theme="teal" :md-empty-icon="'star_border'"></md-rating-bar>
@@ -139,15 +139,15 @@
- - + +
<md-rating-bar v-model="rating12" ></md-rating-bar>
- <md-rating-bar v-model="rating12" :md-size="2" ></md-rating-bar>
- <md-rating-bar v-model="rating12" :md-size="3" ></md-rating-bar> + <md-rating-bar v-model="rating12" :md-icon-size="2" ></md-rating-bar>
+ <md-rating-bar v-model="rating12" :md-icon-size="3" ></md-rating-bar>
@@ -157,14 +157,14 @@ SVG: - - + + PNG: - - + + @@ -174,14 +174,14 @@ <md-layout :md-gutter="true">
<md-layout>
<strong class="md-body-2">SVG:</strong>
- <md-rating-bar v-model="rating13" class="md-primary" :md-back-icon="'assets/icon-home.svg'" :md-front-icon="'assets/icon-home.svg'"></md-rating-bar>
- <md-rating-bar v-model="rating13" class="md-primary" :md-back-icon="'assets/icon-home.svg'" :md-front-icon="'assets/icon-home.svg'" :md-size="2"></md-rating-bar>
+ <md-rating-bar v-model="rating13" class="md-primary" :md-empty-icon="'assets/icon-home.svg'" :md-full-icon="'assets/icon-home.svg'"></md-rating-bar>
+ <md-rating-bar v-model="rating13" class="md-primary" :md-empty-icon="'assets/icon-home.svg'" :md-full-icon="'assets/icon-home.svg'" :md-icon-size="2"></md-rating-bar>
</md-layout>

<md-layout>
<strong class="md-body-2">PNG:</strong>
- <md-rating-bar v-model="rating13" :md-back-icon="'assets/icon-home-back.png'" :md-front-icon="'assets/icon-home-front.png'"></md-rating-bar>
- <md-rating-bar v-model="rating13" :md-back-icon="'assets/icon-home-back.png'" :md-front-icon="'assets/icon-home-front.png'" :md-size="2"></md-rating-bar>
+ <md-rating-bar v-model="rating13" :md-empty-icon="'assets/icon-home-back.png'" :md-full-icon="'assets/icon-home-front.png'"></md-rating-bar>
+ <md-rating-bar v-model="rating13" :md-empty-icon="'assets/icon-home-back.png'" :md-full-icon="'assets/icon-home-front.png'" :md-icon-size="2"></md-rating-bar>
</md-layout>
</md-layout> @@ -194,21 +194,21 @@
This first example uses Font Awesome Icons
- - + +
This second example uses Ion Icons
- - + +
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div>This first example uses <a href="http://fontawesome.io/icons/" target="fa_icons">Font Awesome Icons</a></div>
- <md-rating-bar v-model="rating14" class="md-primary" :md-back-iconset="'fa fa-bell-o'" :md-front-iconset="'fa fa-bell'"></md-rating-bar>
- <md-rating-bar v-model="rating14" class="md-warn" :md-size="2" :md-back-iconset="'fa fa-heart-o'" :md-front-iconset="'fa fa-heart'"></md-rating-bar>
+ <md-rating-bar v-model="rating14" class="md-primary" :md-empty-iconset="'fa fa-bell-o'" :md-full-iconset="'fa fa-bell'"></md-rating-bar>
+ <md-rating-bar v-model="rating14" class="md-warn" :md-icon-size="2" :md-empty-iconset="'fa fa-heart-o'" :md-full-iconset="'fa fa-heart'"></md-rating-bar>
<style type="text/css"><!-- offset fix to awesome icons-->
.fa {
font-size: 19px !important;
@@ -234,8 +234,8 @@ <hr/>
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
<div>This second example uses <a href="http://ionicons.com/" target="ion_icons">Ion Icons</a></div>
- <md-rating-bar v-model="rating14" class="md-primary" :md-back-iconset="'ion-ios-bell-outline'" :md-front-iconset="'ion-ios-bell'"></md-rating-bar>
- <md-rating-bar v-model="rating14" class="md-warn" :md-size="2" :md-back-iconset="'ion-android-favorite-outline'" :md-front-iconset="'ion-android-favorite'"></md-rating-bar>
+ <md-rating-bar v-model="rating14" class="md-primary" :md-empty-iconset="'ion-ios-bell-outline'" :md-full-iconset="'ion-ios-bell'"></md-rating-bar>
+ <md-rating-bar v-model="rating14" class="md-warn" :md-size="2" :md-empty-iconset="'ion-android-favorite-outline'" :md-full-iconset="'ion-android-favorite'"></md-rating-bar>
<style type="text/css"> <!-- offset fix to ion icons-->
i[class*="ion-"]{
padding-left: 0.1em;
diff --git a/src/components/mdRatingBar/mdRatingBar.scss b/src/components/mdRatingBar/mdRatingBar.scss index e53b744..85e8ade 100644 --- a/src/components/mdRatingBar/mdRatingBar.scss +++ b/src/components/mdRatingBar/mdRatingBar.scss @@ -9,13 +9,13 @@ $button-radius: 2px; padding: 3px; border-radius: 2px; - > .md-front-stars { + > .md-full-icon { overflow-x: hidden; display: inherit; } - > .md-back-stars, - > .md-front-stars { + > .md-empty-icon, + > .md-full-icon { > .md-icon { margin: 0; white-space: nowrap; @@ -30,8 +30,8 @@ $button-radius: 2px; } &[disabled] { - > .md-back-stars, - > .md-front-stars { + > .md-empty-icon, + > .md-full-icon { > .md-icon { cursor: default; } diff --git a/src/components/mdRatingBar/mdRatingBar.theme b/src/components/mdRatingBar/mdRatingBar.theme index 88c2654..7008f69 100644 --- a/src/components/mdRatingBar/mdRatingBar.theme +++ b/src/components/mdRatingBar/mdRatingBar.theme @@ -1,23 +1,23 @@ .THEME_NAME { &.md-rating-bar { - > .md-back-stars .md-icon { + > .md-empty-icon .md-icon { color: #{'BACKGROUND-CONTRAST-0.26'}; } - > .md-front-stars .md-icon { + > .md-full-icon .md-icon { color: #{'BACKGROUND-CONTRAST-0.38'}; } - &.md-primary > .md-front-stars .md-icon { + &.md-primary > .md-full-icon .md-icon { color: #{'PRIMARY-COLOR'}; } - &.md-accent > .md-front-stars .md-icon { + &.md-accent > .md-full-icon .md-icon { color: #{'ACCENT-COLOR'}; } - &.md-warn > .md-front-stars .md-icon { + &.md-warn > .md-full-icon .md-icon { color: #{'WARN-COLOR'}; } } diff --git a/src/components/mdRatingBar/mdRatingBar.vue b/src/components/mdRatingBar/mdRatingBar.vue index 5503ae7..a9626bb 100644 --- a/src/components/mdRatingBar/mdRatingBar.vue +++ b/src/components/mdRatingBar/mdRatingBar.vue @@ -1,41 +1,41 @@ @@ -49,7 +49,7 @@ export default { props: { - mdNumStars: { + mdMaxRating: { type: Number, default: 5 }, @@ -61,17 +61,17 @@ }, default: 0 }, - mdSize: { + mdIconSize: { type: Number, default: 1 }, - mdFrontIconset: String, - mdBackIconset: String, - mdFrontIcon: { + mdFullIconset: String, + mdEmptyIconset: String, + mdFullIcon: { type: String, default: 'star' }, - mdBackIcon: { + mdEmptyIcon: { type: String, default: 'star' } @@ -79,52 +79,52 @@ mixins: [theme], data() { return { - srcFrontIcon: null, - srcBackIcon: null, + srcFullIcon: null, + srcEmptyIcon: null, rating: this.value }; }, mounted: function() { - this.srcFrontIcon = this.checkSrc(this.mdFrontIcon); - this.srcBackIcon = this.checkSrc(this.mdBackIcon); + this.srcFullIcon = this.checkSrc(this.mdFullIcon); + this.srcEmptyIcon = this.checkSrc(this.mdEmptyIcon); }, computed: { - backIcon() { - if (this.mdBackIconset) { + emptyIcon() { + if (this.mdEmptyIconset) { return ''; } - return this.mdBackIcon; + return this.mdEmptyIcon; }, - frontIcon() { - if (this.mdFrontIconset) { + fullIcon() { + if (this.mdFullIconset) { return ''; } - return this.mdFrontIcon; + return this.mdFullIcon; }, iconClasses() { let classes = {}; - if (this.mdSize) { - classes[`md-size-${this.mdSize}x`] = true; + if (this.mdIconSize) { + classes[`md-size-${this.mdIconSize}x`] = true; } return classes; }, - frontStarsStyle() { + fullIconStyle() { return { width: 100 * this.rating + '%', - 'margin-left': -iconSize * this.mdSize * this.mdNumStars + 'px' + 'margin-left': -iconSize * this.mdIconSize * this.mdMaxRating + 'px' }; } }, watch: { - mdFrontIcon() { - this.srcFrontIcon = this.checkSrc(this.mdFrontIcon); + mdFullIcon() { + this.srcFullIcon = this.checkSrc(this.mdFullIcon); }, - mdBackIcon() { - this.srcBackIcon = this.checkSrc(this.mdBackIcon); + mdEmptyIcon() { + this.srcEmptyIcon = this.checkSrc(this.mdEmptyIcon); }, value() { this.rating = this.value; @@ -133,27 +133,27 @@ methods: { hoverStars(evt) { if (!this.disabled) { - this.rating = this.getIconIndex(evt.currentTarget) / this.mdNumStars; + this.rating = this.getIconIndex(evt.currentTarget) / this.mdMaxRating; } }, clickStars(evt) { if (!this.disabled) { var selected = this.getIconIndex(evt.currentTarget); - this.$emit('input', selected / this.mdNumStars); - this.$emit('change', selected / this.mdNumStars); + this.$emit('input', selected / this.mdMaxRating); + this.$emit('change', selected / this.mdMaxRating); } }, getIconIndex(iconSelected) {//iconSelected is a dom element - let ratingIcons = this.$el.querySelectorAll('.md-back-stars > .md-icon, .md-front-stars > .md-icon'); + let ratingIcons = this.$el.querySelectorAll('.md-empty-icon > .md-icon, .md-full-icon > .md-icon'); let selected = -1; ratingIcons = Array.prototype.slice.call(ratingIcons); //find index from iconSelected ratingIcons.some((icon, i) => { if (icon === iconSelected) { - selected = (i + 1) % this.mdNumStars; - selected = !selected ? this.mdNumStars : selected; + selected = (i + 1) % this.mdMaxRating; + selected = !selected ? this.mdMaxRating : selected; return true; } }); From 60148ddbcba18ea9f86b588438530cfb098274a7 Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sun, 28 May 2017 15:31:21 -0300 Subject: [PATCH 34/36] [rating-bar] change v-model range to [0, md-max-rating] --- docs/src/pages/components/RatingBar.vue | 30 +++++++++++----------- src/components/mdRatingBar/mdRatingBar.vue | 11 +++----- 2 files changed, 19 insertions(+), 22 deletions(-) diff --git a/docs/src/pages/components/RatingBar.vue b/docs/src/pages/components/RatingBar.vue index bf5d5f7..47e3a07 100644 --- a/docs/src/pages/components/RatingBar.vue +++ b/docs/src/pages/components/RatingBar.vue @@ -26,7 +26,7 @@ v-model Number - A required model object to bind the value. The value is limited by range [0, 1]. + A required model object to bind the value. The value is limited by range [0, md-max-rating]. @@ -253,20 +253,20 @@ export default { data() { return { - rating1: 0.70, - rating2: 0.6, - rating3: 0.2, - rating4: 0.84, - rating5: 0.7, - rating6: 0.5, - rating7: 0.90, - rating8: 0.9, - rating9: 0.18, - rating10: 0.45, - rating11: 0.82, - rating12: 0.5, - rating13: 0.7, - rating14: 0.4 + rating1: 5 * 0.70, + rating2: 10 * 0.6, + rating3: 7 * 0.2, + rating4: 7 * 0.84, + rating5: 7 * 0.7, + rating6: 7 * 0.5, + rating7: 5 * 0.90, + rating8: 5 * 0.9, + rating9: 5 * 0.18, + rating10: 5 * 0.45, + rating11: 5 * 0.82, + rating12: 5 * 0.5, + rating13: 5 * 0.7, + rating14: 5 * 0.4 }; } }; diff --git a/src/components/mdRatingBar/mdRatingBar.vue b/src/components/mdRatingBar/mdRatingBar.vue index a9626bb..5a2ff77 100644 --- a/src/components/mdRatingBar/mdRatingBar.vue +++ b/src/components/mdRatingBar/mdRatingBar.vue @@ -56,9 +56,6 @@ disabled: Boolean, value: { type: Number, - validator: (value) => { - return value >= 0 && value <= 1; - }, default: 0 }, mdIconSize: { @@ -114,7 +111,7 @@ }, fullIconStyle() { return { - width: 100 * this.rating + '%', + width: 100 / this.mdMaxRating * this.rating + '%', 'margin-left': -iconSize * this.mdIconSize * this.mdMaxRating + 'px' }; } @@ -133,15 +130,15 @@ methods: { hoverStars(evt) { if (!this.disabled) { - this.rating = this.getIconIndex(evt.currentTarget) / this.mdMaxRating; + this.rating = this.getIconIndex(evt.currentTarget); } }, clickStars(evt) { if (!this.disabled) { var selected = this.getIconIndex(evt.currentTarget); - this.$emit('input', selected / this.mdMaxRating); - this.$emit('change', selected / this.mdMaxRating); + this.$emit('input', selected); + this.$emit('change', selected); } }, getIconIndex(iconSelected) {//iconSelected is a dom element From 3a0b90ae2220f5562ca1130162023dbc464e3c1e Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sun, 28 May 2017 15:45:31 -0300 Subject: [PATCH 35/36] [rating-bar] improves explanation about the md-size-icon --- docs/src/pages/components/RatingBar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/RatingBar.vue b/docs/src/pages/components/RatingBar.vue index 47e3a07..e224579 100644 --- a/docs/src/pages/components/RatingBar.vue +++ b/docs/src/pages/components/RatingBar.vue @@ -62,7 +62,7 @@ md-icon-size Number - Change the icon size. From 1 to 5. Default 1. + Change the icon size. From 1 to 5, it corresponds the 1x to 5x of the md-size-{type} class in md-icon, where in 1x, the icon has 24px. Default 1. From bbda58ba64408dbd7316c50eebe2e3aea3db2677 Mon Sep 17 00:00:00 2001 From: Laercio Santana Date: Sun, 28 May 2017 15:54:28 -0300 Subject: [PATCH 36/36] [rating-bar] adds hover event --- docs/src/pages/components/RatingBar.vue | 5 +++++ src/components/mdRatingBar/mdRatingBar.vue | 1 + 2 files changed, 6 insertions(+) diff --git a/docs/src/pages/components/RatingBar.vue b/docs/src/pages/components/RatingBar.vue index e224579..cba269c 100644 --- a/docs/src/pages/components/RatingBar.vue +++ b/docs/src/pages/components/RatingBar.vue @@ -88,6 +88,11 @@ Receive the new rating Triggered when the rating changes his value by user interaction. + + hover + Receive the pointer rating + Triggered when the user points over a new rating. + diff --git a/src/components/mdRatingBar/mdRatingBar.vue b/src/components/mdRatingBar/mdRatingBar.vue index 5a2ff77..fb01438 100644 --- a/src/components/mdRatingBar/mdRatingBar.vue +++ b/src/components/mdRatingBar/mdRatingBar.vue @@ -131,6 +131,7 @@ hoverStars(evt) { if (!this.disabled) { this.rating = this.getIconIndex(evt.currentTarget); + this.$emit('hover', this.rating); } }, clickStars(evt) {