Class: Daisy::DataInput::TextInputComponent

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

Overview

Note:

Input fields have a border by default and a width of 20rem. Use input-ghost to remove the border.

The TextInput component renders a DaisyUI styled text input field. It can be used standalone or with a form builder, and supports various styling options including different types, sizes and variants.

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) ⇒ TextInputComponent

Instantiate a new TextInput component.

Parameters:

  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • name (String) —

    The name attribute for the text input.

  • id (String) —

    The ID attribute for the text input.

  • value (String) —

    The initial value of the text input.

  • type (String) —

    The type of input (text, password, email, etc.). Defaults to "text".

  • disabled (Boolean) —

    Whether the text input is disabled. Defaults to false.

  • required (Boolean) —

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

  • readonly (Boolean) —

    Whether the text input is read-only. Defaults to false.

  • leading (String) —

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

  • trailing (String) —

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

  • floating (String) —

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

  • placeholder (String) —

    Placeholder text for the input. If not set and floating_placeholder is provided, that value is used instead.

  • 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.

  • change (String) —

    ID of an element whose value should be updated to match this input's value whenever it changes. Sets an onchange handler on the input; see #setup_component.



114
115
116
117
118
119
120
121
122
123
124
125
 
# File 'app/components/daisy/data_input/text_input_component.rb', line 114

def initialize(**kws)
  super

  @name = config_option(:name)
  @id = config_option(:id)
  @value = config_option(:value, nil)
  @type = config_option(:type, "text")
  @disabled = config_option(:disabled, false)
  @required = config_option(:required, false)
  @readonly = config_option(:readonly, false)
  @change = config_option(:change)
end

Instance Attribute Details

#disabled ⇒ Object (readonly)

Returns the value of attribute disabled.



67
68
69
 
# File 'app/components/daisy/data_input/text_input_component.rb', line 67

def disabled
  @disabled
end

#id ⇒ Object (readonly)

Returns the value of attribute id.



67
68
69
 
# File 'app/components/daisy/data_input/text_input_component.rb', line 67

def id
  @id
end

#name ⇒ Object (readonly)

Returns the value of attribute name.



67
68
69
 
# File 'app/components/daisy/data_input/text_input_component.rb', line 67

def name
  @name
end

#readonly ⇒ Object (readonly)

Returns the value of attribute readonly.



67
68
69
 
# File 'app/components/daisy/data_input/text_input_component.rb', line 67

def readonly
  @readonly
end

#required ⇒ Object (readonly)

Returns the value of attribute required.



67
68
69
 
# File 'app/components/daisy/data_input/text_input_component.rb', line 67

def required
  @required
end

#type ⇒ Object (readonly)

Returns the value of attribute type.



67
68
69
 
# File 'app/components/daisy/data_input/text_input_component.rb', line 67

def type
  @type
end

#value ⇒ Object (readonly)

Returns the value of attribute value.



67
68
69
 
# File 'app/components/daisy/data_input/text_input_component.rb', line 67

def value
  @value
end

Instance Method Details

#before_render ⇒ Object

Calls the #setup_component method before rendering the component.



130
131
132
133
134
 
# File 'app/components/daisy/data_input/text_input_component.rb', line 130

def before_render
  super

  setup_component
end

#setup_component ⇒ Object

Sets up the component by configuring the tag name, CSS classes, and HTML attributes. Sets the tag to input with appropriate type and adds the 'input' CSS class.

This configures various attributes of the text input including name, id, value, placeholder, type, and states like disabled, required, and readonly.



144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
 
# File 'app/components/daisy/data_input/text_input_component.rb', line 144

def setup_component
  set_tag_name(:component, :input)

  if has_floating_label?
    add_css(:label_wrapper, "floating-label input")
  elsif has_leading_label? || has_trailing_label?
    add_css(:label_wrapper, "input")
  else
    add_css(:component, "input")
  end

  add_html(:component, {
             type: @type,
             name: @name,
             id: @id,
             value: @value,
             placeholder: @placeholder,
             disabled: @disabled,
             required: @required,
             readonly: @readonly
           })

  add_html(:component, { onchange: "document.getElementById('#{@change}').value = this.value" }) if @change
end