plutonium 0.16.4 → 0.18.0

data/lib/plutonium/ui/nav_grid_menu.rb

@@ -0,0 +1,93 @@
+module Plutonium
+  module UI
+    # A responsive grid-based navigation menu component that displays a collection of Item
+    # components in a dropdown format. The menu includes a trigger button with an icon and a dropdown
+    # panel containing a grid of navigation items.
+    #
+    # @example Basic usage
+    #   render Plutonium::UI:NavGridMenu.new(label: "Resources", icon: Phlex::TablerIcons::Grid) do |menu|
+    #     menu.with_item(name: "Dashboard", icon: Phlex::TablerIcons::Dashboard, href: "/dashboard")
+    #     menu.with_item(name: "Settings", icon: Phlex::TablerIcons::Settings, href: "/settings")
+    #   end
+    #
+    class NavGridMenu < Plutonium::UI::Component::Base
+      include Phlex::Slotable
+
+      # A grid-based navigation menu item component that represents a single clickable item
+      # within a NavGridMenu. Each item consists of an icon and label that links to a specific URL.
+      #
+      # @example Basic usage
+      #   render Plutonium::UI::NavGridMenu::Item.new(
+      #     name: "Dashboard",
+      #     icon: "chart",
+      #     href: "/dashboard"
+      #   )
+      #
+      class Item < Plutonium::UI::Component::Base
+        def initialize(name:, icon:, href:)
+          @name = name
+          @icon = icon
+          @href = href
+        end
+
+        def view_template
+          a(
+            class: "block p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group",
+            href: @href
+          ) do
+            render @icon.new(
+              class: "text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400 w-8 h-8 mx-auto"
+            )
+            div(class: "text-sm text-gray-900 dark:text-white text-center") { @name }
+          end
+        end
+      end
+
+      # Defines the menu items slot collection
+      # @!method item
+      #   Renders a Item component
+      #   @yield The block containing the menu item content
+      slot :item, Item, collection: true
+
+      def initialize(label:, icon:)
+        @label = label
+        @icon = icon
+      end
+
+      def view_template
+        div(data: {controller: "resource-drop-down"}) do
+          render_trigger_button
+          render_dropdown_menu
+        end
+      end
+
+      private
+
+      def render_trigger_button
+        button(
+          type: "button",
+          data: {resource_drop_down_target: "trigger"},
+          class: "p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+        ) do
+          span(class: "sr-only") { "View #{@label}" }
+          render @icon.new(class: "w-6 h-6")
+        end
+      end
+
+      def render_dropdown_menu
+        div(
+          class: "hidden overflow-hidden z-50 my-4 max-w-sm text-base list-none bg-white divide-y divide-gray-100 shadow-lg dark:bg-gray-700 dark:divide-gray-600 rounded-xl",
+          data: {resource_drop_down_target: "menu"}
+        ) do
+          div(
+            class: "block py-2 px-4 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-600 dark:text-gray-300"
+          ) { @label }
+
+          div(class: "grid grid-cols-3 gap-4 p-4") do
+            item_slots.each { |item| render item }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/nav_user.rb

@@ -0,0 +1,121 @@
+module Plutonium
+  module UI
+    class NavUser < Plutonium::UI::Component::Base
+      include Phlex::Slotable
+
+      class SectionLink < Plutonium::UI::Component::Base
+        include Phlex::Slotable
+
+        slot :leading
+        slot :trailing
+
+        def initialize(label:, href:, **attributes)
+          @label = label
+          @href = href
+          @attributes = attributes
+        end
+
+        def view_template
+          a(
+            class: tokens(
+              "flex justify-between items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
+              @attributes.delete(:class)
+            ),
+            href: @href,
+            **@attributes
+          ) do
+            span(class: "flex items-center") do
+              render leading_slot if leading_slot
+              plain @label
+            end
+            render trailing_slot if trailing_slot?
+          end
+        end
+      end
+
+      class Section < Plutonium::UI::Component::Base
+        include Phlex::Slotable
+
+        slot :link, SectionLink, collection: true
+
+        def view_template
+          ul(
+            class: "text-gray-700 dark:text-gray-300",
+            aria: {labelledby: "user-nav-dropdown-toggle"}
+          ) do
+            link_slots.each do |link|
+              li { render link }
+            end
+          end
+        end
+      end
+
+      slot :section, Section, collection: true
+
+      def initialize(email:, name: nil, avatar_url: nil)
+        @email = email
+        @name = name
+        @avatar_url = avatar_url
+      end
+
+      def view_template
+        div(data: {controller: "resource-drop-down"}) do
+          render_trigger_button
+          render_dropdown_menu
+        end
+      end
+
+      private
+
+      def render_trigger_button
+        if @avatar_url.present?
+          render_avatar_button
+        else
+          render_default_button
+        end
+      end
+
+      def render_avatar_button
+        button(
+          type: "button",
+          class: "flex mx-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600",
+          aria: {expanded: "false"},
+          id: "user-nav-dropdown-toggle",
+          data: {resource_drop_down_target: "trigger"}
+        ) do
+          span(class: "sr-only") { "Open user menu" }
+          img(class: "w-8 h-8 rounded-full", src: @avatar_url, alt: "avatar")
+        end
+      end
+
+      def render_default_button
+        button(
+          type: "button",
+          class: "flex mx-3 text-sm border border-gray-600 text-gray-500 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600",
+          aria: {expanded: "false"},
+          id: "user-nav-dropdown-toggle",
+          data: {resource_drop_down_target: "trigger"}
+        ) do
+          span(class: "sr-only") { "Open user menu" }
+          render Phlex::TablerIcons::User.new(class: "w-6 h-6")
+        end
+      end
+
+      def render_dropdown_menu
+        div(
+          class: "hidden z-50 my-4 w-56 text-base list-none bg-white divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600 rounded-xl",
+          data: {resource_drop_down_target: "menu"}
+        ) do
+          div(class: "py-3 px-4") do
+            if @name.present?
+              span(class: "block text-sm font-semibold text-gray-900 dark:text-white") { @name }
+            end
+            span(class: "block text-sm text-gray-900 truncate dark:text-white") { @email }
+          end
+
+          section_slots.each { |section| render section }
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/panel.rb

@@ -34,7 +34,7 @@ module Plutonium
 
       def render_toolbar
         div(class: %(flex justify-between items-center mb-4)) do
-          if @title.present?
+          if @title
             h5(class: %(text-2xl font-bold tracking-tight text-gray-900 dark:text-white)) do
               @title
             end
@@ -52,7 +52,7 @@ module Plutonium
       end
 
       def render_toolbar?
-        @title || @items.present?
+        @title || @items
       end
 
       def render_content?

data/lib/plutonium/ui/sidebar_menu.rb

@@ -25,7 +25,7 @@ module Plutonium
             item_span: "flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
 
             # Label and content styles
-            item_label: "flex-1 ml-3 text-left whitespace-nowrap",
+            item_label: ->(depth) { "flex-1 #{(depth > 0) ? "ml-9" : "ml-3"} text-left whitespace-nowrap" },
 
             # Badge styles
             leading_badge: "inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-800 bg-primary-100 dark:bg-primary-200 dark:text-primary-800",
@@ -50,9 +50,22 @@ module Plutonium
 
       protected
 
+      def render_items(items, depth = 0)
+        return if depth >= @max_depth || items.empty?
+
+        if depth.zero?
+          ul(class: themed(:items_container, depth)) do
+            items.each { |item| render_item_wrapper(item, depth) }
+          end
+        else
+          ul(class: themed(:sub_items_container, depth), data: {"resource-collapse-target": "menu"}) do
+            items.each { |item| render_item_wrapper(item, depth) }
+          end
+        end
+      end
+
       # def render_items(items, depth = 0)
       #   return if depth >= @max_depth
-      #   return if items.empty?
 
       #   if depth.zero?
       #     ul(class: themed(:items_container, depth)) do
@@ -63,9 +76,9 @@ module Plutonium
       #   else
       #     # Use collapsible rendering for nested levels
       #     ul(
-      #       id: generate_menu_id(items.first&.options&.dig(:parent)),
+      #       id: generate_menu_id(:root),
       #       class: themed(:sub_items_container, depth),
-      #       data: { "resource-collapse-target": "menu" }
+      #       data: {"resource-collapse-target": "menu"}
       #     ) do
       #       items.each do |item|
       #         render_item_wrapper(item, depth)
@@ -83,10 +96,6 @@ module Plutonium
         if nested?(item, depth)
           wrapper_attrs[:data][:controller] = "resource-collapse"
           wrapper_attrs[:data]["resource-collapse-active-class"] = themed(:collapse_icon_expanded)
-          wrapper_attrs[:id] = generate_item_id(item)
-
-          # # Store parent reference for nested items
-          # item.items.each { |child| child.options[:parent] = item }
         end
 
         li(**wrapper_attrs) do
@@ -103,28 +112,15 @@ module Plutonium
         end
       end
 
-      # def render_item_link(item, depth)
-      #   if item.url
-      #     a(href: item.url, class: themed(:item_link, depth)) do
-      #       render_item_interior(item, depth)
-      #     end
-      #   else
-      #     span(class: themed(:item_span, depth)) do
-      #       render_item_interior(item, depth)
-      #     end
-      #   end
-      # end
-
       def render_collapsible_button(item, depth)
         button(
           type: "button",
           class: themed(:item_span, depth),
           data: {
             "resource-collapse-target": "trigger",
-            "action": "resource-collapse#toggle"
+            action: "resource-collapse#toggle"
           },
           aria: {
-            controls: generate_menu_id(item),
             expanded: "false"
           }
         ) do
@@ -139,7 +135,7 @@ module Plutonium
           fill: "currentColor",
           viewBox: "0 0 20 20",
           xmlns: "http://www.w3.org/2000/svg",
-          aria: { hidden: true }
+          aria: {inert: true}
         ) do |s|
           s.path(
             fill_rule: "evenodd",
@@ -148,22 +144,6 @@ module Plutonium
           )
         end
       end
