bulma_x 0.2.0

data/lib/bulma_x/field.rb

@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Field < BaseComponent
+    option :size, values: %i[small medium large], default: :medium
+
+    option :has_addons, values: BOOLEAN, default: false
+    option :addons_alignment, values: %i[centered left right], default: :centered
+
+    option :grouped, values: BOOLEAN, default: false
+    option :group_alignment, values: %i[centered left right], default: :centered
+    option :group_multiline, values: BOOLEAN, default: false
+
+    option :expanded, values: BOOLEAN, default: false
+    option :narrow, values: BOOLEAN, default: false
+    option :horizontal, values: BOOLEAN, default: false
+
+    option :disabled, values: BOOLEAN, default: false
+
+    root_slot classes: ['field']
+
+    slot :label, component: 'Label'
+    slot :field_label, component: 'FieldLabel'
+    slots :control, component: 'Control'
+    slots :field, component: 'self'
+    slot :help, component: Help
+    slot :field_body, classes: ['field-body']
+
+    def view_template(&)
+      if @disabled
+        fieldset(disabled: true) { render_self(&) }
+      else
+        render_self(&)
+      end
+    end
+
+    # rubocop:disable Metrics/PerceivedComplexity, Metrics/AbcSize, Metrics/CyclomaticComplexity
+    def render_self
+      render_root do
+        slot(:field_label) if slot?(:field_label)
+
+        if @horizontal || slot?(:field)
+          slot(:field_body) do
+            slots(:field).each { render it }
+          end
+        else
+          unless slot?(:field_label)
+            slot(:label) if slot?(:label)
+
+            slots(:control).each { render it }
+          end
+        end
+
+        slot(:help) if slot?(:help)
+      end
+    end
+    # rubocop:enable Metrics/PerceivedComplexity, Metrics/AbcSize, Metrics/CyclomaticComplexity
+
+    # rubocop:disable Metrics/PerceivedComplexity, Metrics/CyclomaticComplexity
+    def root_classes
+      super +
+        [
+          'field',
+          @has_addons && 'has-addons',
+          @has_addons && @addons_alignment && "has-addons-#{@addons_alignment}",
+          @grouped && 'is-grouped',
+          @grouped && @group_alignment && "is-grouped-#{@group_alignment}",
+          @grouped && @group_multiline && 'is-grouped-multiline',
+          @expanded && 'is-expanded',
+          @narrow && 'is-narrow',
+          @horizontal && 'is-horizontal'
+        ]
+    end
+    # rubocop:enable Metrics/PerceivedComplexity, Metrics/CyclomaticComplexity
+
+    class Control < BaseComponent
+      option :expanded, values: BOOLEAN, default: false
+
+      slots :label, component: 'BulmaX::Field::Label'
+      slot :input, component: Input
+      slot :textarea, component: Textarea
+      slot :select, component: Select
+      slot :button, component: Button
+      slot :left_icon, component: Icon
+      slot :right_icon, component: Icon
+
+      def root_classes
+        super +
+          [
+            'control',
+            slot?(:left_icon) && 'has-icons-left',
+            slot?(:right_icon) && 'has-icons-right',
+            @expanded && 'is-expanded'
+          ]
+      end
+
+      # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity, Metrics/AbcSize
+      def view_template(&)
+        super do
+          slot(:left_icon, control_alignment: :left) if slot?(:left_icon)
+          slots(:label).each { render it }
+          slot(:input) if slot?(:input)
+          slot(:textarea) if slot?(:textarea)
+          slot(:select) if slot?(:select)
+          slot(:button) if slot?(:button)
+          slot(:right_icon, control_alignment: :right) if slot?(:right_icon)
+          yield if block_given?
+        end
+      end
+      # rubocop:enable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity, Metrics/AbcSize
+    end
+
+    class Label < BaseComponent
+      option :size, values: %i[small normal medium large], default: 'medium'
+      option :input, values: Input.type_values
+
+      root_slot tag: :label
+
+      slot :input, component: Input
+
+      def root_classes
+        super +
+          [
+            @input || 'label', # if the label is specialized it should not be a .label
+            "is-#{@size}"
+          ]
+      end
+
+      def view_template(&)
+        super do
+          slot(:input) if slot?(:input)
+
+          yield self if block_given?
+        end
+      end
+    end
+
+    class FieldLabel < Label
+      slot :label, component: Label
+
+      def root_classes = super - ['label'] + ['field-label']
+
+      def view_template(&)
+        super do
+          slot(:label, &) if slot?(:label) || block_given?
+        end
+      end
+    end
+  end
+end

