bs5 0.0.21 → 0.0.26

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ec13b3d4b022a8136ed67a797111aa537f4ba05a6dbf30ad9b8e8eb9099577e3
-  data.tar.gz: 0ac4e60fc0ad95d59e567133fd7dc5bb2d67555a0e97b7b2ceddc7e8b5ec0bd9
+  metadata.gz: 14b5dca44bb60e64b8eb925c7a617c2e7f6214bf33e1d35a44454b0fc617351c
+  data.tar.gz: 49dc980ff0a533774090543e1f8920c3ae7d4d4037c9fd84a5aa3425bb1a8faf
 SHA512:
-  metadata.gz: 942a8e42a2cbaf93928690249f8ab1f9e914a3e9265529e3aff0d76d8bb739218dbeac3d420bbd1f0b154933d182d5a0433dc3fb031f82c496f683b4484856d8
-  data.tar.gz: 3e0c2dfd11427835d34de52ec59fded37e0904ce509ad7abec7595676871526c76c79ede5bfcda74a6e47890d85293c85c89bb575191e1041c50bed4af5e2c93
+  metadata.gz: 2329cc993b4ab1d5930802dfab3f71d878843ce20ebc51bd861c488179e9c4f993b81e48bf1fca791af6886e735de751bbe4ae90f04e641249409e4bade1fc0f
+  data.tar.gz: ae01cfa6597d19ea0cacff53947b70f3ca8e4c0da463ede006ceef58268efa021a8851684bda0f1702db6a6092b15239fc9b633d62877bed44c2bf330e85b0dd

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

@@ -1,6 +1,6 @@
 <div class="<%= component_class %>" role="alert">
   <%= content %>
   <%- if is_dismissable %>
-    <%= render Bs5::CloseButtonComponent.new(data: { 'bs-dismiss': :alert }) %>
+    <%= bs5_close_button(dismiss: :alert) %>
   <%- end %>
 </div>

data/app/components/bs5/alert_component.rb

@@ -2,6 +2,7 @@
 
 module Bs5
   class AlertComponent < ViewComponent::Base
+    include ComponentsHelper
     STYLES = %i[primary secondary success danger warning info light dark].freeze
 
     attr_reader :color, :is_dismissable

data/app/components/bs5/button_tag_component.rb

@@ -47,6 +47,7 @@ module Bs5
       extract_color
       extract_outline
       extract_size
+      extract_dismiss
     end
 
     def extract_color
@@ -61,6 +62,10 @@ module Bs5
       @size = @options.delete(:size)
     end
 
+    def extract_dismiss
+      @dismiss = @options.delete(:dismiss)
+    end
+
     def merge_default_options
       @options.deep_merge!(default_options) do |_key, this_val, other_val|
         [this_val, other_val].join(' ').strip
@@ -68,7 +73,11 @@ module Bs5
     end
 
     def default_options
-      { class: button_class }
+      default_options = { class: button_class }
+
+      default_options[:data] = { 'bs-dismiss': @dismiss } if @dismiss
+
+      default_options
     end
 
     def button_class

data/app/components/bs5/close_button_component.rb

@@ -2,12 +2,19 @@
 
 module Bs5
   class CloseButtonComponent < ViewComponent::Base
-    attr_reader :data
+    def initialize(options = {})
+      @options = options.symbolize_keys
 
-    def initialize(disabled: false, white: false, data: nil)
-      @disabled = disabled
-      @white = white
-      @data = data
+      @disabled = options.delete(:disabled)
+      @white = options.delete(:white)
+      @dismiss = options.delete(:dismiss)
+      @data = options.fetch(:data, {})
+    end
+
+    def data
+      @data['bs-dismiss'] = @dismiss if @dismiss
+
+      @data
     end
 
     private
@@ -21,7 +28,8 @@ module Bs5
     end
 
     def component_class
-      class_names = ['btn-close']
+      class_names = Array(@options[:class])
+      class_names << 'btn-close'
       class_names << %w[btn-close-white] if white?
       class_names.join(' ')
     end

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

