stimulus_plumbers 0.3.1 → 0.3.3

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

@@ -21,7 +21,13 @@ module StimulusPlumbers
           }
         end
 
-        def render(options: [], value: nil, label: nil, labelledby: nil)
+        def render(...)
+          render_dropdown(...)
+        end
+
+        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" } }

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

@@ -5,7 +5,13 @@ 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
 

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

@@ -5,7 +5,13 @@ 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, "") },
               { 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/popover.rb

@@ -4,19 +4,42 @@ module StimulusPlumbers
   module Components
     class Combobox
       class Popover < Plumber::Base
-        def render(stimulus_controller:, id:, tag: :div, role: nil, label: nil, labelledby: nil, content: nil, data: {}, &block)
-          stimulus_data = { "#{stimulus_controller}_target": "popover" }
+        def render(...)
+          render_popover(...)
+        end
+
+        private
 
-          attrs = { id: id, hidden: "", data: merge_data_options(stimulus_data, data) }
-          attrs[:role] = role if role
+        def render_popover(
+          stimulus_controller:,
+          id:,
+          tag: :div,
+          role: nil,
+          label: nil,
+          labelledby: nil,
+          content: nil,
+          data: {},
+          **kwargs,
+          &block
+        )
+          opts = {}
+          opts[:role] = role if role
           if labelledby
-            attrs[:aria] = { labelledby: labelledby }
+            opts[:aria] = { labelledby: labelledby }
           elsif label
-            attrs[:aria] = { label: label }
+            opts[:aria] = { label: label }
           end
 
+          html_options = merge_html_options(
+            { id: id, hidden: "" },
+            { data: { "#{stimulus_controller}_target": "popover" } },
+            { data: data },
+            opts,
+            kwargs
+          )
+
           html_content = block_given? ? template.capture(id, &block) : content
-          template.content_tag(tag, **attrs) { html_content }
+          template.content_tag(tag, html_content, **html_options)
         end
       end
     end

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

@@ -5,7 +5,13 @@ 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(

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

@@ -12,7 +12,13 @@ module StimulusPlumbers
           }
         end
 
-        def render(format: :h12, step: 1, value: nil)
+        def render(...)
+          render_time(...)
+        end
+
+        private
+
+        def render_time(format: :h12, step: 1, value: nil)
           @format = format
           @step   = [1, step.to_i].max
           @time   = parse_time(value)
@@ -31,8 +37,6 @@ module StimulusPlumbers
           end
         end
 
-        private
-
         def drums
           cols = [hour_drum, minute_drum]
           cols << period_drum if @format == :h12

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

@@ -4,27 +4,57 @@ module StimulusPlumbers
   module Components
     class Combobox
       class Trigger < Plumber::Base
-        def render(
+        def render(...)
+          render_trigger(...)
+        end
+
+        private
+
+        def render_trigger(
           stimulus_controller:,
           popover_id:,
           haspopup:,
           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_id:          popover_id,
+            haspopup:            haspopup,
+            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_id:,
+          haspopup:,
+          readonly:,
+          aria:,
+          id:,
+          data:,
           **kwargs
         )
           stimulus_data = {
             "#{stimulus_controller}_target": "trigger",
-            input_format_target:             "input",
+            input_formatter_target:          "input",
             action:                          "focus->#{stimulus_controller}#open keydown.esc->#{stimulus_controller}#close"
           }
 
           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(
@@ -35,12 +65,25 @@ module StimulusPlumbers
                 readonly: (readonly ? true : nil),
                 role:     "combobox",
                 aria:     trigger_aria.deep_merge(aria),
-                data:     merge_data_options(stimulus_data, data)
+                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)
+          Icon.new(template).render(name: name, aria: { hidden: "true" })
+        end
       end
     end
   end

data/lib/stimulus_plumbers/components/combobox/{autocomplete.rb → typeahead.rb}

@@ -3,10 +3,10 @@
 module StimulusPlumbers
   module Components
     class Combobox
-      class Autocomplete < Plumber::Base
+      class Typeahead < Plumber::Base
         def self.default_opts
           Dropdown.default_opts.deep_merge(
-            trigger: { aria_autocomplete: "list", readonly: false }
+            trigger: { aria: { autocomplete: "list" }, readonly: false }
           )
         end
 
@@ -26,17 +26,19 @@ module StimulusPlumbers
           template.content_tag(
             :div,
             **merge_html_options(
-              { classes: theme.resolve(:combobox_autocomplete_loading).fetch(:classes, "") },
+              { classes: theme.resolve(:combobox_typeahead_loading).fetch(:classes, "") },
               { hidden: "", aria: { live: "polite" }, data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "loading" } }
             )
-          ) { "" }
+          ) do
+            Icon.new(template).render(name: "spinner", classes: "size-(--sp-icon-size) animate-spin")
+          end
         end
 
         def empty
           template.content_tag(
             :div,
             **merge_html_options(
-              { classes: theme.resolve(:combobox_autocomplete_empty).fetch(:classes, "") },
+              { classes: theme.resolve(:combobox_typeahead_empty).fetch(:classes, "") },
               { hidden: "", role: "status", data: { "#{Dropdown::STIMULUS_CONTROLLER}_target": "empty" } }
             )
           ) { "No results" }

