stimulus_plumbers 0.3.2 → 0.4.0

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      # Yielded to `Combobox#render`: selects a variant renderer, then exposes its
+      # `metadata` (trigger/wrapper wiring) and renders its panel body.
+      class Builder < Plumber::Slots
+        def dropdown(**options)  = select(Dropdown, options)
+        def typeahead(**options) = select(Typeahead, options)
+        def date(**options)      = select(Date, options)
+        def time(**options)      = select(Time, options)
+
+        def selected? = @slots.key?(:variant)
+        def renderer  = selection&.fetch(:renderer)
+        def options   = selection ? selection[:options] : {}
+        def metadata  = renderer ? renderer::Metadata : DefaultMetadata
+
+        def render_panel(template, panel_attrs:)
+          renderer&.new(template)&.render(panel_attrs: panel_attrs, **options)
+        end
+
+        # Metadata used when no variant is selected.
+        module DefaultMetadata
+          module_function
+
+          def haspopup = "dialog"
+          def popup_id_for(panel_id) = panel_id
+          def trigger_icon = nil
+          def trigger_options = {}
+          def stimulus_data(_panel_id, _options) = {}
+        end
+
+        private
+
+        def select(renderer, options)
+          set_slot(:variant, { renderer: renderer, options: options })
+          nil
+        end
+
+        def selection = resolve(:variant)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Combobox
+      class Date
+        class Navigation < Plumber::Base
+          def render(step:, stimulus_controller:, view: "month", date: ::Date.today, **kwargs)
+            html_options = merge_html_options(
+              theme.resolve(:combobox_date_navigation),
+              kwargs,
+              { aria: { label: "Date picker navigation" } }
+            )
+
+            template.content_tag(:nav, **html_options) do
+              template.safe_join(navigators(stimulus_controller, step, view, date))
+            end
+          end
+
+          private
+
+          def navigators(stimulus_controller, step, view, date)
+            [
+              navigator(stimulus_controller, target: "previous", icon: "arrow-left", label: prev_label(step)),
+              view_title_navigator(stimulus_controller, view, date),
+              navigator(stimulus_controller, target: "next", icon: "arrow-right", label: next_label(step))
+            ]
+          end
+
+          def navigator(stimulus_controller, target:, label:, icon: nil)
+            opts = {
+              aria: { label: label },
+              data: { "#{stimulus_controller}-target" => target }
+            }
+            opts[:icon] = icon if icon
+            Navigator.new(template).render(**opts)
+          end
+
+          def view_title_navigator(stimulus_controller, view, date)
+            Navigator.new(template).render(
+              data: {
+                "#{stimulus_controller}-target" => "viewTitle",
+                action:                           "click->#{stimulus_controller}#zoomOut"
+              }
+            ) { view_title_label(view, date) }
+          end
+
+          def view_title_label(view, date)
+            case view
+            when "year"   then date.year.to_s
+            when "decade" then decade_label(date)
+            else               I18n.l(date, format: "%B %Y")
+            end
+          end
+
+          def decade_label(date)
+            start = (date.year / 10) * 10
+            "#{start}–#{start + 9}"
+          end
+
+          def prev_label(step)
+            "Previous #{step.to_s.titleize}"
+          end
+
+          def next_label(step)
+            "Next #{step.to_s.titleize}"
+          end
+        end
+      end
+    end
+  end
+end

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,48 +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("_")
+        module Metadata
+          module_function
+
+          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(value: nil, popover_id: nil)
-          calendar_id = self.class.calendar_id_for(popover_id)
+        def render(...) = render_date(...)
+
+        private
+
+        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
 
-        private
-
         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,33 +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 }
-            }
-          }
+        module Metadata
+          module_function
+
+          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(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(...) = render_dropdown(...)
+
+        private
+
+        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

@@ -5,12 +5,18 @@ module StimulusPlumbers
     class Combobox
       class Options
         class Option < Plumber::Base
-          def render(label:, value:, description: nil, disabled: false, selected: false)
+          def render(...)
+            render_option(...)
+          end
+
+          private
+
+          def render_option(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, "") },
+              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

@@ -5,9 +5,15 @@ module StimulusPlumbers
     class Combobox
       class Options
         class OptionGroup < Plumber::Base
-          def render(label:, options:, value: nil)
+          def render(...)
+            render_option_group(...)
+          end
+
+          private
+
+          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/options.rb

