bulma_x 0.2.0

data/lib/bulma_x/modal.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Modal < BaseComponent
+    option :modifier, values: MODIFIERS, default: nil
+
+    slot :background, classes: ['modal-background']
+    slot :content, classes: ['modal-content']
+
+    def view_template(&)
+      super do
+        slot(:background) do
+          slot(:content, &)
+        end
+      end
+    end
+
+    def root_classes
+      super +
+        [
+          'modal',
+          @modifier && "is-#{@modifier}"
+        ]
+    end
+  end
+end

data/lib/bulma_x/navbar.rb

@@ -0,0 +1,162 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Navbar < BaseComponent
+    option :style, values: [nil, 'boxed', 'transparent'], default: nil
+    option :modifier, values: MODIFIERS, default: nil
+    option :shadow, values: BOOLEAN, default: false
+    option :spaced, values: BOOLEAN, default: false
+    option :fixed, values: BOOLEAN, default: true
+
+    root_slot tag: :nav
+
+    slot :brand, tag: :div, classes: ['navbar-brand']
+    slot :burger, tag: :div, classes: ['navbar-burger']
+    slot :menu, component: 'NavbarMenu'
+
+    default_option :aria, { role: 'menubar', orientation: 'horizontal' }
+
+    def view_template
+      super do
+        if slot?(:brand)
+          slot(:brand) do
+            slot(:burger)
+          end
+        end
+
+        slot(:menu)
+      end
+    end
+
+    def root_classes
+      super +
+        [
+          'navbar',
+          @style && "is-#{@style}",
+          @modifier && "is-#{@modifier}",
+          @shadow && 'has-shadow',
+          @spaced && 'is-spaced',
+          @fixed && 'is-fixed-top'
+        ]
+    end
+
+    class NavbarMenu < BulmaX::BaseComponent
+      slot :left, component: 'NavbarStart'
+      slot :right, component: 'NavbarEnd'
+
+      option :mobile, values: BOOLEAN, default: false
+
+      def root_classes
+        super + [
+          'navbar-menu',
+          @mobile && 'is-active'
+        ]
+      end
+
+      def view_template
+        super do
+          slot(:left)
+          slot(:right)
+        end
+      end
+
+      class NavbarDropdown < BulmaX::BaseComponent
+        option :label
+
+        slots :dropdown_item, component: 'NavbarDropdownItem'
+
+        def view_template
+          super do
+            div(class: 'navbar-link') { @label }
+
+            slots(:dropdown_item).each do |dropdown_item|
+              render(dropdown_item)
+            end
+          end
+        end
+
+        class NavbarDropdownItem < BulmaX::BaseComponent
+          option :divider, values: BOOLEAN, default: false
+
+          slot :item, component: '::BulmaX::Navbar::NavbarMenu::NavbarItem'
+
+          def view_template
+            super do
+              slot(:item) unless @divider
+            end
+          end
+
+          def root_classes
+            if @divider
+              super + ['navbar-divider']
+            else
+              super + ['navbar-dropdown']
+            end
+          end
+        end
+      end
+
+      class NavbarItem < BulmaX::BaseComponent
+        option :href
+        option :hoverable, values: BOOLEAN, default: true
+        option :active, values: BOOLEAN, default: false
+
+        slot :dropdown, component: NavbarDropdown
+
+        def root_tag
+          if slot?(:dropdown)
+            :div
+          else
+            :a
+          end
+        end
+
+        def root_attributes
+          if root_tag == :a
+            super.merge(href: @href)
+          else
+            super
+          end
+        end
+
+        def root_classes
+          extra_classes = ['navbar-item']
+          extra_classes << 'has-dropdown' if slot?(:dropdown)
+          extra_classes << 'is-active' if @active
+
+          extra_classes << 'is-hoverable' if @hoverable
+
+          super + extra_classes
+        end
+
+        def view_template
+          super do
+            if slot?(:dropdown)
+              slot(:dropdown)
+            elsif block_given?
+              yield
+            end
+          end
+        end
+      end
+
+      class NavbarStart < BulmaX::BaseComponent
+        slots :item, component: NavbarItem
+
+        def root_classes = super + ['navbar-start']
+
+        def view_template
+          super do
+            slots(:item).each do |item|
+              render(item)
+            end
+          end
+        end
+      end
+
+      class NavbarEnd < NavbarStart
+        def root_classes = super - ['navbar-start'] + ['navbar-end']
+      end
+    end
+  end
+end

