loco_motion-rails 0.4.0 → 0.5.0

data/app/components/daisy/data_input/cally_input_controller.js

@@ -0,0 +1,235 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Controller for handling calendar input interactions.
+ * Manages the popover calendar UI and synchronization between input and calendar elements.
+ */
+export default class extends Controller {
+  static targets = ["calendar", "input", "popover"]
+
+  /**
+   * Initializes the controller and sets up event listeners.
+   * Binds all methods to ensure proper 'this' context.
+   *
+   * @returns {void}
+   */
+  connect() {
+
+    // Save the bound functions so we can remove them later
+    this.boundUpdateInput = this.updateInput.bind(this)
+    this.boundUpdateCalendar = this.updateCalendar.bind(this)
+    this.boundOpenCalendar = this.openCalendar.bind(this)
+    this.boundCloseCalendar = this.closeCalendar.bind(this)
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+    this.boundHandleToggle = this.handleToggle.bind(this)
+
+    // Bind all of our functions
+    this.calendarTarget.addEventListener("change", this.boundUpdateInput)
+    this.calendarTarget.addEventListener("blur", this.boundCloseCalendar)
+
+    this.inputTarget.addEventListener("change", this.boundUpdateCalendar)
+    this.inputTarget.addEventListener("keyup", this.boundUpdateCalendar)
+    this.inputTarget.addEventListener("click", this.boundOpenCalendar)
+    this.inputTarget.addEventListener("keydown", this.boundHandleKeydown)
+
+    this.popoverTarget.addEventListener("toggle", this.boundHandleToggle)
+  }
+
+  /**
+   * Cleans up event listeners when the controller is disconnected.
+   * Prevents memory leaks by removing all bound event handlers.
+   *
+   * @returns {void}
+   */
+  disconnect() {
+    this.calendarTarget.removeEventListener("change", this.boundUpdateInput)
+    this.calendarTarget.removeEventListener("blur", this.boundCloseCalendar)
+
+    this.inputTarget.removeEventListener("change", this.boundUpdateCalendar)
+    this.inputTarget.removeEventListener("keyup", this.boundUpdateCalendar)
+    this.inputTarget.removeEventListener("keydown", this.boundHandleKeydown)
+    this.inputTarget.removeEventListener("click", this.boundOpenCalendar)
+    this.popoverTarget.removeEventListener("toggle", this.boundHandleToggle)
+  }
+
+  /**
+   * Opens the calendar popover.
+   *
+   * @returns {void}
+   */
+  openCalendar() {
+    // Open the popover
+    this.popoverTarget.togglePopover(true)
+  }
+
+  /**
+   * Closes the calendar popover if the blur event is not related to calendar elements.
+   *
+   * @param {FocusEvent} event - The blur event object.
+   *
+   * @returns {void}
+   */
+  closeCalendar(event) {
+    // Don't close if we're still in the calendar elements
+    if (event?.relatedTarget && this.calendarTarget.contains(event.relatedTarget)) {
+      return
+    }
+
+    this.popoverTarget.togglePopover(false)
+  }
+
+  /**
+   * Opens the calendar if it is closed, or closes it if it is open.
+   *
+   * @returns {void}
+   */
+  toggleCalendar() {
+    this.popoverTarget.togglePopover()
+  }
+
+  /**
+   * Handles the popover toggle event.
+   * - When opening: Sets a zero-width space in empty inputs to prevent floating label flicker
+   * - When closing: Clears the single-space input to ensure proper floating label behavior
+   *
+   * @param {Event} event - The toggle event object with newState property
+   * @returns {void}
+   */
+  handleToggle(event) {
+    const hasFloatingLabel = this.inputTarget.parentElement.classList.contains("floating-label")
+    const isOpen = event.newState == 'open'
+
+    if (isOpen) {
+      // Make sure the calendar is visible
+      this.scrollCalendarIntoView()
+    }
+
+    if (hasFloatingLabel) {
+      const ZERO_WIDTH_SPACE = '\u200B'
+
+      if (isOpen) {
+        // Set the input to a zero-width space if it is empty to prevent a floating label
+        // flicker when the calendar loses focus while setting the date
+        if (this.inputTarget.value == null || this.inputTarget.value === '') {
+          this.inputTarget.value = ZERO_WIDTH_SPACE;
+        }
+      } else {
+        // Unset the zero-width space input on close so the floating label works again
+        if (this.inputTarget.value === ZERO_WIDTH_SPACE) {
+          this.inputTarget.value = null
+        }
+      }
+    }
+  }
+
+  /**
+   * Ensures the calendar popover is visible within the viewport.
+   *
+   * If the popover extends beyond the viewport edges, scrolls the window to
+   * bring it into view adding any data-auto-scroll-padding.
+   *
+   * @returns {void}
+   */
+  scrollCalendarIntoView() {
+    const rect = this.popoverTarget.getBoundingClientRect()
+    const autoScrollPadding = parseInt(this.popoverTarget.dataset.autoScrollPadding, 10)
+    const padding = isNaN(autoScrollPadding) ? 0 : autoScrollPadding
+
+    if (rect.bottom > window.innerHeight) {
+      window.scrollBy({ top: rect.bottom - window.innerHeight + padding, behavior: 'smooth' })
+    } else if (rect.top < 0) {
+      window.scrollBy({ top: rect.top - padding, behavior: 'smooth' })
+    }
+  }
+
+  /**
+   * Updates the input value from the calendar and closes the popover.
+   * Synchronizes the input field with the selected date.
+   *
+   * @returns {void}
+   */
+  updateInput() {
+    // Update the input value and close the popover
+    this.inputTarget.value = this.calendarTarget.value
+    this.closeCalendar()
+  }
+
+  /**
+   * Handles keyboard navigation for the calendar input.
+   * - SPACE: Toggles the popover
+   * - ENTER: Closes an open popover
+   * - ARROW DOWN / ARROW UP: Opens the popover and focuses the calendar
+   *
+   * @param {KeyboardEvent} event - The keyboard event object.
+   *
+   * @returns {void}
+   */
+  handleKeydown(event) {
+    const hasModifierKeys = event.ctrlKey || event.shiftKey || event.altKey || event.metaKey;
+    const isOpen = this.popoverTarget.matches(':popover-open')
+
+    //
+    // SPACE - Toggles the popover.
+    //
+    if (event.key === ' ' || event.code === 'Space') {
+      event.preventDefault()
+
+      this.toggleCalendar()
+    }
+
+    //
+    // ENTER - Closes an open popover
+    //
+    else if (isOpen && (event.key === 'Enter' || event.code === 'Enter')) {
+      // Stop the enter key from triggering the form submission
+      event.preventDefault()
+
+      this.closeCalendar()
+    }
+
+    //
+    // ARROW DOWN / ARROW UP - Opens the popover and focuses the calendar
+    //
+    else if ((event.key === 'ArrowDown' || event.code === 'ArrowUp') && !hasModifierKeys) {
+      event.preventDefault()
+
+      // If the calendar is not already open, open it
+      if (!isOpen) {
+        this.openCalendar()
+      }
+
+      // Focus the calendar element
+      this.calendarTarget.focus()
+
+      // Forward the keydown event to the calendar
+      const forwardedEvent = new KeyboardEvent('keydown', {
+        key: event.key,
+        code: event.code,
+        bubbles: true,
+        cancelable: true,
+      })
+
+      // Dispatch the forwarded event to the calendar
+      this.calendarTarget.dispatchEvent(forwardedEvent)
+    }
+  }
+
+  /**
+   * Updates the calendar's value based on the input field.
+   * Only updates if the input contains a valid ISO 8601 date.
+   *
+   * @returns {void}
+   */
+  updateCalendar() {
+    // Only update the calendar if we have a full / valid ISO 8601 date
+    let newDate = this.inputTarget.value
+
+    if (newDate.length !== 10 || new Date(newDate).toString() === "Invalid Date") {
+      return
+    }
+
+    // Set the calendar value and focused-date attributes
+    this.calendarTarget.value = newDate
+    this.calendarTarget.setAttribute('focused-date', newDate)
+  }
+}

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

