bs5 0.0.23 → 0.0.28

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fde2cc4be44c7ef1b396e7761904765ee31f1801acb7a88b1f4507cf302994c2
-  data.tar.gz: d69a795e889ece4139479843c7e2e5f6ffa48df347f0463529513060c1401214
+  metadata.gz: 215200d1f6820e7e163cbd6b214f9952645e225f535c45a34254ef53f445480a
+  data.tar.gz: cc2f9daf0107719ee613670620ddb42e42a08b995bb32a7348003f9b74761584
 SHA512:
-  metadata.gz: 4474fe20875677d9e8f45ca929d8e3ee95d6919a65065d472d2e12d9b74b765c6f491398b7691b8bf85b8a35d2b4cdc807839648f007a4836c47768ab865ac74
-  data.tar.gz: d70751a40bda629d0ba59324cab991b94dca962248ec22625edd36344750476830ed655a4fd21c3b3e3a7b133609217c33267c96df3af39125a3600f3be5539b
+  metadata.gz: 8361ad156b1c5aa5a2e8d2e85482a891792fe28693aff0ab0de36a7acc258d1818934512a7b9c76d4be17de2e96f0c6207affa1f5765add53cff6bc83e999b74
+  data.tar.gz: 978c438199e216476b87a1eef92dcab0b9b8d828daca289c4eb7cc8b97fa802f75ef4620c06541870caeca578845303eb874fde87988036bea462918e5d0fc97

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

@@ -1,6 +1,6 @@
 <div class="<%= component_class %>" role="alert">
   <%= content %>
   <%- if is_dismissable %>
-    <%= render Bs5::CloseButtonComponent.new(data: { 'bs-dismiss': :alert }) %>
+    <%= bs5_close_button(dismiss: :alert) %>
   <%- end %>
 </div>

data/app/components/bs5/alert_component.rb

@@ -2,6 +2,7 @@
 
 module Bs5
   class AlertComponent < ViewComponent::Base
+    include ComponentsHelper
     STYLES = %i[primary secondary success danger warning info light dark].freeze
 
     attr_reader :color, :is_dismissable

data/app/components/bs5/button_tag_component.rb

@@ -47,6 +47,7 @@ module Bs5
       extract_color
       extract_outline
       extract_size
+      extract_dismiss
     end
 
     def extract_color
@@ -61,6 +62,10 @@ module Bs5
       @size = @options.delete(:size)
     end
 
+    def extract_dismiss
+      @dismiss = @options.delete(:dismiss)
+    end
+
     def merge_default_options
       @options.deep_merge!(default_options) do |_key, this_val, other_val|
         [this_val, other_val].join(' ').strip
@@ -68,7 +73,11 @@ module Bs5
     end
 
     def default_options
-      { class: button_class }
+      default_options = { class: button_class }
+
+      default_options[:data] = { 'bs-dismiss': @dismiss } if @dismiss
+
+      default_options
     end
 
     def button_class

data/app/components/bs5/carousel/caption_component.html.erb

@@ -0,0 +1,3 @@
+<div class="carousel-caption d-none d-md-block">
+  <%= content %>
+</div>

data/app/components/bs5/carousel/caption_component.rb

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

data/app/components/bs5/carousel/item_component.html.erb

@@ -0,0 +1,4 @@
+<%= tag.div(component_attributes) do %>
+  <%= content %>
+  <%= caption %>
+<% end %>

data/app/components/bs5/carousel/item_component.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Carousel
+    class ItemComponent < ViewComponent::Base
+      include ViewComponent::SlotableV2
+      using HashRefinement
+
+      COMPONENT_OPTIONS = %i[interval].freeze
+
+      renders_one :caption, Bs5::Carousel::CaptionComponent
+
+      attr_accessor :active
+
+      def initialize(options = {})
+        @options = options.symbolize_keys
+        extract_options
+      end
+
+      def active?
+        active
+      end
+
+      private
+
+      def extract_options
+        extract_component_options
+      end
+
+      def extract_component_options
+        @component_options = @options.extract!(*COMPONENT_OPTIONS)
+      end
+
+      def component_attributes
+        { class: component_classes,
+          data: @component_options.prefix_keys_with_bs }
+      end
+
+      def component_classes
+        class_names = %w[carousel-item]
+        class_names << 'active' if active?
+
+        class_names
+      end
+
+      def content
+        set_element_class_names
+        element.to_html.html_safe # rubocop:disable Rails/OutputSafety
+      end
+
+      def set_element_class_names
+        class_names = Array(element[:class])
+        class_names << element_classes
+        element[:class] = class_names.join(' ')
+      end
+
+      def element_classes
+        %w[d-block w-100]
+      end
+
+      def element
+        @element ||= begin
+          if (elements = Nokogiri::HTML::DocumentFragment.parse(@content).elements).one?
+            elements.first
+          end
+        end
+      end
+
+      def element?
+        !!element
+      end
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+<%= tag.div(component_attributes) do %>
+  <% items.each_with_index do |item, index| %>
+    <% item.active = index.zero? %>
+  <% end %>
+
+  <% if indicators? %>
+    <ol class="carousel-indicators">
+      <% items.each_with_index do |item, index| %>
+        <li data-bs-target="#<%= id %>" data-bs-slide-to="<%= index %>" class="<%= item.active? ? 'active' : '' %>"></li>
+      <% end %>
+    </ol>
+  <% end %>
+
+  <div class="carousel-inner">
+    <% items.each_with_index do |item, index| %>
+      <%= item %>
+    <% end %>
+  </div>
+
+  <% if controls? %>
+    <a class="carousel-control-prev" href="#<%= id %>" role="button" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+    </a>
+    <a class="carousel-control-next" href="#<%= id %>" role="button" data-bs-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Next</span>
+    </a>
+  <% end %>
+<% end %>

