loco_motion-rails 0.4.0 → 0.5.0

data/app/components/daisy/data_input/select_component.html.haml

@@ -1,15 +1,27 @@
-= part(:component) do
-  - if @placeholder_text
-    = part(:placeholder) do
-      = @placeholder_text
-
-  - if options?
-    - options.each do |option|
-      - option.set_loco_parent(component_ref)
-      = option.call
-  - elsif default_options.present?
-    - default_options.each do |option|
-      - option.set_loco_parent(component_ref)
-      = render(option)
-  - elsif content?
-    = content
+- if has_any_label?
+  = part(:label_wrapper) do
+    - if has_start_label?
+      - if start?
+        = start
+      - else
+        = part(:start) do
+          = @start
+
+    - if has_floating_label?
+      - if floating?
+        = floating
+      - else
+        = part(:floating) do
+          = @floating
+
+    = render_component
+
+    - if has_end_label?
+      - if end?
+        = self.send(:end)
+      - else
+        = part(:end) do
+          = @end
+
+- else
+  = render_component

data/app/components/daisy/data_input/select_component.rb

@@ -2,21 +2,46 @@
 
 #
 # The Select component provides a styled dropdown select input for forms.
-# It supports various styling options, including sizes, colors, bordered and ghost variants.
+# It supports various styling options, including sizes, colors, and variants.
+# Additionally, it supports labelable functionality with start, end, and
+# floating labels.
 #
-# @part placeholder The placeholder option element that is shown when no option is selected.
+# @note Select inputs have a border by default and a width of 20rem. Use
+#   `select-ghost` to remove the border.
+#
+# @part placeholder The placeholder option element that is shown when no option
+#   is selected.
+# @part label_wrapper The wrapper element for labels (when using
+#   start/end/floating labels).
+# @part start The element that contains the start label (appears before the
+#   select).
+# @part end The element that contains the end label (appears after the select).
+# @part floating The element that contains the floating label (appears floating
+#   above the select).
 #
 # @slot options+ Custom options to be rendered in the select.
+# @slot start Custom content for the start label.
+# @slot end Custom content for the end label.
+# @slot floating Custom content for the floating label.
 #
 # @loco_example Using simple strings for options
-#   = daisy_select(name: "size", css: "select-sm select-bordered", options: ["Small", "Medium", "Large"])
+#   = daisy_select(name: "size", css: "select-sm", options: ["Small", "Medium", "Large"])
 #
 # @loco_example Using a block to define options
 #   = daisy_select(name: "color", css: "select-primary") do |select|
 #     - select.with_option(value: "red", label: "Red")
 #     - select.with_option(value: "green", label: "Green")
 #     - select.with_option(value: "blue", label: "Blue")
+#
+# @loco_example With a start label
+#   = daisy_select(name: "color", start: "Select a color", options: ["Red", "Green", "Blue"])
+#
+# @loco_example With a floating label
+#   = daisy_select(name: "color", floating: "Color", options: ["Red", "Green", "Blue"])
+#
 class Daisy::DataInput::SelectComponent < LocoMotion::BaseComponent
+  include LocoMotion::Concerns::LabelableComponent
+
   class SelectOptionComponent < LocoMotion::BasicComponent
     attr_reader :value, :label, :selected, :disabled
 
@@ -64,7 +89,7 @@ class Daisy::DataInput::SelectComponent < LocoMotion::BaseComponent
 
   define_part :placeholder
 
-  attr_reader :name, :id, :value, :placeholder_text, :disabled, :required, :options_css, :options_html
+  attr_reader :name, :id, :value, :include_blank, :disabled, :required, :options_css, :options_html
 
   #
   # Initialize a new select component.
@@ -78,8 +103,8 @@ class Daisy::DataInput::SelectComponent < LocoMotion::BaseComponent
   # @option kws value [String, Symbol, Integer] The current value of the select input.
   #   Determines which option is selected on initial render.
   #
-  # @option kws placeholder [String] Optional placeholder text to display when no
-  #   option is selected. Appears as a disabled option at the top of the list.
+  # @option kws include_blank [Boolean] Whether to include a blank option at the
+  # top of the list.
   #
   # @option kws disabled [Boolean] Whether the select input is disabled. Defaults to
   #   false.
@@ -94,24 +119,32 @@ class Daisy::DataInput::SelectComponent < LocoMotion::BaseComponent
   #
   # @option kws options_html [Hash] HTML attributes to apply to each option.
   #
