bootstrap5_helper 1.2.0.pre3 → 2.0.0.beta

data/lib/bootstrap5_helper/nav.rb

@@ -1,7 +1,7 @@
 module Bootstrap5Helper
+  # rubocop:disable Metrics/ClassLength
+
   # Builds a Nav Component that can be used in other components.
-  #
-  #
   class Nav < Component
     # Class constructor
     #
@@ -11,8 +11,7 @@ module Bootstrap5Helper
     # @option opts [String]  :id
     # @option opts [String]  :class
     # @option opts [Hash]    :data
-    # @option opts [Array]   :dropdown
-    # @option opts []
+    # @option opts [Hash]    :bs_attrs
     #
     def initialize(template, *tag_or_options, &block)
       super(template)
@@ -20,17 +19,16 @@ module Bootstrap5Helper
       @tag, args = parse_tag_or_options(*tag_or_options, {})
       @tag ||= config({ navs: :base }, :ul)
 
-      @id       = args.fetch(:id,    uuid)
-      @class    = args.fetch(:class, '')
-      @data     = args.fetch(:data,  {})
-      @child    = args.fetch(:child, {})
-      @content  = block || proc { '' }
+      @attrs    = args
+      @id       = @attrs.delete(:id)       { uuid }
+      @class    = @attrs.delete(:class)    { '' }
+      @data     = @attrs.delete(:data)     { {} }
+      @bs_attrs = @attrs.delete(:bs_attrs) { {} }
       @dropdown = Dropdown.new(@template)
+      @content  = block || proc { '' }
     end
 
-    # rubocop:disable Metrics/MethodLength
-
-    # Adds an nav-item to the nav component. this method gets used when the nav-item
+    # Adds an nav-item to the nav component. This method gets used when the nav-item
     # links to content in a tab or something.
     #
     # @param [Symbol|String] target
@@ -39,28 +37,17 @@ module Bootstrap5Helper
     # @option opts [String]  :class
     # @option opts [Hash]    :data
     # @option opts [Hash]    :aria
+    # @option opts [Hash]    :child
     # @return [String]
     #
-    def item(target, opts = {})
-      id    = opts.fetch(:id,    nil)
-      klass = opts.fetch(:class, '')
-      data  = opts.fetch(:data,  {})
-      aria  = opts.fetch(:aria,  {})
-
-      nav_item_wrapper id: id, data: data do
-        content_tag(
-          :a,
-          class:    "nav-link #{klass}",
-          href:     "##{target}",
-          tabindex: -1,
-          data:     @child[:data],
-          aria:     aria
-        ) do
-          block_given? ? yield : target.to_s.titleize
-        end
+    def item(target, opts = {}, &block)
+      case @tag
+      when :nav
+        nav_item_without_wrapper(target, opts, &block)
+      when :ul
+        nav_item_with_wrapper(target, opts, &block)
       end
     end
-    # rubocop:enable Metrics/MethodLength
 
     # Use this when the nav item is nothing more than a hyperlink.
     #
@@ -88,6 +75,7 @@ module Bootstrap5Helper
     # @option opts [String]  :class
     # @option opts [Hash]    :data
     # @option opts [Hash]    :aria
+    # @option opts [Hash]    :child
     # @return [String]
     #
     def dropdown(name, opts = {}, &block)
@@ -96,9 +84,14 @@ module Bootstrap5Helper
       data  = opts.fetch(:data,  {}).merge('bs-toggle' => 'dropdown')
       aria  = opts.fetch(:aria,  {}).merge(haspopup: true, expanded: false)
 
