Dialog

Uma janela sobreposta à página principal, construída sobre o elemento <dialog> nativo.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add dialog --yes

O item dialog do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/dialog_component.rb
app/components/ui/dialog/trigger_component.rb
app/components/ui/dialog/content_component.rb
app/components/ui/dialog/header_component.rb
app/components/ui/dialog/footer_component.rb
app/components/ui/dialog/title_component.rb
app/components/ui/dialog/description_component.rb
app/components/ui/dialog/close_component.rb
app/components/ui/button_component.rb
app/components/ui/icon_component.rb
app/helpers/ui/dialog_helper.rb
app/helpers/ui/button_helper.rb
app/helpers/ui/icon_helper.rb
app/javascript/controllers/ui_dialog_controller.js
vendor/shadwire/shadwire.css

Este componente usa Stimulus, então a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

O showModal() do navegador já prende o foco, coloca o diálogo acima de tudo, fecha com Esc e devolve o foco ao fechar; o controller acrescenta as animações, o fechamento pelo backdrop e a ligação de aria-labelledby/aria-describedby.

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Open" } %>
  <%= ui_dialog_content do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Title" } %>
      <%= ui_dialog_description { "The dialog's description." } %>
    <% end %>
    <%= ui_dialog_footer do %>

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Open" } %>
  <%= ui_dialog_content do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Title" } %>
      <%= ui_dialog_description { "The dialog's description." } %>
    <% end %>
    <%= ui_dialog_footer do %>
      <%= ui_dialog_close { "Cancel" } %>
    <% end %>
  <% end %>
<% end %>

Ou renderize os componentes diretamente:

<%= render Ui::DialogComponent.new do %>
  <%= render Ui::Dialog::TriggerComponent.new do %>
    Open
  <% end %>
  <%= render Ui::Dialog::ContentComponent.new do %>
    <%= render Ui::Dialog::TitleComponent.new do %>
      Title
    <% end %>

<%= render Ui::DialogComponent.new do %>
  <%= render Ui::Dialog::TriggerComponent.new do %>
    Open
  <% end %>
  <%= render Ui::Dialog::ContentComponent.new do %>
    <%= render Ui::Dialog::TitleComponent.new do %>
      Title
    <% end %>
  <% end %>
<% end %>

Composição

Dialog (data-controller="ui-dialog")
|-- Dialog::Trigger (a Button that calls showModal)
`-- Dialog::Content (native <dialog>)
    |-- Dialog::Header > Dialog::Title + Dialog::Description
    `-- Dialog::Footer > Dialog::Close (Button)

Exemplos

Padrão

Um formulário de perfil num <dialog> nativo: o navegador cuida de prender o foco, do Esc e de devolver o foco ao fechar.

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Editar perfil" } %>
  <%= ui_dialog_content(class: "sm:max-w-md") do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Editar perfil" } %>
      <%= ui_dialog_description { "Altere seu perfil e salve quando terminar." } %>
    <% end %>
    <div class="grid gap-4">

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Editar perfil" } %>
  <%= ui_dialog_content(class: "sm:max-w-md") do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Editar perfil" } %>
      <%= ui_dialog_description { "Altere seu perfil e salve quando terminar." } %>
    <% end %>
    <div class="grid gap-4">
      <div class="grid gap-2">
        <%= ui_label(for: "dialog-profile-name") { "Nome" } %>
        <%= ui_input(id: "dialog-profile-name", value: "Eduardo de Moraes") %>
      </div>
      <div class="grid gap-2">
        <%= ui_label(for: "dialog-profile-username") { "Usuário" } %>
        <%= ui_input(id: "dialog-profile-username", value: "@edu") %>
      </div>
    </div>
    <%= ui_dialog_footer do %>
      <%= ui_dialog_close { "Cancelar" } %>
      <%= ui_button { "Salvar alterações" } %>
    <% end %>
  <% end %>
<% end %>

Sem fechar pelo backdrop

close_on_backdrop: false ignora cliques fora do painel.

<%= ui_dialog(close_on_backdrop: false) do %>
  <%= ui_dialog_trigger(variant: :outline) { "Sem fechar pelo fundo" } %>
  <%= ui_dialog_content do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Atenção" } %>
      <%= ui_dialog_description { "Clicar fora não fecha este dialog — use o X, o Esc ou o botão abaixo." } %>
    <% end %>
    <%= ui_dialog_footer do %>

<%= ui_dialog(close_on_backdrop: false) do %>
  <%= ui_dialog_trigger(variant: :outline) { "Sem fechar pelo fundo" } %>
  <%= ui_dialog_content do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Atenção" } %>
      <%= ui_dialog_description { "Clicar fora não fecha este dialog — use o X, o Esc ou o botão abaixo." } %>
    <% end %>
    <%= ui_dialog_footer do %>
      <%= ui_dialog_close { "Entendi" } %>
    <% end %>
  <% end %>
<% end %>

Rodapé personalizado

show_close_button: false remove o X; componha seus próprios botões com ui_dialog_close.

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Compartilhar link" } %>
  <%= ui_dialog_content(show_close_button: false, class: "sm:max-w-md") do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Compartilhar" } %>
      <%= ui_dialog_description { "Qualquer pessoa com este link poderá vê-lo." } %>
    <% end %>
    <div class="flex items-center gap-2">

<%= ui_dialog do %>
  <%= ui_dialog_trigger(variant: :outline) { "Compartilhar link" } %>
  <%= ui_dialog_content(show_close_button: false, class: "sm:max-w-md") do %>
    <%= ui_dialog_header do %>
      <%= ui_dialog_title { "Compartilhar" } %>
      <%= ui_dialog_description { "Qualquer pessoa com este link poderá vê-lo." } %>
    <% end %>
    <div class="flex items-center gap-2">
      <%= ui_input(value: "https://shadwire.dev/docs", readonly: true, aria: { label: "Link" }) %>
      <%= ui_button(variant: :secondary) { "Copiar" } %>
    </div>
    <%= ui_dialog_footer do %>
      <%= ui_dialog_close(variant: :secondary) { "Fechar" } %>
    <% end %>
  <% end %>
<% end %>

Referência da API

Todas as partes aceitam class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Dialog`	`close_on_backdrop`	`true`	Fecha ao clicar fora do painel (no `::backdrop`).
`Dialog::Trigger` / `Dialog::Close`	`variant`, `size`	`:outline`, `:default`	Encapsulam o `Ui::ButtonComponent` com as ações de abrir e fechar.
`Dialog::Content`	`show_close_button`	`true`	Renderiza o botão X no canto superior direito.
`Dialog::Title` / `Dialog::Description`	—	—	Ligados ao diálogo por `aria-labelledby`/`aria-describedby` quando ele abre.