add active-border-color prop (closes #34)

changelog.md

@@ -9,6 +9,7 @@
 
 - New `animate` prop added which slightly rotates and expands the star on mouseover
 - New `apply-active-color-on-hover` prop, which allows active colours to be applied on hover, or if set to false, on click 
+- New `active-border-color` prop, which allows border colour to be changed when star is active (issue #34)
 - Better support for touch screen devices
 - Refactor parseAlphaColor method into own class
 - Refactor star.vue

examples/commonjs/App.vue

@@ -1,18 +1,16 @@
 <template>
-  <div style="background: #000;padding:50px;">
+  <div style="background: #fff;padding:50px;">
     <star-rating
       v-model:rating="rating"
       :round-start-rating="false"
       :star-points="[23,2, 14,17, 0,19, 10,34, 7,50, 23,43, 38,50, 36,34, 46,19, 31,17]"
-      :border-width="3"
-      border-color="#fff"
-      :padding="5"
+      :border-width="5"
+      border-color="black"
+      active-border-color="#ccc"
       :clearable="true"
       inactive-color="#fff"
-      :apply-active-color-on-hover="true"
+      :apply-active-color-on-hover="false"
       :animate="true"
-      glow-color="#fff"
-      :glow="5"
     />
     <a
       href="#"

spec/star.spec.js

@@ -1,5 +1,6 @@
 import {mount} from '@vue/test-utils'
 import Star from '../src/star.vue'
+import StarRating from "../src/star-rating"
 
 
 var defaultProps = {
@@ -102,6 +103,24 @@ describe('Star Component', () => {
         expect(wrapper.vm.gradId.length > 0).toBeTruthy();
     });
 
+
+    it('should not add the vue-star-rating-star-rotate class when animate is set to false', () => {
+        const wrapper = mount(StarRating)
+
+        expect(wrapper.findAll('.vue-star-rating-star-rotate').length).toEqual(0)
+    });
+
+
+    it('should add the vue-star-rating-star-rotate class when animate is set to true', () => {
+        const wrapper = mount(StarRating,{
+            propsData : {
+                animate: true
+            }
+        })
+
+        expect(wrapper.findAll('.vue-star-rating-star-rotate').length > 0).toBeTruthy()
+    });
+
     describe('color parsing function', () => {
         it('should calculate hex(a) color and opacity', () => {
             const wrapper = mount(Star, {

src/star-rating.vue

@@ -19,6 +19,7 @@
           :active-color="activeColor"
           :inactive-color="inactiveColor"
           :border-color="borderColor"
+          :active-border-color="userActiveBorderColor"
           :border-width="borderWidth"
           :rounded-corners="roundedCorners"
           :rtl="rtl"
@@ -101,6 +102,10 @@ export default {
             type: String,
             default: '#999'
         },
+        activeBorderColor: {
+            type: String,
+            default: null
+        },
         borderWidth: {
             type: Number,
             default: 0
@@ -175,7 +180,9 @@ export default {
         this.step = this.increment * 100
         this.currentRating = this.rating
         this.selectedRating = this.currentRating
+        this.userActiveBorderColor = (this.activeBorderColor) ? this.activeBorderColor : this.borderColor
         this.createStars(this.roundStartRating)
+
     },
     methods: {
         setRating($event, persist) {

src/star.vue

@@ -59,7 +59,7 @@
       :fill="gradId"
       :stroke="getBorderColor"
       :stroke-width="border"
-      :stroke-linejoin="roundedCorners ? 'round' : 'miter'"
+      :stroke-linejoin="strokeLinejoin"
     />
     <polygon
       :points="starPointsToString"
@@ -104,6 +104,10 @@ export default {
             type: String,
             default: '#000'
         },
+        activeBorderColor: {
+            type: String,
+            default: '#000'
+        },
         borderWidth: {
             type: Number,
             default: 0
@@ -163,7 +167,7 @@ export default {
                 return (this.fill <= 0) ? this.inactiveColor : this.activeColor
             }
 
-            return this.borderColor
+            return (this.fill <= 0) ? this.borderColor : this.activeBorderColor
         },
         maxSize() {
             return this.starPoints.reduce(function(a, b) {
@@ -175,6 +179,9 @@ export default {
         },
         shouldAnimate() {
             return this.animate && this.isStarActive
+        },
+        strokeLinejoin() {
+            return this.roundedCorners ? 'round' : 'miter'
         }
     },
     created() {