bs5 0.0.23 → 0.0.28

data/app/components/bs5/modal/body_component.html.erb

@@ -0,0 +1,3 @@
+<div class="modal-body">
+  <%= content %>
+</div>

data/app/components/bs5/modal/body_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Modal
+    class BodyComponent < ViewComponent::Base
+    end
+  end
+end

data/app/components/bs5/modal/controller_component.html.erb

@@ -0,0 +1 @@
+<%= content %>

data/app/components/bs5/modal/controller_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Modal
+    class ControllerComponent < ViewComponent::Base
+      def initialize(modal_id:)
+        @modal_id = modal_id
+      end
+
+      def content
+        return nil if @content.blank?
+
+        if actionable_element?
+          set_actionable_element_attributes
+          actionable_element.to_html.html_safe # rubocop:disable Rails/OutputSafety
+        else
+          @content
+        end
+      end
+
+      def set_actionable_element_attributes
+        actionable_element['data-bs-toggle'] = 'modal'
+        actionable_element['data-bs-target'] = "##{@modal_id}"
+      end
+
+      def actionable_element
+        @actionable_element ||= begin
+          if (elements = Nokogiri::HTML::DocumentFragment.parse(@content).elements).one? &&
+             (element = elements.first).name.in?(%w[a button])
+            element
+          end
+        end
+      end
+
+      def actionable_element?
+        !!actionable_element
+      end
+    end
+  end
+end

data/app/components/bs5/modal/footer_component.html.erb

@@ -0,0 +1,4 @@
+<div class="modal-footer">
+  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+  <%= content %>
+</div>

data/app/components/bs5/modal/footer_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Modal
+    class FooterComponent < ViewComponent::Base
+    end
+  end
+end

data/app/components/bs5/modal/header_component.html.erb

@@ -0,0 +1,4 @@
+<div class="modal-header">
+  <h5 class="modal-title" id="<%= @label_id %>"><%= content %></h5>
+  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+</div>

data/app/components/bs5/modal/header_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Modal
+    class HeaderComponent < ViewComponent::Base
+      attr_reader :title
+
+      def initialize(title: nil, label_id: nil)
+        @title = title
+        @label_id = label_id
+      end
+
+      def content
+        title || @content
+      end
+    end
+  end
+end

data/app/components/bs5/modal_component.html.erb

@@ -0,0 +1,11 @@
+<%= controller %>
+
+<%= tag.div(modal_attributes) do %>
+  <div class="<%= dialog_classes %>">
+    <div class="modal-content">
+      <%= header %>
+      <%= body %>
+      <%= footer %>
+    </div>
+  </div>
+<% end %>

data/app/components/bs5/modal_component.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ModalComponent < ViewComponent::Base
+    include ViewComponent::SlotableV2
+    using HashRefinement
+
+    MODAL_OPTIONS = %i[backdrop keyboard focus].freeze
+
+    renders_one :controller, lambda { |_modal_id: nil|
+      Bs5::Modal::ControllerComponent.new(modal_id: modal_id)
+    }
+    renders_one :header, lambda { |_label_id: nil|
+      Bs5::Modal::HeaderComponent.new(label_id: label_id)
+    }
+    renders_one :body, Bs5::Modal::BodyComponent
+    renders_one :footer, Bs5::Modal::FooterComponent
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+      extract_options
+    end
+
+    private
+
+    def extract_options
+      @scroll = @options.delete(:scroll)
+      @center = @options.delete(:center)
+      @size = @options.delete(:size)
+      @fullscreen = @options.delete(:fullscreen)
+
+      extract_modal_options
+    end
+
+    def extract_modal_options
+      @modal_options = @options.extract!(*MODAL_OPTIONS)
+    end
+
+    def modal_attributes
+      { class: 'modal fade',
+        id: modal_id,
+        tabindex: -1,
+        aria: { labelledby: label_id, hidden: true },
+        data: @modal_options.prefix_keys_with_bs }
+    end
+
+    def dialog_classes
+      class_names = ['modal-dialog']
+      class_names << 'modal-dialog-scrollable' if scroll?
+      class_names << 'modal-dialog-centered' if center?
+      class_names << "modal-#{@size}" if size?
+      class_names << fullscreen_class
+
+      class_names.join(' ')
+    end
+
+    def fullscreen_class
+      return unless fullscreen?
+
+      class_name = %w[modal fullscreen]
+      class_name << [@fullscreen, 'down'] if @fullscreen.is_a?(Symbol)
+
+      class_name.join('-')
+    end
+
+    def modal_id
+      "modal-#{object_id}"
+    end
+
+    def label_id
+      "modal-label-#{object_id}"
+    end
+
+    %i[scroll center size fullscreen].each do |name|
+      define_method("#{name}?") do
+        !instance_variable_get("@#{name}").nil?
+      end
+    end
+  end
+end

