admin-lte 4.0.4 → 4.2.0

package/src/scss/_progress-bars.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //
 // Component: Progress Bar
 //
@@ -40,7 +42,7 @@
 }
 
 .progress-group {
-  margin-bottom: map-get($spacers, 2);
+  margin-bottom: map.get($spacers, 2);
 }
 
 // size variation

package/src/scss/_table.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //
 // Component: Table
 //
@@ -56,11 +58,11 @@
     tbody > tr > th,
     tbody > tr > td {
       &:first-of-type {
-        padding-left: map-get($spacers, 4);
+        padding-left: map.get($spacers, 4);
       }
 
       &:last-of-type {
-        padding-right: map-get($spacers, 4);
+        padding-right: map.get($spacers, 4);
       }
     }
   }

package/src/scss/adminlte-docs.scss

@@ -0,0 +1,25 @@
+/*!
+ *   AdminLTE v4.2.0 — documentation styles
+ *   Styles for the documentation and FAQ pages only (body.docs-page /
+ *   body.faq-page). Applications never need this file; it is loaded by the
+ *   docs pages in addition to adminlte.css.
+ */
+
+// Bootstrap Configuration
+// ---------------------------------------------------
+@import "bootstrap/scss/functions";
+@import "bootstrap-overrides";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+
+// AdminLTE Configuration
+// ---------------------------------------------------
+@import "variables";
+@import "variables-dark";
+@import "mixins";
+
+// Documentation styles
+// ---------------------------------------------------
+@import "docs";

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.0.4
+ *   AdminLTE v4.2.0
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -11,7 +11,7 @@
 
 // AdminLTE Configuration
 // ---------------------------------------------------
-@import "bootstrap-variables"; // little modified are here
+@import "bootstrap-overrides"; // AdminLTE's ~10 changes to Bootstrap defaults
 
 // Bootstrap Configuration
 // ---------------------------------------------------
@@ -77,5 +77,6 @@
 // AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
 @import "accessibility";
 
-// AdminLTE Documentation Styles (only applies to pages with body.docs-page)
-@import "docs";
+// Documentation styles live in their own bundle (adminlte-docs.scss) so
+// applications don't ship them — the docs pages load it in addition to
+// this file.

package/src/scss/pages/_login_and_register.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //
 // Pages: Login & Register
 //
@@ -28,7 +30,7 @@
 .register-box {
   width: 400px;
 
-  @media (max-width: map-get($grid-breakpoints, sm)) {
+  @media (max-width: map.get($grid-breakpoints, sm)) {
     width: 90%;
     margin-top: .5rem;
   }

package/src/ts/accessibility.ts

@@ -357,11 +357,15 @@ export class AccessibilityManager {
       }
 
       // Handle invalid state unless the element explicitly opts out via the
-      // 'disable-adminlte-validations' class.
+      // 'disable-adminlte-validations' class. Registered with the lifecycle
+      // signal: this runs once per cycle, and under a framework that
+      // re-initialises against a persistent <body> (initialize()) the inputs
+      // survive the cycle — an unsignalled listener would stack one handler
+      // per re-init on every field.
       if (!htmlInput.classList.contains('disable-adminlte-validations')) {
         htmlInput.addEventListener('invalid', () => {
           this.handleFormError(htmlInput)
-        })
+        }, { signal: this.signal })
       }
     })
   }

package/src/ts/adminlte.ts

@@ -1,14 +1,15 @@
-import { onDOMContentLoaded } from './util/index.js'
+import { initialize, teardown, onDOMContentLoaded } from './util/index.js'
 import Layout from './layout.js'
 import CardWidget from './card-widget.js'
 import Treeview from './treeview.js'
 import DirectChat from './direct-chat.js'
 import FullScreen from './fullscreen.js'
 import PushMenu from './push-menu.js'
