element_component 0.5.0 → 0.7.0

data/lib/element_component/components/breadcrumb.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require_relative "breadcrumb/item"
+
+module ElementComponent
+  module Components
+    class Breadcrumb < Element
+      def initialize(**attributes, &)
+        super("nav", &)
+
+        add_attribute("aria-label": "breadcrumb")
+        add_attribute(attributes) unless attributes.empty?
+      end
+
+      def build
+        @html << "<#{@element}"
+        @html << (mount_attributes.empty? ? ">" : " #{mount_attributes}>")
+        @html << "<ol class=\"breadcrumb\">"
+        @html << mount_content
+        @html << "</ol>"
+        @html << "</#{@element}>" if @closing_tag
+        @html
+      end
+    end
+  end
+end

data/lib/element_component/components/button.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class Button < Element
+      VALID_VARIANTS = %i[primary secondary success danger warning info light dark link].freeze
+      VALID_SIZES = %i[sm lg].freeze
+
+      def initialize(variant: :primary, outline: false, size: nil, href: nil, **attributes, &block)
+        if href
+          super("a", &block)
+          add_attribute(href: href)
+        else
+          super("button", &block)
+          add_attribute(type: "button")
+        end
+
+        add_attribute(class: "btn")
+        add_attribute(class: outline ? "btn-outline-#{variant}" : "btn-#{variant}")
+        add_attribute(class: "btn-#{size}") if size
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/button_group.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class ButtonGroup < Element
+      VALID_SIZES = %i[sm lg].freeze
+
+      def initialize(size: nil, vertical: false, **attributes, &block)
+        super("div", &block)
+
+        add_attribute(class: vertical ? "btn-group-vertical" : "btn-group")
+        add_attribute(class: "btn-group-#{size}") if size
+        add_attribute(role: "group")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/body.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardBody < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "card-body")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/footer.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardFooter < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "card-footer")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/header.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardHeader < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "card-header")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/image.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardImage < Element
+      def initialize(src: "", top: false, bottom: false, **attributes, &block)
+        super("img", closing_tag: false, &block)
+
+        add_attribute(class: "card-img")
+        add_attribute(class: "card-img-top") if top
+        add_attribute(class: "card-img-bottom") if bottom
+        add_attribute(src: src)
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/text.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardText < Element
+      def initialize(**attributes, &)
+        super("p", &)
+
+        add_attribute(class: "card-text")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card/title.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CardTitle < Element
+      def initialize(**attributes, &)
+        super("h5", &)
+
+        add_attribute(class: "card-title")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/card.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+require_relative "card/header"
+require_relative "card/body"
+require_relative "card/footer"
+require_relative "card/title"
+require_relative "card/text"
+require_relative "card/image"
+
+module ElementComponent
+  module Components
+    class Card < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "card")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/carousel/caption.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CarouselCaption < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "carousel-caption")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/carousel/item.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CarouselItem < Element
+      def initialize(active: false, interval: nil, **attributes, &block)
+        super("div", &block)
+
+        add_attribute(class: "carousel-item")
+        add_attribute(class: "active") if active
+        add_attribute("data-bs-interval": interval.to_s) if interval
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/carousel.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+require_relative "carousel/item"
+require_relative "carousel/caption"
+
+module ElementComponent
+  module Components
+    class Carousel < Element
+      def initialize(id: "carousel", fade: false, indicators: true, controls: true, **attributes, &block)
+        @carousel_id = id
+        @show_indicators = indicators
+        @show_controls = controls
+        super("div", &block)
+
+        add_attribute(id: id)
+        add_attribute(class: "carousel")
+        add_attribute(class: "slide")
+        add_attribute(class: "carousel-fade") if fade
+        add_attribute(attributes) unless attributes.empty?
+      end
+
+      private
+
+      def indicator_button(index, active)
+        target = "data-bs-target=\"##{@carousel_id}\""
+        slide = "data-bs-slide-to=\"#{index}\""
+        active_attr = ' class="active" aria-current="true"' if active
+        "<button type=\"button\" #{target} #{slide}#{active_attr}></button>"
+      end
+
+      def build_indicators
+        html = +""
+        contents.each_with_index do |item, index|
+          next unless item.is_a?(CarouselItem)
+
+          active = item.attributes[:class]&.include?("active") || index.zero?
+          html << indicator_button(index, active)
+        end
+        html
+      end
+
+      def control_button(direction, label)
+        target = "data-bs-target=\"##{@carousel_id}\""
+        slide = "data-bs-slide=\"#{direction}\""
+        "<button class=\"carousel-control-#{direction}\" type=\"button\" #{target} #{slide}>" \
+          "<span class=\"carousel-control-#{direction}-icon\" aria-hidden=\"true\"></span>" \
+          "<span class=\"visually-hidden\">#{label}</span></button>"
+      end
+
+      def build
+        @html << "<#{@element}"
+        @html << (mount_attributes.empty? ? ">" : " #{mount_attributes}>")
+
+        @html << "<div class=\"carousel-indicators\">#{build_indicators}</div>" if @show_indicators
+
+        @html << "<div class=\"carousel-inner\">"
+        @html << mount_content
+        @html << "</div>"
+
+        if @show_controls
+          @html << control_button("prev", "Previous")
+          @html << control_button("next", "Next")
+        end
+
+        @html << "</#{@element}>" if @closing_tag
+        @html
+      end
+    end
+  end
+end

