shoelace-rails 0.6.2 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9ead8cbfce57323de6e03b0b4dc638eac355b3a9e7495747a17aaf79682e81ed
-  data.tar.gz: 9c84316ec90e6a29fb270b3d0c56d9dbc93b947c51aab3fa3c07bac5620f4399
+  metadata.gz: 43e6f607b577eb1c8619ca818ad1e1ad29077d948789579a109a740273b1ba6e
+  data.tar.gz: 266799cb74342d48ac0fb97e9fd9a902c84fe5dfc468c5f5fdf7c8ec98872759
 SHA512:
-  metadata.gz: 511f5b435164a36c9fe094ebdc905d05c3759cf469ec9559b9fd437171291b3b0b07361ecc674d120ed5b59b0683044582f1d5726c50f05df0e57ff972a185fc
-  data.tar.gz: 74f6c3f146f2aea79e9cce672c36840c4f416adf6ea14748dbfdf63ca0c92bbb1ad9041407df6ca91c93fd0334e6cb12e2e038fcb18d3eb13cdd970413459262
+  metadata.gz: e11ac8b6752b1c8cb9303b972008f088e57e56dfb022c36d6ff4ae5784102df6a0afc1143101fc497c1926ff6f494608d13738759347c9f767676c6fc76c0589
+  data.tar.gz: 6c8f7506829f93b98e673701cf290e5f116a8f283f5abb42c2507f94c248b12223795e7670530dadd1d812e5f3999fa7bccc212f8c85a69a0b3da8a32231e542

data/CHANGELOG.md

@@ -1,3 +1,15 @@
+## Unreleased
+
+#### 🚨 Breaking Changes
+
+- Deprecate `config.shoelace.invalid_input_class_name` in favor of `data-invalid` and `data-use-invalid`
+
+#### ⭐️ Features
+
+- Add `invalid` and `data-invalid` to the `Shoelace::FormBuilder`
+- Add the ability to specify a method for rendering slot for input components
+- Add `FormBuilder#date_field` method
+
 ## v0.6.2
 
 #### 🐞Bug Fixes

data/app/helpers/shoelace/components/error_wrappable.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Shoelace
+  module Components
+    module ErrorWrappable
+      def error_wrapping(html_tag)
+        if object_has_errors? && field_error_proc
+          @template_object.instance_exec(html_tag, self, &field_error_proc)
+        else
+          html_tag
+        end
+      end
+
+      private
+
+      def field_error_proc
+        Shoelace::SlFormBuilder.field_error_proc
+      end
+    end
+  end
+end

data/app/helpers/shoelace/components/sl_checkbox.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require_relative './error_wrappable'
+
+module Shoelace
+  module Components
+    class SlCheckbox < ActionView::Helpers::Tags::CheckBox #:nodoc:
+      include ErrorWrappable
+
+      def render(&block)
+        options = @options.stringify_keys
+        options["value"]   = @checked_value
+        options["checked"] = true if input_checked?(options)
+        options["invalid"] = options["data-invalid"] = "" if object_has_errors?
+        label = options.delete("label")
+
+        if options["multiple"]
+          add_default_name_and_id_for_value(@checked_value, options)
+          options.delete("multiple")
+        else
+          add_default_name_and_id(options)
+        end
+
+        include_hidden = options.delete("include_hidden") { true }
+
+        sl_checkbox_tag = if block_given?
+                            @template_object.content_tag('sl-checkbox', '', options, &block)
+                          else
+                            @template_object.content_tag('sl-checkbox', label, options)
+                          end
+
+        if include_hidden
+          hidden_field_for_checkbox(options) + sl_checkbox_tag
+        else
+          sl_checkbox_tag
+        end
+      end
+    end
+  end
+end