@@ -0,0 +1,20 @@
+- if has_any_label?
+  = part(:label_wrapper) do
+    - if has_start_label?
+      - if start?
+        = start
+      - else
+        = part(:start) do
+          = @start
+
+    = 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/checkbox_component.rb

@@ -5,6 +5,15 @@
 # It can be used standalone or with a form builder, and supports various styling
 # options including toggle mode for switch-like appearance.
 #
+# @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
+#   checkbox).
+# @part end The element that contains the end label (appears after the checkbox).
+#
+# @slot start Custom content for the start label.
+# @slot end Custom content for the end label.
+#
 # @loco_example Basic Usage
 #   = daisy_checkbox(name: "accept", id: "accept")
 #
@@ -17,7 +26,12 @@
 # @loco_example Disabled Checkbox
 #   = daisy_checkbox(name: "accept", id: "accept", disabled: true)
 #
+# @loco_example With End Label (common for checkboxes)
+#   = daisy_checkbox(name: "terms", id: "terms", end: "I agree to the terms and conditions")
+#
 class Daisy::DataInput::CheckboxComponent < LocoMotion::BaseComponent
+  include LocoMotion::Concerns::LabelableComponent
+
   attr_reader :name, :id, :value, :checked, :toggle, :disabled, :required
 
   #
