bootstrap5_helper 1.0.0

data/lib/bootstrap5_helper/dropdown/menu.rb

@@ -0,0 +1,157 @@
+module Bootstrap5Helper
+  class Dropdown
+    # Builds a menu component for use in dropdowns.
+    #
+    #
+    class Menu < Component
+      # Class constructor
+      #
+      # @param [ActionView] template
+      # @param [Hash] opts
+      # @option opts [String]  :id
+      # @option opts [String]  :class
+      # @option opts [Hash]    :data
+      #
+      def initialize(template, opts = {}, &block)
+        super(template)
+
+        @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.
+      #
+      # @param  [String] name
+      # @param  [Hash]   options
+      # @param  [Hash]   html_options
+      # @return [String]
+      #
+      def link(name = nil, options = nil, html_options = nil, &block)
+        html_options ||= {}
+        html_options[:class] = (html_options[:class] || '') << ' dropdown-item'
+
+        @template.link_to(name, options, html_options, &block)
+      end
+
+      # Use this method when you are using the item in the menu as trigger for tab
+      # content.
+      #
+      # @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 item(target, opts = {})
+        id    = opts.fetch(:id,    nil)
+        klass = opts.fetch(:class, '')
+        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
+        end
+      end
+
+      # Builds a Text component
+      #
+      # @param  [Symbol|String] text
+      # @param  [Hash] opts
+      # @option opts [String]  :id
+      # @option opts [String]  :class
+      # @option opts [Hash]    :data
+      # @return [String]
+      #
+      def text(text, opts = {}, &block)
+        build_sub_component(
+          config({ dropdown_menus: :text }, :span),
+          text,
+          'item-text',
+          opts,
+          &block
+        )
+      end
+
+      # Builds a Header component
+      #
+      # @param  [Symbol|String] text
+      # @param  [Hash] opts
+      # @option opts [String]  :id
+      # @option opts [String]  :class
+      # @option opts [Hash]    :data
+      # @return [String]
+      #
+      def header(text, opts = {}, &block)
+        build_sub_component(
+          config({ dropdown_menus: :header }, :h6),
+          text,
+          'header',
+          opts,
+          &block
+        )
+      end
+
+      # Builds a divider element
+      #
+      # @return [String]
+      #
+      def divider
+        content_tag(
+          config({ dropdown_menus: :divider }, :div),
+          '',
+          class: 'dropdown-divider'
+        )
+      end
+
+      # String representation of the object.
+      #
+      # @return [String]
+      #
+      def to_s
+        content_tag :div, id: @id, class: "dropdown-menu #{@class}", data: @data do
+          @content.call(self)
+        end
+      end
+
+      private
+
+      # Used to build specific components.
+      #
+      # @param [Symbol] tag
+      # @param [Symbol|String] text
+      # @param [Symbol|String] type
+      # @param [Hash] opts
+      # @option opts [String]  :id
+      # @option opts [String]  :class
+      # @option opts [Hash]    :data
+      # @return [String]
+      #
+      def build_sub_component(tag, text, type, opts)
+        id    = opts.fetch(:id,    nil)
+        klass = opts.fetch(:class, '')
+        data  = opts.fetch(:data,  {})
+
+        content_tag(
+          tag,
+          id:    id,
+          class: "dropdown-#{type} #{klass}",
+          data:  data
+        ) do
+          block_given? ? yield : text || ''
+        end
+      end
+    end
+  end
+end

data/lib/bootstrap5_helper/dropdown.rb

