Class: Daisy::DataInput::SelectComponent

Inherits:
LocoMotion::BaseComponent show all
Includes:
LocoMotion::Concerns::AriableComponent, 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 leading, trailing, 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_floating_label?, #has_leading_label?, #has_trailing_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

Methods included from LocoMotion::Concerns::InspectableComponent

#build_inspect_string

Constructor Details

#initialize(**kws) ⇒ SelectComponent

Initialize a new select component.

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 top of the list.

  • 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. Only styles options generated from the options: array (default_options); block-form with_option entries are unaffected.

  • options_html (Hash) —

    HTML attributes to apply to each option. Only applies to options generated from the options: array (default_options); block-form with_option entries are unaffected.

  • option_label (Symbol) —

    The key to use for the option label.

  • option_value (Symbol) —

    The key to use for the option value.

  • leading (String) —

    Text to display in the leading label position (before the select).

  • trailing (String) —

    Text to display in the trailing label position (after the select).

  • floating (String) —

    Text to display in the floating label position (above the select).

  • placeholder (String) —

    Text for the select's placeholder option. Pulls double duty: it's LabelableComponent's generic placeholder-text option (see floating_placeholder), and Select also renders it directly as the visible text of its own :placeholder <option> element (see #setup_placeholder).

  • floating_placeholder (String) —

    Convenience option that sets both floating and placeholder to the same value. Both floating and placeholder, if set explicitly, take precedence over this.



169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
 
# File 'app/components/daisy/data_input/select_component.rb', line 169

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.



109
110
111
 
# File 'app/components/daisy/data_input/select_component.rb', line 109

def disabled
  @disabled
end

#id ⇒ Object (readonly)

Returns the value of attribute id.



109
110
111
 
# File 'app/components/daisy/data_input/select_component.rb', line 109

def id
  @id
end

#include_blank ⇒ Object (readonly)

Returns the value of attribute include_blank.



109
110
111
 
# File 'app/components/daisy/data_input/select_component.rb', line 109

def include_blank
  @include_blank
end

#name ⇒ Object (readonly)

Returns the value of attribute name.



109
110
111
 
# File 'app/components/daisy/data_input/select_component.rb', line 109

def name
  @name
end

#options_css ⇒ Object (readonly)

Returns the value of attribute options_css.



109
110
111
 
# File 'app/components/daisy/data_input/select_component.rb', line 109

def options_css
  @options_css
end

#options_html ⇒ Object (readonly)

Returns the value of attribute options_html.



109
110
111
 
# File 'app/components/daisy/data_input/select_component.rb', line 109

def options_html
  @options_html
end

#required ⇒ Object (readonly)

Returns the value of attribute required.



109
110
111
 
# File 'app/components/daisy/data_input/select_component.rb', line 109

def required
  @required
end

#value ⇒ Object (readonly)

Returns the value of attribute value.



109
110
111
 
# File 'app/components/daisy/data_input/select_component.rb', line 109

def value
  @value
end

Instance Method Details

#before_render ⇒ Object

Sets up the component before rendering.



188
189
190
191
192
193
 
# File 'app/components/daisy/data_input/select_component.rb', line 188

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:



239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
 
# File 'app/components/daisy/data_input/select_component.rb', line 239

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.



200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
 
# File 'app/components/daisy/data_input/select_component.rb', line 200

def setup_component
  set_tag_name(:component, :select)

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

    add_css(:label_wrapper, "select")
    add_css(:leading, "label")
    add_css(:trailing, "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.



228
229
230
231
 
# File 'app/components/daisy/data_input/select_component.rb', line 228

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