stimulus_plumbers 0.3.3 → 0.4.2

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

@@ -5,110 +5,111 @@ 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)
-          @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
+        def render_time(panel_attrs: {}, format: :h12, step: 1, value: nil, label: nil, labelledby: nil)
+          step = [1, step.to_i].max
+          time = parse_time(value)
+
+          attrs = merge_html_options(panel_attrs, theme.resolve(:combobox_time), dialog_attrs(label, labelledby))
+          template.content_tag(:div, **attrs) { template.safe_join(drums(format, step, time)) }
         end
 
-        def drums
-          cols = [hour_drum, minute_drum]
-          cols << period_drum if @format == :h12
-          cols
+        def dialog_attrs(label, labelledby)
+          resolved_label = label || I18n.t("stimulus_plumbers.combobox.time.dialog_label")
+          {
+            role: "dialog",
+            aria: labelled_aria(resolved_label, labelledby: labelledby),
+            data: { controller: STIMULUS_CONTROLLER, action: STIMULUS_ACTION }
+          }
         end
 
-        def hour_drum
-          drum.render(
-            stimulus_controller: STIMULUS_CONTROLLER,
-            target:              "hour",
-            label:               "Hour",
-            items:               hour_items,
-            selected:            current_hour
-          )
+        def drums(format, step, time)
+          cols = [hour_drum(format, time), minute_drum(step, time)]
+          cols << period_drum(time) if format == :h12
+          cols
         end
 
-        def minute_drum
-          items = (0...60).step(@step).map do |m|
-            s = m.to_s.rjust(2, "0")
-            [s, s]
-          end
-          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
-          )
+        def hour_drum(format, time)
+          items = if format == :h12
+                    (1..12).map { |h| [h.to_s] * 2 }
+                  else
+                    (0..23).map { |h| [h.to_s.rjust(2, "0")] * 2 }
+                  end
+          render_drum("hour", t("hour_label"), items, selected_hour(format, time))
         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
-          )
+        def minute_drum(step, time)
+          items    = (0...60).step(step).map { |m| [m.to_s.rjust(2, "0")] * 2 }
+          selected = time ? round_minute(time.min, step).to_s.rjust(2, "0") : nil
+          render_drum("minute", t("minute_label"), items, selected)
         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
-          end
+        def period_drum(time)
+          items    = [[t("am"), "AM"], [t("pm"), "PM"]]
+          selected = time && (time.hour < 12 ? "AM" : "PM")
+          render_drum("period", t("period_label"), items, selected)
         end
 
-        def current_hour
-          return nil unless @time
+        def selected_hour(format, time)
+          return nil unless time
 
-          if @format == :h12
-            h = @time.hour % 12
+          if format == :h12
+            h = time.hour % 12
             (h.zero? ? 12 : h).to_s
           else
-            @time.hour.to_s.rjust(2, "0")
+            time.hour.to_s.rjust(2, "0")
           end
         end
 
-        def snap_minute(minute)
-          return minute if @step == 1
+        def round_minute(minute, step)
+          return minute if step == 1
 
-          ((minute.to_f / @step).round * @step) % 60
+          ((minute.to_f / step).round * step) % 60
         end
 
-        def drum
-          @drum ||= Time::Drum.new(template)
+        def render_drum(target, label, items, selected)
+          attrs = merge_html_options(
+            theme.resolve(:combobox_listbox),
+            theme.resolve(:combobox_time_drum, type: target == "period" ? :period : :unit),
+            {
+              role:     "listbox",
+              tabindex: "0",
+              aria:     { label: label },
+              data:     { "#{STIMULUS_CONTROLLER}_target": target }
+            },
+            { data: { action: "click->#{STIMULUS_CONTROLLER}#select keydown->#{STIMULUS_CONTROLLER}#onNavigate" } }
+          )
+          template.content_tag(:ul, **attrs) 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
 
         def parse_time(value)
@@ -118,6 +119,10 @@ module StimulusPlumbers
         rescue ArgumentError
           nil
         end
+
+        def t(key)
+          I18n.t("stimulus_plumbers.combobox.time.#{key}")
+        end
       end
     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" },

data/lib/stimulus_plumbers/components/divider.rb