@@ -0,0 +1 @@
+<li><%= content || tag.hr(class: 'dropdown-divider') %></li>

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Dropdown
+    class ItemComponent < ViewComponent::Base
+      private
+
+      def content
+        return nil if @content.blank?
+
+        if actionable_element?
+          set_actionable_element_class_names
+          actionable_element.to_html.html_safe # rubocop:disable Rails/OutputSafety
+        else
+          @content
+        end
+      end
+
+      def set_actionable_element_class_names
+        class_names = Array(actionable_element[:class])
+        class_names << 'dropdown-item'
+        actionable_element[:class] = class_names.join(' ')
+      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/dropdown_component.html.erb

@@ -0,0 +1,22 @@
+<% if split? %>
+  <% if dropstart? %>
+    <%= bs5_button_group do %>
+      <div class="<%= component_class %>">
+        <%= split_button_toggle %>
+        <%= menu_content %>
+      </div>
+      <%= split_button %>
+    <% end %>
+  <% else %>
+    <div class="<%= component_class %>">
+      <%= split_button %>
+      <%= split_button_toggle %>
+      <%= menu_content %>
+    </div>
+  <% end %>
+<% else %>
+  <div class="<%= component_class %>">
+    <%= single_button %>
+    <%= menu_content %>
+  </div>
+<% end %>

data/app/components/bs5/dropdown_component.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+module Bs5
+  class DropdownComponent < ViewComponent::Base # rubocop:disable Metrics/ClassLength
+    include ViewComponent::SlotableV2
+    include ComponentsHelper
+    using HashRefinement
+
+    CLASS_PREFIX = 'dropdown'
+    CLASS_NAMES = {
+      visually_hidden: 'visually-hidden',
+      toggle_split: "#{CLASS_PREFIX}-toggle-split",
+      toggle: "#{CLASS_PREFIX}-toggle",
+      menu: "#{CLASS_PREFIX}-menu",
+      menu_dark: "#{CLASS_PREFIX}-menu-dark",
+      menu_end: "#{CLASS_PREFIX}-menu-end"
+    }.freeze
+    DIRECTIONS = {
+      up: :dropup,
+      end: :dropend,
+      start: :dropstart
+    }.with_indifferent_access.freeze
+    DROPDOWN_OPTIONS = %i[offset flip boundary reference display].freeze
+
+    renders_many :items, Bs5::Dropdown::ItemComponent
+    attr_reader :title
+
+    def initialize(content_or_options = nil, options = {})
+      if content_or_options.is_a? Hash
+        @options = content_or_options.symbolize_keys
+      else
+        @title = content_or_options
+        @options = options.symbolize_keys
+      end
+
+      extract_options
+    end
+
+    private
+
+    def extract_options
+      @split = @options.delete(:split)
+      @dark = @options.delete(:dark)
+      @direction = @options.delete(:direction)
+      @align = @options.delete(:align)
+
+      extract_dropdown_options
+    end
+
+    def extract_dropdown_options
+      @dropdown_options = @options.extract!(*DROPDOWN_OPTIONS)
+    end
+
+    def split_button_toggle
+      bs5_button_tag(split_button_toggle_options) do
+        tag.span('Toggle Dropdown', class: CLASS_NAMES[:visually_hidden])
+      end
+    end
+
+    def split_button
+      bs5_button_tag title, split_button_options
+    end
+
+    def single_button
+      bs5_button_tag title, single_button_options
+    end
+
+    def menu_content
+      if items.any?
+        tag.ul(class: dropdown_menu_classes) { items.map(&method(:concat)) }
+      else
+        tag.div(content, class: dropdown_menu_classes)
+      end
+    end
+
+    def single_button_options
+      @options.merge(default_options)
+    end
+
+    def component_class
+      class_names = split? ? ['btn-group'] : [CLASS_PREFIX]
+      class_names << DIRECTIONS[@direction] if direction?
+
+      class_names.join(' ')
+    end
+
+    def split_button_options
+      @options.merge(default_button_options)
+    end
+
+    def split_button_toggle_options
+      single_button_options.dup.tap do |h|
+        h[:class] += " #{CLASS_NAMES[:toggle_split]}"
+      end
+    end
+
+    %i[split dark direction].each do |name|
+      define_method("#{name}?") do
+        !instance_variable_get("@#{name}").nil?
+      end
+    end
+
+    def dropstart?
+      @direction == :start
+    end
+
+    def default_button_options
+      { type: :button }
+    end
+
+    def default_options
+      default_button_options.merge({
+                                     data: default_data_options.merge(@dropdown_options).prefix_keys_with_bs,
+                                     aria: { expanded: false },
+                                     class: CLASS_NAMES[:toggle]
+                                   })
+    end
+
+    def default_data_options
+      { toggle: :dropdown }.tap do |h|
+        h[:display] = 'static' if responsive_align?
+      end
+    end
+
+    def dropdown_menu_classes
+      class_names = [CLASS_NAMES[:menu]]
+      class_names << CLASS_NAMES[:menu_dark] if dark?
+      class_names << align_classes
+
+      class_names.compact.join(' ')
+    end
+
+    def align_classes
+      case @align
+      when Symbol
+        CLASS_NAMES[:menu_end]
+      when Hash
+        responsive_align_classes
+      end
+    end
+
+    def responsive_align_classes
+      k, v = @align.first
+      class_names = ["#{CLASS_PREFIX}-menu-#{v}-#{k}"]
+      class_names << CLASS_NAMES[:menu_end] if @align.with_indifferent_access.key?(:start)
+
+      class_names
+    end
+
+    def responsive_align?
+      @align.is_a? Hash
+    end
+  end
+end

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/toast/body_component.html.erb