data/lib/stimulus_plumbers/components/combobox.rb

@@ -4,14 +4,20 @@ module StimulusPlumbers
   module Components
     class Combobox < Plumber::Base
       STIMULUS_CONTROLLER = "input-combobox"
-      FORMAT_CONTROLLER   = "input-format"
-      FORMAT_ACTION       = "input-combobox:changed->input-format#format"
+      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: {}, popover: {}, **kwargs, &block)
+      def render(...)
+        render_combobox(...)
+      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" }
@@ -28,8 +34,6 @@ module StimulusPlumbers
         end
       end
 
-      private
-
       def build_stimulus_data(initial_value)
         {
           controller: "#{STIMULUS_CONTROLLER} #{FORMAT_CONTROLLER}",
@@ -59,7 +63,7 @@ module StimulusPlumbers
 
       def hidden_input(input)
         stimulus_data = merge_html_options(
-          { "#{STIMULUS_CONTROLLER}_target": "value" },
+          { "#{STIMULUS_CONTROLLER}_target": "input" },
           input.fetch(:data, {})
         )
         template.tag.input(type: "hidden", name: input[:name], value: input[:value], data: stimulus_data)

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

@@ -32,7 +32,7 @@ module StimulusPlumbers
             aria: { label: label },
             data: { "#{stimulus_controller}-target" => target }
           }
-          opts[:icon_options] = { name: icon } if icon
+          opts[:icon] = icon if icon
           Navigator.new(template).render(**opts)
         end
       end

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

@@ -4,26 +4,18 @@ module StimulusPlumbers
   module Components
     module DatePicker
       class Navigator < Plumber::Base
-        def render(icon_options: nil, **kwargs)
-          html_options = merge_html_options(
-            { classes: theme.resolve(:calendar_navigation_navigator).fetch(:classes, "") },
-            kwargs
-          )
-
-          if icon_options.nil?
-            template.content_tag(:button, nil, **html_options)
-          else
-            template.content_tag(:button, icon(icon_options), **html_options)
-          end
+        def render(...)
+          render_navigator(...)
         end
 
         private
 
-        def icon(icon_options)
-          Icon.new(template).render(
-            classes: theme.resolve(:calendar_navigation_navigator_icon).fetch(:classes, ""),
-            **icon_options
+        def render_navigator(icon: nil, **kwargs)
+          html_options = merge_html_options(
+            { classes: theme.resolve(:calendar_navigation_navigator).fetch(:classes, "") },
+            kwargs
           )
+          Components::Button.new(template).render(variant: :ghost, size: nil, icon_leading: icon, **html_options)
         end
       end
     end

data/lib/stimulus_plumbers/components/divider.rb

@@ -3,13 +3,33 @@
 module StimulusPlumbers
   module Components
     class Divider < Plumber::Base
-      def render(**kwargs)
-        html_options = merge_html_options(
+      def render(label = nil, **kwargs)
+        divider_opts = merge_html_options(
           { classes: theme.resolve(:divider).fetch(:classes, "") },
           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)
+          else
+            render_with(label)
+          end
+        end
+      end
+
+      private
 
-        template.tag.hr(**html_options)
+      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)
+          ]
+        )
       end
     end
   end

data/lib/stimulus_plumbers/components/icon.rb

