When binding it directly to v-bind, performance would be better,
And I would be able to declarre default values in the props rather than have to set them during mount/created.

To sum up this refactor will grant:

1. Better Performance - a more flatten mapping of the binded props compared to a Watch Deep mapping that is more resource consumable for vue virtual DOM
2. Easyness of Usage - Access to default values, types and more on each binded prop without need to declare and use setters
3. Readability & Cleanness of code - Less code in the template & more readible.

Example:
Instead of this:
<selector v-bind:configData=configData">

Write this

And declare each prop object in the props of the selector component

https://github.com/JonathanDn/vue-stars-rating/blob/master/star-rating.vue#L88

Why width/points? Isn't the radius of the inner circle 1/4 of the width

This issue is a bit harder to reproduce.

The generated stars svgs have a linearGradient with an id:

<linearGradient :id="`gradient${star.raw}`">

This id is supposed to be unique, but with 5 stars in a star rating, you will get at least 3 duplications of ids. But the browser can handle it.

Now if this component is used two times on the same page, the second component could use an id that was already defined in the <defs> of the first component. But the browser can still handle it.

Now ! Still with this component used twice, if the first one is rendered in the html, but isn't displayed (put a display: none; on it), this will break the second one. The gradient url reference is resolved to the defs of the first one and breaks: the stars aren't filled at all.

Sadly, with svgs there are no alternatives to id/url(#id)... The best solution I found is to prefix the gradient id with the _uid property of the vue component (which is different for each rating instance).

Motivation: Code Sandbox demo for testing stars could be made more fun by having a 0-5 slider below the stars or an input field to dynamically change the rating and test the rating stars. This could very well highlight the dynamic nature of the plugin which this plugin excels at.

Work: Addition of input slider/ input box to take interactive input from user and binding the value to star ratings

This could make the demo more polished thereby making the plugin more appealing for adoption by developers

1. On Hover - see coverage of ratings(from fill color to empty left to right)

2. On Click - set the new rating between 0.0-5.0 with a click

3. Click Emits Event - emit an event/hook for parent component to become "aware" of change in rating

4. isInteractive - boolean property - that allows to change from a "static" rating to "interactive" rating - can be changed

initStars and setStars are only called in the created function. Updating the rating prop of the component will not trigger an update of the data stars array.

There are many use cases where this component could have a rating with updates (for example: if the rating of a selected item of a list is displayed, and the user selects another item).

An easy but dirty solution would be to watch the rating prop and to call setStars.

In my opinion, it would be a lot cleaner to use directly a computed stars attribute (which would depend on the rating prop). This way, no need for initStars, setStars and even created: the computed property will update automatically when rating is updated.

Here is my version of the computed attribute:

computed: {
    stars: function() {
      const stars = []
      for (let i = 0; i < this.totalStars; i++) {
        const raw = Math.max(Math.min(this.rating - i, 1), 0)
        stars.push({
          raw: raw,
          percent: raw * 100 + "%"
        });
      }
      return stars
    }
  }

The Math.max(Math.min(this.rating - i, 1), 0) is a bit hacky (and may induce float issues like 0.8999999999999999 instead of 0.9) but won't noticable on the stars display. Not sure what's the best solution to avoid float issues.

** Seen Behavior **
Rating lower than 4 with decimal(i.e 0,1,2,3) cause repetative partial stars

Expected behavior
When the partially filled star is filled - stop filling stars

Hello,

First of all thank you for this component and for the nice medium post :) Very interesting to read.

However I didn't understand why you wrote a star drawing algorithm instead of using the "static" svg resized. From your blog post:

Once done with building the logic I realized it was not possible to alter the star’s width/height dynamically due to it’s hard-coded values — I had to draw the star programmatically in order to achieve a more dynamic star with width & height that are easily adjustable.

Indeed it is, I mean the S of SVG stands for scalable 😅

I managed to do pretty much what your component does using the viewBox svg property:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

You could just put viewBox="0 0 200 200" on your svg tag, and use the initial polygon <polygon points="100,10 40,198 190,78 10,78 160,198">, and voilà. The polygon is drawn in the viewBox, and is then scaled to fit the svg width/height.

Thanks again,

It is not currently possible to pass a CSS variable for fullStarColor or emptyStarColor.

Is it possible to add support for that please ?

Motivation: Since there is also functionality to have stars as dynamic as 3.7 and 3.8, it is hard to distinguish just by looking and hence need a tooltip on hover over stars which tells the rating in text.

User Interaction: User gets an idea of rating by looking, and if interested can view the exact rating by hovering over it.

Work: Hover event either CSS or JS and display tooltip

The displayed stars should support aria-label for users who use a screen reader to understand each apperance of this component's rating in an app.