Class: UI::SelectItem

Inherits:
Phlex::HTML
  • Object
show all
Includes:
SelectItemBehavior, SharedAsChildBehavior
Defined in:
app/components/ui/select_item.rb

Overview

Select Item - Phlex implementation

Individual selectable option in the dropdown. Supports asChild pattern for composition.

Examples:

Basic usage

render UI::Item.new(value: "apple") { "Apple" }

Disabled item

render UI::Item.new(value: "angular", disabled: true) { "Angular (Coming Soon)" }

With asChild (as link)

render UI::Item.new(value: "dashboard", as_child: true) do |attrs|
  a(href: "#dashboard", **attrs, class: "flex items-center gap-2") do
    span(class: "flex-1") { "Dashboard" }
  end
end

Instance Method Summary collapse

Methods included from SharedAsChildBehavior

#merge_attributes

Methods included from SelectItemBehavior

#select_item_classes, #select_item_html_attributes

Constructor Details

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

Returns a new instance of SelectItem.

Parameters:

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

    When true, yields attributes to block instead of rendering div

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

    Value of this option

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

    Whether the item is disabled

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

    Additional CSS classes to merge

  • attributes (Hash) —

    Additional HTML attributes



29
30
31
32
33
34
35
 
# File 'app/components/ui/select_item.rb', line 29

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

Instance Method Details

#view_template(&block) ⇒ Object 



37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
# File 'app/components/ui/select_item.rb', line 37

def view_template(&block)
  item_attrs = select_item_html_attributes.deep_merge(@attributes)

  if @as_child
    # asChild mode: yield attributes to block
    yield(item_attrs) if block_given?
  else
    # Default mode: render as div
    div(**item_attrs) do
      span(class: "flex-1") do
        yield if block_given?
      end

      # Checkmark icon - hidden by default, shown when selected
      svg(
        data_ui__select_target: "itemCheck",
        class: "ml-auto size-4 opacity-0 transition-opacity",
        xmlns: "http://www.w3.org/2000/svg",
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        stroke_width: "2",
        stroke_linecap: "round",
        stroke_linejoin: "round"
      ) do |s|
        s.path(d: "M20 6 9 17l-5-5")
      end
    end
  end
end