VxTimeline

src/components/timeline/VxTimeline.vue

Display Low 12 usos

Timeline vertical de atividades e eventos. Renderiza uma lista <ul> com linha vertical à esquerda e ícones circulares coloridos por atividade. Cada item tem: ícone Feather em círculo colorido, título bold, descrição e timestamp. Dado completamente via prop data — sem slots, sem eventos.

Padrão

Lista vertical com linha à esquerda, ícones coloridos e texto em 3 níveis (título, descrição, timestamp). Cada item recebe color, icon, title, desc e time via array de dados.

Atendimento iniciado
Cliente entrou em contato via WhatsApp há 2 min
Aguardando resposta
Bot encaminhou para atendente humano há 5 min
Atendimento encerrado
Problema resolvido com sucesso há 30 min
Erro no envio
Falha ao enviar mensagem de mídia há 1h

<vx-timeline :data="timelineData" />

<!-- data() {
  timelineData: [
    {
      color: 'primary',
      icon: 'PlusIcon',
      title: 'New Task Added',
      desc: 'Bonbon macaroon jelly beans gummi bears jelly lollipop apple',
      time: '25 Days Ago'
    },
    {
      color: 'warning',
      icon: 'AlertCircleIcon',
      title: 'Task Update Found',
      desc: 'Cupcake gummi bears soufflé caramels candy',
      time: '15 Days Ago'
    },
    {
      color: 'success',
      icon: 'CheckIcon',
      title: 'Task Finished',
      desc: 'Candy ice cream cake. Halvah gummi bears',
      time: '20 mins ago'
    }
  ]
} -->

API

Exemplo completo

<!-- data: Array (required) — cada item: { color, icon, title, desc, time } -->
<vx-timeline
  :data="[
    { color: 'primary',  icon: 'MessageSquareIcon', title: 'Atendimento iniciado',  desc: 'Cliente entrou em contato via WhatsApp', time: 'há 2 min' },
    { color: 'warning',  icon: 'ClockIcon',         title: 'Aguardando resposta',   desc: 'Bot encaminhou para atendente humano',   time: 'há 5 min' },
    { color: 'success',  icon: 'CheckIcon',         title: 'Atendimento encerrado', desc: 'Problema resolvido com sucesso',          time: 'há 30 min' },
    { color: 'danger',   icon: 'AlertCircleIcon',   title: 'Erro no envio',        desc: 'Falha ao enviar mensagem de mídia',       time: 'há 1h' }
  ]"
/>

Props

Nome	Tipo	Default	Obrig.	Descrição
`data`	Array	—	Sim	Array de itens da timeline. Cada item: `{ title, desc, time, color, icon }`. Sem limite de itens.

Estrutura de cada item (`data[n]`)

Campo	Tipo	Descrição
`title`	String	Título do evento — renderizado em `font-semibold`
`desc`	String	Descrição do evento — `font-size: 0.9rem`
`time`	String	Timestamp / horário — `font-size: 0.8rem`, texto cinza
`color`	String	Token de cor Tailwind/Vuesax: `'primary'`, `'success'`, `'warning'`, `'danger'`. Aplicado como `bg-{color}` no ícone circular.
`icon`	String	Nome do ícone Feather (ex: `'CheckIcon'`, `'MessageSquareIcon'`). Renderizado com `svgClasses="text-white stroke-current w-5 h-5"`.

Dependências

feather-icon — ícone Feather dentro do círculo colorido (svgClasses="text-white stroke-current w-5 h-5")
src/assets/scss/vuexy/components/vxTimeline.scss — estilos da linha vertical e ícones

Onde é usado

src/views/report/Report.vue
src/views/report/ReportNPS.vue
src/views/report/ReportOrder.vue
src/views/report/PlatformUsageReport.vue
src/views/report/PBMReport.vue

Nota: O componente é puramente display — não tem slots, eventos ou interatividade. Todos os dados passam pela prop data. Para timeline dinâmica, basta atualizar o array reativo — Vue 2 rerenderiza automaticamente.