-      data.merge!('bs-display' => 'static') if @child[:data]&.key?('bs-display')
-
-      nav_item_wrapper id: id, class: 'dropdown', data: data do
+      nav_item_wrapper(
+        id:    id,
+        class: 'dropdown',
+        data:  (@bs_attrs[:data] || {}).merge(
+          'bs-toggle'  => 'dropdown',
+          'bs-display' => 'static'
+        )
+      ) do
         content_tag(
           :a,
           name,
@@ -117,34 +110,114 @@ module Bootstrap5Helper
     # @return [String]
     #
     def to_s
-      content_tag(@tag, id: @id, class: "nav #{@class}", data: @data) do
+      content_tag(
+        @tag,
+        {
+          id:    @id,
+          class: "nav #{@class}",
+          data:  @data
+        }.merge(@attrs)
+      ) do
         @content.call(self)
       end
     end
 
     private
 
+    # rubocop:disable Metrics/AbcSize
+
+    # @note This is one of the few places where things deviate
+    #   a little from the pattern of child elements requiring
+    #   the :child option class needing to be set in order to
+    #   pass on the class. The reason being that the default DOM
+    #   elements built for navs are UL, which means that the
+    #   majority of them will have children elements. Just wanted
+    #   an easy process of setting the active nav, without having
+    #   to remember if you are using :nav or :ul components.
+    #
+    # @example Nav built with UL(default config) would require the
+    #   the following for setting the active nav:
+    #
+    #   ```ruby
+    #     <%= nav_helper do |nav| %>
+    #       <%= nav.item(child: { class: 'active' }) do
+    #       <% end %>
+    #     <% end %>
+    #
+    # @example With the deviation:
+    #
+    #     <%= nav_helper do |nav| %>
+    #       <%= nav.item(class: 'active') do
+    #       <% end %>
+    #     <% end %>
+    #   ```
+    #
+    # @param [Symbol|String] target
+    # @param [Hash] opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @option opts [Hash]    :aria
+    # @option opts [Hash]    :child
+    # @return [String]
+    #
+    def nav_item_with_wrapper(target, opts = {}, &block)
+      attrs = opts
+      child = attrs.delete(:child) { {} }.merge(@bs_attrs)
+      child[:class] = (child[:class] || '') << ' nav-link'
+
+      if attrs.fetch(:class, '').match?('active')
+        attrs[:class].gsub!('active', '')
+        child[:class] << ' active'
+      end
+
+      nav_item_wrapper(attrs) do
+        content_tag(
+          :a,
+          { href: "##{target}", tabindex: -1 }.merge(child)
+        ) do
+          block_given? ? block.call : target.to_s.titleize
+        end
+      end
+    end
+    # rubocop:enable Metrics/AbcSize
+
+    # @param [Symbol|String] target
+    # @param [Hash] opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @option opts [Hash]    :aria
+    # @return [String]
+    #
+    def nav_item_without_wrapper(target, opts = {}, &block)
+      attrs = opts.merge(@bs_attrs)
+      attrs[:class] = (attrs[:class] || '') << ' nav-link'
+
+      nav_item_wrapper do
+        content_tag(
+          :a,
+          { href: "##{target}", tabindex: -1 }.merge(attrs)
+        ) do
+          block_given? ? block.call : target.to_s.titleize
+        end
+      end
+    end
+
     # Decorator for elements requiring a wrapper component.
     #
     # @return [String]
     #
     def nav_item_wrapper(opts = {}, &block)
-      id    = opts.fetch(:id,    '')
-      klass = opts.fetch(:class, '')
-      data  = opts.fetch(:data,  {})
+      opts[:class] = (opts[:class] || '') << ' nav-item'
 
       case @tag
       when :nav
         block.call
       when :ul
-        content_tag(
-          :li,
-          id:    id,
-          class: "nav-item #{klass}",
-          data:  data,
-          &block
-        )
+        content_tag(:li, opts, &block)
       end
     end
   end
+  # rubocop:enable Metrics/ClassLength
 end

data/lib/bootstrap5_helper/offcanvas/content.rb

@@ -4,111 +4,112 @@ module Bootstrap5Helper
     #
     #
     class Content < Component
-      # Constructor description...
-      #
-      #
       # @param  [Hash] opts
       # @return [ClassName]
       #
       def initialize(template, opts = {}, &block)
         super(template)
 
-        @id         = opts.fetch(:id,         uuid)
-        @class      = opts.fetch(:class,      '')
-        @data       = opts.fetch(:data,       {})
-        @aria       = opts.fetch(:aria,       {})
-        @scrollable = opts.fetch(:scrollable, false)
-        @position   = opts.fetch(:position,   'start')
-        @backdrop   = opts.fetch(:backdrop,   true)
+        @attrs      = opts
+        @id         = @attrs.delete(:id)         { uuid }
+        @class      = @attrs.delete(:class)      { '' }
+        @data       = @attrs.delete(:data)       { {} }
+        @aria       = @attrs.delete(:aria)       { {} }
+        @scrollable = @attrs.delete(:scrollable) { false }
+        @position   = @attrs.delete(:position)   { 'start' }
+        @backdrop   = @attrs.delete(:backdrop)   { true }
         @content    = block || proc { '' }
       end
 
       # @todo
-      #
-      #
       def header(opts = {}, &block)
-        id    = opts.fetch(:id,    nil)
-        klass = opts.fetch(:class, '')
-        data  = opts.fetch(:data,  {})
+        attrs = opts
+        id    = attrs.delete(:id)    { nil }
+        klass = attrs.delete(:class) { '' }
+        data  = attrs.delete(:data)  { {} }
 
         content_tag(
           config({ offcanvas: :header }, :div),
-          id:    id,
-          class: "offcanvas-header #{klass}",
-          data:  data,
+          {
+            id:    id,
+            class: "offcanvas-header #{klass}",
+            data:  data
+          }.merge(attrs),
           &block
         )
       end
 
       # @todo
-      #
-      #
       def title(text_or_options = nil, opts = {}, &block)
-        text, args = parse_text_or_options(text_or_options, opts)
+        text, attrs = parse_text_or_options(text_or_options, opts)
 
-        id    = args.fetch(:id,    nil)
-        klass = args.fetch(:class, '')
-        data  = args.fetch(:data,  {})
+        id    = attrs.delete(:id)    { nil }
+        klass = attrs.delete(:class) { '' }
+        data  = attrs.delete(:data)  { {} }
 
         content_tag(
           config({ offcanvas: :title }, :h6),
           text,
-          id:    id,
-          class: "offcanvas-title #{klass}",
-          data:  data,
+          {
+            id:    id,
+            class: "offcanvas-title #{klass}",
+            data:  data
+          }.merge(attrs),
           &block
         )
       end
 
       # @todo
-      #
-      #
       def close_button(opts = {})
-        klass = opts.fetch(:class, '')
+        attrs = opts
+        klass = attrs.delete(:class)  { '' }
+        data  = attrs.delete(:data)   { {} }
+        aria  = attrs.delete(:aria)   { {} }
 
         content_tag(
           config({ offcanvas: :close }, :button),
           class: block_given? ? klass : 'btn-close',
-          data:  { 'bs-dismiss': 'offcanvas' },
-          aria:  { label: 'Close' }
+          data:  data.merge('bs-dismiss' => 'offcanvas'),
+          aria:  aria.merge(label: 'Close')
         ) do
           block_given? ? yield : xbutton
         end
       end
 
       # @todo
-      #
-      #
       def body(opts = {}, &block)
-        id    = opts.fetch(:id, nil)
-        klass = opts.fetch(:class, '')
-        data  = opts.fetch(:data, {})
-        aria  = opts.fetch(:aria, {})
+        attrs = opts
+        id    = attrs.delete(:id)    { nil }
+        klass = attrs.delete(:class) { '' }
+        data  = attrs.delete(:data)  { {} }
+        aria  = attrs.delete(:aria)  { {} }
 
         content_tag(
           :div,
-          id:    id,
-          class: "offcanvas-body #{klass}",
-          data:  data,
-          aria:  aria,
+          {
+            id:    id,
+            class: "offcanvas-body #{klass}",
+            data:  data,
+            aria:  aria
+          }.merge(attrs),
           &block
         )
       end
 
       # @todo
-      #
-      #
       def to_s
-        @data.merge!('bs-scroll':   @scrollable)
-        @data.merge!('bs-backdrop': @backdrop)
-
         content_tag(
           :div,
-          id:       @id,
-          class:    "offcanvas offcanvas-#{@position} #{@class}",
-          tabindex: -1,
-          data:     @data,
-          aria:     { labelledby: 'offcanvasExampleLabel' }
+          {
+            id:       @id,
+            class:    "offcanvas offcanvas-#{@position} #{@class}",
+            tabindex: -1,
+            data:     @data.merge!(
+              'bs-scroll'   => @scrollable,
+              'bs-backdrop' => @backdrop
+            ),
+            aria:     @aria.merge!(labelledby: 'offcanvasExampleLabel')
+          }.merge(@attrs)
         ) do
           @content.call(self)
         end

data/lib/bootstrap5_helper/offcanvas.rb

@@ -18,14 +18,14 @@ module Bootstrap5Helper
     #
     def initialize(template, position_or_options = nil, opts = {}, &block)
       super(template)
-      @pos, args  = parse_position_or_options(position_or_options, opts)
-      @id         = args.fetch(:id,         uuid)
-      @class      = args.fetch(:class,      '')
-      @data       = args.fetch(:data,       {})
-      @aria       = args.fetch(:aria,       {})
-      @scrollable = args.fetch(:scrollable, false)
-      @backdrop   = args.fetch(:backdrop,   true)
-      @content    = block || proc { '' }
+      @pos, @attrs  = parse_position_or_options(position_or_options, opts)
+      @id           = @attrs.delete(:id)         { uuid }
+      @class        = @attrs.delete(:class)      { '' }
+      @data         = @attrs.delete(:data)       { {} }
+      @aria         = @attrs.delete(:aria)       { {} }
+      @scrollable   = @attrs.delete(:scrollable) { false }
+      @backdrop     = @attrs.delete(:backdrop)   { true }
+      @content      = block || proc { '' }
     end
     # rubocop:disable Metrics/MethodLength
 
@@ -139,7 +139,7 @@ module Bootstrap5Helper
           scrollable: @scrollable,
           backdrop:   @backdrop,
           position:   @pos
-        },
+        }.merge(@attrs),
         &block
       )
     end

