hotwire_combobox 0.1.10 → 0.1.12

data/app/helpers/hotwire_combobox/helper.rb

@@ -2,104 +2,93 @@ module HotwireCombobox
   module Helper
     class << self
       delegate :bypass_convenience_methods?, to: :HotwireCombobox
-    end
-
-    def hw_combobox_options(options)
-      options.map { |option| hw_combobox_option(**option) }
-    end
-    alias_method :combobox_options, :hw_combobox_options unless bypass_convenience_methods?
 
-    def hw_combobox_tag(name, value = nil, form: nil, options: [], data: {}, input: {}, **attrs)
-      value_field_attrs = {}.tap do |h|
-        h[:id] = default_hw_combobox_value_field_id attrs, form, name
-        h[:name] = default_hw_combobox_value_field_name form, name
-        h[:data] = default_hw_combobox_value_field_data
-        h[:value] = form&.object&.public_send(name) || value
+      def hw(method_name)
+        unless bypass_convenience_methods?
+          alias_method method_name.to_s.sub(/^hw_/, ""), method_name
+        end
       end
-
-      attrs[:type] ||= :text
-      attrs[:role] = :combobox
-      attrs[:id] = hw_combobox_id value_field_attrs[:id]
-      attrs[:data] = default_hw_combobox_data input.fetch(:data, {})
-      attrs[:aria] = default_hw_combobox_aria value_field_attrs, input.fetch(:aria, {})
-
-      render "hotwire_combobox/combobox", options: options,
-        attrs: attrs, value_field_attrs: value_field_attrs,
-        listbox_id: hw_combobox_listbox_id(value_field_attrs[:id]),
-        parent_data: default_hw_combobox_parent_data(attrs, data)
     end
-    alias_method :combobox_tag, :hw_combobox_tag unless bypass_convenience_methods?
 
-    def hw_listbox_option_id(option)
-      option.try(:id)
+    hw def hw_combobox_style_tag(*args, **kwargs)
+      stylesheet_link_tag HotwireCombobox.stylesheet_path, *args, **kwargs
     end
 
-    def hw_listbox_option_value(option)
-      option.try(:value) || option.id
+    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
 
-    def hw_listbox_option_content(option)
-      option.try(:content) || option.try(:display)
+    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
+          methods[:content]
+        end
+
+        hw_parse_combobox_options options, **methods.merge(display: display, content: content)
+      end
     end
 
-    def hw_listbox_option_filterable_as(option)
-      option.try(:filterable_as) || option.try(:display)
+    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
 
-    def hw_listbox_option_autocompletable_as(option)
-      option.try(:autocompletable_as) || option.try(:display)
+    hw def hw_listbox_options_id(id)
+      "#{id}-hw-listbox__options"
     end
 
     private
-      def hw_combobox_option(...)
-        HotwireCombobox::Option.new(...)
-      end
-
-      def default_hw_combobox_value_field_id(attrs, form, name)
-        attrs.delete(:id) || form&.field_id(name)
-      end
-
-      def default_hw_combobox_value_field_name(form, name)
-        form&.field_name(name) || name
-      end
-
-      def default_hw_combobox_value_field_data
-        { "hw-combobox-target": "valueField" }
+      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 default_hw_combobox_data(data)
-        data.reverse_merge! \
-          "action": "
-            focus->hw-combobox#open
-            input->hw-combobox#filter
-            keydown->hw-combobox#navigate
-            click@window->hw-combobox#closeOnClickOutside
-            focusin@window->hw-combobox#closeOnFocusOutside".squish,
-          "hw-combobox-target": "combobox"
+      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 default_hw_combobox_aria(attrs, aria)
-        aria.reverse_merge! \
-          "controls": hw_combobox_listbox_id(attrs[:id]),
-          "owns": hw_combobox_listbox_id(attrs[:id]),
-          "haspopup": "listbox",
-          "autocomplete": "both"
+      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 default_hw_combobox_parent_data(attrs, data)
-        data.reverse_merge! \
-          "controller": token_list("hw-combobox", data.delete(:controller)),
-          "hw-combobox-expanded-value": attrs.delete(:open),
-          "hw-combobox-filterable-attribute-value": "data-filterable-as",
-          "hw-combobox-autocompletable-attribute-value": "data-autocompletable-as"
+      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_id(id)
-        "#{id}-hw-combobox"
+      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_listbox_id(id)
-        "#{id}-hw-listbox"
+      def hw_combobox_page_stream_action
+        params[:page] ? :append : :update
       end
   end
 end

data/app/presenters/hotwire_combobox/component.rb