data/lib/bulma_x/figure.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Figure < BaseComponent
+    RATIOS = %w[square 1x1 5x4 4x3 3x2 5x3 16x9 2x1 3x1 4x5 3x4 2x3 3x5 9x16 1x2 1x3].freeze
+
+    option :size, values: [16, 24, 32, 48, 64, 96, 128], default: nil
+    option :ratio, values: RATIOS + [nil]
+
+    root_slot tag: :figure
+
+    def root_classes
+      super +
+        [
+          'image',
+          @size && "is-#{@size}x#{@size}",
+          @ratio && normalize_ratio(@ratio)
+        ]
+    end
+
+    def normalize_ratio(ratio)
+      return nil if ratio.nil?
+
+      "is-#{ratio.split('x').join('by')}"
+    end
+  end
+end

data/lib/bulma_x/file.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class File < BaseComponent
+    option :boxed, values: BOOLEAN, default: false
+    option :has_name, values: BOOLEAN, default: false
+    option :modifier, values: MODIFIERS, default: nil
+    option :size, values: %w[small normal medium large], default: 'normal'
+    option :icon, default: 'folder_open'
+    option :caption, default: 'Choose a file'
+
+    slot :label, tag: :label, classes: ['file-label']
+    slot :input, tag: :input, classes: ['file-input'], attributes: { type: 'file', name: 'resume' }
+    slot :icon, tag: :span, classes: ['file-icon']
+    slot :cta, tag: :span, classes: ['file-cta']
+    slot :cta_label, tag: :span, classes: ['file-label']
+    slot :name, tag: :span, classes: ['file-name']
+
+    def view_template
+      super do
+        slot(:label) do
+          slot(:input)
+
+          yield if block_given?
+
+          slot(:cta) do
+            slot(:icon)
+
+            slot(:cta_label) { plain @caption }
+          end
+
+          slot(:name) if @has_name # to be filled by JS
+        end
+      end
+    end
+
+    def root_classes
+      super +
+        [
+          'file',
+          @boxed && 'is-boxed',
+          @modifier && "is-#{@modifier}",
+          "is-#{@size}"
+        ]
+    end
+
+    def file_input_classes
+      [
+        'file-input',
+        @boxed && 'is-boxed'
+      ]
+    end
+  end
+end

data/lib/bulma_x/footer.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Footer < BaseComponent
+    root_slot tag: :footer, classes: ['footer']
+  end
+end

data/lib/bulma_x/form.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Form < BaseComponent
+    root_slot tag: :form
+
+    option :url
+    option :method, values: %i[get post put patch delete], default: :post
+    option :accept_charset, default: 'UTF-8'
+
+    slots :field, component: Field
+
+    def view_template
+      super do
+        slots(:field).each { render it }
+      end
+    end
+
+    def root_attributes
+      super.merge(
+        method: @method,
+        action: @url,
+        accept_charset: @accept_charset
+      )
+    end
+  end
+end

