bulma-phlex 0.9.0 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3136a7a0dd22a5d85922b80419ece937d391f6cbd385ba668079eb65d4387a61
-  data.tar.gz: 7553361a230fff3ecd6f121f6ec985348e4fc767a5f3927b27178676dea4de98
+  metadata.gz: 86dcdd7f2c7329c32ae420a8fc095975b4e4a1495802054c85789ee598230335
+  data.tar.gz: bb42b533fe7b41b347d2e83f89faba27ed519a9d88ca06faf3d73a321e397e27
 SHA512:
-  metadata.gz: d500797827a0ef15b9ad2f5ef334d63440cce5f8501ad90b8a9e93e0bb2a3ff0edf71eadf9a47aa47e7ef2ba570418a50250a3c586e106f631a45763c8bfe096
-  data.tar.gz: f62d2ae5b7c9dbba1fc3d73a775859ede75491d78faf2b6134aa34ed0101aad3991c3e1ee3555a41fa9fd7def98e18dcd026cd8e8c6909b3e7d0a44cda94dbf0
+  metadata.gz: d5ad488129b08c46c985c25852da8cbe20486a7059e0429acc64cb2e6eee00889e0a8bb921db8de0175a0d7645762209da9e7e260f1cc139089cbbe9b6b3dc51
+  data.tar.gz: ea95d770b73c2adfdc60a0eb4bb92541730c35008fafc44e638956bbb00413ba104c2cc8f1c0534671766a559e17d6d11c718e5a9ac8d2bce47215119d7f2702

data/README.md

