bootstrap5_helper 1.0.0 → 1.1.0

data/lib/bootstrap5_helper/dropup.rb

@@ -0,0 +1,34 @@
+module Bootstrap5Helper
+  # Builds a Dropdown component that can be used in other components.
+  #
+  #
+  class Dropup < Overlay
+    # Class constructor
+    #
+    # @overload initialize(template, tag, opts)
+    #   @param [ActionView]    template
+    #   @param [Symbol|String] tag - The HTML element to use to wrap the component.
+    #   @param [Hash]          opts
+    #   @option opts [String]  :id
+    #   @option opts [String]  :class
+    #   @option opts [Hash]    :data
+    #   @option opts [Boolea]  :split
+    #   @option opts [Boolean] :centered
+    #
+    # @overload initialize(template, opts)
+    #   @param [ActionView]    template
+    #   @param [Hash]          opts
+    #   @option opts [String]  :id
+    #   @option opts [String]  :class
+    #   @option opts [Hash]    :data
+    #   @option opts [Boolea]  :split
+    #   @option opts [Boolean] :centered
+    #
+    # @return [Dropup]
+    #
+    def initialize(template, *tag_or_options, &block)
+      super(template, *tag_or_options, &block)
+      @type = :dropup
+    end
+  end
+end

data/lib/bootstrap5_helper/modal.rb

@@ -27,7 +27,7 @@ module Bootstrap5Helper
       @scrollable = opts.fetch(:scrollable, false)
       @vcentered  = opts.fetch(:vcentered,  false)
       @static     = opts.fetch(:static,     false)
-      @fullscreen = opts.fetch(:fullscreen, true)
+      @fullscreen = opts.fetch(:fullscreen, false)
       @size       = opts.fetch(:size,       nil)
       @content    = block || proc { '' }
     end
@@ -208,12 +208,12 @@ module Bootstrap5Helper
     # @return [String]
     #
     def size
-      case @size
-      when :xlarge
+      case @size.to_s
+      when 'xlarge', 'xl'
         'modal-xl'
-      when :large
+      when 'large', 'lg'
         'modal-lg'
-      when :small
+      when 'small', 'sm'
         'modal-sm'
       else
         ''

data/lib/bootstrap5_helper/nav.rb

@@ -11,20 +11,20 @@ module Bootstrap5Helper
     # @option opts [String]  :id
     # @option opts [String]  :class
     # @option opts [Hash]    :data
-    # @option opts [Hash]    :child
+    # @option opts [Array]   :dropdown
+    # @option opts []
     #
-    def initialize(template, tag_or_options = nil, opts = {}, &block)
+    def initialize(template, *tag_or_options, &block)
       super(template)
 
-      @tag, args = parse_tag_or_options(tag_or_options, opts)
+      @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 { '' }
-
+      @id       = args.fetch(:id,    uuid)
+      @class    = args.fetch(:class, '')
+      @data     = args.fetch(:data,  {})
+      @child    = args.fetch(:child, {})
+      @content  = block || proc { '' }
       @dropdown = Dropdown.new(@template)
     end
 
@@ -78,6 +78,8 @@ module Bootstrap5Helper
       end
     end
 
+    # rubocop:disable Metrics/MethodLength
+
     # Creates a dropdown menu for the nav.
     #
     # @param [NilClass|Symbol|String] name
@@ -91,21 +93,24 @@ module Bootstrap5Helper
     def dropdown(name, opts = {}, &block)
       id    = opts.fetch(:id,    nil)
       klass = opts.fetch(:class, '')
-      data  = opts.fetch(:data,  {})
+      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
         content_tag(
           :a,
           name,
           class: "nav-link dropdown-toggle #{klass}",
           href:  '#',
-          data:  { 'bs-toggle' => 'dropdown' },
+          data:  data,
           role:  'button',
           aria:  aria
         ) + @dropdown.menu(opts, &block).to_s.html_safe
       end
     end
+    # rubocop:enable Metrics/MethodLength
 
     # String representation of the object.
     #
@@ -119,7 +124,7 @@ module Bootstrap5Helper
 
     private
 
-    # Decorator for elements require a wrapper component.
+    # Decorator for elements requiring a wrapper component.
     #
     # @return [String]
     #

data/lib/bootstrap5_helper/offcanvas/content.rb

@@ -19,6 +19,7 @@ module Bootstrap5Helper
         @aria       = opts.fetch(:aria,       {})
         @scrollable = opts.fetch(:scrollable, false)
         @position   = opts.fetch(:position,   'start')
+        @backdrop   = opts.fetch(:backdrop,   true)
         @content    = block || proc { '' }
       end
 

data/lib/bootstrap5_helper/{dropdown → overlay}/menu.rb

@@ -1,28 +1,30 @@
 module Bootstrap5Helper
-  class Dropdown
+  class Overlay
     # Builds a menu component for use in dropdowns.
     #
     #
     class Menu < Component
       # Class constructor
       #
