bulma-phlex 0.13.0 → 0.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f8f0cd18b60707a8603252208e2cf70b04e4e8afb43a4c2a62e1c06a0b4e484c
-  data.tar.gz: d89f7b184d4efb444474b4a1ee59c72beaea257a6d3bc1ad1018ddc9ae1a4c87
+  metadata.gz: fd181a5709227054b3083db9b36cfe6a8ffb88fab99dc12e617df8d2ddb52f0d
+  data.tar.gz: 46ccadb18d86c42f3edd41fd565147cc77d959bd8c43e8eb381eb89645ac3cd8
 SHA512:
-  metadata.gz: 56477bb7d2f9704ad2acdb404d9db20edff939ceb58e942fb90ce7fd4d37696c16bf071f3583b357cbf09d0e9d36859178d32c07242cb24d462814e87712caba
-  data.tar.gz: 62cf166607ea1826c403d7bb940f020ac3b71ef792ee8ff15a65f61ac9f4787713fe4aed3023cb76229002a0add42c161f20147a3001494c180da05e153d8700
+  metadata.gz: 7ac0afb5c9ffd6b606fdf12bbb6a9f15e3e24fe79aeff856a3ef240d944d89766fb3d164199b1859f0f5ee8088519541079d22f091e20d5cf7a95b81cafb83ee
+  data.tar.gz: 68f95fd0ff6e92c14a8b0ae4e3b524bfec47bcfc20cab7db4576aea7c0af131327802bdfe51c201b1455adb9e667cb3a1df3a3176b6cdae8a42602281bcab3c6

data/README.md