@@ -4,21 +4,25 @@ 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) })
+        def render(...)
+          render_options(...)
         end
 
         private
 
+        def render_options(items, value: nil, &block)
+          @selected_value = value.to_s
+          template.safe_join(items.filter_map { |item| render_item(item, &block) })
+        end
+
         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)
+            block ? template.capture(attrs, &block) : OptionGroup.new(template).render(**attrs[:optgroup], value: @selected_value)
           else
-            block ? block.call(attrs) : Option.new(template).render(**attrs)
+            block ? template.capture(attrs, &block) : Option.new(template).render(**attrs)
           end
         end
 

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

@@ -5,11 +5,17 @@ module StimulusPlumbers
     class Combobox
       class Time
         class Drum < Plumber::Base
-          def render(stimulus_controller:, target:, label:, items:, selected: nil)
+          def render(...)
+            render_drum(...)
+          end
+
+          private
+
+          def render_drum(stimulus_controller:, target:, label:, items:, selected: nil)
             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,33 +5,51 @@ 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(format: :h12, step: 1, value: nil)
+        def render(...) = render_time(...)
+
+        private
+
+        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
 
-        private
+        def dialog_attrs(label, labelledby)
+          {
+            role: "dialog",
+            aria: labelled_aria(label, labelledby: labelledby),
+            data: { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION }
+          }
+        end
 
         def drums
           cols = [hour_drum, minute_drum]
@@ -39,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,43 +4,91 @@ module StimulusPlumbers
   module Components
     class Combobox
       class Trigger < Plumber::Base
-        def render(
+        STIMULUS_ACTION = [
+          "focus->#{Components::Popover::STIMULUS_CONTROLLER}#open",
+          "keydown.esc->#{Components::Popover::STIMULUS_CONTROLLER}#close"
+        ].join(" ").freeze
+
+        def render(...)
+          render_trigger(...)
+        end
+
+        private
+
+        def render_trigger(
           stimulus_controller:,
-          popover_id:,
-          haspopup:,
+          popover:,
           readonly: true,
-          aria_autocomplete: nil,
-          aria_label: nil,
           aria: {},
           id: nil,
           data: {},
+          icon_leading: nil,
+          icon_trailing: nil,
+          **kwargs
+        )
+          input_html = render_input(
+            stimulus_controller: stimulus_controller,
+            popover:             popover,
+            readonly:            readonly,
+            aria:                aria,
+            id:                  id,
+            data:                data,
+            **kwargs
+          )
+
+          return input_html unless icon_leading || icon_trailing
+
+          render_trigger_group(icon_leading, icon_trailing) { input_html }
+        end
+
+        def render_input(
+          stimulus_controller:,
+          popover:,
+          readonly:,
+          aria:,
+          id:,
+          data:,
           **kwargs
         )
           stimulus_data = {
+            popover_target:                  popover.dig(:data, :popover_target),
             "#{stimulus_controller}_target": "trigger",
-            input_format_target:             "input",
-            action:                          "focus->#{stimulus_controller}#open keydown.esc->#{stimulus_controller}#close"
+            input_formatter_target:          "input",
+            action:                          STIMULUS_ACTION
           }
 
-          trigger_aria = { haspopup: haspopup, expanded: "false", controls: popover_id }
-          trigger_aria[:autocomplete] = aria_autocomplete if aria_autocomplete
-          trigger_aria[:label]        = aria_label        if aria_label
-
           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),
-                data:     merge_data_options(stimulus_data, data)
+                aria:     popover.fetch(:aria, {}).deep_merge(aria),
+                data:     stimulus_data
               },
+              { data: data },
               kwargs
             )
           )
         end
+
+        def render_trigger_group(icon_leading, icon_trailing, &block)
+          InputGroup.new(template).render(
+            leading:  icon_leading  ? -> { render_trigger_icon(icon_leading) }  : nil,
+            trailing: icon_trailing ? -> { render_trigger_icon(icon_trailing) } : nil,
+            **theme.resolve(:combobox_trigger_group)
+          ) { template.capture(&block) }
+        end
+
+        def render_trigger_icon(name)
+          Components::Icon.new(template).render(
+            name:    name,
+            classes: theme.resolve(:combobox_trigger_icon).fetch(:classes, ""),
+            aria:    { hidden: "true" }
+          )
+        end
       end
     end
   end