bulma-phlex 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5838ff317a395e9e57b33d45dad7f62c3a7820112a2453c35e9305e7a6ac19c1
-  data.tar.gz: 48988fd8c7210d47b0090d9d385fa6fce278d2ad6d47d10673aabf9e46034df8
+  metadata.gz: 15f8b354ec9106151e857e9fa274851fd8a25c05aab5bd6206418959e5e8201c
+  data.tar.gz: 01302d8221c498b716b2b840948011f17227906246718233c43b252dd385fd22
 SHA512:
-  metadata.gz: 49c89b3e7e9aa630d01ce8ae14b0c35694d811533c37512e42d2d21dbcae83546a96e5ef0262b4078d9235d6cea73f3dcad529ed91c4dd0ccfda1eee1af040d4
-  data.tar.gz: 9840cfdb56b3af42f2a32c3717b985a29ef93d939444ceaef47545915e450e8717c543eff3f867946aacdaac45ca51dcd2845f0d53b3b61a3eaa594586964847
+  metadata.gz: 42078a30c124dc2fbc1ad6342034474204ceca1371b0d1a3394d47940926e5a42c7f44e83bab0cd9a54f24ad56860a5bbbd5f38ad72f4531ba809e0f71899cd5
+  data.tar.gz: 98dd7ea99a81ad71302ca5ca78fe2a915c083f6f7f20f520a7cdc2e004768bece733f6650ce9fe064033728877c790b8b75cbf5865d6044d0137a683c0f3ad65

data/README.md

@@ -4,7 +4,7 @@
 
 # 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.
 
 ## Installation
 
@@ -152,8 +152,6 @@ render Components::Bulma::Pagination.new(@products, ->(page) { products_path(pag
 
 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
 
@@ -176,8 +174,10 @@ end
 
 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|
+render Components::Bulma::Tabs.new(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 +192,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.

data/lib/bulma-phlex.rb

@@ -13,3 +13,5 @@ require "components/bulma/navigation_bar"
 require "components/bulma/pagination"
 require "components/bulma/table"
 require "components/bulma/tabs"
+require "components/bulma/tab_components/content"
+require "components/bulma/tab_components/tab"

data/lib/bulma_phlex/version.rb

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

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

@@ -30,7 +30,7 @@ module Components
     #
     class Table < Components::Bulma::Base
       def initialize(rows, id = nil)
-        @id = id || rows.first&.model_name&.plural
+        @id = id || id_from_array_or_arel(rows)
         @rows = rows
         @columns = []
       end
@@ -69,6 +69,16 @@ module Components
 
       private
 
+      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
+      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,6 +8,16 @@ 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
@@ -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.4.0
 platform: ruby
 authors:
 - Todd Kummer
@@ -99,6 +99,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