x
1
2
3
4
5
6
7
8
9
10
11
12
13
<dialog class="dialog" style="--dialog-size: 24rem;" data-controller="turbo-confirm" data-action="close->turbo-confirm#submit" role="alertdialog" aria-labelledby="turbo_confirm_title" aria-describedby="turbo_confirm_text"> <form method="dialog" contents> <div class="dialog__content"> <h2 class="font-medium leading-none mbe-2" id="turbo_confirm_title" data-turbo-confirm-target="title"></h2> <p class="text-sm text-balance text-subtle" id="turbo_confirm_text" data-turbo-confirm-target="text"></p> <div class="dialog__footer flex items-center justify-end gap mbs-4"> <button value="cancel" class="btn">Cancel</button> <button value="confirm" class="btn btn--primary">Continue</button> </div> </div> </form></dialog><a class="btn" data-turbo-method="delete" data-turbo-confirm="Are you absolutely sure?" href="#">Click to destroy</a>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<dialog class="dialog" style="--dialog-size: 24rem;" data-controller="turbo-confirm" data-action="close->turbo-confirm#submit" role="alertdialog" aria-labelledby="turbo_confirm_title" aria-describedby="turbo_confirm_text"> <form method="dialog" contents> <div class="dialog__content"> <h2 class="font-medium leading-none mbe-2" id="turbo_confirm_title" data-turbo-confirm-target="title"></h2> <p class="text-sm text-balance text-subtle" id="turbo_confirm_text" data-turbo-confirm-target="text"></p> <div class="dialog__footer flex items-center justify-end gap mbs-4"> <button value="cancel" class="btn">Cancel</button> <button value="confirm" class="btn btn--primary">Continue</button> </div> </div> </form></dialog><%= link_to "Click to destroy", "#", class: "btn", data: { turbo_method: :delete, turbo_confirm: "Are you absolutely sure?" } %>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.dialog { background-color: var(--color-surface); border-radius: var(--rounded-xl); border-width: var(--border); color: var(--color-text); inline-size: var(--size-full); margin: auto; max-inline-size: calc(100% - 2rem); &::backdrop { backdrop-filter: var(--blur-xs); } /* Setup transition */ transition-behavior: allow-discrete; transition-duration: var(--time-100); transition-property: display, overlay, opacity, transform; transition-timing-function: var(--ease-out-3); &::backdrop { transition-behavior: allow-discrete; transition-duration: var(--time-100); transition-property: display, overlay, opacity; transition-timing-function: var(--ease-out-3); } /* Exit stage to */ & { opacity: 0; transform: var(--scale-95); } &::backdrop { opacity: 0; } /* On stage */ &[open] { opacity: 1; transform: var(--scale-100); } &[open]::backdrop { opacity: 1; } /* Enter stage from */ @starting-style { &[open] { opacity: 0; transform: var(--scale-95); } &[open]::backdrop { opacity: 0; } } @supports (-webkit-hyphens: none) { transition-behavior: normal; } @media (width >= 40rem) { max-inline-size: var(--dialog-size, var(--max-i-sm)); }}.dialog__content { padding: var(--size-4);}.dialog__footer { background-color: rgb(from var(--color-border-light) r g b / .5); border-block-start-width: var(--border); margin-block-end: calc(var(--size-4) * -1); margin-inline: calc(var(--size-4) * -1); padding: var(--size-4);}.dialog__close { inset-block-start: var(--size-3); inset-inline-end: var(--size-3); position: absolute;}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Controller } from "@hotwired/stimulus"export default class extends Controller { static targets = [ "title", "text" ] static values = { defaultConfirmText: { type: String, default: "This action cannot be undone and may have permanent consequences." } } #confirmCallback = null connect() { Turbo.config.forms.confirm = this.#confirm.bind(this) } disconnect() { Turbo.config.forms.confirm = null } submit({ target }) { this.#confirmCallback(target.returnValue === "confirm") } #confirm(message, target) { this.titleTarget.textContent = message this.textTarget.textContent = target.dataset.turboConfirmText || this.defaultConfirmTextValue this.element.showModal() return new Promise(resolve => (this.#confirmCallback = resolve)) }}You must have only one turbo confirm dialog per page.