Sucesso e retorno

Depois de uma ação, a pessoa precisa saber que deu certo. O retorno é curto, aparece perto do que mudou e não atrapalha o próximo passo.

Quando usar

Situação	Retorno
Salvou e continua na mesma tela	Aviso passageiro (useToast)
Salvou e foi para outra tela	Aviso passageiro na tela nova, que mostra o registro
Uma ação que pode ser desfeita	Aviso com a ação "Desfazer"
Um resultado que a pessoa precisa ler com calma	BaseAlertBanner com tone="success", que fica na tela

Se o resultado já aparece na tela (a linha nova na tabela, o selo que mudou), o aviso é opcional.

Componentes

• BaseToast uma vez na raiz do app, e useToast().show() em qualquer componente. O aviso some em 6 segundos e pausa com o mouse ou o foco.
• BaseAlertBanner com tone="success", para o retorno que precisa ficar.
• BaseBadge: a situação nova do registro, quando ela muda.

Texto

• Curto, no passado, com o objeto: "Medição salva", "Contrato enviado para aprovação".
• O text só quando ajuda: "A Secretaria recebeu um aviso."
• A ação diz o que faz: "Desfazer", "Ver contrato".
• Sem "com sucesso", sem exclamação.

Faça e não faça

Faça	Não faça
"Medição salva", com "Desfazer" quando der para desfazer.	"Operação realizada com sucesso!"
Levar a pessoa ao registro que ela acabou de criar.	Deixar a pessoa no formulário vazio sem saber se salvou.
Usar o aviso passageiro para o que a pessoa já viu acontecer.	Abrir um modal só para dizer "Salvo".

Código

<script setup lang="ts">
import { BaseButton, useToast } from '@lab-inovacao-tjes/design-system'

const { show } = useToast()

async function archive(contract: Contract): Promise<void> {
  await contractService.archive(contract.id)
  show({
    title: 'Contrato arquivado',
    text: `${contract.number} saiu da lista de contratos ativos.`,
    tone: 'success',
    action: { label: 'Desfazer', onClick: () => void contractService.restore(contract.id) },
  })
}
</script>

<template>
  <BaseButton kind="secondary" icon="archive" @click="archive(contract)">Arquivar contrato</BaseButton>
</template>

No App.vue, monte o <BaseToast /> uma vez, perto do fim do template.

Na tela de referência

• P19: useSaving.ts mostra o aviso de sucesso depois de cada salvamento das telas de obras e contratos, e a mensagem da API quando falha.
• P20: em construção.