Class: Shadcn::CommandInputComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/command_input_component.rb

Overview

Command Input component - search input for command palette

Constant Summary collapse

WRAPPER_CLASSES = 
"flex items-center border-b px-3"
INPUT_CLASSES = 
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
ICON_CLASSES = 
"mr-2 h-4 w-4 shrink-0 opacity-50"

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(placeholder: "Type a command or search...", autofocus: false, **options) ⇒ CommandInputComponent

Returns a new instance of CommandInputComponent.

Parameters:

  • placeholder (String) (defaults to: "Type a command or search...") —

    Placeholder text

  • autofocus (Boolean) (defaults to: false) —

    Whether to autofocus the input



12
13
14
15
16
 
# File 'app/components/shadcn/command_input_component.rb', line 12

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

Instance Method Details

#call ⇒ Object 



18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
# File 'app/components/shadcn/command_input_component.rb', line 18

def call
  content_tag(:div, class: WRAPPER_CLASSES) do
    safe_join([
      search_icon,
      tag.input(
        type: "text",
        placeholder: @placeholder,
        autofocus: @autofocus || nil,
        class: merge_classes(INPUT_CLASSES),
        data: {
          "shadcn--command-target": "input",
          action: "input->shadcn--command#filter"
        },
        **html_options.except(:class)
      )
    ])
  end
end