Modal
Janela de diálogo sobreposta (Nuxt UI) — confirmações irreversíveis e a casca do editor de colunas.
UModal), ainda não internalizado no EletroDS — confira o comportamento antes de usar no ME.O Modal é um diálogo sobreposto que bloqueia o fundo até uma decisão. Na index aparece em dois papéis: confirmar uma ação irreversível (excluir, cancelar — com motivo quando exigido) e como casca do "Editar colunas" (o DualList).
Uso em tela
Título + corpo + rodapé com Cancelar (secundário) e a ação primária à direita. Reserve o modal para o que interrompe o fluxo: confirmações destrutivas e edições focadas. Ações reversíveis não usam modal — usam toast com Desfazer (ver Excluir). O overlay deve fechar por Esc e por clique fora quando a ação não for destrutiva.
Quando o modal abre um documento (pela index), o topo ganha um chrome próprio — breadcrumb + "abrir em outra janela" + fechar (X). Esse chrome é exclusivo do modal: a página única do documento não o tem — ver Modal × página única.
Responsividade
Segue a régua geral em Foundations › Breakpoints; o que é próprio do modal:
| Largura | Comportamento |
|---|---|
| Desktop · ≥ 1024px | Diálogo centrado de largura contida (limitada pelos tokens de largura), sobre o backdrop. |
| Tablet · 640–1024px | Igual ao desktop, largura adaptada. |
| Mobile · < 640px | Vira bottom-sheet ou fullscreen — ocupa a largura da tela e ancora na base. |
Acessibilidade
role="dialog"+aria-modal, com nome viaaria-labelledby(o título do modal).- Foco inicial entra no modal ao abrir; focus-trap mantém o Tab dentro; ao fechar, o foco volta ao gatilho.
- Fecha por
Esce clique no backdrop quando não destrutivo (ações destrutivas exigem decisão explícita — ver Excluir). - Não aninhe modais; o conteúdo atrás fica inerte (
aria-hidden/inert). - Botão de confirmação destrutivo não é o foco inicial nem o default do
Enter.
No código
UModal — doc técnica em ui.nuxt.com/docs/components/modal.