Class: Daisy::DataInput::SelectComponent

Inherits:
LocoMotion::BaseComponent show all
Includes:
LocoMotion::Concerns::LabelableComponent
Defined in:
app/components/daisy/data_input/select_component.rb

Overview

Note:

Select inputs have a border by default and a width of 20rem. Use ‘select-ghost` to remove the border.

The Select component provides a styled dropdown select input for forms. It supports various styling options, including sizes, colors, and variants. Additionally, it supports labelable functionality with start, end, and floating labels.

Defined Under Namespace

Classes: SelectOptionComponent

Constant Summary

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary collapse

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary collapse

Methods included from LocoMotion::Concerns::LabelableComponent

#has_any_label?, #has_end_label?, #has_floating_label?, #has_start_label?

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Constructor Details

#initialize(**kws) ⇒ SelectComponent

Initialize a new select component.

top of the list.

Parameters:

  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • name (String) —

    The name attribute for the select input.

  • id (String) —

    The id attribute for the select input.

  • value (String, Symbol, Integer) —

    The current value of the select input. Determines which option is selected on initial render.

  • include_blank (Boolean) —

    Whether to include a blank option at the

  • disabled (Boolean) —

    Whether the select input is disabled. Defaults to false.

  • required (Boolean) —

    Whether the select input is required for form validation. Defaults to false.

  • options (Array) —

    An array of options to display in the select input. Can be an array of strings or hashes with :value and :label keys.

  • options_css (String) —

    CSS classes to apply to each option.

  • options_html (Hash) —

    HTML attributes to apply to each option.

  • option_label (Symbol) —

    The key to use for the option label.

  • option_value (Symbol) —

    The key to use for the option value.



126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
# File 'app/components/daisy/data_input/select_component.rb', line 126

def initialize(**kws)
  super(**kws)

  @name = config_option(:name)
  @id = config_option(:id)
  @value = config_option(:value)
  @include_blank = config_option(:include_blank, false)
  @disabled = config_option(:disabled, false)
  @required = config_option(:required, false)
  @options_list = config_option(:options)
  @options_css = config_option(:options_css, "")
  @options_html = config_option(:options_html, {})
  @option_label = config_option(:option_label, :label)
  @option_value = config_option(:option_value, :value)
end

Instance Attribute Details

#disabled ⇒ Object (readonly)

Returns the value of attribute disabled.



92
93
94
 
# File 'app/components/daisy/data_input/select_component.rb', line 92

def disabled
  @disabled
end

#id ⇒ Object (readonly)

Returns the value of attribute id.



92
93
94
 
# File 'app/components/daisy/data_input/select_component.rb', line 92

def id
  @id
end

#include_blank ⇒ Object (readonly)

Returns the value of attribute include_blank.



92
93
94
 
# File 'app/components/daisy/data_input/select_component.rb', line 92

def include_blank
  @include_blank
end

#name ⇒ Object (readonly)

Returns the value of attribute name.



92
93
94
 
# File 'app/components/daisy/data_input/select_component.rb', line 92

def name
  @name
end

#options_css ⇒ Object (readonly)

Returns the value of attribute options_css.



92
93
94
 
# File 'app/components/daisy/data_input/select_component.rb', line 92

def options_css
  @options_css
end

#options_html ⇒ Object (readonly)

Returns the value of attribute options_html.



92
93
94
 
# File 'app/components/daisy/data_input/select_component.rb', line 92

def options_html
  @options_html
end

#required ⇒ Object (readonly)

Returns the value of attribute required.



92
93
94
 
# File 'app/components/daisy/data_input/select_component.rb', line 92

def required
  @required
end

#value ⇒ Object (readonly)

Returns the value of attribute value.



92
93
94
 
# File 'app/components/daisy/data_input/select_component.rb', line 92

def value
  @value
end

Instance Method Details

#before_render ⇒ Object

Sets up the component before rendering.



145
146
147
148
149
150
 
# File 'app/components/daisy/data_input/select_component.rb', line 145

def before_render
  super

  setup_component
  setup_placeholder
end

#default_options ⇒ Array<SelectOptionComponent>

Converts the options array into SelectOptionComponent instances. Handles both hash options (with value/label keys) and simple string options.

Returns:



197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
 
# File 'app/components/daisy/data_input/select_component.rb', line 197

def default_options
  return [] unless @options_list

  options_list.map do |option|
    value = extract_option_value(option)
    label = extract_option_label(option, value)

    Daisy::DataInput::SelectComponent::SelectOptionComponent.new(
      value: value,
      label: label,
      selected: value.to_s == @value.to_s,
      css: @options_css,
      html: @options_html
    )
  end
end

#setup_component ⇒ Object

Sets up the component by configuring the tag name, CSS classes, and HTML attributes. Sets the tag to ‘select’ and adds the ‘select’ CSS class. Also adds Stimulus controller data attributes.



157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
 
# File 'app/components/daisy/data_input/select_component.rb', line 157

def setup_component
  set_tag_name(:component, :select)

  if has_floating_label?
    add_css(:label_wrapper, "floating-label")
    add_css(:component, "select")
  elsif has_start_label? || has_end_label?
    add_stimulus_controller(:label_wrapper, "select")

    add_css(:label_wrapper, "select")
    add_css(:start, "label")
    add_css(:end, "label")
  else
    add_css(:component, "select")
  end

  # Add HTML attributes for the select element
  add_html(:component,
    name: @name,
    id: @id,
    disabled: @disabled,
    required: @required
  )
end

#setup_placeholder ⇒ Object

Sets up the placeholder option that appears when no option is selected. Adds a disabled option with an empty value.



186
187
188
189
 
# File 'app/components/daisy/data_input/select_component.rb', line 186

def setup_placeholder
  set_tag_name(:placeholder, :option)
  add_html(:placeholder, value: "", disabled: true, selected: @value.blank?)
end