@@ -5,13 +5,12 @@ module StimulusPlumbers
     class Divider < Plumber::Base
       def render(label = nil, **kwargs)
         divider_opts = merge_html_options(
-          { classes: theme.resolve(:divider).fetch(:classes, "") },
+          theme.resolve(:divider),
           kwargs
         )
         template.content_tag(:div, role: "separator", **divider_opts) do
           if label.blank?
-            hr_classes = theme.resolve(:divider_separator).fetch(:classes, "")
-            template.tag.hr(class: hr_classes)
+            template.tag.hr(**divider_separator_opts)
           else
             render_with(label)
           end
@@ -21,16 +20,18 @@ module StimulusPlumbers
       private
 
       def render_with(label)
-        hr_classes = theme.resolve(:divider_separator).fetch(:classes, "")
-        label_classes = theme.resolve(:divider_label).fetch(:classes, "")
         template.safe_join(
           [
-            template.tag.hr(class: hr_classes),
-            template.content_tag(:span, label, class: label_classes),
-            template.tag.hr(class: hr_classes)
+            template.tag.hr(**divider_separator_opts),
+            template.content_tag(:span, label, **merge_html_options(theme.resolve(:divider_label))),
+            template.tag.hr(**divider_separator_opts)
           ]
         )
       end
+
+      def divider_separator_opts
+        merge_html_options(theme.resolve(:divider_separator))
+      end
     end
   end
 end

data/lib/stimulus_plumbers/components/icon.rb

@@ -3,9 +3,13 @@
 module StimulusPlumbers
   module Components
     class Icon < Plumber::Base
+      def self.icon_name?(value)
+        value.is_a?(Symbol) || (value.is_a?(String) && !value.html_safe?)
+      end
+
       def render(name:, **kwargs)
         html_options = merge_html_options(
-          { classes: theme.resolve(:icon).fetch(:classes, "") },
+          theme.resolve(:icon),
           kwargs
         )
 

data/lib/stimulus_plumbers/components/input_group.rb

@@ -3,9 +3,9 @@
 module StimulusPlumbers
   module Components
     class InputGroup < Plumber::Base
-      def render(leading: nil, trailing: nil, error: false, **kwargs, &block)
+      def render(leading: nil, trailing: nil, error: false, floating: nil, **kwargs, &block)
         html_options = merge_html_options(
-          theme.resolve(:input_group, error: error),
+          theme.resolve(:input_group, error: error, floating: floating),
           kwargs
         )
         template.content_tag(:div, **html_options) do

data/lib/stimulus_plumbers/components/link/slots.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Link
+      class Slots < Plumber::Slots
+        slot :icon_leading, :icon_trailing
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/link.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class Link < Plumber::Base
+      def render(content = nil, url:, icon_leading: nil, icon_trailing: nil, **kwargs, &block)
+        icon_trailing ||= "external-link" if kwargs[:target] == "_blank"
+
+        slots = Link::Slots.new
+        slots.with_icon_leading(icon_leading) if icon_leading
+        slots.with_icon_trailing(icon_trailing) if icon_trailing
+
+        render_link(url: url, **kwargs) do
+          build_layout(slots) do
+            build_content(content, &block)
+          end
+        end
+      end
+
+      private
+
+      def render_link(url:, target: nil, type: :default, variant: :default, **kwargs, &block)
+        html_options = merge_html_options(
+          theme.resolve(:link, type: type, variant: variant),
+          kwargs
+        )
+        template.content_tag(:a, href: url, target: target, **html_options) do
+          template.capture(&block)
+        end
+      end
+
+      def build_layout(slots, &block)
+        template.safe_join(
+          [
+            render_icon_slot(slots, :icon_leading),
+            template.capture(&block),
+            render_icon_slot(slots, :icon_trailing)
+          ]
+        )
+      end
+
+      def render_icon_slot(slots, name)
+        slots.resolve(name) do |value|
+          next value unless Components::Icon.icon_name?(value)
+
+          Components::Icon.new(template).render(
+            name:    value,
+            classes: theme.resolve(:link_icon).fetch(:classes, ""),
+            aria:    { hidden: "true" }
+          )
+        end
+      end
+
+      def build_content(content, &block)
+        if block_given?
+          template.content_tag(:span, template.capture(&block))
+        elsif content
+          template.content_tag(:span, content)
+        end
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/list/item/slots.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class List
+      class Item
+        class Slots < Plumber::Slots
+          slot :icon_leading, :title, :description, :icon_trailing
+        end
+      end
+    end
+  end
+end