Timeline
Sequência de eventos com data, título e ícone — a linha do tempo de aprovações/estados do documento (Nuxt UI).
Componente base do Nuxt UI (
UTimeline), ainda não internalizado no EletroDS — confira o comportamento antes de usar no ME.A Timeline mostra uma sequência de eventos (data · título · ícone). No ME aparece no documento para o histórico de aprovações/estados (Enviado → Rejeitado → Aprovado) e nas Rodadas/Históricos da cotação.
Uso no ME (só o último nó colorido)
Convenção do ME: a linha é horizontal (orientation="horizontal"), size="xs", color="primary", e apenas o último nó fica colorido — os anteriores ficam cinza. Como color="primary" pinta os nós concluídos de azul, o cinza precisa de ! para vencer:
<script setup>
const items = [
{ date: 'Mar 15 2025', title: 'Status: Enviado', icon: 'i-lucide-check', ui: { indicator: '!bg-[var(--ui-text-dimmed)] text-inverted' } },
{ date: 'Mar 22 2025', title: 'Status: Rejeitado', icon: 'i-lucide-x', ui: { indicator: '!bg-[var(--ui-text-dimmed)] text-inverted' } },
{ date: 'Mar 29 2025', title: 'Status: Aprovado', icon: 'i-lucide-check', ui: { indicator: '!bg-success text-inverted' } },
]
</script>
<template>
<UTimeline orientation="horizontal" size="xs" color="primary" :items="items" :default-value="2" class="w-full" />
</template>
:default-valuemarca o nó ativo (último). O!bg-[var(--ui-text-dimmed)]éeds-allow(token via var, não é HEX cru).- Clicável quando precisa navegar entre etapas (evento
select).
API
Props
| Prop | Default | Type |
|---|---|---|
items | - | T[] { date?, title?, description?, icon?, value?, ui? }. |
orientation | 'vertical' | 'horizontal' | 'vertical' |
size | - | '3xs'…'3xl' |
color | - | 'primary' | 'success' | 'error' | ... |
default-value | - | string | number Nó ativo inicial. |
value-key | 'value' | string |
reverse | false | boolean |
ui | - | { root?, item?, indicator?, separator?, date?, title?, description?, ... } |
Slots
| Slot | Type |
|---|---|
indicator · date · title · description · wrapper | {} |
Emits
| Event | Type |
|---|---|
select | [event: Event, item: T] |
update:modelValue | [value: string | number | undefined] |
Acessibilidade
- Cada evento tem rótulo textual (data + título) — o estado não depende só do ícone/cor.
- Navegável por teclado quando os nós são clicáveis; foco visível.
- Cor do nó via token (
--ui-*), com reforço por ícone (check/x).