stimulus_plumbers 0.2.8 → 0.2.9

data/lib/stimulus_plumbers/components/combobox/autocomplete.rb

@@ -2,54 +2,50 @@
 
 module StimulusPlumbers
   module Components
-    module Combobox
-      # Renders a listbox popover body for autocomplete.
-      # Re-uses combobox-dropdown for selection/filtering; input-combobox relays
-      # the trigger input event via the combobox-dropdown outlet.
+    class Combobox
       class Autocomplete < Plumber::Base
-        include OptionGroup
-
-        DROPDOWN_CONTROLLER = "combobox-dropdown"
-        DROPDOWN_ACTION     = [
-          "click->combobox-dropdown#select",
-          "keydown->combobox-dropdown#navigate",
-          "combobox-dropdown:selected->input-combobox#onSelected"
-        ].join(" ").freeze
-
         def self.default_opts
-          {
-            popover: {
-              tag:      :div,
-              haspopup: "listbox",
-              data:     { controller: DROPDOWN_CONTROLLER, action: DROPDOWN_ACTION }
-            },
+          Dropdown.default_opts.deep_merge(
             trigger: { aria_autocomplete: "list", readonly: false }
-          }
+          )
         end
 
         def render(options: [], value: nil, label: nil, **_kwargs)
-          listbox_attrs = { role: "listbox", data: { "#{DROPDOWN_CONTROLLER}_target": "listbox" } }
-          listbox_attrs[:aria] = { label: label } if label
+          template.safe_join([listbox(options, value, label), loading, empty])
+        end
+
+        private
 
-          listbox = template.content_tag(:ul, **listbox_attrs) do
-            render_items(options, value: value)
+        def listbox(options, value, label)
+          attrs = merge_html_options(
+            { classes: theme.resolve(:combobox_listbox).fetch(:classes, "") },
+            { role: "listbox", data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "listbox" } }
+          )
+          attrs[:aria] = { label: label } if label
+
+          template.content_tag(:ul, **attrs) do
+            Options.new(template).render(options, value: value)
           end
+        end
 
-          loading = template.content_tag(
+        def loading
+          template.content_tag(
             :div,
-            hidden: "",
-            aria:   { live: "polite" },
-            data:   { "#{DROPDOWN_CONTROLLER}_target": "loading" }
+            **merge_html_options(
+              { classes: theme.resolve(:combobox_autocomplete_loading).fetch(:classes, "") },
+              { hidden: "", aria: { live: "polite" }, data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "loading" } }
+            )
           ) { "" }
+        end
 
-          empty = template.content_tag(
+        def empty
+          template.content_tag(
             :div,
-            hidden: "",
-            role:   "status",
-            data:   { "#{DROPDOWN_CONTROLLER}_target": "empty" }
+            **merge_html_options(
+              { classes: theme.resolve(:combobox_autocomplete_empty).fetch(:classes, "") },
+              { hidden: "", role: "status", data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "empty" } }
+            )
           ) { "No results" }
-
-          template.safe_join([listbox, loading, empty])
         end
       end
     end

data/lib/stimulus_plumbers/components/combobox/date.rb

@@ -2,12 +2,10 @@
 
 module StimulusPlumbers
   module Components
-    module Combobox
-      # Renders the date picker popover body: navigation + calendar grid.
-      # Wires ComboboxDateController; dispatches combobox-date:selected → InputComboboxController.
+    class Combobox
       class Date < Plumber::Base
