Steps

await import('/components/navigation/steps.js');
await import('/components/actions/button.js');
const { signal, tags, $ } = Lightview;
const { div, Steps, Button } = tags;

const currentStep = signal(1);
const stepNames = ['Cart', 'Shipping', 'Payment', 'Confirm'];

const demo = div({ style: 'display: flex; flex-direction: column; gap: 1rem;' },
    Steps({},
        ...stepNames.map((name, i) => 
            Steps.Item({ 
                color: () => i < currentStep.value ? 'primary' : undefined 
            }, name)
        )
    ),
    div({ style: 'display: flex; gap: 0.5rem; justify-content: center;' },
        Button({ 
            size: 'sm',
            disabled: () => currentStep.value <= 1,
            onclick: () => { currentStep.value--; }
        }, 'Back'),
        Button({ 
            size: 'sm',
            color: 'primary',
            disabled: () => currentStep.value >= stepNames.length,
            onclick: () => { currentStep.value++; }
        }, 'Next')
    )
);

$('#example').content(demo);

await import('/components/navigation/steps.js');
await import('/components/actions/button.js');
const { signal, $, tags } = Lightview;
const { Steps, Button, div } = tags;

const currentStep = signal(1);
const stepNames = ['Cart', 'Shipping', 'Payment', 'Confirm'];

const demo = {
    tag: div,
    attributes: { style: 'display: flex; flex-direction: column; gap: 1rem;' },
    children: [
        {
            tag: Steps,
            children: stepNames.map((name, i) => ({
                tag: Steps.Item,
                attributes: {
                    color: () => i < currentStep.value ? 'primary' : undefined
                },
                children: [name]
            }))
        },
        {
            tag: div,
            attributes: { style: 'display: flex; gap: 0.5rem; justify-content: center;' },
            children: [
                {
                    tag: Button,
                    attributes: {
                        size: 'sm',
                        disabled: () => currentStep.value <= 1,
                        onclick: () => { currentStep.value--; }
                    },
                    children: ['Back']
                },
                {
                    tag: Button,
                    attributes: {
                        size: 'sm',
                        color: 'primary',
                        disabled: () => currentStep.value >= stepNames.length,
                        onclick: () => { currentStep.value++; }
                    },
                    children: ['Next']
                }
            ]
        }
    ]
};

$('#example').content(demo);

await import('/components/navigation/steps.js');
await import('/components/actions/button.js');
const { signal, $ } = Lightview;

const currentStep = signal(1);
const stepNames = ['Cart', 'Shipping', 'Payment', 'Confirm'];

const demo = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 1rem;',
        children: [
            {
                Steps: {
                    children: stepNames.map((name, i) => ({
                        'Steps.Item': {
                            color: () => i < currentStep.value ? 'primary' : undefined,
                            children: [name]
                        }
                    }))
                }
            },
            {
                div: {
                    style: 'display: flex; gap: 0.5rem; justify-content: center;',
                    children: [
                        {
                            Button: {
                                size: 'sm',
                                disabled: () => currentStep.value <= 1,
                                onclick: () => { currentStep.value--; },
                                children: ['Back']
                            }
                        },
                        {
                            Button: {
                                size: 'sm',
                                color: 'primary',
                                disabled: () => currentStep.value >= stepNames.length,
                                onclick: () => { currentStep.value++; },
                                children: ['Next']
                            }
                        }
                    ]
                }
            }
        ]
    }
};

$('#example').content(demo);