data/app/components/bs5/toast/body_component.html.erb

@@ -0,0 +1,3 @@
+<div class="toast-body">
+  <%= content %>
+</div>

data/app/components/bs5/toast/body_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Toast
+    class BodyComponent < ViewComponent::Base
+    end
+  end
+end

data/app/components/bs5/toast/header_component.html.erb

@@ -0,0 +1,4 @@
+<div class="toast-header">
+  <%= content %>
+  <%= bs5_close_button(dismiss: :toast) %>
+</div>

data/app/components/bs5/toast/header_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Toast
+    class HeaderComponent < ViewComponent::Base
+      include ComponentsHelper
+    end
+  end
+end

data/app/components/bs5/toast_component.html.erb

@@ -0,0 +1,8 @@
+<%= tag.div(component_attributes) do %>
+  <%= header %>
+  <%= body %>
+
+  <%- if close_button? && !header? %>
+    <%= bs5_close_button(white: white_text?, class: 'ms-auto me-2', dismiss: :toast) %>
+  <% end %>
+<% end %>

data/app/components/bs5/toast_component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ToastComponent < ViewComponent::Base
+    include ViewComponent::SlotableV2
+    include ComponentsHelper
+    using HashRefinement
+
+    attr_reader :color
+
+    renders_one :header, Bs5::Toast::HeaderComponent
+    renders_one :body, Bs5::Toast::BodyComponent
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+      @color = @options.delete(:color)
+      @close_button = @options.fetch(:close_button, true)
+      @data_options = @options.extract!(:animation, :autohide, :delay)
+    end
+
+    def header?
+      !!header
+    end
+
+    def component_attributes
+      default_options = {
+        role: :alert,
+        aria: { live: 'assertive', atomic: true },
+        data: data_options
+      }
+
+      @options[:class] = component_class
+
+      @options.merge(default_options)
+    end
+
+    def white_text?
+      color? && color.in?(%i[primary secondary success danger dark])
+    end
+
+    private
+
+    def data_options
+      @data_options.prefix_keys_with_bs
+    end
+
+    def component_class
+      class_names = Array(@options[:class])
+      class_names << 'toast'
+      class_names << contextual_class
+      class_names.compact.join(' ')
+    end
+
+    def contextual_class
+      return unless color?
+
+      class_names = ['border-0']
+      class_names << "bg-#{color}"
+      class_names << 'text-white' if white_text?
+
+      class_names
+    end
+
+    def color?
+      !!color
+    end
+
+    def close_button?
+      @close_button
+    end
+  end
+end

data/app/components/bs5/toast_container_component.html.erb

@@ -0,0 +1,3 @@
+<div class="<%= component_class %>"">
+  <%= content %>
+</div>

data/app/components/bs5/toast_container_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ToastContainerComponent < ViewComponent::Base
+    def initialize(options = {})
+      @options = options.symbolize_keys
+    end
+
+    def component_class
+      class_names = Array(@options[:class])
+      class_names << 'toast-container'
+      class_names.compact.join(' ')
+    end
+
+    def render?
+      content.present?
+    end
+  end
+end

