bs5 0.0.18 → 0.0.23

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e7ed0ecd3b82a680eae723045c2c24020920a4942b4dfa5460951042be2a5c1
-  data.tar.gz: 4217f3cd7e572d702deb22988f772c0653da8709c39c8a2bff3796747990a4b0
+  metadata.gz: fde2cc4be44c7ef1b396e7761904765ee31f1801acb7a88b1f4507cf302994c2
+  data.tar.gz: d69a795e889ece4139479843c7e2e5f6ffa48df347f0463529513060c1401214
 SHA512:
-  metadata.gz: 3e520e4f93b185a7aa46cba4bf5c43b24655c03b8d75576eca3edf2b6740e0384caff3b413e9a3b18abadfda4edf1464be4ea4fb21eb66a67617b0f5268ed49c
-  data.tar.gz: 38fd799067d2148b0cd44f323dc41d0a4130771edc2e8de6fade8af6aaab4f2a19c22d5dba6abc77f84d1189a9e6f5529c471f903796f07dc47cc40dab769b2a
+  metadata.gz: 4474fe20875677d9e8f45ca929d8e3ee95d6919a65065d472d2e12d9b74b765c6f491398b7691b8bf85b8a35d2b4cdc807839648f007a4836c47768ab865ac74
+  data.tar.gz: d70751a40bda629d0ba59324cab991b94dca962248ec22625edd36344750476830ed655a4fd21c3b3e3a7b133609217c33267c96df3af39125a3600f3be5539b

data/app/assets/config/bs5_manifest.js

@@ -1 +1,2 @@
 //= link_directory ../stylesheets/bs5 .css
+//= link_directory ../javascripts/bs5 .js

data/app/assets/javascripts/bs5/application.js

@@ -0,0 +1,13 @@
+window.addEventListener("load", initBs5);
+window.addEventListener("turbolinks:load", initBs5);
+
+function initBs5(event) {
+  document.querySelectorAll('[data-bs5="copy"]').forEach(function (item) {
+    item.addEventListener("click", handleBs5CopyButtonClick);
+  });
+}
+
+function handleBs5CopyButtonClick(event) {
+  var code = event.target.closest("div").querySelector("code").innerText;
+  navigator.clipboard.writeText(code);
+}

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

@@ -17,7 +17,7 @@
           data-bs-parent="#<%= id %>"
         >
           <div class="accordion-body">
-            <%= item.content %>
+            <%= item %>
           </div>
         </div>
       </div>

data/app/components/bs5/accordion_component.rb

@@ -3,9 +3,9 @@
 module Bs5
   class AccordionComponent < ViewComponent::Base
     include ComponentsHelper
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :item, collection: true, class_name: 'Item'
+    renders_many :items, 'ItemComponent'
 
     def initialize(flush: false)
       @flush = flush
@@ -25,7 +25,7 @@ module Bs5
       class_names.join(' ')
     end
 
-    class Item < ViewComponent::Slot
+    class ItemComponent < ViewComponent::Base
       attr_reader :title
 
       def initialize(title:, collapsed: true)
@@ -33,6 +33,10 @@ module Bs5
         @collapsed = collapsed
       end
 
+      def call
+        content
+      end
+
       def id
         object_id
       end

data/app/components/bs5/alert_component.rb

@@ -4,13 +4,13 @@ module Bs5
   class AlertComponent < ViewComponent::Base
     STYLES = %i[primary secondary success danger warning info light dark].freeze
 
-    attr_reader :style, :is_dismissable
+    attr_reader :color, :is_dismissable
 
     include ActiveModel::Validations
-    validates :style, style: true
+    validates :color, style: true
 
-    def initialize(style: :primary, is_dismissable: false)
-      @style = style.to_sym
+    def initialize(color: :primary, is_dismissable: false)
+      @color = color.to_sym
       @is_dismissable = is_dismissable
     end
 
@@ -31,7 +31,7 @@ module Bs5
     end
 
     def contextual_class
-      "alert-#{@style}"
+      "alert-#{@color}"
     end
   end
 end

data/app/components/bs5/badge_component.rb

@@ -4,14 +4,14 @@ module Bs5
   class BadgeComponent < ViewComponent::Base
     STYLES = %i[primary secondary success danger warning info light dark].freeze
 
-    attr_reader :text, :style
+    attr_reader :text, :color
 
     include ActiveModel::Validations
-    validates :style, style: true
+    validates :color, style: true
 
-    def initialize(text:, style: :secondary, pill: false)
+    def initialize(text:, color: :secondary, pill: false)
       @text = text
-      @style = style.to_sym
+      @color = color.to_sym
       @pill = pill
     end
 
@@ -32,8 +32,8 @@ module Bs5
     end
 
     def contextual_class
