Shadwire
Componentes

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 a sua aplicação 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: 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 com backdrop e Esc desativados e role="alertdialog". ui_alert_dialog_action fecha o diálogo — adicione a sua ação real (form, Turbo, Stimulus) ao botão. 

<%= ui_alert_dialog do %>
  <%= ui_alert_dialog_trigger(variant: :destructive) { "Excluir" } %>
  <%= ui_alert_dialog_content do %>
    <%= ui_alert_dialog_header do %>
      <%= ui_alert_dialog_title { "Tem certeza?" } %>
      <%= ui_alert_dialog_description { "Esta ação não pode ser desfeita." } %>
    <% end %>
    <%= ui_alert_dialog_footer do %>

Ou renderize os componentes diretamente: 

<%= render Ui::AlertDialogComponent.new do %>
  <%= render Ui::AlertDialog::TriggerComponent.new do %>
    Excluir
  <% end %>
  <%= render Ui::AlertDialog::ContentComponent.new do %>
    <%= render Ui::AlertDialog::TitleComponent.new do %>
      Tem certeza?
    <% end %>

Composição

AlertDialog (ui-dialog com backdrop/Esc desativados)
|-- AlertDialog::Trigger (Button)
`-- AlertDialog::Content (<dialog role="alertdialog">, sem X)
    |-- AlertDialog::Header > AlertDialog::Title + AlertDialog::Description
    `-- AlertDialog::Footer > AlertDialog::Cancel + AlertDialog::Action

Exemplos

Confirmação de exclusão

Backdrop e Esc não fecham — a pessoa precisa escolher Cancelar ou Continuar.

Tem certeza absoluta?

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.

Referência da API

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

Componente Argumento Padrão Descrição
AlertDialog — — Sempre injeta close_on_backdrop: false e close_on_escape: false.
AlertDialog::Trigger variant, size :default Button que abre o diálogo.
AlertDialog::Action variant, size :default Button de confirmação; fecha o diálogo após a sua ação.
AlertDialog::Cancel variant, size :outline Button que dispensa o diálogo.