From 4b07c3c5ef3a909970a7efbdbb044cef8ceb9842 Mon Sep 17 00:00:00 2001
From: Laercio Santana <laerciosantana021@hotmail.com>
Date: Sat, 18 Mar 2017 02:43:07 +0000
Subject: [PATCH] [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 @@
+<template>
+  <div class="md-rating-bar" :class="[themeClass]" :disabled="disabled">
+    <div class="back-stars" :disabled="disabled">
+      <md-icon v-for="i in numStars">star</md-icon>
+    </div>
+    <div class="front-stars" :style="frontStarsStyle">
+      <md-icon v-for="i in numStars" class="md-accent">star</md-icon>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="./mdRatingBar.scss"></style>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+
+  let iconSize = 24;//size of each icon from rating bar in pixels
+
+  export default {
+    props: {
+      numStars: {
+        type: Number,
+        default: 5
+      },
+      rating: {
+        type: Number,
+        default: 0
+      },
+      disabled: Boolean
+    },
+    mixins: [theme],
+    computed: {
+      frontStarsStyle() {
+        return {
+          width: 100 * this.rating + '%',
+          'margin-left': -iconSize * this.numStars + 'px'
+        };
+      }
+    }
+  };
+</script>
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,