data/lib/bulma_x/notification.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Notification < BaseComponent
+    option :modifier, values: MODIFIERS, default: nil
+
+    def root_classes
+      super +
+        [
+          'notification',
+          @modifier && "is-#{@modifier}"
+        ]
+    end
+  end
+end

data/lib/bulma_x/pagination.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module BulmaX
+  # TODO: Allow to reorder pagination's items as we want
+  class Pagination < BaseComponent
+    option :alignment, values: %i[left centered right], default: :centered
+    option :rounded, values: BOOLEAN, default: false
+    option :size, values: %i[small medium large], default: :medium
+
+    root_slot tag: :nav, attributes: { role: 'navigation', 'aria-label' => 'pagination' }
+    slot :list, component: 'List'
+    slot :previous, component: 'NavigationItem'
+    slot :next, component: 'NavigationItem'
+
+    def view_template
+      super do
+        slot(:list) do
+          slots(:item).each { render it }
+        end
+
+        slot(:previous, type: :previous) if slot?(:previous)
+        slot(:next, type: :next) if slot?(:next)
+      end
+    end
+
+    def root_classes
+      super + [
+        'pagination',
+        "is-#{@alignment}",
+        @rounded && 'is-rounded',
+        "is-#{@size}"
+      ]
+    end
+
+    class NavigationItem < BaseComponent
+      option :href
+      option :type, values: %i[previous next]
+
+      def root_attributes = super.merge(href: @href)
+      def root_classes = super + ["pagination-#{@type}"]
+      def root_tag = :a
+    end
+
+    class List < BaseComponent
+      root_slot tag: :ul, classes: ['pagination-list']
+      slots :item, component: 'Item'
+
+      def view_template
+        super do
+          slots(:item).each do |item|
+            li do
+              render item
+            end
+          end
+        end
+      end
+
+      class Item < BaseComponent
+        option :current, values: BOOLEAN, default: false
+        option :href
+        option :type, values: %i[ellipsis link], default: :link
+
+        def view_template
+          super do
+            if block_given?
+              yield
+            elsif @type == :ellipsis
+              plain('…')
+            end
+          end
+        end
+
+        def root_tag = :a
+
+        def root_classes
+          super + [
+            @current && 'is-current',
+            "pagination-#{@type}"
+          ]
+        end
+
+        def root_attributes = super.merge(href: @href)
+      end
+    end
+  end
+end

data/lib/bulma_x/panel.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module BulmaX
+  # TODO: Enable the slots to be ordered in different ways
+  # TODO: Tabs should only have <a> elements, use a dedicated sub-component
+  class Panel < BaseComponent
+    option :modifier, values: MODIFIERS, default: nil
+
+    slot :header, classes: ['panel-heading']
+    slots :block, classes: ['panel-block']
+    slot :tabs, classes: ['panel-tabs']
+
+    def view_template
+      super do
+        slot(:header) if slot?(:header)
+        slot(:tabs) if slot?(:tabs)
+        slots(:block).each { render it }
+      end
+    end
+
+    def root_classes
+      super +
+        [
+          'panel',
+          @modifier && "is-#{@modifier}"
+        ]
+    end
+  end
+end

data/lib/bulma_x/paragraph.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Paragraph < Block
+    root_slot tag: :p, classes: ['block']
+  end
+end

