bs5 0.0.25 → 0.0.30

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93ea7a16c5cb16edd48cabe938083b466af2171b895c9bfb7ca3da0e7bd9cf6a
-  data.tar.gz: 35bb524562a071eaf46e05da49b951e1606b27524f6e242d10be7a5cb6a4eeca
+  metadata.gz: 3cddc2280bdce3dfc49c8c980c0176cbdf80f0f5ad5ecf462482d3514818a7a9
+  data.tar.gz: 3b9c82cf6f9eeabb0752a9ab8f5d2c7019b339cc86dcd389d844d4eccb04c65d
 SHA512:
-  metadata.gz: 011e84f5073b6cd7c6d9b3d2de76f077fedaeaa87f0e8c2aba6efa48457ffe271e8f3d589ec2b2d59eacccdf0a088e968921f3db682c1a846acb94e6ea7c2815
-  data.tar.gz: 66f86657bfd99ce53af4ea76123b72eed77454ed885b8c033a16fe6e579b67d20be9aa187a982687c80a80e49921577e107b249d081a8fa538b6bdbbef7080fc
+  metadata.gz: c55b185ac6ee246cb9f2b0e853f13238b2f8c90962e2472c69a89d599d9cf003b3a4224718b3dd2d1991e106f7344c214ec9a68eb799101892b115c703fb41e8
+  data.tar.gz: b7bd776ed2d0701f63672cb1a4242c5d7e4a9f4f14ff597b9ef79bf9eb88e2f44098b6ce43c573ae3cd8c3601890a3aeed8a4e9c5960c8c5706ec2fc0f9c2378

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/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

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