bs5 0.0.24 → 0.0.25

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 51b17209ffd99eeedda9730125b19b56bd290f47c89196bf78787050b0061e7c
-  data.tar.gz: c691c88a51fc0e6aa4a02b9c31dceefb0c98824d454c755503cce7cc0b4f6a78
+  metadata.gz: 93ea7a16c5cb16edd48cabe938083b466af2171b895c9bfb7ca3da0e7bd9cf6a
+  data.tar.gz: 35bb524562a071eaf46e05da49b951e1606b27524f6e242d10be7a5cb6a4eeca
 SHA512:
-  metadata.gz: 10243bc1176cbc6e480f39515bf171ce8f67caab6b75b435d6adb703eacc0da923e515fbe8eb1b36fab9e4e3096a379f596c801b2e378f935f24ae033166bdde
-  data.tar.gz: bc080841996dbd305b98df94b84b1d814be5656dcf6ee6954a98653a97919b2a080dd641dc02d3c9bbeaf818acc38cd4d32013deac6c3a2d11b440d0d009f821
+  metadata.gz: 011e84f5073b6cd7c6d9b3d2de76f077fedaeaa87f0e8c2aba6efa48457ffe271e8f3d589ec2b2d59eacccdf0a088e968921f3db682c1a846acb94e6ea7c2815
+  data.tar.gz: 66f86657bfd99ce53af4ea76123b72eed77454ed885b8c033a16fe6e579b67d20be9aa187a982687c80a80e49921577e107b249d081a8fa538b6bdbbef7080fc

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

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

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

data/app/components/bs5/toast_container_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ToastContainerComponent < ViewComponent::Base
+    def initialize(options = {})
+      @options = options.symbolize_keys
+    end
+
+    def component_class
+      class_names = Array(@options[:class])
+      class_names << 'toast-container'
+      class_names.compact.join(' ')
+    end
+
+    def render?
+      content.present?
+    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 spinner].freeze
+                    list_group spinner toast toast_container].freeze
 
     COMPONENTS.each do |name|
       define_method("bs5_#{name}") do |*args, &block|

data/app/views/bs5/examples/toasts/color_schemes/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Color schemes</h2>
+<%= bs5_example(snippet: 'toasts/color_schemes/snippet') %>

data/app/views/bs5/examples/toasts/color_schemes/snippet.html.erb

