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. See command.rb.

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

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

Returns a new instance of CommandInput.



5
6
7
8
 
# File 'app/components/phlex_kit/command/command_input.rb', line 5

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

Instance Method Details

#view_template ⇒ Object 



10
11
12
13
14
15
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_input.rb', line 10

def view_template
  div(class: "pk-command-input-row") do
    search_icon
    input(**mix({
      type: :text,
      class: "pk-command-input",
      placeholder: @placeholder,
      autocomplete: "off",
      autocorrect: "off",
      spellcheck: "false",
      autofocus: true,
      role: "combobox",
      value: "",
      aria: { autocomplete: "list", expanded: "true" },
      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