Confirmar ação destrutiva

Antes de apagar, cancelar ou encerrar algo que não volta, a tela pergunta, diz a consequência e deixa a pessoa desistir com facilidade.

Quando usar

• Excluir um registro, cancelar um contrato, encerrar uma designação, recusar uma medição.
• Qualquer ação que não pode ser desfeita, ou que avisa outras pessoas.

Não peça confirmação para ações que podem ser desfeitas, como arquivar: faça a ação e ofereça "Desfazer" no aviso de sucesso.

Componentes

• BaseConfirmModal: título, descrição, botão de confirmar e "Cancelar". Com danger, o botão de confirmar fica vermelho. Com require-reason, pede o motivo antes de confirmar.
• BaseButton com kind="danger": o botão que abre a confirmação.

Texto

• Título: pergunta com a ação e o objeto. "Excluir a medição 29?"
• Descrição: a consequência. "A medição sai da planilha e não pode ser recuperada."
• Botão de confirmar: o verbo do título. "Excluir medição". O outro botão é "Cancelar".
• Com motivo: o rótulo diz para que serve. "Motivo da recusa (vai para a empresa)".

Faça e não faça

Faça	Não faça
"Excluir a medição 29?" com o botão "Excluir medição".	"Tem certeza?" com os botões "Sim" e "Não".
Dizer o que acontece depois: "não pode ser recuperada", "a empresa recebe um aviso".	Confirmar sem dizer a consequência.
Usar danger só na ação que apaga ou cancela.	Pintar de vermelho um botão que só salva.

Código

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

const props = defineProps<{ measurement: { id: number; number: number } }>()
const confirming = ref(false)
const deleting = ref(false)
const { show } = useToast()

async function remove(): Promise<void> {
  deleting.value = true
  try {
    await measurementService.remove(props.measurement.id)
    confirming.value = false
    show({ title: `Medição ${String(props.measurement.number)} excluída`, tone: 'success' })
  } finally {
    deleting.value = false
  }
}
</script>

<template>
  <BaseButton kind="danger" icon="trash" @click="confirming = true">Excluir medição</BaseButton>
  <BaseConfirmModal
    v-model="confirming"
    danger
    :title="`Excluir a medição ${props.measurement.number}?`"
    description="A medição sai da planilha e não pode ser recuperada."
    confirm-label="Excluir medição"
    :loading="deleting"
    @confirm="remove"
  />
</template>

Na tela de referência

• P19, equipe do contrato: TeamPanel.vue pede confirmação com o BaseConfirmModal antes de tirar uma pessoa da equipe, e diz que o registro continua no histórico.
• P20: em construção.