Stepper

Usage

Envolve o UTimeline do Nuxt UI e sempre renderiza como somente leitura: é pensado para mostrar histórico ou progresso de um documento, não como um wizard navegável.

<template>
  <MeStepper :items="items" />
</template>

<script setup lang="ts">
import type { StepperItem } from '@mercadoeletronico/eds-next'

const items: StepperItem[] = [
  { title: 'Submetido', description: '07/11/2025 09:30', state: 'done' },
  { title: 'Recusado por falta de regra', description: '07/11/2025 09:35', state: 'error' },
  { title: 'Aprovado', description: '07/11/2025 09:39', state: 'success' }
]
</script>

Estado por item

Cada item pode ter um state: pending (padrão, sem ícone), done (indicador neutro), success (verde) ou error (vermelho).

<template>
  <MeStepper :items="items" />
</template>

<script setup lang="ts">
const items = [
  { title: 'Pendente' },
  { title: 'Feito', state: 'done' },
  { title: 'Sucesso', state: 'success' },
  { title: 'Erro', state: 'error' }
]
</script>

Orientation

Use a prop orientation para alternar entre horizontal (padrão) e vertical.

<template>
  <MeStepper
    orientation="vertical"
    :items="items"
  />
</template>

Size

Repassado direto para o UTimeline por baixo — aceita os mesmos valores.

<template>
  <MeStepper
    size="sm"
    :items="items"
  />
</template>

API

Props

Notas

• Não passa modelValue para o UTimeline por baixo: é um indicador de status por item, não um progresso linear navegável.
• O indicador de cada item (ui.indicator) é montado aqui a partir do state, já que o UTimeline só colore indicator/separator por posição linear (antes/depois do passo atual via modelValue), não por estado explícito de cada item.
• O conector entre os passos usa a cor padrão do UTimeline e não reflete o state por segmento — colorir por segmento exigiria overridar o slot separator com a mesma lógica do indicator.