-
-      private
-
-      def generate_item_id(item)
-        "sidebar-menu-item-#{item.label.to_s.parameterize}"
-      end
-
-      def generate_menu_id(item)
-        # return nil unless item
-        "#{generate_item_id(item)}-menu"
-      end
-
-      # # Override to disable active state for turbo-permanent compatibility
-      # def active_class(item, depth = 0)
-      #   nil
-      # end
     end
   end
 end

data/lib/plutonium/ui/tab_list.rb

@@ -0,0 +1,73 @@
+module Plutonium
+  module UI
+    class TabList < Plutonium::UI::Component::Base
+      class TabDefinition
+      end
+
+      def initialize(...)
+        super
+
+        @tabs = []
+      end
+
+      def with_tab(identifier:, title:, &block)
+        @tabs << {identifier:, title:, block:}
+      end
+
+      def render?
+        @tabs.present?
+      end
+
+      def view_template
+        div(
+          data_controller: "resource-tab-list",
+          data_resource_tab_list_active_classes_value: "focus:outline-none text-primary-600 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-500 border-primary-600 dark:border-primary-500",
+          data_resource_tab_list_in_active_classes_value: "dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
+        ) do
+          div(class: "mb-4 border-b border-gray-200 dark:border-gray-700") do
+            ul(
+              class: "flex flex-wrap -mb-px text-sm font-medium text-center space-x-2",
+              role: "tablist"
+            ) do
+              @tabs.each do |tab|
+                li(role: "presentation") do
+                  button(
+                    class: "inline-block p-4 border-b-2 rounded-t-lg",
+                    id: "#{tab[:identifier]}-tab",
+                    type: "button",
+                    role: "tab",
+                    aria_controls: "#{tab[:identifier]}-tabpanel",
+                    aria_selected: "false",
+                    data_resource_tab_list_target: "btn",
+                    data_target: "#{tab[:identifier]}-tabpanel",
+                    data_action: "click->resource-tab-list#select"
+                  ) do
+                    phlexi_render tab[:title] do |val|
+                      plain val
+                    end
+                  end
+                end
+              end
+            end
+          end
+
+          div do
+            @tabs.each do |tab|
+              div(
+                hidden: true,
+                id: "#{tab[:identifier]}-tabpanel",
+                role: "tabpanel",
+                aria_labelledby: "#{tab[:identifier]}-tab",
+                data_resource_tab_list_target: "tab"
+              ) do
+                phlexi_render tab[:block] do |val|
+                  raise NotImplementedError, "this should NEVER be triggered"
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/base.rb

