Class: Daisy::DataInput::RatingComponent

Inherits:
LocoMotion::BaseComponent show all
Defined in:
app/components/daisy/data_input/rating_component.rb

Overview

The Rating component renders a DaisyUI styled rating input using radio buttons. It can be used standalone or with a form builder, allowing users to select a rating from 1 to a configurable maximum value. Supports customization of size, colors, and initial value.

Defined Under Namespace

Classes: RatingItemComponent

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

Instantiate a new Rating component.

Parameters:

  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • name (String) —

    The name attribute for the radio inputs.

  • value (Integer) —

    The current rating value.

  • max (Integer) —

    The maximum rating value (default: 5).

  • disabled (Boolean) —

    Whether the rating is disabled. Defaults to false. When disabled, users cannot interact with the rating control.

  • required (Boolean) —

    Whether the rating input is required for form validation. Defaults to false. Applied only to the first star's input (rating == 1); native radio-group validation still covers the whole group.

  • id (String) —

    The ID applied to the .rating container <div>, not to any individual radio input.

  • inputs_css (String) —

    CSS classes to apply to each rating input. Only styles the auto-generated star items; custom items slot content is unaffected.

  • inputs_html (Hash) —

    HTML attributes to apply to each rating input. Only applies to the auto-generated star items; custom items slot content is unaffected.



92
93
94
95
96
97
98
99
100
101
102
103
 
# File 'app/components/daisy/data_input/rating_component.rb', line 92

def initialize(**kws)
  super

  @name = config_option(:name)
  @value = config_option(:value)
  @max = config_option(:max, 5)
  @disabled = config_option(:disabled, false)
  @required = config_option(:required, false)
  @id = config_option(:id)
  @inputs_css = config_option(:inputs_css)
  @inputs_html = config_option(:inputs_html, {})
end

Instance Attribute Details

#disabled ⇒ Object (readonly)

Returns the value of attribute disabled.



60
61
62
 
# File 'app/components/daisy/data_input/rating_component.rb', line 60

def disabled
  @disabled
end

#id ⇒ Object (readonly)

Returns the value of attribute id.



60
61
62
 
# File 'app/components/daisy/data_input/rating_component.rb', line 60

def id
  @id
end

#inputs_css ⇒ Object (readonly)

Returns the value of attribute inputs_css.



60
61
62
 
# File 'app/components/daisy/data_input/rating_component.rb', line 60

def inputs_css
  @inputs_css
end

#inputs_html ⇒ Object (readonly)

Returns the value of attribute inputs_html.



60
61
62
 
# File 'app/components/daisy/data_input/rating_component.rb', line 60

def inputs_html
  @inputs_html
end

#max ⇒ Object (readonly)

Returns the value of attribute max.



60
61
62
 
# File 'app/components/daisy/data_input/rating_component.rb', line 60

def max
  @max
end

#name ⇒ Object (readonly)

Returns the value of attribute name.



60
61
62
 
# File 'app/components/daisy/data_input/rating_component.rb', line 60

def name
  @name
end

#required ⇒ Object (readonly)

Returns the value of attribute required.



60
61
62
 
# File 'app/components/daisy/data_input/rating_component.rb', line 60

def required
  @required
end

#value ⇒ Object (readonly)

Returns the value of attribute value.



60
61
62
 
# File 'app/components/daisy/data_input/rating_component.rb', line 60

def value
  @value
end

Instance Method Details

#before_render ⇒ Object

Calls the #setup_component and #setup_hidden_input methods before rendering the component. This prepares the rating container and creates a hidden input if needed.



110
111
112
113
114
115
 
# File 'app/components/daisy/data_input/rating_component.rb', line 110

def before_render
  setup_component
  setup_hidden_input

  super
end

#setup_component ⇒ Object

Sets up the component by configuring the tag name and CSS classes.



120
121
122
123
124
 
# File 'app/components/daisy/data_input/rating_component.rb', line 120

def setup_component
  set_tag_name(:component, :div)
  add_css(:component, "rating")
  add_html(:component, id: @id) if @id
end

#setup_hidden_input ⇒ Object

Sets up a hidden input so that the rating can start empty.



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

def setup_hidden_input
  set_tag_name(:hidden_input, :input)
  add_css(:hidden_input, "hidden")
  add_html(:hidden_input, { type: "radio", name: @name, value: nil, checked: @value.blank? })
end

#star_items ⇒ Object

Declares some default items to use if no custom items are provided.



138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
# File 'app/components/daisy/data_input/rating_component.rb', line 138

def star_items
  (1..@max).map do |rating|
    input_attrs = {
      loco_parent: component_ref,
      css: ["where:mask where:mask-star", @inputs_css].compact.join(" "),
      aria: { label: "#{rating} star" },
      html: {
        name: @name,
        value: rating,
        checked: @value == rating,
        required: @required && rating == 1,
        disabled: @disabled,
        **@inputs_html
      }
    }

    RatingItemComponent.new(**input_attrs)
  end
end