Class: PhlexKit::SelectItem

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/select/select_item.rb

Overview

A selectable row in a PhlexKit::Select panel. Carries its value: in data-value; on click/enter the controller copies it into the hidden SelectInput, updates the SelectValue text, and flips aria-selected (which reveals the checkmark). Pass selected: true to mark the initially-chosen item server-side — it's a named kwarg (not an "aria-selected": attr) because mix would merge a repeated attribute rather than override it. See select.rb.

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(value:, selected: false, **attrs) ⇒ SelectItem

Returns a new instance of SelectItem.

Raises:

  • (ArgumentError) 


10
11
12
13
14
15
16
17
 
# File 'app/components/phlex_kit/select/select_item.rb', line 10

def initialize(value:, selected: false, **attrs)
  # nil would render no data-value at all and the controller would submit
  # the literal string "undefined" — fail loud instead.
  raise ArgumentError, "SelectItem requires a value:" if value.nil?
  @value = value
  @selected = selected
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object 



19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
# File 'app/components/phlex_kit/select/select_item.rb', line 19

def view_template(&block)
  div(**mix({
    role: "option",
    # Roving listbox pattern: options are focusable programmatically only
    # (focus() works on tabindex=-1), so Tab exits the widget instead of
    # walking every option.
    tabindex: "-1",
    class: "pk-select-item",
    "aria-selected": (@selected ? "true" : "false"),
    data: {
      value: @value,
      action: "click->phlex-kit--select#selectItem keydown.enter->phlex-kit--select#selectItem " \
              "keydown.space->phlex-kit--select#selectItem " \
              "keydown.down->phlex-kit--select#handleKeyDown keydown.up->phlex-kit--select#handleKeyUp " \
              "keydown.home->phlex-kit--select#handleHome keydown.end->phlex-kit--select#handleEnd " \
              "keydown.esc->phlex-kit--select#handleEsc",
      phlex_kit__select_target: "item"
    }
  }, @attrs)) do
    check_icon
    block&.call
  end
end