-      # @param [ActionView] template
-      # @param [Hash] opts
+      # @param [ActionView]     template
+      # @param [Symbol|Hash]    tag_or_options
+      # @param [Hash]           opts
       # @option opts [String]  :id
       # @option opts [String]  :class
       # @option opts [Hash]    :data
       #
-      def initialize(template, opts = {}, &block)
+      def initialize(template, *tag_or_options, &block)
         super(template)
 
-        @id      = opts.fetch(:id,    uuid)
-        @class   = opts.fetch(:class, '')
-        @data    = opts.fetch(:data,  {})
-        @content = block || proc { '' }
+        @tag, opts = parse_tag_or_options(*tag_or_options, {})
+        @id        = opts.fetch(:id,    uuid)
+        @class     = opts.fetch(:class, '')
+        @data      = opts.fetch(:data,  {})
+        @content   = block || proc { '' }
       end
 
-      # Use this method when the `item`, `link` in the item in the menu  is nothing
-      # more than a hyperlink.
+      # Use this method when the menu `item` is nothing more than a
+      # hyperlink.
       #
       # @param  [String] name
       # @param  [Hash]   options
@@ -33,11 +35,15 @@ module Bootstrap5Helper
         html_options ||= {}
         html_options[:class] = (html_options[:class] || '') << ' dropdown-item'
 
-        @template.link_to(name, options, html_options, &block)
+        nav_item_wrapper do
+          @template.link_to(name, options, html_options, &block)
+        end
       end
 
-      # Use this method when you are using the item in the menu as trigger for tab
-      # content.
+      # rubocop:disable Metrics/MethodLength
+
+      # Use this method when you are using the item in the menu as trigger for
+      # something like tab content.
       #
       # @param [Symbol|String] target
       # @param [Hash] opts
@@ -53,17 +59,20 @@ module Bootstrap5Helper
         data  = opts.fetch(:data,  {}).merge('bs-toggle' => 'tab')
         aria  = opts.fetch(:aria,  {})
 
-        content_tag(
-          :a,
-          id:    id,
-          class: "dropdown-item #{klass}",
-          href:  "##{target}",
-          aria:  aria,
-          data:  data
-        ) do
-          block_given? ? yield : target.to_s.titleize
+        nav_item_wrapper do
+          content_tag(
+            :a,
+            id:    id,
+            class: "dropdown-item #{klass}",
+            href:  "##{target}",
+            aria:  aria,
+            data:  data
+          ) do
+            block_given? ? yield : target.to_s.titleize
+          end
         end
       end
+      # rubocop:enable Metrics/MethodLength
 
       # Builds a Text component
       #
@@ -75,13 +84,15 @@ module Bootstrap5Helper
       # @return [String]
       #
       def text(text, opts = {}, &block)
-        build_sub_component(
-          config({ dropdown_menus: :text }, :span),
-          text,
-          'item-text',
-          opts,
-          &block
-        )
+        nav_item_wrapper do
+          build_sub_component(
+            config({ overlay_menus: :text }, :span),
+            text,
+            'item-text',
+            opts,
+            &block
+          )
+        end
       end
 
       # Builds a Header component
@@ -94,13 +105,15 @@ module Bootstrap5Helper
       # @return [String]
       #
       def header(text, opts = {}, &block)
-        build_sub_component(
-          config({ dropdown_menus: :header }, :h6),
-          text,
-          'header',
-          opts,
-          &block
-        )
+        nav_item_wrapper do
+          build_sub_component(
+            config({ overlay_menus: :header }, :h6),
+            text,
+            'header',
+            opts,
+            &block
+          )
+        end
       end
 
       # Builds a divider element
@@ -108,11 +121,13 @@ module Bootstrap5Helper
       # @return [String]
       #
       def divider
-        content_tag(
-          config({ dropdown_menus: :divider }, :div),
-          '',
-          class: 'dropdown-divider'
-        )
+        nav_item_wrapper do
+          content_tag(
+            config({ overlay_menus: :divider }, :div),
+            '',
+            class: 'dropdown-divider'
+          )
+        end
       end
 
       # String representation of the object.
@@ -120,13 +135,31 @@ module Bootstrap5Helper
       # @return [String]
       #
       def to_s
-        content_tag :div, id: @id, class: "dropdown-menu #{@class}", data: @data do
+        content_tag(
+          @tag || config({ overlay_menus: :base }, :div),
+          id:    @id,
+          class: "dropdown-menu #{@class}",
+          data:  @data
+        ) do
           @content.call(self)
         end
       end
 
       private
 
+      # Decorator for elements requiring a wrapper component.
+      #
+      # @return [String]
+      #
+      def nav_item_wrapper(&block)
+        case @tag
+        when :div, nil
+          block.call
+        when :ul
+          content_tag(:li, &block)
+        end
+      end
+
       # Used to build specific components.
       #
       # @param [Symbol] tag

data/lib/bootstrap5_helper/overlay.rb

