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
30
31
<div class="relative" data-controller="popover" data-popover-flip-class="popover--flip"> <button class="btn" data-popover-target="button" data-action="popover#toggle" aria-haspopup="dialog" aria-expanded="false" aria-controls="dialog"> Open popover </button> <dialog id="dialog" class="popover" style="--popover-size: 20rem; --popover-position: -6rem;" data-popover-target="menu" data-action="click@document->popover#closeOnClickOutside"> <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="p7qYWzLwcvJvD8PDAJ687tKF8BDtDPGkOXgLYR_kdRMGnq5wYRvySn6OELKeW9omjdT1idYDfJNF493ZxYI-7w" autocomplete="off" /> <div class="flex flex-col gap-half"> <h4 class="font-medium leading-none">Dimensions</h4> <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 leading-none gap"> <label class="text-sm font-medium" style="min-inline-size: 30%;" for="width">Width</label> <input value="100%" class="input pi-3 leading-none" type="text" name="width" id="width" /> </div> <div class="flex items-center leading-none gap"> <label class="text-sm font-medium" style="min-inline-size: 30%;" for="max_width">Max width</label> <input value="300px" class="input pi-3 leading-none" type="text" name="max_width" id="max_width" /> </div> <div class="flex items-center leading-none gap"> <label class="text-sm font-medium" style="min-inline-size: 30%;" for="height">Height</label> <input value="25px" class="input pi-3 leading-none" type="text" name="height" id="height" /> </div> <div class="flex items-center leading-none gap"> <label class="text-sm font-medium" style="min-inline-size: 30%;" for="max_height">Max height</label> <input value="none" class="input pi-3 leading-none" type="text" name="max_height" id="max_height" /> </div> </div> </form> </dialog></div>
1
2
3
4
5
6
7
8
9
<div class="relative" data-controller="popover" data-popover-flip-class="popover--flip"> <button class="btn" data-popover-target="button" data-action="popover#toggle" aria-haspopup="dialog" aria-expanded="false" aria-controls="dialog"> Open popover </button> <dialog id="dialog" class="popover" style="--popover-size: 20rem; --popover-position: -6rem;" data-popover-target="menu" data-action="click@document->popover#closeOnClickOutside"> <%= render "dimensions_form" %> </dialog></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
.popover { background-color: var(--color-bg); border-radius: var(--rounded-md); border-width: var(--border); box-shadow: var(--shadow-md); color: var(--color-text); margin-block: var(--size-1); inline-size: var(--popover-size, max-content); inset-inline-start: var(--popover-position, 0); z-index: 1; /* Setup animation */ opacity: 0; transform: var(--scale-95); transition-behavior: allow-discrete; transition-duration: var(--time-150); transition-property: display, overlay, opacity, transform; /* In animation */ &[open] { opacity: 1; transform: var(--scale-100); } /* Out animation */ @starting-style { &[open] { opacity: 0; transform: var(--scale-95); } }}.popover--flip { inset-block-end: 100%;}.popover--start { --popover-position: 0;}.popover--end { --popover-position: auto;}
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
import { Controller } from "@hotwired/stimulus"const BOTTOM_THRESHOLD = 0export default class extends Controller { static targets = [ "button", "menu" ] static classes = [ "flip" ] show() { this.menuTarget.show() this.#updateExpanded() this.#orient() } close() { this.menuTarget.close() this.#updateExpanded() } toggle() { this.menuTarget.open ? this.close() : this.show() } closeOnClickOutside({ target }) { !this.element.contains(target) && this.close() } #orient() { this.menuTarget.classList.toggle(this.flipClass, this.#distanceToBottom < BOTTOM_THRESHOLD) } #updateExpanded() { this.buttonTarget.ariaExpanded = this.menuTarget.open } get #distanceToBottom() { return window.innerHeight - this.#boundingClientRect.bottom } get #boundingClientRect() { return this.menuTarget.getBoundingClientRect() }}