plutonium 0.15.13 → 0.15.15

data/lib/plutonium/ui/layout/sidebar.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Layout
+      # A sidebar navigation component that provides a responsive layout with light/dark mode toggle
+      # @example Basic usage with navigation content
+      #   render Sidebar.new do
+      #     ...
+      #   end
+      class Sidebar < Base
+        include Phlex::Slotable
+
+        # Renders the sidebar navigation template
+        # @yield [void] The block containing sidebar content
+        # @return [void]
+        def view_template(&)
+          render_sidebar_container do
+            render_content(&) if block_given?
+            render_color_mode_controls
+          end
+        end
+
+        private
+
+        # @private
+        def render_sidebar_container(&)
+          aside(
+            id: "sidebar-navigation",
+            aria: {label: "Sidebar Navigation"},
+            data: {controller: :sidebar},
+            class: "fixed top-0 left-0 z-40 w-64 h-screen pt-14 transition-transform -translate-x-full lg:translate-x-0",
+            &
+          )
+        end
+
+        # @private
+        def render_content(&)
+          div(
+            id: "sidebar-navigation-content",
+            data: {turbo_permanent: true},
+            class: "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
+
+        # @private
+        def render_color_mode_controls
+          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") do
+            render ColorModeSelector.new
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -94,7 +94,7 @@ module Plutonium
         end
 
         def render_footer
-          div(class: "sticky dyna:static bottom-[-2px] mt-1 p-4 pb-6 w-full z-50 bg-gray-50 dark:bg-gray-900") {
+          div(class: "lg:sticky lg:dyna:static bottom-[-2px] mt-1 p-4 pb-6 w-full z-30 bg-gray-50 dark:bg-gray-900") {
             TableInfo(pagy_instance)
             TablePagination(pagy_instance)
           }

data/lib/plutonium/version.rb

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

data/lib/plutonium.rb

@@ -10,7 +10,7 @@ require "phlexi-form"
 require "phlexi-table"
 
 require_relative "plutonium/configuration"
-require_relative "rodauth/loader"
+require_relative "rodauth/plugins" if defined?(Rodauth)
 
 # Plutonium module
 #

data/lib/rodauth/features/case_insensitive_login.rb

@@ -1,15 +1,21 @@
 require "rodauth"
 
+# A plugin to enable case insensitive logins on Rodauth.
+# It does that by downcasing any login inputs.
+# Should not be enabled on existing installations unless logins are downcased in the database.
+# See https://github.com/jeremyevans/rodauth/discussions/451
 module Rodauth
   Feature.define(:case_insensitive_login, :CaseInsensitiveLogin) do
     def param(key)
-      value = super
-      value&.downcase! if [login_param, login_confirm_param].include?(key)
-      value
+      if [login_param, login_confirm_param].include?(key)
+        super.downcase
+      else
+        super
+      end
     end
 
     def account_from_login(login)
-      super(login&.downcase)
+      super(login.downcase)
     end
   end
 end

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@radioactive-labs/plutonium",
-      "version": "0.1.7",
+      "version": "0.1.8",
       "license": "MIT",
       "dependencies": {
         "@hotwired/stimulus": "^3.2.2",

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",

data/src/js/controllers/header_controller.js

@@ -0,0 +1,184 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["open", "close"]
+  static outlets = ["sidebar"]
+  static values = {
+    placement: { type: String, default: "left" },
+    bodyScrolling: { type: Boolean, default: false },
+    backdrop: { type: Boolean, default: true },
+    edge: { type: Boolean, default: false },
+    edgeOffset: { type: String, default: "bottom-[60px]" }
+  }
+  static classes = {
+    backdrop: "bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"
+  }
+
+  initialize() {
+    this.visible = false
+    this.handleEscapeKey = this.handleEscapeKey.bind(this)
+  }
+
+  connect() {
+    document.addEventListener("keydown", this.handleEscapeKey)
+  }
+
+  sidebarOutletConnected() {
+    this.#setupDrawer(this.sidebarOutlet.element)
+  }
+
+  disconnect() {
+    this.#removeBackdrop()
+    document.removeEventListener("keydown", this.handleEscapeKey)
+    if (!this.bodyScrollingValue) {
+      document.body.classList.remove("overflow-hidden")
+    }
+  }
+
+  #setupDrawer(drawerElement) {
+    drawerElement.setAttribute("aria-hidden", "true")
+    drawerElement.classList.add("transition-transform")
+
+    // Add base placement classes
+    this.#getPlacementClasses(this.placementValue).base.forEach(className => {
+      drawerElement.classList.add(className)
+    })
+  }
+
+  toggleDrawer() {
+    this.visible ? this.hideDrawer() : this.showDrawer()
+  }
+
+  showDrawer() {
+    if (this.edgeValue) {
+      this.#toggleEdgePlacementClasses(`${this.placementValue}-edge`, true)
+    } else {
+      this.#togglePlacementClasses(this.placementValue, true)
+    }
+
+    // Toggle visibility and ARIA attributes of icons
+    this.openTarget.classList.add("hidden")
+    this.openTarget.setAttribute("aria-hidden", "true")
+
+    this.closeTarget.classList.remove("hidden")
+    this.closeTarget.setAttribute("aria-hidden", "false")
+
+    // Rest of the method stays same...
+    this.sidebarOutlet.element.setAttribute("aria-modal", "true")
+    this.sidebarOutlet.element.setAttribute("role", "dialog")
+    this.sidebarOutlet.element.removeAttribute("aria-hidden")
+
+    if (!this.bodyScrollingValue) {
+      document.body.classList.add("overflow-hidden")
+    }
+
+    if (this.backdropValue) {
+      this.#createBackdrop()
+    }
+
+    this.visible = true
+    this.dispatch("show")
+  }
+
+  hideDrawer() {
+    if (this.edgeValue) {
+      this.#toggleEdgePlacementClasses(`${this.placementValue}-edge`, false)
+    } else {
+      this.#togglePlacementClasses(this.placementValue, false)
+    }
+
+    // Toggle visibility and ARIA attributes of icons
+    this.openTarget.classList.remove("hidden")
+    this.openTarget.setAttribute("aria-hidden", "false")
+
+    this.closeTarget.classList.add("hidden")
+    this.closeTarget.setAttribute("aria-hidden", "true")
+
+    // Rest of the method stays same...
+    this.sidebarOutlet.element.setAttribute("aria-hidden", "true")
+    this.sidebarOutlet.element.removeAttribute("aria-modal")
+    this.sidebarOutlet.element.removeAttribute("role")
+
+    if (!this.bodyScrollingValue) {
+      document.body.classList.remove("overflow-hidden")
+    }
+
+    if (this.backdropValue) {
+      this.#removeBackdrop()
+    }
+
+    this.visible = false
+    this.dispatch("hide")
+  }
+
+  handleEscapeKey(event) {
+    if (event.key === "Escape" && this.visible) {
+      this.hideDrawer()
+    }
+  }
+
+  #createBackdrop() {
+    if (!this.visible) {
+      const backdrop = document.createElement("div")
+      backdrop.setAttribute("data-drawer-backdrop", "")
+      backdrop.classList.add(...this.constructor.classes.backdrop.split(" "))
+      backdrop.addEventListener("click", () => this.hideDrawer())
+      document.body.appendChild(backdrop)
+    }
+  }
+
+  #removeBackdrop() {
+    const backdrop = document.querySelector("[data-drawer-backdrop]")
+    if (backdrop) {
+      backdrop.remove()
+    }
+  }
+
+  #getPlacementClasses(placement) {
+    const placements = {
+      top: {
+        base: ["top-0", "left-0", "right-0"],
+        active: ["transform-none"],
+        inactive: ["-translate-y-full"]
+      },
+      right: {
+        base: ["right-0", "top-0"],
+        active: ["transform-none"],
+        inactive: ["translate-x-full"]
+      },
+      bottom: {
+        base: ["bottom-0", "left-0", "right-0"],
+        active: ["transform-none"],
+        inactive: ["translate-y-full"]
+      },
+      left: {
+        base: ["left-0", "top-0"],
+        active: ["transform-none"],
+        inactive: ["-translate-x-full"]
+      },
+      "bottom-edge": {
+        base: ["left-0", "top-0"],
+        active: ["transform-none"],
+        inactive: ["translate-y-full", this.edgeOffsetValue]
+      }
+    }
+
+    return placements[placement] || placements.left
+  }
+
+  #togglePlacementClasses(placement, show) {
+    const classes = this.#getPlacementClasses(placement)
+
+    if (show) {
+      classes.active.forEach(c => this.sidebarOutlet.element.classList.add(c))
+      classes.inactive.forEach(c => this.sidebarOutlet.element.classList.remove(c))
+    } else {
+      classes.active.forEach(c => this.sidebarOutlet.element.classList.remove(c))
+      classes.inactive.forEach(c => this.sidebarOutlet.element.classList.add(c))
+    }
+  }
+
+  #toggleEdgePlacementClasses(placement, show) {
+    this.#togglePlacementClasses(placement, show)
+  }
+}

