hotwire_combobox 0.1.33 → 0.1.34

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 415f50ba9630121312ea65c8f04435ff57ba386ffb9851dc9e09da8a6dc68352
-  data.tar.gz: de3d2d2bfb9d9f9e21292acf49152484ad05317b16daade967ea695afbf3bc87
+  metadata.gz: d3bf6f83f984a36fb6e0491f68a71c9386c3f2a00e6b6082cd490b73e58d652d
+  data.tar.gz: db089a58628fa02b4a173f18053a9a81a21402eeafdcfb943d403989597bf314
 SHA512:
-  metadata.gz: aab8d6575ec896e26035b5040afa0765b3dacd92d101589b20f305840a5831174cad852325bc64971e83f182260454d2d836be665f19a33cf845d972d90b8134
-  data.tar.gz: 5f4393d0d3dbf29c9bf194210cf7d845c35062a7fd4d952e6acafae2c407ce158d63735f703419311c15ab3996002fa573617cbff26b98406d7e98bdf0e85e9f
+  metadata.gz: '0483ae80475b1d52b9b74d21c5749ee0300914954f74e40267de50cfb96dbb77e44a8bdfb5448caf9d743798e2621d678986927c5f201c40052e049c2844a13f'
+  data.tar.gz: 594db1df1c85dd096ca2cebf2ff9a7dc6564e061aee5f4403729eb94eaf55ab587f32ea620b0f359bd5f1c41e2e4c70096fb5ef04230a07ee13d6cda7873cd33

data/README.md

@@ -22,10 +22,6 @@ Only apps that use importmaps are currently supported. Suport for other JS solut
 
 ## 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).
 

data/app/assets/javascripts/controllers/hw_combobox_controller.js

@@ -29,10 +29,10 @@ export default class HwComboboxController extends Concerns(...concerns) {
     "dialogCombobox",
     "dialogFocusTrap",
     "dialogListbox",
+    "endOfOptionsStream",
     "handle",
     "hiddenField",
-    "listbox",
-    "paginationFrame"
+    "listbox"
   ]
 
   static values = {
@@ -70,7 +70,13 @@ export default class HwComboboxController extends Concerns(...concerns) {
     }
   }
 
-  paginationFrameTargetConnected() {
+  endOfOptionsStreamTargetConnected(element) {
+    const inputType = element.dataset.inputType
+
     this._preselectOption()
+
+    if (inputType) {
+      this._commitFilter({ inputType })
+    }
   }
 }

data/app/assets/javascripts/hw_combobox/helpers.js

@@ -39,10 +39,6 @@ export function startsWith(string, substring) {
   return string.toLowerCase().startsWith(substring.toLowerCase())
 }
 
-export function nextFrame() {
-  return new Promise(requestAnimationFrame)
-}
-
 export function debounce(fn, delay = 150) {
   let timeoutId = null
 

data/app/assets/javascripts/hw_combobox/models/combobox/autocomplete.js

@@ -8,17 +8,17 @@ Combobox.Autocomplete = Base => class extends Base {
     }
   }
 
