hotwire_combobox 0.1.11 → 0.1.12

data/app/helpers/hotwire_combobox/helper.rb

@@ -1,44 +1,94 @@
 module HotwireCombobox
   module Helper
-    NonCollectionOptions = Class.new StandardError
-
     class << self
       delegate :bypass_convenience_methods?, to: :HotwireCombobox
 
-      def hw_combobox_options(options, **methods)
-        unless options.respond_to?(:map)
-          raise NonCollectionOptions, "options must be an Array or an ActiveRecord::Relation"
+      def hw(method_name)
+        unless bypass_convenience_methods?
+          alias_method method_name.to_s.sub(/^hw_/, ""), method_name
         end
+      end
+    end
 
-        if ActiveRecord::Relation === options || ActiveRecord::Base === options.first
-          options.map do |option|
-            attrs = {}.tap do |attrs|
-              attrs[:id] = option.public_send(methods[:id]) if methods[:id]
-              attrs[:value] = option.public_send(methods[:value] || :id)
-              attrs[:display] = option.public_send(methods[:display]) if methods[:display]
-            end
+    hw def hw_combobox_style_tag(*args, **kwargs)
+      stylesheet_link_tag HotwireCombobox.stylesheet_path, *args, **kwargs
+    end
+
+    hw def hw_combobox_tag(*args, async_src: nil, options: [], render_in: {}, **kwargs)
+      options = hw_combobox_options options, render_in: render_in
+      src = hw_uri_with_params async_src, format: :turbo_stream
+      component = HotwireCombobox::Component.new self, *args, options: options, async_src: src, **kwargs
+
+      render "hotwire_combobox/combobox", component: component
+    end
 
-            hw_combobox_option(**attrs)
-          end
+    hw def hw_combobox_options(options, render_in: {}, display: :to_combobox_display, **methods)
+      if options.first.is_a? HotwireCombobox::Listbox::Option
+        options
+      else
+        content = if render_in.present?
+          ->(object) { render(**render_in.merge(object: object)) }
         else
-          options.map { |option| hw_combobox_option(**option) }
+          methods[:content]
         end
-      end
 
-      private
-        def hw_combobox_option(*args, **kwargs, &block)
-          HotwireCombobox::Option.new(*args, **kwargs, &block)
-        end
+        hw_parse_combobox_options options, **methods.merge(display: display, content: content)
+      end
     end
 
-    def hw_combobox_tag(*args, **kwargs, &block)
-      render "hotwire_combobox/combobox", component: HotwireCombobox::Component.new(*args, **kwargs, &block)
+    hw def hw_paginated_combobox_options(options, for_id:, src:, next_page:, render_in: {}, **methods)
+      this_page = render("hotwire_combobox/paginated_options", for_id: for_id, options: hw_combobox_options(options, render_in: render_in, **methods), format: :turbo_stream)
+      next_page = render("hotwire_combobox/next_page", src: src, next_page: next_page, format: :turbo_stream)
+
+      safe_join [ this_page, next_page ]
     end
-    alias_method :combobox_tag, :hw_combobox_tag unless bypass_convenience_methods?
 
-    def hw_combobox_options(*args, **kwargs, &block)
-      HotwireCombobox::Helper.hw_combobox_options(*args, **kwargs, &block)
+    hw def hw_listbox_options_id(id)
+      "#{id}-hw-listbox__options"
     end
-    alias_method :combobox_options, :hw_combobox_options unless bypass_convenience_methods?
+
+    private
+      def hw_uri_with_params(url_or_path, **params)
+        URI.parse(url_or_path).tap do |url_or_path|
+          query = URI.decode_www_form(url_or_path.query || "").to_h.merge(params)
+          url_or_path.query = URI.encode_www_form query
+        end.to_s
+      rescue URI::InvalidURIError
+        url_or_path
+      end
+
+      def hw_parse_combobox_options(options, **methods)
+        options.map do |option|
+          attrs = option.is_a?(Hash) ? option : hw_option_attrs_for_obj(option, **methods)
+          HotwireCombobox::Listbox::Option.new **attrs
+        end
+      end
+
+      def hw_option_attrs_for_obj(option, **methods)
+        {}.tap do |attrs|
+          attrs[:id] = hw_call_method_or_proc(option, methods[:id]) if methods[:id]
+          attrs[:value] = hw_call_method_or_proc(option, methods[:value] || :id)
+          attrs[:display] = hw_call_method_or_proc(option, methods[:display]) if methods[:display]
+          attrs[:content] = hw_call_method_or_proc(option, methods[:content]) if methods[:content]
+        end
+      end
+
+      def hw_call_method_or_proc(object, method_or_proc)
+        if method_or_proc.is_a? Proc
+          method_or_proc.call object
+        else
+          object.public_send method_or_proc
+        end
+      end
+
+      def hw_combobox_next_page_uri(uri, next_page)
+        if next_page
+          hw_uri_with_params uri, page: next_page, q: params[:q], format: :turbo_stream
+        end
+      end
+
+      def hw_combobox_page_stream_action
+        params[:page] ? :append : :update
+      end
   end
 end