data/src/js/controllers/register_controllers.js

@@ -5,9 +5,10 @@ import NavGridMenuController from "./nav_grid_menu_controller.js"
 import NavUserSectionController from "./nav_user_section_controller.js"
 import NavUserLinkController from "./nav_user_link_controller.js"
 import NavUserController from "./nav_user_controller.js"
-import ResourceHeaderController from "./resource_header_controller.js"
+import HeaderController from "./header_controller.js"
 import SidebarMenuItemController from "./sidebar_menu_item_controller.js"
 import SidebarMenuController from "./sidebar_menu_controller.js"
+import SidebarController from "./sidebar_controller.js"
 import HasManyPanelController from "./has_many_panel_controller.js"
 import NestedResourceFormFieldsController from "./nested_resource_form_fields_controller.js"
 import ToolbarController from "./toolbar_controller.js"
@@ -29,9 +30,10 @@ export default function (application) {
   application.register("nav-user-section", NavUserSectionController)
   application.register("nav-user-link", NavUserLinkController)
   application.register("nav-user", NavUserController)
-  application.register("resource-header", ResourceHeaderController)
+  application.register("header", HeaderController)
   application.register("sidebar-menu-item", SidebarMenuItemController)
   application.register("sidebar-menu", SidebarMenuController)
+  application.register("sidebar", SidebarController)
   application.register("has-many-panel", HasManyPanelController)
   application.register("nested-resource-form-fields", NestedResourceFormFieldsController)
   application.register("toolbar", ToolbarController)

data/src/js/controllers/{resource_header_controller.js → sidebar_controller.js}

@@ -1,8 +1,8 @@
 import { Controller } from "@hotwired/stimulus"
 
-// Connects to data-controller="resource-header"
+// Connects to data-controller="sidebar"
 export default class extends Controller {
   connect() {
-    console.log(`resource-header connected: ${this.element}`)
+    console.log(`sidebar connected: ${this.element}`)
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plutonium
 version: !ruby/object:Gem::Version
-  version: 0.15.13
+  version: 0.15.15
 platform: ruby
 authors:
 - Stefan Froelich
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-11-10 00:00:00.000000000 Z
+date: 2024-11-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: zeitwerk
@@ -268,6 +268,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: phlex-slotable
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: rake
   requirement: !ruby/object:Gem::Requirement
@@ -1364,6 +1378,7 @@ files:
 - lib/plutonium/ui/action_button.rb
 - lib/plutonium/ui/block.rb
 - lib/plutonium/ui/breadcrumbs.rb
+- lib/plutonium/ui/color_mode_selector.rb
 - lib/plutonium/ui/component/base.rb
 - lib/plutonium/ui/component/behaviour.rb
 - lib/plutonium/ui/component/kit.rb
@@ -1382,6 +1397,11 @@ files:
 - lib/plutonium/ui/form/resource.rb
 - lib/plutonium/ui/form/theme.rb
 - lib/plutonium/ui/frame_navigator_panel.rb
+- lib/plutonium/ui/layout/base.rb
+- lib/plutonium/ui/layout/header.rb
+- lib/plutonium/ui/layout/resource_layout.rb
+- lib/plutonium/ui/layout/rodauth_layout.rb
+- lib/plutonium/ui/layout/sidebar.rb
 - lib/plutonium/ui/page/base.rb
 - lib/plutonium/ui/page/edit.rb
 - lib/plutonium/ui/page/index.rb
@@ -1402,7 +1422,7 @@ files:
 - lib/plutonium/ui/table/theme.rb
 - lib/plutonium/version.rb
 - lib/rodauth/features/case_insensitive_login.rb
-- lib/rodauth/loader.rb
+- lib/rodauth/plugins.rb
 - lib/tasks/create_rodauth_admin.rake
 - package-lock.json
 - package.json
@@ -1420,6 +1440,7 @@ files:
 - src/js/controllers/form_controller.js
 - src/js/controllers/frame_navigator_controller.js
 - src/js/controllers/has_many_panel_controller.js
+- src/js/controllers/header_controller.js
 - src/js/controllers/interactive_action_form_controller.js
 - src/js/controllers/nav_grid_menu_controller.js
 - src/js/controllers/nav_grid_menu_item_controller.js
@@ -1431,8 +1452,8 @@ files:
 - 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
 - src/js/controllers/resource_layout_controller.js
+- src/js/controllers/sidebar_controller.js
 - src/js/controllers/sidebar_menu_controller.js
 - src/js/controllers/sidebar_menu_item_controller.js
 - src/js/controllers/table_controller.js