-      class_names = ["bg-#{@style}"]
-      class_names << %w[text-dark] if style.in?(%i[warning info light])
+      class_names = ["bg-#{@color}"]
+      class_names << %w[text-dark] if color.in?(%i[warning info light])
       class_names.join(' ')
     end
   end

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

@@ -2,7 +2,7 @@
   <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
       <% items.each do |item| %>
-        <li class="breadcrumb-item <%= item == items.last ? 'active' : '' %>" <%= item == items.last ? 'aria-current=page' : '' %>><%= item.content %></li>
+        <li class="breadcrumb-item <%= item == items.last ? 'active' : '' %>" <%= item == items.last ? 'aria-current=page' : '' %>><%= item %></li>
       <% end %>
     </ol>
   </nav>

data/app/components/bs5/breadcrumb_component.rb

@@ -2,11 +2,14 @@
 
 module Bs5
   class BreadcrumbComponent < ViewComponent::Base
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :item, collection: true, class_name: 'Item'
+    renders_many :items, 'ItemComponent'
 
-    class Item < ViewComponent::Slot
+    class ItemComponent < ViewComponent::Base
+      def call
+        content
+      end
     end
   end
 end

data/app/components/bs5/button_tag_component.rb

@@ -3,14 +3,14 @@
 module Bs5
   class ButtonTagComponent < ViewComponent::Base
     STYLES = %i[primary secondary success danger warning info light dark link].freeze
-    DEFAULT_STYLE = :primary
+    DEFAULT_COLOR = :primary
     SIZES = { small: :sm, large: :lg }.freeze
     CLASS_PREFIX = 'btn'
 
     attr_reader :content_or_options, :size
 
     include ActiveModel::Validations
-    validates :style, style: true
+    validates :color, style: true
     validates :size, inclusion: { in: SIZES.keys, valid_sizes: SIZES.keys.to_sentence, allow_nil: true }
 
     def initialize(content_or_options = nil, options = nil)
@@ -44,13 +44,13 @@ module Bs5
     end
 
     def extract_custom_options
-      extract_style
+      extract_color
       extract_outline
       extract_size
     end
 
-    def extract_style
-      @style = @options.delete(:style)
+    def extract_color
+      @color = @options.delete(:color)
     end
 
     def extract_outline
@@ -76,7 +76,7 @@ module Bs5
     end
 
     def contextual_class
-      [CLASS_PREFIX, outline? ? 'outline' : nil, style].compact.join('-')
+      [CLASS_PREFIX, outline? ? 'outline' : nil, color].compact.join('-')
     end
 
     def size_class
@@ -85,8 +85,8 @@ module Bs5
       [CLASS_PREFIX, SIZES[size]].join('-')
     end
 
-    def style
-      (@style || DEFAULT_STYLE).to_sym
+    def color
+      (@color || DEFAULT_COLOR).to_sym
     end
 
     def outline?

data/app/components/bs5/button_to_component.rb

@@ -3,14 +3,14 @@
 module Bs5
   class ButtonToComponent < ViewComponent::Base
     STYLES = %i[primary secondary success danger warning info light dark link].freeze
-    DEFAULT_STYLE = :primary
+    DEFAULT_COLOR = :primary
     SIZES = { small: :sm, large: :lg }.freeze
     CLASS_PREFIX = 'btn'
 
     attr_reader :size
 
     include ActiveModel::Validations
-    validates :style, style: true
+    validates :color, style: true
     validates :size, inclusion: { in: SIZES.keys, valid_sizes: SIZES.keys.to_sentence, allow_nil: true }
 
     def initialize(name = nil, options = nil, html_options = nil)
@@ -53,13 +53,13 @@ module Bs5
     end
 
     def extract_custom_options
-      extract_style
+      extract_color
       extract_outline
       extract_size
     end
 
-    def extract_style
-      @style = @button_to_options.delete(:style)
+    def extract_color
+      @color = @button_to_options.delete(:color)
     end
 
     def extract_outline
@@ -85,7 +85,7 @@ module Bs5
     end
 
     def contextual_class
-      [CLASS_PREFIX, outline? ? 'outline' : nil, style].compact.join('-')
+      [CLASS_PREFIX, outline? ? 'outline' : nil, color].compact.join('-')
     end
 
     def size_class
@@ -94,8 +94,8 @@ module Bs5
       [CLASS_PREFIX, SIZES[size]].join('-')
     end
 
-    def style
-      (@style || DEFAULT_STYLE).to_sym
+    def color
+      (@color || DEFAULT_COLOR).to_sym
     end
 
     def outline?

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

@@ -2,7 +2,8 @@
   <div class="border rounded-2 p-4">
     <%= render template: snippet %>
   </div>
-  <div class="highlight p-4">
+  <div class="highlight p-4 position-relative">
+    <%= bs5_button_tag('Copy', color: :primary, outline: true, size: :small, class: 'position-absolute top-0 end-0 mt-2 me-2', data: { bs5: 'copy' }) %>
     <pre class='mb-0'><code><%= highlight %></code></pre>
   </div>
 </div>

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