data/app/presenters/hotwire_combobox/component.rb

@@ -1,20 +1,23 @@
 class HotwireCombobox::Component
-  include ActionView::Helpers::TagHelper
+  attr_reader :async_src, :options, :dialog_label
 
-  class << self
-    def options_from(options)
-      if HotwireCombobox::Option === options.first
-        options
-      else
-        HotwireCombobox::Helper.hw_combobox_options options, display: :to_combobox_display
-      end
-    end
-  end
+  def initialize(
+      view, name, value = nil,
+      autocomplete: :both,
+      id: nil,
+      form: nil,
+      name_when_new: nil,
+      open: false,
+      small_width: "640px",
+      async_src: nil,
+      dialog_label: nil,
+      options: [], data: {}, input: {}, **rest)
+    @combobox_attrs = input.reverse_merge(rest).with_indifferent_access
 
-  def initialize(name, value = nil, id: nil, form: nil, name_when_new: nil, open: false, options: [], data: {}, input: {}, **rest)
-    @combobox_attrs = input.reverse_merge(rest).with_indifferent_access # input: {} allows for specifying e.g. data attributes on the input field
-    @options = self.class.options_from options
-    @id, @name, @value, @form, @name_when_new, @open, @data = id, name, value, form, name_when_new, open, data
+    @view, @autocomplete, @id, @name, @value, @form, @async_src,
+    @name_when_new, @open, @data, @small_width, @options, @dialog_label =
+      view, autocomplete, id, name, value, form, async_src,
+      name_when_new, open, data, small_width, options, dialog_label
   end
 
   def fieldset_attrs
@@ -24,6 +27,7 @@ class HotwireCombobox::Component
     }
   end
 
+
   def hidden_field_attrs
     {
       id: hidden_field_id,
@@ -33,42 +37,113 @@ class HotwireCombobox::Component
     }
   end
 
+
   def input_attrs
     nested_attrs = %i[ data aria ]
 
     {
       id: input_id,
       role: :combobox,
+      class: "hw-combobox__input",
       type: input_type,
       data: input_data,
       aria: input_aria
     }.merge combobox_attrs.except(*nested_attrs)
   end
 
+
+  def handle_attrs
+    {
+      class: "hw-combobox__handle",
+      data: handle_data
+    }
+  end
+
+
   def listbox_attrs
     {
       id: listbox_id,
       role: :listbox,
+      class: "hw-combobox__listbox",
       hidden: "",
       data: listbox_data
     }
   end
 
-  def listbox_options
-    options.map { |option| HotwireCombobox::Listbox::Option.new option }
+
+  def listbox_options_attrs
+    { id: listbox_options_id }
+  end
+
+
+  def dialog_attrs
+    {
+      class: "hw-combobox__dialog",
+      role: :dialog,
+      data: dialog_data
+    }
+  end
+
+  def dialog_label_attrs
+    {
+      class: "hw-combobox__dialog__label",
+      for: dialog_input_id
+    }
+  end
+
+  def dialog_input_attrs
+    {
+      id: dialog_input_id,
+      role: :combobox,
+      class: "hw-combobox__dialog__input",
+      autofocus: "",
+      type: input_type,
+      data: dialog_input_data,
+      aria: dialog_input_aria
+    }
+  end
+
+  def dialog_listbox_attrs
+    {
+      id: dialog_listbox_id,
+      class: "hw-combobox__dialog__listbox",
+      role: :listbox,
+      data: dialog_listbox_data
+    }
+  end
+
+  def dialog_focus_trap_attrs
+    {
+      tabindex: "-1",
+      data: dialog_focus_trap_data
+    }
+  end
+
+
+  def paginated?
+    async_src.present?
+  end
+
+  def pagination_attrs
+    { src: async_src }
   end
 
   private
-    attr_reader :id, :name, :value, :form, :name_when_new, :open, :options, :data, :combobox_attrs
+    attr_reader :view, :autocomplete, :id, :name, :value, :form,
+      :name_when_new, :open, :data, :combobox_attrs, :small_width
 
     def fieldset_data
       data.reverse_merge \
