bs5 0.0.26 → 0.0.31

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14b5dca44bb60e64b8eb925c7a617c2e7f6214bf33e1d35a44454b0fc617351c
-  data.tar.gz: 49dc980ff0a533774090543e1f8920c3ae7d4d4037c9fd84a5aa3425bb1a8faf
+  metadata.gz: 1c86a9e7b0f6d9206edcb412b45574112e5d5a4b3cf7bb6e7232c9622a539f0b
+  data.tar.gz: 27ae2ba4e66fe54247f339c9a0b221267317f106d99c8a8fa073621dca445116
 SHA512:
-  metadata.gz: 2329cc993b4ab1d5930802dfab3f71d878843ce20ebc51bd861c488179e9c4f993b81e48bf1fca791af6886e735de751bbe4ae90f04e641249409e4bade1fc0f
-  data.tar.gz: ae01cfa6597d19ea0cacff53947b70f3ca8e4c0da463ede006ceef58268efa021a8851684bda0f1702db6a6092b15239fc9b633d62877bed44c2bf330e85b0dd
+  metadata.gz: 5da95224fa4acaf34acf85c196ea882b3296bf7c0120753971888c1c228a3d352c37ef50ed3fabff3fb972c9528c40552de1415f149c3686b50b712f0c82219a
+  data.tar.gz: 6ca0a9dbd9cefdac7d8ab6160017b90df1ea522d09b0a959bf23a08ac00ac1de457c99ac097d7dd7ca92c4fcdd79eb1fa8dd98f82255371b0d70c48ff9b699ee

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/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/nav/item_component.html.erb

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

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

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Nav
+    class ItemComponent < ViewComponent::Base
+      def initialize(options = {})
+        @options = options.symbolize_keys
+        extract_options
+      end
+
+      private
+
+      def extract_options
+        @active = @options.delete(:active)
+        @disabled = @options.delete(:disabled)
+      end
+
+      def content
+        set_element_attributes
+        fragment.to_html.html_safe # rubocop:disable Rails/OutputSafety
+      end
+
+      def set_element_attributes
+        element['aria-current'] = 'page' if active?
+
+        if disabled?
+          element['aria-disabled'] = true
+          element['tabindex'] = -1
+        end
+
+        set_element_class_names
+        element.replace(element.to_html)
+      end
+
+      def set_element_class_names
+        class_names = Array(element[:class])
+        class_names << Array(@options[:class])
+        class_names << extra_classes
+        element[:class] = class_names.compact.uniq.join(' ')
+      end
+
+      def extra_classes
+        class_names = element_classes
+        class_names << active_class
+        class_names << disabled_class
+        class_names.compact.uniq
+      end
+
+      def element_classes
+        %w[nav-link]
+      end
+
+      def active_class
+        return unless active?
+
+        %w[active]
+      end
+
+      def disabled_class
+        return unless disabled?
+
+        %w[disabled]
+      end
+
+      def element
+        @element ||= fragment.at_css('button', 'a')
+      end
+
+      def fragment
+        @fragment ||= Nokogiri::HTML::DocumentFragment.parse(@content)
+      end
+
+      %i[active disabled].each do |name|
+        define_method("#{name}?") do
+          !!instance_variable_get("@#{name}")
+        end
+      end
+    end
+  end
+end