admin-lte 4.2.0 → 4.3.1

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.3.1",
   "type": "module",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",

package/src/scss/_app-sidebar.scss

@@ -309,6 +309,12 @@
   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 {
+  padding: $lte-sidebar-padding-y ($lte-sidebar-padding-x * 2);
+}
+
 // Logo style
 .logo-xs,
 .logo-xl {
@@ -356,6 +362,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;

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

@@ -118,6 +118,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-docs.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.2.0 — documentation styles
+ *   AdminLTE v4.3.1 — 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.2.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.3.1
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>