@@ -6,7 +6,13 @@ module Plutonium
       class Base < Phlexi::Table::Base
         include Plutonium::UI::Component::Behaviour
 
-        class Display < Plutonium::UI::Display::Base; end
+        class Display < Plutonium::UI::Display::Base
+          class Builder < Builder
+            def attachment_tag(**, &)
+              create_component(Plutonium::UI::Table::Components::Attachment, :attachment, **, &)
+            end
+          end
+        end
       end
     end
   end

data/lib/plutonium/ui/table/components/attachment.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class Attachment < Phlexi::Display::Components::Base
+          include Phlexi::Display::Components::Concerns::DisplaysValue
+          include Plutonium::UI::Component::Methods
+
+          def render_value(value)
+            attachment = value
+            return unless attachment&.url.present?
+
+            render_thumbnail(attachment)
+          end
+
+          private
+
+          def render_thumbnail(attachment)
+            div(
+              class: "w-24 h-24 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 transition-all duration-300",
+              data: {
+                controller: "attachment-preview",
+                attachment_preview_mime_type_value: attachment.content_type,
+                attachment_preview_thumbnail_url_value: attachment_thumbnail_url(attachment),
+                attachment_preview_target: "thumbnail"
+              },
+              title: attachment.filename
+            ) do
+              a(
+                href: attachment.url,
+                class: "block aspect-square overflow-hidden rounded-lg",
+                target: :blank,
+                data: {
+                  attachment_preview_target: "thumbnailLink"
+                }
+              ) do
+                thumbnail_url = attachment_thumbnail_url(attachment)
+                if thumbnail_url
+                  img(
+                    src: thumbnail_url,
+                    class: "w-full h-full object-cover"
+                  )
+                else
+                  div(
+                    class: "w-full h-full flex items-center justify-center text-gray-500 dark:text-gray-400 font-mono"
+                  ) do
+                    ".#{attachment_extension(attachment)}"
+                  end
+                end
+              end
+            end
+          end
+
+          def attachment_thumbnail_url(attachment)
+            attachment.url if attachment.representable?
+          end
+
+          def attachment_extension(attachment)
+            attachment.try(:extension) || File.extname(attachment.filename.to_s)
+          end
+
+          def normalize_value(value)
+            value
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/pagy_info.rb

