bs5 0.0.26 → 0.0.27

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 14b5dca44bb60e64b8eb925c7a617c2e7f6214bf33e1d35a44454b0fc617351c
-  data.tar.gz: 49dc980ff0a533774090543e1f8920c3ae7d4d4037c9fd84a5aa3425bb1a8faf
+  metadata.gz: 5bd6c6c2f823f5b4ba980c7ef01db9381fe5fa6c02e4b82dc101a6765b8bfc22
+  data.tar.gz: 16c43758c937dab60f50f331f56e31dd75aa2df4f982c803c340fe449302a346
 SHA512:
-  metadata.gz: 2329cc993b4ab1d5930802dfab3f71d878843ce20ebc51bd861c488179e9c4f993b81e48bf1fca791af6886e735de751bbe4ae90f04e641249409e4bade1fc0f
-  data.tar.gz: ae01cfa6597d19ea0cacff53947b70f3ca8e4c0da463ede006ceef58268efa021a8851684bda0f1702db6a6092b15239fc9b633d62877bed44c2bf330e85b0dd
+  metadata.gz: e55c062be7d27cbe65efa1dd098b5ae1e26f4a5fc919ac22e5e8267a4d7c269cfc29fa15077444d3be082ccb9d7211fa27d3b1fbaa63c26e847665fcb0a30279
+  data.tar.gz: 13300ddc486bed84d11bae9d30cc2078fc60951a833ace82e07828228865bc3858f416e41dea9ff4e459b7df0912d1c04b0336596bacff8553b941dc8e660854

data/app/components/bs5/modal/body_component.html.erb

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

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

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

data/app/components/bs5/modal/controller_component.html.erb

@@ -0,0 +1 @@
+<%= content %>

data/app/components/bs5/modal/controller_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Modal
+    class ControllerComponent < ViewComponent::Base
+      def initialize(modal_id:)
+        @modal_id = modal_id
+      end
+
+      def content
+        return nil if @content.blank?
+
+        if actionable_element?
+          set_actionable_element_attributes
+          actionable_element.to_html.html_safe # rubocop:disable Rails/OutputSafety
+        else
+          @content
+        end
+      end
+
+      def set_actionable_element_attributes
+        actionable_element['data-bs-toggle'] = 'modal'
+        actionable_element['data-bs-target'] = "##{@modal_id}"
+      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/modal/footer_component.html.erb

@@ -0,0 +1,4 @@
+<div class="modal-footer">
+  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+  <%= content %>
+</div>

data/app/components/bs5/modal/footer_component.rb

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

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

@@ -0,0 +1,4 @@
+<div class="modal-header">
+  <h5 class="modal-title" id="<%= @label_id %>"><%= content %></h5>
+  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+</div>

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Modal
+    class HeaderComponent < ViewComponent::Base
+      attr_reader :title
+
+      def initialize(title: nil, label_id: nil)
+        @title = title
+        @label_id = label_id
+      end
+
+      def content
+        title || @content
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<%= controller %>
+
+<%= tag.div(modal_attributes) do %>
+  <div class="<%= dialog_classes %>">
+    <div class="modal-content">
+      <%= header %>
+      <%= body %>
+      <%= footer %>
+    </div>
+  </div>
+<% end %>

