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" popovertarget="popover"> Open popover</button><div popover id="popover" class="popover" role="dialog"> <form class="flex flex-col gap p-4" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="4cIY7IIU4W4PsRKe7GXfI2OrDWf_7BrEtMLwM9x4nj8kKQJKj4n0Jlwx1K8oTLWHOF179q9hbONPkVzhe7n7hg" autocomplete="off" /> <div class="flex flex-col"> <h3 class="font-semibold leading-none mbe-1">Dimensions</h3> <p class="text-sm text-subtle">Set the dimensions for the layer.</p> </div> <div class="flex flex-col gap-half"> <div class="flex items-center gap"> <label class="text-sm font-medium leading-none" style="min-inline-size: 30%;" for="width">Width</label> <input value="100%" class="input" autofocus="autofocus" type="text" name="width" id="width" /> </div> <div class="flex items-center gap"> <label class="text-sm font-medium leading-none" style="min-inline-size: 30%;" for="max_width">Max width</label> <input value="300px" class="input" type="text" name="max_width" id="max_width" /> </div> <div class="flex items-center gap"> <label class="text-sm font-medium leading-none" style="min-inline-size: 30%;" for="height">Height</label> <input value="25px" class="input" type="text" name="height" id="height" /> </div> <div class="flex items-center gap"> <label class="text-sm font-medium leading-none" style="min-inline-size: 30%;" for="max_height">Max height</label> <input value="none" class="input" type="text" name="max_height" id="max_height" /> </div> </div> </form></div>1
2
3
4
5
6
7
<button type="button" class="btn" popovertarget="popover"> Open popover</button><div popover id="popover" class="popover" role="dialog"> <%= render "dimensions_form" %></div>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
67
68
.popover { background-color: var(--color-surface); border-radius: var(--rounded-md); border-width: var(--border); box-shadow: var(--shadow-md); color: var(--color-text); inline-size: var(--popover-size, max-content); /* Anchor position */ position-area: var(--popover-position, block-end); position-try-fallbacks: var(--popover-position-try-fallbacks, flip-block); margin-block: var(--popover-margin-block, .25rem 0); /* Setup transition */ transition-duration: var(--time-150); transition-property: display, opacity, overlay, transform; /* Exit stage to */ opacity: 0; transform: var(--scale-95); /* On stage */ &:popover-open { opacity: 1; transform: var(--scale-100); } /* Enter stage from */ @starting-style { &:popover-open { opacity: 0; transform: var(--scale-95); } }}.popover--unanchored { --popover-position: none; --popover-position-try-fallbacks: none; --popover-margin-block: 0;}.popover--block-end-center { --popover-position: block-end; --popover-margin-block: .25rem 0;}.popover--block-end-start { --popover-position: block-end span-inline-end; --popover-margin-block: .25rem 0;}.popover--block-end-end { --popover-position: block-end span-inline-start; --popover-margin-block: .25rem 0;}.popover--block-start-center { --popover-position: block-start; --popover-margin-block: 0 .25rem;}.popover--block-start-start { --popover-position: block-start span-inline-end; --popover-margin-block: 0 .25rem;}.popover--block-start-end { --popover-position: block-start span-inline-start; --popover-margin-block: 0 .25rem;}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
import { Controller } from "@hotwired/stimulus"export default class extends Controller { static targets = [ "trigger", "content" ] #showTimer #hideTimer show() { this.contentTarget.showPopover({ source: this.triggerTarget }) } hide() { this.contentTarget.hidePopover() } toggle() { this.contentTarget.togglePopover({ source: this.triggerTarget }) } debouncedShow() { clearTimeout(this.#hideTimer) this.#showTimer = setTimeout(() => this.show(), 150) } debouncedHide() { clearTimeout(this.#showTimer) this.#hideTimer = setTimeout(() => this.hide(), 150) }}