@@ -39,9 +39,17 @@ module Plutonium
             temp_attributes.delete("onchange")
             Phlex::HTML.const_set(:EVENT_ATTRIBUTES, temp_attributes)
 
-            div(class: "flex items-center space-x-2 mt-2 md:mt-0") do
-              label(for: "perPage", class: "mr-2") { "Per page" }
-              select(id: "perPage", name: "items", class: select_classes, onchange: "window.location.href=this.value") do
+            div(
+              class: "flex items-center space-x-2 mt-2 md:mt-0",
+              data_controller: "select-navigator"
+            ) do
+              id = "perPage#{SecureRandom.hex}"
+              label(for: id, class: "mr-2") { "Per page" }
+              select(
+                id: id, name: "items", class: select_classes,
+                data_action: "change->select-navigator#navigate",
+                data_select_navigator_target: "select"
+              ) do
                 @per_page_options.each do |option|
                   option(value: page_url(option), selected: option == @pagy.limit) { option.to_s }
                 end
@@ -53,7 +61,7 @@ module Plutonium
           end
 
           def select_classes
-            "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 min-w-[5em]"
           end
 
           def page_url(limit)

data/lib/plutonium/ui/table/components/pagy_pagination.rb

@@ -30,7 +30,7 @@ module Plutonium
                   render Phlex::TablerIcons::ChevronLeft.new
                 }
               else
