stimulus_plumbers 0.3.3 → 0.4.0

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Date
+        class Navigator < Plumber::Base
+          def render(...)
+            render_navigator(...)
+          end
+
+          private
+
+          def render_navigator(icon: nil, **kwargs, &block)
+            html_options = merge_html_options(
+              theme.resolve(:combobox_date_navigation_navigator),
+              kwargs
+            )
+            Components::Button.new(template).render(variant: :ghost, size: nil, icon_leading: icon, **html_options, &block)
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -5,52 +5,62 @@ module StimulusPlumbers
     class Combobox
       class Date < Plumber::Base
         STIMULUS_CONTROLLER = "combobox-date"
-        CALENDAR_OUTLET = "#{STIMULUS_CONTROLLER}-calendar-month-outlet".freeze
+        CALENDAR_OUTLET     = "#{STIMULUS_CONTROLLER}-calendar-month-outlet".freeze
+        STIMULUS_ACTION     = [
+          "calendar-observer:selected->#{STIMULUS_CONTROLLER}#onSelect",
+          "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect",
+          "#{STIMULUS_CONTROLLER}:selected->#{Components::Popover::STIMULUS_CONTROLLER}#closeOnSelect"
+        ].join(" ").freeze
 
-        def self.default_opts
-          {
-            input:   { data: { combobox_date_date_value: nil } },
-            popover: { label: "Picker", role: "dialog", tag: :div }
-          }
+        def self.calendar_id_for(panel_id)
+          [panel_id, "calendar"].compact.join("_")
         end
 
-        def self.calendar_id_for(popover_id)
-          [popover_id, "calendar"].compact.join("_")
-        end
+        module Metadata
+          module_function
 
-        def render(...)
-          render_date(...)
+          def haspopup = "dialog"
+          def popup_id_for(panel_id) = panel_id
+          def trigger_icon = "calendar"
+          def trigger_options = {}
+          def stimulus_data(_panel_id, _options) = { input_formatter_format_value: "date" }
         end
 
+        def render(...) = render_date(...)
+
         private
 
-        def render_date(value: nil, popover_id: nil)
-          calendar_id = self.class.calendar_id_for(popover_id)
+        def render_date(panel_attrs: {}, value: nil, label: "Picker", labelledby: nil)
+          calendar_id = self.class.calendar_id_for(panel_attrs[:id])
+
+          template.content_tag(
+            :div,
+            **merge_html_options(panel_attrs, dialog_attrs(value, calendar_id, label, labelledby))
+          ) do
+            template.safe_join([navigation, calendar(id: calendar_id)])
+          end
+        end
 
+        def dialog_attrs(value, calendar_id, label, labelledby)
           data = {
-            controller:          STIMULUS_CONTROLLER,
+            controller:      STIMULUS_CONTROLLER,
             CALENDAR_OUTLET  => "##{calendar_id}",
-            action:              [
-              "calendar-month-observer:selected->#{STIMULUS_CONTROLLER}#onSelect",
-              "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect"
-            ].join(" "),
+            action:          STIMULUS_ACTION,
             "#{STIMULUS_CONTROLLER}-date-value" => value
           }.compact
 
-          template.content_tag(:div, data: data) do
-            template.safe_join([navigation, calendar_month(id: calendar_id)])
-          end
+          { role: "dialog", aria: labelled_aria(label, labelledby: labelledby), data: data }
         end
 
         def navigation
