bs5 0.0.27 → 0.0.28

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5bd6c6c2f823f5b4ba980c7ef01db9381fe5fa6c02e4b82dc101a6765b8bfc22
-  data.tar.gz: 16c43758c937dab60f50f331f56e31dd75aa2df4f982c803c340fe449302a346
+  metadata.gz: 215200d1f6820e7e163cbd6b214f9952645e225f535c45a34254ef53f445480a
+  data.tar.gz: cc2f9daf0107719ee613670620ddb42e42a08b995bb32a7348003f9b74761584
 SHA512:
-  metadata.gz: e55c062be7d27cbe65efa1dd098b5ae1e26f4a5fc919ac22e5e8267a4d7c269cfc29fa15077444d3be082ccb9d7211fa27d3b1fbaa63c26e847665fcb0a30279
-  data.tar.gz: 13300ddc486bed84d11bae9d30cc2078fc60951a833ace82e07828228865bc3858f416e41dea9ff4e459b7df0912d1c04b0336596bacff8553b941dc8e660854
+  metadata.gz: 8361ad156b1c5aa5a2e8d2e85482a891792fe28693aff0ab0de36a7acc258d1818934512a7b9c76d4be17de2e96f0c6207affa1f5765add53cff6bc83e999b74
+  data.tar.gz: 978c438199e216476b87a1eef92dcab0b9b8d828daca289c4eb7cc8b97fa802f75ef4620c06541870caeca578845303eb874fde87988036bea462918e5d0fc97

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/helpers/bs5/components_helper.rb

@@ -2,7 +2,8 @@
 
 module Bs5
   module ComponentsHelper
-    COMPONENTS = %w[accordion alert badge breadcrumb button_group button_tag button_to button_toolbar close_button
+    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|

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

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

@@ -0,0 +1,13 @@
+<%= bs5_carousel(controls: true) 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 %>

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

@@ -0,0 +1,13 @@
+<%= bs5_carousel(controls: true, indicators: true) 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 %>

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

@@ -0,0 +1,25 @@
+<%= bs5_carousel(controls: true, indicators: true) do |c| %>
+  <% c.item do |i| %>
+    <%= image_tag 'https://picsum.photos/id/1042/800/400?blur=2' %>
+    <%= 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/195/800/400?blur=2' %>
+    <%= 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/960/800/400?blur=2' %>
+    <%= 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/snippet5.html.erb

@@ -0,0 +1,13 @@
+<%= bs5_carousel(controls: true, crossfade: true) 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 %>

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

@@ -0,0 +1,13 @@
+<%= bs5_carousel(controls: true, crossfade: true) do |c| %>
+  <% c.item(interval: 10_000) do %>
+    <%= image_tag 'https://picsum.photos/800/400?random=1' %>
+  <% end %>
+
+  <% c.item(interval: 2_000) 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 %>

data/app/views/bs5/pages/carousel.html.erb

@@ -0,0 +1,3 @@
+<h1>Carousel</h1>
+<%= render 'bs5/examples/carousel/examples' %>
+<%= render 'bs5/examples/carousel/dark_variant' %>

data/app/views/layouts/bs5/pages.html.erb

@@ -21,6 +21,7 @@
             <% lg.item(active: current_page?(pages_path('buttons'))) do %><%= link_to 'Buttons', pages_path('buttons') %><% end %>
             <% lg.item(active: current_page?(pages_path('button_group'))) do %><%= link_to 'Button group', pages_path('button_group') %><% end %>
             <% lg.item(active: current_page?(pages_path('close_button'))) do %><%= link_to 'Close button', pages_path('close_button') %><% end %>
+            <% lg.item(active: current_page?(pages_path('carousel'))) do %><%= link_to 'Carousel', pages_path('carousel') %><% end %>
             <% lg.item(active: current_page?(pages_path('collapse'))) do %><%= link_to 'Collapse', pages_path('collapse') %><% end %>
             <% lg.item(active: current_page?(pages_path('dropdowns'))) do %><%= link_to 'Dropdowns', pages_path('dropdowns') %><% end %>
             <% lg.item(active: current_page?(pages_path('list_group'))) do %><%= link_to 'List group', pages_path('list_group') %><% end %>

data/lib/bs5/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Bs5
-  VERSION = '0.0.27'
+  VERSION = '0.0.28'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bs5
 version: !ruby/object:Gem::Version
-  version: 0.0.27
+  version: 0.0.28
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-27 00:00:00.000000000 Z
+date: 2020-12-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri
@@ -141,6 +141,12 @@ files:
 - app/components/bs5/button_to_component.rb
 - app/components/bs5/button_toolbar_component.html.erb
 - app/components/bs5/button_toolbar_component.rb
+- app/components/bs5/carousel/caption_component.html.erb
+- app/components/bs5/carousel/caption_component.rb
+- app/components/bs5/carousel/item_component.html.erb
+- app/components/bs5/carousel/item_component.rb
+- app/components/bs5/carousel_component.html.erb
+- app/components/bs5/carousel_component.rb
 - app/components/bs5/close_button_component.html.erb
 - app/components/bs5/close_button_component.rb
 - app/components/bs5/dropdown/item_component.html.erb
@@ -229,6 +235,15 @@ files:
 - app/views/bs5/examples/buttons/button_tag/toggle_states/snippet.html.erb
 - app/views/bs5/examples/buttons/button_to/default/_example.html.erb
 - app/views/bs5/examples/buttons/button_to/default/snippet.html.erb
+- app/views/bs5/examples/carousel/_dark_variant.html.erb
+- app/views/bs5/examples/carousel/_examples.html.erb
+- app/views/bs5/examples/carousel/dark_variant/snippet1.html.erb
+- app/views/bs5/examples/carousel/examples/snippet1.html.erb
+- app/views/bs5/examples/carousel/examples/snippet2.html.erb
+- app/views/bs5/examples/carousel/examples/snippet3.html.erb
+- app/views/bs5/examples/carousel/examples/snippet4.html.erb
+- app/views/bs5/examples/carousel/examples/snippet5.html.erb
+- app/views/bs5/examples/carousel/examples/snippet6.html.erb
 - app/views/bs5/examples/close_button/default/_example.html.erb
 - app/views/bs5/examples/close_button/default/snippet.html.erb
 - app/views/bs5/examples/close_button/disabled/_example.html.erb
@@ -350,6 +365,7 @@ files:
 - app/views/bs5/pages/breadcrumb.html.erb
 - app/views/bs5/pages/button_group.html.erb
 - app/views/bs5/pages/buttons.html.erb
+- app/views/bs5/pages/carousel.html.erb
 - app/views/bs5/pages/close_button.html.erb
 - app/views/bs5/pages/collapse.html.erb
 - app/views/bs5/pages/dropdowns.html.erb