data/lib/bulma_x/progress.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Progress < BaseComponent
+    option :modifier, values: MODIFIERS, default: nil
+    option :size, values: %i[small normal medium large], default: :normal
+    option :value, default: 0
+    option :max, default: 100
+
+    root_slot tag: :progress
+
+    def view_template
+      super do
+        plain "#{@value}%"
+
+        yield if block_given?
+      end
+    end
+
+    def root_attributes
+      super.merge(
+        value: @value,
+        max: @max
+      )
+    end
+
+    def root_classes
+      super +
+        [
+          'progress',
+          @size && "is-#{@size}",
+          @modifier && "is-#{@modifier}"
+        ]
+    end
+  end
+end

data/lib/bulma_x/radio.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Radio < BaseComponent
+    option :disabled, values: BOOLEAN, default: false
+    option :checked, values: BOOLEAN, default: false
+
+    option :name
+    option :value
+
+    root_slot tag: :label, classes: ['radio']
+
+    def view_template
+      super do
+        render Input.new(**input_attributes)
+
+        yield if block_given?
+      end
+    end
+
+    def root_classes
+      super +
+        %w[
+          input
+          radio
+        ]
+    end
+
+    def root_attributes = super.merge(disabled: @disabled, checked: @checked)
+
+    def input_attributes = { type: 'radio', disabled: @disabled, name: @name, value: @value, checked: @checked }
+  end
+end

data/lib/bulma_x/section.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Section < BaseComponent
+    option :size, values: [nil, :medium, :large], default: nil
+    option :content, values: BOOLEAN, default: true
+    option :container, values: BOOLEAN, default: true
+    option :max_desktop, values: BOOLEAN, default: false
+
+    root_slot tag: :section
+    slot :section_content
+
+    def view_template(&)
+      super do
+        slot(:section_content, &)
+      end
+    end
+
+    def root_classes
+      super +
+        [
+          'section',
+          @size && "is-#{@size}"
+        ]
+    end
+
+    def section_content_classes
+      [
+        @content && 'content',
+        @container && 'container',
+        @max_desktop && 'is-max-desktop'
+      ]
+    end
+  end
+end

data/lib/bulma_x/select.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Select < BaseInput
+    option :multiple, values: BOOLEAN, default: false
+    option :rows, default: nil
+    option :arrow, values: BOOLEAN, default: true
+    option :name
+    option :value
+
+    root_slot tag: :select
+
+    slots :option, component: 'Option'
+    slot :container, classes: ['select']
+
+    def view_template(&)
+      slot(:container) do
+        super do
+          slots(:option).each { render it }
+        end
+      end
+    end
+
+    def multiple(count)
+      @multiple = true
+      @rows = count
+
+      self
+    end
+
+    def root_classes
+      super + [
+        @multiple && 'is-multiple',
+        @arrow && 'is-link'
+      ]
+    end
+
+    def root_attributes
+      super.merge(multiple: @multiple, size: @rows, name: @name, value: @value)
+    end
+
+    class Option < BaseComponent
+      root_slot tag: :option
+
+      option :selected, values: BOOLEAN, default: false
+      option :value
+      option :label
+
+      def root_attributes
+        super.merge(
+          selected: @selected,
+          value: @value
+        )
+      end
+    end
+  end
+end

data/lib/bulma_x/shared/aria_options.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module BulmaX
+  module Shared
+    module AriaOptions
+      module ClassMethods
+        def aria_options
+          option :aria, default: {}
+        end
+      end
+
+      def self.included(base) = base.extend(ClassMethods)
+
+      def aria_attributes
+        @aria.transform_keys { |k| "aria-#{k}" }
+      end
+    end
+  end
+end

data/lib/bulma_x/shared/data_options.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module BulmaX
+  module Shared
+    module DataOptions
+      module ClassMethods
+        def data_options
+          option :data, default: {}
+        end
+      end
+
+      def self.included(base) = base.extend(ClassMethods)
+
+      def data_attributes
+        @data.transform_keys { |k| "data-#{k}" }
+      end
+    end
+  end
+end

