Modal

Diálogo que se sobrepõe a tudo, com o fundo desfocado e um brilho da cor do tom. Feito sobre o <dialog> nativo: é dele que vêm a camada acima de qualquer z-index, o foco preso, o Esc e o foco devolvido a quem abriu — o componente só desenha a caixa e anima.

Exemplos

Todos abaixo são o mesmo Tucano.modal() com opções diferentes.

Como usar

Há dois caminhos. Pelo JavaScript, o modal é montado na hora, entra no <body> ao abrir e sai ao fechar. Pelo template, o <dialog> já está na página e o componente só abre, fecha e anima.

Em JavaScript

Tucano.modal({
  title: 'Excluir contrato',
  text: 'Esta ação não pode ser desfeita.',
  tone: 'danger',     // default | danger | success | warning
  size: 'md',         // sm | md | lg | full
  sheet: true,        // no celular sobe do rodapé
  actions: [
    { text: 'Cancelar', variant: 'outline' },
    { text: 'Excluir', variant: 'danger', onClick: () => deleteContract() },
  ],
  onClose: (reason, modal) => console.log(reason),
});

// Só com texto, o atalho aceita uma string
Tucano.modal('Arquivo enviado.');

O atalho Tucano.modal() cria e abre num passo, e devolve a instância. Para montar antes e abrir depois, use a classe:

const m = new Tucano.Modal({ title: 'Novo contato', size: 'lg' });
m.content(form);         // qualquer nó, ou um array de nós
m.open();
m.close();               // anima a saída e chama onClose(reason)

Confirmação

O caso mais comum de modal num CRUD é perguntar antes de apagar. Tucano.confirm() devolve uma promessa, e o código continua lendo de cima para baixo:

if (await Tucano.confirm({ title: 'Excluir contrato?', text: 'Esta ação não pode ser desfeita.', confirm: 'Excluir' })) {
  deleteContract();
}

As demais opções do modal valem aqui também, menos actions, que o confirm() monta sozinho. Um onClose passado continua sendo chamado.

Ações

Cada item de actions vira um .tuc-btn no rodapé, na ordem em que foi escrito.

Escrito no template

Quando o conteúdo vem renderizado pelo servidor — um formulário do Django, com erros e csrf_token —, o <dialog> mora no template. Todo dialog.tuc-modal é adotado no carregamento e a cada htmx:afterSwap; abrir não o insere e fechar não o remove, porque o nó é de quem escreveu o HTML.

<dialog class="tuc-modal is-md" id="delete" aria-labelledby="delete-title">
  <form class="tuc-modal__panel" method="post" action="{% url 'contract-delete' contract.pk %}">
    {% csrf_token %}
    <div class="tuc-modal__top">
      <div class="tuc-modal__header">
        <h2 class="tuc-modal__title" id="delete-title">Excluir contrato?</h2>
        <p class="tuc-modal__text">Esta ação não pode ser desfeita.</p>
      </div>
      <button type="button" class="tuc-btn is-ghost is-icon is-sm tuc-modal__close" aria-label="Fechar" data-tuc-modal-close>…</button>
    </div>
    <div class="tuc-modal__footer">
      <button type="button" class="tuc-btn is-outline" data-tuc-modal-close>Cancelar</button>
      <button class="tuc-btn is-danger">Excluir</button>
    </div>
  </form>
</dialog>

<button class="tuc-btn is-outline" data-tuc-modal="#delete">Excluir</button>

As classes são as mesmas que o JavaScript monta: __panel é a caixa, __top guarda o __header (com __title e __text) e o __close, __body é o corpo que rola e __footer alinha as ações à direita. Tamanho e tom vão como classe no próprio <dialog>: is-lg, is-danger, is-sheet.

Confirmar antes de enviar um formulário

Para um formulário de exclusão que já existe na página, o confirm() intercepta o envio e deixa passar só com o sim:

document.querySelector('#delete-contract').addEventListener('submit', async (e) => {
  e.preventDefault();
  const ok = await Tucano.confirm({ title: 'Excluir contrato?', confirm: 'Excluir' });
  if (ok) e.target.submit();
});

Tons e brilho

O fundo não é só escuro: um brilho radial atrás da caixa separa o diálogo do que ficou embaixo, e o desfoque tira a página do foco. O tom troca a cor desse brilho e da aura em volta da caixa — não a cor dos botões, que continua sendo escolha de cada ação.

Tamanhos

A caixa ocupa a largura disponível até o limite do tamanho, e o corpo rola quando o conteúdo passa da altura da tela.

Abaixo de 40rem os botões do rodapé ocupam a linha, para o alvo de toque crescer. Com sheet, a caixa perde as bordas de baixo, encosta no rodapé e respeita a área segura do iPhone. É opcional porque nem todo modal quer virar gaveta no celular.

Teclado e acessibilidade

O showModal() põe o diálogo na top layer e deixa o resto da página inerte: o foco não escapa para trás dele, e ao fechar volta para quem abriu. Nada disso é JavaScript nosso — é o elemento nativo.

Com title, o diálogo ganha aria-labelledby apontando para ele, e o leitor de tela anuncia o título ao abrir. O X é um .tuc-btn com aria-label="Fechar". Com prefers-reduced-motion, a entrada dura 100 ms e não cresce.

O modal e a gaveta dividem essa mecânica: uma correção feita num deles vale para o outro.

API

Gerada do código a cada build — se algo não está aqui, não existe.

Opções