-        PICKER_CONTROLLER   = "combobox-date"
-        CALENDAR_OUTLET_KEY = "#{PICKER_CONTROLLER.tr("-", "_")}_calendar_month_outlet".freeze
+        STIMULUS_CONTROLLER = "combobox-date"
+        CALENDAR_OUTLET = "#{STIMULUS_CONTROLLER}-calendar-month-outlet".freeze
 
         def self.default_opts
           {
@@ -19,17 +17,17 @@ module StimulusPlumbers
         def render(value: nil, **_kwargs)
           calendar_id = "combobox_date_#{SecureRandom.hex(8)}_calendar"
 
-          template.content_tag(
-            :div,
-            data: {
-              controller:        PICKER_CONTROLLER,
-              CALENDAR_OUTLET_KEY => "##{calendar_id}",
-              action:            [
-                "calendar-month-observer:selected->#{PICKER_CONTROLLER}#onSelected",
-                "#{PICKER_CONTROLLER}:selected->input-combobox#onSelected"
-              ].join(" ")
-            }.tap { |d| d["#{PICKER_CONTROLLER.tr("-", "_")}_date_value"] = value if value }
-          ) do
+          data = {
+            controller:          STIMULUS_CONTROLLER,
+            CALENDAR_OUTLET  => "##{calendar_id}",
+            action:              [
+              "calendar-month-observer:selected->#{STIMULUS_CONTROLLER}#onSelect",
+              "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect"
+            ].join(" "),
+            "#{STIMULUS_CONTROLLER}-date-value" => value
+          }.compact
+
+          template.content_tag(:div, data: data) do
             template.safe_join([navigation, calendar_month(id: calendar_id)])
           end
         end
@@ -39,12 +37,12 @@ module StimulusPlumbers
         def navigation
           DatePicker::Navigation.new(template).render(
             step:                "month",
-            stimulus_controller: PICKER_CONTROLLER
+            stimulus_controller: STIMULUS_CONTROLLER
           )
         end
 
         def calendar_month(**kwargs)
-          Calendar::Renderer.new(template).month(**kwargs)
+          Calendar.new(template).month(**kwargs)
         end
       end
     end

data/lib/stimulus_plumbers/components/combobox/dropdown.rb

@@ -2,17 +2,13 @@
 
 module StimulusPlumbers
   module Components
-    module Combobox
-      # Renders a static listbox popover body with combobox-dropdown controller.
-      # Supports flat options, descriptions, and option groups.
+    class Combobox
       class Dropdown < Plumber::Base
-        include OptionGroup
-
-        DROPDOWN_CONTROLLER = "combobox-dropdown"
-        DROPDOWN_ACTION     = [
-          "click->combobox-dropdown#select",
-          "keydown->combobox-dropdown#navigate",
-          "combobox-dropdown:selected->input-combobox#onSelected"
+        STIMULUS_CONTROLLER = "combobox-dropdown"
+        STIMULUS_ACTION     = [
+          "click->#{STIMULUS_CONTROLLER}#select",
+          "keydown->#{STIMULUS_CONTROLLER}#onNavigate",
+          "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect"
         ].join(" ").freeze
 
         def self.default_opts
@@ -20,20 +16,21 @@ module StimulusPlumbers
             popover: {
               tag:      :div,
               haspopup: "listbox",
-              data:     { controller: DROPDOWN_CONTROLLER, action: DROPDOWN_ACTION }
+              data:     { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION }
             }
           }
         end
 
         def render(options: [], value: nil, label: nil, **_kwargs)
-          listbox_attrs = { role: "listbox", data: { "#{DROPDOWN_CONTROLLER}_target": "listbox" } }
+          listbox_attrs = merge_html_options(
+            { classes: theme.resolve(:combobox_listbox).fetch(:classes, "") },
+            { role: "listbox", data: { "#{STIMULUS_CONTROLLER}_target": "listbox" } }
+          )
           listbox_attrs[:aria] = { label: label } if label
 
-          listbox = template.content_tag(:ul, **listbox_attrs) do
-            render_items(options, value: value)
+          template.content_tag(:ul, **listbox_attrs) do
+            Options.new(template).render(options, value: value)
           end
-
-          template.safe_join([listbox])
         end
       end
     end

data/lib/stimulus_plumbers/components/combobox/options/option.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Options
+        class Option < Plumber::Base
+          def render(label:, value:, description: nil, disabled: false, selected: false)
+            aria = { selected: selected ? "true" : "false" }
+            aria[:disabled] = "true" if disabled
+
+            attrs = merge_html_options(
+              { classes: theme.resolve(:combobox_option, selected: selected, disabled: disabled).fetch(:classes, "") },
+              { role: "option", aria: aria, data: { value: value } }
+            )
+
+            template.content_tag(:li, **attrs) do
+              if description
+                template.safe_join(
+                  [
+                    template.content_tag(:span, label),
+                    template.content_tag(:span, description)
+                  ]
+                )
+              else
+                label
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/combobox/options/option_group.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Options
+        class OptionGroup < Plumber::Base
+          def render(label:, options:, value: nil)
+            attrs = merge_html_options(
+              { classes: theme.resolve(:combobox_option_group).fetch(:classes, "") },
+              { role: "group", aria: { label: label } }
+            )
+
+            template.content_tag(:li, **attrs) do
+              template.safe_join(
+                [
+                  template.content_tag(:span, label, aria: { hidden: "true" }),
+                  template.content_tag(:ul) do
+                    Options.new(template).render(options, value: value)
+                  end
+                ]
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/combobox/options.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Options < Plumber::Base
+        def render(items, value: nil, &block)
+          @selected_value = value.to_s
+          template.safe_join(items.filter_map { |item| render_item(item, &block) })
+        end
+
+        private
+
+        def render_item(item, &block)
+          attrs = normalize_item(item)
+          return nil if attrs.nil?
+
+          if attrs.key?(:optgroup)
+            block ? block.call(attrs) : OptionGroup.new(template).render(**attrs[:optgroup], value: @selected_value)
+          else
+            block ? block.call(attrs) : Option.new(template).render(**attrs)
+          end
+        end
+
+        def normalize_item(item)
+          case item
+          when Hash  then normalize_hash(item)
+          when Array then normalize_array(item)
+          else
+            StimulusPlumbers::Logger.warn("Options#normalize_item: unrecognized item type #{item.class}, skipping")
+            nil
+          end
+        end
+
+        def normalize_hash(item)
+          if item.key?(:options)
+            { optgroup: { label: item[:label], options: item[:options] } }
+          else
+            normalize_option(item[:label], item[:value].to_s, item)
+          end
+        end
+
+        def normalize_array(item)
+          normalize_option(item[0], item[1].to_s, item[2] || {})
+        end
+
+        def normalize_option(label, value, attrs)
+          {
+            label:       label,
+            value:       value,
+            selected:    @selected_value == value,
+            disabled:    attrs[:disabled] || false,
+            description: attrs[:description]
+          }
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/combobox/popover.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Popover < Plumber::Base
+        def render(stimulus_controller:, id:, tag: :div, role: nil, label: nil, content: nil, data: {}, **_rest, &block)
+          base_data = { "#{stimulus_controller}_target": "popover" }
+
+          attrs = { id: id, hidden: "", data: merge_data_options(base_data, data.symbolize_keys) }
+          attrs[:role] = role if role
+          attrs[:aria] = { label: label } if label
+
+          html_content = block_given? ? template.capture(&block) : content
+          template.content_tag(tag, **attrs) { html_content }
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/combobox/time/drum.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Time
+        class Drum < Plumber::Base
+          def render(stimulus_controller:, target:, label:, items:, selected: nil)
+            template.content_tag(
+              :ul,
+              **merge_html_options(
+                { classes: theme.resolve(:combobox_listbox).fetch(:classes, "") },
+                {
+                  role:     "listbox",
+                  tabindex: "0",
+                  aria:     { label: label },
+                  data:     { "#{stimulus_controller}_target": target }
+                },
+                { data: { action: "click->#{stimulus_controller}#select keydown->#{stimulus_controller}#onNavigate" } }
+              )
+            ) do
+              template.safe_join(
+                items.map do |text, value|
+                  Options::Option.new(template).render(
+                    label:    text,
+                    value:    value,
+                    selected: value.to_s == selected.to_s
+                  )
+                end
+              )
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/combobox/time.rb

@@ -2,11 +2,9 @@
 
 module StimulusPlumbers
   module Components
-    module Combobox
-      # Renders an iOS-style drum/wheel time picker as the popover body.
-      # Wires ComboboxTimeController; dispatches combobox-time:selected → InputComboboxController.
+    class Combobox
       class Time < Plumber::Base
-        PICKER_CONTROLLER = "combobox-time"
+        STIMULUS_CONTROLLER = "combobox-time"
 
         def self.default_opts
           {
@@ -21,10 +19,13 @@ module StimulusPlumbers
 
           template.content_tag(
             :div,
-            data: {
-              controller: PICKER_CONTROLLER,
-              action:     "#{PICKER_CONTROLLER}:selected->input-combobox#onSelected"
-            }
+            **merge_html_options(
+              { classes: theme.resolve(:combobox_time).fetch(:classes, "") },
+              { data: { controller: STIMULUS_CONTROLLER,
+                        action:     "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect"
+}
+}
+            )
           ) do
             template.safe_join(drums)
           end
@@ -39,7 +40,13 @@ module StimulusPlumbers
         end
 
         def hour_drum
-          drum.render(target: "hour", label: "Hour", items: hour_items, selected: current_hour)
+          drum.render(
+            stimulus_controller: STIMULUS_CONTROLLER,
+            target:              "hour",
+            label:               "Hour",
+            items:               hour_items,
+            selected:            current_hour
+          )
         end
 
         def minute_drum
@@ -48,14 +55,24 @@ module StimulusPlumbers
             [s, s]
           end
           selected = @time ? snap_minute(@time.min).to_s.rjust(2, "0") : nil
-          drum.render(target: "minute", label: "Minute", items: items, selected: selected)
+          drum.render(
+            stimulus_controller: STIMULUS_CONTROLLER,
+            target:              "minute",
+            label:               "Minute",
+            items:               items,
+            selected:            selected
+          )
         end
 
         def period_drum
-          selected = if @time
-                       @time.hour < 12 ? "AM" : "PM"
-                     end
-          drum.render(target: "period", label: "Period", items: [%w[AM AM], %w[PM PM]], selected: selected)
+          selected = @time && (@time.hour < 12 ? "AM" : "PM")
+          drum.render(
+            stimulus_controller: STIMULUS_CONTROLLER,
+            target:              "period",
+            label:               "Period",
+            items:               [%w[AM AM], %w[PM PM]],
+            selected:            selected
+          )
         end
 
         def hour_items
@@ -87,7 +104,7 @@ module StimulusPlumbers
         end
 
         def drum
-          TimePicker::Renderer.new(template)
+          @drum ||= Time::Drum.new(template)
         end
 
         def parse_time(value)

data/lib/stimulus_plumbers/components/combobox/trigger.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Trigger < Plumber::Base
+        def render(
+          stimulus_controller:,
+          popover_id:,
+          haspopup:,
+          readonly: true,
+          aria_autocomplete: nil,
+          aria_label: nil,
+          data: {},
+          **_rest
+        )
+          base_data = {
+            "#{stimulus_controller}_target": "trigger",
+            input_format_target:             "input",
+            action:                          "focus->#{stimulus_controller}#open keydown.esc->#{stimulus_controller}#close"
+          }
+
+          aria = { haspopup: haspopup, expanded: "false", controls: popover_id }
+          aria[:autocomplete] = aria_autocomplete if aria_autocomplete
+          aria[:label]        = aria_label        if aria_label
+
+          template.tag.input(
+            type:     "text",
+            readonly: (readonly ? true : nil),
+            role:     "combobox",
+            aria:     aria,
+            data:     merge_data_options(base_data, data.symbolize_keys)
+          )
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/combobox.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox < Plumber::Base
+      STIMULUS_CONTROLLER = "input-combobox"
+      FORMAT_CONTROLLER   = "input-format"
+      FORMAT_ACTION       = "input-combobox:changed->input-format#format"
+
+      def render(base_id:, options: {}, **kwargs)
+        popover_id    = "#{base_id}_popover"
+        initial_value = options.dig(:input, :value)
+
+        base_data = {
+          controller: "#{STIMULUS_CONTROLLER} #{FORMAT_CONTROLLER}",
+          action:     FORMAT_ACTION
+        }
+        base_data[:input_combobox_value_value] = initial_value if initial_value.present?
+
+        html_options = merge_html_options({ data: base_data }, kwargs)
+
+        template.content_tag(:div, **html_options) do
+          template.safe_join(
+            [
+              trigger(popover_id, options),
+              hidden_input(options.fetch(:input, {})),
+              popover(popover_id, options)
+            ]
+          )
+        end
+      end
+
+      def trigger(popover_id, options)
+        haspopup = options.dig(:popover, :haspopup) || options.dig(:popover, :role) || "dialog"
+        Combobox::Trigger.new(template).render(
+          stimulus_controller: STIMULUS_CONTROLLER,
+          popover_id:          popover_id,
+          haspopup:            haspopup,
+          **options.fetch(:trigger, {})
+        )
+      end
+
+      def popover(popover_id, options)
+        Combobox::Popover.new(template).render(
+          stimulus_controller: STIMULUS_CONTROLLER,
+          id:                  popover_id,
+          **options.fetch(:popover, {})
+        )
+      end
+
+      private
+
+      def hidden_input(opts)
+        data = { "#{STIMULUS_CONTROLLER}_target": "value" }.merge(opts.fetch(:data, {}))
+        template.tag.input(type: "hidden", name: opts[:name], value: opts[:value], data: data)
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/date_picker/navigator.rb

@@ -20,7 +20,7 @@ module StimulusPlumbers
         private
 
         def icon(icon_options)
-          Icon::Renderer.new(template).icon(
+          Icon.new(template).render(
             classes: theme.resolve(:calendar_navigation_navigator_icon).fetch(:classes, ""),
             **icon_options
           )

data/lib/stimulus_plumbers/components/icon.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Icon < Plumber::Base
+      ICONS = {
+        "arrow-left"  => "M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18",
+        "arrow-right" => "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3",
+        "arrow-up"    => "M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18",
+        "arrow-down"  => "M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
+      }.freeze
+
+      def render(name:, **kwargs)
+        html_options = merge_html_options(
+          { classes: theme.resolve(:icon).fetch(:classes, "") },
+          kwargs
+        )
+
+        if ICONS[name]
+          svg_icon(ICONS[name], html_options)
+        else
+          template.content_tag(:span, nil, **html_options)
+        end
+      end
+
+      private
+
+      def svg_icon(path, html_options)
+        template.content_tag(
+          :svg,
+          xmlns:          "http://www.w3.org/2000/svg",
+          fill:           "none",
+          viewBox:        "0 0 24 24",
+          width:          "24",
+          height:         "24",
+          "stroke-width": "1.5",
+          stroke:         "currentColor",
+          **html_options
+        ) do
+          template.tag.path(
+            "stroke-linecap":  "round",
+            "stroke-linejoin": "round",
+            d:                 path
+          )
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/popover/builder.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Popover
+      class Builder
+        attr_reader :activator_html, :content_html
+
+        def initialize(template)
+          @template = template
+          @activator_html = "".html_safe
+          @content_html   = "".html_safe
+        end
+
+        def activator(&block)
+          @activator_html = @template.capture(&block)
+        end
+
+        def content(&block)
+          @content_html = @template.capture(&block)
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/popover.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Popover < Plumber::Base
+      def render(interactive: true, **kwargs, &block)
+        html_options = merge_html_options(
+          { classes: theme.resolve(:popover).fetch(:classes, "") },
+          kwargs
+        )
+
+        builder = Popover::Builder.new(template)
+        template.capture(builder, &block)
+
+        template.content_tag(:div, **html_options) do
+          wrapped_content = if interactive
+                              template.content_tag(:template, builder.content_html)
+                            else
+                              builder.content_html
+                            end
+          template.safe_join([builder.activator_html, wrapped_content])
+        end
+      end
+    end
+  end
+end