data/lib/bulma_x/shared/flex_options.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module BulmaX
+  module Shared
+    module FlexOptions
+      module ClassMethods
+        # rubocop:disable Metrics/MethodLength, Metrics/AbcSize
+        def flex_options
+          option :flex, values: self::BOOLEAN, default: false
+          option :flex_direction, values: [nil, :row, :row_reverse, :column, :column_reverse]
+          option :flex_wrap, values: [nil, :wrap, :nowrap, :wrap_reverse]
+          option :flex_justify_content,
+                 values: [nil, :flex_start, :flex_end, :center, :space_between, :space_around, :space_evenly, :start,
+                          :end, :left, :right]
+          option :flex_align_content,
+                 values: [
+                   nil,
+                   :flex_start, :flex_end,
+                   :center,
+                   :space_between, :space_around, :space_evenly,
+                   :stretch, :start, :end, :baseline
+                 ]
+          option :flex_align_items,
+                 values: [
+                   nil,
+                   :stretch, :flex_start, :flex_end, :center, :baseline, :start, :end, :self_start, :self_end
+                 ]
+          option :flex_align_self,
+                 values: [nil, :auto, :stretch, :flex_start, :flex_end, :center, :baseline]
+          option :flex_grow, values: (0..5).to_a.push(nil).freeze
+          option :flex_shrink, values: (0..5).to_a.push(nil).freeze
+          option :flex_gap, values: (1..8).to_a.push(nil).freeze
+        end
+        # rubocop:enable Metrics/MethodLength, Metrics/AbcSize
+      end
+
+      def self.included(base) = base.extend(ClassMethods)
+
+      # rubocop:disable Metrics/PerceivedComplexity, Metrics/CyclomaticComplexity
+      def flex_classes
+        [
+          @flex && 'is-flex',
+          @flex_direction && "is-flex-direction-#{css(@flex_direction)}",
+          @flex_wrap && "is-flex-#{css(@flex_wrap)}",
+          @flex_justify_content && "is-justify-content-#{css(@flex_justify_content)}",
+          @flex_align_content && "is-align-content-#{css(@flex_align_content)}",
+          @flex_align_items && "is-align-items-#{css(@flex_align_items)}",
+          @flex_align_self && "is-align-self-#{css(@flex_align_self)}",
+          @flex_grow && "is-flex-grow-#{css(@flex_grow)}",
+          @flex_shrink && "is-flex-shrink-#{css(@flex_shrink)}",
+          @flex_gap && "is-gap-#{css(@flex_gap)}"
+        ]
+      end
+      # rubocop:enable Metrics/PerceivedComplexity, Metrics/CyclomaticComplexity
+    end
+  end
+end

data/lib/bulma_x/shared/global_options.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module BulmaX
+  module Shared
+    module GlobalOptions
+      module ClassMethods
+        def global_options
+          option :accesskey
+          option :draggable
+          option :hidden
+          option :id
+          option :lang
+          option :role
+          option :spellcheck
+          option :tabindex
+          option :title
+
+          option :fullwidth, values: [true, false], default: false
+          option :background_color, values: self::MODIFIERS_PALETTE, default: nil
+          option :extra_classes
+        end
+      end
+
+      def self.included(base) = base.extend(ClassMethods)
+
+      def global_attributes
+        {
+          accesskey: @accesskey,
+          draggable: @draggable,
+          hidden: @hidden,
+          id: @id,
+          lang: @lang,
+          role: @role,
+          spellcheck: @spellcheck,
+          tabindex: @tabindex,
+          title: @title
+        }
+      end
+
+      def global_classes
+        [
+          @fullwidth && 'is-fullwidth',
+          @background_color && "has-background-#{@background_color}",
+          *@extra_classes
+        ]
+      end
+    end
+  end
+end