@@ -9,7 +9,7 @@ module StimulusPlumbers
           kwargs
         )
 
-        icon_data = Themes::Schema::Icon.resolve(theme.icons[name])
+        icon_data = Themes::Schema::Icon.resolve(theme.icons[name.to_s])
         if icon_data
           svg_icon(icon_data, html_options)
         else
@@ -20,21 +20,11 @@ module StimulusPlumbers
       private
 
       def svg_icon(icon_data, html_options)
-        template.content_tag(
-          :svg,
-          xmlns:          "http://www.w3.org/2000/svg",
-          fill:           icon_data[:fill],
-          viewBox:        icon_data[:view_box],
-          width:          icon_data[:width],
-          height:         icon_data[:height],
-          stroke:         icon_data[:stroke],
-          "stroke-width": icon_data[:stroke_width],
-          **html_options
-        ) do
-          template.tag.path(
-            "stroke-linecap":  icon_data[:stroke_linecap],
-            "stroke-linejoin": icon_data[:stroke_linejoin],
-            d:                 icon_data[:d]
+        template.content_tag(:svg, nil, icon_data.except(:elements).merge(html_options)) do
+          template.safe_join(
+            icon_data[:elements].map do |element|
+              template.content_tag(element[:tag], nil, element.except(:tag))
+            end
           )
         end
       end

data/lib/stimulus_plumbers/components/input_group.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module StimulusPlumbers
+  module Components
+    class InputGroup < Plumber::Base
+      def render(leading: nil, trailing: nil, error: false, **kwargs, &block)
+        html_options = merge_html_options(
+          theme.resolve(:input_group, error: error),
+          kwargs
+        )
+        template.content_tag(:div, **html_options) do
+          build_input_group(leading, trailing, &block)
+        end
+      end
+
+      private
+
+      def build_input_group(leading, trailing, &block)
+        template.safe_join(
+          [
+            leading.respond_to?(:call) ? template.capture(&leading) : leading,
+            template.capture(&block),
+            trailing.respond_to?(:call) ? template.capture(&trailing) : trailing
+          ]
+        )
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/components/popover.rb

@@ -3,7 +3,13 @@
 module StimulusPlumbers
   module Components
     class Popover < Plumber::Base
-      def render(interactive: true, **kwargs, &block)
+      def render(...)
+        render_popover(...)
+      end
+
+      private
+
+      def render_popover(interactive: true, **kwargs, &block)
         html_options = merge_html_options(
           { classes: theme.resolve(:popover).fetch(:classes, "") },
           kwargs
@@ -17,8 +23,6 @@ module StimulusPlumbers
         end
       end
 
-      private
-
       def wrap_content(interactive, builder)
         if interactive
           template.content_tag(:template, builder.content_html)

data/lib/stimulus_plumbers/form/builder.rb

@@ -42,7 +42,7 @@ module StimulusPlumbers
       end
 
       def render_input_group(error:, leading: nil, trailing: nil, **wrapper_opts, &block)
-        Fields::InputGroup.new(@template).render(leading: leading, trailing: trailing, error: error, **wrapper_opts, &block)
+        Components::InputGroup.new(@template).render(leading: leading, trailing: trailing, error: error, **wrapper_opts, &block)
       end
 
       def render_combobox(attribute, input_id:, opts:, err:, **wrapper_opts, &block)

data/lib/stimulus_plumbers/form/fields/inputs/datetime.rb

@@ -6,7 +6,9 @@ module StimulusPlumbers
       module Inputs
         module Datetime
           def date_field(attribute, options = {})
-            html_native = options.delete(:html_native) { false }
+            html_native   = options.delete(:html_native) { false }
+            icon_leading  = options.delete(:icon_leading)
+            icon_trailing = options.delete(:icon_trailing) { "calendar" }
             Field.new(@template, **options).render(
               object,
               attribute,
@@ -16,15 +18,17 @@ module StimulusPlumbers
                 html_options = merge_html_options(opts, html_opts, field_theme(:form_input, error: error))
                 super(attribute, html_options)
               else
-                render_date_combobox(attribute, html_opts, error)
+                render_date_combobox(attribute, html_opts, error, icon_leading: icon_leading, icon_trailing: icon_trailing)
               end
             end
           end
 
           def time_field(attribute, options = {})
-            html_native = options.delete(:html_native) { false }
-            format      = options.delete(:format) { :h12 }
-            step        = options.delete(:step) { 1 }
+            html_native   = options.delete(:html_native) { false }
+            format        = options.delete(:format) { :h12 }
+            step          = options.delete(:step) { 1 }
+            icon_leading  = options.delete(:icon_leading)
+            icon_trailing = options.delete(:icon_trailing) { "clock" }
             Field.new(@template, **options).render(
               object,
               attribute,
@@ -34,18 +38,26 @@ module StimulusPlumbers
                 html_options = merge_html_options(opts, html_opts, field_theme(:form_input, error: error))
                 super(attribute, html_options)
               else
-                render_time_combobox(attribute, html_opts, error, format: format, step: step)
+                render_time_combobox(
+                  attribute,
+                  html_opts,
+                  error,
+                  format:        format,
+                  step:          step,
+                  icon_leading:  icon_leading,
+                  icon_trailing: icon_trailing
+                )
               end
             end
           end
 
           private
 
-          def render_date_combobox(attribute, html_opts, error)
+          def render_date_combobox(attribute, html_opts, error, icon_leading:, icon_trailing:)
             current_value = object.respond_to?(attribute) ? object.public_send(attribute) : nil
             opts = Components::Combobox::Date.default_opts.deep_merge(
               input:   { value: current_value, data: { combobox_date_date_value: current_value } },
-              trigger: { aria: html_opts[:aria] },
+              trigger: { aria: html_opts[:aria], icon_leading: icon_leading, icon_trailing: icon_trailing }.compact,
               popover: { labelledby: Field.label_id(html_opts[:id]) }
             )
             render_combobox(
@@ -53,17 +65,17 @@ module StimulusPlumbers
               input_id: html_opts[:id],
               opts:     opts,
               err:      error,
-              data:     { input_format_type_value: "date" }
+              data:     { input_formatter_format_value: "date" }
             ) do |popover_id|
               Components::Combobox::Date.new(@template).render(value: current_value, popover_id: popover_id)
             end
           end
 
-          def render_time_combobox(attribute, html_opts, error, format:, step:)
+          def render_time_combobox(attribute, html_opts, error, format:, step:, icon_leading:, icon_trailing:)
             current_value = object.respond_to?(attribute) ? object.public_send(attribute) : nil
             opts = Components::Combobox::Time.default_opts.deep_merge(
               input:   { value: current_value },
-              trigger: { aria: html_opts[:aria] },
+              trigger: { aria: html_opts[:aria], icon_leading: icon_leading, icon_trailing: icon_trailing }.compact,
               popover: { labelledby: Field.label_id(html_opts[:id]) }
             )
             render_combobox(
@@ -71,7 +83,7 @@ module StimulusPlumbers
               input_id: html_opts[:id],
               opts:     opts,
               err:      error,
-              data:     { input_format_type_value: "time", input_format_options_value: { format: format }.to_json }
+              data:     { input_formatter_format_value: "time", input_formatter_options_value: { format: format }.to_json }
             ) { Components::Combobox::Time.new(@template).render(format: format, step: step, value: current_value) }
           end
         end

data/lib/stimulus_plumbers/form/fields/inputs/password.rb

@@ -29,14 +29,14 @@ module StimulusPlumbers
             html_options = merge_html_options(
               html_opts,
               field_theme(:form_input, error: error),
-              { data: { input_format_target: "input" } }
+              { data: { input_formatter_target: "input" } }
             )
             render_input_group(
               error:    error,
               trailing: method(:reveal_button),
               **merge_html_options(
                 field_theme(:form_input_reveal, error: error),
-                { data: { controller: "input-format", input_format_type_value: "password" } }
+                { data: { controller: "input-formatter", input_formatter_format_value: "password" } }
               )
             ) { @template.capture(html_options, &block) }
           end
@@ -47,7 +47,7 @@ module StimulusPlumbers
               {
                 type: "button",
                 aria: { label: "Show password", pressed: "false" },
-                data: { input_format_target: "toggle", action: "click->input-format#toggle" }
+                data: { input_formatter_target: "toggle", action: "click->input-formatter#toggle" }
               }
             )
             @template.content_tag(:button, "", **html_options)