Design System do Laboratório

Tema

Versão preliminar. Cores, componentes e layout ainda vão mudar: falta receber o padrão de interface do TJES (template-basico-vue) e o manual de identidade visual.

BaseTimeline ​

Histórico de um registro: quem fez, o quê e quando. A justificativa de uma devolução aparece em destaque, como citação de quem devolveu.

  1. Paulo Ramos lançou a medição 29

  2. Marta Coelho devolveu a medição 28

    Item 5.1 com quantidade acima do previsto para o pavimento 2. Conferir com o diário de obra.

  3. Rui Antunes registrou o 3º termo aditivo · +R$ 1.204.330,00

Uso ​

  • Use na aba ou no cartão de histórico de um contrato, medição ou aditivo. Cada registro diz quem agiu, o que fez e quando.
  • Passe os registros na ordem em que devem aparecer, normalmente do mais recente para o mais antigo. O componente não reordena.
  • Escreva a ação no passado, logo depois do nome: "devolveu a medição 28", "registrou o 3º termo aditivo". O nome aparece em negrito antes dela.
  • A data vem em ISO 8601 com hora e fuso (2026-10-20T16:42:00-03:00 ou 2026-10-20T19:42:00Z) ou como Date. O componente mostra quanto tempo passou e a data completa: "há 2 dias · 20/10/2026 às 16:42". A hora é sempre a de Brasília, em qualquer aparelho.
  • Uma data sem hora (2026-10-20), sem fuso (2026-10-20T16:42:00) ou já formatada pela API aparece como veio, sem cálculo: o navegador leria cada uma num fuso diferente e mostraria a hora errada. Uma data vazia ou null não aparece.
  • justification é o motivo dado por quem agiu, por exemplo ao devolver uma medição. Aparece como citação logo abaixo do registro, sem as linhas em branco do começo e do fim. Texto vazio, só com espaços ou null não aparece.
  • tone reforça o desfecho: um sinal no canto do avatar e a cor da borda da citação. A ação precisa dizer o desfecho em palavras; o tom só confirma.
  • O tempo relativo é calculado quando a lista aparece. Numa tela que fica aberta por horas, passe now com uma data que você atualiza de tempos em tempos.

Tons ​

  1. Marta Coelho aprovou a medição 27

  2. Marta Coelho devolveu a medição 26

    Falta a memória de cálculo do item 3.2.

  3. Rui Antunes cancelou o empenho 2026NE000398

    Empenho emitido com a natureza de despesa errada.

  4. Paulo Ramos pediu revisão do cronograma

  5. Paulo Ramos anexou a memória de cálculo

TomSinalLido pelo leitor de telaQuando
neutralnenhumnadaRegistro comum: anexou, editou, comentou
infoi"Informação:"Lançou, enviou, pediu revisão
success✓"Sucesso:"Aprovou, assinou, concluiu
warning!"Atenção:"Devolveu, pediu correção
error✕"Alerta:"Cancelou, recusou, rescindiu

Datas ​

  1. Paulo Ramos lançou a medição 29

  2. Marta Coelho devolveu a medição 28

    Item 5.1 com quantidade acima do previsto para o pavimento 2. Conferir com o diário de obra.

  1. Paulo Ramos lançou a medição 29

  2. Marta Coelho devolveu a medição 28

    Item 5.1 com quantidade acima do previsto para o pavimento 2. Conferir com o diário de obra.

datesMostraQuando
both"há 2 dias · 20/10/2026 às 16:42"Padrão, para quem precisa da data exata e da noção de tempo
relative"há 2 dias", com a data completa na dica do mouse e no texto lido pelo leitor de telaCartão lateral com pouco espaço
absolute"20/10/2026 às 16:42"Relatório impresso ou exportado, onde "há 2 dias" envelhece

O tempo relativo conta o tempo passado, não o calendário: "há 1 dia" em vez de "ontem", para não dizer "ontem" de algo feito há 25 horas que caiu dois dias antes no calendário.

Tamanho pequeno ​

  1. Paulo Ramos lançou a medição 29

  2. Marta Coelho devolveu a medição 28

    Item 5.1 com quantidade acima do previsto para o pavimento 2. Conferir com o diário de obra.

Carregando e vazio ​

Nenhum registro no histórico.

O histórico não tem estados de hover, foco, desabilitado ou erro: é uma lista para ler, sem nada para clicar.

Estilo ​

PropriedadeToken
Nome--tj-text-primary, --tj-weight-semibold
Ação--tj-text-primary, --tj-text-md (--tj-text-sm no sm)
Data--tj-text-helper, --tj-text-sm (--tj-text-xs no sm), números tabulares
Linha entre registros2 px de --tj-layer-accent-01
CitaçãoFundo --tj-layer-02, texto --tj-text-secondary, borda de 2 px
Borda da citação--tj-border-strong-01; com tom, --tj-support-info, --tj-support-success, --tj-support-warning ou --tj-support-error
Sinal do tomCírculo de --tj-icon-sm (16 px, ícone de 10 px; no sm, 12 px com ícone de 8 px, mais afastado para não cobrir as iniciais) em --tj-support-*-subtle com ícone em --tj-support-*-text, contorno de --tj-layer-01
Espaço entre registros--tj-space-5 (--tj-space-4 no sm)
AvatarBaseAvatar de 32 px (md) ou 24 px (sm)