@@ -60,9 +74,16 @@ class Daisy::DataInput::CheckboxComponent < LocoMotion::BaseComponent
   # Calls the {setup_component} method before rendering the component.
   #
   def before_render
+    super
+
+    setup_labels
     setup_component
   end
 
+  def setup_labels
+    add_css(:label_wrapper, "label") if has_any_label?
+  end
+
   #
   # Sets up the component by configuring the tag name, CSS classes, and HTML
   # attributes.
@@ -82,11 +103,4 @@ class Daisy::DataInput::CheckboxComponent < LocoMotion::BaseComponent
       required: @required
     })
   end
-
-  #
-  # Renders the component inline with no additional whitespace.
-  #
-  def call
-    part(:component)
-  end
 end

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

@@ -0,0 +1,8 @@
+= part(:component) do
+  - if legend?
+    = legend
+  - elsif @simple_legend
+    = part(:legend) { @simple_legend }
+
+  -# Render the main content passed to the component block
+  = content

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Daisy
+  module DataInput
+    # Renders a fieldset element, optionally with a legend, to group
+    # related form controls or content.
+    #
+    # @loco_example Basic fieldset
+    #   = daisy_fieldset do
+    #     Content inside fieldset
+    #
+    # @loco_example Fieldset with legend slot
+    #   = daisy_fieldset do |fieldset|
+    #     - fieldset.with_legend { "My Legend" }
+    #
+    #     Content inside fieldset
+    #
+    # @loco_example Fieldset with legend argument
+    #   = daisy_fieldset(legend: "My Legend") do
+    #     Content inside fieldset
+    #
+    class FieldsetComponent < LocoMotion::BaseComponent
+      self.component_name = :fieldset
+
+      define_parts :legend
+
+      # The legend (title) for the fieldset. Renders a `<legend>` tag.
+      # Can be provided as a slot or via the `legend` argument.
+      renders_one :legend, LocoMotion::BasicComponent.build(tag_name: :legend, css: "fieldset-legend")
+
+      # @param legend [String] Optional simple text for the legend.
+      #   Ignored if the `legend` slot is used.
+      def initialize(legend: nil, **kws)
+        @simple_legend = legend
+
+        super(**kws)
+      end
+
+      def before_render
+        setup_component
+
+        super
+      end
+
+      private
+
+      # Sets up default tags and classes for the component and its parts.
+      def setup_component
+        set_tag_name(:component, :fieldset)
+        set_tag_name(:legend, :legend)
+
+        add_css(:legend, "fieldset-legend")
+        add_css(:component, "fieldset")
+      end
+    end
+  end
+end

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

@@ -5,6 +5,9 @@
 # It can be used standalone or with a form builder, and supports
 # various styling options including different sizes and variants.
 #
+# @note File inputs have a border by default. Use `file-input-ghost` to remove
+#   the border.
+#
 # @loco_example Basic Usage
 #   = daisy_file_input(name: "document", id: "document")
 #
@@ -14,6 +17,9 @@
 # @loco_example With Multiple Files
 #   = daisy_file_input(name: "documents[]", id: "documents", multiple: true)
 #
+# @loco_example Ghost Style (No Border)
+#   = daisy_file_input(name: "document", id: "document", css: "file-input-ghost")
+#
 # @loco_example Disabled File Input
 #   = daisy_file_input(name: "document", id: "document", disabled: true)
 #

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