@@ -0,0 +1,121 @@
+module Bootstrap5Helper
+  # Builds a Dropdown component that can be used in other components.
+  #
+  #
+  class Dropdown < Component
+    # Class constructor
+    #
+    # @param [ActionView]    template
+    # @param [Symbol|String] type
+    # @param [Hash]          opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @option opts [Boolea]  :split
+    # @option opts [Boolean] :centered
+    #
+    def initialize(template, type = :dropdown, opts = {}, &block)
+      super(template)
+
+      @type     = type
+      @split    = opts.fetch(:split,    false)
+      @centered = opts.fetch(:centered, false)
+      @id       = opts.fetch(:id,       uuid)
+      @class    = opts.fetch(:class,    '')
+      @data     = opts.fetch(:data,     {})
+      @content  = block || proc { '' }
+    end
+
+    # Used to generate a button for the dropdown.  The buttons default as just
+    # a button that opens the coresponding dropdown menu.  The `split: true` option
+    # make the button just the arrow indicator that open the menu.
+    #
+    # @param  [Symbol] context
+    # @param  [Hash]   opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @option opts [Boolean] :split
+    # @return [String]
+    #
+    def button(context = :primary, opts = {})
+      id     = opts.fetch(:id,    nil)
+      klass  = opts.fetch(:class, '')
+      split  = opts.fetch(:split, false)
+      data   = opts.fetch(:data,  {}).merge('bs-toggle' => 'dropdown')
+      extra  = @split ? 'dropdown-toggle-split' : ''
+
+      content_tag(
+        :button,
+        id:    id,
+        type:  'button',
+        class: "dropdown-toggle btn btn-#{context} #{klass} #{extra}",
+        data:  data,
+        aria:  { haspopup: true, expanded: false }
+      ) do
+        split ? content_tag(:span, 'Toggle Dropdown', class: 'visually-hidden') : yield
+      end
+    end
+
+    # Used to create a new `Dropdown::Menu`
+    #
+    # @param  [Hash] opts
+    # @option opts [String] :id
+    # @option opts [String] :class
+    # @option opts [Hash]   :data
+    # @return [Dropdown::Menu]
+    #
+    def menu(opts = {}, &block)
+      Menu.new(@template, opts, &block)
+    end
+
+    # String reprentation of the object.
+    #
+    # @return [String]
+    #
+    def to_s
+      content_tag(
+        :div,
+        id:    @id,
+        class: "#{element_type_class} #{alignment_type_class} #{@class}",
+        data:  @data
+      ) do
+        @content.call(self)
+      end
+    end
+
+    private
+
+    # Returns the container class for the dropdown component.
+    #
+    # @return [String]
+    #
+    def element_type_class
+      case @type
+      when :dropdown
+        'dropdown'
+      when :dropup
+        'dropup'
+      when :dropstart
+        'dropstart'
+      when :dropend
+        'dropend'
+      else
+        ''
+      end
+    end
+
+    # Returns the alignment class for the dropdown component.
+    #
+    # @return [String]
+    #
+    def alignment_type_class
+      case @type
+      when :dropdown, :dropup
+        @centered ? "#{element_type_class}-center" : ''
+      else
+        ''
+      end
+    end
+  end
+end

data/lib/bootstrap5_helper/initialize.rb

@@ -0,0 +1,19 @@
+module Bootstrap5Helper # :nodoc:
+  # Naming convention used as to not pollute views where the module is
+  # included.  @config is a common instance variable name.  We don't want
+  # to risk overriding another developers variable.
+  #
+  @_bs5h_config = Configuration.new
+
+  class << self
+    # Simple interface for exposing the configuration object.
+    #
+    # @return [Bootstrap5Helper::Configuration]
+    #
+    def config
+      yield @_bs5h_config if block_given?
+
+      @_bs5h_config
+    end
+  end
+end

data/lib/bootstrap5_helper/input_group.rb

@@ -0,0 +1,70 @@
+module Bootstrap5Helper
+  # The InputGroup helper is meant to help you rapidly build Bootstrap input
+  # group components quickly and easily.
+  #
+  class InputGroup < Component
+    # Class constructor
+    #
+    # @param  [Class] template - Template in which your are binding too.
+    # @param  [Symbol|Hash] context_or_options
+    # @param  [Hash]  opts
+    # @option opts [String] :id
+    # @option opts [String] :class
+    # @option opts [Hash]   :data
+    # @return [InputGroup]
+    #
+    def initialize(template, context_or_options = nil, opts = {}, &block)
+      super(template)
+
+      @context, args = parse_context_or_options(context_or_options, opts)
+
+      @id      = args.fetch(:id,     nil)
+      @class   = args.fetch(:class,  '')
+      @data    = args.fetch(:data,   {})
+      @content = block || proc { '' }
+    end
+
+    # This is the element that actually houses the icon or text used
+    # in the input group.
+    #
+    # @param  [Hash] opts
+    # @return [String]
+    #
+    def text(opts = {}, &block)
+      opts[:class] = (opts[:class] || '') << ' input-group-text'
+      content_tag :span, opts, &block
+    end
+
+    # Used to render out the InputGroup component.
+    #
+    # @return [String]
+    #
+    def to_s
+      content_tag(
+        :div,
+        id:    @id,
+        class: "input-group #{size_class} #{@class}",
+        data:  @data
+      ) do
+        @content.call(self)
+      end
+    end
+
+    private
+
+    # Used to get the size of the input group.
+    #
+    # @return [String]
+    #
+    def size_class
+      case @context
+      when :sm
+        'input-group-sm'
+      when :lg
+        'input-group-lg'
+      else
+        ''
+      end
+    end
+  end
+end

data/lib/bootstrap5_helper/modal.rb