@@ -2,14 +2,14 @@
   <% if actionables? %>
     <div class="<%= component_class %>">
       <% items.each do |item| %>
-        <%= item.decorated_content %>
+        <%= item %>
       <% end %>
     </div>
   <% else %>
     <ul class="<%= component_class %>">
       <% items.each do |item| %>
         <%= tag.li(**item.options) do %>
-          <%= item.content %>
+          <%= item %>
         <% end %>
       <% end %>
     </ul>

data/app/components/bs5/list_group_component.rb

@@ -6,9 +6,9 @@ module Bs5
     CLASS_NAME_FLUSH = "#{CLASS_NAME_BASE}-flush"
     CLASS_NAME_HORIZONTAL = "#{CLASS_NAME_BASE}-horizontal"
 
-    include ViewComponent::Slotable
+    include ViewComponent::SlotableV2
 
-    with_slot :item, collection: true, class_name: 'Item'
+    renders_many :items, 'Item'
 
     def initialize(flush: false, horizontal: false)
       @flush = flush
@@ -22,7 +22,10 @@ module Bs5
     end
 
     def actionables?
-      items.any?(&:actionable?)
+      items.any? do |item|
+        elements = Nokogiri::HTML::DocumentFragment.parse(item.to_s).elements
+        elements.one? && elements.first.name.in?(%w[a button label])
+      end
     end
 
     def horizontal?
@@ -48,7 +51,7 @@ module Bs5
       class_names.join('-')
     end
 
-    class Item < ViewComponent::Slot
+    class Item < ViewComponent::Base
       CLASS_NAME_BASE = 'list-group-item'
       CLASS_NAME_ACTION = "#{CLASS_NAME_BASE}-action"
 
@@ -59,11 +62,15 @@ module Bs5
 
         @active = @options.delete(:active) || false
         @disabled = @options.delete(:disabled) || false
-        @style = @options.delete(:style)
+        @color = @options.delete(:color)
 
         set_attributes
       end
 
+      def call
+        actionable? ? decorated_content : content
+      end
+
       def actionable?
         !!actionable_element
       end
@@ -118,7 +125,7 @@ module Bs5
         class_names = [CLASS_NAME_BASE]
         class_names << 'active' if active?
         class_names << 'disabled' if disabled?
-        class_names << contextual_class if style?
+        class_names << contextual_class if color?
 
         class_names
       end
@@ -131,12 +138,12 @@ module Bs5
         !!@disabled
       end
 
-      def style?
-        !!@style
+      def color?
+        !!@color
       end
 
       def contextual_class
-        [CLASS_NAME_BASE, @style].join('-')
+        [CLASS_NAME_BASE, @color].join('-')
       end
     end
   end

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

@@ -0,0 +1,5 @@
+<%= tag.div(**component_attributes) do %>
+  <%- if text %>
+    <span class="visually-hidden"><%= text %></span>
+  <% end %>
+<% end %>

data/app/components/bs5/spinner_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Bs5
+  class SpinnerComponent < ViewComponent::Base
+    STYLES = %i[primary secondary success danger warning info light dark].freeze
+    SIZES = { small: :sm, large: :lg }.freeze
+
+    attr_reader :text, :color, :size, :options
+
+    include ActiveModel::Validations
+    validates :color, style: true, if: -> { color }
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+
+      @text = @options.delete(:text)
+      @color = @options.delete(:color)&.to_sym
+      @grow = @options.delete(:grow)
+      @size = @options.delete(:size)&.to_sym
+    end
+
+    def before_render
+      raise errors.full_messages.to_sentence if invalid?
+    end
+
+    def component_attributes
+      options[:class] = component_class
+      options[:role] = 'status'
+      options
+    end
+
+    def component_class
+      class_names = Array(options[:class])
+      class_names << shape_class
+      class_names << contextual_class
+      class_names << size_class
+
+      class_names.compact.join(' ')
+    end
+
+    private
+
+    def shape_class
+      grow? ? 'spinner-grow' : 'spinner-border'
+    end
+
+    def contextual_class
+      "text-#{@color}" if color
+    end
+
+    def size_class
+      return unless size?
+
+      [shape_class, SIZES[size]].join('-')
+    end
+
+    def grow?
+      !!@grow
+    end
+
+    def size?
+      !!size
+    end
+  end
+end

data/app/helpers/bs5/components_helper.rb

@@ -3,7 +3,7 @@
 module Bs5
   module ComponentsHelper
     COMPONENTS = %w[accordion alert badge close_button breadcrumb button_group button_tag button_to button_toolbar
-                    list_group].freeze
+                    list_group spinner].freeze
 
     COMPONENTS.each do |name|
       define_method("bs5_#{name}") do |*args, &block|