bulma-phlex 0.14.0 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd181a5709227054b3083db9b36cfe6a8ffb88fab99dc12e617df8d2ddb52f0d
-  data.tar.gz: 46ccadb18d86c42f3edd41fd565147cc77d959bd8c43e8eb381eb89645ac3cd8
+  metadata.gz: 8a1d3209d836363da07529fa00c9374618623280e70f3167c409e320b77dd4c4
+  data.tar.gz: e078ae57978d967610194b989078d484ad2297d4cdd71b0ae2d65b07d80dc105
 SHA512:
-  metadata.gz: 7ac0afb5c9ffd6b606fdf12bbb6a9f15e3e24fe79aeff856a3ef240d944d89766fb3d164199b1859f0f5ee8088519541079d22f091e20d5cf7a95b81cafb83ee
-  data.tar.gz: 68f95fd0ff6e92c14a8b0ae4e3b524bfec47bcfc20cab7db4576aea7c0af131327802bdfe51c201b1455adb9e667cb3a1df3a3176b6cdae8a42602281bcab3c6
+  metadata.gz: c7c0d1e8bbfb69e58e78af757f14b4dde6ab532f085e7ea970cb1addd511f2c5c33ba964df7b80dcfdac878f4475108858ceace18f3e5b52356d3b9b3d7df521
+  data.tar.gz: c41d7a84d0a5e5c2c03aafd7ff74764af2e94221c051aa67766815d46805cd153829deb87173b7d73285fcfaf9752433412070effb7755fced7d3e45df388912

data/README.md

@@ -59,7 +59,7 @@ gem install bulma-phlex
 
 This gem requires:
 