-        controller: token_list("hw-combobox", data[:controller]),
+        controller: view.token_list("hw-combobox", data[:controller]),
         hw_combobox_expanded_value: open,
         hw_combobox_name_when_new_value: name_when_new,
         hw_combobox_original_name_value: hidden_field_name,
+        hw_combobox_autocomplete_value: autocomplete,
+        hw_combobox_small_viewport_max_width_value: small_width,
+        hw_combobox_async_src_value: async_src,
         hw_combobox_filterable_attribute_value: "data-filterable-as",
-        hw_combobox_autocompletable_attribute_value: "data-autocompletable-as"
+        hw_combobox_autocompletable_attribute_value: "data-autocompletable-as",
+        hw_combobox_selected_class: "hw-combobox__option--selected"
     end
 
 
@@ -113,7 +188,15 @@ class HotwireCombobox::Component
         controls: listbox_id,
         owns: listbox_id,
         haspopup: "listbox",
-        autocomplete: "both"
+        autocomplete: autocomplete
+    end
+
+
+    def handle_data
+      {
+        action: "click->hw-combobox#toggle",
+        hw_combobox_target: "handle"
+      }
     end
 
 
@@ -124,4 +207,51 @@ class HotwireCombobox::Component
     def listbox_data
       { hw_combobox_target: "listbox" }
     end
+
+
+    def listbox_options_id
+      "#{listbox_id}__options"
+    end
+
+
+    def dialog_data
+      {
+        action: "keydown->hw-combobox#navigate",
+        hw_combobox_target: "dialog"
+      }
+    end
+
+    def dialog_input_id
+      "#{hidden_field_id}-hw-dialog-combobox"
+    end
+
+    def dialog_input_data
+      {
+        action: "
+          input->hw-combobox#filter
+          keydown->hw-combobox#navigate
+          click@window->hw-combobox#closeOnClickOutside".squish,
+        hw_combobox_target: "dialogCombobox"
+      }
+    end
+
+    def dialog_input_aria
+      {
+        controls: dialog_listbox_id,
+        owns: dialog_listbox_id,
+        autocomplete: autocomplete
+      }
+    end
+
+    def dialog_listbox_id
+      "#{hidden_field_id}-hw-dialog-listbox"
+    end
+
+    def dialog_listbox_data
+      { hw_combobox_target: "dialogListbox" }
+    end
+
+    def dialog_focus_trap_data
+      { hw_combobox_target: "dialogFocusTrap" }
+    end
 end

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

@@ -1,6 +1,6 @@
 class HotwireCombobox::Listbox::Option
   def initialize(option)
-    @option = option
+    @option = option.is_a?(Hash) ? Data.new(**option) : option
   end
 
   def render_in(view_context)
@@ -8,6 +8,8 @@ class HotwireCombobox::Listbox::Option
   end
 
   private
+    Data = Struct.new :id, :value, :display, :content, :filterable_as, :autocompletable_as, keyword_init: true
+
     attr_reader :option
 
     def content
@@ -18,7 +20,8 @@ class HotwireCombobox::Listbox::Option
       {
         id: id,
         role: :option,
-        style: "cursor: pointer;",
+        class: "hw-combobox__option",
+        tabindex: 0,
         data: data
       }
     end

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

@@ -1,15 +1,6 @@
 <%= tag.fieldset **component.fieldset_attrs do %>
-  <% hidden_field_attrs = component.hidden_field_attrs %>
-  <%= hidden_field_tag \
-        hidden_field_attrs.delete(:name),
-        hidden_field_attrs.delete(:value),
-        **hidden_field_attrs %>
-
-  <%= tag.input **component.input_attrs %>
-
-  <%= tag.ul **component.listbox_attrs do |ul| %>
-    <% component.listbox_options.each do |option| %>
-      <%= render option %>
-    <% end %>
-  <% end %>
+  <%= render "hotwire_combobox/combobox/hidden_field", component: component %>
+  <%= render "hotwire_combobox/combobox/input", component: component %>
+  <%= render "hotwire_combobox/combobox/paginated_listbox", component: component %>
+  <%= render "hotwire_combobox/combobox/dialog", component: component %>
 <% end %>

data/app/views/hotwire_combobox/_next_page.turbo_stream.erb

@@ -0,0 +1,5 @@
+<%# locals: (next_page:, src:) -%>
+
+<%= turbo_stream.replace :hotwire_combobox_pagination do %>
+  <%= render "hotwire_combobox/pagination", src: hw_combobox_next_page_uri(src, next_page) %>
+<% end %>

data/app/views/hotwire_combobox/_paginated_options.turbo_stream.erb

