From 5d0be19640724b650051f78c37aedc1410f2d40a Mon Sep 17 00:00:00 2001
From: Ernane Ferreira <ernane.junior25@gmail.com>
Date: Mon, 18 Dec 2023 20:43:59 -0300
Subject: [PATCH] bug-fix: not unique linearGradient id when component is used
 multiple times #12

---
 src/Stars.svelte | 46 +++++++++++-----------------------------------
 1 file changed, 11 insertions(+), 35 deletions(-)

diff --git a/src/Stars.svelte b/src/Stars.svelte
index f6891e9..579607c 100644
--- a/src/Stars.svelte
+++ b/src/Stars.svelte
@@ -3,10 +3,11 @@
   export let config = {
     readOnly: false,
     countStars: 5,
-    range: {min: 0, max: 5, step: 0.001},
+    range: { min: 0, max: 5, step: 0.001 },
     score: 0.0,
     showScore: true,
-    name: "",
+    name: "stars",
+    scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
     starConfig: {
       size: 30,
       fillColor: '#F9ED4F',
@@ -22,11 +23,11 @@
     <div class="stars">
       {#each Array(config.countStars) as star, id}
         {#if parseInt(config.score) == id}
-          <Star {id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={config.score - parseInt(config.score)}/>
+          <Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={config.score - parseInt(config.score)}/>
         {:else if parseInt(config.score) > id}
-          <Star {id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={1}/>
+          <Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={1}/>
         {:else}
-          <Star {id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={0}/>
+          <Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={0}/>
         {/if}
       {/each}
     </div>
@@ -44,34 +45,9 @@
 </section>
 
 <style>
-  .stars-container{
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: .5rem;
-  }
-  .range-stars{
-    position: relative;
-  }
-  .stars{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: .5rem;
-  }
-  .slider{
-    opacity: 0;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    left: 0;
-    height: 100%;
-  }
-  .show-score{
-    user-select: none;
-    color: #888
-  }
+  .stars-container{ position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; }
+  .range-stars{ position: relative; }
+  .stars{ display: flex; align-items: center; justify-content: center; gap: .5rem; }
+  .slider{ opacity: 0; cursor: pointer; position: absolute; top: 0; left: 0; right: 0; left: 0; height: 100%; }
+  .show-score{ user-select: none; color: #888 }
 </style>