+import ColorMode from './color-mode.js'
 import { initAccessibility } from './accessibility.js'
 
 /**
- * AdminLTE v4.0.4
+ * AdminLTE v4.2.0
  * Author: Colorlib
  * Website: AdminLTE.io <https://adminlte.io>
  * License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -38,5 +39,8 @@ export {
   DirectChat,
   FullScreen,
   PushMenu,
-  initAccessibility
+  ColorMode,
+  initAccessibility,
+  initialize,
+  teardown
 }

package/src/ts/base-component.ts

@@ -0,0 +1,111 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE base-component.ts
+ * @description Shared component lifecycle for AdminLTE plugins: a per-element
+ * instance registry (getInstance / getOrCreateInstance / dispose) and a
+ * consistent custom-event contract, mirroring Bootstrap's component API.
+ * @license MIT
+ * --------------------------------------------
+ */
+
+/**
+ * Component registry: element -> (data key -> component instance). A single
+ * element can host several components at once, each stored under its own
+ * DATA_KEY. WeakMap keys don't prevent garbage collection, so instances die
+ * with their elements — important under Hotwired Turbo, which swaps the whole
+ * <body> on navigation.
+ */
+const componentRegistry = new WeakMap<Element, Map<string, BaseComponent>>()
+
+class BaseComponent {
+  /**
+   * Subclasses must override this getter to declare their own name.
+   */
+  static get NAME(): string {
+    throw new Error('Component subclasses must override the static NAME getter.')
+  }
+
+  /**
+   * Key this component is registered under: `lte.<name>`.
+   */
+  static get DATA_KEY(): string {
+    return `lte.${this.NAME}`
+  }
+
+  /**
+   * Untyped registry lookup. Every component exposes a typed wrapper
+   * (e.g. CardWidget.getInstance()) built on top of this.
+   *
+   * @param element The element to look up.
+   * @returns The instance for this component, or null if there is none.
+   */
+  protected static _getInstance(element: Element | null | undefined): BaseComponent | null {
+    if (!element) {
+      return null
+    }
+
+    return componentRegistry.get(element)?.get(this.DATA_KEY) ?? null
+  }
+
+  /**
+   * The element this instance is attached to.
+   */
+  _element: HTMLElement
+
+  /**
+   * Attach a new instance to the given element and register it under the
+   * subclass's DATA_KEY.
+   *
+   * @param element The element to attach this instance to.
+   */
+  constructor(element: HTMLElement) {
+    this._element = element
+
+    const instances = componentRegistry.get(element) ?? new Map<string, BaseComponent>()
+    componentRegistry.set(element, instances)
+    instances.set((this.constructor as typeof BaseComponent).DATA_KEY, this)
+  }
+
+  /**
+   * Remove this instance from the registry so getInstance() no longer
+   * returns it. Subclasses release their own resources, then call
+   * super.dispose().
+   */
+  dispose(): void {
+    const instances = componentRegistry.get(this._element)
+    instances?.delete((this.constructor as typeof BaseComponent).DATA_KEY)
+
+    // Drop the element's entry once it holds no components at all.
+    if (instances?.size === 0) {
+      componentRegistry.delete(this._element)
+    }
+  }
+}
+
+/**
+ * Dispatch a namespaced custom event that bubbles — so applications can
+ * listen once on `document` — and can optionally carry a payload or be
+ * canceled. Returns the event so callers can check `defaultPrevented`.
+ *
+ * @param element The element to dispatch the event on.
+ * @param name The namespaced event name, e.g. `collapse.lte.push-menu`.
+ * @param options `cancelable` opts the event into preventDefault(); `detail`
+ *   is the payload handed to listeners.
+ * @returns The dispatched event, after listeners have run.
+ */
+const dispatchCustomEvent = <T = undefined>(
+  element: Element,
+  name: string,
+  options: { cancelable?: boolean; detail?: T } = {}
+): CustomEvent<T | undefined> => {
+  const event = new CustomEvent<T | undefined>(name, {
+    bubbles: true,
+    cancelable: options.cancelable ?? false,
+    detail: options.detail
+  })
+
+  element.dispatchEvent(event)
+  return event
+}
+
+export { BaseComponent, dispatchCustomEvent }

package/src/ts/card-widget.ts

@@ -6,8 +6,8 @@
  * --------------------------------------------
  */
 