-- Ruby 3.2.10 or higher
+- Ruby 3.3 or higher
 - Phlex 2.4.1 or higher
 - Bulma CSS (which you'll need to include in your application)
 
@@ -162,7 +162,7 @@ Renders a [Bulma form field](https://bulma.io/documentation/form/general/#form-f
 
 ```ruby
 render BulmaPhlex::FormField.new(help: "We'll never share your email.") do |field|
-  field.label("Email Address")
+  field.label("Email Address", for: "user_email_address")
   field.control { input(name: "user[email_address]", type: "email") }
 end
 ```
@@ -338,6 +338,19 @@ To add pagination to the table, call `paginate` with a block that returns a path
 table.paginate { |page| products_path(page: page) }
 ```
 
+Pass HTML attributes to the `tr` elements via the `row` method, using either keyword arguments or a block 
+that receives the record for the row:
+
+```ruby
+table.row(class: "custom-row-class") { |row| { id: "row-id-#{row.id}" } }
+```
+
+Hide columns on smaller screens with the column `hidden` option:
+
+```ruby
+table.column("Email", hidden: { mobile: true }) { |user| user.email }
+```
+
 
 ### Tabs
 

data/lib/bulma_phlex/form_field.rb

@@ -9,6 +9,8 @@ module BulmaPhlex
   # integrating with Bulma's column and grid systems. The form control content is set via the
   # `control` method (or a block passed directly to the component).
   #
+  # If the label is passes as a string argument, the any additional html attributes can also be included as arguments.
+  #
   # ## References
   #
   # - [Bulma Form Field](https://bulma.io/documentation/form/general/#form-field)
@@ -46,8 +48,9 @@ module BulmaPhlex
     #
     # Optionally expects a block that renders a custom label (e.g. with a link or icon inside).
     # Only one of `label_string` or a block should be provided.
-    def label(label_string = nil, &block)
+    def label(label_string = nil, **html_attributes, &block)
       @label_string = label_string
+      @label_attributes = html_attributes
       @label_builder = block
     end
 
@@ -103,7 +106,7 @@ module BulmaPhlex
 
     def render_label
       if @label_string
-        html_label(class: "label") { @label_string }
+        html_label(**mix({ class: "label" }, **@label_attributes)) { @label_string }
       elsif @label_builder
         raw @label_builder&.call
       end

data/lib/bulma_phlex/table.rb

@@ -8,24 +8,42 @@ module BulmaPhlex
   # (bordered, striped, hoverable) and **layout** options (narrow, fullwidth). An optional
   # **pagination** control can be added to the table footer via the `paginate` method.
   #
+  # The `tr` elements can be customized with the `row` method, which accepts static HTML attributes
+  # and/or a block that generates dynamic attributes based on the row data.
+  #
+  # To make the table responsive, use the `hidden` argument to hide certain columns on smaller
+  # screens. See the [Bulma documentation](https://bulma.io/documentation/helpers/visibility-helpers/#hide)
+  # for the full list, but the most common options are `hidden: "mobile"` and `hidden: "touch"`.
+  #
+  # The table supports any additional HTML attributes on the `<table>` element, such as `id` or `data-*`
+  # attributes, via the `**html_attributes` argument in the constructor.
+  #
   # ## Example
   #
   #     users = User.all
   #
   #     render BulmaPhlex::Table.new(users) do |table|
-  #       table.column "Name" do |user|
-  #         user.full_name
-  #       end
-  #
-  #       table.column "Email" do |user|
-  #         user.email
-  #       end
-  #
+  #       table.row(class: "has-background-light") { |user| { id: "user-row-#{user.id}" } }
+  #       table.column("Name", &:full_name)
+  #       table.column("Email", hidden: "touch", &:email)
+  #       table.date_column("Joined", hidden: "mobile", &:created_at, format: "%B %d, %Y")
+  #       table.conditional_icon("Admin?", &:admin?)
   #       table.column "Actions" do |user|
   #         link_to "Edit", edit_user_path(user), class: "button is-small"
   #       end
   #     end
-  class Table < BulmaPhlex::Base
+  class Table < BulmaPhlex::Base # rubocop:disable Metrics/ClassLength
+    # Returns an array of CSS classes for the table based on the provided options.
+    def self.classes_for(bordered: false, striped: false, narrow: false, hoverable: false, fullwidth: false)
+      classes = ["table"]
+      classes << "is-bordered" if bordered
+      classes << "is-striped" if striped
+      classes << "is-narrow" if narrow
+      classes << "is-hoverable" if hoverable
+      classes << "is-fullwidth" if fullwidth
+      classes
+    end
+
     # **Parameters**
     #
     # - `rows` — The collection of records to display in the table
@@ -53,11 +71,7 @@ module BulmaPhlex
                    fullwidth: false,
                    **html_attributes)
       @rows = rows
-      @bordered = bordered
-      @striped = striped
-      @narrow = narrow
-      @hoverable = hoverable
-      @fullwidth = fullwidth
+      @table_classes = self.class.classes_for(bordered:, striped:, narrow:, hoverable:, fullwidth:)
       @html_attributes = html_attributes
       @columns = []
     end
@@ -65,19 +79,15 @@ module BulmaPhlex
     def view_template(&)
       vanish(&)
 
-      table(**mix({ class: table_classes }, @html_attributes)) do
+      table(**mix({ class: @table_classes }, @html_attributes)) do
         thead do
-          @columns.each do |column|
-            table_header(column)
-          end
+          @columns.each { |column| table_header(column) }
         end
 
         tbody do
           @rows.each do |row|
-            tr do
-              @columns.each do |column|
-                td(**column[:html_attributes]) { column[:content].call(row) }
-              end
+            tr(**table_row_html_attributes(row)) do
+              @columns.each { |column| table_data_cell(column, row) }
             end
           end
         end
@@ -86,14 +96,19 @@ module BulmaPhlex
       end
     end
 
+    def row(**html_attributes, &attribute_builder)
+      @row_attributes = html_attributes
+      @row_attribute_builder = attribute_builder
+    end
+
     # Adds a column to the table. Can be called multiple times to define all columns.
     #
     # - `header` — The column header text
     # - `**html_attributes` — Additional HTML attributes for each `<td>` cell in this column
     #
     # Expects a block that receives each `row` object and returns the cell content.
-    def column(header, **html_attributes, &content)
-      @columns << { header:, html_attributes:, content: }
+    def column(header, hidden: false, **html_attributes, &content)
+      @columns << { header:, hidden:, html_attributes:, content: }
     end
 
     # Adds a date-formatted column to the table. Can be called multiple times.
@@ -103,8 +118,8 @@ module BulmaPhlex
     # - `**html_attributes` — Additional HTML attributes for each `<td>` cell in this column
     #
     # Expects a block that receives each `row` object and returns a `Date` or `Time` value.
-    def date_column(header, format: "%Y-%m-%d", **html_attributes, &content)
-      column(header, **html_attributes) do |row|
+    def date_column(header, hidden: false, format: "%Y-%m-%d", **html_attributes, &content)
+      column(header, hidden:, **html_attributes) do |row|
         content.call(row)&.strftime(format)
       end
     end
@@ -116,10 +131,10 @@ module BulmaPhlex
     # - `**html_attributes` — Additional HTML attributes for each `<td>` cell in this column
     #
     # Expects a block that receives each `row` object and returns a truthy or falsy value.
-    def conditional_icon(header, icon_class: "fas fa-check", **html_attributes, &content)
+    def conditional_icon(header, hidden: false, icon_class: "fas fa-check", **html_attributes, &content)
       html_attributes[:class] = [html_attributes[:class], "has-text-centered"].compact.join(" ")
 
-      column(header, **html_attributes) do |row|
+      column(header, hidden:, **html_attributes) do |row|
         Icon(icon_class) if content.call(row)
       end
     end
@@ -134,35 +149,49 @@ module BulmaPhlex
 
     private
 
-    def table_classes
-      classes = ["table"]
-      classes << "is-bordered" if @bordered
-      classes << "is-striped" if @striped
-      classes << "is-narrow" if @narrow
-      classes << "is-hoverable" if @hoverable
-      classes << "is-fullwidth" if @fullwidth
-      classes
+    def table_header(column)
+      th(class: header_classes(column)) { column[:header] }
     end
 
-    # this derives a th class from the column html attributes
-    # perhaps a better way would be pre-defined pairs?
-    def table_header(column)
-      attributes = {}
-      attributes[:class] = header_alignment(column[:html_attributes])
-      th(**attributes) { column[:header] }
+    def header_classes(column)
+      classes = []
+      classes << "is-hidden-#{column[:hidden]}" if column[:hidden]
+      classes << header_alignment(column[:html_attributes])
+      classes.compact
     end
 
     def header_alignment(html_attributes)
       classes = html_attributes[:class]
       return if classes.nil?
 
-      if classes&.include?("has-text-right") || classes&.include?("amount-display")
+      if classes.include?("has-text-right") || classes.include?("amount-display")
         "has-text-right"
-      elsif classes&.include?("has-text-centered")
+      elsif classes.include?("has-text-centered")
         "has-text-centered"
       end
     end
 
+    def table_row_html_attributes(row)
+      attributes = @row_attributes || {}
+      if @row_attribute_builder
+        dynamic_attributes = @row_attribute_builder.call(row) || {}
+        attributes = attributes.merge(dynamic_attributes)
+      end
+      attributes
+    end
+
+    def table_data_cell(column, row)
+      td(**mix({ class: cell_classes(column) }, column[:html_attributes])) do
+        column[:content].call(row)
+      end
+    end
+
+    def cell_classes(column)
+      return unless column[:hidden]
+
+      "is-hidden-#{column[:hidden]}"
+    end
+
     def pagination
       return unless @path_builder
 

data/lib/bulma_phlex/version.rb

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

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex
 version: !ruby/object:Gem::Version
-  version: 0.14.0
+  version: 0.15.0
 platform: ruby
 authors:
 - Todd Kummer
 bindir: bin
 cert_chain: []
-date: 2026-03-30 00:00:00.000000000 Z
+date: 2026-04-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -103,7 +103,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.2.10
+      version: '3.3'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="