Class: UI::ComboboxWrapperComponent

Inherits:
ViewComponent::Base
  • Object
show all
Includes:
ComboboxBehavior
Defined in:
app/view_components/ui/combobox_wrapper_component.rb

Overview

WrapperComponent - ViewComponent implementation

Wrapper component that yields combobox attributes to be spread into a container component. Used to wrap Popover/Drawer/DropdownMenu with combobox selection functionality. Uses ComboboxBehavior concern for shared attribute generation logic.

The combobox pattern provides:

  • Selection state management via Stimulus controller

  • Automatic text update when item is selected

  • Check icon visibility control (opacity-0/100)

  • Container closing after selection

Examples:

With Popover

<%= render UI::WrapperComponent.new(value: "") do |combobox_attrs| %>
  <%= render UI::PopoverComponent.new(**combobox_attrs, placement: "bottom-start") do %>
    <%= render UI::PopoverTriggerComponent.new(as_child: true) do %>
      <%= render UI::ButtonComponent.new do %>
        <span data-ui--combobox-target="text">Select framework...</span>
      <% end %>
    <% end %>

    <%= render UI::PopoverContentComponent.new do %>
      <%= render UI::CommandComponent.new do %>
        <%= render UI::CommandItemComponent.new(
          value: "next",
          data: { ui__combobox_target: "item" }
        ) do %>
          <span>Next.js</span>
          <svg class="ml-auto h-4 w-4 opacity-0">
            <path d="M20 6 9 17l-5-5"/>
          </svg>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

With Drawer (responsive)

<%= render UI::WrapperComponent.new(value: "done") do |combobox_attrs| %>
  <%= render UI::DrawerComponent.new(**combobox_attrs) do %>
    ...
  <% end %>
<% end %>

Instance Method Summary collapse

Methods included from ComboboxBehavior

#combobox_html_attributes, #combobox_item_html_attributes, #combobox_text_html_attributes

Constructor Details

#initialize(value: "", **attributes) ⇒ ComboboxWrapperComponent

Returns a new instance of ComboboxWrapperComponent.

Parameters:

  • value (String) (defaults to: "") —

    Initial selected value (empty string for no selection)

  • attributes (Hash) —

    Additional HTML attributes to merge



51
52
53
54
55
 
# File 'app/view_components/ui/combobox_wrapper_component.rb', line 51

def initialize(value: "", **attributes)
  @value = value
  @attributes = attributes
  @combobox_html_attrs = combobox_html_attributes.deep_merge(@attributes)
end