mielui
Blocks

Task Steps

Show the current step and completed steps in a task.

Installation

pnpm dlx @mielui/svelte add task-steps

Usage

Pass the steps in order and set current to the index of the running step. Steps before it are done. Set current to steps.length when the whole run is complete. labels.list names the list for screen readers, and a status line announces progress after it settles.

<script lang="ts">
    import { type TaskStep, TaskSteps } from '@mielui/svelte/components/task-steps';

    const steps: TaskStep[] = [
        { id: 'build', label: 'Building' },
        { id: 'test', label: 'Testing' }
    ];
</script>

<TaskSteps {steps} current={1} labels={{ list: 'Deploy progress' }} />

Composition

Pass a children snippet to Root when rows need a different layout. It receives the same state the default layout uses: rows with a status each, completed, total, complete, failed, and the summary sentence. Summary renders that sentence as a live status line.

<script lang="ts">
    import * as TaskSteps from '@mielui/svelte/components/task-steps';

    const steps: TaskSteps.TaskStep[] = [
        { id: 'build', label: 'Building', meta: '8.1s' },
        { id: 'test', label: 'Testing' }
    ];
</script>

<TaskSteps.Root {steps} current={1}>
    {#snippet children(progress)}
        <TaskSteps.Summary class="text-sm" />
        <TaskSteps.List>
            {#each progress.rows as row (row.id)}
                <TaskSteps.Item status={row.status}>
                    <TaskSteps.Indicator />
                    <TaskSteps.Label>{row.label}</TaskSteps.Label>
                    {#if row.meta}
                        <TaskSteps.Meta>{row.meta}</TaskSteps.Meta>
                    {/if}
                </TaskSteps.Item>
            {/each}
        </TaskSteps.List>
    {/snippet}
</TaskSteps.Root>

Labels

Built-in text is English. Pass labels to Root to name the list and translate the summary sentence. progress, complete, and failed are functions so the step name and numbers can sit anywhere in the sentence. Every key is optional and English is the fallback.

<script lang="ts">
    import {
        type TaskStep,
        TaskSteps,
        type TaskStepsLabels
    } from '@mielui/svelte/components/task-steps';

    const steps: TaskStep[] = [
        { id: 'build', label: 'Compilation' },
        { id: 'test', label: 'Tests' }
    ];

    const labels: TaskStepsLabels = {
        list: 'Progression du déploiement',
        empty: 'Aucune étape.',
        progress: (step, position, total) => `${step}, étape ${position} sur ${total}.`,
        complete: (total) => `Les ${total} étapes sont terminées.`,
        failed: (step) => `Échec à l’étape ${step}.`
    };
</script>

<TaskSteps {steps} current={1} {labels} />

Examples

Live progress

Steps advance on a timer. Replay the preview to watch the run again.

Retry a failed step

Keep current on the failed step and set failed. Clear failed when the retry starts, and advance current once it succeeds. TaskSteps only shows the state; your code runs the work.

API reference

TaskSteps.Indicator

  • status
    TaskStepStatus

    State of the step.

TaskSteps.Item

  • status
    TaskStepStatus

    State of the step. Indicator, Label, and Meta read it.

    Default 'pending'

TaskSteps.Summary

  • children
    Snippet<[TaskStepsState]>

    Content rendered inside.

TaskSteps

Narrates ordered asynchronous work.

  • labels
    TaskStepsLabels

    Overrides the built-in text and accessible names. Every key is optional and English is the fallback.

  • children
    Snippet<[TaskStepsState]>

    Content rendered inside.

  • steps Required
    TaskStep[]

    Steps to show, in order.

  • current Required
    number

    Index of the step in progress.

  • failed
    boolean

    Marks the current step as failed.

    Default false

  • class
    (string & (ClassValue | null))

    Classes added to the element.

Other parts

These parts have no props of their own. They pass HTML attributes and events to their element.

  • TaskSteps.Label
  • TaskSteps.List
  • TaskSteps.Meta