bulma-phlex 0.2.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9c9baf01284c1c12d06e389eb2871a7c9ada348d3611c26e74ce7d7f24136c83
-  data.tar.gz: baaee6a523f95e49507bb6a289b28301fb1d218284aee8cef960dc6b53baf559
+  metadata.gz: 15f8b354ec9106151e857e9fa274851fd8a25c05aab5bd6206418959e5e8201c
+  data.tar.gz: 01302d8221c498b716b2b840948011f17227906246718233c43b252dd385fd22
 SHA512:
-  metadata.gz: 24302ffbdc624f9b1041ff786d0a57aaf2d3fed7abc4d32096a9c50f861a48049bc9c6ffdf27dfcbfbd94e50d3569debc5898617b77fe9d00be34bc2b702f5bd
-  data.tar.gz: aaaa147076dfd55030ea1fd94adc9d4d71e0e05bc6bf8841eabe776d6633426142e06119635e6db68f9972df12369595c933e6fcba03845d7e0d326920ff271b
+  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
 
@@ -117,12 +117,12 @@ The [NavigationBar](https://bulma.io/documentation/components/navbar/) component
 ```ruby
 render Components::Bulma::NavigationBar.new do |navbar|
   navbar.brand_item "My App", "/"
-  
+
   navbar.left do |menu|
     menu.item "Home", "/"
     menu.item "Products", "/products"
   end
-  
+
   navbar.right do |menu|
     menu.item "About", "/about"
     menu.dropdown "Account" do |dropdown|
@@ -159,11 +159,11 @@ render Components::Bulma::Table.new(users) do |table|
   table.column "Name" do |user|
     user.full_name
   end
-  
+
   table.column "Email" do |user|
     user.email
   end
-  
+
   table.column "Actions" do |user|
     link_to "Edit", edit_user_path(user), class: "button is-small"
   end
@@ -174,22 +174,38 @@ 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
-  
+
   tabs.tab(id: "settings", title: "Settings", icon: "fas fa-cog") do
     "Settings content goes here"
   end
-  
+
   tabs.tab(id: "notifications", title: "Notifications", icon: "fas fa-bell") do
     "Notifications content goes here"
   end
 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.2.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,52 +37,83 @@ 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 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
+      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: "tabs" }) do
-          div(class: "tabs is-boxed") do
-            ul do
-              @tabs.each do |tab|
-                li(
-                  data: {
-                    tabs_target: "tab",
-                    tab_content: tab.id,
-                    action: "click->tabs#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
+        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
 
-          @contents.each do |content|
-            div(id: content.id,
-                class: content.active ? "" : "hidden",
-                data: { tabs_target: "content" }) do
-              content.block.call
-            end
+      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
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex
 version: !ruby/object:Gem::Version
-  version: 0.2.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