Todos os tokens trocam de valor no tema escuro.

Código ​

vue
<script setup lang="ts">
import { BaseTimeline, type TimelineItem } from '@lab-inovacao/design-system'

const historico: TimelineItem[] = [
  { id: '102', author: 'Paulo Ramos', date: '2026-10-20T16:42:00-03:00', action: 'lançou a medição 29', tone: 'info' },
  {
    id: '101',
    author: 'Marta Coelho',
    date: '2026-09-18T10:05:00-03:00',
    action: 'devolveu a medição 28',
    justification: 'Item 5.1 acima do previsto para o pavimento 2.',
    tone: 'warning',
  },
]
</script>

<template>
  <BaseTimeline :items="historico" label="Histórico da medição 29" />
</template>

BaseTimeline

PropriedadeTipoPadrãoDescrição
itemsTimelineItem[]—Registros na ordem em que aparecem. Obrigatório
labelstring'Histórico'Nome da lista para o leitor de tela
dates'both' | 'relative' | 'absolute''both'Quais datas cada registro mostra
nowDatehora atualReferência do tempo relativo
size'sm' | 'md''md'sm para cartão lateral
loadingbooleanfalseMostra registros de espera e marca o histórico como ocupado (aria-busy)
emptyTextstring'Nenhum registro no histórico.'Texto quando não há registros

TimelineItem

CampoTipoDescrição
idstringChave estável, como o id do registro na API. Sem ela, a posição na lista vira a chave
authorstringNome completo de quem agiu. Obrigatório
datestring | Date | nullISO 8601 com hora e fuso, ou Date. Outro texto aparece como veio; null não mostra data. Obrigatório
actionstringO que foi feito, no passado. Obrigatório
justificationstring | nullMotivo, mostrado como citação
tone'neutral' | 'info' | 'success' | 'warning' | 'error'Desfecho; um valor desconhecido vira neutral

Sem eventos e sem slots.

Acessibilidade ​

  • Segue o padrão de lista: um <ol> com role="list", porque o Safari tira a semântica de listas sem marcador. O leitor de tela anuncia a lista com o nome dado em label e o número de registros.
  • O avatar é decorativo (aria-hidden), porque o nome já está escrito ao lado. O leitor de tela lê "Paulo Ramos lançou a medição 29" uma vez só.
  • A data fica num <time datetime> com o valor ISO. O texto lido é o mesmo que aparece na tela, com o tempo relativo e a data completa.
  • No modo relative, a data completa fica num texto escondido dentro do <time>, e o leitor de tela lê "há 2 dias, 20/10/2026 às 16:42". A dica do mouse repete a data para quem usa mouse. Quem enxerga e usa toque ou teclado não alcança a dica: use both quando essa pessoa precisa da data exata.
  • A justificativa é um <blockquote> com o rótulo "Justificativa:" escondido na tela e lido pelo leitor de tela.
  • A cor nunca é o único sinal: o tom tem ícone de forma própria no avatar, e a ação diz o desfecho em palavras. O ícone é escondido do leitor de tela, que ouve o tom num prefixo escondido, como no BaseKpiCard: "Atenção: Marta Coelho devolveu a medição 26". O registro neutral não tem prefixo.
  • O componente tem um único elemento raiz em todos os estados. Carregando, ele recebe aria-busy="true" e o texto "Histórico: carregando" para o leitor de tela; os registros de espera ficam escondidos dele. Quando a lista chega, o mesmo elemento perde o aria-busy. O componente não anuncia a chegada: para anunciar o fim da carga numa tela, envolva o histórico no BasePageState. A animação da espera para depois de três ciclos e respeita prefers-reduced-motion.
  • Vazio, o texto começa pelo label escondido ("Histórico da medição 29: Nenhum registro no histórico."), para distinguir um histórico do outro na mesma tela.
  • A lista não entra na ordem do Tab, porque não tem nada para clicar.
  • No modo de alto contraste do Windows, a linha entre registros, o sinal do tom e a borda da citação continuam visíveis.
  • Contraste medido sobre --tj-layer-01 e --tj-layer-02: data 5,8:1 no claro e 7,5:1 no escuro; citação 10,5:1 e 10,2:1; ícone do tom entre 4,8:1 e 5,8:1 no claro e entre 6,3:1 e 8,6:1 no escuro. Todos acima de 4,5:1.
  • Testado com axe em todos os tons, nos três modos de data, no tamanho sm (também com só o tempo relativo), carregando, vazio, depois de a carga terminar no mesmo componente, com data não ISO, com data e justificativa null, com registros com e sem id e com registro neutro com justificativa.