bs5 0.0.26 → 0.0.31

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

@@ -0,0 +1,7 @@
+<% if items.any? %>
+  <nav class="<%= component_class %>">
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </nav>
+<% end %>

data/app/components/bs5/nav_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Bs5
+  class NavComponent < ViewComponent::Base
+    include ViewComponent::SlotableV2
+
+    renders_many :items, Bs5::Nav::ItemComponent
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+      extract_options
+    end
+
+    private
+
+    def extract_options
+      @style = @options.delete(:style)
+      @space = @options.delete(:space)
+    end
+
+    def component_class
+      class_names = Array(@options[:class])
+      class_names << ['nav']
+      class_names << style_class
+      class_names << space_class
+      class_names.join(' ')
+    end
+
+    def style_class
+      return unless style?
+
+      ["nav-#{@style}"]
+    end
+
+    def space_class
+      return unless space?
+
+      ["nav-#{@space}"]
+    end
+
+    %i[style space].each do |name|
+      define_method("#{name}?") do
+        !!instance_variable_get("@#{name}")
+      end
+    end
+  end
+end

data/app/components/bs5/progress/bar_component.html.erb

@@ -0,0 +1 @@
+<div class="<%= bar_class %>" role="progressbar" style="width: <%= value %>%" aria-valuenow="<%= value %>" aria-valuemin="0" aria-valuemax="100"><%= label %></div>

data/app/components/bs5/progress/bar_component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Progress
+    class BarComponent < ViewComponent::Base
+      attr_reader :value, :color
+
+      def initialize(value, label: nil, color: nil, striped: false, animated: false)
+        @value = value
+        @label = label
+        @color = color
+        @striped = striped
+        @animated = animated
+      end
+
+      def label
+        return unless @label
+
+        case @label
+        when String
+          @label
+        else
+          "#{value}%"
+        end
+      end
+
+      def bar_class
+        class_names = %w[progress-bar]
+        class_names << contextual_class
+        class_names << striped_class
+        class_names << animated_class
+        class_names.flatten.uniq.join(' ')
+      end
+
+      def contextual_class
+        return unless color?
+
+        "bg-#{color}"
+      end
+
+      def striped_class
+        return unless striped?
+
+        'progress-bar-striped'
+      end
+
+      def animated_class
+        return unless animated?
+
+        %w[progress-bar-striped progress-bar-animated]
+      end
+
+      %i[color striped animated].each do |name|
+        define_method("#{name}?") do
+          !!instance_variable_get("@#{name}")
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<div class="progress">
+  <% if bars.any? %>
+    <% bars.each do |bar| %>
+      <%= bar %>
+    <% end %>
+  <% else %>
+    <%= render Bs5::Progress::BarComponent.new(value, options) %>
+  <% end %>
+</div>

data/app/components/bs5/progress_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ProgressComponent < ViewComponent::Base
+    include ViewComponent::SlotableV2
+    renders_many :bars, Bs5::Progress::BarComponent
+
+    attr_reader :value, :options
+
+    def initialize(value = nil, options = {})
+      @options = options.symbolize_keys
+      @value = value
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="<%= component_class %>" id="<%= pane_id %>" role="tabpanel" aria-labelledby="<%= tab_id %>">
+  <%= content %>
+</div>

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Tabs
+    class ItemComponent < ViewComponent::Base
+      attr_reader :title, :options
+      attr_accessor :style
+
+      def initialize(title, options = {})
+        @title = title
+        @options = options.symbolize_keys
+        extract_options
+      end
+
+      def tab_id
+        "nav-#{object_id}-tab"
+      end
+
+      def pane_id
+        "nav-#{object_id}"
+      end
+
+      %i[active].each do |name|
+        define_method("#{name}?") do
+          !!instance_variable_get("@#{name}")
+        end
+      end
+
+      private
+
+      def extract_options
+        @active = @options.delete(:active)
+      end
+
+      def component_class
+        class_names = %w[tab-pane fade]
+        class_names << active_class
+        class_names.join(' ')
+      end
+
+      def active_class
+        return unless active?
+
+        %w[show active]
+      end
+    end
+  end
+end

data/app/components/bs5/tabs/link_component.html.erb

@@ -0,0 +1 @@
+<%= link_to item.title, "##{item.pane_id}", class: component_class, id: item.tab_id, role: :tab, data: { bs_toggle: item.style }, aria: { controls: item.pane_id, selected: item.active? } %>

data/app/components/bs5/tabs/link_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Tabs
+    class LinkComponent < ViewComponent::Base
+      attr_reader :item
+
+      def initialize(item)
+        @item = item
+      end
+
+      def component_class
+        class_names = ['nav-link']
+
+        class_names << active_class
+
+        class_names.compact.join(' ')
+      end
+
+      def active_class
+        return unless item.active?
+
+        %w[active]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<% if items.any? %>
+  <%= vertical_container do %>
+    <nav>
+      <div class="<%= tablist_class %>" role="tablist">
+        <% items.each do |item| %>
+          <%= render Bs5::Tabs::LinkComponent.new(item) %>
+        <% end %>
+      </div>
+    </nav>
+    <div class="tab-content">
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/bs5/tabs_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Bs5
+  class TabsComponent < ViewComponent::Base
+    include ViewComponent::SlotableV2
+
+    renders_many :items, Bs5::Tabs::ItemComponent
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+      extract_options
+    end
+
+    def before_render
+      items.each { |item| item.style = item_style }
+    end
+
+    private
+
+    def extract_options
+      @style = @options.delete(:style) || :pills
+      @vertical = @options.delete(:vertical)
+    end
+
+    def vertical_container(&block)
+      if vertical?
+        tag.div(class: 'd-flex align-items-start') do
+          capture(&block)
+        end
+      else
+        capture(&block)
+      end
+    end
+
+    def tablist_class
+      class_names = Array(@options[:class])
+      class_names << %w[nav]
+      class_names << style_class
+      class_names << vertical_class
+      class_names.join(' ')
+    end
+
+    def style_class
+      ["nav-#{@style}"]
+    end
+
+    def vertical_class
+      return unless vertical?
+
+      ['flex-column']
+    end
+
+    %i[vertical].each do |name|
+      define_method("#{name}?") do
+        !!instance_variable_get("@#{name}")
+      end
+    end
+
+    def item_style
+      @style.to_s.singularize
+    end
+  end
+end

data/app/helpers/bs5/components_helper.rb

@@ -2,12 +2,15 @@
 
 module Bs5
   module ComponentsHelper
-    COMPONENTS = %w[accordion alert badge breadcrumb button_group button_tag button_to button_toolbar close_button
-                    dropdown list_group spinner toast toast_container].freeze
+    COMPONENTS = %w[accordion alert badge breadcrumb button_group button_tag button_to button_toolbar
+                    carousel close_button
+                    dropdown list_group modal nav spinner
+                    progress
+                    tabs toast toast_container].freeze
 
     COMPONENTS.each do |name|
       define_method("bs5_#{name}") do |*args, &block|
-        clazz = "Bs5::#{name.classify}Component".constantize
+        clazz = "Bs5::#{name.camelize}Component".constantize
         render_component(clazz, *args, &block)
       end
     end

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