-          DatePicker::Navigation.new(template).render(
+          Navigation.new(template).render(
             step:                "month",
             stimulus_controller: STIMULUS_CONTROLLER
           )
         end
 
-        def calendar_month(**kwargs)
-          Calendar.new(template).month(**kwargs)
+        def calendar(**kwargs)
+          Calendar.new(template).render(**kwargs)
         end
       end
     end

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

@@ -8,39 +8,42 @@ module StimulusPlumbers
         STIMULUS_ACTION     = [
           "click->#{STIMULUS_CONTROLLER}#select",
           "keydown->#{STIMULUS_CONTROLLER}#onNavigate",
-          "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect"
+          "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect",
+          "#{STIMULUS_CONTROLLER}:selected->#{Components::Popover::STIMULUS_CONTROLLER}#closeOnSelect"
         ].join(" ").freeze
 
-        def self.default_opts
-          {
-            popover: {
-              tag:      :div,
-              haspopup: "listbox",
-              data:     { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION }
-            }
-          }
-        end
+        module Metadata
+          module_function
 
-        def render(...)
-          render_dropdown(...)
+          def haspopup = "listbox"
+          def popup_id_for(panel_id) = panel_id
+          def trigger_icon = "chevron-down"
+          def trigger_options = {}
+          def stimulus_data(_panel_id, _options) = {}
         end
 
+        def render(...) = render_dropdown(...)
+
         private
 
-        def render_dropdown(options: [], value: nil, label: nil, labelledby: nil)
-          listbox_attrs = merge_html_options(
-            { classes: theme.resolve(:combobox_listbox).fetch(:classes, "") },
-            { role: "listbox", data: { "#{STIMULUS_CONTROLLER}_target": "listbox" } }
+        def render_dropdown(panel_attrs: {}, options: [], value: nil, label: nil, labelledby: nil)
+          template.content_tag(
+            :ul,
+            Options.new(template).render(options, value: value),
+            **listbox_attrs(panel_attrs: panel_attrs, label: label, labelledby: labelledby)
           )
-          if labelledby
-            listbox_attrs[:aria] = { labelledby: labelledby }
-          elsif label
-            listbox_attrs[:aria] = { label: label }
-          end
+        end
 
-          template.content_tag(:ul, **listbox_attrs) do
-            Options.new(template).render(options, value: value)
-          end
+        def listbox_attrs(panel_attrs: {}, label: nil, labelledby: nil)
+          merge_html_options(
+            panel_attrs,
+            theme.resolve(:combobox_listbox),
+            {
+              role: "listbox",
+              aria: labelled_aria(label, labelledby: labelledby),
+              data: { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION, combobox_dropdown_target: "listbox" }
+            }
+          )
         end
       end
     end

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

@@ -16,7 +16,7 @@ module StimulusPlumbers
             aria[:disabled] = "true" if disabled
 
             attrs = merge_html_options(
-              { classes: theme.resolve(:combobox_option, selected: selected, disabled: disabled).fetch(:classes, "") },
+              theme.resolve(:combobox_option, selected: selected, disabled: disabled),
               { role: "option", aria: aria, data: { value: value } }
             )
 

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

@@ -13,7 +13,7 @@ module StimulusPlumbers
 
           def render_option_group(label:, options:, value: nil)
             attrs = merge_html_options(
-              { classes: theme.resolve(:combobox_option_group).fetch(:classes, "") },
+              theme.resolve(:combobox_option_group),
               { role: "group", aria: { label: label } }
             )
 

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

@@ -15,7 +15,7 @@ module StimulusPlumbers
             template.content_tag(
               :ul,
               **merge_html_options(
-                { classes: theme.resolve(:combobox_listbox).fetch(:classes, "") },
+                theme.resolve(:combobox_listbox),
                 {
                   role:     "listbox",
                   tabindex: "0",

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

@@ -5,36 +5,50 @@ module StimulusPlumbers
     class Combobox
       class Time < Plumber::Base
         STIMULUS_CONTROLLER = "combobox-time"
-
-        def self.default_opts
-          {
-            popover: { label: "Picker", role: "dialog", tag: :div }
-          }
+        STIMULUS_ACTION     = [
+          "#{STIMULUS_CONTROLLER}:selected->#{Combobox::STIMULUS_CONTROLLER}#onSelect",
+          "#{STIMULUS_CONTROLLER}:selected->#{Components::Popover::STIMULUS_CONTROLLER}#closeOnSelect"
+        ].join(" ").freeze
+
+        module Metadata
+          module_function
+
+          def haspopup = "dialog"
+          def popup_id_for(panel_id) = panel_id
+          def trigger_icon = "clock"
+          def trigger_options = {}
+
+          def stimulus_data(_panel_id, options)
+            {
+              input_formatter_format_value:  "time",
+              input_formatter_options_value: { format: options.fetch(:format, :h12) }.to_json
+            }
+          end
         end
 
-        def render(...)
-          render_time(...)
-        end
+        def render(...) = render_time(...)
 
         private
 
-        def render_time(format: :h12, step: 1, value: nil)
+        def render_time(panel_attrs: {}, format: :h12, step: 1, value: nil, label: "Picker", labelledby: nil)
           @format = format
           @step   = [1, step.to_i].max
           @time   = parse_time(value)
 
-          template.content_tag(
-            :div,
-            **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
+          attrs = merge_html_options(
+            panel_attrs,
+            theme.resolve(:combobox_time),
+            dialog_attrs(label, labelledby)
+          )
+          template.content_tag(:div, **attrs) { template.safe_join(drums) }
+        end
+
+        def dialog_attrs(label, labelledby)
+          {
+            role: "dialog",
+            aria: labelled_aria(label, labelledby: labelledby),
+            data: { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION }
+          }
         end
 
         def drums
@@ -43,50 +57,35 @@ module StimulusPlumbers
           cols
         end
 
-        def hour_drum
+        def render_drum(target, label, items, selected)
           drum.render(
             stimulus_controller: STIMULUS_CONTROLLER,
-            target:              "hour",
-            label:               "Hour",
-            items:               hour_items,
-            selected:            current_hour
+            target:              target,
+            label:               label,
+            items:               items,
+            selected:            selected
           )
         end
 
+        def hour_drum
+          render_drum("hour", "Hour", hour_items, current_hour)
+        end
+
         def minute_drum
-          items = (0...60).step(@step).map do |m|
-            s = m.to_s.rjust(2, "0")
-            [s, s]
-          end
+          items    = (0...60).step(@step).map { |m| [m.to_s.rjust(2, "0")] * 2 }
           selected = @time ? snap_minute(@time.min).to_s.rjust(2, "0") : nil
-          drum.render(
-            stimulus_controller: STIMULUS_CONTROLLER,
-            target:              "minute",
-            label:               "Minute",
-            items:               items,
-            selected:            selected
-          )
+          render_drum("minute", "Minute", items, selected)
         end
 
         def period_drum
-          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
-          )
+          render_drum("period", "Period", [%w[AM AM], %w[PM PM]], @time && (@time.hour < 12 ? "AM" : "PM"))
         end
 
         def hour_items
           if @format == :h12
             (1..12).map { |h| [h.to_s, h.to_s] }
           else
-            (0..23).map do |h|
-              s = h.to_s.rjust(2, "0")
-              [s, s]
-            end
+            (0..23).map { |h| [h.to_s.rjust(2, "0")] * 2 }
           end
         end
 

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

@@ -4,6 +4,11 @@ module StimulusPlumbers
   module Components
     class Combobox
       class Trigger < Plumber::Base
+        STIMULUS_ACTION = [
+          "focus->#{Components::Popover::STIMULUS_CONTROLLER}#open",
+          "keydown.esc->#{Components::Popover::STIMULUS_CONTROLLER}#close"
+        ].join(" ").freeze
+
         def render(...)
           render_trigger(...)
         end
@@ -12,8 +17,7 @@ module StimulusPlumbers
 
         def render_trigger(
           stimulus_controller:,
-          popover_id:,
-          haspopup:,
+          popover:,
           readonly: true,
           aria: {},
           id: nil,
@@ -24,8 +28,7 @@ module StimulusPlumbers
         )
           input_html = render_input(
             stimulus_controller: stimulus_controller,
-            popover_id:          popover_id,
-            haspopup:            haspopup,
+            popover:             popover,
             readonly:            readonly,
             aria:                aria,
             id:                  id,
@@ -40,8 +43,7 @@ module StimulusPlumbers
 
         def render_input(
           stimulus_controller:,
-          popover_id:,
-          haspopup:,
+          popover:,
           readonly:,
           aria:,
           id:,
@@ -49,22 +51,21 @@ module StimulusPlumbers
           **kwargs
         )
           stimulus_data = {
+            popover_target:                  popover.dig(:data, :popover_target),
             "#{stimulus_controller}_target": "trigger",
             input_formatter_target:          "input",
-            action:                          "focus->#{stimulus_controller}#open keydown.esc->#{stimulus_controller}#close"
+            action:                          STIMULUS_ACTION
           }
 
-          trigger_aria = { haspopup: haspopup, expanded: "false", controls: popover_id }
-
           template.tag.input(
             **merge_html_options(
-              { classes: theme.resolve(:combobox_trigger).fetch(:classes, "") },
+              theme.resolve(:combobox_trigger),
               {
                 id:       id,
                 type:     "text",
                 readonly: (readonly ? true : nil),
                 role:     "combobox",
-                aria:     trigger_aria.deep_merge(aria),
+                aria:     popover.fetch(:aria, {}).deep_merge(aria),
                 data:     stimulus_data
               },
               { data: data },
@@ -82,7 +83,11 @@ module StimulusPlumbers
         end
 
         def render_trigger_icon(name)
-          Icon.new(template).render(name: name, aria: { hidden: "true" })
+          Components::Icon.new(template).render(
+            name:    name,
+            classes: theme.resolve(:combobox_trigger_icon).fetch(:classes, ""),
+            aria:    { hidden: "true" }
+          )
         end
       end
     end

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

@@ -4,33 +4,80 @@ module StimulusPlumbers
   module Components
     class Combobox
       class Typeahead < Plumber::Base
-        def self.default_opts
-          Dropdown.default_opts.deep_merge(
-            trigger: { aria: { autocomplete: "list" }, readonly: false }
+        def self.listbox_id_for(panel_id)
+          [panel_id, "listbox"].compact.join("_")
+        end
+
+        module Metadata
+          module_function
+
+          def haspopup = "listbox"
+          def popup_id_for(panel_id) = Typeahead.listbox_id_for(panel_id)
+          def trigger_icon = nil
+          def trigger_options = { readonly: false, aria: { autocomplete: "list" } }
+
+          def stimulus_data(panel_id, _options)
+            {
+              input_combobox_combobox_dropdown_outlet: "##{panel_id}",
+              action:                                  "input->#{Combobox::STIMULUS_CONTROLLER}#onInput"
+            }
+          end
+        end
+
+        def render(...) = render_typeahead(...)
+
+        private
+
+        def render_typeahead(panel_attrs: {}, options: [], value: nil, labelledby: nil, label: nil, url: nil)
+          template.content_tag(
+            :div,
+            template.safe_join([render_listbox(panel_attrs[:id], options, value, labelledby, label), loading, empty]),
+            **wrapper_attrs(panel_attrs: panel_attrs, url: url)
           )
         end
 
-        def render(options: [], value: nil, label: nil, labelledby: nil)
-          template.safe_join(
-            [
-              Dropdown.new(template).render(options: options, value: value, label: label, labelledby: labelledby),
-              loading,
-              empty
-            ]
+        def wrapper_attrs(panel_attrs: {}, url: nil)
+          merge_html_options(
+            panel_attrs,
+            {
+              data: {
+                controller:                  Dropdown::STIMULUS_CONTROLLER,
+                action:                      Dropdown::STIMULUS_ACTION,
+                combobox_dropdown_url_value: url
+              }.compact
+            }
           )
         end
 
-        private
+        def render_listbox(panel_id, options, value, labelledby, label)
+          template.content_tag(
+            :ul,
+            Options.new(template).render(options, value: value),
+            **merge_html_options(
+              theme.resolve(:combobox_listbox),
+              {
+                id:   self.class.listbox_id_for(panel_id),
+                role: "listbox",
+                aria: labelled_aria(label, labelledby: labelledby),
+                data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "listbox" }
+              }
+            )
+          )
+        end
 
         def loading
           template.content_tag(
             :div,
             **merge_html_options(
-              { classes: theme.resolve(:combobox_typeahead_loading).fetch(:classes, "") },
-              { hidden: "", aria: { live: "polite" }, data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "loading" } }
+              theme.resolve(:combobox_typeahead_loading),
+              { hidden: "", role: "status", data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "loading" } }
             )
           ) do
-            Icon.new(template).render(name: "spinner", classes: "size-(--sp-icon-size) animate-spin")
+            Components::Icon.new(template).render(
+              name:    "spinner",
+              classes: theme.resolve(:combobox_typeahead_loading_icon).fetch(:classes, ""),
+              aria:    { hidden: "true" }
+            )
           end
         end
 
@@ -38,10 +85,10 @@ module StimulusPlumbers
           template.content_tag(
             :div,
             **merge_html_options(
-              { classes: theme.resolve(:combobox_typeahead_empty).fetch(:classes, "") },
+              theme.resolve(:combobox_typeahead_empty),
               { hidden: "", role: "status", data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "empty" } }
             )
-          ) { "No results" }
+          ) { I18n.t("stimulus_plumbers.combobox.typeahead.empty", default: "No results") }
         end
       end
     end

data/lib/stimulus_plumbers/components/combobox.rb

@@ -7,60 +7,80 @@ module StimulusPlumbers
       FORMAT_CONTROLLER   = "input-formatter"
       FORMAT_ACTION       = "input-combobox:changed->input-formatter#format"
 
-      def self.popover_id_for(trigger_id)
-        [trigger_id, "popover"].compact.join("_")
-      end
+      def render(trigger: {}, input: {}, id: nil, label: nil, close_on_select: nil, **kwargs, &block)
+        trigger_opts = trigger.dup
+        builder      = resolve_builder(&block)
+        trigger_id   = id || trigger_opts.delete(:id) || template.sp_dom_id
+        panel_id     = Popover.panel_id_for(trigger_id)
 
-      def render(...)
-        render_combobox(...)
+        template.content_tag(:div, **combobox_attrs(input, close_on_select, builder, panel_id, kwargs)) do
+          build_popover(trigger_opts, input, builder, trigger_id, panel_id, label)
+        end
       end
 
       private
 
-      def render_combobox(trigger: {}, input: {}, popover: {}, **kwargs, &block)
-        popover_id    = self.class.popover_id_for(trigger[:id])
-        initial_value = input[:value]
-        haspopup      = popover.delete(:haspopup) { popover[:role] || "dialog" }
-        html_options  = merge_html_options({ data: build_stimulus_data(initial_value) }, kwargs)
-
-        template.content_tag(:div, **html_options) do
-          template.safe_join(
-            [
-              combobox_trigger(popover_id, trigger, haspopup),
-              hidden_input(input),
-              combobox_popover(popover_id, popover, &block)
-            ]
-          )
-        end
+      def resolve_builder
+        builder = Combobox::Builder.new
+        yield builder if block_given?
+        builder
       end
 
-      def build_stimulus_data(initial_value)
-        {
-          controller: "#{STIMULUS_CONTROLLER} #{FORMAT_CONTROLLER}",
-          action:     FORMAT_ACTION
-        }.tap do |data|
-          data[:input_combobox_value_value] = initial_value if initial_value.present?
+      def build_popover(trigger, input, builder, trigger_id, panel_id, label)
+        metadata = builder.metadata
+
+        Components::Popover.new(template).build(panel_id: panel_id) do |p|
+          p.trigger(haspopup: metadata.haspopup, controls: metadata.popup_id_for(panel_id)) do |attrs|
+            build_combobox_trigger(attrs, trigger, input, metadata, trigger_id, label)
+          end
+          p.build_panel(classes: theme.resolve(:combobox_popover).fetch(:classes, "")) do |panel_attrs|
+            builder.render_panel(template, panel_attrs: panel_attrs)
+          end
         end
       end
 
-      def combobox_trigger(popover_id, trigger, haspopup)
-        Combobox::Trigger.new(template).render(
-          stimulus_controller: STIMULUS_CONTROLLER,
-          popover_id:          popover_id,
-          haspopup:            haspopup,
-          **trigger
+      def combobox_attrs(input, close_on_select, builder, panel_id, kwargs)
+        merge_html_options(
+          theme.resolve(:combobox),
+          kwargs,
+          { data: stimulus_data(input[:value], close_on_select) },
+          { data: builder.metadata.stimulus_data(panel_id, builder.options) }
         )
       end
 
-      def combobox_popover(popover_id, popover, &block)
-        Combobox::Popover.new(template).render(
-          stimulus_controller: STIMULUS_CONTROLLER,
-          id:                  popover_id,
-          **popover,
-          &block
+      def build_combobox_trigger(attrs, trigger, input, metadata, trigger_id, label)
+        opts = trigger_options(metadata, trigger)
+        opts[:aria] = (opts[:aria] || {}).merge(label: label) if label
+
+        template.safe_join(
+          [
+            Combobox::Trigger.new(template).render(
+              stimulus_controller: STIMULUS_CONTROLLER,
+              popover:             attrs,
+              id:                  trigger_id,
+              **opts
+            ),
+            hidden_input(input)
+          ]
         )
       end
 
+      def trigger_options(metadata, trigger)
+        defaults = metadata.trigger_options.dup
+        defaults[:icon_trailing] = metadata.trigger_icon if metadata.trigger_icon
+        defaults.deep_merge(trigger)
+      end
+
+      def stimulus_data(initial_value, close_on_select)
+        data = {
+          controller: "#{Popover::STIMULUS_CONTROLLER} #{STIMULUS_CONTROLLER} #{FORMAT_CONTROLLER}",
+          action:     FORMAT_ACTION
+        }
+        data[:input_combobox_value_value]    = initial_value if initial_value.present?
+        data[:popover_close_on_select_value] = close_on_select unless close_on_select.nil?
+        data
+      end
+
       def hidden_input(input)
         stimulus_data = merge_html_options(
           { "#{STIMULUS_CONTROLLER}_target": "input" },