bs5 0.0.25 → 0.0.30

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 close_button breadcrumb button_group button_tag button_to button_toolbar
-                    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/alert/color/snippet.html.erb

@@ -1,31 +1,15 @@
-<%= bs5_alert(color: :primary) do %>
-  A simple primary alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :primary) { "A simple primary alert—check it out!" } %>
 
-<%= bs5_alert(color: :secondary) do %>
-  A simple secondary alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :secondary) { "A simple secondary alert—check it out!" } %>
 
-<%= bs5_alert(color: :success) do %>
-  A simple success alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :success) { "A simple success alert—check it out!" } %>
 
-<%= bs5_alert(color: :danger) do %>
-  A simple danger alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :danger) { "A simple danger alert—check it out!" } %>
 
-<%= bs5_alert(color: :warning) do %>
-  A simple warning alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :warning) { "A simple warning alert—check it out!" } %>
 
-<%= bs5_alert(color: :info) do %>
-  A simple info alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :info) { "A simple info alert—check it out!" } %>
 
-<%= bs5_alert(color: :light) do %>
-  A simple light alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :light) { "A simple light alert—check it out!" } %>
 
-<%= bs5_alert(color: :dark) do %>
-  A simple dark alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :dark) { "A simple dark alert—check it out!" } %>

data/app/views/bs5/examples/alert/default/snippet.html.erb

@@ -1,3 +1 @@
-<%= bs5_alert do %>
-  A simple primary alert—check it out!
-<%- end %>
+<%= bs5_alert { "A simple primary alert—check it out!" } %>

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/examples/dropdowns/dark/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Dark dropdown</h2>
+<%= bs5_example(snippet: 'dropdowns/dark/snippet') %>

data/app/views/bs5/examples/dropdowns/dark/snippet.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_dropdown('Dropdown button', dark: true) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#', class: 'active' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/_example.html.erb

@@ -0,0 +1,7 @@
+<h2>Directions</h2>
+<h3>Dropup</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet1') %>
+<h3>Dropright</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet2') %>
+<h3>Dropleft</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet3') %>

data/app/views/bs5/examples/dropdowns/directions/snippet1.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop up', direction: :up) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropup', split: true, direction: :up) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/snippet2.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop end', direction: :end) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropend', split: true, direction: :end) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/snippet3.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop start', direction: :start) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropstart', split: true, direction: :start) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/_example.html.erb

@@ -0,0 +1,5 @@
+<h2>Menu alignment</h2>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet1') %>
+<h3>Responsive alignment</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet2') %>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet3') %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Right-aligned menu example', align: :end) do |d| %>
+  <%= d.item do %><%= button_tag 'Action' %><% end %>
+  <%= d.item do %><%= button_tag 'Another action' %><% end %>
+  <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet2.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Left-aligned but right aligned when large screen', align: { end: :lg }) do |d| %>
+    <%= d.item do %><%= button_tag 'Action' %><% end %>
+    <%= d.item do %><%= button_tag 'Another action' %><% end %>
+    <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet3.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Right-aligned but left aligned when large screen', align: { start: :lg }) do |d| %>
+    <%= d.item do %><%= button_tag 'Action' %><% end %>
+    <%= d.item do %><%= button_tag 'Another action' %><% end %>
+    <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/_example.html.erb

@@ -0,0 +1,9 @@
+<h2>Menu content</h2>
+<h3>Headers</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet1') %>
+<h3>Dividers</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet2') %>
+<h3>Text</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet3') %>
+<h3>Forms</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet4') %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><h6 class="dropdown-header">Dropdown header</h6><% end %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet2.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet3.html.erb

@@ -0,0 +1,10 @@
+<%= bs5_dropdown('Dropdown') do %>
+  <div class="p-4 text-muted" style="max-width: 200px;">
+    <p>
+      Some example text that's free-flowing within the dropdown menu.
+    </p>
+    <p class="mb-0">
+      And this is more example text.
+    </p>
+  </div>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet4.html.erb

@@ -0,0 +1,24 @@
+<%= bs5_dropdown('Dropdown') do %>
+  <form class="px-4 py-3">
+    <div class="mb-3">
+      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
+      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
+    </div>
+    <div class="mb-3">
+      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
+      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
+    </div>
+    <div class="mb-3">
+      <div class="form-check">
+        <input type="checkbox" class="form-check-input" id="dropdownCheck">
+        <label class="form-check-label" for="dropdownCheck">
+          Remember me
+        </label>
+      </div>
+    </div>
+    <button type="submit" class="btn btn-primary">Sign in</button>
+  </form>
+  <div class="dropdown-divider"></div>
+  <a class="dropdown-item" href="#">New around here? Sign up</a>
+  <a class="dropdown-item" href="#">Forgot password?</a>
+<% end %>