hotwire_combobox 0.1.25 → 0.1.28

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed7d6d8db12168ce351163deb6c0a115ff0bcd4c48782c0100451e468973a734
-  data.tar.gz: eca9d97a02259ab886364ca4501c1b94e3945bbd4d101f7bf0905149ff216219
+  metadata.gz: 8742f8a51c5eab21dc0ec69c0a3c2a232ecc43ef04342c2b16eee551dea92312
+  data.tar.gz: fcb66748f4d083a32641317aae3dcd788435301ce7fa4bb93edd6912dd707a52
 SHA512:
-  metadata.gz: 431f3651c5479d5f6a0ab164067f7192a75601f73dbc4ae14d85f7d7cfc52c5e70d544e63ad33bf594b722a8ffb8c6825bc29a6255e1d32bada70b4920bb2ad7
-  data.tar.gz: f0110e653d8fd260bcc7f942d0fba4609c840b179bcf3d12e0e576187d2ede18f053bca3a5cb28a18d43b3d753101bacdbf18db52bab381617a6468f0ddf03ff
+  metadata.gz: 1175734ef7d8052bb3dd092fbf900386e95ef2eb419b5e29564cbd5cdd7dcab8ce5df7b7bd18b9dc28edd837fce6aee0c48710b781e6004dd7f8acb03536189b
+  data.tar.gz: 01d02f1275c151584f3a44a82640d63d4a3fcfeeda26297b953b2b8789422127c34140a9930111b4d6e6e09311f9f165efe6a24328d22ff32ae963334a482ab0

data/README.md

@@ -8,7 +8,7 @@
 
 
 > [!IMPORTANT]
-> We need your help to finalize this gem's first major release. Please use it in your apps and report any issues.
+> HotwireCombobox is at an early stage of development. It's nearing a beta release, but the API might change and bugs are expected. Please continue to use the library and report any issues in the GitHub repo.
 
 ## Installation
 
@@ -18,6 +18,15 @@ Add this line to your application's Gemfile and run `bundle install`:
 gem "hotwire_combobox"
 ```
 
+## Docs
+
+<p align="center">
+  <img src="docs/assets/images/docs-preview.png" height=500>
+</p>
+
+Visit [the docs site](https://hotwirecombobox.com/) for a demo and detailed documentation.
+If the site is down, you can run the docs locally by cloning [the docs repo](https://github.com/josefarias/hotwire_combobox_docs).
+
 ## Contributing
 
 Please read [CONTRIBUTING.md](./CONTRIBUTING.md).

data/app/assets/javascripts/models/combobox/dialog.js

@@ -33,9 +33,10 @@ Combobox.Dialog = Base => class extends Base {
 
   _resizeDialog = () => {
     if (window.visualViewport) {
-      const fullHeight = window.innerHeight
-      const viewportHeight = window.visualViewport.height
-      this.dialogTarget.style.setProperty("--hw-dialog-bottom-padding", `${fullHeight - viewportHeight}px`)
+      this.dialogTarget.style.setProperty(
+        "--hw-visual-viewport-height",
+        `${window.visualViewport.height}px`
+      )
     }
   }
 

data/app/assets/javascripts/models/combobox/toggle.js

@@ -24,6 +24,7 @@ Combobox.Toggle = Base => class extends Base {
   closeOnClickOutside(event) {
     const target = event.target
 
+    if (!this._isOpen) return
     if (this.element.contains(target) && !this._isDialogDismisser(target)) return
     if (this._withinElementBounds(event)) return
 
@@ -100,6 +101,7 @@ Combobox.Toggle = Base => class extends Base {
     this._moveArtifactsInline()
     this.dialogTarget.close()
     this._restoreBodyScroll()
+    this._actingCombobox.scrollIntoView({ block: "center" })
   }
 
   _closeInline() {

data/app/assets/stylesheets/hotwire_combobox.css

@@ -6,7 +6,6 @@
   --hw-border-width--slim: 1px;
   --hw-border-width--thick: 2px;
 
-  --hw-dialog-bottom-padding: 0;
   --hw-dialog-font-size: 1.25rem;
   --hw-dialog-input-height: 2.5rem;
   --hw-dialog-label-alignment: center;
@@ -37,6 +36,8 @@
 
   --hw-padding--slim: 0.375rem;
   --hw-padding--thick: 0.75rem;
+
+  --hw-visual-viewport-height: 100vh;
 }
 
 .hw-combobox {
@@ -98,6 +99,7 @@
   left: 0;
   line-height: var(--hw-line-height);
   list-style: none;
+  margin: 0;
   max-height: var(--hw-listbox-height);
   overflow: auto;
   padding: 0;
@@ -125,16 +127,31 @@
   background-color: var(--hw-active-bg-color);
 }
 
+.hw-combobox__dialog__wrapper {
+  display: none;
+  height: 100vh;
+  inset-inline-start: 0;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+
+  &:has([open]) {
+    display: flex;
+  }
+}
+
 .hw-combobox__dialog {
   border: 0;
   font-size: var(--hw-dialog-font-size);
   height: auto;
   margin: 0;
-  max-height: none;
+  max-height: calc(var(--hw-visual-viewport-height) - var(--hw-dialog-top-offset));
   max-width: none;
   overflow: hidden;
-  padding: var(--hw-dialog-padding) var(--hw-dialog-padding) var(--hw-dialog-bottom-padding) var(--hw-dialog-padding);
-  position: fixed;
+  padding: var(--hw-dialog-padding);
+  pointer-events: auto;
+  position: absolute;
   top: var(--hw-dialog-top-offset);
   width: auto;
 
@@ -146,7 +163,7 @@
   }
 
   &::backdrop {
-    background-color: rgba(0, 0, 0, 0.6);
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 50%, white 50%);
   }
 }
 

data/app/presenters/hotwire_combobox/component.rb

@@ -82,6 +82,12 @@ class HotwireCombobox::Component
   end
 
 
+  def dialog_wrapper_attrs
+    {
+      class: "hw-combobox__dialog__wrapper"
+    }
+  end
+
   def dialog_attrs
     {
       class: "hw-combobox__dialog",

data/app/views/hotwire_combobox/combobox/_dialog.html.erb

@@ -1,7 +1,9 @@
 <%= tag.div **component.dialog_focus_trap_attrs %>
 
-<%= tag.dialog **component.dialog_attrs do %>
-  <%= tag.label component.dialog_label, **component.dialog_label_attrs %>
-  <%= tag.input **component.dialog_input_attrs %>
-  <%= tag.ul **component.dialog_listbox_attrs %>
+<%= tag.div **component.dialog_wrapper_attrs do %>
+  <%= tag.dialog **component.dialog_attrs do %>
+    <%= tag.label component.dialog_label, **component.dialog_label_attrs %>
+    <%= tag.input **component.dialog_input_attrs %>
+    <%= tag.ul **component.dialog_listbox_attrs %>
+  <% end %>
 <% end %>

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.25"
+  VERSION = "0.1.28"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.25
+  version: 0.1.28
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-04 00:00:00.000000000 Z
+date: 2024-02-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails