Class: PhlexKit::CommandItem

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/command/command_item.rb

Overview

One palette result — an (pass href:) filtered by value:, activated by click or enter. aria-selected is toggled by keyboard navigation. disabled: true renders the [data-disabled] styling + aria-disabled and the controller skips it during keyboard navigation (matches ContextMenuItem's pattern). See command.rb.

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(value:, text: "", href: "#", disabled: false, **attrs) ⇒ CommandItem

Returns a new instance of CommandItem.



8
9
10
11
12
13
14
 
# File 'app/components/phlex_kit/command/command_item.rb', line 8

def initialize(value:, text: "", href: "#", disabled: false, **attrs)
  @value = value
  @text = text
  @href = href
  @disabled = disabled
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
# File 'app/components/phlex_kit/command/command_item.rb', line 16

def view_template(&)
  a(**mix({
    class: "pk-command-item",
    href: @href,
    role: "option",
    # Options in an aria-activedescendant listbox are not tab stops —
    # keyboard access is arrows/Enter from the input (cmdk parity); a
    # tabbable anchor per row also made disabled items focusable.
    tabindex: "-1",
    aria: { disabled: (@disabled ? "true" : nil) },
    data: {
      phlex_kit__command_target: "item",
      value: @value,
      text: @text,
      disabled: (@disabled ? "true" : nil),
      # Guards the default href="#": without it a mouse click (or the
      # Enter-synthesized click()) scrolls to top and appends # to the URL.
      action: "click->phlex-kit--command#onItemClick"
    }
  }, @attrs), &)
end