From 338263e86db88b98d3b80478b4f5e22557b3bafd Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Fri, 29 Nov 2024 10:58:28 +0100
Subject: [PATCH] Update size when prop is changed

---
 v2/pink-sb/src/lib/ProgressCircle.svelte | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/v2/pink-sb/src/lib/ProgressCircle.svelte b/v2/pink-sb/src/lib/ProgressCircle.svelte
index 62cfeebc81..90b0004272 100644
--- a/v2/pink-sb/src/lib/ProgressCircle.svelte
+++ b/v2/pink-sb/src/lib/ProgressCircle.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
-    export let progress: number = 0;
-    export let size: 's' | 'm' | 'l' = 'm';
+    type $$Props = {
+        progress: number;
+        size: 's' | 'm' | 'l';
+    };
+    export let progress: $$Props['progress'] = 0;
+    export let size: $$Props['size'] = 'm';
 
-    function getPixelSize() {
-        switch (size) {
+    function getPixelSize(pixelSize: $$Props['size']) {
+        switch (pixelSize) {
             case 's':
                 return 24;
             case 'm':
@@ -12,15 +16,18 @@
                 return 48;
         }
     }
+
+    $: pixelSize = getPixelSize(size);
 </script>
 
 <div>
+    {size}{pixelSize}
     <svg
-        width={getPixelSize()}
-        height={getPixelSize()}
-        viewBox="0 0 {getPixelSize()} {getPixelSize()}"
+        width={pixelSize}
+        height={pixelSize}
+        viewBox="0 0 {pixelSize} {pixelSize}"
         class="circular-progress"
-        style="--progress-target: {progress}; --circle-size: {getPixelSize()}px"
+        style="--progress-target: {progress}; --circle-size: {pixelSize}px"
     >
         <circle class="bg"></circle>
         <circle class="fg"></circle>