data/lib/bulma_x/grid.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Grid < BaseComponent
+    option :size, values: (0..12).to_a.push(nil), default: nil
+    option :columns, values: (0..12).to_a.push(nil), default: nil
+    option :mobile_columns, values: (0..12).to_a.push(nil), default: nil
+    option :tablet_columns, values: (0..12).to_a.push(nil), default: nil
+    option :desktop_columns, values: (0..12).to_a.push(nil), default: nil
+    option :widescreen_columns, values: (0..12).to_a.push(nil), default: nil
+    option :fullhd_columns, values: (0..12).to_a.push(nil), default: nil
+
+    option :gap, values: (0..8).to_a.push(nil), default: nil
+    option :auto_count, values: BOOLEAN, default: false
+
+    slot :grid_container
+    slots :cell, component: 'Cell'
+
+    def view_template
+      if any_columns? || @auto_count
+        slot(:grid_container) do
+          render_self
+        end
+      else
+        render_self
+      end
+    end
+
+    def render_self
+      render_root do
+        slots(:cell).each { render it }
+      end
+    end
+
+    # rubocop:disable Metrics/CyclomaticComplexity
+    def grid_container_classes
+      [
+        'fixed-grid',
+        @columns && "has-#{@columns}-cols",
+        @mobile_columns && "has-#{@mobile_columns}-cols-mobile",
+        @tablet_columns && "has-#{@tablet_columns}-cols-tablet",
+        @desktop_columns && "has-#{@desktop_columns}-cols-desktop",
+        @widescreen_columns && "has-#{@widescreen_columns}-cols-widescreen",
+        @fullhd_columns && "has-#{@fullhd_columns}-cols-fullhd",
+        @auto_count && 'has-auto-count'
+      ]
+    end
+    # rubocop:enable Metrics/CyclomaticComplexity
+
+    def root_classes
+      super +
+        [
+          'grid',
+          @size && "is-col-min-#{@size}",
+          @gap && "is-gap-#{@gap}",
+          @columns && "has-#{@columns}-cols"
+        ]
+    end
+
+    private
+
+    def any_columns?
+      instance_variables.grep(/columns/).any? { |var| instance_variable_get(var).to_i.positive? }
+    end
+
+    class Cell < BaseComponent
+      option :from_start, values: (0..12).to_a.push(nil), default: nil
+      option :from_end, values: (0..12).to_a.push(nil), default: nil
+
+      option :row_start, values: (0..12).to_a.push(nil), default: nil
+      option :row_end, values: (0..12).to_a.push(nil), default: nil
+
+      option :span, values: (0..12).to_a.push(nil), default: nil
+      option :row_span, values: (0..12).to_a.push(nil), default: nil
+
+      def root_classes
+        super +
+          [
+            'cell',
+            @from_start && "is-col-start-#{@from_start}",
+            @from_end && "is-col-from-end-#{@from_end}",
+            @span && "is-col-span-#{@span}",
+            @row_start && "is-row-start-#{@row_start}",
+            @row_end && "is-row-from-end-#{@row_end}",
+            @row_span && "is-row-span-#{@row_span}"
+          ]
+      end
+    end
+  end
+end

data/lib/bulma_x/help.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Help < BaseComponent
+    root_slot tag: :span, classes: ['help']
+  end
+end

data/lib/bulma_x/hero.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Hero < BaseComponent
+    option :modifier, values: MODIFIERS, default: nil
+    option :size, values: %i[small medium large halfheight fullheight fullheight-with-navbar], default: 'medium'
+
+    root_slot tag: :section
+    slot :header, component: 'HeroPart'
+    slot :body, component: 'HeroPart'
+    slot :footer, component: 'HeroPart'
+
+    def view_template
+      super do
+        slot(:header, type: :head) if slot?(:header)
+        slot(:body, type: :body)
+        slot(:footer, type: :foot) if slot?(:footer)
+      end
+    end
+
+    def root_classes
+      super +
+        [
+          'hero',
+          "is-#{@size}",
+          @modifier && "is-#{@modifier}"
+        ]
+    end
+
+    class HeroPart < BaseComponent
+      option :type, values: %i[head body foot]
+
+      def root_classes = super + ["hero-#{@type}"]
+    end
+  end
+end

data/lib/bulma_x/icon.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Icon < BaseComponent
+    option :icon
+    option :icon_alignment, values: [nil, :left, :right], default: nil
+    option :control_alignment, values: [nil, :left, :right], default: nil
+    option :size, values: [:small, :medium, :large, nil], default: nil
+
+    root_slot tag: :span
+    slot :icon_container
+
+    def view_template(&)
+      if block_given?
+        icon_text_template(&)
+      else
+        icon_template(&)
+      end
+    end
+
+    def icon_text_template(&)
+      slot(:icon_container) do
+        if @icon_alignment == :right
+          span(&)
+          render_root { icon }
+        else
+          render_root { icon }
+          span(&)
+        end
+      end
+    end
+
+    def icon_template(&)
+      render_root do
+        icon
+      end
+    end
+
+    def icon
+      raise NotImplementedError,
+            'You must implement the icon method, using FontAwesome, Material Icons, or another icon library.'
+    end
+
+    def icon_container_classes
+      %w[
+        icon-text
+        is-align-items-center
+      ]
+    end
+
+    def root_classes
+      super +
+        [
+          'icon',
+          @control_alignment && "is-#{@control_alignment}",
+          @size && "is-#{@size}"
+        ]
+    end
+
+    def icon_alignment_class
+      return unless @icon_alignment == :right
+
+      'is-flex-direction-row-reverse'
+    end
+  end
+end

