Implemented Rating Component

src/AppMenu.vue

@@ -13,6 +13,7 @@
                     <router-link to="/inputtext">&#9679; InputText</router-link>
                     <router-link to="/listbox">&#9679; Listbox</router-link>
                     <router-link to="/radiobutton">&#9679; RadioButton</router-link>
+                    <router-link to="/rating">&#9679; Rating</router-link>
                     <router-link to="/selectbutton">&#9679; SelectButton</router-link>
                     <router-link to="/textarea">&#9679; Textarea</router-link>
                     <router-link to="/togglebutton">&#9679; ToggleButton</router-link>

src/assets/styles/primevue.css

@@ -9,6 +9,7 @@
 @import '../../components/listbox/Listbox.css';
 @import '../../components/panel/Panel.css';
 @import '../../components/radiobutton/RadioButton.css';
+@import '../../components/rating/Rating.css';
 @import '../../components/tabview/TabView.css';
 @import '../../components/textarea/Textarea.css';
 @import '../../components/toolbar/Toolbar.css';

src/components/rating/Rating.css

@@ -0,0 +1,12 @@
+.p-rating a {
+    cursor: pointer;
+}
+
+.p-rating {
+    font-size: 1.25em;
+}
+
+.p-rating.p-disabled a,
+.p-rating.p-rating-readonly a {
+    cursor: default;
+}

src/components/rating/Rating.vue

@@ -0,0 +1,54 @@
+<template>
+    <div :class="containerClass">
+        <a class="p-rating-cancel" v-if="cancel" @click="onCancelClick" tabindex="0">
+            <span class="p-rating-icon pi pi-ban"></span>
+        </a>
+        <a :key="i" v-for="i in stars" @click="onStarClick($event,i)" tabindex="0" @keydown.enter.prevent="onStarClick($event,i)">
+            <span :class="['p-rating-icon', {'pi pi-star-o': (i > value), 'pi pi-star': (i <= value)}]"></span>
+        </a>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: Number,
+        stars: {
+            type: Number,
+            default: 5
+        },
+        readonly: Boolean,
+        disabled: Boolean,
+        cancel: {
+            type: Boolean,
+            default: true
+        }
+    },
+    methods: {
+        onStarClick(event, value) {
+            this.updateModel(event, value);
+        },
+        onCancelClick() {
+            this.updateModel(event, null);
+        },
+        updateModel(event, value) {
+            this.$emit('input', value);
+            this.$emit('change', {
+                originalEvent: event,
+                value: value
+            });
+        }
+    },
+    computed: {
+        containerClass() {
+            return [
+                'p-rating',
+                {
+                    'p-rating-readonly': this.readonly,
+                    'p-disabled': this.disabled
+                }
+            ];
+        }
+    }
+}
+</script>

src/main.js

@@ -11,6 +11,7 @@ import InputText from './components/inputtext/InputText';
 import Fieldset from './components/fieldset/Fieldset';
 import Listbox from './components/listbox/Listbox';
 import Panel from './components/panel/Panel';
+import Rating from './components/rating/Rating';
 import RadioButton from './components/radiobutton/RadioButton';
 import SelectButton from './components/selectbutton/SelectButton';
 import Textarea from './components/textarea/Textarea';
@@ -37,6 +38,7 @@ Vue.component('p-listbox', Listbox);
 Vue.component('p-fieldset', Fieldset);
 Vue.component('p-panel', Panel);
 Vue.component('p-radioButton', RadioButton);
+Vue.component('p-rating', Rating);
 Vue.component('p-selectButton', SelectButton);
 Vue.component('p-tabView', TabView);
 Vue.component('p-tabPanel', TabPanel);

src/router.js

@@ -66,6 +66,11 @@ export default new Router({
         name: 'radiobutton',
         component: () => import('./views/radiobutton/RadioButtonDemo.vue')
     },
+    {
+        path: '/rating',
+        name: 'rating',
+        component: () => import('./views/rating/RatingDemo.vue')
+    },
     {
         path: '/selectbutton',
         name: 'selectbutton',

src/views/rating/RatingDemo.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Rating</h1>
+                <p>Rating component is a star based selection input.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic {{val1}}</h3>
+            <p-rating v-model="val1"  />
+
+            <h3>No Cancel {{val2}}</h3> 
+            <p-rating v-model="val2" :cancel="false" />
+
+            <h3>ReadOnly</h3> 
+            <p-rating :value="5" readonly={true} :stars="10" :cancel="false" />
+
+            <h3>Disabled</h3> 
+            <p-rating :value="8" :disabled="true" :stars="10" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            val1: null,
+            val2: 3,
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>