data/lib/element_component/components/close_button.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class CloseButton < Element
+      def initialize(disabled: false, **attributes)
+        super("button", closing_tag: false)
+
+        add_attribute(class: "btn-close")
+        add_attribute(type: "button")
+        add_attribute("aria-label": "Close")
+        add_attribute(disabled: "") if disabled
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/dropdown/divider.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class DropdownDivider < Element
+      def initialize(**attributes)
+        super("li")
+
+        inner = Element.new("hr", class: "dropdown-divider", **attributes)
+        @inner_divider = inner
+      end
+
+      private
+
+      def mount_content
+        @inner_divider&.render || ""
+      end
+    end
+  end
+end

data/lib/element_component/components/dropdown/header.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class DropdownHeader < Element
+      def initialize(**attributes, &)
+        super("li", &)
+
+        inner = Element.new("h6", class: "dropdown-header", **attributes)
+        @inner_header = inner
+      end
+
+      private
+
+      def mount_content
+        inner = super
+        @inner_header&.add_content(inner)
+        "<li>#{@inner_header&.render}</li>"
+      end
+    end
+  end
+end

data/lib/element_component/components/dropdown/item.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class DropdownItem < Element
+      VALID_TYPES = %i[button link].freeze
+
+      def initialize(type: :link, href: "#", active: false, disabled: false, **attributes, &block)
+        tag = type == :button ? "button" : "a"
+        super("li", &block)
+
+        inner = Element.new(tag, class: "dropdown-item", href: (tag == "a" ? href : nil),
+                                 type: (tag == "button" ? "button" : nil), **attributes)
+        inner.add_attribute(class: "active") if active
+        inner.add_attribute(class: "disabled") if disabled
+        inner.add_attribute(tabindex: "-1") if disabled
+        inner.add_attribute("aria-disabled": "true") if disabled
+
+        inner.add_content(&block) if block
+
+        @inner_item = inner
+      end
+
+      private
+
+      def mount_content
+        inner = super
+        @inner_item&.add_content(inner)
+        "<li>#{@inner_item&.render || inner}</li>"
+      end
+    end
+  end
+end

data/lib/element_component/components/dropdown/menu.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class DropdownMenu < Element
+      def initialize(align: nil, **attributes, &block)
+        super("ul", &block)
+
+        add_attribute(class: "dropdown-menu")
+        add_attribute(class: "dropdown-menu-#{align}") if align
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/dropdown.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+require_relative "dropdown/menu"
+require_relative "dropdown/item"
+require_relative "dropdown/divider"
+require_relative "dropdown/header"
+
+module ElementComponent
+  module Components
+    class Dropdown < Element
+      VALID_DIRECTIONS = %i[dropup dropend dropstart].freeze
+
+      def initialize(direction: nil, **attributes, &block)
+        super("div", &block)
+
+        add_attribute(class: "dropdown")
+        add_attribute(class: direction.to_s) if direction
+        add_attribute(attributes) unless attributes.empty?
+      end
+
+      def toggle_button(label: "Dropdown", variant: :secondary, split: false, **btn_attributes, &block)
+        if split
+          split_btn = Button.new(variant: variant, class: "dropdown-toggle dropdown-toggle-split",
+                                 **btn_attributes)
+          split_btn.add_content(
+            Element.new("span", class: "visually-hidden") { add_content("Toggle dropdown") }
+          )
+          add_content(ButtonGroup.new do
+            add_content(Button.new(variant: variant, **btn_attributes) { add_content(label) })
+            add_content(split_btn)
+          end)
+        else
+          btn = Element.new("button", "aria-expanded": "false", "data-bs-toggle": "dropdown",
+                                      class: "btn btn-#{variant} dropdown-toggle", type: "button", **btn_attributes)
+          btn.add_content(label) if label
+          instance_eval(&block) if block
+          add_content(btn)
+        end
+        self
+      end
+    end
+  end
+end