data/app/helpers/shoelace/components/sl_collection_radio_buttons.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+require_relative './error_wrappable'
+
+module Shoelace
+  module Components
+    class SlCollectionRadioButtons < ActionView::Helpers::Tags::CollectionRadioButtons #:nodoc:
+      include ErrorWrappable
+
+      class RadioButtonBuilder < Builder # :nodoc:
+        def label(*)
+          text
+        end
+
+        def radio_button(extra_html_options = {}, &block)
+          html_options = extra_html_options.merge(@input_html_options)
+          html_options[:skip_default_ids] = false
+          @template_object.sl_radio_button(@object_name, @method_name, @value, html_options, &block)
+        end
+      end
+
+      def render(&block)
+        render_collection_for(RadioButtonBuilder, &block)
+      end
+
+      private
+
+      def render_collection(&block)
+        html_options = @html_options.stringify_keys
+        html_options["value"] = value
+        add_default_name_and_id(html_options)
+        html_options["label"] = @options[:label].presence
+        html_options["invalid"] = html_options["data-invalid"] = "" if object_has_errors?
+
+        @template_object.content_tag('sl-radio-group', html_options) { super(&block) }
+      end
+
+      def hidden_field
+        ''.html_safe
+      end
+
+      def render_component(builder)
+        builder.radio_button { builder.label }
+      end
+    end
+  end
+end

data/app/helpers/shoelace/components/sl_color_picker.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require_relative './error_wrappable'
+
+module Shoelace
+  module Components
+    class SlColorPicker < ActionView::Helpers::Tags::ColorField #:nodoc:
+      RGB_VALUE_REGEX = /#[0-9a-fA-F]{6}/.freeze
+
+      include ErrorWrappable
+
+      def field_type; nil; end
+
+      def tag(tag_name, *args, &block)
+        tag_name.to_s == 'input' ? content_tag('sl-color-picker', '', *args, &block) : super
+      end
+
+      def render
+        @options["invalid"] = @options["data-invalid"] = "" if object_has_errors?
+        super
+      end
+
+      private
+
+      def validate_color_string(string)
+        string.downcase if RGB_VALUE_REGEX.match?(string)
+      end
+    end
+  end
+end

data/app/helpers/shoelace/components/sl_input.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require_relative './error_wrappable'
+
+module Shoelace
+  module Components
+    class SlInput < ActionView::Helpers::Tags::TextField #:nodoc:
+      include ErrorWrappable
+
+      attr_reader :field_type
+
+      def initialize(field_type, *args)
+        super(*args)
+        @field_type = field_type
+      end
+
+      def render(&block)
+        options = @options.stringify_keys
+
+        value = options.fetch("value") { value_before_type_cast }
+        options["value"] = value if value.present?
+
+        options["size"] = options["maxlength"] unless options.key?("size")
+        options["type"] ||= field_type
+        options["invalid"] = options["data-invalid"] = "" if object_has_errors?
+
+        add_default_name_and_id(options)
+
+        @template_object.content_tag('sl-input', '', options, &block)
+      end
+    end
+  end
+end

data/app/helpers/shoelace/components/sl_radio_button.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require_relative './error_wrappable'
+
+module Shoelace
+  module Components
+    class SlRadioButton < ActionView::Helpers::Tags::RadioButton #:nodoc:
+      include ErrorWrappable
+
+      def render(&block)
+        options = @options.stringify_keys
+        options["value"]   = @tag_value
+        add_default_name_and_id_for_value(@tag_value, options)
+        options.delete("name")
+
+        @template_object.content_tag('sl-radio', '', options.except("type"), &block)
+      end
+    end
+  end
+end

data/app/helpers/shoelace/components/sl_range.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require_relative './error_wrappable'
+
+module Shoelace
+  module Components
+    class SlRange < ActionView::Helpers::Tags::NumberField #:nodoc:
+      include ErrorWrappable
+
+      def field_type; nil; end
+
+      def render
+        @options["invalid"] = @options["data-invalid"] = "" if object_has_errors?
+        super
+      end
+
+      def tag(tag_name, *args, &block)
+        tag_name.to_s == 'input' ? content_tag('sl-range', '', *args, &block) : super
+      end
+    end
+  end
+end

