bug-fix: not unique linearGradient id when component is used multiple…

… times #12
ErnaneJ · Dec 18, 2023 · 5d0be19 · 5d0be19
1 parent 4a99226
commit 5d0be19
Showing 1 changed file with 11 additions and 35 deletions.
diff --git 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>