admin-lte 4.2.0 → 4.4.0

package/dist/js/types/sidebar-search.d.ts

@@ -0,0 +1,46 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE sidebar-search.ts
+ * @description Live filter for the sidebar menu.
+ * @license MIT
+ * --------------------------------------------
+ */
+import { BaseComponent } from './base-component';
+/**
+ * A submenu's resting state, captured before the first keystroke so clearing
+ * the field can put the menu back exactly as the user left it. The inline
+ * `display` matters as well as the class: Treeview's slide animation writes
+ * one, and it would otherwise win over `.menu-open > .nav-treeview`.
+ */
+type SubmenuState = {
+    open: boolean;
+    display: string;
+};
+/**
+ * Class Definition
+ * ============================================================================
+ */
+declare class SidebarSearch extends BaseComponent {
+    static get NAME(): string;
+    static getInstance(element: Element | null | undefined): SidebarSearch | null;
+    static getOrCreateInstance(element: HTMLElement): SidebarSearch;
+    _menu: HTMLElement | null;
+    _emptyState: HTMLElement | null;
+    _snapshot: Map<HTMLElement, SubmenuState> | null;
+    constructor(element: HTMLElement);
+    /**
+     * Show only the menu entries matching `term`, expanding whatever has to be
+     * expanded to reveal them. An empty term restores the menu.
+     *
+     * @param term The text to match against nav-link labels, case-insensitively.
+     */
+    search(term: string): void;
+    /**
+     * Drop the filter: every entry becomes visible again and each submenu goes
+     * back to the open/closed state it had before the search started.
+     */
+    clear(): void;
+    dispose(): void;
+    _takeSnapshot(menu: HTMLElement): Map<HTMLElement, SubmenuState>;
+}
+export default SidebarSearch;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "type": "module",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",
@@ -64,6 +64,7 @@
     "test": "vitest run",
     "test-watch": "vitest",
     "test-a11y": "node tests/a11y.mjs",
+    "palette": "node scripts/palette.mjs",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
     "clean": "rimraf dist",
     "compile": "npm-run-all css js assets copy-assets docs-compile docs-format flatten-build",

package/src/scss/_app-header.scss

@@ -17,6 +17,55 @@
   }
 }
 
