plutonium 0.15.12 → 0.15.14

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.12"
+  VERSION = "0.15.14"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/lib/plutonium.rb

@@ -10,6 +10,7 @@ require "phlexi-form"
 require "phlexi-table"
 
 require_relative "plutonium/configuration"
+require_relative "rodauth/plugins" if defined?(Rodauth)
 
 # Plutonium module
 #
@@ -25,6 +26,7 @@ module Plutonium
   Loader = Zeitwerk::Loader.for_gem(warn_on_extra_files: false).tap do |loader|
     loader.ignore("#{__dir__}/generators")
     loader.ignore("#{__dir__}/plutonium/railtie.rb")
+    loader.ignore("#{__dir__}/rodauth")
     loader.inflector.inflect("ui" => "UI")
     loader.inflector.inflect("workflow_dsl" => "WorkflowDSL")
     loader.enable_reloading if defined?(Rails.env) && Rails.env.development?

data/lib/rodauth/features/case_insensitive_login.rb

@@ -0,0 +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)
+      if [login_param, login_confirm_param].include?(key)
+        super.downcase
+      else
+        super
+      end
+    end
+
+    def account_from_login(login)
+      super(login.downcase)
+    end
+  end
+end

data/lib/rodauth/plugins.rb

@@ -0,0 +1 @@
+require_relative "features/case_insensitive_login"

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@radioactive-labs/plutonium",
-      "version": "0.1.6",
+      "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.6",
+  "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.12
+  version: 0.15.14
 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
@@ -1401,6 +1421,8 @@ files:
 - lib/plutonium/ui/table/resource.rb
 - lib/plutonium/ui/table/theme.rb
 - lib/plutonium/version.rb
+- lib/rodauth/features/case_insensitive_login.rb
+- lib/rodauth/plugins.rb
 - lib/tasks/create_rodauth_admin.rake
 - package-lock.json
 - package.json
@@ -1418,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
@@ -1429,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