3c99b3fdc7
* runs on svelte 5 * Line component from svelte-chartjs * Replaced all svelte-chartjs occurrences with custom wrapper * Fix props mistake * Fix illegal table structures * self-closing-tags fix * aria labels * Fixed trivial warnings and errors * @tanstack/svelte-table fix * upgrade to vite 6 * svelte-kit sync before running svelte-check * Remove on:clear which is actually on:removeAll and already handled by on:change * fix worker tags not displaying in Autoscaling * Try to fix svelte-kit sync not working during CI * remove warnings * Fix add flow page crashing * access worldStore before assignment fix * fix infinite recursions in App Editor * Replaced JSON.stringify with proper deepEqual * component mount api changed (no longer classes) * fix ci errors * Fix infinite loops in background runnable panel * factored effect on deep equal logic in onObjChange * fix "Add" not working in AgGrid Table * Replaced legacy component.$set api * Fix multiselect infinite value reaction * Fix flow input fields resetting when opening their edit tab * fix date input resetting when typing year * Remove !p-0 affecting subgrid dotted borders * fix missing debounceTemplate causing hundreds of updates * Fix AgGrid action refreshes and disppearing * resolve getItems generating random ids every rerun * fix cannot access items before init * fix sort lambda arguments being undefined * Revert "Remove !p-0 affecting subgrid dotted borders" This reverts commit c62809bb45d682a48376b071680645ed4e1c601b. * fix input not updating in decision tree editor * Update frontend/src/lib/components/schema/EditableSchemaWrapper.svelte Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com> * Re-added padding affecting subgrid dotted borders (#5479) * remove !p-0 in preset components * removed extra padding on accordion tabs subgrid * Fix non-reactive SchemaForm * dirty fix for the oneOf bug * Fix warnings and update svelte-exmarkdown for svelte 5 * fix dnd not working * don't mount component like objects --------- Co-authored-by: Diego Imbert <diegoimbert@protonmail.com> Co-authored-by: Diego Imbert <70353967+diegoimbert@users.noreply.github.com> Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
59 lines
1.1 KiB
Svelte
59 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { tweened } from 'svelte/motion'
|
|
import { cubicOut } from 'svelte/easing'
|
|
|
|
export let color = 'blue'
|
|
export let progress = 0
|
|
export let ended: boolean = false
|
|
|
|
const tweenedProgress = tweened(progress, {
|
|
duration: 400,
|
|
easing: cubicOut
|
|
})
|
|
|
|
$: tweenedProgress.set(progress)
|
|
</script>
|
|
|
|
{#key color}
|
|
<div class="flex flex-row gap-1 items-center justify-between w-full">
|
|
{#if ended}
|
|
<slot />
|
|
{:else}
|
|
<div class="progress-bar">
|
|
<div
|
|
class={`progress ${!ended ? 'blinking' : ''}`}
|
|
style={`--color: ${color}; width: ${Math.round($tweenedProgress)}%`}
|
|
></div>
|
|
</div>
|
|
<span class="text-xs p-1">{Math.round($tweenedProgress)}%</span>
|
|
{/if}
|
|
</div>
|
|
{/key}
|
|
|
|
<style>
|
|
.progress-bar {
|
|
height: 10px;
|
|
background-color: lightgray;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
.progress {
|
|
height: 100%;
|
|
background-color: var(--color);
|
|
transition: width 0.4s ease-out;
|
|
}
|
|
.blinking {
|
|
animation: blink 1s linear infinite;
|
|
}
|
|
@keyframes blink {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
</style>
|