@@ -0,0 +1,7 @@
+<%# locals: (for_id:, options:) -%>
+
+<%= turbo_stream.public_send(hw_combobox_page_stream_action, hw_listbox_options_id(for_id)) do %>
+  <% options.each do |option| %>
+    <%= render option %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<%# locals: (src:) -%>
+
+<%= turbo_frame_tag :hotwire_combobox_pagination, src: src, loading: :lazy %>

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

@@ -0,0 +1,7 @@
+<%= 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 %>
+<% end %>

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

@@ -0,0 +1,4 @@
+<% hidden_field_attrs = component.hidden_field_attrs %>
+
+<%= hidden_field_tag hidden_field_attrs.delete(:name),
+      hidden_field_attrs.delete(:value), **hidden_field_attrs %>

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

@@ -0,0 +1,2 @@
+<%= tag.input **component.input_attrs %>
+<%= tag.span **component.handle_attrs %>

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

@@ -0,0 +1,11 @@
+<%= tag.ul **component.listbox_attrs do |ul| %>
+  <%= tag.div **component.listbox_options_attrs do %>
+    <% component.options.each do |option| %>
+      <%= render option %>
+    <% end %>
+  <% end %>
+
+  <% if component.paginated? %>
+    <%= render "hotwire_combobox/pagination", **component.pagination_attrs %>
+  <% end %>
+<% end %>

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.11"
+  VERSION = "0.1.12"
 end

data/lib/hotwire_combobox.rb

@@ -2,8 +2,6 @@ require "hotwire_combobox/version"
 require "hotwire_combobox/engine"
 
 module HotwireCombobox
-  Option = Struct.new(:id, :value, :display, :content, :filterable_as, :autocompletable_as)
-
   mattr_accessor :bypass_convenience_methods
   @@bypass_convenience_methods = false
 
@@ -15,5 +13,9 @@ module HotwireCombobox
     def bypass_convenience_methods?
       bypass_convenience_methods
     end
+
+    def stylesheet_path
+      "hotwire_combobox"
+    end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: hotwire_combobox
 version: !ruby/object:Gem::Version
-  version: 0.1.11
+  version: 0.1.12
 platform: ruby
 authors:
 - Jose Farias
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-12-30 00:00:00.000000000 Z
+date: 2024-01-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -52,6 +52,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '1.2'
+- !ruby/object:Gem::Dependency
+  name: turbo-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '1.2'
+- !ruby/object:Gem::Dependency
+  name: requestjs-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.0.11
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.0.11
 description: A combobox implementation for Ruby on Rails apps running on Hotwire.
 email:
 - jose@farias.mx
@@ -65,11 +93,33 @@ files:
 - app/assets/javascripts/controllers/application.js
 - app/assets/javascripts/controllers/hw_combobox_controller.js
 - app/assets/javascripts/controllers/index.js
+- app/assets/javascripts/helpers.js
 - app/assets/javascripts/hotwire_combobox_application.js
+- app/assets/javascripts/models/combobox.js
+- app/assets/javascripts/models/combobox/actors.js
+- app/assets/javascripts/models/combobox/async_loading.js
+- app/assets/javascripts/models/combobox/autocomplete.js
+- app/assets/javascripts/models/combobox/base.js
+- app/assets/javascripts/models/combobox/dialog.js
+- app/assets/javascripts/models/combobox/filtering.js
+- app/assets/javascripts/models/combobox/navigation.js
+- app/assets/javascripts/models/combobox/options.js
+- app/assets/javascripts/models/combobox/selection.js
+- app/assets/javascripts/models/combobox/toggle.js
+- app/assets/javascripts/models/combobox/validity.js
+- app/assets/javascripts/vendor/bodyScrollLock.js
+- app/assets/stylesheets/hotwire_combobox.css
 - app/helpers/hotwire_combobox/helper.rb
 - app/presenters/hotwire_combobox/component.rb
 - app/presenters/hotwire_combobox/listbox/option.rb
 - app/views/hotwire_combobox/_combobox.html.erb
+- app/views/hotwire_combobox/_next_page.turbo_stream.erb
+- app/views/hotwire_combobox/_paginated_options.turbo_stream.erb
+- app/views/hotwire_combobox/_pagination.html.erb
+- app/views/hotwire_combobox/combobox/_dialog.html.erb
+- app/views/hotwire_combobox/combobox/_hidden_field.html.erb
+- app/views/hotwire_combobox/combobox/_input.html.erb
+- app/views/hotwire_combobox/combobox/_paginated_listbox.html.erb
 - config/importmap.rb
 - lib/hotwire_combobox.rb
 - lib/hotwire_combobox/engine.rb