@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/ProgressBubble.svelte

@@ -1,82 +1,82 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { devCatch, getCanvasContext } from '../Helpers/Helpers.svelte.js';
-	import { tick } from 'svelte';
-	import type { BubbleColour } from './BubbleColour.js';
-	import type { ProgressBubbleProps } from './ProgressBubbleProps.js';
-
-	let { value, colours }: ProgressBubbleProps = $props();
-
-	let current = $derived(value[0]);
-	// let current = $derived(37)
-	let total = $derived(value[1]);
-	let progress = $derived(`${current}/${total}`);
-
-	let progressBarRef: HTMLDivElement | undefined = $state();
-
-	// for some reason, doing this in a derived-by puts the browser in some kind of infinite loop
-	let fitsInProgressBar = $state(false);
-	$effect(() => {
-		if (progress && progressBarRef) {
-			const oldRef = progressBarRef;
-			tick()
-				.then(() => {
-					if (oldRef === progressBarRef) {
-						const textWidth = getCanvasContext()?.measureText(`__${progress}__`).width ?? 0;
-						const progresValueWidth = progressBarRef.getBoundingClientRect().width;
-
-						fitsInProgressBar = progresValueWidth > textWidth;
-					} else {
-						fitsInProgressBar = false;
-					}
-				})
-				.catch(devCatch);
-		}
-	});
-
-	let awaitedColours: BubbleColour | undefined = $state();
-
-	$effect(() => {
-		if (colours) {
-			if (colours instanceof Promise) {
-				colours
-					.then((c) => {
-						awaitedColours = c;
-					})
-					.catch((e: unknown) => {
-						devCatch(e);
-						awaitedColours = undefined;
-					});
-			} else {
-				awaitedColours = colours;
-			}
-		} else {
-			awaitedColours = undefined;
-		}
-	});
-</script>
-
-<div
-	class="progress-wrapper"
-	style={awaitedColours
-		? `--bar-background-colour: ${awaitedColours.backgroundColour}; --text-colour: ${awaitedColours.colour};`
-		: ''}
->
-	<progress value={current} max={total}>{progress}</progress>
-
-	<div class="progress-background" role="progressbar">
-		<div
-			class:fits={fitsInProgressBar}
-			class="progress-value"
-			bind:this={progressBarRef}
-			style={`width: ${Math.min((current / total) * 100, 100)}%;`}
-		>
-			<span class:fits={fitsInProgressBar} class="progress-text">{progress}</span>
-		</div>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { devCatch, getCanvasContext } from '../Helpers/Helpers.svelte.js';
+	import { tick } from 'svelte';
+	import type { BubbleColour } from './BubbleColour.js';
+	import type { ProgressBubbleProps } from './ProgressBubbleProps.js';
+
+	let { value, colours }: ProgressBubbleProps = $props();
+
+	let current = $derived(value[0]);
+	// let current = $derived(37)
+	let total = $derived(value[1]);
+	let progress = $derived(`${current}/${total}`);
+
+	let progressBarRef: HTMLDivElement | undefined = $state();
+
+	// for some reason, doing this in a derived-by puts the browser in some kind of infinite loop
+	let fitsInProgressBar = $state(false);
+	$effect(() => {
+		if (progress && progressBarRef) {
+			const oldRef = progressBarRef;
+			tick()
+				.then(() => {
+					if (oldRef === progressBarRef) {
+						const textWidth = getCanvasContext()?.measureText(`__${progress}__`).width ?? 0;
+						const progresValueWidth = progressBarRef.getBoundingClientRect().width;
+
+						fitsInProgressBar = progresValueWidth > textWidth;
+					} else {
+						fitsInProgressBar = false;
+					}
+				})
+				.catch(devCatch);
+		}
+	});
+
+	let awaitedColours: BubbleColour | undefined = $state();
+
+	$effect(() => {
+		if (colours) {
+			if (colours instanceof Promise) {
+				colours
+					.then((c) => {
+						awaitedColours = c;
+					})
+					.catch((e: unknown) => {
+						devCatch(e);
+						awaitedColours = undefined;
+					});
+			} else {
+				awaitedColours = colours;
+			}
+		} else {
+			awaitedColours = undefined;
+		}
+	});
+</script>
+
+<div
+	class="progress-wrapper"
+	style={awaitedColours
+		? `--bar-background-colour: ${awaitedColours.backgroundColour}; --text-colour: ${awaitedColours.colour};`
+		: ''}
+>
+	<progress value={current} max={total}>{progress}</progress>
+
+	<div class="progress-background" role="progressbar">
+		<div
+			class:fits={fitsInProgressBar}
+			class="progress-value"
+			bind:this={progressBarRef}
+			style={`width: ${Math.min((current / total) * 100, 100)}%;`}
+		>
+			<span class:fits={fitsInProgressBar} class="progress-text">{progress}</span>
+		</div>
+	</div>
+</div>
+
 <style>.progress-wrapper {
   width: 100%;
   height: 100%;
@@ -128,4 +128,4 @@ progress {
 }
 .progress-text.fits {
   color: var(--text-colour, #3a4952);
-}</style>
+}</style>