data/app/helpers/shoelace/components/sl_select.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+require_relative './error_wrappable'
+
+module Shoelace
+  module Components
+    module SlSelectRenderable
+      EMPTY = "".html_safe.freeze
+
+      def select_content_tag(option_tags, _options, html_options)
+        html_options = html_options.stringify_keys
+        html_options['value'] ||= value
+        html_options["invalid"] = html_options["data-invalid"] = "" if object_has_errors?
+        add_default_name_and_id(html_options)
+
+        @template_object.content_tag("sl-select", html_options) do
+          "".html_safe.tap do |html|
+            html.safe_concat(option_tags)
+            html.safe_concat(@template_object.capture(&slot) || EMPTY) if slot
+          end
+        end
+      end
+    end
+
+    class SlSelect < ActionView::Helpers::Tags::Select #:nodoc:
+      include ErrorWrappable
+      include SlSelectRenderable
+
+      attr_reader :slot
+
+      def initialize(object_name, method_name, template_object, choices, options, html_options, slot)
+        @slot = slot
+        super(object_name, method_name, template_object, choices, options, html_options)
+      end
+
+      def grouped_options_for_select(grouped_options, options)
+        @template_object.grouped_sl_options_for_select(grouped_options, options)
+      end
+
+      def options_for_select(container, options = nil)
+        @template_object.sl_options_for_select(container, options)
+      end
+    end
+
+    class SlCollectionSelect < ActionView::Helpers::Tags::CollectionSelect #:nodoc:
+      include ErrorWrappable
+      include SlSelectRenderable
+
+      attr_reader :slot
+
+      def initialize(object_name, method_name, template_object, collection, value_method, text_method, options, html_options, slot)
+        @slot = slot
+        super(object_name, method_name, template_object, collection, value_method, text_method, options, html_options)
+      end
+
+      def options_from_collection_for_select(collection, value_method, text_method, selected = nil)
+        @template_object.sl_options_from_collection_for_select(collection, value_method, text_method, selected)
+      end
+    end
+
+    class SlGroupedCollectionSelect < ActionView::Helpers::Tags::GroupedCollectionSelect #:nodoc:
+      include ErrorWrappable
+      include SlSelectRenderable
+
+      attr_reader :slot
+
+      def initialize(object_name, method_name, template_object, collection, group_method, group_label_method, option_key_method, option_value_method, options, html_options, slot)
+        @slot = slot
+        super(object_name, method_name, template_object, collection, group_method, group_label_method, option_key_method, option_value_method, options, html_options)
+      end
+
+      def option_groups_from_collection_for_select(collection, group_method, group_label_method, option_key_method, option_value_method, selected_key = nil)
+        @template_object.sl_option_groups_from_collection_for_select(collection, group_method, group_label_method, option_key_method, option_value_method, selected_key)
+      end
+    end
+  end
+end

data/app/helpers/shoelace/components/sl_switch.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require_relative './error_wrappable'
+
+module Shoelace
+  module Components
+    class SlSwitch < ActionView::Helpers::Tags::NumberField #:nodoc:
+      include ErrorWrappable
+
+      def field_type; nil; end
+
+      def render(&block)
+        options = @options.stringify_keys
+        options["value"] = options.fetch("value") { value_before_type_cast }
+        add_default_name_and_id(options)
+        label = options.delete('label').presence
+        options["invalid"] = options["data-invalid"] = "" if object_has_errors?
+
+        content_tag('sl-switch', label, options, &block)
+      end
+    end
+  end
+end

data/app/helpers/shoelace/components/sl_textarea.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+require_relative './error_wrappable'
+
+module Shoelace
+  module Components
+    class SlTextarea < ActionView::Helpers::Tags::NumberField #:nodoc:
+      include ErrorWrappable
+
+      def render(&block)
+        options = @options.stringify_keys
+        options["value"] = options.fetch("value") { value_before_type_cast }
+        options["invalid"] = options["data-invalid"] = "" if object_has_errors?
+        add_default_name_and_id(options)
+
+        @template_object.content_tag("sl-textarea", '', options, &block)
+      end
+    end
+  end
+end