@@ -0,0 +1,3 @@
+<div class="toast-body">
+  <%= content %>
+</div>

data/app/components/bs5/toast/body_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Toast
+    class BodyComponent < ViewComponent::Base
+    end
+  end
+end

data/app/components/bs5/toast/header_component.html.erb

@@ -0,0 +1,4 @@
+<div class="toast-header">
+  <%= content %>
+  <%= bs5_close_button(dismiss: :toast) %>
+</div>

data/app/components/bs5/toast/header_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Toast
+    class HeaderComponent < ViewComponent::Base
+      include ComponentsHelper
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<%= tag.div(component_attributes) do %>
+  <%= header %>
+  <%= body %>
+
+  <%- if close_button? && !header? %>
+    <%= bs5_close_button(white: white_text?, class: 'ms-auto me-2', dismiss: :toast) %>
+  <% end %>
+<% end %>

data/app/components/bs5/toast_component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ToastComponent < ViewComponent::Base
+    include ViewComponent::SlotableV2
+    include ComponentsHelper
+    using HashRefinement
+
+    attr_reader :color
+
+    renders_one :header, Bs5::Toast::HeaderComponent
+    renders_one :body, Bs5::Toast::BodyComponent
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+      @color = @options.delete(:color)
+      @close_button = @options.fetch(:close_button, true)
+      @data_options = @options.extract!(:animation, :autohide, :delay)
+    end
+
+    def header?
+      !!header
+    end
+
+    def component_attributes
+      default_options = {
+        role: :alert,
+        aria: { live: 'assertive', atomic: true },
+        data: data_options
+      }
+
+      @options[:class] = component_class
+
+      @options.merge(default_options)
+    end
+
+    def white_text?
+      color? && color.in?(%i[primary secondary success danger dark])
+    end
+
+    private
+
+    def data_options
+      @data_options.prefix_keys_with_bs
+    end
+
+    def component_class
+      class_names = Array(@options[:class])
+      class_names << 'toast'
+      class_names << contextual_class
+      class_names.compact.join(' ')
+    end
+
+    def contextual_class
+      return unless color?
+
+      class_names = ['border-0']
+      class_names << "bg-#{color}"
+      class_names << 'text-white' if white_text?
+
+      class_names
+    end
+
+    def color?
+      !!color
+    end
+
+    def close_button?
+      @close_button
+    end
+  end
+end