# VelvetKit

## Confirm dialog (`UI::ConfirmDialog`)

A styled dialog that answers data-turbo-confirm, in place of the browser's confirm box.

Add it: `bin/rails generate velvetkit:add confirm_dialog`

Also adds: `icon`, `spinner`, `button`

Stimulus: `ui--confirm-dialog`

### Arguments

```ruby
UI::ConfirmDialog.new(confirm_label: nil, cancel_label: nil, class: nil, **html_attrs)
```

### Notes

A styled replacement for the browser's confirm() box that Turbo shows for
`data-turbo-confirm`. Render one in your layout and every link, form and
button_to that already asks for confirmation uses it, with no other change:

  <%= render(UI::ConfirmDialog.new) %>

  <%= button_to "Delete", project_path(@project), method: :delete,
        data: { turbo_confirm: "Delete this project?",
                confirm_description: "Its pages and files go too. This can't be undone.",
                confirm_button: "Delete project", confirm_variant: "destructive" } %>

The confirm message is the dialog's title. Optional data attributes, on the
same element as data-turbo-confirm, fill in the rest: `confirm-description`,
`confirm-button` and `confirm-cancel` (the button labels), and
`confirm-variant="destructive"` for a red confirm button.

It's a native <dialog>: Escape and clicking outside cancel, focus is trapped
inside and returns to the trigger, and Cancel has focus when it opens so a
stray Enter never confirms.

### Example: Destructive

```erb
<%# In your layout, once: render(UI::ConfirmDialog.new) %>
<%= render(UI::ButtonTo.new("/demo/projects/1", method: :delete, variant: :destructive,
      data: { turbo_confirm: "Delete this project?",
              confirm_description: "Its pages, files and history go too. This can't be undone.",
              confirm_button: "Delete project", confirm_variant: "destructive" })) do |button| %>
  <% button.with_leading_icon(name: "trash-2") %>Delete project
<% end %>
```

### Example: With a Description

```erb
<%= render(UI::ButtonTo.new("/demo/posts/1/publish", method: :patch,
      data: { turbo_confirm: "Publish this post?",
              confirm_description: "Subscribers get an email straight away.",
              confirm_button: "Publish", confirm_cancel: "Not yet" })) { "Publish" } %>
```

### Example: On a Link

```erb
<%# Turbo turns a data-turbo-method link into a form; the options still apply. %>
<%= link_to "Sign out of every device", "/demo/sessions", class: "text-sm font-medium text-primary underline-offset-4 hover:underline",
      data: { turbo_method: :delete, turbo_confirm: "Sign out everywhere?",
              confirm_description: "You'll need to sign in again on your phone and laptop.",
              confirm_button: "Sign out" } %>
```

### Example: In a Form

```erb
<%# On a form, Turbo asks before submitting it. %>
<%= form_with url: "/demo/invoices", class: "flex w-full max-w-md flex-col gap-4",
      data: { turbo_confirm: "Send this invoice to Acme Inc.?", confirm_button: "Send invoice" } do %>
  <%= render(UI::Input.new(label: "Amount", name: "invoice[amount]", value: "1,200.00")) %>
  <%= render(UI::Button.new(type: :submit, class: "self-start")) { "Send" } %>
<% end %>
```

### Example: Plain

```erb
<%# Only data-turbo-confirm: the message is the title, with the default buttons. %>
<%= render(UI::ButtonTo.new("/demo/notifications/read", method: :patch, variant: :outline,
      data: { turbo_confirm: "Mark every notification as read?" })) { "Mark all as read" } %>
```