+  # @option kws option_label [Symbol] The key to use for the option label.
+  #
+  # @option kws option_value [Symbol] The key to use for the option value.
+  #
   def initialize(**kws)
     super(**kws)
 
     @name = config_option(:name)
     @id = config_option(:id)
     @value = config_option(:value)
-    @placeholder_text = config_option(:placeholder)
+    @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
 
   #
   # Sets up the component before rendering.
   #
   def before_render
+    super
+
     setup_component
     setup_placeholder
   end
@@ -119,10 +152,23 @@ class Daisy::DataInput::SelectComponent < LocoMotion::BaseComponent
   #
   # 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.
   #
   def setup_component
     set_tag_name(:component, :select)
-    add_css(: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,
@@ -152,8 +198,8 @@ class Daisy::DataInput::SelectComponent < LocoMotion::BaseComponent
     return [] unless @options_list
 
     options_list.map do |option|
-      value = option.is_a?(Hash) ? option[:value] : option
-      label = option.is_a?(Hash) ? option[:label] : option.to_s
+      value = extract_option_value(option)
+      label = extract_option_label(option, value)
 
       Daisy::DataInput::SelectComponent::SelectOptionComponent.new(
         value: value,
@@ -167,6 +213,102 @@ class Daisy::DataInput::SelectComponent < LocoMotion::BaseComponent
 
   private
 
+  # Extracts the value from an option using the configured @option_value key or method.
+  #
+  # @param option [Object] The option to extract the value from
+  # @return [Object] The extracted value
+  #
+  def extract_option_value(option)
+    if option.is_a?(Hash)
+      option[@option_value]
+    elsif option.respond_to?(@option_value)
+      option.public_send(@option_value)
+    else
+      option
+    end
+  end
+
+  # Extracts the label from an option using the configured @option_label key or method.
+  # Falls back to the value if no label can be extracted.
+  #
+  # @param option [Object] The option to extract the label from
+  # @param value [Object] The extracted value to use as fallback
+  # @return [String] The extracted label or string representation of the value
+  #
+  def extract_option_label(option, value)
+    if option.is_a?(Hash)
+      option[@option_label] || value.to_s
+    elsif option.respond_to?(@option_label)
+      option.public_send(@option_label)
+    else
+      value.to_s
+    end
+  end
+
+  # Alias for include_blank to match Ruby convention for boolean methods
+  def include_blank?
+    @include_blank
+  end
+
+  #
+  # Renders the select options based on the configuration.
+  # This method is used by the template to render options consistently.
+  #
+  # @return [String] The HTML for all options in the select.
+  #
+  def render_select_options
+    result = ""
+
+    # Add blank option if configured
+    if include_blank?
+      result += content_tag(:option, "", value: "")
+    end
+
+    # Add options from the block or default options
+    if options?
+      options.each do |option|
+        result += option.call
+      end
+    elsif default_options.present?
+      default_options.each do |option|
+        result += render(option)
+      end
+    end
+
+    result.html_safe
+  end
+
+  #
+  # Renders the component part with placeholder, options and content.
+  # This method is used by the template to render the select component consistently.
+  #
+  # @return [String] The HTML for the select component.
+  #
+  def render_component
+    part(:component) do
+      result = ""
+
+      # Add placeholder if provided
+      if @placeholder
+        result += part(:placeholder) do
+          @placeholder
+        end
+      end
+
+      # Add options
+      result += render_select_options
+
+      # Add content if present
+      if content?
+        result += (content || "")
+      end
+
+      result.html_safe
+    end
+  end
+
+  private
+
   #
   # Ensures the options list is always an array, even if a single option is provided.
   #

data/app/components/daisy/data_input/text_area_component.rb

@@ -5,6 +5,9 @@
 # It can be used standalone or with a form builder, and supports
 # various styling options and states.
 #
+# @note Text areas have a border by default. Use `textarea-ghost` to remove the
+#   border.
+#
 # @part component The main textarea element that users can type into.
 #
 # @loco_example Basic Usage
@@ -19,23 +22,23 @@
 # @loco_example With Specified Rows
 #   = daisy_text_area(name: "message", rows: 6)
 #
-# @loco_example With Border Style
-#   = daisy_text_area(name: "message", css: "textarea-bordered")
+# @loco_example Borderless Style
+#   = daisy_text_area(name: "message", css: "textarea-ghost")
 #
 # @loco_example Different Colors
 #   .flex.flex-col.gap-4
-#     = daisy_text_area(name: "primary", placeholder: "Primary", css: "textarea-primary textarea-bordered")
-#     = daisy_text_area(name: "secondary", placeholder: "Secondary", css: "textarea-secondary textarea-bordered")
-#     = daisy_text_area(name: "accent", placeholder: "Accent", css: "textarea-accent textarea-bordered")
+#     = daisy_text_area(name: "primary", placeholder: "Primary", css: "textarea-primary")
+#     = daisy_text_area(name: "secondary", placeholder: "Secondary", css: "textarea-secondary")
+#     = daisy_text_area(name: "accent", placeholder: "Accent", css: "textarea-accent")
 #
 # @loco_example Disabled TextArea
-#   = daisy_text_area(name: "message", disabled: true, css: "textarea-bordered")
+#   = daisy_text_area(name: "message", disabled: true)
 #
 # @loco_example Required TextArea
-#   = daisy_text_area(name: "message", required: true, css: "textarea-bordered")
+#   = daisy_text_area(name: "message", required: true)
 #
 # @loco_example Readonly TextArea
-#   = daisy_text_area(name: "message", readonly: true, value: "This content cannot be edited.", css: "textarea-bordered")
+#   = daisy_text_area(name: "message", readonly: true, value: "This content cannot be edited.")
 #
 class Daisy::DataInput::TextAreaComponent < LocoMotion::BaseComponent
   attr_reader :name, :id, :value, :placeholder, :rows, :cols, :disabled, :required, :readonly

data/app/components/daisy/data_input/text_input_component.html.haml

@@ -1,6 +1,27 @@
-= part(:component) do
-  = start if start?
+- if has_any_label?
+  = part(:label_wrapper) do
+    - if has_start_label?
+      - if start?
+        = start
+      - else
+        = part(:start) do
+          = @start
 
-  = part(:input)
+    - if has_floating_label?
+      - if floating?
+        = floating
+      - else
+        = part(:floating) do
+          = @floating
 
-  = end_content if end?
+    = part(:component)
+
+    - if has_end_label?
+      - if end?
+        = self.send(:end)
+      - else
+        = part(:end) do
+          = @end
+
+- else
+  = part(:component)

data/app/components/daisy/data_input/text_input_component.rb

@@ -5,13 +5,20 @@
 # It can be used standalone or with a form builder, and supports
 # various styling options including different types, sizes and variants.
 #
-# The component provides slots to add content before and after the input field,
-# making it easy to add icons, buttons, or other elements.
+# @note Input fields have a border by default and a width of 20rem. Use
+#   `input-ghost` to remove the border.
 #
-# @part input The actual input element that users can type into.
+# @part label_wrapper The wrapper element for labels (when using
+#   start/end/floating labels).
+# @part start The element that contains the start label (appears before the
+#   input).
+# @part end The element that contains the end label (appears after the input).
+# @part floating The element that contains the floating label (appears floating
+#   above the input).
 #
 # @slot start Content to display before the input field.
-# @slot end+ Content to display after the input field.
+# @slot end Content to display after the input field.
+# @slot floating Custom content for the floating label.
 #
 # @loco_example Basic Usage
 #   = daisy_text_input(name: "username", id: "username")
@@ -19,10 +26,22 @@
 # @loco_example With Placeholder
 #   = daisy_text_input(name: "email", id: "email", placeholder: "Enter your email")
 #
+# @loco_example Ghost Style (No Border)
+#   = daisy_text_input(name: "search", id: "search", css: "input-ghost")
+#
 # @loco_example Different Types
 #   = daisy_text_input(name: "password", id: "password", type: "password")
 #   = daisy_text_input(name: "email", id: "email", type: "email")
 #
+# @loco_example With Start Label
+#   = daisy_text_input(name: "username", id: "username", start: "Username:")
+#
+# @loco_example With End Label
+#   = daisy_text_input(name: "email", id: "email", end: "@example.com")
+#
+# @loco_example With Floating Label
+#   = daisy_text_input(name: "username", id: "username", floating: "Username")
+#
 # @loco_example With Icons
 #   = daisy_text_input(name: "search", placeholder: "Search...") do |text_input|
 #     - text_input.with_start do
@@ -39,12 +58,9 @@
 #   = daisy_text_input(name: "username", id: "username", disabled: true)
 #
 class Daisy::DataInput::TextInputComponent < LocoMotion::BaseComponent
-  define_part :input
+  include LocoMotion::Concerns::LabelableComponent
 
-  renders_one :start
-  renders_one :end
-
-  attr_reader :name, :id, :value, :placeholder, :type, :disabled, :required, :readonly
+  attr_reader :name, :id, :value, :type, :disabled, :required, :readonly
 
   #
   # Instantiate a new TextInput component.
@@ -57,8 +73,6 @@ class Daisy::DataInput::TextInputComponent < LocoMotion::BaseComponent
   #
   # @option kws value [String] The initial value of the text input.
   #
-  # @option kws placeholder [String] Placeholder text for the text input.
-  #
   # @option kws type [String] The type of input (text, password, email, etc.).
   #   Defaults to "text".
   #
@@ -77,19 +91,20 @@ class Daisy::DataInput::TextInputComponent < LocoMotion::BaseComponent
     @name = config_option(:name)
     @id = config_option(:id)
     @value = config_option(:value, nil)
-    @placeholder = config_option(:placeholder, 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
 
   #
   # Calls the {setup_component} method before rendering the component.
   #
   def before_render
+    super
+
     setup_component
-    setup_input
   end
 
   #
@@ -101,23 +116,17 @@ class Daisy::DataInput::TextInputComponent < LocoMotion::BaseComponent
   # placeholder, type, and states like disabled, required, and readonly.
   #
   def setup_component
-    set_tag_name(:component, :label)
+    set_tag_name(:component, :input)
 
-    add_css(:component, "input [:where(&)]:flex [:where(&)]:items-center [:where(&)]:gap-2")
-  end
+    if has_floating_label?
+      add_css(:label_wrapper, "floating-label input")
+    elsif has_start_label? || has_end_label?
+      add_css(:label_wrapper, "input")
+    else
+      add_css(:component, "input")
+    end
 
-  #
-  # Sets up the input part by configuring the tag name, CSS classes, and HTML
-  # attributes. Sets the tag to input with appropriate type and adds the grow
-  # styling to ensure the input expands to fill available space.
-  #
-  # This configures basic input attributes like name, id, value, placeholder,
-  # and states like disabled, required, and readonly.
-  #
-  def setup_input
-    set_tag_name(:input, :input)
-    add_css(:input, "[:where(&)]:grow")
-    add_html(:input, {
+    add_html(:component, {
       type: @type,
       name: @name,
       id: @id,
@@ -127,14 +136,7 @@ class Daisy::DataInput::TextInputComponent < LocoMotion::BaseComponent
       required: @required,
       readonly: @readonly
     })
-  end
 
-  # Returns the end section content.
-  #
-  # Since `end` is a reserved word in Ruby, we need to use a different method
-  # name in the template.
-  #
-  def end_content
-    self.end
+    add_html(:component, { onchange: "document.getElementById('#{@change}').value = this.value" }) if @change
   end
 end

data/app/components/daisy/data_input/toggle_component.rb

@@ -5,6 +5,15 @@
 # It can be used standalone or with a form builder, and provides a visual way
 # to toggle between two states (on/off).
 #
+# @part label_wrapper The wrapper element for labels (when using
+#   start/end/floating labels).
+# @part start The element that contains the start label (appears before the
+#   toggle).
+# @part end The element that contains the end label (appears after the toggle).
+#
+# @slot start Custom content for the start label.
+# @slot end Custom content for the end label.
+#
 # @loco_example Basic Usage
 #   = daisy_toggle(name: "notifications", id: "notifications")
 #
@@ -17,6 +26,9 @@
 # @loco_example Disabled Toggle
 #   = daisy_toggle(name: "disabled", id: "disabled", disabled: true)
 #
+# @loco_example With End Label (common for toggles)
+#   = daisy_toggle(name: "notifications", id: "notifications", end: "Enable notifications")
+#
 class Daisy::DataInput::ToggleComponent < Daisy::DataInput::CheckboxComponent
   #
   # Instantiate a new Toggle component.

data/app/components/daisy/feedback/alert_component.html.haml

@@ -1,7 +1,7 @@
 = part(:component) do
   - # If we have an icon, assume we want to wrap the content
   - if @icon.present?
-    = hero_icon(@icon, **rendered_html(:icon))
+    = render_icon
     = part(:content_wrapper) do
       = content
   - else

data/app/components/daisy/feedback/alert_component.rb

@@ -9,6 +9,12 @@
 # @part content_wrapper  [HTML] A wrapper for the main content of the alert.
 #   This allows for proper spacing and alignment with the icon.
 #
+# @option kws [String] :style (:default) The style of the alert.
+#   [:info, :success, :warning, :error, :default]
+# @option kws [Boolean] :soft (false) Use the soft style variant.
+# @option kws [Boolean] :outline (false) Use the outline style variant.
+# @option kws [Boolean] :dash (false) Use the dash style variant.
+#
 # @loco_example Basic Alert
 #   = daisy_alert do
 #     This is a standard alert message.
@@ -30,7 +36,77 @@
 #   = daisy_alert(icon: "exclamation-circle", css: "alert-error", icon_html: { variant: :outline }) do
 #     Error alert.
 #
+# @loco_example Default
+#   = daisy_alert do
+#     This is an default alert.
+#
+# @loco_example Info
+#   = daisy_alert(css: "alert-info") do
+#     This is an info alert.
+#
+# @loco_example Success
+#   = daisy_alert(css: "alert-success") do
+#     This is a success alert.
+#
+# @loco_example Warning
+#   = daisy_alert(css: "alert-warning") do
+#     This is a warning alert.
+#
+# @loco_example Error
+#   = daisy_alert(css: "alert-error") do
+#     This is an error alert.
+#
+# @loco_example Soft Info
+#   = daisy_alert(css: "alert-info alert-soft") do
+#     This is a soft info alert.
+#
+# @loco_example Soft Success
+#   = daisy_alert(css: "alert-success alert-soft") do
+#     This is a soft success alert.
+#
+# @loco_example Soft Warning
+#   = daisy_alert(css: "alert-warning alert-soft") do
+#     This is a soft warning alert.
+#
+# @loco_example Soft Error
+#   = daisy_alert(css: "alert-error alert-soft") do
+#     This is a soft error alert.
+#
+# @loco_example Outline Info
+#   = daisy_alert(css: "alert-info alert-outline") do
+#     This is an outline info alert.
+#
+# @loco_example Outline Success
+#   = daisy_alert(css: "alert-success alert-outline") do
+#     This is an outline success alert.
+#
+# @loco_example Outline Warning
+#   = daisy_alert(css: "alert-warning alert-outline") do
+#     This is an outline warning alert.
+#
+# @loco_example Outline Error
+#   = daisy_alert(css: "alert-error alert-outline") do
+#     This is an outline error alert.
+#
+# @loco_example Dash Info
+#   = daisy_alert(css: "alert-info alert-dash") do
+#     This is a dash info alert.
+#
+# @loco_example Dash Success
+#   = daisy_alert(css: "alert-success alert-dash") do
+#     This is a dash success alert.
+#
+# @loco_example Dash Warning
+#   = daisy_alert(css: "alert-warning alert-dash") do
+#     This is a dash warning alert.
+#
+# @loco_example Dash Error
+#   = daisy_alert(css: "alert-error alert-dash") do
+#     This is a dash error alert.
+#
 class Daisy::Feedback::AlertComponent < LocoMotion::BaseComponent
+  include LocoMotion::Concerns::IconableComponent
+
   define_parts :icon, :content_wrapper
 
   #
@@ -49,16 +125,24 @@ class Daisy::Feedback::AlertComponent < LocoMotion::BaseComponent
   #   `alert-info`, `alert-success`, `alert-warning`, or `alert-error` for
   #   different alert types.
   #
+  # @option kws style    [String] The style of the alert.
+  #   [:info, :success, :warning, :error, :default]
+  # @option kws soft     [Boolean] Use the soft style variant.
+  # @option kws outline  [Boolean] Use the outline style variant.
+  # @option kws dash     [Boolean] Use the dash style variant.
+  #
   def initialize(*args, **kws, &block)
     super
 
     @icon = config_option(:icon)
   end
 
+  def default_icon_size
+    "where:size-6"
+  end
+
   def before_render
     add_css(:component, "alert")
     add_html(:component, { role: "alert" })
-
-    add_css(:icon, "[:where(&)]:size-8")
   end
 end

data/app/components/daisy/feedback/loading_component.rb

@@ -20,7 +20,7 @@
 #   readability, but CSS classes must still use the `loading-*` prefix.
 #
 class Daisy::Feedback::LoadingComponent < LocoMotion::BaseComponent
-  prepend LocoMotion::Concerns::TippableComponent
+  include LocoMotion::Concerns::TippableComponent
 
   #
   # Creates a new Loading component.
@@ -41,10 +41,17 @@ class Daisy::Feedback::LoadingComponent < LocoMotion::BaseComponent
   end
 
   def before_render
-    add_css(:component, "loading")
+    setup_component
+    super
   end
-
+  
   def call
     part(:component)
   end
+  
+  private
+  
+  def setup_component
+    add_css(:component, "loading")
+  end
 end