@@ -0,0 +1,138 @@
+module Bootstrap5Helper
+  # Builds a Overlay component that can be used in other components.
+  #
+  #
+  class Overlay < Component
+    # Class constructor
+    #
+    # @overload initialize(template, tag, opts)
+    #   @param [ActionView]    template
+    #   @param [Symbol|String] tag - The HTML element to use to wrap the component.
+    #   @param [Hash]          opts
+    #   @option opts [String]  :id
+    #   @option opts [String]  :class
+    #   @option opts [Hash]    :data
+    #   @option opts [Boolean] :centered
+    #
+    # @overload initialize(template, opts)
+    #   @param [ActionView]    template
+    #   @param [Hash]          opts
+    #   @option opts [String]  :id
+    #   @option opts [String]  :class
+    #   @option opts [Hash]    :data
+    #   @option opts [Boolean] :centered
+    #
+    # @return [Overlay]
+    #
+    def initialize(template, *tag_or_options, &block)
+      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,     {})
+
+      @content   = block || proc { '' }
+    end
+
+    # Used to generate a button for the dropdown.  This button just
+    # opens the coresponding dropdown menu.
+    #
+    # @param  [Symbol] context
+    # @param  [Hash]   opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @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'
+      )
+
+      content_tag(
+        :button,
+        id:    id,
+        type:  'button',
+        class: "dropdown-toggle btn btn-#{context} #{klass}",
+        data:  data,
+        aria:  { haspopup: true, expanded: false },
+        &block
+      )
+    end
+
+    # Used to generate a button with just the caret, to open the dropdown.
+    #
+    # @param  [Symbol] context
+    # @param  [Hash]   opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @return [String]
+    #
+    def caret(context = :primary, opts = {})
+      id     = opts.fetch(:id,    nil)
+      klass  = opts.fetch(:class, '')
+      data   = opts.fetch(:data,  {}).merge('bs-toggle' => 'dropdown')
+
+      content_tag(
+        :button,
+        id:    id,
+        type:  'button',
+        class: "dropdown-toggle btn btn-#{context} #{klass} dropdown-toggle-split",
+        data:  data,
+        aria:  { haspopup: true, expanded: false }
+      ) do
+        content_tag(:span, 'Toggle Dropdown', class: 'visually-hidden')
+      end
+    end
+
+    # Used to create a new <tt>Dropdown::Menu</tt>
+    #
+    # @param  [Hash] opts
+    # @option opts [String] :id
+    # @option opts [String] :class
+    # @option opts [Hash]   :data
+    # @yield [Menu]
+    # @return [Menu]
+    #
+    def menu(*tag_or_options, &block)
+      Menu.new(@template, *tag_or_options, &block)
+    end
+
+    # String reprentation of the object.
+    #
+    # @return [String]
+    #
+    def to_s
+      content_tag(
+        @tag || :div,
+        id:    @id,
+        class: "#{@type} #{alignment_type_class} #{@class}",
+        data:  @data
+      ) do
+        @content.call(self)
+      end
+    end
+
+    private
+
+    # Returns the alignment class for the dropdown component.
+    #
+    # @return [String]
+    #
+    def alignment_type_class
+      case @type
+      when :dropdown, :dropup
+        @centered ? "#{@type}-center" : ''
+      else
+        ''
+      end
+    end
+  end
+end

data/lib/bootstrap5_helper/tab.rb

@@ -24,14 +24,26 @@ module Bootstrap5Helper
 
     # Builds a custom Nav component for the tabs.
     #
-    # @param  [Symbol|Hash] tag_or_options
-    # @param  [Hash] opts
-    # @option opts [String] :class
-    # @option opts [Hash]   :data
+    # @overload nav(tag, opts)
+    #   @param [Symbol|String] tag - :nav, :ul
+    #   @param [Hash] opts
+    #   @option opts [String]  :id
+    #   @option opts [String]  :class
+    #   @option opts [Hash]    :data
+    #   @option opts [Hash]    :child - data attributes for child, NOT wrapper
+    #
+    # @overload nav(opts)
+    #   @param [Hash] opts
+    #   @option opts [String]  :id
+    #   @option opts [String]  :class
+    #   @option opts [Hash]    :data
+    #   @option opts [Hash]    :child - data attributes for child, NOT wrapper
+    #
+    # @yield  [Nav]
     # @return [Nav]
     #
-    def nav(tag_or_options = nil, opts = {}, &block)
-      tag, args = parse_tag_or_options(tag_or_options, opts)
+    def nav(*tag_or_options, &block)
+      tag, args = parse_tag_or_options(*tag_or_options, {})
 
       args[:class] = (args[:class] || '') << " nav-#{@type}"
       args[:data]  = (args[:data]  || {}).merge('bs-toggle' => 'tab')

data/lib/bootstrap5_helper/version.rb

@@ -1,3 +1,3 @@
 module Bootstrap5Helper
-  VERSION = '1.0.0'.freeze
+  VERSION = '1.1.0'.freeze
 end