bulma-phlex 0.3.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5838ff317a395e9e57b33d45dad7f62c3a7820112a2453c35e9305e7a6ac19c1
-  data.tar.gz: 48988fd8c7210d47b0090d9d385fa6fce278d2ad6d47d10673aabf9e46034df8
+  metadata.gz: '09f6b84b1564059a0db9f00ee35338b5c1acfc7944fe2a596463ef8c01e22e63'
+  data.tar.gz: e21e0bfd149428895ba829718808185dc37ecb84e796f523fb2d7896540e07be
 SHA512:
-  metadata.gz: 49c89b3e7e9aa630d01ce8ae14b0c35694d811533c37512e42d2d21dbcae83546a96e5ef0262b4078d9235d6cea73f3dcad529ed91c4dd0ccfda1eee1af040d4
-  data.tar.gz: 9840cfdb56b3af42f2a32c3717b985a29ef93d939444ceaef47545915e450e8717c543eff3f867946aacdaac45ca51dcd2845f0d53b3b61a3eaa594586964847
+  metadata.gz: 9da14ce4cb01f3121f7e2cd8fd3ba8dc7e877976c9913e5cfac07a6c3589404bf62a503ae076b139fc30cacf6436f132e78d1dcbc83588372183caf8d9194a27
+  data.tar.gz: 1eb2979a4cfbe5dd020e7260ba999ef0d762b14cc6f26dadef3ba75edabd2d039fe0521c8babdb4204247b6d540e7dca63d5712b408e003b2a88f3f785c5c770

data/README.md

@@ -4,7 +4,23 @@
 
 # Bulma Components Built with Phlex
 
