Alert Dialog

Dialog de confirmação para ações destrutivas ou irreversíveis.

Uso

<script setup lang="ts">
import { AlertDialog, Button } from '@halfbyte/maka'
import { ref } from 'vue'

const aberto = ref(false)

function confirmar() {
  console.log('Confirmado!')
  aberto.value = false
}
</script>

<template>
  <Button variant="destructive" @click="aberto = true">Excluir conta</Button>

  <AlertDialog
    v-model="aberto"
    title="Excluir conta permanentemente?"
    description="Esta ação não pode ser desfeita. Todos os seus dados serão removidos."
    confirm-label="Excluir"
    cancel-label="Cancelar"
    status="danger"
    @confirm="confirmar"
  />
</template>

Status

<!-- Danger (padrão) -->
<AlertDialog status="danger" title="Excluir item?" confirm-label="Excluir" v-model="open" />

<!-- Warning -->
<AlertDialog status="warning" title="Publicar sem revisão?" confirm-label="Publicar" v-model="open" />

<!-- Info -->
<AlertDialog status="info" title="Confirmar envio?" confirm-label="Enviar" v-model="open" />

Props

Prop	Tipo	Padrão
modelValue	boolean	false
title	string	—
description	string	—
status	"danger" | "warning" | "info"	"danger"
confirmLabel	string	"Confirmar"
cancelLabel	string	"Cancelar"
loading	boolean	false

Slots

Slot	Descrição
default	Conteúdo adicional no corpo do dialog
footer	Substitui os botões de ação padrão

Events

Evento	Payload	Descrição
update:modelValue	boolean	Emitido ao abrir/fechar
confirm	—	Emitido ao clicar em confirmar
cancel	—	Emitido ao clicar em cancelar