+import { BaseComponent, dispatchCustomEvent } from './base-component'
 import {
-  onDOMContentLoaded,
   slideUp,
   slideDown
 } from './util/index'
@@ -17,11 +17,18 @@ import {
  * ====================================================
  */
 
-const DATA_KEY = 'lte.card-widget'
-const EVENT_KEY = `.${DATA_KEY}`
+const NAME = 'card-widget'
+const EVENT_KEY = `.lte.${NAME}`
+
+// Cancelable "before" events, dispatched on the card when an action starts.
+const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
+const EVENT_EXPAND = `expand${EVENT_KEY}`
+const EVENT_REMOVE = `remove${EVENT_KEY}`
+
+// "After" events, dispatched on the card when the action has completed.
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
 const EVENT_EXPANDED = `expanded${EVENT_KEY}`
-const EVENT_REMOVE = `remove${EVENT_KEY}`
+const EVENT_REMOVED = `removed${EVENT_KEY}`
 const EVENT_MAXIMIZED = `maximized${EVENT_KEY}`
 const EVENT_MINIMIZED = `minimized${EVENT_KEY}`
 
@@ -53,14 +60,24 @@ const Default: Config = {
   maximizeTrigger: SELECTOR_DATA_MAXIMIZE
 }
 
-class CardWidget {
-  _element: HTMLElement
+class CardWidget extends BaseComponent {
+  static get NAME(): string {
+    return NAME
+  }
+
+  static getInstance(element: Element | null | undefined): CardWidget | null {
+    return this._getInstance(element) as CardWidget | null
+  }
+
+  static getOrCreateInstance(element: HTMLElement, config: Partial<Config> = {}): CardWidget {
+    return this.getInstance(element) ?? new this(element, config)
+  }
+
   _parent: HTMLElement | undefined
-  _clone: HTMLElement | undefined
   _config: Config
 
-  constructor(element: HTMLElement, config: Config) {
-    this._element = element
+  constructor(element: HTMLElement, config: Partial<Config> = {}) {
+    super(element)
     this._parent = element.closest(SELECTOR_CARD) as HTMLElement | undefined
 
     if (element.classList.contains(CLASS_NAME_CARD)) {
@@ -71,76 +88,87 @@ class CardWidget {
   }
 
   collapse() {
-    const event = new Event(EVENT_COLLAPSED)
+    if (!this._parent) {
+      return
+    }
 
-    if (this._parent) {
-      this._parent.classList.add(CLASS_NAME_COLLAPSING)
-      this._parent.classList.remove(CLASS_NAME_EXPANDING)
+    if (dispatchCustomEvent(this._parent, EVENT_COLLAPSE, { cancelable: true }).defaultPrevented) {
+      return
+    }
 
-      // Only target direct children to avoid affecting nested cards
-      const elm = this._parent?.querySelectorAll(`:scope > ${SELECTOR_CARD_BODY}, :scope > ${SELECTOR_CARD_FOOTER}`)
+    this._parent.classList.add(CLASS_NAME_COLLAPSING)
+    this._parent.classList.remove(CLASS_NAME_EXPANDING)
 
-      elm.forEach(el => {
-        if (el instanceof HTMLElement) {
-          slideUp(el, this._config.animationSpeed)
-        }
-      })
+    // Only target direct children to avoid affecting nested cards
+    const elm = this._parent.querySelectorAll(`:scope > ${SELECTOR_CARD_BODY}, :scope > ${SELECTOR_CARD_FOOTER}`)
 
-      setTimeout(() => {
-        // Guard against a stale timer: if expand() ran while this collapse
-        // was still animating, the card must not end up marked collapsed.
-        if (this._parent?.classList.contains(CLASS_NAME_COLLAPSING)) {
-          this._parent.classList.add(CLASS_NAME_COLLAPSED)
-          this._parent.classList.remove(CLASS_NAME_COLLAPSING)
-        }
-      }, this._config.animationSpeed)
-    }
+    elm.forEach(el => {
+      if (el instanceof HTMLElement) {
+        slideUp(el, this._config.animationSpeed)
+      }
+    })
 
-    this._element?.dispatchEvent(event)
+    setTimeout(() => {
+      // Guard against a stale timer: if expand() ran while this collapse
+      // was still animating, the card must not end up marked collapsed.
+      if (this._parent?.classList.contains(CLASS_NAME_COLLAPSING)) {
+        this._parent.classList.add(CLASS_NAME_COLLAPSED)
+        this._parent.classList.remove(CLASS_NAME_COLLAPSING)
+        dispatchCustomEvent(this._parent, EVENT_COLLAPSED)
+      }
+    }, this._config.animationSpeed)
   }
 
   expand() {
-    const event = new Event(EVENT_EXPANDED)
+    if (!this._parent) {
+      return
+    }
 
-    if (this._parent) {
-      this._parent.classList.add(CLASS_NAME_EXPANDING)
-      this._parent.classList.remove(CLASS_NAME_COLLAPSING, CLASS_NAME_COLLAPSED)
+    if (dispatchCustomEvent(this._parent, EVENT_EXPAND, { cancelable: true }).defaultPrevented) {
+      return
+    }
 
-      // Only target direct children to avoid affecting nested cards
-      const elm = this._parent?.querySelectorAll(`:scope > ${SELECTOR_CARD_BODY}, :scope > ${SELECTOR_CARD_FOOTER}`)
+    this._parent.classList.add(CLASS_NAME_EXPANDING)
+    this._parent.classList.remove(CLASS_NAME_COLLAPSING, CLASS_NAME_COLLAPSED)
 
-      elm.forEach(el => {
-        if (el instanceof HTMLElement) {
-          slideDown(el, this._config.animationSpeed)
-        }
-      })
+    // Only target direct children to avoid affecting nested cards
+    const elm = this._parent.querySelectorAll(`:scope > ${SELECTOR_CARD_BODY}, :scope > ${SELECTOR_CARD_FOOTER}`)
 
-      setTimeout(() => {
-        // Same stale-timer guard as collapse(), in the other direction.
-        if (this._parent?.classList.contains(CLASS_NAME_EXPANDING)) {
-          this._parent.classList.remove(CLASS_NAME_EXPANDING)
-        }
-      }, this._config.animationSpeed)
-    }
+    elm.forEach(el => {
+      if (el instanceof HTMLElement) {
+        slideDown(el, this._config.animationSpeed)
+      }
+    })
 
-    this._element?.dispatchEvent(event)
+    setTimeout(() => {
+      // Same stale-timer guard as collapse(), in the other direction.
+      if (this._parent?.classList.contains(CLASS_NAME_EXPANDING)) {
+        this._parent.classList.remove(CLASS_NAME_EXPANDING)
+        dispatchCustomEvent(this._parent, EVENT_EXPANDED)
+      }
+    }, this._config.animationSpeed)
   }
 
   remove() {
-    const event = new Event(EVENT_REMOVE)
-
-    if (this._parent) {
-      const parent = this._parent
-      slideUp(parent, this._config.animationSpeed)
+    if (!this._parent) {
+      return
+    }
 
-      // Actually remove the card once the animation finishes — hiding it
-      // would keep its form fields submitting and its ids in the document.
-      setTimeout(() => {
-        parent.remove()
-      }, this._config.animationSpeed)
+    if (dispatchCustomEvent(this._parent, EVENT_REMOVE, { cancelable: true }).defaultPrevented) {
+      return
     }
 
-    this._element?.dispatchEvent(event)
+    const parent = this._parent
+    slideUp(parent, this._config.animationSpeed)
+
+    // Actually remove the card once the animation finishes — hiding it
+    // would keep its form fields submitting and its ids in the document.
+    // `removed` is dispatched just before detachment so it can still bubble.
+    setTimeout(() => {
+      dispatchCustomEvent(parent, EVENT_REMOVED)
+      parent.remove()
+      this.dispose()
+    }, this._config.animationSpeed)
   }
 
   toggle() {
@@ -155,8 +183,6 @@ class CardWidget {
   }
 
   maximize() {
-    const event = new Event(EVENT_MAXIMIZED)
-
     if (this._parent) {
       this._parent.style.height = `${this._parent.offsetHeight}px`
       this._parent.style.width = `${this._parent.offsetWidth}px`
@@ -175,16 +201,14 @@ class CardWidget {
           if (this._parent.classList.contains(CLASS_NAME_COLLAPSED)) {
             this._parent.classList.add(CLASS_NAME_WAS_COLLAPSED)
           }
+
+          dispatchCustomEvent(this._parent, EVENT_MAXIMIZED)
         }
       }, 150)
     }
-
-    this._element?.dispatchEvent(event)
   }
 
   minimize() {
-    const event = new Event(EVENT_MINIMIZED)
-
     if (this._parent) {
       this._parent.style.height = 'auto'
       this._parent.style.width = 'auto'
@@ -204,6 +228,8 @@ class CardWidget {
             this._parent.classList.remove(CLASS_NAME_WAS_COLLAPSED)
           }
 
+          dispatchCustomEvent(this._parent, EVENT_MINIMIZED)
+
           // Drop the inline sizing/transition once the restore transition has
           // finished so the card doesn't carry stale styles forever.
           setTimeout(() => {
@@ -214,8 +240,6 @@ class CardWidget {
         }
       }, 10)
     }
-
-    this._element?.dispatchEvent(event)
   }
 
   toggleMaximize() {
@@ -232,44 +256,44 @@ class CardWidget {
  *
  * Data Api implementation
  * ====================================================
+ * A single delegated listener on `document` handles all card toggles — so
+ * cards inserted later (AJAX, Turbo Frames) work without re-initialisation,
+ * and the listener itself survives Turbo's <body> swaps.
  */
 
-onDOMContentLoaded(() => {
-  const collapseBtn = document.querySelectorAll(SELECTOR_DATA_COLLAPSE)
-
-  // Use currentTarget (the [data-lte-toggle] button itself), not target:
-  // clicking the <i> icon inside the button would otherwise make the widget's
-  // events fire on the icon instead of the button.
-  collapseBtn.forEach(btn => {
-    btn.addEventListener('click', event => {
-      event.preventDefault()
-      const target = event.currentTarget as HTMLElement
-      const data = new CardWidget(target, Default)
-      data.toggle()
-    })
-  })
+document.addEventListener('click', event => {
+  const target = event.target
 
-  const removeBtn = document.querySelectorAll(SELECTOR_DATA_REMOVE)
+  if (!(target instanceof Element)) {
+    return
+  }
 
-  removeBtn.forEach(btn => {
-    btn.addEventListener('click', event => {
-      event.preventDefault()
-      const target = event.currentTarget as HTMLElement
-      const data = new CardWidget(target, Default)
-      data.remove()
-    })
-  })
+  const collapseTrigger = target.closest(SELECTOR_DATA_COLLAPSE)
+  const removeTrigger = target.closest(SELECTOR_DATA_REMOVE)
+  const maximizeTrigger = target.closest(SELECTOR_DATA_MAXIMIZE)
+  const trigger = collapseTrigger ?? removeTrigger ?? maximizeTrigger
 
-  const maxBtn = document.querySelectorAll(SELECTOR_DATA_MAXIMIZE)
+  if (!trigger) {
+    return
+  }
 
-  maxBtn.forEach(btn => {
-    btn.addEventListener('click', event => {
-      event.preventDefault()
-      const target = event.currentTarget as HTMLElement
-      const data = new CardWidget(target, Default)
-      data.toggleMaximize()
-    })
-  })
+  event.preventDefault()
+
+  const card = trigger.closest(SELECTOR_CARD) as HTMLElement | null
+
+  if (!card) {
+    return
+  }
+
+  const widget = CardWidget.getOrCreateInstance(card)
+
+  if (collapseTrigger) {
+    widget.toggle()
+  } else if (removeTrigger) {
+    widget.remove()
+  } else {
+    widget.toggleMaximize()
+  }
 })
 
 export default CardWidget