mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-08 16:03:27 +00:00
Diego ImbertandClaude Opus 4.6
5d79f33590
* Remove $$props.field usage * Rename slots to ensure no hyphen * _props * _trigger * OnSelectedIteration type correct capitalization * rename _content * Remove afterUpdate * Migrate everything to svelte 5 * array bind * Fix popover * type never * nit fixes * Fixed many trivial errors * onClick * Fix errors * use let: * nit typing * fix: wrap state_referenced_locally vars with untrack() Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add untrack import * Fix all syntax errors due to untrack migration * Fix undefined errors * Fix more undefined errors * untrack(() => initialOpen) * svelte-ignore * Fix state_descriptors_fixed error in Chart.svelte Use $state.snapshot() to pass plain copies of data/options to Chart.js instead of $state proxies. Chart.js's listenArrayEvents tries to define property descriptors on data arrays, which Svelte 5 proxies reject. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * nit typing * Merge issue * Fix "path is not set" error in resource picker / editor * Fix InputTransformForm error when rerunning some flows * fix npm run check --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
74 lines
1.3 KiB
Svelte
74 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { untrack } from 'svelte'
|
|
import { run } from 'svelte/legacy';
|
|
|
|
import { tweened } from 'svelte/motion'
|
|
import { cubicOut } from 'svelte/easing'
|
|
|
|
interface Props {
|
|
color?: string;
|
|
progress?: number;
|
|
ended?: boolean;
|
|
children?: import('svelte').Snippet;
|
|
}
|
|
|
|
let {
|
|
color = 'blue',
|
|
progress = 0,
|
|
ended = false,
|
|
children
|
|
}: Props = $props();
|
|
|
|
const tweenedProgress = tweened(untrack(() => progress), {
|
|
duration: 400,
|
|
easing: cubicOut
|
|
})
|
|
|
|
run(() => {
|
|
tweenedProgress.set(progress)
|
|
});
|
|
</script>
|
|
|
|
{#key color}
|
|
<div class="flex flex-row gap-1 items-center justify-between w-full">
|
|
{#if ended}
|
|
{@render children?.()}
|
|
{: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>
|