hotwire_combobox 0.1.27 → 0.1.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/models/combobox/dialog.js +4 -3
- data/app/assets/javascripts/models/combobox/toggle.js +2 -0
- data/app/assets/stylesheets/hotwire_combobox.css +22 -5
- data/app/presenters/hotwire_combobox/component.rb +6 -0
- data/app/views/hotwire_combobox/combobox/_dialog.html.erb +6 -4
- data/lib/hotwire_combobox/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8742f8a51c5eab21dc0ec69c0a3c2a232ecc43ef04342c2b16eee551dea92312
|
|
4
|
+
data.tar.gz: fcb66748f4d083a32641317aae3dcd788435301ce7fa4bb93edd6912dd707a52
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1175734ef7d8052bb3dd092fbf900386e95ef2eb419b5e29564cbd5cdd7dcab8ce5df7b7bd18b9dc28edd837fce6aee0c48710b781e6004dd7f8acb03536189b
|
|
7
|
+
data.tar.gz: 01d02f1275c151584f3a44a82640d63d4a3fcfeeda26297b953b2b8789422127c34140a9930111b4d6e6e09311f9f165efe6a24328d22ff32ae963334a482ab0
|
|
@@ -33,9 +33,10 @@ Combobox.Dialog = Base => class extends Base {
|
|
|
33
33
|
|
|
34
34
|
_resizeDialog = () => {
|
|
35
35
|
if (window.visualViewport) {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
this.dialogTarget.style.setProperty(
|
|
37
|
+
"--hw-visual-viewport-height",
|
|
38
|
+
`${window.visualViewport.height}px`
|
|
39
|
+
)
|
|
39
40
|
}
|
|
40
41
|
}
|
|
41
42
|
|
|
@@ -24,6 +24,7 @@ Combobox.Toggle = Base => class extends Base {
|
|
|
24
24
|
closeOnClickOutside(event) {
|
|
25
25
|
const target = event.target
|
|
26
26
|
|
|
27
|
+
if (!this._isOpen) return
|
|
27
28
|
if (this.element.contains(target) && !this._isDialogDismisser(target)) return
|
|
28
29
|
if (this._withinElementBounds(event)) return
|
|
29
30
|
|
|
@@ -100,6 +101,7 @@ Combobox.Toggle = Base => class extends Base {
|
|
|
100
101
|
this._moveArtifactsInline()
|
|
101
102
|
this.dialogTarget.close()
|
|
102
103
|
this._restoreBodyScroll()
|
|
104
|
+
this._actingCombobox.scrollIntoView({ block: "center" })
|
|
103
105
|
}
|
|
104
106
|
|
|
105
107
|
_closeInline() {
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
--hw-border-width--slim: 1px;
|
|
7
7
|
--hw-border-width--thick: 2px;
|
|
8
8
|
|
|
9
|
-
--hw-dialog-bottom-padding: 0;
|
|
10
9
|
--hw-dialog-font-size: 1.25rem;
|
|
11
10
|
--hw-dialog-input-height: 2.5rem;
|
|
12
11
|
--hw-dialog-label-alignment: center;
|
|
@@ -37,6 +36,8 @@
|
|
|
37
36
|
|
|
38
37
|
--hw-padding--slim: 0.375rem;
|
|
39
38
|
--hw-padding--thick: 0.75rem;
|
|
39
|
+
|
|
40
|
+
--hw-visual-viewport-height: 100vh;
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
.hw-combobox {
|
|
@@ -98,6 +99,7 @@
|
|
|
98
99
|
left: 0;
|
|
99
100
|
line-height: var(--hw-line-height);
|
|
100
101
|
list-style: none;
|
|
102
|
+
margin: 0;
|
|
101
103
|
max-height: var(--hw-listbox-height);
|
|
102
104
|
overflow: auto;
|
|
103
105
|
padding: 0;
|
|
@@ -125,16 +127,31 @@
|
|
|
125
127
|
background-color: var(--hw-active-bg-color);
|
|
126
128
|
}
|
|
127
129
|
|
|
130
|
+
.hw-combobox__dialog__wrapper {
|
|
131
|
+
display: none;
|
|
132
|
+
height: 100vh;
|
|
133
|
+
inset-inline-start: 0;
|
|
134
|
+
pointer-events: none;
|
|
135
|
+
position: fixed;
|
|
136
|
+
top: 0;
|
|
137
|
+
width: 100%;
|
|
138
|
+
|
|
139
|
+
&:has([open]) {
|
|
140
|
+
display: flex;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
128
144
|
.hw-combobox__dialog {
|
|
129
145
|
border: 0;
|
|
130
146
|
font-size: var(--hw-dialog-font-size);
|
|
131
147
|
height: auto;
|
|
132
148
|
margin: 0;
|
|
133
|
-
max-height:
|
|
149
|
+
max-height: calc(var(--hw-visual-viewport-height) - var(--hw-dialog-top-offset));
|
|
134
150
|
max-width: none;
|
|
135
151
|
overflow: hidden;
|
|
136
|
-
padding: var(--hw-dialog-padding)
|
|
137
|
-
|
|
152
|
+
padding: var(--hw-dialog-padding);
|
|
153
|
+
pointer-events: auto;
|
|
154
|
+
position: absolute;
|
|
138
155
|
top: var(--hw-dialog-top-offset);
|
|
139
156
|
width: auto;
|
|
140
157
|
|
|
@@ -146,7 +163,7 @@
|
|
|
146
163
|
}
|
|
147
164
|
|
|
148
165
|
&::backdrop {
|
|
149
|
-
background-
|
|
166
|
+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 50%, white 50%);
|
|
150
167
|
}
|
|
151
168
|
}
|
|
152
169
|
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
<%= tag.div **component.dialog_focus_trap_attrs %>
|
|
2
2
|
|
|
3
|
-
<%= tag.
|
|
4
|
-
<%= tag.
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
<%= tag.div **component.dialog_wrapper_attrs do %>
|
|
4
|
+
<%= tag.dialog **component.dialog_attrs do %>
|
|
5
|
+
<%= tag.label component.dialog_label, **component.dialog_label_attrs %>
|
|
6
|
+
<%= tag.input **component.dialog_input_attrs %>
|
|
7
|
+
<%= tag.ul **component.dialog_listbox_attrs %>
|
|
8
|
+
<% end %>
|
|
7
9
|
<% end %>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: hotwire_combobox
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.28
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jose Farias
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-02-
|
|
11
|
+
date: 2024-02-06 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|