diff --git a/src/lib/Progressbar.svelte b/src/lib/Progressbar.svelte index f55e8c5..e67ec34 100644 --- a/src/lib/Progressbar.svelte +++ b/src/lib/Progressbar.svelte @@ -2,9 +2,10 @@ import { cubicOut } from "svelte/easing"; import { tweened } from "svelte/motion"; import { twMerge, twJoin } from "tailwind-merge"; + import { clamp } from "../util/mathUtil"; - export let progress: string | number | undefined | null = "45"; - export let precision = 0; + export let progress: number = 45; + export let precision = 2; export let tweenDuration = 400; export let animate = false; export let size = "h-2.5"; @@ -12,10 +13,10 @@ export let labelOutside = ""; export let easing = cubicOut; export let color = "primary"; + export let indeterminate = false; export let labelInsideClass = "text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full"; export let divClass = "w-full bg-gray-200 rounded-full dark:bg-gray-700"; - export let indeterminate = progress == null; const barColors: Record = { primary: "bg-primary-600", @@ -28,15 +29,14 @@ indigo: "bg-indigo-600 dark:bg-indigo-500", }; - const _progress = tweened(0, { - duration: animate && !indeterminate ? tweenDuration : 0, + let _progress = tweened(0, { + duration: tweenDuration, easing, }); $: { - if (!indeterminate) { - _progress.set(Number(progress)); - } + progress = clamp(Number(progress), 0, 100); + _progress.set(progress); } @@ -49,7 +49,9 @@ >{labelOutside} {progress}%{animate + ? $_progress.toFixed(precision) + : progress.toFixed(precision)}% {/if} @@ -59,9 +61,9 @@ {#if !indeterminate}
- {$_progress.toFixed(precision)}% + {animate ? $_progress.toFixed(precision) : progress.toFixed(precision)}%
{:else}
{:else}
import { Button, Checkbox } from "flowbite-svelte"; import Progressbar from "../lib/Progressbar.svelte"; - import { launching, patch, launchStatus } from "./../storage/localStore"; + import { + launching, + patch, + launchStatus, + launchPercentage, + } from "./../storage/localStore"; let progressbarFix = true; setTimeout(() => { @@ -10,7 +15,8 @@ const launch = () => { launching.set(true); - } + window.dispatchEvent(new CustomEvent("launch")); + };
launching.set(!$launching)}>LaunchLaunch

{$launchStatus}