data/app/helpers/bs5/components_helper.rb

@@ -2,8 +2,9 @@
 
 module Bs5
   module ComponentsHelper
-    COMPONENTS = %w[accordion alert badge close_button breadcrumb button_group button_tag button_to button_toolbar
-                    list_group spinner].freeze
+    COMPONENTS = %w[accordion alert badge breadcrumb button_group button_tag button_to button_toolbar
+                    carousel close_button
+                    dropdown list_group modal spinner toast toast_container].freeze
 
     COMPONENTS.each do |name|
       define_method("bs5_#{name}") do |*args, &block|

data/app/views/bs5/examples/alert/color/snippet.html.erb

@@ -1,31 +1,15 @@
-<%= bs5_alert(color: :primary) do %>
-  A simple primary alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :primary) { "A simple primary alert—check it out!" } %>
 
-<%= bs5_alert(color: :secondary) do %>
-  A simple secondary alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :secondary) { "A simple secondary alert—check it out!" } %>
 
-<%= bs5_alert(color: :success) do %>
-  A simple success alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :success) { "A simple success alert—check it out!" } %>
 
-<%= bs5_alert(color: :danger) do %>
-  A simple danger alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :danger) { "A simple danger alert—check it out!" } %>
 
-<%= bs5_alert(color: :warning) do %>
-  A simple warning alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :warning) { "A simple warning alert—check it out!" } %>
 
-<%= bs5_alert(color: :info) do %>
-  A simple info alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :info) { "A simple info alert—check it out!" } %>
 
-<%= bs5_alert(color: :light) do %>
-  A simple light alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :light) { "A simple light alert—check it out!" } %>
 
-<%= bs5_alert(color: :dark) do %>
-  A simple dark alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :dark) { "A simple dark alert—check it out!" } %>

data/app/views/bs5/examples/alert/default/snippet.html.erb

@@ -1,3 +1 @@
-<%= bs5_alert do %>
-  A simple primary alert—check it out!
-<%- end %>
+<%= bs5_alert { "A simple primary alert—check it out!" } %>

data/app/views/bs5/examples/carousel/_dark_variant.html.erb

@@ -0,0 +1,2 @@
+<h2>Dark variant</h2>
+<%= bs5_example(snippet: 'carousel/dark_variant/snippet1') %>

data/app/views/bs5/examples/carousel/_examples.html.erb

@@ -0,0 +1,13 @@
+<h2>Examples</h2>
+<h3>Slides only</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet1') %>
+<h3>With controls</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet2') %>
+<h3>With indicators</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet3') %>
+<h3>With captions</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet4') %>
+<h3>Crossfade</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet5') %>
+<h3>Individual <code>.carousel-item</code> interval</h3>
+<%= bs5_example(snippet: 'carousel/examples/snippet6') %>

data/app/views/bs5/examples/carousel/dark_variant/snippet1.html.erb

@@ -0,0 +1,25 @@
+<%= bs5_carousel(controls: true, indicators: true, dark: true) do |c| %>
+  <% c.item do |i| %>
+    <%= image_tag 'https://picsum.photos/id/131/800/400?grayscale' %>
+    <%= i.caption do %>
+      <h5>First slide label</h5>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    <% end %>
+  <% end %>
+
+  <% c.item do |i| %>
+    <%= image_tag 'https://picsum.photos/id/383/800/400?grayscale' %>
+    <%= i.caption do %>
+      <h5>Second slide label</h5>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    <% end %>
+  <% end %>
+
+  <% c.item do |i| %>
+    <%= image_tag 'https://picsum.photos/id/130/800/400' %>
+    <%= i.caption do %>
+      <h5>Third slide label</h5>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/carousel/examples/snippet1.html.erb

@@ -0,0 +1,13 @@
+<%= bs5_carousel do |c| %>
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=1' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=2' %>
+  <% end %>
+
+  <% c.item do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=3' %>
+  <% end %>
+<% end %>