@@ -20,6 +20,7 @@ This gem provides a set of ready-to-use [Phlex](https://github.com/phlex-ruby/ph
   - [Hero](#hero)
   - [Icon](#icon)
   - [Level](#level)
+  - [Message](#message)
   - [Modal](#modal)
   - [NavigationBar](#navigationbar)
   - [Notification](#notification)
@@ -84,11 +85,12 @@ Renders a [Bulma button](https://bulma.io/documentation/elements/button/) elemen
 The component generates a `<button>` by default. Pass an `href:` attribute to generate an `<a>` element instead. Pass `input: "submit"` (or `"button"` or `"reset"`) to generate an `<input>` element.
 
 ```ruby
-BulmaPhlex::Button(color: "primary", size: "large", icon: "fas fa-thumbs-up") { "Like" }
+BulmaPhlex::Button("Like", color: "primary", size: "large", icon: "fas fa-thumbs-up")
 BulmaPhlex::Button(href: "/profile") { "View Profile" }
 BulmaPhlex::Button(input: "submit", color: "success")
 ```
 
+The button label can be passed in as a string or in a block.
 
 ### Card
 
@@ -105,6 +107,9 @@ render BulmaPhlex::Card.new do |card|
 end
 ```
 
+Use method `footer_item` for full control of the footer items. Class `footer-item` must be on the outer element 
+of the block.
+
 
 ### Columns
 
@@ -217,6 +222,17 @@ end
 ```
 
 
+### Message
+
+Renders a [Bulma message](https://bulma.io/documentation/components/message/) component with a header, optional delete button, and body.
+
+```ruby
+render BulmaPhlex::Message.new("Hello World", color: "info", delete: true) do
+  "Look, it's a deletable message box!"
+end
+```
+
+
 ### Modal
 
 Renders a [Bulma modal](https://bulma.io/documentation/components/modal/) dialog overlay with a background, content area, and close button. Content is provided via a block.
@@ -402,4 +418,4 @@ The gem is available as open source under the terms of the [MIT License](https:/
 
 ## Credits
 
-This leverages the [Bulma CSS library](https://bulma.io/documentation/) and [Phlex](https://www.phlex.fun/) but is not endorsed or certified by either. We are fans of both and this makes using them together easier.
+This leverages the [Bulma CSS library](https://bulma.io/documentation/) and [Phlex](https://www.phlex.fun/) but is not endorsed or certified by either. We are fans of both and this makes using them together easier.

data/lib/bulma_phlex/button.rb

@@ -7,6 +7,8 @@ module BulmaPhlex
   # arguments provided. Supports Bulma options for **color**, **size**, **style mode**,
   # and **layout** (responsive, fullwidth, outlined, inverted, rounded), as well as
   # optional **icons** on the left and/or right side of the label.
+  #
+  # The label can be passed into the component as a string or from a block.
   class Button < Base
     # Returns an array of CSS classes for the button based on the provided options.
     def self.classes_for(color: nil, # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
@@ -31,6 +33,7 @@ module BulmaPhlex
 
     # **Parameters**
     #
+    # - `label` (positional) — Optionally pass in button label as a string
     # - `color` — Button color: `"primary"`, `"link"`, `"info"`, `"success"`, `"warning"`, `"danger"`
     # - `mode` — Button style mode: `"light"` or `"dark"`
     # - `size` — Button size: `"small"`, `"normal"`, `"medium"`, `"large"`
@@ -44,7 +47,8 @@ module BulmaPhlex
     # - `icon_right` — Icon class added to the right of the button text
     # - `input` — If set, renders an `<input>` element of this type (`"button"`, `"reset"`, `"submit"`)
     # - `**html_attributes` — Additional HTML attributes for the button element
-    def self.new(color: nil,
+    def self.new(label = nil,
+                 color: nil,
                  mode: nil,
                  size: nil,
                  responsive: false,
@@ -60,7 +64,8 @@ module BulmaPhlex
       super
     end
 
-    def initialize(color: nil,
+    def initialize(label = nil,
+                   color: nil,
                    mode: nil,
                    size: nil,
                    responsive: false,
@@ -73,6 +78,7 @@ module BulmaPhlex
                    icon_right: nil,
                    input: nil,
                    **html_attributes)
+      @label = label
       @classes = self.class.classes_for(color:, mode:, size:, responsive:, fullwidth:, outlined:, inverted:, rounded:)
       @input = input
       @icon_left = icon || icon_left
@@ -81,6 +87,8 @@ module BulmaPhlex
     end
 
     def view_template(&)
+      block_content = capture(&)
+
       options = mix({ class: @classes }, @html_attributes)
 
       if @input
@@ -89,10 +97,23 @@ module BulmaPhlex
         element_type = @html_attributes.key?(:href) ? :a : :button
         tag(element_type, **options) do
           Icon(@icon_left) if @icon_left
-          yield if block_given?
+          button_label(block_content)
           Icon(@icon_right) if @icon_right
         end
       end
     end
+
+    private
+
+    def button_label(block_content)
+      value = @label || block_content
+      return if value.nil? || value.empty?
+
+      if @icon_left || @icon_right
+        span { value }
+      else
+        plain value
+      end
+    end
   end
 end

data/lib/bulma_phlex/card.rb

@@ -65,6 +65,12 @@ module BulmaPhlex
       (@footer_items ||= []) << [text, href, html_attributes]
     end
 
+    # Delegates full control of the footer item to the block. The top element in the block must include
+    # the `card-footer-item` class.
+    def footer_item(&block)
+      (@footer_items ||= []) << block
+    end
+
     private
 
     def card_header
@@ -87,20 +93,28 @@ module BulmaPhlex
       return if @footer_items.nil? || @footer_items.empty?
 
       footer(class: "card-footer") do
-        @footer_items.each do |text, href, html_attributes|
-          icon = html_attributes.delete(:icon)
-          html_attributes[:class] = [html_attributes[:class], "card-footer-item"].compact.join(" ")
-          a(href:, **html_attributes) do
-            if icon.present?
-              icon_text(icon, text)
-            else
-              plain text
-            end
+        @footer_items.each do |block_or_text, href, html_attributes|
+          if block_or_text.is_a?(Proc)
+            block_or_text.call
+          else
+            render_footer_link(block_or_text, href, html_attributes)
           end
         end
       end
     end
 
+    def render_footer_link(text, href, html_attributes)
+      icon = html_attributes.delete(:icon)
+      html_attributes[:class] = [html_attributes[:class], "card-footer-item"].compact.join(" ")
+      a(href:, **html_attributes) do
+        if icon.nil?
+          plain text
+        else
+          icon_text(icon, text)
+        end
+      end
+    end
+
     def icon_text(icon, text)
       span(class: "icon-text") do
         span(class: "icon") { i(class: icon) }

data/lib/bulma_phlex/hero.rb

@@ -3,9 +3,16 @@
 module BulmaPhlex
   # Renders a [Bulma Hero](https://bulma.io/documentation/layout/hero/) component.
   #
-  # Supports **color** and **size** options. Content can be provided as a title/subtitle pair,
-  # a single block for the body, or by calling `head`, `body`, and `foot` on the yielded
-  # component to define each section independently.
+  # Supports **color** and **size** options. There are three ways to provide content:
+  #
+  # 1. **Title/subtitle params** — pass `title:` and/or `subtitle:` to the constructor; no block needed.
+  # 2. **Direct body block** — pass a block to `render`; call Phlex HTML methods on the yielded
+  #    component and they are rendered inside the `hero-body` div.
+  # 3. **Building blocks** — call `head`, `body`, and `foot` on the yielded component to
+  #    populate each of Bulma's three hero regions independently:
+  #    - `hero-head` — typically a navbar or branding bar
+  #    - `hero-body` — main content area
+  #    - `hero-foot` — bottom tabs or action bar
   class Hero < BulmaPhlex::Base
     # **Parameters**
     #
@@ -42,16 +49,16 @@ module BulmaPhlex
       output = capture(&)
 
       section(**mix({ class: hero_classes }, @html_attributes)) do
-        if @body.present?
-          building_blocks(&)
-        else
+        if @body.nil?
           div(class: "hero-body") do
-            if output.present?
-              output
-            else
+            if output.empty?
               title_and_subtitle
+            else
+              raw safe(output)
             end
           end
+        else
+          building_blocks(&)
         end
       end
     end

data/lib/bulma_phlex/message.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # Renders a [Bulma message](https://bulma.io/documentation/components/message/) component with a
+  # header, optional delete button, and body.
+  #
+  # The component generates an `article` element and supports color and size options, as well as any
+  # additional html attributes.
+  class Message < BulmaPhlex::Base
+    # **Parameters**
+    #
+    # - `header_text` (positional, optional) — If not provided, the header will be skipped
+    # - `delete` — If `true`, includes a delete button to dismiss the message. Can also be a hash of HTML
+    #  attributes for the button
+    # - `color` — Color of the notification (e.g. `"primary"`, `"info"`, `"danger"`)
+    # - `size` — `"small"`, `"normal"` (the default), `"medium"` or `"large"`
+    # - `**html_attributes` — Additional HTML attributes for the notification element
+    def self.new(header_text = nil, delete: nil, color: nil, size: nil, **html_attributes)
+      super
+    end
+
+    def initialize(header_text = nil, delete: nil, color: nil, size: nil, **html_attributes)
+      @header_text = header_text
+      @delete = delete
+      @color = color
+      @size = size
+      @html_attributes = html_attributes
+      after_initialize
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      article(**mix({ class: message_classes }, **@html_attributes)) do
+        message_header unless @header_text.nil?
+        message_body(&)
+      end
+    end
+
+    private
+
+    # allows for easy customization
+    def after_initialize; end
+
+    def message_classes
+      classes = ["message"]
+      classes << "is-#{@color}" unless @color.nil?
+      classes << "is-#{@size}" if !@size.nil? && @size.to_s != "normal"
+      classes.join(" ")
+    end
+
+    def message_header
+      div(class: "message-header") do
+        p { @header_text }
+        delete_button if @delete
+      end
+    end
+
+    def delete_button
+      button_attributes = { class: "delete", aria_label: "delete" }
+      button_attributes = mix(button_attributes, @delete) if @delete.is_a?(Hash)
+      button(**button_attributes)
+    end
+
+    def message_body(&)
+      div(class: "message-body", &)
+    end
+  end
+end

data/lib/bulma_phlex/notification.rb

@@ -14,15 +14,17 @@ module BulmaPhlex
     # - `color` — Color of the notification (e.g. `"primary"`, `"info"`, `"danger"`)
     # - `mode` — Style mode: `"light"` or `"dark"`
     # - `**html_attributes` — Additional HTML attributes for the notification element
-    def self.new(delete: false, color: nil, mode: nil, **html_attributes)
+    def self.new(delete: nil, color: nil, mode: nil, **html_attributes)
       super
     end
 
-    def initialize(delete: false, color: nil, mode: nil, **html_attributes)
+    def initialize(delete: nil, color: nil, mode: nil, **html_attributes)
       @delete = delete
       @color = color
       @mode = mode
       @html_attributes = html_attributes
+
+      after_initialize
     end
 
     def view_template(&)
@@ -36,10 +38,13 @@ module BulmaPhlex
 
     private
 
+    # allows for easy customization
+    def after_initialize; end
+
     def notification_classes
       classes = ["notification"]
-      classes << "is-#{@color}" if @color.present?
-      classes << "is-#{@mode}" if @mode.present?
+      classes << "is-#{@color}" unless @color.nil?
+      classes << "is-#{@mode}" unless @mode.nil?
       classes.join(" ")
     end
 

data/lib/bulma_phlex/tag.rb

@@ -32,7 +32,7 @@ module BulmaPhlex
     def view_template
       if @html_attributes.key?(:href)
         a(class: tag_classes, **@html_attributes) { text_and_optional_delete_button }
-      elsif @options[:delete] || @html_attributes.dig(:data, :action).present?
+      elsif @options[:delete] || !@html_attributes.dig(:data, :action).nil?
         button(class: tag_classes, **@html_attributes) { text_and_optional_delete_button }
       else
         span(class: tag_classes, **@html_attributes) { plain @text }
@@ -51,9 +51,9 @@ module BulmaPhlex
 
     def tag_classes
       classes = ["tag"]
-      classes << "is-#{@options[:color]}" if @options[:color].present?
+      classes << "is-#{@options[:color]}" unless @options[:color].nil?
       classes << "is-#{@options[:light]} is-light" if @options[:light]
-      classes << "is-#{@options[:size]}" if @options[:size].present?
+      classes << "is-#{@options[:size]}" unless @options[:size].nil?
       classes << "is-rounded" if @options[:rounded]
       classes.join(" ")
     end

data/lib/bulma_phlex/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module BulmaPhlex
-  VERSION = "0.13.0"
+  VERSION = "0.14.0"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex
 version: !ruby/object:Gem::Version
-  version: 0.13.0
+  version: 0.14.0
 platform: ruby
 authors:
 - Todd Kummer
 bindir: bin
 cert_chain: []
-date: 2026-03-09 00:00:00.000000000 Z
+date: 2026-03-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -76,6 +76,7 @@ files:
 - lib/bulma_phlex/hero.rb
 - lib/bulma_phlex/icon.rb
 - lib/bulma_phlex/level.rb
+- lib/bulma_phlex/message.rb
 - lib/bulma_phlex/modal.rb
 - lib/bulma_phlex/navigation_bar.rb
 - lib/bulma_phlex/navigation_bar_dropdown.rb