Class: NitroKit::Combobox

Inherits:
Component
  • Object
show all
Defined in:
app/components/nitro_kit/combobox.rb

Instance Attribute Summary collapse

Attributes inherited from Component

#attrs

Instance Method Summary collapse

Methods inherited from Component

#builder, from_template

Constructor Details

#initialize(options: [], id: nil, placement: "bottom", tab_inserts_suggestions: true, first_option_selection_mode: "selected", scroll_into_view_options: { block: "nearest", inline: "nearest" }, **attrs) ⇒ Combobox 



5
6
7
8
9
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
37
38
39
40
41
42
43
44
45
46
47
 
# File 'app/components/nitro_kit/combobox.rb', line 5

def initialize(
  options: [],
  id: nil,

  placement: "bottom",
  tab_inserts_suggestions: true,
  first_option_selection_mode: "selected",
  scroll_into_view_options: { block: "nearest", inline: "nearest" },

  **attrs
)
  # floating-ui options
  @placement = placement

  # combobox-nav options
  @tab_inserts_suggestions = tab_inserts_suggestions
  @first_option_selection_mode = first_option_selection_mode
  @scroll_into_view_options = scroll_into_view_options

  @id = id || "nk--combobox-" + SecureRandom.hex(4)

  @options = options

  super(
    attrs,
    type: "text",
    class: input_class,
    data: {
      nk__combobox_target: "input",
      action: %w[
        focusin->nk--combobox#open
        focusin@window->nk--combobox#focusShift
        click@window->nk--combobox#windowClick
        input->nk--combobox#input
        keydown.esc->nk--combobox#clear
        keydown.down->nk--combobox#open
      ]
    },
    aria: {
      controls: id(:listbox)
    }
  )
end

Instance Attribute Details

#first_option_selection_mode ⇒ Object (readonly)

Returns the value of attribute first_option_selection_mode.



49
50
51
 
# File 'app/components/nitro_kit/combobox.rb', line 49

def first_option_selection_mode
  @first_option_selection_mode
end

#options ⇒ Object (readonly)

Returns the value of attribute options.



49
50
51
 
# File 'app/components/nitro_kit/combobox.rb', line 49

def options
  @options
end

#placement ⇒ Object (readonly)

Returns the value of attribute placement.



49
50
51
 
# File 'app/components/nitro_kit/combobox.rb', line 49

def placement
  @placement
end

#scroll_into_view_options ⇒ Object (readonly)

Returns the value of attribute scroll_into_view_options.



49
50
51
 
# File 'app/components/nitro_kit/combobox.rb', line 49

def scroll_into_view_options
  @scroll_into_view_options
end

#tab_inserts_suggestions ⇒ Object (readonly)

Returns the value of attribute tab_inserts_suggestions.



49
50
51
 
# File 'app/components/nitro_kit/combobox.rb', line 49

def tab_inserts_suggestions
  @tab_inserts_suggestions
end

Instance Method Details

#view_template ⇒ Object 



57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
# File 'app/components/nitro_kit/combobox.rb', line 57

def view_template
  div(
    data: {
      class: "isolate",
      slot: "control",
      controller: "nk--combobox",
      nk__combobox_placement_value: placement,
      nk__combobox_tab_inserts_suggestions_value: tab_inserts_suggestions.to_s,
      nk__combobox_first_option_selection_mode_value: first_option_selection_mode.to_s,
      nk__combobox_scroll_into_view_options_value: scroll_into_view_options&.to_json
    }
  ) do
    span(class: wrapper_class) do
      render(Input.new(**attrs, value: display_value))
      chevron_icon
    end

    # Since a combobox can function like a <select> element where the displayed
    # value and the form value differ, include the value in a hidden field
    input(
      type: "hidden",
      value: attrs[:value],
      name: attrs[:name],
      data: { nk__combobox_target: "hiddenField" }
    )

    ul(
      role: "listbox",
      id: id(:listbox),
      class: list_class,
      data: { nk__combobox_target: "list", state: "closed" }
    ) do
      options.each do |(key, value)|
        li(
          role: "option",
          data: { value: },
          class: merge_class(option_class)
        ) { key }
      end
    end
  end
end