@@ -0,0 +1,33 @@
+<%= bs5_toast_container do %>
+  <%= bs5_toast(color: :primary, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :secondary, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :success, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :danger, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :warning, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :info, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :light, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :dark, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/toasts/custom_content/_example.html.erb

@@ -0,0 +1,3 @@
+<h2>Custom content</h2>
+<%= bs5_example(snippet: 'toasts/custom_content/snippet1') %>
+<%= bs5_example(snippet: 'toasts/custom_content/snippet2') %>

data/app/views/bs5/examples/toasts/custom_content/snippet1.html.erb

@@ -0,0 +1,3 @@
+<%= bs5_toast(class: 'd-flex align-items-center') do |t| %>
+  <%= t.body do %>Hello, world! This is a toast message.<% end %>
+<% end %>

data/app/views/bs5/examples/toasts/custom_content/snippet2.html.erb

@@ -0,0 +1,9 @@
+<%= bs5_toast(close_button: false) do |t| %>
+  <%= t.body do %>
+    Hello, world! This is a toast message.
+    <div class="mt-2 pt-2 border-top">
+      <%= bs5_button_tag('Take action', color: :primary, size: :small) %>
+      <%= bs5_button_tag('Close', color: :secondary, size: :small, dismiss: :toast) %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/toasts/default/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Default</h2>
+<%= bs5_example(snippet: 'toasts/default/snippet') %>

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

@@ -0,0 +1,17 @@
+<%= bs5_toast do |t| %>
+  <%= t.header do %>
+    <svg
+      class="bd-placeholder-img rounded me-2"
+      width="20"
+      height="20"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <rect width="100%" height="100%" fill="#007aff"></rect>
+    </svg>
+    <strong class="me-auto">Bootstrap</strong>
+    <small>11 mins ago</small>
+  <% end %>
+  <%= t.body do %>Hello, world! This is a toast message.<% end %>
+<% end %>

data/app/views/bs5/examples/toasts/js_options/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Options</h2>
+<%= bs5_example(snippet: 'toasts/js_options/snippet') %>

data/app/views/bs5/examples/toasts/js_options/snippet.html.erb

@@ -0,0 +1,23 @@
+<%= bs5_toast_container do %>
+  <%= bs5_toast(autohide: true, delay: 10_000, animation: false) do |t| %>
+    <%= t.header do %>
+      <svg
+        class="bd-placeholder-img rounded me-2"
+        width="20"
+        height="20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <rect width="100%" height="100%" fill="#007aff"></rect>
+      </svg>
+      <strong class="me-auto">Bootstrap</strong>
+      <small>11 mins ago</small>
+    <% end %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(close_button: false, autohide: true, delay: 11_000) do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/toasts/placement/_example.html.erb

@@ -0,0 +1,3 @@
+<h2>Placement</h2>
+<%= bs5_example(snippet: 'toasts/placement/snippet1') %>
+<%= bs5_example(snippet: 'toasts/placement/snippet2') %>

data/app/views/bs5/examples/toasts/placement/snippet1.html.erb

@@ -0,0 +1,44 @@
+<div
+  aria-live="polite"
+  aria-atomic="true"
+  class="position-relative"
+  style="min-height: 240px"
+>
+  <%= bs5_toast_container(class: 'position-absolute top-0 end-0') do %>
+    <%= bs5_toast do |t| %>
+      <%= t.header do %>
+        <svg
+          class="bd-placeholder-img rounded me-2"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <rect width="100%" height="100%" fill="#007aff"></rect>
+        </svg>
+        <strong class="me-auto">Bootstrap</strong>
+        <small>just now</small>
+      <% end %>
+      <%= t.body do %>See? Just like this.<% end %>
+    <% end %>
+
+    <%= bs5_toast do |t| %>
+      <%= t.header do %>
+        <svg
+          class="bd-placeholder-img rounded me-2"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <rect width="100%" height="100%" fill="#007aff"></rect>
+        </svg>
+        <strong class="me-auto">Bootstrap</strong>
+        <small>2 seconds ago</small>
+      <% end %>
+      <%= t.body do %>Heads up, toasts will stack automatically<% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/bs5/examples/toasts/placement/snippet2.html.erb

@@ -0,0 +1,24 @@
+<div
+  aria-live="polite"
+  aria-atomic="true"
+  class="d-flex justify-content-center align-items-center w-100"
+  style="min-height: 240px"
+>
+  <%= bs5_toast do |t| %>
+    <%= t.header do %>
+      <svg
+        class="bd-placeholder-img rounded me-2"
+        width="20"
+        height="20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <rect width="100%" height="100%" fill="#007aff"></rect>
+      </svg>
+      <strong class="me-auto">Bootstrap</strong>
+      <small>11 mins ago</small>
+    <% end %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+</div>

data/app/views/bs5/examples/toasts/stacking/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Stacking</h2>
+<%= bs5_example(snippet: 'toasts/stacking/snippet') %>

data/app/views/bs5/examples/toasts/stacking/snippet.html.erb

@@ -0,0 +1,37 @@
+<%= bs5_toast_container do %>
+  <%= bs5_toast do |t| %>
+    <%= t.header do %>
+      <svg
+        class="bd-placeholder-img rounded me-2"
+        width="20"
+        height="20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <rect width="100%" height="100%" fill="#007aff"></rect>
+      </svg>
+      <strong class="me-auto">Bootstrap</strong>
+      <small>just now</small>
+    <% end %>
+    <%= t.body do %>See? Just like this.<% end %>
+  <% end %>
+
+  <%= bs5_toast do |t| %>
+    <%= t.header do %>
+      <svg
+        class="bd-placeholder-img rounded me-2"
+        width="20"
+        height="20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <rect width="100%" height="100%" fill="#007aff"></rect>
+      </svg>
+      <strong class="me-auto">Bootstrap</strong>
+      <small>2 seconds ago</small>
+    <% end %>
+    <%= t.body do %>Heads up, toasts will stack automatically<% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<h1>Toasts</h1>
+<%= render 'bs5/examples/toasts/default/example' %>
+<%= render 'bs5/examples/toasts/stacking/example' %>
+<%= render 'bs5/examples/toasts/custom_content/example' %>
+<%= render 'bs5/examples/toasts/color_schemes/example' %>
+<%= render 'bs5/examples/toasts/placement/example' %>
+<%= render 'bs5/examples/toasts/js_options/example' %>

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

@@ -25,6 +25,7 @@
             <% 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('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 %>
             <% lg.item(active: current_page?(pages_path('tooltips'))) do %><%= link_to 'Tooltips', pages_path('tooltips') %><% end %>
           <%- end %>
         </div>

data/lib/bs5/version.rb

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

data/lib/generators/bs5/install/templates/bs5.js

@@ -1,24 +1,35 @@
 import * as bootstrap from "bootstrap";
 
-function tooltipify() {
-  const tooltipTriggerList = [].slice.call(
-    document.querySelectorAll('[data-bs-toggle="tooltip"]')
-  );
-  tooltipTriggerList.map(function (tooltipTriggerEl) {
-    return new bootstrap.Tooltip(tooltipTriggerEl);
-  });
+function popoverify() {
+  document
+    .querySelectorAll('[data-bs-toggle="popover"]')
+    .forEach(function (popoverTriggerEl) {
+      new bootstrap.Popover(popoverTriggerEl);
+    });
 }
 
-function popoverify() {
-  const popoverTriggerList = [].slice.call(
-    document.querySelectorAll('[data-bs-toggle="popover"]')
-  );
-  popoverTriggerList.map(function (popoverTriggerEl) {
-    return new bootstrap.Popover(popoverTriggerEl);
+function toastify() {
+  document.querySelectorAll(".toast").forEach(function (toastNode) {
+    let autohide = new RegExp("true", "i").test(
+      toastNode.dataset["bsAutohide"] || "false"
+    );
+    let toast = new bootstrap.Toast(toastNode, {
+      autohide,
+    });
+    toast.show();
   });
 }
 
+function tooltipify() {
+  document
+    .querySelectorAll('[data-bs-toggle="tooltip"]')
+    .forEach(function (tooltipTriggerEl) {
+      new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+}
+
 export function start() {
   popoverify();
+  toastify();
   tooltipify();
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bs5
 version: !ruby/object:Gem::Version
-  version: 0.0.24
+  version: 0.0.25
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-16 00:00:00.000000000 Z
+date: 2020-12-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri
@@ -149,6 +149,14 @@ files:
 - app/components/bs5/list_group_component.rb
 - app/components/bs5/spinner_component.html.erb
 - app/components/bs5/spinner_component.rb
+- app/components/bs5/toast/body_component.html.erb
+- app/components/bs5/toast/body_component.rb
+- app/components/bs5/toast/header_component.html.erb
+- app/components/bs5/toast/header_component.rb
+- app/components/bs5/toast_component.html.erb
+- app/components/bs5/toast_component.rb
+- app/components/bs5/toast_container_component.html.erb
+- app/components/bs5/toast_container_component.rb
 - app/controllers/bs5/application_controller.rb
 - app/controllers/bs5/pages_controller.rb
 - app/helpers/bs5/application_helper.rb
@@ -265,6 +273,20 @@ files:
 - app/views/bs5/examples/spinners/size/_example.html.erb
 - app/views/bs5/examples/spinners/size/size1.html.erb
 - app/views/bs5/examples/spinners/size/size2.html.erb
+- app/views/bs5/examples/toasts/color_schemes/_example.html.erb
+- app/views/bs5/examples/toasts/color_schemes/snippet.html.erb
+- app/views/bs5/examples/toasts/custom_content/_example.html.erb
+- app/views/bs5/examples/toasts/custom_content/snippet1.html.erb
+- app/views/bs5/examples/toasts/custom_content/snippet2.html.erb
+- app/views/bs5/examples/toasts/default/_example.html.erb
+- app/views/bs5/examples/toasts/default/snippet.html.erb
+- app/views/bs5/examples/toasts/js_options/_example.html.erb
+- app/views/bs5/examples/toasts/js_options/snippet.html.erb
+- app/views/bs5/examples/toasts/placement/_example.html.erb
+- app/views/bs5/examples/toasts/placement/snippet1.html.erb
+- app/views/bs5/examples/toasts/placement/snippet2.html.erb
+- app/views/bs5/examples/toasts/stacking/_example.html.erb
+- app/views/bs5/examples/toasts/stacking/snippet.html.erb
 - app/views/bs5/examples/tooltips/default/_example.html.erb
 - app/views/bs5/examples/tooltips/default/buttons.html.erb
 - app/views/bs5/examples/tooltips/default/disabled_elements.html.erb
@@ -280,6 +302,7 @@ files:
 - app/views/bs5/pages/list_group.html.erb
 - app/views/bs5/pages/popovers.html.erb
 - app/views/bs5/pages/spinners.html.erb
+- app/views/bs5/pages/toasts.html.erb
 - app/views/bs5/pages/tooltips.html.erb
 - app/views/layouts/bs5/application.html.erb
 - app/views/layouts/bs5/pages.html.erb