Class: PhlexKit::SelectContent

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

Overview

The dropdown panel for PhlexKit::Select — a native [popover=manual] the controller toggles, anchor-positioned to the trigger with viewport-edge flipping (select.css). Outer div is the positioned/targeted layer; the inner .pk-select-viewport is the bordered, scrollable box. Holds SelectGroup / SelectLabel / SelectItem children. See select.rb.

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(id: nil, **attrs) ⇒ SelectContent

id: is a named kwarg (not left in **attrs) because mix would merge a caller id with the generated one into an invalid two-token id, breaking aria-controls and the generated item ids.



11
12
13
14
 
# File 'app/components/phlex_kit/select/select_content.rb', line 11

def initialize(id: nil, **attrs)
  @id = id || "pk-select-content-#{SecureRandom.hex(4)}"
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object 



16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
# File 'app/components/phlex_kit/select/select_content.rb', line 16

def view_template(&block)
  div(**mix({
    id: @id,
    role: "listbox",
    tabindex: "-1",
    class: "pk-select-content",
    popover: "manual",
    data: {
      phlex_kit__select_target: "content",
      action: "keydown->phlex-kit--select#typeahead"
    }
  }, @attrs)) do
    div(class: "pk-select-viewport", &block)
  end
end