-                a(href: "#", class: disabled_link_classes(true), aria_disabled: "true") {
+                button(class: disabled_link_classes(true), aria_disabled: "true") {
                   render Phlex::TablerIcons::ChevronLeft.new
                 }
               end
@@ -44,7 +44,7 @@ module Plutonium
                   render Phlex::TablerIcons::ChevronRight.new
                 }
               else
-                a(href: "#", class: disabled_link_classes(false, true), aria_disabled: "true") {
+                button(class: disabled_link_classes(false, true), aria_disabled: "true") {
                   render Phlex::TablerIcons::ChevronRight.new
                 }
               end
@@ -71,11 +71,11 @@ module Plutonium
           end
 
           def current_page_link(page)
-            a(href: "#", class: current_link_classes, aria_current: "page") { page.to_s }
+            button(class: current_link_classes, aria_current: "page") { page.to_s }
           end
 
           def gap_link
-            a(href: "#", class: link_classes, aria_disabled: "true") { "..." }
+            button(class: link_classes, aria_disabled: "true") { "..." }
           end
 
           def link_classes(first = false, last = false)
@@ -86,7 +86,7 @@ module Plutonium
           end
 
           def current_link_classes
-            "flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+            "flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white cursor-not-allowed"
           end
 
           def disabled_link_classes(first = false, last = false)

data/lib/plutonium/ui/table/display_theme.rb

@@ -13,7 +13,8 @@ module Plutonium
             color_indicator: "w-10 h-10 rounded-full mr-2",
             email: "flex items-center text-primary-600 dark:text-primary-500 whitespace-nowrap",
             phone: "flex items-center text-primary-600 dark:text-primary-500 whitespace-nowrap",
-            json: " whitespace-pre font-mono shadow-inner p-4"
+            json: " whitespace-pre font-mono shadow-inner p-4",
+            attachment_value_wrapper: "flex flex-wrap gap-1"
           })
         end
       end

data/lib/plutonium/ui/table/resource.rb

@@ -44,32 +44,31 @@ module Plutonium
         def render_table
           render Plutonium::UI::Table::Base.new(collection) do |table|
             @resource_fields.each do |name|
-              # column :name, as: :string
+              # field :name, as: :string
               # column :description, class: "text-red-700"
               # column :age, align: :end
               # column :dob do |proxy|
               #   proxy.field(:dob).date_tag
               # end
 
+              field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options].dup : {}
+
               column_definition = resource_definition.defined_columns[name] || {}
-              column_display_options = column_definition[:options] || {}
+              column_options = column_definition[:options] || {}
 
-              display_tag = column_display_options[:as]
-              display_tag_options = column_display_options.except(:as, :align)
-              display_tag_block = column_definition[:block] || ->(wrapped_object, key) {
+              tag = column_options[:as] || field_options[:as]
+              tag_attributes = column_options.except(:wrapper, :as, :align)
+              tag_block = column_definition[:block] || ->(wrapped_object, key) {
                 f = wrapped_object.field(key)
-                display_tag ||= f.inferred_field_component
-                f.send(:"#{display_tag}_tag", **display_tag_options)
+                tag ||= f.inferred_field_component
+                f.send(:"#{tag}_tag", **tag_attributes)
               }
 
-              # align_field_to = column_display_options.slice(:align)
-              field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options].dup : {}
-              field_options = field_options.merge(**column_display_options.slice(:align))
-              # field_options[:align] = align_field_to if align_field_to
+              field_options = field_options.merge(**column_options.slice(:align))
               table.column name,
                 **field_options,
                 sort_params: current_query_object.sort_params_for(name),
-                &display_tag_block
+                &tag_block
             end
 
             table.actions do |wrapped_object|

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.16.4"
+  VERSION = "0.18.0"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0