Steps

<script lang="ts">
    import { Steps } from '@fibrae/semi-ui-svelte';

    const dataSource = [
        { title: 'Finished', description: 'This is a description' },
        { title: 'In Progress', description: 'This is a description' },
        { title: 'Waiting', description: 'This is a description' },
    ];
    const log = (i: number) => console.log(i);
</script>

<Steps current={1} {dataSource} onChange={log} />

<script lang="ts">
    import { Steps } from '@fibrae/semi-ui-svelte';

    const dataSource = [
        { title: 'Finished', description: 'This is a description' },
        { title: 'In Progress', description: 'This is a description' },
        { title: 'Waiting', description: 'This is a description' },
    ];
    const log = (i: number) => console.log(i);
</script>

<Steps current={1} {dataSource} onChange={log} type="basic" />

<script lang="ts">
    import { Steps } from '@fibrae/semi-ui-svelte';

    const dataSource = [{ title: '注册账号' }, { title: '这个项目的文字比较多多多多' }, { title: '产品用途' }, { title: '期待尝试功能' }];
    const log = (i: number) => console.log(i);
</script>

<div style="display: flex; justify-content: center">
    <Steps current={1} {dataSource} onChange={log} style="margin: auto" type="nav" />
</div>

<script lang="ts">
    import { Steps } from '@fibrae/semi-ui-svelte';

    const dataSource = [
        { title: 'Finished', description: 'This is a description' },
        { title: 'In Progress', description: 'This is a description' },
        { title: 'Waiting', description: 'This is a description' },
    ];
    const log = (i: number) => console.log(i);
</script>

<Steps current={1} {dataSource} onChange={log} size="small" type="basic" />

<script lang="ts">
    import { Steps } from '@fibrae/semi-ui-svelte';

    const dataSource = [{ title: '注册账号' }, { title: '这个项目的文字比较多多多多' }, { title: '产品用途' }, { title: '期待尝试功能' }];
    const log = (i: number) => console.log(i);
</script>

<div style="display: flex; justify-content: center">
    <Steps current={1} {dataSource} onChange={log} size="small" style="margin: auto" type="nav" />
</div>

<script lang="ts">
    import { Button, Steps } from '@fibrae/semi-ui-svelte';

    const steps = [
        { title: 'First', content: 'First-content' },
        { title: 'Second', content: 'Second-content' },
        { title: 'Last', content: 'Last-content' },
    ];
    let current = $state(0);
    const log = (i: number) => console.log(i);
    const done = () => console.log('Processing complete!');
</script>

<div>
    <Steps {current} dataSource={steps} onChange={log} type="basic" />
    <div class="steps-content" style="margin-top: 4px; margin-bottom: 4px">
        {steps[current].content}
    </div>
    <div class="steps-action">
        {#if current < steps.length - 1}
            <Button type="primary" onclick={() => (current += 1)}>Next</Button>
        {/if}
        {#if current === steps.length - 1}
            <Button type="primary" onclick={done}>Done</Button>
        {/if}
        {#if current > 0}
            <Button style="margin-left: 8px" onclick={() => (current -= 1)}>Previous</Button>
        {/if}
    </div>
</div>

<script lang="ts">
    import { Steps } from '@fibrae/semi-ui-svelte';

    const dataSource = [
        { title: 'Finished', description: 'This is a description' },
        { title: 'In Progress', description: 'This is a description' },
        { title: 'Waiting', description: 'This is a description' },
    ];
    const log = (i: number) => console.log(i);
</script>

<Steps current={1} {dataSource} direction="vertical" onChange={log} style="width: 300px" />

<script lang="ts">
    import { Steps } from '@fibrae/semi-ui-svelte';

    const dataSource = [
        { title: 'Finished', description: 'This is a description' },
        { title: 'In Progress', description: 'This is a description' },
        { title: 'Waiting', description: 'This is a description' },
    ];
    const log = (i: number) => console.log(i);
</script>

<Steps current={1} {dataSource} direction="vertical" onChange={log} type="basic" />

<script lang="ts">
    import { Steps } from '@fibrae/semi-ui-svelte';

    const dataSource = [
        { title: 'Finished', description: 'This is a description' },
        { title: 'In Process', description: 'This is a description' },
        { title: 'Waiting', description: 'This is a description' },
    ];
    const log = (i: number) => console.log(i);
</script>

<Steps current={1} {dataSource} onChange={log} status="error" type="basic" />

<script lang="ts">
    import { IconHome, IconLock } from '@fibrae/semi-icons-svelte';
    import { Steps, type StepData } from '@fibrae/semi-ui-svelte';

    // Steps without `icon` keep their built-in status icon
    const dataSource: StepData[] = [
        { status: 'finish', title: '已完成' },
        { status: 'error', title: '错误' },
        { status: 'warning', title: '警告' },
        { status: 'process', title: '正在进行', icon: homeIcon },
        { status: 'wait', title: '等待', icon: lockIcon },
    ];
    const log = (i: number) => console.log(i);
</script>

{#snippet homeIcon()}<IconHome size="extra-large" />{/snippet}
{#snippet lockIcon()}<IconLock size="extra-large" />{/snippet}

<Steps {dataSource} onChange={log} type="basic" />

<script lang="ts">
    import { Steps } from '@fibrae/semi-ui-svelte';

    const dataSource = [{ title: 'First' }, { title: 'Second' }, { title: 'Last' }];
    let current = $state(1);
</script>

<div>
    <Steps {current} {dataSource} onChange={(next) => (current = next)} type="basic" />
</div>