Class: UI::ComboboxWrapper

Inherits:
Phlex::HTML
  • Object
show all
Includes:
ComboboxBehavior
Defined in:
app/components/ui/combobox_wrapper.rb

Overview

Wrapper - Phlex 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::Wrapper.new(value: "") do |combobox_attrs|
  render UI::Popover.new(**combobox_attrs, placement: "bottom-start") do
    render UI::PopoverTrigger.new(as_child: true) do |trigger_attrs|
      render UI::Button.new(**trigger_attrs) do
        span(**combobox_text_html_attributes) { "Select framework..." }
      end
    end

    render UI::PopoverContent.new do
      render UI::Command.new do
        render UI::CommandItem.new(value: "next", **combobox_item_html_attributes("next")) do
          span { "Next.js" }
          svg(class: "ml-auto h-4 w-4 opacity-0") { path(d: "M20 6 9 17l-5-5") }
        end
      end
    end
  end
end

With Drawer (responsive)

render UI::Wrapper.new(value: "done") do |combobox_attrs|
  render UI::Drawer.new(**combobox_attrs) do
    # ... drawer content
  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) ⇒ ComboboxWrapper

Returns a new instance of ComboboxWrapper.

Parameters:

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

    Initial selected value (empty string for no selection)

  • attributes (Hash) —

    Additional HTML attributes to merge



46
47
48
49
 
# File 'app/components/ui/combobox_wrapper.rb', line 46

def initialize(value: "", **attributes)
  @value = value
  @attributes = attributes
end

Instance Method Details

#view_template {|combobox_html_attributes.deep_merge(@attributes)| ... } ⇒ Object

Yields:



51
52
53
54
55
56
 
# File 'app/components/ui/combobox_wrapper.rb', line 51

def view_template(&block)
  # Yield combobox attributes to be spread into container component
  # The block receives a hash of data attributes that should be passed
  # to the wrapping container (Popover/Drawer/DropdownMenu)
  yield(combobox_html_attributes.deep_merge(@attributes)) if block_given?
end