data/lib/bootstrap5_helper/overlay/menu.rb

@@ -1,8 +1,9 @@
+# frozen_string_literal: false
+
 module Bootstrap5Helper
   class Overlay
+    # rubocop:disable Metrics/ClassLength
     # Builds a menu component for use in dropdowns.
-    #
-    #
     class Menu < Component
       # Class constructor
       #
@@ -17,9 +18,10 @@ module Bootstrap5Helper
         super(template)
 
         @tag, opts = parse_tag_or_options(*tag_or_options, {})
-        @id        = opts.fetch(:id,    uuid)
-        @class     = opts.fetch(:class, '')
-        @data      = opts.fetch(:data,  {})
+        @attrs     = opts
+        @id        = @attrs.delete(:id)    { uuid }
+        @class     = @attrs.delete(:class) { '' }
+        @data      = @attrs.delete(:data)  { {} }
         @content   = block || proc { '' }
       end
 
@@ -45,8 +47,6 @@ module Bootstrap5Helper
         end
       end
 
-      # rubocop:disable Metrics/MethodLength
-
       # Use this method when you are using the item in the menu as trigger for
       # something like tab content.
       #
@@ -59,25 +59,23 @@ module Bootstrap5Helper
       # @return [String]
       #
       def item(target, opts = {})
