Modal
Janela sobreposta (Nuxt UI) — modal de tarefa (compartilhar/editar) e diálogo de confirmação irreversível.
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.
Modal de tarefa × Diálogo de confirmação
Dois formatos distintos — escolha pela intenção:
| Modal de tarefa | Diálogo de confirmação | |
|---|---|---|
| Quando | Coletar/editar algo (ex.: Compartilhar, editar colunas) | Confirmar uma ação irreversível (excluir seção/pergunta/painel) |
| Header | Título + descrição + "×" | Ícone (tom error) + título com o nome do item ("Excluir seção Financeira?") — sem "×" |
| Corpo | Campos/conteúdo da tarefa | Sem corpo (a pergunta já está no header) |
| Rodapé | Cancelar (secundário) + ação primária | Manter (secundário) + Excluir (error) |
- Compartilhar (questionário/seção): campo de pessoa em fill + botão
+(quadrado) para adicionar, lista de quem tem acesso, rodapé Cancelar/Salvar. - Excluir: o título referencia o nome do item; sem nome, usa a posição ("seção 1"). Sem corpo e sem "×" — a decisão é explícita (Manter/Excluir), nunca dismissível por clique fora.
- Ver aplicado no Formulário (seções) e nos painéis do Dashboard.
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.