bulma-phlex 0.1.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2620ad41c7ce89502338d56c30bb4acd93b703a5b01b1a1f986fd2aebce48d45
-  data.tar.gz: 0b329df0e21b896499eebf35185360999429d47c7005cd1ceb4ca1741e88c446
+  metadata.gz: 5838ff317a395e9e57b33d45dad7f62c3a7820112a2453c35e9305e7a6ac19c1
+  data.tar.gz: 48988fd8c7210d47b0090d9d385fa6fce278d2ad6d47d10673aabf9e46034df8
 SHA512:
-  metadata.gz: 38d2b956a5af03c0c8f2cb25c8918306c5a50cd2a964f9d697ca267a76c90d343bf25688e84e0891a2031b645ecd96bc90bc2f663d295ea5f8ba1a1d8181ea83
-  data.tar.gz: c23098637f7dc239daedd3bfab2ae6fdfaf0978ac76c7f180f97ac461926017c92b0805c0b530c1ca1923b651024c13db16467e56f87984fb02b4a2fa99ae2a1
+  metadata.gz: 49c89b3e7e9aa630d01ce8ae14b0c35694d811533c37512e42d2d21dbcae83546a96e5ef0262b4078d9235d6cea73f3dcad529ed91c4dd0ccfda1eee1af040d4
+  data.tar.gz: 9840cfdb56b3af42f2a32c3717b985a29ef93d939444ceaef47545915e450e8717c543eff3f867946aacdaac45ca51dcd2845f0d53b3b61a3eaa594586964847

data/README.md

@@ -62,6 +62,35 @@ render Components::Bulma::Card.new do |card|
 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|
+  dropdown.link "View Profile", "/profile"
+  dropdown.link "Go to Settings", "/settings"
+  dropdown.divider
+  dropdown.item("This is just a text item")
+  dropdown.item do
+    div(class: "has-text-weight-bold") { "This is a bold item" }
+  end
+end
+```
+
+**Options:**
+
+- `label` (required): The dropdown button label.
+- `click`: Stimulus controller name for click-to-toggle (default: `"bulma--dropdown"`). Set to `false` for hoverable.
+- `alignment`: `:left` (default), `:right`, or `:up`.
+- `icon`: Icon class for the dropdown arrow (default: `"fas fa-angle-down"`).
+
+**Dropdown methods:**
+
+- `link(label, path)`: Adds a link item.
+- `item(content = nil, &block)`: Adds a custom item (string or block).
+- `divider`: Adds a divider line.
+
 ### Level
 
 The [Level](https://bulma.io/documentation/layout/level/) component provides a flexible horizontal layout system with left and right alignment.
@@ -88,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|
@@ -123,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
 
@@ -130,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
@@ -150,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.rb

@@ -6,6 +6,7 @@ require "bulma_phlex/version"
 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"

data/lib/bulma_phlex/version.rb

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

data/lib/components/bulma/dropdown.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module Components
+  module Bulma
+    # Dropdown component
+    #
+    # This component implements the [Bulma Dropdown](https://bulma.io/documentation/components/dropdown/).
+    #
+    # ## [Hoverable or Toggable](https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable)
+    #
+    # By default the dropdown is in Click Mode and assumes a Stimulus controller named `bulma--dropdown` is present to
+    # handle the click events. The controller name can be customized using the `click` option.
+    #
+    # Set click to `false` to make the dropdown hoverable instead of togglable.
+    #
+    # ## Alignment
+    #
+    # Use the `alignment` option to control the dropdown's alignment. By default, it aligns to the left. Pass in
+    # `:right` or `:up` to change the alignment.
+    #
+    # ## Icon
+    #
+    # Use the `icon` option to customize the dropdown's icon. By default, it uses the Font Awesome angle down icon.
+    #
+    # ## Example
+    #
+    # ```ruby
+    # render Components::Bulma::Dropdown.new("Next Actions...") do |dropdown|
+    #   dropdown.link "View Profile", "/profile"
+    #   dropdown.link "Go to Settings", "/settings"
+    #   dropdown.divider
+    #   dropdown.item("This is just a text item")
+    #   dropdown.item do
+    #     div(class: "has-text-weight-bold") { "This is a bold item" }
+    #   end
+    # end
+    # ```
+    #
+    class Dropdown < Components::Bulma::Base
+      def initialize(label, click: "bulma--dropdown", alignment: "left", icon: "fas fa-angle-down")
+        @label = label
+        @click = click
+        @alignment = alignment
+        @icon = icon
+      end
+
+      def view_template(&)
+        div(class: "dropdown #{"is-hoverable" unless @click} #{alignment_class}".strip, **stimulus_controller) do
+          div(class: "dropdown-trigger") do
+            button(
+              class: "button",
+              aria_haspopup: "true",
+              aria_controls: "dropdown-menu",
+              **stimulus_action
+            ) do
+              span { @label }
+              span(class: "icon is-small") do
+                i(class: @icon, aria_hidden: "true")
+              end
+            end
+          end
+
+          div(class: "dropdown-menu", id: "dropdown-menu", role: "menu") do
+            div(class: "dropdown-content", &)
+          end
+        end
+      end
+
+      def item(content = nil, &)
+        if block_given?
+          div(class: "dropdown-item", &)
+        else
+          div(class: "dropdown-item") { content }
+        end
+      end
+
+      def link(label, path)
+        a(class: "dropdown-item", href: path) { label }
+      end
+
+      def divider
+        hr(class: "dropdown-divider")
+      end
+
+      private
+
+      def alignment_class
+        case @alignment.to_sym
+        when :right
+          "is-right"
+        when :up
+          "is-up"
+        end
+      end
+
+      def stimulus_controller
+        return {} unless @click
+
+        { data: { controller: @click } }
+      end
+
+      def stimulus_action
+        return {} unless @click
+
+        { data: { action: "#{@click}#toggle" } }
+      end
+    end
+  end
+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.1.1
+  version: 0.3.0
 platform: ruby
 authors:
 - Todd Kummer
@@ -94,6 +94,7 @@ files:
 - lib/components/bulma.rb
 - lib/components/bulma/base.rb
 - lib/components/bulma/card.rb
+- lib/components/bulma/dropdown.rb
 - lib/components/bulma/level.rb
 - lib/components/bulma/navigation_bar.rb
 - lib/components/bulma/navigation_bar_dropdown.rb