-        id    = opts.fetch(:id,    nil)
-        klass = opts.fetch(:class, '')
-        data  = opts.fetch(:data,  {}).merge('bs-toggle' => 'tab')
-        aria  = opts.fetch(:aria,  {})
+        attrs = opts
+        klass = attrs.delete(:class) { '' }
+        data  = attrs.delete(:data)  { {} }
 
         nav_item_wrapper do
           content_tag(
             :a,
-            id:    id,
-            class: "dropdown-item #{klass}",
-            href:  "##{target}",
-            aria:  aria,
-            data:  data
+            {
+              class: "dropdown-item #{klass}",
+              href:  "##{target}",
+              data:  data.merge('bs-toggle' => 'tab')
+            }.merge(attrs)
           ) do
             block_given? ? yield : target.to_s.titleize
           end
         end
       end
-      # rubocop:enable Metrics/MethodLength
 
       # Builds a Text component
       #
@@ -142,9 +140,11 @@ module Bootstrap5Helper
       def to_s
         content_tag(
           @tag || config({ overlay_menus: :base }, :div),
-          id:    @id,
-          class: "dropdown-menu #{@class}",
-          data:  @data
+          {
+            id:    @id,
+            class: "dropdown-menu #{@class}",
+            data:  @data
+          }.merge(@attrs)
         ) do
           @content.call(self)
         end
@@ -177,19 +177,23 @@ module Bootstrap5Helper
       # @return [String]
       #
       def build_sub_component(tag, text, type, opts)
-        id    = opts.fetch(:id,    nil)
-        klass = opts.fetch(:class, '')
-        data  = opts.fetch(:data,  {})
+        attrs = opts
+        id    = attrs.delete(:id)    { nil }
+        klass = attrs.delete(:class) { '' }
+        data  = attrs.delete(:data)  { {} }
 
         content_tag(
           tag,
-          id:    id,
-          class: "dropdown-#{type} #{klass}",
-          data:  data
+          {
+            id:    id,
+            class: "dropdown-#{type} #{klass}",
+            data:  data
+          }.merge(attrs)
         ) do
           block_given? ? yield : text || ''
         end
       end
     end