data/lib/bulma_x/image.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Image < BaseComponent
+    # TODO: Rendre src obligatoire
+    # HTML attributes
+    option :src
+    option :alt
+    option :referrerpolicy
+    option :crossorigin
+    option :width
+    option :height
+    option :sizes
+    option :srcset
+    option :loading
+
+    root_slot tag: :img
+
+    option :rounded, values: BOOLEAN, default: false
+
+    def root_classes
+      super +
+        [
+          @rounded && 'is-rounded'
+        ]
+    end
+
+    def root_attributes
+      super.merge(
+        src: @src,
+        alt: @alt,
+        referrerpolicy: @referrerpolicy,
+        crossorigin: @crossorigin,
+        width: @width,
+        height: @height,
+        sizes: @sizes,
+        srcset: @srcset,
+        loading: @loading
+      )
+    end
+  end
+end

data/lib/bulma_x/input.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Input < BaseInput
+    TYPES = %w[
+      button
+      checkbox
+      color
+      date
+      datetime-local
+      email
+      file
+      hidden
+      image
+      month
+      number
+      password
+      radio
+      range
+      reset
+      search
+      submit
+      tel
+      text
+      time
+      url
+      week
+    ].freeze
+
+    option :rounded, values: BOOLEAN, default: false
+    option :type, values: TYPES, default: 'text'
+    option :checked, values: BOOLEAN, default: false
+    option :name
+    option :value
+    option :placeholder
+
+    def root_classes
+      (super + [@rounded && 'is-rounded']).tap do |result|
+        result.delete('input') if %(radio checkbox button).include?(@type)
+      end
+    end
+
+    def root_attributes
+      super.merge(
+        type: @type,
+        checked: @checked,
+        name: @name,
+        value: @value,
+        placeholder: @placeholder
+      )
+    end
+  end
+end

data/lib/bulma_x/level.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Level < BaseComponent
+    option :mobile, values: BOOLEAN, default: false
+
+    root_slot tag: :nav
+
+    slot :left, component: 'Part'
+    slots :item, classes: ['level-item']
+    slot :right, component: 'Part'
+
+    def view_template
+      super do
+        slot(:left, side: :left) if slot?(:left)
+        slots(:item).each { render it }
+        slot(:right, side: :right) if slot?(:right)
+      end
+    end
+
+    def root_classes
+      super +
+        [
+          'level',
+          @mobile && 'is-mobile'
+        ]
+    end
+
+    class Part < BaseComponent
+      option :side, values: %i[left right]
+
+      slots :item, classes: ['level-item']
+
+      def view_template
+        super do
+          slots(:item).each { render it }
+        end
+      end
+
+      def root_classes = super + ["level-#{@side}"]
+    end
+  end
+end

data/lib/bulma_x/link.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Link < BulmaX::BaseComponent
+    # HTML attributes
+    option :href, default: '#'
+    option :href_lang
+    option :ping
+    option :referrerpolicy
+    option :rel
+    option :target
+    option :type
+    option :download, values: BOOLEAN, default: false
+
+    root_slot tag: :a
+
+    def initialize(...)
+      super
+
+      @href = @href&.strip # remove leading and trailing whitespaces
+    end
+
+    def root_classes
+      super +
+        [
+          'link'
+        ]
+    end
+
+    def root_attributes
+      super.merge(
+        href: @href,
+        hreflang: @href_lang,
+        ping: @ping,
+        referrerpolicy: @referrerpolicy,
+        rel: @rel,
+        target: @target,
+        type: @type,
+        title: @title,
+        download: @download
+      )
+    end
+  end
+end

data/lib/bulma_x/media.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Media < BaseComponent
+    root_slot tag: :article, classes: ['media']
+
+    slot :left, classes: ['media-left']
+    slot :right, classes: ['media-right']
+    slot :content, classes: ['media-content']
+
+    def view_template
+      super do
+        slot(:left) if slot?(:left)
+        slot(:content)
+        slot(:right) if slot?(:right)
+      end
+    end
+  end
+end

data/lib/bulma_x/message.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module BulmaX
+  class Message < BaseComponent
+    option :modifier, values: MODIFIERS, default: nil
+
+    root_slot tag: :article
+
+    slot :header, classes: ['message-header']
+    slot :body, classes: ['message-body']
+
+    def view_template
+      super do
+        slot(:header) if slot?(:header)
+        slot(:body)
+      end
+    end
+
+    def root_classes
+      super +
+        [
+          'message',
+          @modifier && "is-#{@modifier}"
+        ]
+    end
+  end
+end