@@ -0,0 +1,257 @@
+class HotwireCombobox::Component
+  attr_reader :async_src, :options, :dialog_label
+
+  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
+
+    @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
+    {
+      class: "hw-combobox",
+      data: fieldset_data
+    }
+  end
+
+
+  def hidden_field_attrs
+    {
+      id: hidden_field_id,
+      name: hidden_field_name,
+      data: hidden_field_data,
+      value: hidden_field_value
+    }
+  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_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 :view, :autocomplete, :id, :name, :value, :form,
+      :name_when_new, :open, :data, :combobox_attrs, :small_width
+
+    def fieldset_data
+      data.reverse_merge \
+        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_selected_class: "hw-combobox__option--selected"
+    end
+
+
+    def hidden_field_id
+      id || form&.field_id(name)
+    end
+
+    def hidden_field_name
+      form&.field_name(name) || name
+    end
+
+    def hidden_field_data
+      { hw_combobox_target: "hiddenField" }
+    end
+
+    def hidden_field_value
+      form&.object&.public_send(name) || value
+    end
+
+
+    def input_id
+      "#{hidden_field_id}-hw-combobox"
+    end
+
+    def input_type
+      combobox_attrs[:type].to_s.presence_in(%w[ text search ]) || "text"
+    end
+
+    def input_data
+      combobox_attrs.fetch(:data, {}).reverse_merge! \
+        action: "
+          focus->hw-combobox#open
+          input->hw-combobox#filter
+          keydown->hw-combobox#navigate
+          click@window->hw-combobox#closeOnClickOutside
+          focusin@window->hw-combobox#closeOnFocusOutside".squish,
+        hw_combobox_target: "combobox"
+    end
+
+    def input_aria
+      combobox_attrs.fetch(:aria, {}).reverse_merge! \
+        controls: listbox_id,
+        owns: listbox_id,
+        haspopup: "listbox",
+        autocomplete: autocomplete
+    end
+
+
+    def handle_data
+      {
+        action: "click->hw-combobox#toggle",
+        hw_combobox_target: "handle"
+      }
+    end
+
+
+    def listbox_id
+      "#{hidden_field_id}-hw-listbox"
+    end
+
+    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

@@ -0,0 +1,53 @@
+class HotwireCombobox::Listbox::Option
+  def initialize(option)
+    @option = option.is_a?(Hash) ? Data.new(**option) : option
+  end
+
+  def render_in(view_context)
+    view_context.tag.li content, **options
+  end
+
+  private
+    Data = Struct.new :id, :value, :display, :content, :filterable_as, :autocompletable_as, keyword_init: true
+
+    attr_reader :option
+
+    def content
+      option.try(:content) || option.try(:display)
+    end
+
+    def options
+      {
+        id: id,
+        role: :option,
+        class: "hw-combobox__option",
+        tabindex: 0,
+        data: data
+      }
+    end
+
+    def id
+      option.try(:id)
+    end
+
+    def data
+      {
+        action: "click->hw-combobox#selectOption",
+        filterable_as: filterable_as,
+        autocompletable_as: autocompletable_as,
+        value: value
+      }
+    end
+
+    def filterable_as
+      option.try(:filterable_as) || option.try(:display)
+    end
+
+    def autocompletable_as
+      option.try(:autocompletable_as) || option.try(:display)
+    end
+
+    def value
+      option.try(:value) || option.id
+    end
+end

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

@@ -1,21 +1,6 @@
-<%= tag.fieldset class: "hw-combobox", data: parent_data do %>
-  <%= hidden_field_tag value_field_attrs.delete(:name),
-        value_field_attrs.delete(:value), **value_field_attrs %>
-
-  <%= tag.input **attrs %>
-
-  <%= tag.ul id: listbox_id, hidden: "", role: :listbox,
-        data: { "hw-combobox-target": "listbox" } do |ul| %>
-    <% options.each do |option| %>
-      <%= tag.li hw_listbox_option_content(option),
-            id: hw_listbox_option_id(option),
-            role: :option,
-            style: "cursor: pointer;",
-            data: {
-              "action": "click->hw-combobox#selectOption",
-              "filterable-as": hw_listbox_option_filterable_as(option),
-              "autocompletable-as": hw_listbox_option_autocompletable_as(option),
-              "value": hw_listbox_option_value(option) } %>
-    <% end %>
-  <% end %>
+<%= tag.fieldset **component.fieldset_attrs do %>
+  <%= 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/engine.rb

@@ -3,8 +3,18 @@ module HotwireCombobox
     isolate_namespace HotwireCombobox
 
     initializer "hotwire_combobox.view_helpers" do
-      ActiveSupport.on_load :action_controller do
-        helper HotwireCombobox::Helper
+      ActiveSupport.on_load :action_view do
+        include HotwireCombobox::Helper
+
+        unless HotwireCombobox.bypass_convenience_methods?
+          module FormBuilderExtensions
+            def combobox(*args, **kwargs, &block)
+              @template.hw_combobox_tag *args, **kwargs.merge(form: self), &block
+            end
+          end
+
+          ActionView::Helpers::FormBuilder.include FormBuilderExtensions
+        end
       end
     end
 

data/lib/hotwire_combobox/version.rb

@@ -1,3 +1,3 @@
 module HotwireCombobox
-  VERSION = "0.1.10"
+  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