+// Navbar search: a quiet pill with the icon inside; the icon is the submit
+// button. Widens a little while it has focus. Below `md` the demo shows an
+// icon link to the search page instead (see the Topbar markup).
+.navbar-search {
+  --#{$lte-prefix}search-field-width: #{$lte-search-field-width};
+  --#{$lte-prefix}search-field-focus-width: #{$lte-search-field-focus-width};
+  @include lte-search-field();
+
+  .navbar-search-field {
+    position: relative;
+    width: var(--#{$lte-prefix}search-field-width);
+    max-width: 100%;
+    @include transition(width .2s ease-in-out);
+  }
+
+  &:focus-within .navbar-search-field {
+    width: var(--#{$lte-prefix}search-field-focus-width);
+  }
+
+  .form-control {
+    padding-left: $lte-search-field-icon-space;
+  }
+
+  .navbar-search-submit {
+    position: absolute;
+    top: 50%;
+    left: $lte-search-field-padding-x;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    line-height: 1;
+    color: var(--#{$lte-prefix}search-field-icon-color);
+    background: transparent;
+    border: 0;
+    transform: translateY(-50%);
+    @include border-radius($border-radius-pill);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--#{$lte-prefix}search-field-color);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--#{$prefix}focus-ring-color);
+      outline-offset: 2px;
+    }
+  }
+}
+
 // Navbar badge
 .navbar-badge {
   position: absolute;
@@ -52,7 +101,6 @@
           max-height: 100vh;
 
           .sidebar-wrapper {
-            height: subtract(100vh, add($lte-app-header-height, 1px));
             overflow-x: hidden;
             overflow-y: auto;
           }

package/src/scss/_app-sidebar.scss

@@ -16,6 +16,11 @@
   --#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color};
 
   z-index: $lte-zindex-sidebar;
+  // A column: brand and filter keep their size, .sidebar-wrapper takes the
+  // rest and scrolls (#6104). Anything else placed above or below the menu
+  // just works, without a hard-coded height calc.
+  display: flex;
+  flex-direction: column;
   grid-area: #{$lte-prefix}app-sidebar;
   min-width: var(--#{$lte-prefix}sidebar-width);
   max-width: var(--#{$lte-prefix}sidebar-width);
@@ -24,6 +29,7 @@
 
 .sidebar-brand {
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   height: $lte-app-header-height;
@@ -76,6 +82,8 @@
 }
 
 .sidebar-wrapper {
+  flex: 1 1 auto;
+  min-height: 0;
   padding-top: $lte-sidebar-padding-y;
   padding-right: $lte-sidebar-padding-x;
   padding-bottom: $lte-sidebar-padding-y;
@@ -309,6 +317,14 @@
   white-space: nowrap;
 }
 
+// Sidebar search: the filter field above the menu. It sits outside
+// .sidebar-wrapper so it stays put while the menu scrolls under it.
+.sidebar-search {
+  flex: 0 0 auto;
+  padding: $lte-sidebar-padding-y ($lte-sidebar-padding-x * 2);
+  @include lte-search-field();
+}
+
 // Logo style
 .logo-xs,
 .logo-xl {
@@ -356,6 +372,12 @@
     display: none;
   }
 
+  // A text field can't render usefully in the mini rail; it returns on hover
+  // together with the labels it filters.
+  .app-sidebar:not(:hover) .sidebar-search {
+    display: none;
+  }
+
   .sidebar-menu {
     .nav-link {
       width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
@@ -491,7 +513,6 @@
             max-height: 100vh;
 
             .sidebar-wrapper {
-              height: subtract(100vh, add($lte-app-header-height, 1px));
               overflow-x: hidden;
               overflow-y: auto;
             }
@@ -532,7 +553,6 @@
           margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
 
           .sidebar-wrapper {
-            height: subtract(100vh, add($lte-app-header-height, 1px));
             overflow-x: hidden;
             overflow-y: auto;
           }

package/src/scss/_mixins.scss

@@ -4,3 +4,4 @@
 
 @import "mixins/animations";
 @import "mixins/scrollbar";
+@import "mixins/search-field";

package/src/scss/_ribbon.scss

@@ -0,0 +1,75 @@
+//
+// Component: Ribbon
+//
+// A diagonal banner pinned to the top corner of a positioned parent. `.card` is
+// already `position: relative`; anything else needs `.position-relative`.
+//
+// The wrapper is a square that clips the band. The band is NOT centred on that
+// square — a corner ribbon has to hug the corner, and the square's centre is
+// the point furthest from it, which would leave the corner bare. Instead the
+// band's centre sits on the corner's bisector at ~46% of the square's side,
+// which is the proportion v3 used and the one that leaves room for the label.
+// rtlcss mirrors the offsets and the rotation, so no direction-specific rules
+// are needed here.
+//
+
+.ribbon-wrapper {
+  // Width is the chord across the corner at the band's inner edge, so the band
+  // reaches both edges of the square and its ends are cut flush. Derived here
+  // rather than with calc() so a theme only ever overrides the size.
+  --#{$lte-prefix}ribbon-size: #{$lte-ribbon-size};
+  --#{$lte-prefix}ribbon-width: #{$lte-ribbon-size * 1.3};
+  --#{$lte-prefix}ribbon-font-size: #{$lte-ribbon-font-size};
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: var(--#{$lte-prefix}ribbon-size);
+  height: var(--#{$lte-prefix}ribbon-size);
+  overflow: hidden;
+  // Inheriting the parent's corner radius makes the clip follow a rounded
+  // card instead of cutting a square out of it.
+  @include border-top-end-radius(inherit);
+
+  &.ribbon-lg {
+    --#{$lte-prefix}ribbon-size: #{$lte-ribbon-size-lg};
+    --#{$lte-prefix}ribbon-width: #{$lte-ribbon-size-lg * 1.3};
+    --#{$lte-prefix}ribbon-font-size: #{$lte-ribbon-font-size-lg};
+  }
+
+  &.ribbon-xl {
+    --#{$lte-prefix}ribbon-size: #{$lte-ribbon-size-xl};
+    --#{$lte-prefix}ribbon-width: #{$lte-ribbon-size-xl * 1.3};
+    --#{$lte-prefix}ribbon-font-size: #{$lte-ribbon-font-size-xl};
+  }
+
+  .ribbon {
+    position: absolute;
+    // 32.5% / 67.5% puts the band's centre on the corner bisector, close enough
+    // to the corner to cover it; 50%/50% would park it at the far diagonal.
+    top: 32.5%;
+    left: 67.5%;
+    width: var(--#{$lte-prefix}ribbon-width);
+    padding: $lte-ribbon-padding;
+    overflow: hidden;
+    font-size: var(--#{$lte-prefix}ribbon-font-size);
+    font-weight: $lte-ribbon-font-weight;
+    line-height: 1.2;
+    color: var(--#{$prefix}emphasis-color);
+    text-align: center;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+    background-color: var(--#{$prefix}secondary-bg);
+    box-shadow: $lte-ribbon-shadow;
+    transform: translate(-50%, -50%) rotate(45deg);
+
+    // Ribbons carry a `.text-bg-*` utility for colour, so the link only needs
+    // to inherit whatever contrast colour that utility picked.
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}

package/src/scss/_variables.scss

@@ -58,6 +58,14 @@ $lte-app-header-bottom-border:        $lte-app-header-bottom-border-width solid
 $lte-app-header-link-padding-y:       $navbar-padding-y !default;
 $lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
 $lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
+
+// Search fields in the chrome (navbar search, sidebar filter)
+$lte-search-field-width:              14rem !default;
+$lte-search-field-focus-width:        18rem !default;
+$lte-search-field-font-size:          $font-size-sm !default;
+$lte-search-field-padding-y:          .3rem !default;
+$lte-search-field-padding-x:          .75rem !default;
+$lte-search-field-icon-space:         2.125rem !default;
 $lte-zindex-fixed-header:           $zindex-fixed !default;
 
 // APP MAIN
@@ -118,6 +126,34 @@ $lte-progress-bar-border-radius: 1px !default;
 // --------------------------------------------------------
 $lte-callout-link-font-weight: $alert-link-font-weight !default;
 
+// RIBBONS
+// --------------------------------------------------------
+// The size is the side of the square that clips the band; the band's own width
+// is derived from it, so these are the only three values a theme has to change.
+$lte-ribbon-size: 70px !default;
+$lte-ribbon-size-lg: 110px !default;
+$lte-ribbon-size-xl: 145px !default;
+$lte-ribbon-font-size: .8rem !default;
+$lte-ribbon-font-size-lg: 1rem !default;
+$lte-ribbon-font-size-xl: 1.25rem !default;
+$lte-ribbon-padding: .375rem 0 !default;
+$lte-ribbon-font-weight: $font-weight-normal !default;
+$lte-ribbon-shadow: 0 0 3px rgba(var(--#{$prefix}body-color-rgb), .3) !default;
+
+// WIDGETS
+// --------------------------------------------------------
+$lte-user-block-avatar-size: 2.5rem !default;
+$lte-user-block-avatar-size-sm: 1.75rem !default;
+$lte-user-block-username-font-size: 1rem !default;
+$lte-user-block-username-font-weight: $font-weight-semibold !default;
+$lte-user-block-description-font-size: .8125rem !default;
+// Kept in rem so the avatar's overhang past the header — half its own height —
+// stays computable in Sass rather than needing calc() at runtime.
+$lte-widget-user-header-padding: 1rem !default;
+$lte-widget-user-header-height: 8.4375rem !default;
+$lte-widget-user-image-size: 5.625rem !default;
+$lte-widget-user-2-image-size: 4.0625rem !default;
+
 // DIRECT CHAT
 // --------------------------------------------------------
 $lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;

package/src/scss/_widgets.scss

@@ -0,0 +1,192 @@
+//
+// Component: Widgets
+//
+// Social and post widgets: the profile cards and activity-feed blocks that v3
+// shipped. The class names are kept from v3 so migrating markup keeps working,
+// but the implementations are grid/flex rather than the original floats, and
+// colour comes from Bootstrap utilities (`.text-bg-*`, `.rounded-circle`,
+// `.shadow`) instead of AdminLTE-specific ones.
+//
+
+// A user's avatar, name and a line of meta, laid out from flat markup: the
+// avatar spans both text rows, so no wrapper element is needed around them.
+.user-block {
+  --#{$lte-prefix}user-block-avatar-size: #{$lte-user-block-avatar-size};
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: .75rem;
+  align-items: center;
+
+  > img {
+    grid-row: 1 / span 2;
+    align-self: center;
+    width: var(--#{$lte-prefix}user-block-avatar-size);
+    height: var(--#{$lte-prefix}user-block-avatar-size);
+    object-fit: cover;
+  }
+
+  .username,
+  .description,
+  .comment {
+    grid-column: 2;
+  }
+
+  .username {
+    align-self: end;
+    font-size: $lte-user-block-username-font-size;
+    font-weight: $lte-user-block-username-font-weight;
+
+    a {
+      color: var(--#{$prefix}emphasis-color);
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .description {
+    align-self: start;
+    font-size: $lte-user-block-description-font-size;
+    color: var(--#{$prefix}secondary-color);
+  }
+
+  .comment {
+    margin-top: .5rem;
+  }
+
+  // In a card header a user block stands in for .card-title, so it floats the
+  // same way — otherwise the grid box claims the full line and the floated
+  // .card-tools drop below it.
+  .card-header > & {
+    float: left;
+  }
+
+  &.user-block-sm {
+    --#{$lte-prefix}user-block-avatar-size: #{$lte-user-block-avatar-size-sm};
+
+    .username {
+      font-size: $lte-user-block-description-font-size;
+    }
+
+    .description {
+      font-size: .75rem;
+    }
+  }
+}
+
+// One entry in an activity feed. Dividers sit between entries only, so the last
+// post doesn't add trailing space inside its card.
+.post {
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--#{$prefix}border-color);
+
+  &:last-of-type {
+    padding-bottom: 0;
+    margin-bottom: 0;
+    border-bottom: 0;
+  }
+
+  .user-block {
+    margin-bottom: .75rem;
+  }
+}
+
+// A labelled figure, typically repeated across a card footer's grid columns.
+.description-block {
+  display: block;
+  margin: .625rem 0;
+  text-align: center;
+
+  .description-header {
+    padding: 0;
+    margin: 0;
+    font-size: 1.0625rem;
+    font-weight: $font-weight-bold;
+  }
+
+  .description-text {
+    font-size: $lte-user-block-description-font-size;
+    color: var(--#{$prefix}secondary-color);
+    text-transform: uppercase;
+  }
+}
+
+// Profile card with a banner header and an avatar straddling the seam between
+// the header and the footer.
+.widget-user {
+  .widget-user-header {
+    height: $lte-widget-user-header-height;
+    padding: $lte-widget-user-header-padding;
+    text-align: center;
+    background-position: center;
+    background-size: cover;
+    @include border-top-radius(inherit);
+  }
+
+  .widget-user-username {
+    margin-top: 0;
+    margin-bottom: .3125rem;
+    font-size: 1.5625rem;
+    font-weight: $font-weight-light;
+  }
+
+  .widget-user-desc {
+    margin-top: 0;
+    font-size: 1rem;
+  }
+
+  .widget-user-image {
+    position: absolute;
+    top: $lte-widget-user-header-height - ($lte-widget-user-image-size * .5);
+    right: 0;
+    left: 0;
+    width: $lte-widget-user-image-size;
+    margin-inline: auto;
+
+    > img {
+      width: 100%;
+      height: auto;
+      border: 3px solid var(--#{$prefix}body-bg);
+    }
+  }
+
+  // Clear the half of the avatar that overhangs the header.
+  > .card-footer {
+    padding-top: ($lte-widget-user-image-size * .5) + .75rem;
+  }
+}
+
+// Same idea with the avatar inline in the header — shorter, and it survives
+// long names better because the text column can wrap.
+.widget-user-2 {
+  .widget-user-header {
+    display: flex;
+    column-gap: 1rem;
+    align-items: center;
+    padding: $lte-widget-user-header-padding;
+    @include border-top-radius(inherit);
+  }
+
+  .widget-user-image > img {
+    width: $lte-widget-user-2-image-size;
+    height: $lte-widget-user-2-image-size;
+    object-fit: cover;
+  }
+
+  .widget-user-username {
+    margin-top: 0;
+    margin-bottom: .3125rem;
+    font-size: 1.5625rem;
+    font-weight: $font-weight-light;
+  }
+
+  .widget-user-desc {
+    margin-top: 0;
+    font-size: 1rem;
+  }
+}

package/src/scss/adminlte-colors.scss

@@ -0,0 +1,35 @@
+/*!
+ *   AdminLTE v4.4.0 — Extended color palette
+ *   Opt-in. Nothing here is in adminlte.css: load this sheet after it and you
+ *   get fourteen additional colours (orange, amber, olive, teal, sky, indigo,
+ *   violet, fuchsia, pink, navy, steel, slate, graphite, midnight) as `--bs-*`
+ *   tokens plus the
+ *   `.bg-*`, `.text-bg-*`, `.text-*`, `.border-*`, `.link-*`, `.bg-gradient-*`,
+ *   `.card-*`, `.callout-*` and `.direct-chat-*` families — with dark mode.
+ *   Every colour takes white text at ≥ 4.6:1. See docs/colors.html.
+ *
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+
+// 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
+// ---------------------------------------------------
+// `mixins` is deliberately not imported: it emits AdminLTE's @keyframes, and
+// this sheet only uses Bootstrap's own mixins and functions.
+@import "variables";
+@import "variables-dark";
+
+// Palette
+// ---------------------------------------------------
+@import "colors/variables";
+@import "colors/colors";

package/src/scss/adminlte-docs.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.2.0 — documentation styles
+ *   AdminLTE v4.4.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.

package/src/scss/adminlte-select2.scss

@@ -0,0 +1,31 @@
+/*!
+ *   AdminLTE v4.4.0 — Select2 compatibility theme
+ *   Styling only. AdminLTE bundles neither Select2 nor jQuery; this optional
+ *   sheet makes a Select2 you load yourself match Bootstrap 5.3 form controls,
+ *   including `data-bs-theme` dark mode. Load it AFTER select2.css.
+ *   New code should prefer Tom Select — see docs/integrations.html.
+ *
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+
+// 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
+// ---------------------------------------------------
+// `mixins` is deliberately not imported: it emits AdminLTE's @keyframes, and
+// this sheet only uses Bootstrap's own mixins.
+@import "variables";
+@import "variables-dark";
+
+// Select2 compatibility styles
+// ---------------------------------------------------
+@import "compat/select2";

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.2.0
+ *   AdminLTE v4.4.0
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>