data/app/components/bs5/carousel_component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Bs5
+  class CarouselComponent < ViewComponent::Base
+    include ComponentsHelper
+    include ViewComponent::SlotableV2
+    using HashRefinement
+
+    CAROUSEL_OPTIONS = %i[interval keyboard pause slide wrap touch].freeze
+
+    renders_many :items, Bs5::Carousel::ItemComponent
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+      extract_options
+    end
+
+    private
+
+    def extract_options
+      @controls = @options.delete(:controls)
+      @indicators = @options.delete(:indicators)
+      @crossfade = @options.delete(:crossfade)
+      @dark = @options.delete(:dark)
+
+      extract_carousel_options
+    end
+
+    def extract_carousel_options
+      @carousel_options = @options.extract!(*CAROUSEL_OPTIONS)
+    end
+
+    def id
+      "carousel-#{object_id}"
+    end
+
+    def items_count
+      items.size
+    end
+
+    def component_attributes
+      { class: component_class,
+        id: id,
+        data: @carousel_options.merge(ride: :carousel).prefix_keys_with_bs }
+    end
+
+    def component_class
+      class_names = %w[carousel slide]
+      class_names << %w[carousel-fade] if crossfade?
+      class_names << %w[carousel-dark] if dark?
+      class_names.join(' ')
+    end
+
+    %i[controls indicators crossfade dark].each do |name|
+      define_method("#{name}?") do
+        !instance_variable_get("@#{name}").nil?
+      end
+    end
+  end
+end

data/app/components/bs5/close_button_component.rb

@@ -2,12 +2,19 @@
 
 module Bs5
   class CloseButtonComponent < ViewComponent::Base
-    attr_reader :data
+    def initialize(options = {})
+      @options = options.symbolize_keys
 
-    def initialize(disabled: false, white: false, data: nil)
-      @disabled = disabled
-      @white = white
-      @data = data
+      @disabled = options.delete(:disabled)
+      @white = options.delete(:white)
+      @dismiss = options.delete(:dismiss)
+      @data = options.fetch(:data, {})
+    end
+
+    def data
+      @data['bs-dismiss'] = @dismiss if @dismiss
+
+      @data
     end
 
     private
@@ -21,7 +28,8 @@ module Bs5
     end
 
     def component_class
-      class_names = ['btn-close']
+      class_names = Array(@options[:class])
+      class_names << 'btn-close'
       class_names << %w[btn-close-white] if white?
       class_names.join(' ')
     end

data/app/components/bs5/dropdown/item_component.html.erb

@@ -0,0 +1 @@
+<li><%= content || tag.hr(class: 'dropdown-divider') %></li>

data/app/components/bs5/dropdown/item_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Dropdown
+    class ItemComponent < ViewComponent::Base
+      private
+
+      def content
+        return nil if @content.blank?
+
+        if actionable_element?
+          set_actionable_element_class_names
+          actionable_element.to_html.html_safe # rubocop:disable Rails/OutputSafety
+        else
+          @content
+        end
+      end
+
+      def set_actionable_element_class_names
+        class_names = Array(actionable_element[:class])
+        class_names << 'dropdown-item'
+        actionable_element[:class] = class_names.join(' ')
+      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/dropdown_component.html.erb