@@ -0,0 +1,3 @@
+= part(:component) do
+  = reset_button if reset_button?
+  = render_filter_options

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

@@ -0,0 +1,221 @@
+# frozen_string_literal: true
+
+#
+# The Filter component is a group of radio buttons where choosing one option
+# hides the others and shows a reset button.
+#
+# @loco_example Basic Usage
+#   = daisy_filter(name: "frameworks", options: ["Svelte", "Vue", "React"])
+#
+# @loco_example Using Hash Options
+#   = daisy_filter(name: "languages", options: [
+#     { label: "Ruby", value: "ruby" },
+#     { label: "JavaScript", value: "js" },
+#     { label: "Python", value: "py" }
+#   ])
+#
+# @loco_example Custom Styling
+#   = daisy_filter(name: "priorities", css: "items-center") do |f|
+#     - f.with_reset_button(css: "btn-accent btn-sm rounded-full")
+#     - f.with_option(label: "Low", css: "btn-outline btn-success")
+#     - f.with_option(label: "Medium", css: "btn-outline btn-warning")
+#     - f.with_option(label: "High", css: "btn-outline btn-error")
+#
+# @loco_example Within Form Builder
+#   = form_with(model: @post) do |form|
+#     = form.daisy_filter(:category, options: ["News", "Tech", "Sports"])
+#     = form.submit "Save", class: "btn btn-primary mt-4"
+#
+# @loco_example Form Builder With Block
+#   = form_with(model: @user) do |form|
+#     = form.daisy_filter(:role) do |f|
+#       - f.with_option(label: "Admin", value: "admin")
+#       - f.with_option(label: "Editor", value: "editor")
+#       - f.with_option(label: "Viewer", value: "viewer")
+#     = form.submit "Update", class: "btn btn-primary mt-4"
+#
+module Daisy
+  module DataInput
+    class FilterComponent < LocoMotion::BaseComponent
+      class FilterOptionComponent < Daisy::DataInput::RadioButtonComponent
+        #
+        # Initialize a new filter option component.
+        #
+        # @param kws [Hash] The keyword arguments for the component.
+        #
+        # @option kws label [String] The aria-label for the radio button.
+        #
+        def initialize(**kws)
+          super(**kws)
+
+          @label = config_option(:label)
+          @index = config_option(:index)
+          @skip_styling = true
+        end
+
+        #
+        # Setup the component before rendering.
+        #
+        def before_render
+          # Make sure to pull the default name from the parent
+          @name = config_option(:name, loco_parent.name)
+          @id = config_option(:id, "#{loco_parent.id}_#{@index}")
+
+          # Call the parent setup first
+          super
+
+          # Add btn class for styling
+          add_css(:component, "btn")
+          add_html(:component, { id: @id })
+
+          # Add aria-label if specified
+          if @label.present?
+            add_html(:component, { "aria-label": @label })
+          end
+        end
+      end
+
+      class FilterResetComponent < Daisy::DataInput::RadioButtonComponent
+        #
+        # Initialize a new filter reset component.
+        #
+        # @param kws [Hash] The keyword arguments for the component.
+        #
+        # @option kws disabled [Boolean] Whether the reset button is disabled. Defaults to false.
+        #
+        def initialize(**kws)
+          super(**kws)
+
+          @skip_styling = true
+        end
+
+        #
+        # Setup the component before rendering.
+        #
+        def before_render
+          # Make sure to pull the default name from the parent
+          @name = config_option(:name, loco_parent.name)
+          @id = config_option(:id, "#{loco_parent.id}_reset")
+
+          # Call parent setup first
+          super
+
+          # Add square styling
+          add_css(:component, "where:btn where:btn-square filter-reset")
+
+          # Set type to reset
+          add_html(:component, { type: "radio", id: @id })
+        end
+      end
+
+      include ViewComponent::SlotableDefault
+
+      renders_one :reset_button, FilterResetComponent
+      renders_many :options, FilterOptionComponent
+
+      attr_reader :name, :id
+
+      #
+      # Initialize a new filter component.
+      #
+      # @param kws [Hash] The keyword arguments for the component.
+      #
+      # @option kws name [String] Required name attribute for the radio button group.
+      #
+      # @option kws options [Array] An array of options to display in the filter.
+      #   Can be an array of strings, symbols, or hashes with :label keys.
+      #
+      # @option kws value [String] The current value of the filter (for form integration).
+      #
+      def initialize(**kws)
+        super(**kws)
+
+        @name = config_option(:name)
+        @id = config_option(:id, SecureRandom.uuid)
+        @options_list = config_option(:options)
+        @value = config_option(:value)
+      end
+
+      #
+      # Setup the component before rendering.
+      #
+      def before_render
+        super
+
+        setup_component
+      end
+
+      def default_reset_button
+        FilterResetComponent.new(name: @name)
+      end
+
+      #
+      # Converts the options array into FilterOptionComponent instances.
+      # Handles both hash options (with label keys) and simple string/symbol options.
+      #
+      # @return [Array<FilterOptionComponent>] Array of option components or empty array if @options_list is nil.
+      #
+      def standard_options
+        return [] unless options_list
+
+        options_list.map.with_index do |option, index|
+          label = option.is_a?(Hash) ? option[:label] : option.to_s
+          value = option.is_a?(Hash) ? option[:value] : option
+
+          # Check if this option should be selected based on the component's value
+          checked = @value.present? && @value.to_s == value.to_s
+
+          Daisy::DataInput::FilterComponent::FilterOptionComponent.new(
+            loco_parent: component_ref,
+            name: @name,
+            label: label,
+            value: value,
+            checked: checked,
+            index: index.to_s  # Ensure index is a string
+          )
+        end
+      end
+
+      #
+      # Renders the filter 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 filter.
+      #
+      def render_filter_options
+        result = ""
+
+        if options?
+          options.each do |option|
+            result += render(option)
+          end
+        elsif standard_options.present?
+          standard_options.each do |option|
+            result += render(option)
+          end
+        end
+
+        result.html_safe
+      end
+
+      private
+
+      #
+      # Sets up the component by configuring the tag name, CSS classes, and HTML attributes.
+      #
+      def setup_component
+        # Add base component class
+        add_css(:component, "filter")
+      end
+
+      #
+      # Ensures the options list is always an array, even if a single option is provided.
+      #
+      # @return [Array] The list of options as an array.
+      #
+      def options_list
+        [@options_list].flatten.compact
+      end
+    end
+  end
+end

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

