Class: PhlexKit::CommandInput

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

Overview

Search field at the top of a PhlexKit::Command — filters the items as you type, arrows/enter drive selection, esc dismisses. Renders as shadcn's current bordered pill inside the padded palette (input-wrapper > input-group). See command.rb. Pass list_id: matching the CommandList id to wire aria-controls statically — otherwise the controller wires it on connect. aria-expanded stays "true" because the list is always visible (filtering hides items, never the listbox itself).

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(placeholder: "Type a command or search...", list_id: nil, autofocus: false, **attrs) ⇒ CommandInput

autofocus: defaults off so an inline palette doesn't steal page focus on load; the dialog clone needs no autofocus either — the command controller's connect() focuses the input when the clone is inserted.



14
15
16
17
18
19
 
# File 'app/components/phlex_kit/command/command_input.rb', line 14

def initialize(placeholder: "Type a command or search...", list_id: nil, autofocus: false, **attrs)
  @placeholder = placeholder
  @list_id = list_id
  @autofocus = autofocus
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
# File 'app/components/phlex_kit/command/command_input.rb', line 21

def view_template
  div(class: "pk-command-input-wrapper") do
    div(class: "pk-command-input-pill") do
      search_icon
      input(**mix({
        type: :text,
        class: "pk-command-input",
        placeholder: @placeholder,
        autocomplete: "off",
        autocorrect: "off",
        spellcheck: "false",
        autofocus: @autofocus,
        role: "combobox",
        value: "",
        aria: { autocomplete: "list", expanded: "true", controls: @list_id },
        data: {
          phlex_kit__command_target: "input",
          action: [
            "input->phlex-kit--command#filter",
            "keydown.down->phlex-kit--command#handleKeydown",
            "keydown.up->phlex-kit--command#handleKeydown",
            "keydown.enter->phlex-kit--command#handleKeydown",
            "keydown.esc->phlex-kit--command#dismiss"
          ].join(" ")
        }
      }, @attrs))
    end
  end
end