data/app/components/bs5/modal_component.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ModalComponent < ViewComponent::Base
+    include ViewComponent::SlotableV2
+    using HashRefinement
+
+    MODAL_OPTIONS = %i[backdrop keyboard focus].freeze
+
+    renders_one :controller, lambda { |_modal_id: nil|
+      Bs5::Modal::ControllerComponent.new(modal_id: modal_id)
+    }
+    renders_one :header, lambda { |_label_id: nil|
+      Bs5::Modal::HeaderComponent.new(label_id: label_id)
+    }
+    renders_one :body, Bs5::Modal::BodyComponent
+    renders_one :footer, Bs5::Modal::FooterComponent
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+      extract_options
+    end
+
+    private
+
+    def extract_options
+      @scroll = @options.delete(:scroll)
+      @center = @options.delete(:center)
+      @size = @options.delete(:size)
+      @fullscreen = @options.delete(:fullscreen)
+
+      extract_modal_options
+    end
+
+    def extract_modal_options
+      @modal_options = @options.extract!(*MODAL_OPTIONS)
+    end
+
+    def modal_attributes
+      { class: 'modal fade',
+        id: modal_id,
+        tabindex: -1,
+        aria: { labelledby: label_id, hidden: true },
+        data: @modal_options.prefix_keys_with_bs }
+    end
+
+    def dialog_classes
+      class_names = ['modal-dialog']
+      class_names << 'modal-dialog-scrollable' if scroll?
+      class_names << 'modal-dialog-centered' if center?
+      class_names << "modal-#{@size}" if size?
+      class_names << fullscreen_class
+
+      class_names.join(' ')
+    end
+
+    def fullscreen_class
+      return unless fullscreen?
+
+      class_name = %w[modal fullscreen]
+      class_name << [@fullscreen, 'down'] if @fullscreen.is_a?(Symbol)
+
+      class_name.join('-')
+    end
+
+    def modal_id
+      "modal-#{object_id}"
+    end
+
+    def label_id
+      "modal-label-#{object_id}"
+    end
+
+    %i[scroll center size fullscreen].each do |name|
+      define_method("#{name}?") do
+        !instance_variable_get("@#{name}").nil?
+      end
+    end
+  end
+end

data/app/helpers/bs5/components_helper.rb

@@ -3,7 +3,7 @@
 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
+                    dropdown list_group modal spinner toast toast_container].freeze
 
     COMPONENTS.each do |name|
       define_method("bs5_#{name}") do |*args, &block|

data/app/views/bs5/examples/modal/_examples.html.erb

@@ -0,0 +1,9 @@
+<h2>Examples</h2>
+<h3>Live demo</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet1') %>
+<h3>Static backdrop</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet2') %>
+<h3>Scrolling long content</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet3') %>
+<h3>Vertically centered</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet4') %>

data/app/views/bs5/examples/modal/_fullscreen.html.erb

@@ -0,0 +1,2 @@
+<h2>Fullscreen Modal</h2>
+<%= bs5_example(snippet: 'modal/fullscreen/snippet1') %>

data/app/views/bs5/examples/modal/_optional_sizes.html.erb

@@ -0,0 +1,2 @@
+<h2>Optional sizes</h2>
+<%= bs5_example(snippet: 'modal/optional_sizes/snippet1') %>

data/app/views/bs5/examples/modal/examples/snippet1.html.erb

@@ -0,0 +1,12 @@
+<%= bs5_modal do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <p>Modal body text goes here.</p>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Save changes', type: 'button') %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<%= bs5_modal(backdrop: :static, keyboard: false) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <p>I will not close if you click outside me. Don't even try to press escape key.</p>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Understood', type: 'button') %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,14 @@
+<%= bs5_modal(scroll: true) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <% 15.times do %>
+      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <% end %>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Save changes', type: 'button') %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<%= bs5_modal(center: true) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Save changes', type: 'button') %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/modal/fullscreen/snippet1.html.erb

@@ -0,0 +1,55 @@
+<%= bs5_modal(fullscreen: true) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen modal' } %>
+  <%= m.body do %>
+    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+  <% end %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :sm) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below sm', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below sm' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :md) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below md', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below md' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :lg) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below lg', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below lg' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :xl) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below xl', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below xl' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :xxl) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below xxl', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below xxl' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>

data/app/views/bs5/examples/modal/optional_sizes/snippet1.html.erb

