Class: Shadcn::Command::Input::Component

Inherits:
ApplicationViewComponent show all
Defined in:
app/components/shadcn/command/input/component.rb

Overview

The search field, wrapped in the row that holds the magnifier — upstream renders both from one component and gives each its own slot.

Constant Summary collapse

WRAPPER_CLASSES = 
"flex h-9 items-center gap-2 border-b px-3"
ICON_CLASSES = 
"size-4 shrink-0 opacity-50"

Constants inherited from ApplicationViewComponent

ApplicationViewComponent::CONTENTS_STYLE, ApplicationViewComponent::VOID_TAGS

Instance Attribute Summary collapse

Attributes inherited from ApplicationViewComponent

#attributes

Instance Method Summary collapse

Methods inherited from ApplicationViewComponent

#css_classes, default_tag, #merged_style, #render_element, #shadcn_t, slot_name, #style_variants, #tag_name

Constructor Details

#initialize(ids: {}, **attributes) ⇒ Component

Returns a new instance of Component.



24
25
26
27
 
# File 'app/components/shadcn/command/input/component.rb', line 24

def initialize(ids: {}, **attributes)
  @ids = ids
  super(**attributes)
end

Instance Attribute Details

#ids ⇒ Object (readonly)

Returns the value of attribute ids.



22
23
24
 
# File 'app/components/shadcn/command/input/component.rb', line 22

def ids
  @ids
end

Instance Method Details

#call ⇒ Object

The wrapper is the component's own markup rather than a part a caller composes, which is upstream's shape too.



52
53
54
55
56
57
58
59
60
61
62
 
# File 'app/components/shadcn/command/input/component.rb', line 52

def call
  tag.div(
    safe_join([
      render(Icon::Component.new("search", class: ICON_CLASSES)),
      render_element
    ]),
    class: WRAPPER_CLASSES,
    "data-slot": "command-input-wrapper",
    "cmdk-input-wrapper": ""
  )
end

#element_attributes(**defaults) ⇒ Object

cmdk's own attributes, read from vendor/cmdk/index.tsx:801-816. The combobox is always expanded because the list is always there — a palette has nothing to open.



32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
# File 'app/components/shadcn/command/input/component.rb', line 32

def element_attributes(**defaults)
  super(**{
    "cmdk-input" => "",
    type: "text",
    id: ids[:input],
    role: "combobox",
    autocomplete: "off",
    autocorrect: "off",
    spellcheck: "false",
    "aria-autocomplete" => "list",
    "aria-expanded" => "true",
    "aria-controls" => ids[:list],
    "aria-labelledby" => ids[:label],
    "data-shadcn--command-target" => "search",
    "data-action" => "input->shadcn--command#search keydown->shadcn--command#keydown"
  }.compact.merge(defaults))
end