Merge pull request #10 from ErnaneJ/score-format

Feature: add possibility to format fill percentage. Co-authored-by: Yelinz <[email protected]>
ErnaneJ · Jul 29, 2023 · bb8ce29 · bb8ce29
2 parents 842d9c2 + 3e55704
commit bb8ce29
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 21 deletions.
diff --git a/Readme.md b/Readme.md
@@ -38,12 +38,13 @@ This package will add a svelte component that may or may not receive a configura
 
 - ⚙️ General Settings
 
-| Attribute |   Data Type  | Required  |    Default   |
-|:---------:|:------------:|:---------:|:------------:|
-| readOnly  |   `bool`     |    false    |     false    |
-| countStars|   `integer`  |    false    |     5        |
-| score     |   `float`    |    false    |     0.0      |
-| showScore |   `bool`     |    false    |     true     |
+| Attribute  |   Data Type  | Required    |    Default   |
+|:----------:|:------------:|:-----------:|:------------:|
+| readOnly   |   `bool`     |    false    |     false    |
+| countStars |   `integer`  |    false    |     5        |
+| score      |   `float`    |    false    |     0.0      |
+| showScore  |   `bool`     |    false    |     true     |
+| scoreFormat|   `function` |    false    |    precent   |
 
 In addition, we have two other nested attributes that specify distinct settings.
 
@@ -78,6 +79,7 @@ const config = {
   },
   score: 0.0,
   showScore: true,
+  scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
   starConfig: {
     size: 30,
     fillColor: '#F9ED4F',

diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Stars.svelte b/src/Stars.svelte
@@ -22,18 +22,24 @@
       {#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)}/>
+        {:else if parseInt(config.score) > id}
+          <Star {id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={1}/>
         {:else}
-          {#if parseInt(config.score) > id}
-            <Star {id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={1}/>
-          {:else}
-            <Star {id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={0}/>
-          {/if}
+          <Star {id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={0}/>
         {/if}
       {/each}
     </div>
     <input class="slider" disabled={config.readOnly} type="range" min={config.range.min} max={config.range.max} step="{config.range.step}" bind:value={config.score} on:change >
   </div>
-  {#if config.showScore}<span class="show-score" style="font-size: {config.starConfig.size/2}px;">({parseFloat((config.score/config.countStars)*100).toFixed(2)}%)</span>{/if}
+  {#if config.showScore}
+    <span class="show-score" style="font-size: {config.starConfig.size/2}px;">
+      {#if config.scoreFormat}
+        {config.scoreFormat()}
+      {:else}
+        ({parseFloat((config.score/config.countStars)*100).toFixed(2)}%)
+      {/if}
+    </span>
+  {/if}
 </section>
 
 <style>