MeAlertModal

Modal de alerta bloqueante com ícone, título, mensagem e botões de ação configuráveis. Não pode ser fechado por ESC ou clique fora — apenas pelos botões de ação.

Playground

Importação

<script>
import { MeAlertModal } from '@/components/global/utils/export/index'
</script>

Uso Básico

Modal de alerta simples com ícone padrão info, título Atenção e um botão de confirmação.

<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
</script>

<template>
  <MeButton label="Abrir Alert Modal" @click="isOpen = true" />
  <MeAlertModal
    :visible="isOpen"
    message="Sua operação foi concluída com sucesso."
    :buttons="[{ label: 'OK', onClick: () => isOpen = false }]"
  />
</template>

Ícones

O componente suporta um conjunto de 11 ícones predefinidos. Clique em um ícone para copiar o valor da prop.

<MeAlertModal
  :visible="isOpen"
  icon="warning"
  title="Atenção!"
  message="Esta ação pode ter consequências. Deseja continuar?"
  :buttons="[
    { label: 'Cancelar', variant: 'gray', flat: true, onClick: () => isOpen = false },
    { label: 'Continuar', onClick: () => isOpen = false },
  ]"
/>

<MeAlertModal
  :visible="isOpen"
  icon="danger"
  title="Confirmar exclusão"
  message="Tem certeza que deseja excluir este item? Esta ação <strong>não pode ser desfeita</strong>."
  :buttons="[
    { label: 'Cancelar', variant: 'gray', flat: true, onClick: () => isOpen = false },
    { label: 'Excluir', variant: 'red', onClick: () => isOpen = false },
  ]"
/>

Mensagem com HTML

A prop message aceita HTML via v-html, permitindo formatação rica.

<MeAlertModal
  :visible="isOpen"
  icon="info"
  title="Informação Importante"
  message="Este processo pode demorar alguns minutos.<br><br>Você receberá uma <strong>notificação por e-mail</strong> quando concluído."
  :buttons="[{ label: 'Entendi', onClick: () => isOpen = false }]"
/>

Slots

Use os slots para substituir qualquer seção do modal com conteúdo personalizado.

<MeAlertModal :visible="isOpen">
  <template #icon>
    <span style="font-size: 64px">🎉</span>
  </template>
  <template #title>
    <span style="color: #6366f1; font-size: 20px; font-weight: 700">Parabéns!</span>
  </template>
  <template #message>
    <p>Você completou todas as etapas com sucesso.</p>
  </template>
  <template #buttons>
    <MeButton label="Fechar" variant="gray" flat @click="isOpen = false" />
    <MeButton label="Ver Detalhes" @click="isOpen = false" />
  </template>
</MeAlertModal>

Comportamento Bloqueante

O MeAlertModal é intencionalmente bloqueante — pressionar ESC ou clicar fora não fecha o modal. O fechamento é controlado exclusivamente pelos onClick dos botões.

Bloqueante por design

Este componente não emite eventos de fechamento. Use os callbacks onClick nos botões para controlar o estado visible. Isso garante que o usuário deve interagir com os botões de ação.

<MeAlertModal
  :visible="isOpen"
  title="Ação Obrigatória"
  message="Você precisa escolher uma das opções abaixo."
  :buttons="[
    { label: 'Opção A', onClick: () => handleOption('a') },
    { label: 'Opção B', onClick: () => handleOption('b') },
  ]"
/>

Uso Programático

O MeAlertModal pode ser aberto diretamente do script via this.$meAlertModal.show(), sem precisar declarar o componente no template.

this.$meAlertModal.show({
  icon: 'warning',
  title: 'Confirmar exclusão',
  message: 'Esta ação não pode ser desfeita.',
  buttons: [
    {
      label: 'Confirmar',
      onClick: (instance) => {
        instance.$emit('close') // fecha o modal
        this.deleteItem()
      },
    },
    {
      label: 'Cancelar',
      variant: 'gray',
      flat: true,
      onClick: (instance) => {
        instance.$emit('close') // fecha o modal
      },
    },
  ],
})

O onClick de cada botão recebe a instância do modal como argumento. Para fechar o modal, chame instance.$emit('close') dentro do callback.

show() aceita as mesmas props do componente: icon, title, message e buttons.

API

Props

Prop	Tipo	Padrão	Descrição
visible	boolean	false	Controla a visibilidade do modal
icon	AlertModalIcon	'info'	Ícone SVG exibido no topo
title	string	'Atenção'	Título do modal
message	string	undefined	Mensagem abaixo do título (suporta HTML)
buttons	Array<Record<string, any>>	[]	Array de props do MeButton com onClick opcional

Ícones disponíveis (AlertModalIcon): check, code, danger, info, question, remove, save, timeout, trash, valid-error, warning

Formato dos botões:

{
  label: string          // Texto exibido no botão
  variant?: string       // Variante de cor do MeButton
  flat?: boolean         // Estilo flat
  onClick?: (ctx) => void // Callback — recebe $parent || $root
  // ...qualquer prop aceita por MeButton
}

Slots

Nome	Descrição
#icon	Substitui o ícone padrão (remove o <img>)
#title	Substitui o texto do título (dentro do <h2>)
#message	Substitui a mensagem (desativa o v-html)
#buttons	Substitui os botões gerados automaticamente

Eventos

O MeAlertModal não emite eventos. O fechamento é controlado pelos callbacks onClick nos botões.