plutonium 0.12.7 → 0.12.9

data/app/views/components/resource_layout/resource_layout_component.rb

@@ -9,9 +9,9 @@ module PlutoniumUi
 
     option :page_title
     option :lang
-    option :body_classname, default: -> { "antialiased min-h-screen w-full bg-gray-50 dark:bg-gray-900" }
-    option :main_classname, default: -> { "p-4" }
-    option :header_adjustment, default: -> { "pt-20 min-h-screen w-full" }
+    option :body_classname, default: -> { "antialiased min-h-screen bg-gray-50 dark:bg-gray-900" }
+    option :main_classname, default: -> { "p-4 min-h-screen" }
+    option :header_adjustment, default: -> { "pt-20" }
     option :sidebar_adjustment, default: -> { "lg:ml-64" }
     option :default_turbo_tag, default: -> { true }
     option :default_fonts_tag, default: -> { true }

data/app/views/components/sidebar/sidebar_component.html.erb

@@ -8,7 +8,7 @@
     <%= content %>
   </div>
 
-  <div class="hidden absolute bottom-0 left-0 justify-center p-4 space-x-4 w-full lg:flex bg-white dark:bg-gray-800 z-20">
+  <div class="hidden absolute bottom-0 left-0 justify-center p-4 space-x-4 w-full lg:flex bg-white dark:bg-gray-800 z-20 border-r border-gray-200 dark:border-gray-700">
     <div data-controller="resource-drop-down">
       <button
         type="button"

data/app/views/components/sidebar/sidebar_component.rb

@@ -3,11 +3,11 @@ module PlutoniumUi
     private
 
     def sidebar_class
-      "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full bg-white border-r border-gray-200 lg:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
+      "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full lg:translate-x-0"
     end
 
     def sidebar_container_class
-      "overflow-y-auto py-5 px-3 h-full bg-white dark:bg-gray-800"
+      "overflow-y-auto py-5 px-3 h-full bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700"
     end
   end
 end

data/app/views/components/sidebar_menu_item/sidebar_menu_item_component.html.erb

@@ -3,10 +3,10 @@
     <button
       type="button"
       class="<%= link_button_class %> w-full transition duration-75"
-      data-resource-drop-down-target="trigger"
-      aria-controls="dropdown-<%= name.parameterize %>">
+      data-resource-collapse-target="trigger"
+      aria-controls="side-menu-item-<%= name.parameterize %>">
       <% if icon.present? %>
-        <%= render_icon icon, size: :lg %>
+        <%= render_icon icon, size: :lg, classname: icon_class %>
       <% else %>
         <div class="shrink-0 w-6 h-6">
           &nbsp;
@@ -28,7 +28,7 @@
       </svg>
     </button>
 
-    <ul id="dropdown-<%= name.parameterize %>" data-resource-drop-down-target="menu" class="hidden py-2 space-y-2">
+    <ul id="side-menu-item-<%= name.parameterize %>" data-resource-collapse-target="menu" class="hidden py-2 space-y-2">
       <% sub_items.each do |sub_item| %>
         <%#= sub_item %>
         <li>
@@ -43,9 +43,9 @@
   <% else %>
     <a
       href="<%= url %>"
-      class="<%= link_button_class %>">
+      class="<%= link_link_class %>">
       <% if icon.present? %>
-        <%= render_icon icon, size: :lg %>
+        <%= render_icon icon, size: :lg, classname: icon_class %>
       <% else %>
         <div class="shrink-0 w-6 h-6">
           &nbsp;

data/app/views/components/sidebar_menu_item/sidebar_menu_item_component.rb

@@ -14,21 +14,27 @@ module PlutoniumUi
       {
         id: "sidebar-menu-item-#{name.parameterize}",
         classname: "sidebar-menu-item",
-        controller: ["sidebar-menu-item", sub_items.any? ? "resource-drop-down" : nil],
-        link_button_class: "group flex items-center rounded-lg p-2 text-base font-medium text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
+        controller: ["sidebar-menu-item", sub_items.any? ? "resource-collapse" : nil],
+        link_button_class: "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",
+        link_link_class: "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group",
         link_label_class: "flex-1 ml-3 text-left whitespace-nowrap",
-        sub_link_button_class: "flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+        sub_link_button_class: "flex items-center p-2 pl-11 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",
+        icon_class: "text-gray-400 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
       }
     end
 
     def filtered_attributes
-      %i[link_button_class link_label_class sub_link_button_class]
+      %i[link_button_class link_label_class sub_link_button_class link_link_class icon_class]
     end
 
     def link_button_class
       raw_attributes_hash[:link_button_class]
     end
 
+    def link_link_class
+      raw_attributes_hash[:link_link_class]
+    end
+
     def link_label_class
       raw_attributes_hash[:link_label_class]
     end
@@ -36,6 +42,10 @@ module PlutoniumUi
     def sub_link_button_class
       raw_attributes_hash[:sub_link_button_class]
     end
+
+    def icon_class
+      raw_attributes_hash[:icon_class]
+    end
   end
 end
 

data/lib/plutonium/version.rb

@@ -1,3 +1,3 @@
 module Plutonium
-  VERSION = "0.12.7"
+  VERSION = "0.12.9"
 end

data/src/js/controllers/register_controllers.js

@@ -16,6 +16,7 @@ import TableToolbarController from "./table_toolbar_controller.js"
 import TableController from "./table_controller.js"
 import FormController from "./form_controller.js"
 import ResourceDropDownController from "./resource_drop_down_controller.js"
+import ResourceCollapseController from "./resource_collapse_controller.js"
 import ResourceDismissController from "./resource_dismiss_controller.js"
 import FrameNavigatorController from "./frame_navigator_controller.js"
 import ColorModeController from "./color_mode_controller.js"
@@ -39,6 +40,7 @@ export default function (application) {
   application.register("table", TableController)
   application.register("form", FormController)
   application.register("resource-drop-down", ResourceDropDownController)
+  application.register("resource-collapse", ResourceCollapseController)
   application.register("resource-dismiss", ResourceDismissController)
   application.register("frame-navigator", FrameNavigatorController)
   application.register("color-mode", ColorModeController)

data/src/js/controllers/resource_collapse_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+import { Collapse } from 'flowbite';
+
+
+// Connects to data-controller="resource-collapse"
+export default class extends Controller {
+  static targets = ["trigger", "menu"]
+
+  connect() {
+    console.log(`resource-collapse connected: ${this.element}`)
+
+    this.collapse = new Collapse(this.menuTarget, this.triggerTarget);
+  }
+
+  disconnect() {
+    this.collapse = null
+  }
+
+  toggle() {
+    this.collapse.toggle()
+  }
+
+  show() {
+    this.collapse.show()
+  }
+
+  hide() {
+    this.collapse.hide()
+  }
+}

data/src/js/controllers/resource_drop_down_controller.js

@@ -26,6 +26,6 @@ export default class extends Controller {
   }
 
   hide() {
-    this.dropdown.show()
+    this.dropdown.hide()
   }
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.12.7
+  version: 0.12.9
 platform: ruby
 authors:
 - Stefan Froelich
@@ -1135,6 +1135,7 @@ files:
 - src/js/controllers/nav_user_section_controller.js
 - src/js/controllers/nested_resource_form_fields_controller.js
 - src/js/controllers/register_controllers.js
+- src/js/controllers/resource_collapse_controller.js
 - src/js/controllers/resource_dismiss_controller.js
 - src/js/controllers/resource_drop_down_controller.js
 - src/js/controllers/resource_header_controller.js