x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<button type="button" class="btn" commandfor="command_dialog" command="show-modal">Open Menu</button><dialog id="command_dialog" class="dialog dialog--cmdk" style="--dialog-size: 24rem;" data-controller="dialog" data-action="click->dialog#closeOnClickOutside"> <cmdk-root label="Command Menu" data-controller="command" data-action="cmdk:select->command#visit"> <label class="input input--actor flex items-center gap mbe-1"> <span class="icon icon--search" aria-hidden="true"></span> <input type="text" name="search" id="search" autocomplete="off" autofocus="autofocus" placeholder="Type a command or search..." /> </label> <cmdk-list> <cmdk-empty>No results found.</cmdk-empty> <cmdk-group heading="Suggestions"> <cmdk-item data-href="#">Calendar</cmdk-item> <cmdk-item data-href="#">Search Emoji</cmdk-item> <cmdk-item data-href="#">Calculator</cmdk-item> </cmdk-group> </cmdk-list> </cmdk-root></dialog>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<button type="button" class="btn" commandfor="command_dialog" command="show-modal">Open Menu</button><dialog id="command_dialog" class="dialog dialog--cmdk" style="--dialog-size: 24rem;" data-controller="dialog" data-action="click->dialog#closeOnClickOutside"> <cmdk-root label="Command Menu" data-controller="command" data-action="cmdk:select->command#visit"> <label class="input input--actor flex items-center gap mbe-1"> <span class="icon icon--search" aria-hidden="true"></span> <%= text_field_tag "search", nil, autocomplete: "off", autofocus: true, placeholder: "Type a command or search..." %> </label> <cmdk-list> <cmdk-empty>No results found.</cmdk-empty> <cmdk-group heading="Suggestions"> <cmdk-item data-href="#">Calendar</cmdk-item> <cmdk-item data-href="#">Search Emoji</cmdk-item> <cmdk-item data-href="#">Calculator</cmdk-item> </cmdk-group> </cmdk-list> </cmdk-root></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
67
68
69
70
71
72
73
74
75
76
@import url("https://esm.sh/cmdk-zero@0.0.3/dist/cmdk-zero.css");cmdk-root { --cmdk-padding: var(--size-2); --cmdk-radius: var(--rounded-xl); --cmdk-background: var(--color-surface); --cmdk-border-width: var(--border); --cmdk-border-color: var(--color-border); --cmdk-shadow: var(--shadow-xs); --cmdk-color: var(--color-text); --cmdk-muted-color: var(--color-text-subtle); --cmdk-font-family: var(--font-system-ui); --cmdk-font-size: var(--text-sm); --cmdk-input-font-size: var(--text-sm); --cmdk-input-padding: 0; --cmdk-input-gap: 0; --cmdk-placeholder-color: var(--color-text-subtle); --cmdk-list-height-limit: var(--size-72); --cmdk-list-max-height: var(--size-72); --cmdk-item-height: var(--size-8); --cmdk-item-padding: 0 var(--size-2); --cmdk-item-gap: var(--size-2); --cmdk-item-spacing: 0; --cmdk-item-radius: var(--rounded-lg); --cmdk-item-color: var(--color-text); --cmdk-item-selected-background: var(--color-border-light); --cmdk-item-selected-color: var(--color-text); --cmdk-item-active-background: var(--color-border-light); --cmdk-item-disabled-color: var(--color-text-subtle); --cmdk-heading-font-size: var(--text-xs); --cmdk-heading-padding: var(--size-1_5) var(--size-2); --cmdk-heading-spacing: 0; --cmdk-group-spacing: var(--size-1); --cmdk-separator-color: var(--color-border); --cmdk-separator-spacing: var(--size-1); --cmdk-empty-height: var(--size-16); --cmdk-transition-duration: var(--time-100); --cmdk-transition-easing: var(--ease-out-3); .input { --input-background: var(--color-border-light); --input-border-color: var(--color-border-light); --input-box-shadow: none; --input-outline-size: 0; --icon-color: var(--color-text-subtle); } [data-cmdk-input] { border-block-end: 0; }}cmdk-list { scrollbar-width: none;}cmdk-group-heading { font-weight: var(--font-medium);}cmdk-item > kbd { font-family: var(--font-system-ui); letter-spacing: var(--tracking-widest);}.dialog--cmdk { overflow: clip;}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
import { Controller } from "@hotwired/stimulus"export default class extends Controller { #observer initialize() { this.#observer = new IntersectionObserver(this.#reset.bind(this)) } connect() { this.#observer.observe(this.element) } disconnect() { this.#observer.disconnect() } visit({ target }) { Turbo.visit(target.dataset.href, { action: "advance" }) } #reset([ entry ]) { entry.isIntersecting && this.#start() } #start() { this.element.reset() }}