@@ -25,10 +25,14 @@ Finally, the optional Rails extensions for the Card and Table components have be
 - [Installation](#installation)
 - [Usage](#usage)
   - [Card](#card)
+  - [Columns](#columns)
   - [Dropdown](#dropdown)
   - [Form Field](#form-field)
+  - [Grid](#grid)
+  - [Icon](#icon)
   - [Level](#level)
   - [NavigationBar](#navigationbar)
+  - [Notification](#notification)
   - [Pagination](#pagination)
   - [Table](#table)
   - [Tabs](#tabs)
@@ -110,6 +114,29 @@ Icons can be added to the links by passing an `icon` keyword argument with the i
 ```
 
 
+### Columns
+
+The [Columns](https://bulma.io/documentation/columns/basics/) component provides a way to create responsive columns layouts using Bulma's column classes. It generates the wrapping `div` with the `columns` class and handles all the options.
+
+```ruby
+BulmaPhlex::Columns(gap: 4, multiline: true) do
+  div(class: "column is-one-third") { "Column 1" }
+  div(class: "column is-one-third") { "Column 2" }
+  div(class: "column is-one-third") { "Column 3" }
+end
+```
+
+**Constructor Keyword Arguments:**
+
+- `minimum_breakpoint`: (Symbol, optional) Sets the minimum breakpoint for the columns; default is `:tablet`.
+- `multiline`: (Boolean, optional) If true, allows the columns to wrap onto multiple lines.
+- `gap`: (optional) Use an integer (0-8) to set the gap size between columns; use a hash keyed by breakpoints
+  to set responsive gap sizes.
+- `centered`: (Boolean, optional) If true, centers the columns.
+- `vcentered`: (Boolean, optional) If true, vertically centers the columns.
+
+
+
 ### Dropdown
 
 The [Dropdown](https://bulma.io/documentation/components/dropdown/) component provides a flexible dropdown menu for navigation or actions. It supports both click-to-toggle (default, requires a Stimulus controller) and hoverable modes, as well as alignment and icon customization.
@@ -169,6 +196,52 @@ The label can be passed in as a string or created with a block:
 - `grid`: When true, adds the `cell` class to the container. Can also be a string specifying the heighth or width of the cell (such as `col-span-3`).
 
 
+### Grid
+
+The [Grid](https://bulma.io/documentation/grid/smart-grid/) component provides a flexible grid layout system using Bulma's grid classes.
+
+```ruby
+BulmaPhlex::Grid(minimum_column_width: 16) do
+  @tiles.each do |tile|
+    div(class: "cell") do
+      ... render tile ...
+    end
+  end
+end
+```
+
+**Constructor Keyword Arguments:**
+
+- `fixed_columns`: (Integer, optional) Specifies a fixed number of columns for the grid.
+- `auto_count`: (Boolean, optional) If true, the grid will automatically adjust the number
+    of columns based on the breakpoint.
+- `minimum_column_width`: (Integer 1-32, optional) Sets a minimum width for the columns in the grid.
+- `gap`: (optional) Sets the gap size between grid items, from 1-8 with 0.5 increments.
+- `column_gap`: (optional) Sets the column gap size between grid items, from 1-8 with 0.5 increments.
+- `row_gap`: (optional) Sets the row gap size between grid items, from 1-8 with 0.5 increments.
+
+
+### Icon
+
+The [Icon](https://bulma.io/documentation/elements/icon/) component provides a way to display icons using Font Awesome or other icon libraries, with support for different sizes and colors.
+
+```ruby
+BulmaPhlex::Icon("fas fa-user", size: "large", color: "primary")
+```
+
+**Constructor Arguments:**
+
+- `icon_class`: (positional, required) The icon class to display (such as `fas fa-user`).
+- `size`: (optional) The [Bulma icon size](https://bulma.io/documentation/elements/icon/#sizes): small, medium, large.
+- `color`: (optional) The [Bulma color class](https://bulma.io/documentation/elements/icon/#colors) to apply.
+- `text_right`: (optional) Text to display to the right of the icon.
+- `text_left`: (optional) Text to display to the left of the icon.
+- `left`: (optional) If true, adds the `is-left` class for use in form controls.
+- `right`: (optional) If true, adds the `is-right` class for use in form controls.
+
+Any additional HTML attributes are passed to the icon container span.
+
+
 ### Level
 
 The [Level](https://bulma.io/documentation/layout/level/) component provides a flexible horizontal layout system with left and right alignment.
@@ -222,6 +295,40 @@ end
 > [!NOTE]  
 > Adding a container will limit the width of the Navigation Bar content according to Bulma's container rules. However, the background color of the navbar will still span the full width of the viewport.
 
+
+### Notification
+
+The [Notification](https://bulma.io/documentation/components/notification/) component provides a way to display messages or alerts with customizable styles and a close button.
+
+```ruby
+BulmaPhlex::Notification(color: "info", delete: true) do
+  "This is an informational notification with a close button."
+end
+```
+
+The `delete` keyword argument adds a close button to the notification. In addition to setting it to `true`, it can also be a hash of HTML attributes for the button, such as a data attribute to hook into a Stimulus controller.
+
+```ruby
+BulmaPhlex::Notification(color: "warning", delete: { data: { controller: "bulma-phlex--notification" } }) do
+  "This is a warning notification with a close button that works with a Stimulus controller."
+end
+```
+
+**Constructor Keyword Arguments:**
+
+- `delete`: (optional) When true, adds a close button to the notification. Can also be a hash of HTML attributes for the button.
+- `color`: (optional) The [Bulma color class](https://bulma.io/documentation/elements/tag/#colors) to apply.
+- `mode`: Sets the mode of the notification: "light" or "dark".
+
+Any additional attributes are passed to the notification container div.
+
+```ruby
+BulmaPhlex::Notification(id: "my-notification", class: "ml-3") do
+  "This is a notification with custom id and class."
+end
+```
+
+
 ### Pagination
 
 The [Pagination](https://bulma.io/documentation/components/pagination/) component provides navigation controls for paginated content, including previous/next links, page number links, and a summary of items being displayed.

data/lib/bulma_phlex/base.rb

@@ -7,12 +7,5 @@ module BulmaPhlex
   # It provides common utility methods and inherits from `Phlex::HTML`.
   #
   class Base < Phlex::HTML
-    private
-
-    def icon_span(icon, additional_classes = nil)
-      span(class: "icon #{additional_classes}".strip) do
-        i(class: icon)
-      end
-    end
   end
 end

data/lib/bulma_phlex/columns.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # # Columns Component
+  #
+  # The Columns component creates a responsive column layout using Bulma's column system.
+  #
+  # ## Keyword Arguments
+  #
+  # - `minimum_breakpoint`: (Symbol, optional) Sets the minimum breakpoint for the columns; default is `:tablet`.
+  # - `multiline`: (Boolean, optional) If true, allows the columns to wrap onto multiple lines.
+  # - `gap`: (optional) Use an integer (0-8) to set the gap size between columns; use a hash keyed by breakpoints
+  #   to set responsive gap sizes.
+  # - `centered`: (Boolean, optional) If true, centers the columns.
+  # - `vcentered`: (Boolean, optional) If true, vertically centers the columns.
+  class Columns < BulmaPhlex::Base
+    def initialize(minimum_breakpoint: nil, # rubocop:disable Metrics/ParameterLists
+                   multiline: false,
+                   gap: nil,
+                   centered: false,
+                   vcentered: false,
+                   **html_attributes)
+      @minimum_breakpoint = minimum_breakpoint
+      @multiline = multiline
+      @gap = gap
+      @centered = centered
+      @vcentered = vcentered
+      @html_attributes = html_attributes
+    end
+
+    def view_template(&)
+      div(**mix({ class: columns_classes }, @html_attributes), &)
+    end
+
+    private
+
+    def columns_classes
+      classes = ["columns"]
+      classes << "is-#{@minimum_breakpoint}" if @minimum_breakpoint
+      classes << "is-multiline" if @multiline
+      classes << "is-centered" if @centered
+      classes << "is-vcentered" if @vcentered
+      gap_classes(classes) if @gap
+      classes.join(" ")
+    end
+
+    def gap_classes(classes)
+      if @gap.is_a?(Integer)
+        classes << "is-#{@gap}"
+      elsif @gap.is_a?(Hash)
+        @gap.each do |breakpoint, size|
+          classes << "is-#{size}-#{breakpoint}"
+        end
+      end
+    end
+  end
+end

data/lib/bulma_phlex/form_field.rb

@@ -56,6 +56,17 @@ module BulmaPhlex
   # end
   # ```
   #
+  # ### Shorthand with no Label
+  #
+  # If no label is needed, you can use the shorthand syntax which just puts the control
+  # in the block without needing to call `control` explicitly:
+  #
+  # ```ruby
+  # FormField(help: "Enter the project name.") do
+  #   input id: "project_name", name: "project[name]", type: "text"
+  # end
+  # ```
+  #
   # ## References
   #
   # - [Bulma Form Field](https://bulma.io/documentation/form/general/#form-field)
@@ -84,13 +95,14 @@ module BulmaPhlex
       @control_builder = block
     end
 
-    def view_template(&)
-      vanish(&)
+    def view_template(&implicit_control)
+      @control_builder = implicit_control if @control_builder.nil? && implicit_control
+      vanish(&implicit_control)
 
       div(class: field_classes) do
         render_label
         render FormControl.new(class: control_classes) do
-          render raw @control_builder.call
+          raw @control_builder.call
           Icon(@icon_left, size: :small, left: true) if @icon_left
           Icon(@icon_right, size: :small, right: true) if @icon_right
         end
@@ -131,7 +143,7 @@ module BulmaPhlex
       if @label_string
         html_label(class: "label") { @label_string }
       elsif @label_builder
-        render raw @label_builder&.call
+        raw @label_builder&.call
       end
     end
 

data/lib/bulma_phlex/grid.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # # Grid Component
+  #
+  # The Grid component create a responsive grid layout using Bulma's grid system.
+  #
+  # ## Keyword Arguments
+  #
+  # - `fixed_columns`: (Integer, optional) Specifies a fixed number of columns for the grid.
+  # - `auto_count`: (Boolean, optional) If true, the grid will automatically adjust the number
+  #    of columns based on the content.
+  # - `minimum_column_width`: (Integer 1-32, optional) Sets a minimum width for the columns in the grid.
+  # - `gap`: (optional) Sets the gap size between grid items from 1-8 with 0.5 increments.
+  # - `column_gap`: (optional) Sets the column gap size between grid items from 1-8 with 0.5 increments.
+  # - `row_gap`: (optional) Sets the row gap size between grid items from 1-8 with 0.5 increments.
+  class Grid < BulmaPhlex::Base
+    def initialize(fixed_columns: nil, # rubocop:disable Metrics/ParameterLists
+                   auto_count: false,
+                   minimum_column_width: nil,
+                   gap: nil,
+                   column_gap: nil,
+                   row_gap: nil,
+                   **html_attributes)
+      @fixed_columns = fixed_columns
+      @auto_count = auto_count
+      @minimum_column_width = minimum_column_width
+      @gap = gap
+      @column_gap = column_gap
+      @row_gap = row_gap
+      @html_attributes = html_attributes
+    end
+
+    def view_template(&)
+      optional_fixed_grid_wrapper do
+        div(**mix({ class: grid_classes }, @html_attributes), &)
+      end
+    end
+
+    private
+
+    def optional_fixed_grid_wrapper(&)
+      if @fixed_columns || @auto_count
+        div(**mix({ class: fixed_grid_classes }, @html_attributes)) do
+          @html_attributes = {}
+          yield
+        end
+      else
+        yield
+      end
+    end
+
+    def grid_classes
+      classes = ["grid"]
+      classes << "is-col-min-#{@minimum_column_width}" if @minimum_column_width
+      classes << "is-gap-#{@gap}" if @gap
+      classes << "is-column-gap-#{@column_gap}" if @column_gap
+      classes << "is-row-gap-#{@row_gap}" if @row_gap
+      classes.join(" ")
+    end
+
+    def fixed_grid_classes
+      classes = ["fixed-grid"]
+      classes << "has-#{@fixed_columns}-cols" if @fixed_columns
+      classes << "has-auto-count" if @auto_count
+      classes.join(" ")
+    end
+  end
+end

data/lib/bulma_phlex/icon.rb

@@ -28,7 +28,8 @@ module BulmaPhlex
                    size: nil,
                    color: nil,
                    left: false,
-                   right: false)
+                   right: false,
+                   **html_attributes)
       @icon = icon
       @text_right = text_right
       @text_left = text_left
@@ -36,12 +37,13 @@ module BulmaPhlex
       @color = color
       @left = left
       @right = right
+      @html_attributes = html_attributes
     end
 
     def view_template
       optional_text_wrapper do
         span { @text_left } if @text_left
-        span(class: icon_classes) do
+        span(**mix({ class: icon_classes }, @html_attributes)) do
           i(class: @icon)
         end
         span { @text_right } if @text_right

data/lib/bulma_phlex/notification.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # # Notification
+  #
+  # The Bulma Notification component can be styled with the following options:
+  #
+  # - `delete`: If true, includes a delete button to dismiss the notification. Can also be a hash of HTML
+  # attributes for the button.
+  # - `color`: Sets the color of the notification. Accepts any Bulma color class suffix (e.g., "primary",
+  # "info", "danger").
+  # - `mode`: Sets the mode of the notification: "light" or "dark".
+  #
+  # Any additional HTML attributes passed to the component will be applied to the notification div.
+  #
+  # The content of the notification is provided via a block.
+  class Notification < BulmaPhlex::Base
+    def initialize(delete: false, color: nil, mode: nil, **html_attributes)
+      @delete = delete
+      @color = color
+      @mode = mode
+      @html_attributes = html_attributes
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      div(**mix({ class: notification_classes }, **@html_attributes)) do
+        delete_button if @delete
+        yield
+      end
+    end
+
+    private
+
+    def notification_classes
+      classes = ["notification"]
+      classes << "is-#{@color}" if @color.present?
+      classes << "is-#{@mode}" if @mode.present?
+      classes.join(" ")
+    end
+
+    def delete_button
+      html_attributes = { class: "delete" }
+      html_attributes = mix(html_attributes, @delete) if @delete.is_a?(Hash)
+      button(**html_attributes)
+    end
+  end
+end

data/lib/bulma_phlex/tab_components/tab.rb

@@ -32,7 +32,7 @@ module BulmaPhlex
           class: @active ? "is-active" : ""
         ) do
           a do
-            icon_span(@icon, "mr-1") if @icon
+            Icon(@icon, class: "mr-1") if @icon
             span { @title }
           end
         end

data/lib/bulma_phlex/table.rb

@@ -72,7 +72,7 @@ module BulmaPhlex
       html_attributes[:class] = [html_attributes[:class], "has-text-centered"].compact.join(" ")
 
       column(header, **html_attributes) do |row|
-        icon_span(icon_class) if content.call(row)
+        Icon(icon_class) if content.call(row)
       end
     end
 

data/lib/bulma_phlex/version.rb

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

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex
 version: !ruby/object:Gem::Version
-  version: 0.9.0
+  version: 0.10.0
 platform: ruby
 authors:
 - Todd Kummer
 bindir: bin
 cert_chain: []
-date: 2026-01-24 00:00:00.000000000 Z
+date: 2026-02-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -66,13 +66,16 @@ files:
 - lib/bulma_phlex.rb
 - lib/bulma_phlex/base.rb
 - lib/bulma_phlex/card.rb
+- lib/bulma_phlex/columns.rb
 - lib/bulma_phlex/dropdown.rb
 - lib/bulma_phlex/form_control.rb
 - lib/bulma_phlex/form_field.rb
+- lib/bulma_phlex/grid.rb
 - lib/bulma_phlex/icon.rb
 - lib/bulma_phlex/level.rb
 - lib/bulma_phlex/navigation_bar.rb
 - lib/bulma_phlex/navigation_bar_dropdown.rb
+- lib/bulma_phlex/notification.rb
 - lib/bulma_phlex/pagination.rb
 - lib/bulma_phlex/tab_components/content.rb
 - lib/bulma_phlex/tab_components/tab.rb