Modal

AlpopModal é um diálogo estruturado baseado no vue-universal-modal. A visibilidade é controlada por v-model (recomendado) ou pela prop legada show; close (e update:modelValue com false) é emitido ao fechar.

O layout é estruturado: um cabeçalho opcional (ícone + título + descrição), o slot de conteúdo padrão, um bloco notice opcional e um rodapé actions opcional. Cada região é omitida quando não há conteúdo para ela.

Requer que a AlpopUI seja instalada como plugin (app.use(AlpopUI)).

alpop-button(@click="open = true") Abrir modal
alpop-modal(v-model="open", title="Título do modal", description="Subtítulo do modal", icon="info", size="md")
  p Conteúdo do modal aqui.
  template(#actions)
    alpop-button(@click="open = false") Fechar

Modal de confirmação

AlpopConfirmationModal adiciona ações de cancelar/confirmar. Todos os rótulos são props.

alpop-confirmation-modal(
  :show="confirming",
  title="Excluir contrato?",
  message="Esta ação não pode ser desfeita.",
  close-label="Cancelar",
  confirm-label="Excluir",
  @close="confirming = false",
  @confirm="onConfirm"
)

Modal de relatório

AlpopReportModal consulta o status de um relatório assíncrono e mostra uma barra de progresso até ficar pronto, oferecendo então o download. Desacoplado do HTTP: passe uma função fetchReport que resolve o payload do relatório.

alpop-report-modal(
  :show="generating",
  :fetch-report="loadReportStatus",
  report-page-url="/relatorios/123",
  @close="generating = false"
)

Prop	Tipo	Padrão	Descrição
show	Boolean	—	Visibilidade (obrigatório)
fetchReport	Function	—	Retorna o payload do relatório (obrigatório)
reportPageUrl	String	null	Link para a página do relatório
pollInterval	Number	2000	Intervalo de consulta (ms)

Props do AlpopModal

Prop	Tipo	Padrão	Descrição
modelValue	Boolean	null	Visibilidade via v-model (recomendado).
show	Boolean	false	Visibilidade legada, usada quando v-model não está vinculado.
size	String	md	Largura: sm | md | lg | xl (valor inválido cai para md).
title	String	""	Título do cabeçalho estruturado.
description	String	""	Descrição do cabeçalho estruturado.
icon	String	""	Ícone do cabeçalho (nome do AlpopIcon).
iconWeight	String	regular	Peso do ícone.
hideClose	Boolean	false	Oculta o botão de fechar.
closeLabel	String	null	Sobrescreve o aria-label do botão de fechar (senão usa components.modal.close).
closeOnBackdrop	Boolean	true	Fecha ao clicar no fundo (mapeado para closeClickDimmed).
modalClass	String | Array | Object	""	Classes extras no contêiner do modal.
options	Object	{}	Opções repassadas ao vue-universal-modal.

Eventos: update:modelValue (Boolean), close.

Slots: default (conteúdo), header (sobrescreve o cabeçalho padrão), notice (bloco destacado), actions (rodapé de ações).