x
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
<button type="button" class="btn" commandfor="dismissible_dialog" command="show-modal">Show dialog</button><dialog id="dismissible_dialog" class="dialog" style="--dialog-size: 24rem;" data-controller="dialog" data-action="click->dialog#closeOnClickOutside" aria-label="Edit profile"> <button type="button" class="btn btn--plain dialog__close" commandfor="dismissible_dialog" command="close"> <span class="icon icon--x" aria-hidden="true"></span> <span class="sr-only">Close</span> </button> <form autocomplete="off" contents="true" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="0aiZzm6mGgqQKEFxUDEa812dP1ccWfhY0HY5nBGlEdeJGxlEgQ32kQOBzNAkKCDUd7pI-M-TNI5k7WZSy5OBNg" autocomplete="off" /> <div class="dialog__content flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Edit profile</h3> <p class="text-sm text-subtle">Make changes to your profile here. Click save when you're done.</p> </div> <div class="flex flex-col gap"> <div class="flex flex-col gap-half"> <label class="text-sm font-medium leading-none" for="name">Name</label> <input value="Lázaro Nixon" class="input" autofocus="autofocus" type="text" name="name" id="name" /> </div> <div class="flex flex-col gap-half"> <label class="text-sm font-medium leading-none" for="username">Username</label> <input value="@lazaronixon" class="input" type="text" name="username" id="username" /> </div> </div> <div class="dialog__footer flex items-center justify-end gap"> <button type="button" class="btn" commandfor="dismissible_dialog" command="close">Cancel</button> <input type="submit" name="commit" value="Save changes" class="btn btn--primary" data-disable-with="Save changes" /> </div> </div> </form></dialog>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
<button type="button" class="btn" commandfor="dismissible_dialog" command="show-modal">Show dialog</button><dialog id="dismissible_dialog" class="dialog" style="--dialog-size: 24rem;" data-controller="dialog" data-action="click->dialog#closeOnClickOutside" aria-label="Edit profile"> <button type="button" class="btn btn--plain dialog__close" commandfor="dismissible_dialog" command="close"> <span class="icon icon--x" aria-hidden="true"></span> <span class="sr-only">Close</span> </button> <%= form_with url: nil, html: { autocomplete: "off", contents: true } do |form| %> <div class="dialog__content flex flex-col gap"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Edit profile</h3> <p class="text-sm text-subtle">Make changes to your profile here. Click save when you're done.</p> </div> <div class="flex flex-col gap"> <div class="flex flex-col gap-half"> <%= form.label :name, class: "text-sm font-medium leading-none" %> <%= form.text_field :name, value: "Lázaro Nixon", class: "input", autofocus: true %> </div> <div class="flex flex-col gap-half"> <%= form.label :username, class: "text-sm font-medium leading-none" %> <%= form.text_field :username, value: "@lazaronixon", class: "input" %> </div> </div> <div class="dialog__footer flex items-center justify-end gap"> <button type="button" class="btn" commandfor="dismissible_dialog" command="close">Cancel</button> <%= form.submit "Save changes", class: "btn btn--primary" %> </div> </div> <% end %></dialog>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
import { Controller } from "@hotwired/stimulus"export default class extends Controller { show() { this.element.show() } showModal() { this.element.showModal() } close() { this.element.close() } closeOnClickOutside({ target }) { target.nodeName === "DIALOG" && this.close() }}No notes provided.