-  _maybeAutocompleteWith(option, { force }) {
+  _autocompleteWith(option, { force }) {
     if (!this._autocompletesInline && !force) return
 
-    const typedValue = this._actingCombobox.value
+    const typedValue = this._query
     const autocompletedValue = option.getAttribute(this.autocompletableAttributeValue)
 
     if (force) {
-      this._actingCombobox.value = autocompletedValue
+      this._query = autocompletedValue
       this._actingCombobox.setSelectionRange(autocompletedValue.length, autocompletedValue.length)
     } else if (startsWith(autocompletedValue, typedValue)) {
-      this._actingCombobox.value = autocompletedValue
+      this._query = autocompletedValue
       this._actingCombobox.setSelectionRange(typedValue.length, autocompletedValue.length)
     }
   }
@@ -30,14 +30,14 @@ Combobox.Autocomplete = Base => class extends Base {
   }
 
   get _isExactAutocompleteMatch() {
-    return this._immediatelyAutocompletableValue === this._actingCombobox.value
+    return this._immediatelyAutocompletableValue === this._query
   }
 
   // All `_isExactAutocompleteMatch` matches are `_isPartialAutocompleteMatch` matches
   // but not all `_isPartialAutocompleteMatch` matches are `_isExactAutocompleteMatch` matches.
   get _isPartialAutocompleteMatch() {
     return !!this._immediatelyAutocompletableValue &&
-      startsWith(this._immediatelyAutocompletableValue, this._actingCombobox.value)
+      startsWith(this._immediatelyAutocompletableValue, this._query)
   }
 
   get _autocompletesList() {

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

@@ -14,7 +14,7 @@ Combobox.Dialog = Base => class extends Base {
   }
 
   _moveArtifactsToDialog() {
-    this.dialogComboboxTarget.value = this._actingCombobox.value
+    this.dialogComboboxTarget.value = this._query
 
     this._actingCombobox = this.dialogComboboxTarget
     this._actingListbox = this.dialogListboxTarget
@@ -23,7 +23,7 @@ Combobox.Dialog = Base => class extends Base {
   }
 
   _moveArtifactsInline() {
-    this.comboboxTarget.value = this._actingCombobox.value
+    this.comboboxTarget.value = this._query
 
     this._actingCombobox = this.comboboxTarget
     this._actingListbox = this.listboxTarget

data/app/assets/javascripts/hw_combobox/models/combobox/filtering.js

@@ -1,6 +1,6 @@
 
 import Combobox from "hw_combobox/models/combobox/base"
-import { applyFilter, nextFrame, debounce, isDeleteEvent } from "hw_combobox/helpers"
+import { applyFilter, debounce, isDeleteEvent } from "hw_combobox/helpers"
 import { get } from "hw_combobox/vendor/requestjs"
 
 Combobox.Filtering = Base => class extends Base {
@@ -21,20 +21,13 @@ Combobox.Filtering = Base => class extends Base {
   }
 
   async _filterAsync(event) {
-    const q = this._actingCombobox.value.trim()
-
-    await get(this.asyncSrcValue, { responseKind: "turbo-stream", query: { q } })
-
-    this._afterTurboStreamRender(() => this._commitFilter(event))
+    const query = { q: this._query, input_type: event.inputType }
+    await get(this.asyncSrcValue, { responseKind: "turbo-stream", query })
   }
 
   _filterSync(event) {
-    const query = this._actingCombobox.value.trim()
-
     this.open()
-
-    this._allOptionElements.forEach(applyFilter(query, { matching: this.filterableAttributeValue }))
-
+    this._allOptionElements.forEach(applyFilter(this._query, { matching: this.filterableAttributeValue }))
     this._commitFilter(event)
   }
 
@@ -48,12 +41,17 @@ Combobox.Filtering = Base => class extends Base {
     }
   }
 
-  async _afterTurboStreamRender(callback) {
-    await nextFrame()
-    callback()
+  get _isQueried() {
+    return this._query.length > 0
   }
 
-  get _isQueried() {
-    return this._actingCombobox.value.length > 0
+  // Consider +_query+ will contain the full autocompleted value
+  // after a certain point in the call chain.
+  get _query() {
+    return this._actingCombobox.value.trim()
+  }
+
+  set _query(value) {
+    this._actingCombobox.value = value
   }
 }

data/app/assets/javascripts/hw_combobox/models/combobox/selection.js

@@ -10,7 +10,7 @@ Combobox.Selection = Base => class extends Base {
 
   _connectSelection() {
     if (this.hasPrefilledDisplayValue) {
-      this._actingCombobox.value = this.prefilledDisplayValue
+      this._query = this.prefilledDisplayValue
     }
   }
 
@@ -19,7 +19,7 @@ Combobox.Selection = Base => class extends Base {
 
     if (option) {
       this._markValid()
-      this._maybeAutocompleteWith(option, { force })
+      this._autocompleteWith(option, { force })
       this._commitSelection(option, { selected: true })
     } else {
       this._markInvalid()
@@ -52,7 +52,7 @@ Combobox.Selection = Base => class extends Base {
 
   _selectNew() {
     this._resetOptions()
-    this.hiddenFieldTarget.value = this._actingCombobox.value
+    this.hiddenFieldTarget.value = this._query
     this.hiddenFieldTarget.name = this.nameWhenNewValue
   }
 

data/app/presenters/hotwire_combobox/component.rb

@@ -171,7 +171,7 @@ class HotwireCombobox::Component
       if async_src && associated_object
         associated_object.to_combobox_display
       elsif hidden_field_value
-        options.find { |option| option.value == hidden_field_value }&.content
+        options.find { |option| option.value == hidden_field_value }&.autocompletable_as
       end
     end
 

data/app/presenters/hotwire_combobox/listbox/option.rb

@@ -11,8 +11,8 @@ class HotwireCombobox::Listbox::Option
     option.try(:value) || option.id
   end
 
-  def content
-    option.try(:content) || option.try(:display)
+  def autocompletable_as
+    option.try(:autocompletable_as) || option.try(:display)
   end
 
   private
@@ -42,11 +42,11 @@ class HotwireCombobox::Listbox::Option
       }
     end
 
-    def filterable_as
-      option.try(:filterable_as) || option.try(:display)
+    def content
+      option.try(:content) || option.try(:display)
     end
 
-    def autocompletable_as
-      option.try(:autocompletable_as) || option.try(:display)
+    def filterable_as
+      option.try(:filterable_as) || option.try(:display)
     end
 end

data/app/views/hotwire_combobox/_pagination.html.erb

@@ -1,4 +1,4 @@
 <%# locals: (for_id:, src:) -%>
 
 <%= turbo_frame_tag hw_pagination_frame_id(for_id), src: src, loading: :lazy,
-      data: { hw_combobox_target: "paginationFrame" } %>
+      data: { hw_combobox_target: "endOfOptionsStream", input_type: params[:input_type] } %>

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.33"
+  VERSION = "0.1.34"
 end

metadata

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