@@ -0,0 +1,23 @@
+<%= bs5_modal(size: :xl) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Extra large modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Extra large modal' } %>
+  <%= m.body { '...' } %>
+<% end %>
+
+<%= bs5_modal(size: :lg) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Large modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Large modal' } %>
+  <%= m.body { '...' } %>
+<% end %>
+
+<%= bs5_modal(size: :sm) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Small modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Small modal' } %>
+  <%= m.body { '...' } %>
+<% end %>

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

@@ -0,0 +1,4 @@
+<h1>Modal</h1>
+<%= render 'bs5/examples/modal/examples' %>
+<%= render 'bs5/examples/modal/optional_sizes' %>
+<%= render 'bs5/examples/modal/fullscreen' %>

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

@@ -24,6 +24,7 @@
             <% 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 %>
+            <% lg.item(active: current_page?(pages_path('modal'))) do %><%= link_to 'Modal', pages_path('modal') %><% end %>
             <% lg.item(active: current_page?(pages_path('popovers'))) do %><%= link_to 'Popovers', pages_path('popovers') %><% end %>
             <% lg.item(active: current_page?(pages_path('spinners'))) do %><%= link_to 'Spinners', pages_path('spinners') %><% end %>
             <% lg.item(active: current_page?(pages_path('toasts'))) do %><%= link_to 'Toasts', pages_path('toasts') %><% end %>

data/lib/bs5/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bs5
 version: !ruby/object:Gem::Version
-  version: 0.0.26
+  version: 0.0.27
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-24 00:00:00.000000000 Z
+date: 2020-12-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri
@@ -151,6 +151,16 @@ files:
 - app/components/bs5/example_component.rb
 - app/components/bs5/list_group_component.html.erb
 - app/components/bs5/list_group_component.rb
+- app/components/bs5/modal/body_component.html.erb
+- app/components/bs5/modal/body_component.rb
+- app/components/bs5/modal/controller_component.html.erb
+- app/components/bs5/modal/controller_component.rb
+- app/components/bs5/modal/footer_component.html.erb
+- app/components/bs5/modal/footer_component.rb
+- app/components/bs5/modal/header_component.html.erb
+- app/components/bs5/modal/header_component.rb
+- app/components/bs5/modal_component.html.erb
+- app/components/bs5/modal_component.rb
 - app/components/bs5/spinner_component.html.erb
 - app/components/bs5/spinner_component.rb
 - app/components/bs5/toast/body_component.html.erb
@@ -281,6 +291,15 @@ files:
 - app/views/bs5/examples/list_group/style/default.html.erb
 - app/views/bs5/examples/list_group/with_badges/_example.html.erb
 - app/views/bs5/examples/list_group/with_badges/default.html.erb
+- app/views/bs5/examples/modal/_examples.html.erb
+- app/views/bs5/examples/modal/_fullscreen.html.erb
+- app/views/bs5/examples/modal/_optional_sizes.html.erb
+- app/views/bs5/examples/modal/examples/snippet1.html.erb
+- app/views/bs5/examples/modal/examples/snippet2.html.erb
+- app/views/bs5/examples/modal/examples/snippet3.html.erb
+- app/views/bs5/examples/modal/examples/snippet4.html.erb
+- app/views/bs5/examples/modal/fullscreen/snippet1.html.erb
+- app/views/bs5/examples/modal/optional_sizes/snippet1.html.erb
 - app/views/bs5/examples/popovers/default/_example.html.erb
 - app/views/bs5/examples/popovers/default/snippet.html.erb
 - app/views/bs5/examples/popovers/disabled_elements/_example.html.erb
@@ -335,6 +354,7 @@ files:
 - app/views/bs5/pages/collapse.html.erb
 - app/views/bs5/pages/dropdowns.html.erb
 - app/views/bs5/pages/list_group.html.erb
+- app/views/bs5/pages/modal.html.erb
 - app/views/bs5/pages/popovers.html.erb
 - app/views/bs5/pages/spinners.html.erb
 - app/views/bs5/pages/toasts.html.erb