@@ -0,0 +1,224 @@
+module Bootstrap5Helper
+  # rubocop:disable Metrics/ClassLength
+
+  # Builds a Modal window component.
+  #
+  #
+  class Modal < Component
+    # Class constructor
+    #
+    # @param  [ActionView] template
+    # @param  [Hash] opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @option opts [Boolean] :scrollable
+    # @option opts [Boolean] :vcentered
+    # @option opts [Boolean] :static
+    # @option opts [Boolean|Symbol] :fullscreen
+    # @option opts [Symbol]  :size
+    #
+    def initialize(template, opts = {}, &block)
+      super(template)
+
+      @id         = opts.fetch(:id,         uuid)
+      @class      = opts.fetch(:class,      '')
+      @data       = opts.fetch(:data,       {})
+      @scrollable = opts.fetch(:scrollable, false)
+      @vcentered  = opts.fetch(:vcentered,  false)
+      @static     = opts.fetch(:static,     false)
+      @fullscreen = opts.fetch(:fullscreen, true)
+      @size       = opts.fetch(:size,       nil)
+      @content    = block || proc { '' }
+    end
+
+    # Build the header component for the modal.
+    #
+    # @param  [Hash] opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @return [String]
+    #
+    def header(opts = {}, &block)
+      build_main_component :header, opts, &block
+    end
+
+    # Builds the body component.
+    #
+    # @param  [Hash] opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @return [String]
+    #
+    def body(opts = {}, &block)
+      build_main_component :body, opts, &block
+    end
+
+    # Builds the footer component.
+    #
+    # @param  [Hash] opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @return [String]
+    #
+    def footer(opts = {}, &block)
+      build_main_component :footer, opts, &block
+    end
+
+    # Builds a title component.
+    #
+    # @param  [Hash] opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @return [String]
+    #
+    def title(opts = {}, &block)
+      build_sub_component config({ modals: :title }, :h5), :title, opts, &block
+    end
+
+    # Builds a close button component.
+    #
+    # @param  [Hash] opts
+    # @option opts [String] :class
+    # @return [String]
+    #
+    def close_button(opts = {})
+      klass = opts.fetch(:class, '')
+
+      content_tag(
+        :button,
+        type:  'button',
+        class: block_given? ? klass : 'btn-close',
+        data:  { 'bs-dismiss': 'modal' },
+        aria:  { label: 'Close' }
+      ) do
+        block_given? ? yield : xbutton
+      end
+    end
+
+    # rubocop:disable Metrics/MethodLength
+
+    # String representation of the object.
+    #
+    # @return [String]
+    #
+    def to_s
+      @data.merge!('bs-backdrop' => 'static', 'bs-keyboard' => false) if @static
+
+      content_tag(
+        :div,
+        id:       @id,
+        class:    "modal #{@class}",
+        tabindex: -1,
+        role:     'dialog',
+        data:     @data
+      ) do
+        content_tag(
+          :div,
+          class: "modal-dialog #{size} #{scrollable} #{vcentered} #{fullscreen}",
+          role:  'document'
+        ) do
+          content_tag(:div, class: 'modal-content') { @content.call(self) }
+        end
+      end
+    end
+    # rubocop:enable Metrics/MethodLength
+
+    private
+
+    # Used to build main components, usually divs.
+    #
+    # @param  [Symbol|String] type
+    # @param  [Hash] opts
+    # @return [String]
+    #
+    def build_main_component(type, opts = {}, &block)
+      build_sub_component :div, type, opts, &block
+    end
+
+    # Used to build more specific components.
+    #
+    # @param [Symbol] tag
+    # @param [Symbol|String] type
+    # @param [Hash] opts
+    # @option opts [String]  :id
+    # @option opts [String]  :class
+    # @option opts [Hash]    :data
+    # @return [String]
+    #
+    def build_sub_component(tag, type, opts = {}, &block)
+      id    = opts.fetch(:id,    nil)
+      klass = opts.fetch(:class, '')
+      data  = opts.fetch(:data,  {})
+
+      content_tag(
+        tag,
+        id:    id,
+        class: "modal-#{type} #{klass}",
+        data:  data,
+        &block
+      )
+    end
+
+    # Builds the `x` button normally used in the header.
+    #
+    # @return [String]
+    #
+    def xbutton
+      content_tag :span, '&times;'.html_safe, class: 'visually-hidden', aria: { hidden: true }
+    end
+
+    # Gets the scrollable CSS class.
+    #
+    # @return [String]
+    #
+    def scrollable
+      @scrollable ? 'modal-dialog-scrollable' : ''
+    end
+
+    # Gets the vertical-center CSS class.
+    #
+    # @return [String]
+    #
+    def vcentered
+      @vcentered ? 'modal-dialog-centered' : ''
+    end
+
+    # Gets the fullscreen class.
+    #
+    # @return [String]
+    #
+    def fullscreen
+      case @fullscreen
+      when TrueClass
+        'modal-fullscreen'
+      when String, Symbol
+        "modal-fullscreen-#{@fullscreen}-down	"
+      else
+        ''
+      end
+    end
+
+    # Gets the size of the modal window.
+    #
+    # @return [String]
+    #
+    def size
+      case @size
+      when :xlarge
+        'modal-xl'
+      when :large
+        'modal-lg'
+      when :small
+        'modal-sm'
+      else
+        ''
+      end
+    end
+  end
+  # rubocop:enable Metrics/ClassLength
+end