-This gem provides a set of ready-to-use components [Phlex](https://github.com/phlex-ruby/phlex) for common [Bulma](https://bulma.io/) components and elements, making it easy to build beautiful, responsive interfaces with a clean, Ruby-focused API.
+This gem provides a set of ready-to-use [Phlex](https://github.com/phlex-ruby/phlex) components for common [Bulma](https://bulma.io/) components and elements, making it easy to build beautiful, responsive interfaces with a clean, Ruby-focused API.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+  - [Card](#card)
+  - [Dropdown](#dropdown)
+  - [Level](#level)
+  - [NavigationBar](#navigationbar)
+  - [Pagination](#pagination)
+  - [Table](#table)
+  - [Tabs](#tabs)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+- [Credits](#credits)
 
 ## Installation
 
@@ -54,7 +70,7 @@ Use the Phlex components in your Rails views or any Ruby application that suppor
 [Cards](https://bulma.io/documentation/components/card/) are flexible containers that can display various types of content including headers and content sections.
 
 ```ruby
-render Components::Bulma::Card.new do |card|
+Bulma::Card() do |card|
   card.head("Card Title")
   card.content do
     "This is some card content"
@@ -62,12 +78,27 @@ render Components::Bulma::Card.new do |card|
 end
 ```
 
+#### Rails Feature: Turbo Frame Content
+
+When the `turbo-rails` and `phlex-rails` gems are installed, the Card component also provides method `turbo_frame_content`, which allows the content to be deferred to a turbo frame. The method accepts the same parameters as [the Turbo Rails helper method `turbo_frame_tag`](https://github.com/hotwired/turbo-rails?tab=readme-ov-file#decompose-with-turbo-frames), with the addition of the following two attributes:
+
+- pending_message (default: "Loading...")
+- pending_icon (default: "fas fa-spinner fa-pulse")
+
+```ruby
+Bulma::Card() do |card|
+  card.head("Product Info")
+  card.turbo_frame_content("product", src: product_path(@product), pending_message: "Loading product...")
+end
+```
+
+
 ### 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.
 
 ```ruby
-render Components::Bulma::Dropdown.new("Next Actions...") do |dropdown|
+Bulma::Dropdown("Next Actions...") do |dropdown|
   dropdown.link "View Profile", "/profile"
   dropdown.link "Go to Settings", "/settings"
   dropdown.divider
@@ -96,7 +127,7 @@ end
 The [Level](https://bulma.io/documentation/layout/level/) component provides a flexible horizontal layout system with left and right alignment.
 
 ```ruby
-render Components::Bulma::Level.new do |level|
+Bulma::Level() do |level|
   level.left do
     button(class: "button") { "Left" }
   end
@@ -115,7 +146,7 @@ end
 The [NavigationBar](https://bulma.io/documentation/components/navbar/) component provides a responsive navigation header with support for branding, navigation links, and dropdown menus.
 
 ```ruby
-render Components::Bulma::NavigationBar.new do |navbar|
+Bulma::NavigationBar() do |navbar|
   navbar.brand_item "My App", "/"
 
   navbar.left do |menu|
@@ -145,26 +176,23 @@ The [Pagination](https://bulma.io/documentation/components/pagination/) componen
 @products = Product.page(params[:page]).per(20)
 
 # In the view:
-render Components::Bulma::Pagination.new(@products, ->(page) { products_path(page: page) })
+Bulma::Pagination(@products, ->(page) { products_path(page: page) })
 ```
 
 ### Table
 
 The [Table](https://bulma.io/documentation/elements/table/) component provides a way to display data in rows and columns with customizable headers and formatting options.
 
-It requires a Hotwired Stimulus controller to manage the tabs and the content. By default, the controller name is assumed to be `bulma--tabs`, but can be overridden with the constructor keyword argument `stimulus_controller`. Stimulus targets and actions are added to the component.
-
 ```ruby
 users = User.all
 
-render Components::Bulma::Table.new(users) do |table|
+Bulma::Table(users, fullwidth: true, hoverable: true) do |table|
   table.column "Name" do |user|
     user.full_name
   end
 
-  table.column "Email" do |user|
-    user.email
-  end
+  # use the symbol-to-proc shortcut!
+  table.column "Email", &:email
 
   table.column "Actions" do |user|
     link_to "Edit", edit_user_path(user), class: "button is-small"
@@ -172,12 +200,85 @@ render Components::Bulma::Table.new(users) do |table|
 end
 ```
 
+**Constructor Keyword Arguments:**
+
+- `rows`: the data for the table as an enumerable (anything that responds to `each`)
+- `id`: the Id for the table element (defaults to "table")
+- `bordered`: adds the `is-bordered` class (boolean, defaults to false)
+- `striped`: adds the `is-striped` class (boolean, defaults to false)
+- `narrow`: adds the `is-narrow` class (boolean, defaults to false)
+- `hoverable`: adds the `is-hoverable` class (boolean, defaults to false)
+- `fullwidth`: adds the `is-fullwidth` class (boolean, defaults to false)
+
+**Arguments for `column` Method:**
+
+The `column` method takes the column name and any html attributes to be assigned to the table cell element. The block will be called with the row as the parameter.
+
+#### Additional Column Types
+
+Instead of calling `column`, you can also invoke the following methods to add amount, date, and icon columns:
+
+**Arguments for `amount_column` (Rails only):**
+
+- name: content for the `th` element
+- `currency` (keyword): options that will be passed to [Rails helper number_to_currency](https://api.rubyonrails.org/classes/ActiveSupport/NumberHelper.html#method-i-number_to_currency, uses Rails defaults)
+
+```ruby
+  table.amount_column("Payment Amount") { |row| row.payment_amount }
+  table.amount_column("Total", currency: { unit: "€" }, class: "is-bold", &:total)
+```
+
+**Arguments for `date_column`:**
+
+- name: content for the `th` element
+- `format` (keyword): the formatting options (will be passed to `strftime`, defaults to "%Y-%m-%d")
+
+```ruby
+  table.date_column("Due Date", format: "%B %d, %Y") { |row| row.due_date }
+```
+
+**Arguments for `conditional_icon`:**
+
+The icon column is intended to show a boolean flag: a yes / no or an on / off. When the value is true the icon shows and when the value is false it does not.
+
+- name: content for the `th` element
+- `icon_class` (keyword): the icon to show (defaults to the Font Awesome check mark: "fas fa-check")
+ 
+```ruby
+  table.conditional_icon("Completed?", &:complete)
+  table.conditional_icon("Approved?", icon_class: "fas fa-thumbs-up") { |row| row.status == "Approved" }
+```
+
+#### Pagination
+
+If the table should be paginated, invoke method `paginate` with a block that will return a path given a page number.
+
+```ruby
+  table.paginate do |page_number|
+    products_path(page: { number: page_number })
+  end
+```
+
+In order to support pagination, the `rows` argument passed into the constructor must repond with integers to the following:
+
+- current_page
+- total_pages
+- per_page
+- total_count
+- previous_page (can be nil)
+- next_page (can be nil)
+
+This generates the [Bulma pagination](https://bulma.io/documentation/components/pagination/) component, providing navigation controls for paginated content.
+
+
 ### Tabs
 
 The [Tabs](https://bulma.io/documentation/components/tabs/) component provides a way to toggle between different content sections using tabbed navigation, with support for icons and active state management.
 
+Behavior of the tabs can be driven by the data attributes, which are assigned by the object passed in as the `data_attributes_builder`. By default, this will use the `StimulusDataAttributes` class with the controller name `bulma--tabs`. The controller is not provided by this library, but you can create your own Stimulus controller to handle the tab switching logic. Here is [an implementation of a Stimulus controller for Bulma tabs](https://github.com/RockSolt/bulma-rails-helpers/blob/main/app/javascript/controllers/bulma/tabs_controller.js).
+
 ```ruby
-render Components::Bulma::Tabs.new do |tabs|
+Bulma::Tabs(tabs_class: "is-boxed", contents_class: "ml-4") do |tabs|
   tabs.tab(id: "profile", title: "Profile", active: true) do
     "Profile content goes here"
   end
@@ -192,6 +293,20 @@ render Components::Bulma::Tabs.new do |tabs|
 end
 ```
 
+**Constructor Keyword Arguments:**
+
+- `tabs_class`: Classes to be added to the tabs div, such as `is-boxed`, `is-medium`, `is-centered`, or `is-toggle`.
+- `contents_class`: Classes added to the div that wraps the content (no Bulma related tabs functionality here, just a hook).
+- `data_attributes_builder`: Builder object that responds to `for_container`, `for_tab`, and `for_content` (with the latter two receiving the tab `id`). See the default `StimulusDataAttributes` for an example.
+
+**Keyword Arguments for `tab` Method:**
+
+- `id`: The id to be assigned to the content. The tab will be assigned the same id with the suffix `-tab`.
+- `title`: The name on the tab.
+- `active`: Adds the `is-active` class to the tab and shows the related content. Non-active content is assigned the `is-hidden` class. Defaults to `false`.
+- `icon`: Specify an optional icon class.
+
+
 ## Development
 
 After checking out the repo, run `bundle install` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
@@ -205,3 +320,7 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/RockSo
 ## License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## 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 the both and this makes using them together easier.

data/lib/bulma-phlex.rb

@@ -1,15 +1,13 @@
 # frozen_string_literal: true
 
-require "phlex"
 require "bulma_phlex/version"
+require "zeitwerk"
+require "phlex"
+
+loader = Zeitwerk::Loader.new
+loader.tag = "bulma-phlex"
+loader.push_dir(File.dirname(__FILE__))
+loader.ignore(__FILE__)
+loader.setup
 
-require "components/bulma"
-require "components/bulma/base"
-require "components/bulma/card"
-require "components/bulma/dropdown"
-require "components/bulma/level"
-require "components/bulma/navigation_bar_dropdown"
-require "components/bulma/navigation_bar"
-require "components/bulma/pagination"
-require "components/bulma/table"
-require "components/bulma/tabs"
+require "bulma_phlex/railtie" if defined?(Rails::Railtie)

data/lib/bulma_phlex/rails/card_helper.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  module Rails
+    # # Card Helper
+    #
+    # This module provides method `turbo_frame_content` to create a card with a turbo frame as its content.
+    module CardHelper
+      extend ActiveSupport::Concern
+
+      included do
+        include Phlex::Rails::Helpers::TurboFrameTag
+      end
+
+      # Renders a Bulma-styled card with a Turbo Frame as its content. This uses the same signatures as
+      # `turbo_frame_tag`, with the addition of two optional attributes: `pending_message` and `pending_icon`.
+      #
+      # The two pending attributes have the following defaults:
+      # - pending_message: "Loading..."
+      # - pending_icon: "fas fa-spinner fa-pulse"
+      def turbo_frame_content(*ids, src: nil, target: nil, **attributes)
+        pending_message = attributes.delete(:pending_message) || "Loading..."
+        pending_icon = attributes.delete(:pending_icon) || "fas fa-spinner fa-pulse"
+
+        content do
+          turbo_frame_tag ids, src: src, target: target, **attributes do
+            span(class: "icon") { i class: pending_icon }
+            span { plain pending_message }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/bulma_phlex/rails/table_helper.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  module Rails
+    # # Table Helper
+    #
+    # This module provides method `amount_column` to create an amount column in a table.
+    module TableHelper
+      extend ActiveSupport::Concern
+
+      included do
+        include Phlex::Rails::Helpers::NumberToCurrency
+      end
+
+      def amount_column(header, currency: {}, **html_attributes, &content)
+        html_attributes[:class] = [html_attributes[:class], "has-text-right"].compact.join(" ")
+
+        column(header, **html_attributes) do |row|
+          number_to_currency(content.call(row), **currency)
+        end
+      end
+    end
+  end
+end

data/lib/bulma_phlex/railtie.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # # Railtie for BulmaPhlex
+  #
+  # This Railtie adds Rails-specific features to the BulmaPhlex library.
+  class Railtie < ::Rails::Railtie
+    initializer "bulma_phlex" do
+      ActiveSupport.on_load(:action_view) do
+        if defined?(Phlex::Rails)
+          Components::Bulma::Card.include(BulmaPhlex::Rails::CardHelper) if defined?(Turbo)
+          Components::Bulma::Table.include(BulmaPhlex::Rails::TableHelper)
+        end
+      end
+    end
+  end
+end

data/lib/bulma_phlex/version.rb

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

data/lib/components/bulma/card.rb

@@ -11,7 +11,7 @@ module Components
     # ## Example
     #
     # ```ruby
-    # render Components::Bulma::Card.new do |card|
+    # Bulma::Card() do |card|
     #   card.head("Card Title")
     #   card.content do
     #     "This is some card content"
@@ -19,6 +19,11 @@ module Components
     # end
     # ```
     #
+    # ## Rails Feature: Turbo Frame Content
+    #
+    # If the project includes Rails and the Phlex::Rails gem, the `BulmaPhlex::Rails::CardHelper` module
+    # provides a `turbo_frame_content` method to create a card with a turbo frame
+    # as its content. This allows for dynamic loading of card content.
     class Card < Components::Bulma::Base
       def view_template(&)
         div(class: "card", &)
@@ -35,24 +40,6 @@ module Components
           div(class: "content", &)
         end
       end
-
-      if defined?(Phlex::Rails)
-        include Phlex::Rails::Helpers::TurboFrameTag
-
-        # this copies the signature of the turbo_frame_tag helper,
-        # with the addition of a pending_message attribute
-        def turbo_frame_content(*ids, src: nil, target: nil, **attributes)
-          pending_message = attributes.delete(:pending_message) || "Loading..."
-          pending_icon = attributes.delete(:pending_icon) || "fas fa-spinner fa-pulse"
-
-          content do
-            turbo_frame_tag ids, src: src, target: target, **attributes do
-              span(class: "icon") { i class: pending_icon }
-              span { plain pending_message }
-            end
-          end
-        end
-      end
     end
   end
 end

data/lib/components/bulma/dropdown.rb

@@ -25,7 +25,7 @@ module Components
     # ## Example
     #
     # ```ruby
-    # render Components::Bulma::Dropdown.new("Next Actions...") do |dropdown|
+    # Bulma::Dropdown("Next Actions...") do |dropdown|
     #   dropdown.link "View Profile", "/profile"
     #   dropdown.link "Go to Settings", "/settings"
     #   dropdown.divider

data/lib/components/bulma/level.rb

@@ -10,7 +10,7 @@ module Components
     # ## Example:
     #
     # ```ruby
-    # render Components::Bulma::Level.new do |level|
+    # Bulma::Level() do |level|
     #   level.left do
     #     button(class: "button") { "Left" }
     #   end

data/lib/components/bulma/navigation_bar.rb

@@ -11,7 +11,7 @@ module Components
     # ## Example
     #
     # ```ruby
-    # render Components::Bulma::NavigationBar.new do |navbar|
+    # Bulma::NavigationBar() do |navbar|
     #   navbar.brand do
     #     a(href: "/", class: "navbar-item") { "My App" }
     #   end
@@ -26,7 +26,7 @@ module Components
     #
     #     div(class: "navbar-item has-dropdown is-hoverable") do
     #       a(class: "navbar-link") { "Account" }
-    #       render Components::Bulma::NavigationBarDropdown do |dropdown|
+    #       Bulma::NavigationBarDropdown() do |dropdown|
     #         dropdown.item "Sign In", "/login"
     #         dropdown.item "Register", "/register"
     #       end

data/lib/components/bulma/navigation_bar_dropdown.rb

@@ -10,7 +10,7 @@ module Components
     # ## Example
     #
     # ```ruby
-    # render Components::Bulma::NavigationBar.new do |navbar|
+    # Bulma::NavigationBar() do |navbar|
     #   navbar.brand_item "My App", "/"
     #
     #   navbar.right do |menu|

data/lib/components/bulma/pagination.rb

@@ -19,7 +19,7 @@ module Components
     # @products = Product.page(params[:page]).per(20)
     #
     # # In the view:
-    # render Components::Bulma::Pagination.new(@products, ->(page) { products_path(page: page) })
+    # Bulma::Pagination(@products, ->(page) { products_path(page: page) })
     # ```
     #
     class Pagination < Components::Bulma::Base

data/lib/components/bulma/tab_components/content.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Components
+  module Bulma
+    module TabComponents
+      # # Content
+      #
+      # This component represents a single content section within the Bulma Tabs component.
+      #
+      # ## Arguments:
+      # - `id`: Unique identifier for the content.
+      # - `active`: Boolean indicating if the content is currently active.
+      # - `data_attributes_proc`: A proc that generates data attributes for the content.
+      class Content < Components::Bulma::Base
+        def initialize(id:, active:, data_attributes_proc: nil)
+          @id = id
+          @active = active
+          @data_attributes = data_attributes_proc ||
+                             Components::Bulma::Tabs::StimulusDataAttributes.new("bulma--tabs").method(:for_content)
+        end
+
+        def view_template(&)
+          div(id: @id,
+              class: @active ? "" : "is-hidden",
+              data: @data_attributes.call(@id), &)
+        end
+      end
+    end
+  end
+end

data/lib/components/bulma/tab_components/tab.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Components
+  module Bulma
+    module TabComponents
+      # # Tab
+      #
+      # This component represents a single tab within the Bulma Tabs component.
+      #
+      # The component can be used if you need to create or update a tab dynamically.
+      #
+      # ## Arguments
+      #
+      # - `id`: Unique identifier for the tab.
+      # - `title`: The text displayed on the tab.
+      # - `icon`: Optional icon to display on the tab.
+      # - `active`: Boolean indicating if the tab is currently active.
+      # - `data_attributes_proc`: A proc that generates data attributes for the tab.
+      class Tab < Components::Bulma::Base
+        def initialize(id:, title:, icon:, active:,
+                       data_attributes_proc: Components::Bulma::Tabs::StimulusDataAttributes.new("bulma--tabs").method(:for_tab))
+          @id = id
+          @title = title
+          @icon = icon
+          @active = active
+          @data_attributes_proc = data_attributes_proc
+        end
+
+        def view_template(&)
+          li(
+            id: "#{@id}-tab",
+            data: @data_attributes_proc.call(@id),
+            class: @active ? "is-active" : ""
+          ) do
+            a do
+              icon_span(@icon, "mr-1") if @icon
+              span { @title }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/components/bulma/table.rb

@@ -13,7 +13,7 @@ module Components
     # ```ruby
     # users = User.all
     #
-    # render Components::Bulma::Table.new(users) do |table|
+    # Bulma::Table(users) do |table|
     #   table.column "Name" do |user|
     #     user.full_name
     #   end
@@ -29,16 +29,16 @@ module Components
     # ```
     #
     class Table < Components::Bulma::Base
-      def initialize(rows, id = nil)
-        @id = id || rows.first&.model_name&.plural
+      def initialize(rows, id_or_options = nil, **options)
         @rows = rows
+        @id, @table_class = parse_id_and_options(id_or_options, options, rows)
         @columns = []
       end
 
       def view_template(&)
         vanish(&)
 
-        table(id: @id, class: "table is-fullwidth") do
+        table(id: @id, class: @table_class) do
           thead do
             @columns.each do |column|
               table_header(column)
@@ -63,12 +63,58 @@ module Components
         @columns << { header:, html_attributes:, content: }
       end
 
+      def date_column(header, format: "%Y-%m-%d", **html_attributes, &content)
+        column(header, **html_attributes) do |row|
+          content.call(row)&.strftime(format)
+        end
+      end
+
+      def conditional_icon(header, 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|
+          icon_span(icon_class) if content.call(row)
+        end
+      end
+
       def paginate(&path_builder)
         @path_builder = path_builder
       end
 
       private
 
+      def parse_id_and_options(id_or_options, options, rows)
+        if id_or_options.is_a?(String)
+          id = id_or_options
+          opts = options
+        else
+          opts = (id_or_options || {}).merge(options)
+          id = opts.delete(:id) || id_from_array_or_arel(rows)
+        end
+        table_class = "table #{parse_table_classes(opts)}"
+        [id, table_class]
+      end
+
+      def id_from_array_or_arel(rows)
+        if rows.respond_to? :model
+          rows.model.model_name.plural
+        elsif rows.empty?
+          "table"
+        else
+          rows.first.model_name.plural
+        end
+      rescue StandardError
+        "table"
+      end
+
+      def parse_table_classes(options)
+        options.slice(*%i[bordered striped narrow hoverable fullwidth])
+               .transform_keys { |key| "is-#{key}" }
+               .select { |_, value| value }
+               .keys
+               .join(" ")
+      end
+
       # this derives a th class from the column html attributes
       # perhaps a better way would be pre-defined pairs?
       def table_header(column)

data/lib/components/bulma/tabs.rb

@@ -8,10 +8,20 @@ module Components
     # interface, providing a way to toggle between different content sections using
     # tabbed navigation. Includes support for icons and active state management.
     #
+    # Classes can be assigned to either the tabs or contents wrappers. The tabs div is where Bulma
+    # options such as `is-boxed`, `is-centered`, or `is-small` can be added.
+    #
+    # Use method `right_content` to add content to the right of the tabs, such as a button.
+    #
+    # The tabs behavior can be managed by the data attributes provided by the `data_attributes_builder` argument. By
+    # default, this will use the `StimulusDataAttributes` class with the controller name `bulma--tabs`. That controller
+    # is not provided by this library, but you can create your own Stimulus controller to handle the tab switching
+    # logic. Here is [an implementation of a Stimulus controller for Bulma tabs](https://github.com/RockSolt/bulma-rails-helpers/blob/main/app/javascript/controllers/bulma/tabs_controller.js).
+    #
     # ## Example
     #
     # ```ruby
-    # render Components::Bulma::Tabs.new do |tabs|
+    # Bulma::Tabs() do |tabs|
     #   tabs.tab(id: "profile", title: "Profile", active: true) do
     #     "Profile content goes here"
     #   end
@@ -27,59 +37,82 @@ module Components
     # ```
     #
     class Tabs < Components::Bulma::Base
-      Tab = Data.define(:id, :title, :icon, :active)
-      Content = Data.define(:id, :block, :active)
+      StimulusDataAttributes = Data.define(:stimulus_controller) do
+        def for_container
+          { controller: stimulus_controller }
+        end
 
-      def initialize(stimulus_controller: "bulma--tabs")
-        @stimulus_controller = stimulus_controller
+        def for_tab(id)
+          {
+            target_key => "tab",
+            tab_content: id,
+            action: "click->#{stimulus_controller}#showTabContent"
+          }
+        end
+
+        def for_content(_id)
+          { target_key => "content" }
+        end
+
+        private
+
+        def target_key
+          "#{stimulus_controller}-target"
+        end
+      end
+
+      def initialize(id: nil, tabs_class: nil, contents_class: nil,
+                     data_attributes_builder: StimulusDataAttributes.new("bulma--tabs"))
+        @id = id || "tabs"
+        @tabs_class = tabs_class
+        @contents_class = contents_class
+        @data_attributes_builder = data_attributes_builder
         @tabs = []
         @contents = []
       end
 
-      def tab(id:, title:, icon: nil, active: false, &block)
-        @tabs << Tab.new(id:, title:, icon:, active:)
-        @contents << Content.new(id:, block:, active:)
+      def tab(id:, title:, icon: nil, active: false, &)
+        @tabs << TabComponents::Tab.new(id:, title:, icon:, active:,
+                                        data_attributes_proc: @data_attributes_builder.method(:for_tab))
+        @contents << TabComponents::Content.new(id:, active:,
+                                                data_attributes_proc: @data_attributes_builder.method(:for_content),
+                                                &)
+      end
+
+      def right_content(&content)
+        @right_content = content
       end
 
       def view_template(&)
         vanish(&)
 
-        div(data: { controller: @stimulus_controller }) do
-          div(class: "tabs is-boxed") do
-            ul do
-              @tabs.each do |tab|
-                li(
-                  id: "#{tab.id}-tab",
-                  data: {
-                    target_key => "tab",
-                    tab_content: tab.id,
-                    action: "click->#{@stimulus_controller}#showTabContent"
-                  },
-                  class: tab.active ? "is-active" : ""
-                ) do
-                  a do
-                    icon_span(tab.icon, "mr-1") if tab.icon
-                    span { tab.title }
-                  end
-                end
-              end
-            end
-          end
-
-          @contents.each do |content|
-            div(id: content.id,
-                class: content.active ? "" : "is-hidden",
-                data: { target_key => "content" }) do
-              content.block.call
-            end
-          end
+        div(id: @id, data: @data_attributes_builder.for_container) do
+          build_tabs_with_optional_right_content
+          div(id: "#{@id}-content", class: @contents_class) { build_content }
         end
       end
 
       private
 
-      def target_key
-        "#{@stimulus_controller}-target"
+      def build_tabs_with_optional_right_content
+        return build_tabs if @right_content.nil?
+
+        div(class: "columns") do
+          div(class: "column") { build_tabs }
+          div(class: "column is-narrow") { @right_content.call }
+        end
+      end
+
+      def build_tabs
+        div(class: "tabs #{@tabs_class}".strip) do
+          ul(id: "#{@id}-tabs") do
+            @tabs.each { render it }
+          end
+        end
+      end
+
+      def build_content
+        @contents.each { render it }
       end
     end
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Todd Kummer
@@ -23,6 +23,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 2.0.2
+- !ruby/object:Gem::Dependency
+  name: zeitwerk
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.7'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.7'
 - !ruby/object:Gem::Dependency
   name: actionpack
   requirement: !ruby/object:Gem::Requirement
@@ -90,6 +104,9 @@ files:
 - README.md
 - Rakefile
 - lib/bulma-phlex.rb
+- lib/bulma_phlex/rails/card_helper.rb
+- lib/bulma_phlex/rails/table_helper.rb
+- lib/bulma_phlex/railtie.rb
 - lib/bulma_phlex/version.rb
 - lib/components/bulma.rb
 - lib/components/bulma/base.rb
@@ -99,6 +116,8 @@ files:
 - lib/components/bulma/navigation_bar.rb
 - lib/components/bulma/navigation_bar_dropdown.rb
 - lib/components/bulma/pagination.rb
+- lib/components/bulma/tab_components/content.rb
+- lib/components/bulma/tab_components/tab.rb
 - lib/components/bulma/table.rb
 - lib/components/bulma/tabs.rb
 homepage: https://github.com/RockSolt/bulma-phlex