Class: UI::Select

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

Overview

Select - Phlex implementation

A custom select component with keyboard navigation, scrollable viewport, and form integration. Root container that wraps trigger, content, and items.

Examples:

Basic usage

render UI::Select.new(value: "apple") do
  render UI::Trigger.new(placeholder: "Select a fruit...")
  render UI::Content.new do
    render UI::Item.new(value: "apple") { "Apple" }
    render UI::Item.new(value: "banana") { "Banana" }
  end
end

With groups

render UI::Select.new do
  render UI::Trigger.new(placeholder: "Select timezone...")
  render UI::Content.new do
    render UI::Group.new do
      render UI::Label.new { "North America" }
      render UI::Item.new(value: "america/new_york") { "Eastern Time" }
    end
  end
end

Instance Method Summary collapse

Methods included from SelectBehavior

#select_classes, #select_html_attributes

Constructor Details

#initialize(value: nil, classes: "", as_child: false, **attributes) ⇒ Select

Returns a new instance of Select.

Parameters:

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

    Currently selected value

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

    Additional CSS classes to merge

  • as_child (Boolean) (defaults to: false) —

    If true, renders without wrapper div but preserves controller on inner element

  • attributes (Hash) —

    Additional HTML attributes



34
35
36
37
38
39
 
# File 'app/components/ui/select.rb', line 34

def initialize(value: nil, classes: "", as_child: false, **attributes)
  @value = value
  @classes = classes
  @as_child = as_child
  @attributes = attributes
end

Instance Method Details

#view_template(&block) ⇒ Object 



41
42
43
44
45
46
47
48
49
50
51
52
53
 
# File 'app/components/ui/select.rb', line 41

def view_template(&block)
  select_attrs = select_html_attributes.deep_merge(@attributes)

  if @as_child
    # When as_child, we still need a wrapper for the Stimulus controller
    # but we use a minimal inline wrapper that doesn't break flex layouts
    # Override class to use 'contents' which makes the element invisible to layout
    select_attrs[:class] = "contents"
    span(**select_attrs, &block)
  else
    div(**select_attrs, &block)
  end
end