mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-03-16 22:10:27 +00:00
[rating-bar] changes in variables names to improvement api interface
This commit is contained in:
Laercio Santana
parent
4323ef84d1
commit
676537a24f
4 changed files with 98 additions and 98 deletions
|
|
@ -30,39 +30,39 @@
|
|||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-num-stars</md-table-cell>
|
||||
<md-table-cell>md-max-rating</md-table-cell>
|
||||
<md-table-cell><code>Number</code></md-table-cell>
|
||||
<md-table-cell>Number of the stars. Default <code>5</code>.</md-table-cell>
|
||||
<md-table-cell>Max rating allowed. Default <code>5</code>.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-front-icon</md-table-cell>
|
||||
<md-table-cell>md-full-icon</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>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 <code>star</code>.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-back-icon</md-table-cell>
|
||||
<md-table-cell>md-empty-icon</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>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 <code>star</code>.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-front-iconset</md-table-cell>
|
||||
<md-table-cell>md-full-iconset</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>The font icon set used on full star. Example: <code>md-iconset="fa fa-heart"</code> for font awesome.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-back-iconset</md-table-cell>
|
||||
<md-table-cell>md-empty-iconset</md-table-cell>
|
||||
<md-table-cell><code>String</code></md-table-cell>
|
||||
<md-table-cell>The font icon set used on empty star. Example: <code>md-iconset="fa fa-heart-o"</code> for font awesome.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
<md-table-cell>md-size</md-table-cell>
|
||||
<md-table-cell>md-icon-size</md-table-cell>
|
||||
<md-table-cell><code>Number</code></md-table-cell>
|
||||
<md-table-cell>Change the size. From 1 to 5. Default <code>1</code>.</md-table-cell>
|
||||
<md-table-cell>Change the icon size. From 1 to 5. Default <code>1</code>.</md-table-cell>
|
||||
</md-table-row>
|
||||
|
||||
<md-table-row>
|
||||
|
|
@ -97,23 +97,23 @@
|
|||
<example-box card-title="Default">
|
||||
<div slot="demo">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-rating-bar v-model="rating1" disabled></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating2" :md-num-stars="10" disabled></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating3" :md-num-stars="7" class="md-primary" disabled></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating4" :md-num-stars="7" class="md-accent" disabled></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating5" :md-num-stars="7" class="md-warn" disabled></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating6" :md-num-stars="7" class="md-primary" :md-back-icon="'star_border'"></md-rating-bar><br />
|
||||
<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><br />
|
||||
<md-rating-bar v-model="rating3" :md-max-rating="7" class="md-primary" disabled></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating4" :md-max-rating="7" class="md-accent" disabled></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating5" :md-max-rating="7" class="md-warn" disabled></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating6" :md-max-rating="7" class="md-primary" :md-empty-icon="'star_border'"></md-rating-bar><br />
|
||||
<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>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
@ -123,7 +123,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>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
<md-rating-bar v-model="rating8" class="md-primary" md-theme="orange" disabled></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating9" class="md-primary" md-theme="brown" disabled></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating10" class="md-primary" md-theme="light-blue"></md-rating-bar><br />
|
||||
<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>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
@ -139,15 +139,15 @@
|
|||
<example-box card-title="Sizes">
|
||||
<div slot="demo">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<md-rating-bar v-model="rating12" ></md-rating-bar><br />
|
||||
<md-rating-bar v-model="rating12" :md-size="2" ></md-rating-bar><br />
|
||||
<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><br />
|
||||
<md-rating-bar v-model="rating12" :md-icon-size="3" ></md-rating-bar>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
|
@ -157,14 +157,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>
|
||||
</div>
|
||||
|
|
@ -174,14 +174,14 @@
|
|||
<md-layout :md-gutter="true"><br />
|
||||
<md-layout><br />
|
||||
<strong class="md-body-2">SVG:</strong><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
</md-layout><br />
|
||||
<br />
|
||||
<md-layout><br />
|
||||
<strong class="md-body-2">PNG:</strong><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
</md-layout><br />
|
||||
</md-layout>
|
||||
</code-block>
|
||||
|
|
@ -194,21 +194,21 @@
|
|||
<div slot="demo">
|
||||
<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>
|
||||
<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-icon-size="2" :md-empty-iconset="'ion-android-favorite-outline'" :md-full-iconset="'ion-android-favorite'"></md-rating-bar>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/><br />
|
||||
<div>This first example uses <a href="http://fontawesome.io/icons/" target="fa_icons">Font Awesome Icons</a></div><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
<style type="text/css"><!-- offset fix to awesome icons--><br />
|
||||
.fa {<br />
|
||||
font-size: 19px !important;<br />
|
||||
|
|
@ -234,8 +234,8 @@
|
|||
<hr/><br />
|
||||
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/><br />
|
||||
<div>This second example uses <a href="http://ionicons.com/" target="ion_icons">Ion Icons</a></div><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
<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><br />
|
||||
<style type="text/css"> <!-- offset fix to ion icons--><br />
|
||||
i[class*="ion-"]{<br />
|
||||
padding-left: 0.1em;<br />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
<template>
|
||||
<div class="md-rating-bar" :class="[themeClass]" :disabled="disabled">
|
||||
<div class="md-back-stars" v-if="srcBackIcon">
|
||||
<md-icon v-for="i in mdNumStars"
|
||||
<div class="md-empty-icon" v-if="srcEmptyIcon">
|
||||
<md-icon v-for="i in mdMaxRating"
|
||||
@mouseover.native="hoverStars"
|
||||
@click.native="clickStars"
|
||||
@mouseout.native="onMouseOut"
|
||||
:md-src="srcBackIcon"
|
||||
:md-src="srcEmptyIcon"
|
||||
:class="[iconClasses]"
|
||||
v-if="srcBackIcon"></md-icon>
|
||||
v-if="srcEmptyIcon"></md-icon>
|
||||
</div>
|
||||
<div class="md-back-stars" v-else>
|
||||
<md-icon v-for="i in mdNumStars"
|
||||
:md-iconset="mdBackIconset"
|
||||
<div class="md-empty-icon" v-else>
|
||||
<md-icon v-for="i in mdMaxRating"
|
||||
:md-iconset="mdEmptyIconset"
|
||||
@mouseover.native="hoverStars"
|
||||
@click.native="clickStars"
|
||||
@mouseout.native="onMouseOut"
|
||||
:class="[iconClasses]"
|
||||
v-html="backIcon"></md-icon>
|
||||
v-html="emptyIcon"></md-icon>
|
||||
</div>
|
||||
|
||||
<div class="md-front-stars" :style="frontStarsStyle" v-if="srcFrontIcon">
|
||||
<md-icon v-for="i in mdNumStars"
|
||||
<div class="md-full-icon" :style="fullIconStyle" v-if="srcFullIcon">
|
||||
<md-icon v-for="i in mdMaxRating"
|
||||
@mouseover.native="hoverStars"
|
||||
@click.native="clickStars"
|
||||
@mouseout.native="onMouseOut"
|
||||
:md-src="srcFrontIcon"
|
||||
:md-src="srcFullIcon"
|
||||
:class="[iconClasses]"
|
||||
v-if="srcFrontIcon"></md-icon>
|
||||
v-if="srcFullIcon"></md-icon>
|
||||
</div>
|
||||
<div class="md-front-stars" :style="frontStarsStyle" v-else>
|
||||
<md-icon v-for="i in mdNumStars"
|
||||
:md-iconset="mdFrontIconset"
|
||||
<div class="md-full-icon" :style="fullIconStyle" v-else>
|
||||
<md-icon v-for="i in mdMaxRating"
|
||||
:md-iconset="mdFullIconset"
|
||||
@mouseover.native="hoverStars"
|
||||
@click.native="clickStars"
|
||||
@mouseout.native="onMouseOut"
|
||||
:class="[iconClasses]"
|
||||
v-html="frontIcon"></md-icon>
|
||||
v-html="fullIcon"></md-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue