Alert Dialog

Um diálogo modal que interrompe o fluxo e exige uma resposta explícita.

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 alert-dialog --yes

O item alert-dialog do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/alert_dialog_component.rb
app/components/ui/alert_dialog/trigger_component.rb
app/components/ui/alert_dialog/content_component.rb
app/components/ui/alert_dialog/header_component.rb
app/components/ui/alert_dialog/footer_component.rb
app/components/ui/alert_dialog/title_component.rb
app/components/ui/alert_dialog/description_component.rb
app/components/ui/alert_dialog/action_component.rb
app/components/ui/alert_dialog/cancel_component.rb
app/components/ui/button_component.rb
app/helpers/ui/alert_dialog_helper.rb
app/helpers/ui/button_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

Compartilha o controller ui-dialog do Dialog, mas sem fechar pelo backdrop nem pelo Esc, e com role="alertdialog". ui_alert_dialog_action só fecha o diálogo, então ligue você mesmo a ação de verdade (um form, Turbo, Stimulus) ao botão.

<%= ui_alert_dialog do %>
  <%= ui_alert_dialog_trigger(variant: :destructive) { "Delete" } %>
  <%= ui_alert_dialog_content do %>
    <%= ui_alert_dialog_header do %>
      <%= ui_alert_dialog_title { "Are you sure?" } %>
      <%= ui_alert_dialog_description { "This action cannot be undone." } %>
    <% end %>
    <%= ui_alert_dialog_footer do %>

<%= ui_alert_dialog do %>
  <%= ui_alert_dialog_trigger(variant: :destructive) { "Delete" } %>
  <%= ui_alert_dialog_content do %>
    <%= ui_alert_dialog_header do %>
      <%= ui_alert_dialog_title { "Are you sure?" } %>
      <%= ui_alert_dialog_description { "This action cannot be undone." } %>
    <% end %>
    <%= ui_alert_dialog_footer do %>
      <%= ui_alert_dialog_cancel { "Cancel" } %>
      <%= ui_alert_dialog_action { "Continue" } %>
    <% end %>
  <% end %>
<% end %>

Ou renderize os componentes diretamente:

<%= render Ui::AlertDialogComponent.new do %>
  <%= render Ui::AlertDialog::TriggerComponent.new do %>
    Delete
  <% end %>
  <%= render Ui::AlertDialog::ContentComponent.new do %>
    <%= render Ui::AlertDialog::TitleComponent.new do %>
      Are you sure?
    <% end %>

<%= render Ui::AlertDialogComponent.new do %>
  <%= render Ui::AlertDialog::TriggerComponent.new do %>
    Delete
  <% end %>
  <%= render Ui::AlertDialog::ContentComponent.new do %>
    <%= render Ui::AlertDialog::TitleComponent.new do %>
      Are you sure?
    <% end %>
  <% end %>
<% end %>

Composição

AlertDialog (ui-dialog with backdrop and Esc dismissal off)
|-- AlertDialog::Trigger (Button)
`-- AlertDialog::Content (<dialog role="alertdialog">, no X)
    |-- AlertDialog::Header > AlertDialog::Title + AlertDialog::Description
    `-- AlertDialog::Footer > AlertDialog::Cancel + AlertDialog::Action

Exemplos

Confirmação de exclusão

Nem o backdrop nem o Esc fecham: é preciso escolher Cancelar ou Continuar.

<%= ui_alert_dialog do %>
  <%= ui_alert_dialog_trigger(variant: :destructive) { "Excluir conta" } %>
  <%= ui_alert_dialog_content do %>
    <%= ui_alert_dialog_header do %>
      <%= ui_alert_dialog_title { "Tem certeza absoluta?" } %>
      <%= ui_alert_dialog_description do %>
        Esta ação não pode ser desfeita. Sua conta e seus dados serão removidos
        permanentemente dos nossos servidores.

<%= ui_alert_dialog do %>
  <%= ui_alert_dialog_trigger(variant: :destructive) { "Excluir conta" } %>
  <%= ui_alert_dialog_content do %>
    <%= ui_alert_dialog_header do %>
      <%= ui_alert_dialog_title { "Tem certeza absoluta?" } %>
      <%= ui_alert_dialog_description do %>
        Esta ação não pode ser desfeita. Sua conta e seus dados serão removidos
        permanentemente dos nossos servidores.
      <% end %>
    <% end %>
    <%= ui_alert_dialog_footer do %>
      <%= ui_alert_dialog_cancel { "Cancelar" } %>
      <%= ui_alert_dialog_action { "Continuar" } %>
    <% end %>
  <% end %>
<% end %>

Referência da API

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

Componente	Argumento	Padrão	Descrição
`AlertDialog`	—	—	Sempre usa `close_on_backdrop: false` e `close_on_escape: false`.
`AlertDialog::Trigger`	`variant`, `size`	`:outline`, `:default`	O botão que abre o diálogo.
`AlertDialog::Action`	`variant`, `size`	`:default`	O botão de confirmação; fecha o diálogo depois que a sua ação roda.
`AlertDialog::Cancel`	`variant`, `size`	`:outline`	O botão que fecha o diálogo sem confirmar.