bulma-phlex 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9c9baf01284c1c12d06e389eb2871a7c9ada348d3611c26e74ce7d7f24136c83
-  data.tar.gz: baaee6a523f95e49507bb6a289b28301fb1d218284aee8cef960dc6b53baf559
+  metadata.gz: 5838ff317a395e9e57b33d45dad7f62c3a7820112a2453c35e9305e7a6ac19c1
+  data.tar.gz: 48988fd8c7210d47b0090d9d385fa6fce278d2ad6d47d10673aabf9e46034df8
 SHA512:
-  metadata.gz: 24302ffbdc624f9b1041ff786d0a57aaf2d3fed7abc4d32096a9c50f861a48049bc9c6ffdf27dfcbfbd94e50d3569debc5898617b77fe9d00be34bc2b702f5bd
-  data.tar.gz: aaaa147076dfd55030ea1fd94adc9d4d71e0e05bc6bf8841eabe776d6633426142e06119635e6db68f9972df12369595c933e6fcba03845d7e0d326920ff271b
+  metadata.gz: 49c89b3e7e9aa630d01ce8ae14b0c35694d811533c37512e42d2d21dbcae83546a96e5ef0262b4078d9235d6cea73f3dcad529ed91c4dd0ccfda1eee1af040d4
+  data.tar.gz: 9840cfdb56b3af42f2a32c3717b985a29ef93d939444ceaef47545915e450e8717c543eff3f867946aacdaac45ca51dcd2845f0d53b3b61a3eaa594586964847

data/README.md

@@ -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|
@@ -152,6 +152,8 @@ 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
 
@@ -159,11 +161,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
@@ -179,11 +181,11 @@ render Components::Bulma::Tabs.new 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

data/lib/bulma_phlex/version.rb

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

data/lib/components/bulma/tabs.rb

@@ -30,7 +30,8 @@ module Components
       Tab = Data.define(:id, :title, :icon, :active)
       Content = Data.define(:id, :block, :active)
 
-      def initialize
+      def initialize(stimulus_controller: "bulma--tabs")
+        @stimulus_controller = stimulus_controller
         @tabs = []
         @contents = []
       end
@@ -43,15 +44,16 @@ module Components
       def view_template(&)
         vanish(&)
 
-        div(data: { controller: "tabs" }) do
+        div(data: { controller: @stimulus_controller }) do
           div(class: "tabs is-boxed") do
             ul do
               @tabs.each do |tab|
                 li(
+                  id: "#{tab.id}-tab",
                   data: {
-                    tabs_target: "tab",
+                    target_key => "tab",
                     tab_content: tab.id,
-                    action: "click->tabs#showTabContent"
+                    action: "click->#{@stimulus_controller}#showTabContent"
                   },
                   class: tab.active ? "is-active" : ""
                 ) do
@@ -66,13 +68,19 @@ module Components
 
           @contents.each do |content|
             div(id: content.id,
-                class: content.active ? "" : "hidden",
-                data: { tabs_target: "content" }) do
+                class: content.active ? "" : "is-hidden",
+                data: { target_key => "content" }) do
               content.block.call
             end
           end
         end
       end
+
+      private
+
+      def target_key
+        "#{@stimulus_controller}-target"
+      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.3.0
 platform: ruby
 authors:
 - Todd Kummer