data/lib/element_component/components/list_group/item.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class ListGroupItem < Element
+      VALID_VARIANTS = %i[primary secondary success danger warning info light dark].freeze
+
+      def initialize(variant: nil, active: false, disabled: false, href: nil, **attributes, &block)
+        tag = href ? "a" : "li"
+        super(tag, &block)
+
+        add_attribute(class: "list-group-item")
+        add_attribute(class: "list-group-item-action") if href || tag == "a"
+        add_attribute(class: "list-group-item-#{variant}") if variant
+        add_attribute(class: "active") if active
+        add_attribute(class: "disabled") if disabled
+        add_attribute(href: href) if href
+        add_attribute("aria-current": "true") if active
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/list_group.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require_relative "list_group/item"
+
+module ElementComponent
+  module Components
+    class ListGroup < Element
+      def initialize(flush: false, numbered: false, **attributes, &block)
+        super("ul", &block)
+
+        add_attribute(class: "list-group")
+        add_attribute(class: "list-group-flush") if flush
+        add_attribute(class: "list-group-numbered") if numbered
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/modal/body.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class ModalBody < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "modal-body")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/modal/content.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class ModalContent < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "modal-content")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/modal/dialog.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class ModalDialog < Element
+      VALID_SIZES = %i[sm lg xl].freeze
+      VALID_FULLSCREEN = %i[always sm md lg xl xxl].freeze
+
+      def initialize(scrollable: false, centered: false, size: nil, fullscreen: nil, **attributes, &block)
+        super("div", &block)
+
+        add_attribute(class: "modal-dialog")
+        add_attribute(class: "modal-dialog-scrollable") if scrollable
+        add_attribute(class: "modal-dialog-centered") if centered
+        add_attribute(class: "modal-#{size}") if size
+        add_attribute(class: "modal-fullscreen#{"-#{fullscreen}-down" unless fullscreen == :always}") if fullscreen
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/modal/footer.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class ModalFooter < Element
+      def initialize(**attributes, &)
+        super("div", &)
+
+        add_attribute(class: "modal-footer")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/modal/header.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class ModalHeader < Element
+      def initialize(close_button: true, **attributes, &block)
+        super("div", &block)
+
+        add_attribute(class: "modal-header")
+        add_attribute(attributes) unless attributes.empty?
+
+        add_content(CloseButton.new) if close_button
+      end
+    end
+  end
+end

data/lib/element_component/components/modal/title.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class ModalTitle < Element
+      def initialize(**attributes, &)
+        super("h5", &)
+
+        add_attribute(class: "modal-title")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end

data/lib/element_component/components/modal.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+require_relative "modal/dialog"
+require_relative "modal/content"
+require_relative "modal/header"
+require_relative "modal/title"
+require_relative "modal/body"
+require_relative "modal/footer"
+
+module ElementComponent
+  module Components
+    class Modal < Element
+      VALID_SIZES = %i[sm lg xl].freeze
+      VALID_FULLSCREEN = %i[always sm md lg xl xxl].freeze
+
+      def initialize(fade: true, static: false, scrollable: false, centered: false, size: nil, fullscreen: nil,
+                     **attributes, &block)
+        super("div", &block)
+
+        add_attribute(class: "modal")
+        add_attribute(class: "fade") if fade
+        add_attribute(tabindex: "-1")
+        add_attribute("aria-hidden": "true")
+        add_attribute("data-bs-backdrop": "static") if static
+        add_attribute("data-bs-keyboard": "false") if static
+
+        add_content(ModalDialog.new(scrollable: scrollable, centered: centered, size: size, fullscreen: fullscreen))
+        add_attribute(attributes) unless attributes.empty?
+      end
+
+      private
+
+      def build
+        @html << "<#{@element}"
+        @html << (mount_attributes.empty? ? ">" : " #{mount_attributes}>")
+        @html << mount_content
+        @html << "</#{@element}>" if @closing_tag
+        @html
+      end
+    end
+  end
+end

data/lib/element_component/components/nav/item.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module ElementComponent
+  module Components
+    class NavItem < Element
+      def initialize(**attributes, &)
+        super("li", &)
+
+        add_attribute(class: "nav-item")
+        add_attribute(attributes) unless attributes.empty?
+      end
+    end
+  end
+end