@@ -34,11 +34,11 @@ class Daisy::DataInput::LabelComponent < LocoMotion::BaseComponent
   # @option kws required [Boolean] Whether the label is for a required input.
   #   Defaults to false.
   #
-  def initialize(**kws)
+  def initialize(title = nil, **kws)
     super
 
     @for = config_option(:for)
-    @title = config_option(:title)
+    @title = config_option(:title, title)
     @required = config_option(:required, false)
   end
 

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

@@ -65,7 +65,7 @@ class Daisy::DataInput::RadioButtonComponent < LocoMotion::BaseComponent
   def setup_component
     set_tag_name(:component, :input)
 
-    add_css(:component, "radio")
+    add_css(:component, "radio") unless @skip_styling
 
     add_html(:component, {
       type: "radio",

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

@@ -3,11 +3,9 @@
 
   - if items?
     - items.each do |item|
-      - item.set_loco_parent(component_ref)
       = item
   - elsif content?
     = content
   - elsif star_items.present?
     - star_items.each do |item|
-      - item.set_loco_parent(component_ref)
       = render(item)

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

@@ -30,7 +30,7 @@ class Daisy::DataInput::RatingComponent < LocoMotion::BaseComponent
     #
     def before_render
       set_tag_name(:component, :input)
-      add_html(:component, { name: loco_parent&.name, type: "radio" })
+      add_html(:component, { name: loco_parent.name, type: "radio" })
     end
 
     #
@@ -120,7 +120,8 @@ class Daisy::DataInput::RatingComponent < LocoMotion::BaseComponent
   def star_items
     (1..@max).map do |rating|
       input_attrs = {
-        css: ["[:where(&)]:mask [:where(&)]:mask-star", @inputs_css].compact.join(" "),
+        loco_parent: component_ref,
+        css: ["where:mask where:mask-star", @inputs_css].compact.join(" "),
         html: {
           name: @name,
           value: rating,