+    # rubocop:enable Metrics/ClassLength
   end
 end

data/lib/bootstrap5_helper/overlay.rb

@@ -28,15 +28,18 @@ module Bootstrap5Helper
       super(template)
 
       @tag, args = parse_tag_or_options(*tag_or_options, {})
-      @split     = args.fetch(:split,    false)
-      @centered  = args.fetch(:centered, false)
-      @id        = args.fetch(:id,       uuid)
-      @class     = args.fetch(:class,    '')
-      @data      = args.fetch(:data,     {})
+      @attrs     = args
+      @split     = @attrs.delete(:split)    { false }
+      @centered  = @attrs.delete(:centered) { false }
+      @id        = @attrs.delete(:id)       { uuid }
+      @class     = @attrs.delete(:class)    { '' }
+      @data      = @attrs.delete(:data)     { {} }
 
       @content   = block || proc { '' }
     end
 
+    # rubocop:disable Metrics/MethodLength
+
     # Used to generate a button for the dropdown.  This button just
     # opens the coresponding dropdown menu.
     #
@@ -48,23 +51,29 @@ module Bootstrap5Helper
     # @return [String]
     #
     def button(context = :primary, opts = {}, &block)
-      id     = opts.fetch(:id,    nil)
-      klass  = opts.fetch(:class, '')
-      data   = opts.fetch(:data,  {}).merge(
-        'bs-toggle'  => 'dropdown',
-        'bs-display' => 'static'
-      )
+      attrs  = opts
+      klass  = attrs.delete(:class) { '' }
+      data   = attrs.delete(:data)  { {} }
+      aria   = attrs.delete(:aria)  { {} }
 
       content_tag(
         :button,
-        id:    id,
-        type:  'button',
-        class: "dropdown-toggle btn btn-#{context} #{klass}",
-        data:  data,
-        aria:  { haspopup: true, expanded: false },
+        {
+          type:  'button',
+          class: "dropdown-toggle btn btn-#{context} #{klass}",
+          data:  data.merge(
+            'bs-toggle'  => 'dropdown',
+            'bs-display' => 'static'
+          ),
+          aria:  aria.merge(
+            haspopup: true,
+            expanded: false
+          )
+        }.merge(attrs),
         &block
       )
     end
+    # rubocop:enable Metrics/MethodLength
 
     # Used to generate a button with just the caret, to open the dropdown.
     #
@@ -112,9 +121,11 @@ module Bootstrap5Helper
     def to_s
       content_tag(
         @tag || :div,
-        id:    @id,
-        class: "#{@type} #{alignment_type_class} #{@class}",
-        data:  @data
+        {
+          id:    @id,
+          class: "#{@type} #{alignment_type_class} #{@class}",
+          data:  @data
+        }.merge(@attrs)
       ) do
         @content.call(self)
       end

data/lib/bootstrap5_helper/page_header.rb

@@ -15,12 +15,12 @@ module Bootstrap5Helper
     def initialize(template, tag_or_options = nil, opts = {}, &block)
       super(template)
 
-      @tag, args = parse_tag_or_options(tag_or_options, opts)
+      @tag, @attrs = parse_tag_or_options(tag_or_options, opts)
       @tag ||= config(:page_header, :h1)
 
-      @id      = args.fetch(:id,    uuid)
-      @class   = args.fetch(:class, '')
-      @data    = args.fetch(:data,  {})
+      @id      = @attrs.delete(:id)    { uuid }
+      @class   = @attrs.delete(:class) { '' }
+      @data    = @attrs.delete(:data)  { {} }
       @content = block || proc { '' }
     end
 
@@ -31,9 +31,11 @@ module Bootstrap5Helper
     def to_s
       content_tag(
         @tag,
-        id:    @id,
-        class: "pb-2 mt-4 mb-2 border-bottom #{@class}",
-        data:  @data
+        {
+          id:    @id,
+          class: "pb-2 mt-4 mb-2 border-bottom #{@class}",
+          data:  @data
+        }.merge(@attrs)
       ) do
         @content.call(self)
       end