data/app/helpers/shoelace/form_builder.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require_relative './sl_form_builder'
+
+module Shoelace
+  FormBuilder = SlFormBuilder
+  deprecate_constant :FormBuilder
+end

data/app/helpers/shoelace/sl_form_builder.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+require_relative './components/sl_checkbox'
+require_relative './components/sl_collection_radio_buttons'
+require_relative './components/sl_color_picker'
+require_relative './components/sl_input'
+require_relative './components/sl_radio_button'
+require_relative './components/sl_range'
+require_relative './components/sl_select'
+require_relative './components/sl_switch'
+require_relative './components/sl_textarea'
+
+module Shoelace
+  class SlFormBuilder < ActionView::Helpers::FormBuilder #:nodoc:
+    # Same concept as the Rails field_error_proc, but for Shoelace components. Set to `nil` to avoid messing up the
+    # Shoelace components by default.
+    cattr_accessor :field_error_proc
+
+    # Similar concept to the Rails field_error_proc, but for Shoelace's commonly used `help-text slot`.
+    cattr_accessor :default_input_slot_method
+
+    {
+      date: :date,
+      email: :email,
+      number: :number,
+      password: :password,
+      search: :search,
+      telephone: :tel,
+      phone: :tel,
+      text: :text,
+      url: :url
+    }.each do |field_type, field_class|
+      # def email_field(method, **options, &block)
+      #   slot = wrap_with_default_slot(method, &block)
+      #   Components::SlInput.new(:email, object_name, method, @template, options.with_defaults(label: label_text(method))).render(&block)
+      # end
+      eval <<-RUBY, nil, __FILE__, __LINE__ + 1
+        def #{field_type}_field(method, **options, &block)
+          slot = wrap_with_default_slot(method, &block)
+          Components::SlInput.new(:#{field_class}, object_name, method, @template, options.with_defaults(object: @object, label: label_text(method))).render(&slot)
+        end
+      RUBY
+    end
+
+    def color_field(method, **options)
+      Components::SlColorPicker.new(object_name, method, @template, options.with_defaults(object: @object, label: label_text(method))).render
+    end
+    alias color_picker color_field
+
+    def range_field(method, **options)
+      Components::SlRange.new(object_name, method, @template, options.with_defaults(object: @object, label: label_text(method))).render
+    end
+    alias range range_field
+
+    def switch_field(method, **options, &block)
+      if block_given?
+        Components::SlSwitch.new(object_name, method, @template, options.with_defaults(object: @object)).render(&block)
+      else
+        Components::SlSwitch.new(object_name, method, @template, options.with_defaults(object: @object, label: label_text(method))).render(&block)
+      end
+    end
+    alias switch switch_field
+
+    def text_area(method, **options, &block)
+      Components::SlTextarea.new(object_name, method, @template, options.with_defaults(object: @object, label: label_text(method), resize: 'auto')).render(&block)
+    end
+
+    def check_box(method, options = {}, checked_value = "1", unchecked_value = "0", &block)
+      Components::SlCheckbox.new(object_name, method, @template, checked_value, unchecked_value, options.with_defaults(label: label_text(method)).merge(object: @object)).render(&block)
+    end
+
+    def select(method, choices = nil, options = {}, html_options = {}, &block)
+      slot = wrap_with_default_slot(method, &block)
+      Components::SlSelect.new(object_name, method, @template, choices, options.with_defaults(object: @object), html_options.with_defaults(label: label_text(method)), slot).render
+    end
+
+    def collection_select(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
+      slot = wrap_with_default_slot(method, &block)
+      Components::SlCollectionSelect.new(object_name, method, @template, collection, value_method, text_method, options.with_defaults(object: @object), html_options.with_defaults(label: label_text(method)), slot).render
+    end
+
+    def grouped_collection_select(method, collection, group_method, group_label_method, option_key_method, option_value_method, options = {}, html_options = {}, &block)
+      slot = wrap_with_default_slot(method, &block)
+      Components::SlGroupedCollectionSelect.new(object_name, method, @template, collection, group_method, group_label_method, option_key_method, option_value_method, options.with_defaults(object: @object), html_options.with_defaults(label: label_text(method)), slot).render
+    end
+
+    def collection_radio_buttons(method, collection, value_method, text_method, options = {}, html_options = {}, &block)
+      Components::SlCollectionRadioButtons.new(object_name, method, @template, collection, value_method, text_method, options.with_defaults(object: @object, label: label_text(method)), html_options).render(&block)
+    end
+
+    def submit(value = nil, options = {})
+      value, options = nil, value if value.is_a?(Hash)
+
+      @template.sl_submit_tag(value || submit_default_value, **options)
+    end
+
+    private
+
+    def label_text(method, tag_value = nil)
+      ::ActionView::Helpers::Tags::Label::LabelBuilder.new(@template, object_name.to_s, method.to_s, object, tag_value).translation
+    end
+
+    def wrap_with_default_slot(method_name, &user_defined_slot)
+      if default_input_slot_method && !block_given?
+        -> { @template.method(default_input_slot_method).call(object, method_name) }
+      else
+        user_defined_slot
+      end
+    end
+  end
+end

data/app/helpers/shoelace/sl_form_helper.rb

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+
+require_relative './sl_form_builder'
+
+module Shoelace
+  module SlFormHelper
+    ShoelaceFormBuilder = SlFormBuilder
+    deprecate_constant :ShoelaceFormBuilder
+
+    DEFAULT_FORM_PARAMETERS = { builder: SlFormBuilder }
+    DIVIDER_TAG = "<sl-divider></sl-divider>".html_safe
+
+    private_constant :DEFAULT_FORM_PARAMETERS, :DIVIDER_TAG
+
+    def sl_form_for(*args, **options, &block)
+      form_for(*args, **DEFAULT_FORM_PARAMETERS, **options, &block)
+    end
+
+    def sl_form_with(**args, &block)
+      form_with(**args, **DEFAULT_FORM_PARAMETERS, &block)
+    end
+
+    # Creates a submit button with the text value as the caption, with the +submit+ attribute.
+    def sl_submit_tag(value = 'Save changes', **options)
+      options = options.deep_stringify_keys
+      tag_options = { "type" => "submit", "variant" => "primary" }.update(options)
+      set_default_disable_with(value, tag_options)
+
+      content_tag('sl-button', value, tag_options)
+    end
+
+    # Creates a shoelace text field; use these text fields to input smaller chunks of text like a username or a search
+    # query.
+    #
+    # For the properties available on this tag, please refer to the official documentation:
+    #   https://shoelace.style/components/input?id=properties
+    #
+    def sl_text_field_tag(name, value = nil, **options, &block)
+      content_tag('sl-input', '', { "type" => "text", "name" => name, "id" => sanitize_to_id(name), "value" => value }.update(options.stringify_keys), &block)
+    end
+
+    # Returns a string of +<sl-option>+ tags, like +options_for_select+, but prepends a +<small>+ tag to
+    # each group.
+    def grouped_sl_options_for_select(grouped_options, options)
+      body = "".html_safe
+
+      grouped_options.each_with_index do |container, index|
+        label, values = container
+
+        body.safe_concat(DIVIDER_TAG) if index > 0
+        body.safe_concat(content_tag("small", label)) if label.present?
+        body.safe_concat(sl_options_for_select(values, options))
+      end
+
+      body
+    end
+
+    # Accepts an enumerable (hash, array, enumerable, your type) and returns a string of +sl-option+ tags. Given
+    # an enumerable where the elements respond to +first+ and +last+ (such as a two-element array), the “lasts” serve
+    # as option values and the “firsts” as option text.
+    def sl_options_for_select(enumerable, options = nil)
+      return enumerable if String === enumerable
+
+      selected, disabled = extract_selected_and_disabled(options).map { |r| Array(r).map(&:to_s) }
+
+      enumerable.map do |element|
+        html_attributes = option_html_attributes(element)
+        text, value = option_text_and_value(element).map(&:to_s)
+
+        html_attributes[:checked] ||= selected.include?(value)
+        html_attributes[:disabled] ||= disabled.include?(value)
+        html_attributes[:value] = value
+
+        tag_builder.content_tag_string('sl-option', text, html_attributes)
+      end.join("\n").html_safe
+    end
+
+    def sl_option_groups_from_collection_for_select(collection, group_method, group_label_method, option_key_method, option_value_method, selected_key = nil)
+      body = "".html_safe
+
+      collection.each_with_index do |group, index|
+        option_tags = sl_options_from_collection_for_select(value_for_collection(group, group_method), option_key_method, option_value_method, selected_key)
+
+        body.safe_concat(DIVIDER_TAG) if index > 0
+        body.safe_concat(content_tag("small", value_for_collection(group, group_label_method)))
+        body.safe_concat(option_tags)
+      end
+
+      body
+    end
+
+    # Returns a string of +<sl-option>+ tags compiled by iterating over the collection and assigning the result of
+    # a call to the +value_method+ as the option value and the +text_method+ as the option text.
+    def sl_options_from_collection_for_select(collection, value_method, text_method, selected = nil)
+      options = collection.map do |element|
+        [value_for_collection(element, text_method), value_for_collection(element, value_method), option_html_attributes(element)]
+      end
+
+      selected, disabled = extract_selected_and_disabled(selected)
+
+      select_deselect = {
+        selected: extract_values_from_collection(collection, value_method, selected),
+        disabled: extract_values_from_collection(collection, value_method, disabled)
+      }
+
+      sl_options_for_select(options, select_deselect)
+    end
+
+    # Returns a +<sl-radio>+ tag for accessing a specified attribute (identified by method) on an object assigned to
+    # the template (identified by object). If the current value of method is +tag_value+ the radio button will be
+    # checked.
+    #
+    # To force the radio button to be checked pass checked: true in the options hash. You may pass HTML options there
+    # as well.
+    def sl_radio_button(object_name, method, tag_value, options = {}, &block)
+      Components::SlRadioButton.new(object_name, method, self, tag_value, options).render(&block)
+    end
+
+    {
+      email: :email,
+      number: :number,
+      password: :password,
+      search: :search,
+      telephone: :tel,
+      phone: :tel,
+      url: :url
+    }.each do |field_type, field_class|
+      # def sl_email_field_tag(method, **options, &block)
+      #   sl_text_field_tag(name, value, options.merge(type: :email))
+      # end
+      eval <<-RUBY, nil, __FILE__, __LINE__ + 1
+        # Creates a text field of type “#{field_type}”.
+        def sl_#{field_type}_field_tag(method, **options, &block)
+          sl_text_field_tag(name, value, options.merge(type: :#{field_class}))
+        end
+      RUBY
+    end
+  end
+end

data/lib/shoelace/rails/version.rb

@@ -2,6 +2,6 @@
 
 module Shoelace
   module Rails
-    VERSION = "0.6.2"
+    VERSION = "0.7.0"
   end
 end

data/lib/shoelace/railtie.rb

@@ -30,7 +30,7 @@ module Shoelace
     # Path to the shoelace assets.
     config.shoelace.dist_path = "node_modules/@shoelace-style/shoelace/dist"
 
-    # Class name that is added to a form input when the corresponding attribute has an `ActiveModel` error.
+    # Deprecated.
     config.shoelace.invalid_input_class_name = nil
 
     initializer "shoelace.use_rack_middleware" do |app|
@@ -45,9 +45,7 @@ module Shoelace
     end
 
     initializer "shoelace.form_helper" do |app|
-      ActiveSupport.on_load :action_view do
-        Shoelace.invalid_input_class_name = app.config.shoelace.invalid_input_class_name
-      end
+      # This exists only for maintaining backwards compatibility with the `invalid_input_class_name` option.
     end
 
     rake_tasks do