@@ -0,0 +1,22 @@
+<% if split? %>
+  <% if dropstart? %>
+    <%= bs5_button_group do %>
+      <div class="<%= component_class %>">
+        <%= split_button_toggle %>
+        <%= menu_content %>
+      </div>
+      <%= split_button %>
+    <% end %>
+  <% else %>
+    <div class="<%= component_class %>">
+      <%= split_button %>
+      <%= split_button_toggle %>
+      <%= menu_content %>
+    </div>
+  <% end %>
+<% else %>
+  <div class="<%= component_class %>">
+    <%= single_button %>
+    <%= menu_content %>
+  </div>
+<% end %>

data/app/components/bs5/dropdown_component.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+module Bs5
+  class DropdownComponent < ViewComponent::Base # rubocop:disable Metrics/ClassLength
+    include ViewComponent::SlotableV2
+    include ComponentsHelper
+    using HashRefinement
+
+    CLASS_PREFIX = 'dropdown'
+    CLASS_NAMES = {
+      visually_hidden: 'visually-hidden',
+      toggle_split: "#{CLASS_PREFIX}-toggle-split",
+      toggle: "#{CLASS_PREFIX}-toggle",
+      menu: "#{CLASS_PREFIX}-menu",
+      menu_dark: "#{CLASS_PREFIX}-menu-dark",
+      menu_end: "#{CLASS_PREFIX}-menu-end"
+    }.freeze
+    DIRECTIONS = {
+      up: :dropup,
+      end: :dropend,
+      start: :dropstart
+    }.with_indifferent_access.freeze
+    DROPDOWN_OPTIONS = %i[offset flip boundary reference display].freeze
+
+    renders_many :items, Bs5::Dropdown::ItemComponent
+    attr_reader :title
+
+    def initialize(content_or_options = nil, options = {})
+      if content_or_options.is_a? Hash
+        @options = content_or_options.symbolize_keys
+      else
+        @title = content_or_options
+        @options = options.symbolize_keys
+      end
+
+      extract_options
+    end
+
+    private
+
+    def extract_options
+      @split = @options.delete(:split)
+      @dark = @options.delete(:dark)
+      @direction = @options.delete(:direction)
+      @align = @options.delete(:align)
+
+      extract_dropdown_options
+    end
+
+    def extract_dropdown_options
+      @dropdown_options = @options.extract!(*DROPDOWN_OPTIONS)
+    end
+
+    def split_button_toggle
+      bs5_button_tag(split_button_toggle_options) do
+        tag.span('Toggle Dropdown', class: CLASS_NAMES[:visually_hidden])
+      end
+    end
+
+    def split_button
+      bs5_button_tag title, split_button_options
+    end
+
+    def single_button
+      bs5_button_tag title, single_button_options
+    end
+
+    def menu_content
+      if items.any?
+        tag.ul(class: dropdown_menu_classes) { items.map(&method(:concat)) }
+      else
+        tag.div(content, class: dropdown_menu_classes)
+      end
+    end
+
+    def single_button_options
+      @options.merge(default_options)
+    end
+
+    def component_class
+      class_names = split? ? ['btn-group'] : [CLASS_PREFIX]
+      class_names << DIRECTIONS[@direction] if direction?
+
+      class_names.join(' ')
+    end
+
+    def split_button_options
+      @options.merge(default_button_options)
+    end
+
+    def split_button_toggle_options
+      single_button_options.dup.tap do |h|
+        h[:class] += " #{CLASS_NAMES[:toggle_split]}"
+      end
+    end
+
+    %i[split dark direction].each do |name|
+      define_method("#{name}?") do
+        !instance_variable_get("@#{name}").nil?
+      end
+    end
+
+    def dropstart?
+      @direction == :start
+    end
+
+    def default_button_options
+      { type: :button }
+    end
+
+    def default_options
+      default_button_options.merge({
+                                     data: default_data_options.merge(@dropdown_options).prefix_keys_with_bs,
+                                     aria: { expanded: false },
+                                     class: CLASS_NAMES[:toggle]
+                                   })
+    end
+
+    def default_data_options
+      { toggle: :dropdown }.tap do |h|
+        h[:display] = 'static' if responsive_align?
+      end
+    end
+
+    def dropdown_menu_classes
+      class_names = [CLASS_NAMES[:menu]]
+      class_names << CLASS_NAMES[:menu_dark] if dark?
+      class_names << align_classes
+
+      class_names.compact.join(' ')
+    end
+
+    def align_classes
+      case @align
+      when Symbol
+        CLASS_NAMES[:menu_end]
+      when Hash
+        responsive_align_classes
+      end
+    end
+
+    def responsive_align_classes
+      k, v = @align.first
+      class_names = ["#{CLASS_PREFIX}-menu-#{v}-#{k}"]
+      class_names << CLASS_NAMES[:menu_end] if @align.with_indifferent_access.key?(:start)
+
+      class_names
+    end
+
+    def responsive_align?
+      @align.is_a? Hash
+    end
+  end
+end