admin-lte 4.0.0-alpha2 → 4.0.0-alpha3

package/src/scss/_variables.scss

@@ -15,7 +15,9 @@ $lte-transition-fn:               ease-in-out !default;
 $lte-sidebar-width:               250px !default;
 $lte-sidebar-breakpoint:          lg !default;
 $lte-sidebar-padding-x:           .5rem !default;
+$lte-sidebar-padding-x-compact:   .5rem !default;
 $lte-sidebar-padding-y:           .5rem !default;
+$lte-sidebar-padding-y-compact:   .25rem !default;
 $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transition-fn,
   max-width $lte-transition-speed $lte-transition-fn,
   margin-left $lte-transition-speed $lte-transition-fn,
@@ -40,25 +42,36 @@ $lte-sidebar-header-color:          shade-color($gray-800, 5%) !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------
+$nav-link-padding-x-compact:      .25rem !default;
 $lte-sidebar-mini-width:          ($nav-link-padding-x + $lte-sidebar-padding-x + .8rem) * 2 !default;
+$lte-sidebar-mini-width-compact:  ($nav-link-padding-x-compact + $lte-sidebar-padding-x-compact + .8rem) * 2 !default;
 $lte-sidebar-nav-icon-width:      $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
-$lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
+$lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .4) !default;
 
 // MAIN HEADER
 // --------------------------------------------------------
+$nav-link-height-compact:             1.75rem !default;
 $lte-app-header-bottom-border-width:  $border-width !default;
 $lte-app-header-bottom-border-color:  var(--#{$prefix}border-color) !default;
 $lte-app-header-bottom-border:        $lte-app-header-bottom-border-width solid $lte-app-header-bottom-border-color !default;
 $lte-app-header-link-padding-y:       $navbar-padding-y !default;
-$lte-app-header-height-inner:         ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !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;
 
 // Content padding
 $lte-content-padding-y:           0 !default;
 $lte-content-padding-x:           .5rem !default;
 
+// MAIN CONTENT
+$lte-app-content-bottom-area-height-sm: 3.5rem !default;
+$lte-app-content-bottom-area-height-md: 6rem !default;
+$lte-app-content-bottom-area-height-lg: 9rem !default;
+$lte-app-content-bottom-area-height-xl: 12rem !default;
+
 // MAIN FOOTER
 // --------------------------------------------------------
 $lte-app-footer-padding:           1rem !default;
+$lte-app-footer-padding-compact:   .5rem !default;
 $lte-app-footer-border-top-width:  1px !default;
 $lte-app-footer-border-top-color:  var(--#{$prefix}border-color) !default;
 $lte-app-footer-border-top:        $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
@@ -67,8 +80,12 @@ $lte-app-footer-color:             var(--#{$prefix}secondary-color) !default;
 
 // BRAND LINK
 // --------------------------------------------------------
-$lte-brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y !default;
-$lte-brand-link-padding-x:        $lte-sidebar-padding-x !default;
+$navbar-brand-padding-y-compact:   $navbar-brand-padding-y * .75 !default;
+$navbar-padding-y-compact:         $navbar-padding-y * .5 !default;
+$lte-brand-link-padding-y:         $navbar-brand-padding-y + $navbar-padding-y !default;
+$lte-brand-link-padding-y-compact: $navbar-brand-padding-y-compact + $navbar-padding-y-compact !default;
+$lte-brand-link-padding-x:         $lte-sidebar-padding-x !default;
+$lte-brand-link-padding-x-compact: $lte-sidebar-padding-x-compact !default;
 $lte-brand-link-border-buttom:    1px !default;
 
 

package/src/scss/mixins/_animations.scss

@@ -29,27 +29,22 @@
   }
 }
 
-
 @keyframes fadeIn {
   from {
-    visibility: hidden;
     opacity: 0;
   }
 
   to {
-    visibility: visible;
     opacity: 1;
   }
 }
 
 @keyframes fadeOut {
   from {
-    visibility: visible;
     opacity: 1;
   }
 
   to {
-    visibility: hidden;
     opacity: 0;
   }
 }

package/src/scss/pages/_lockscreen.scss

@@ -0,0 +1,74 @@
+//
+// Pages: Lock Screen
+//
+
+// ADD THIS CLASS TO THE <BODY> TAG
+.lockscreen {
+  // User name [optional]
+  .lockscreen-name {
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .lockscreen-logo {
+    margin-bottom: 25px;
+    font-size: 35px;
+    font-weight: 300;
+    text-align: center;
+
+    a {
+      color: var(--#{$prefix}emphasis-color);
+    }
+  }
+
+  .lockscreen-wrapper {
+    max-width: 400px;
+    margin: 0 auto;
+    margin-top: 10%;
+  }
+
+  // Will contain the image and the sign in form
+  .lockscreen-item {
+    position: relative;
+    width: 290px;
+    padding: 0;
+    margin: 10px auto 30px;
+    background-color: var(--#{$prefix}body-bg);
+    @include border-radius(4px);
+  }
+
+  // User image
+  .lockscreen-image {
+    position: absolute;
+    top: -25px;
+    left: -10px;
+    z-index: 10;
+    padding: 5px;
+    background-color: var(--#{$prefix}body-bg);
+    @include border-radius(50%);
+
+    > img {
+      @include border-radius(50%);
+      width: 70px;
+      height: 70px;
+    }
+  }
+
+  // Contains the password input and the login button
+  .lockscreen-credentials {
+    margin-left: 70px;
+
+    .form-control {
+      border: 0;
+    }
+
+    .btn {
+      padding: 0 10px;
+      border: 0;
+    }
+  }
+
+  .lockscreen-footer {
+    margin-top: 10px;
+  }
+}

package/src/scss/pages/_login_and_register.scss

@@ -46,8 +46,6 @@
 
   .input-group {
     .form-control {
-      border-right: 0;
-
       &:focus {
         box-shadow: none;
 
@@ -82,7 +80,6 @@
     .input-group-text {
       color: var(--#{$prefix}secondary-color);
       background-color: transparent;
-      border-left: 0;
       @include border-top-end-radius($border-radius);
       @include border-bottom-end-radius($border-radius);
       @include transition($input-transition);

package/src/scss/parts/_core.scss

@@ -4,10 +4,12 @@
 
 @import "../root";
 @import "../app-wrapper";
+@import "../app-content";
 @import "../app-header";
 @import "../app-sidebar";
 @import "../app-main";
 @import "../app-footer";
 @import "../dropdown";
 @import "../callouts";
+@import "../compact-mode";
 @import "../docs";

package/src/scss/parts/_pages.scss

@@ -3,3 +3,4 @@
 //
 
 @import "../pages/login_and_register";
+@import "../pages/lockscreen";

package/src/ts/card-widget.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady,
+  onDOMContentLoaded,
   slideUp,
   slideDown
 } from './util/index'
@@ -31,40 +31,33 @@ const CLASS_NAME_EXPANDING = 'expanding-card'
 const CLASS_NAME_WAS_COLLAPSED = 'was-collapsed'
 const CLASS_NAME_MAXIMIZED = 'maximized-card'
 
-const SELECTOR_DATA_REMOVE = '[data-lte-dismiss="card-remove"]'
+const SELECTOR_DATA_REMOVE = '[data-lte-toggle="card-remove"]'
 const SELECTOR_DATA_COLLAPSE = '[data-lte-toggle="card-collapse"]'
 const SELECTOR_DATA_MAXIMIZE = '[data-lte-toggle="card-maximize"]'
 const SELECTOR_CARD = `.${CLASS_NAME_CARD}`
-const SELECTOR_CARD_HEADER = '.card-header'
 const SELECTOR_CARD_BODY = '.card-body'
 const SELECTOR_CARD_FOOTER = '.card-footer'
 
-const Default = {
-  animationSpeed: 500,
-  collapseTrigger: SELECTOR_DATA_COLLAPSE,
-  removeTrigger: SELECTOR_DATA_REMOVE,
-  maximizeTrigger: SELECTOR_DATA_MAXIMIZE,
-  collapseIcon: 'fa-minus',
-  expandIcon: 'fa-plus',
-  maximizeIcon: 'fa-expand',
-  minimizeIcon: 'fa-compress'
-}
-
 type Config = {
   animationSpeed: number;
   collapseTrigger: string;
   removeTrigger: string;
   maximizeTrigger: string;
-  collapseIcon: string;
-  expandIcon: string;
-  maximizeIcon: string;
-  minimizeIcon: string;
+}
+
+const Default: Config = {
+  animationSpeed: 500,
+  collapseTrigger: SELECTOR_DATA_COLLAPSE,
+  removeTrigger: SELECTOR_DATA_REMOVE,
+  maximizeTrigger: SELECTOR_DATA_MAXIMIZE
 }
 
 class CardWidget {
   _element: HTMLElement
   _parent: HTMLElement | undefined
+  _clone: HTMLElement | undefined
   _config: Config
+
   constructor(element: HTMLElement, config: Config) {
     this._element = element
     this._parent = element.closest(SELECTOR_CARD) as HTMLElement | undefined
@@ -98,13 +91,6 @@ class CardWidget {
       }, this._config.animationSpeed)
     }
 
-    const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.collapseIcon}`)
-
-    if (icon) {
-      icon.classList.remove(this._config.collapseIcon)
-      icon.classList.add(this._config.expandIcon)
-    }
-
     this._element?.dispatchEvent(event)
   }
 
@@ -130,13 +116,6 @@ class CardWidget {
       }, this._config.animationSpeed)
     }
 
-    const icon = this._parent?.querySelector(`${SELECTOR_CARD_HEADER} ${this._config.collapseTrigger} .${this._config.expandIcon}`)
-
-    if (icon) {
-      icon.classList.add(this._config.collapseIcon)
-      icon.classList.remove(this._config.expandIcon)
-    }
-
     this._element?.dispatchEvent(event)
   }
 
@@ -163,15 +142,8 @@ class CardWidget {
     const event = new Event(EVENT_MAXIMIZED)
 
     if (this._parent) {
-      const maxElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.maximizeIcon}`)
-
-      if (maxElm) {
-        maxElm.classList.add(this._config.minimizeIcon)
-        maxElm.classList.remove(this._config.maximizeIcon)
-      }
-
-      this._parent.style.height = `${this._parent.scrollHeight}px`
-      this._parent.style.width = `${this._parent.scrollWidth}px`
+      this._parent.style.height = `${this._parent.offsetHeight}px`
+      this._parent.style.width = `${this._parent.offsetWidth}px`
       this._parent.style.transition = 'all .15s'
 
       setTimeout(() => {
@@ -198,14 +170,9 @@ class CardWidget {
     const event = new Event(EVENT_MINIMIZED)
 
     if (this._parent) {
-      const minElm = this._parent.querySelector(`${this._config.maximizeTrigger} .${this._config.minimizeIcon}`)
-
-      if (minElm) {
-        minElm.classList.add(this._config.maximizeIcon)
-        minElm.classList.remove(this._config.minimizeIcon)
-      }
-
-      this._parent.style.cssText = `height: ${this._parent.style.height} !important; width: ${this._parent.style.width} !important; transition: all .15s;`
+      this._parent.style.height = 'auto'
+      this._parent.style.width = 'auto'
+      this._parent.style.transition = 'all .15s'
 
       setTimeout(() => {
         const htmlTag = document.querySelector('html')
@@ -243,7 +210,7 @@ class CardWidget {
  * ====================================================
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const collapseBtn = document.querySelectorAll(SELECTOR_DATA_COLLAPSE)
 
   collapseBtn.forEach(btn => {

package/src/ts/direct-chat.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady
+  onDOMContentLoaded
 } from './util/index'
 
 /**
@@ -58,7 +58,7 @@ class DirectChat {
  * ====================================================
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
 
   button.forEach(btn => {

package/src/ts/layout.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady
+  onDOMContentLoaded
 } from './util/index'
 
 /**
@@ -42,7 +42,7 @@ class Layout {
   }
 }
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const data = new Layout(document.body)
   data.holdTransition()
   setTimeout(() => {

package/src/ts/push-menu.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady
+  onDOMContentLoaded
 } from './util/index'
 
 /**
@@ -24,13 +24,11 @@ const EVENT_COLLAPSE = `collapse${EVENT_KEY}`
 const CLASS_NAME_SIDEBAR_MINI = 'sidebar-mini'
 const CLASS_NAME_SIDEBAR_COLLAPSE = 'sidebar-collapse'
 const CLASS_NAME_SIDEBAR_OPEN = 'sidebar-open'
-const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
 const CLASS_NAME_SIDEBAR_EXPAND = 'sidebar-expand'
 const CLASS_NAME_SIDEBAR_OVERLAY = 'sidebar-overlay'
 const CLASS_NAME_MENU_OPEN = 'menu-open'
 
 const SELECTOR_APP_SIDEBAR = '.app-sidebar'
-const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
 const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
 const SELECTOR_NAV_ITEM = '.nav-item'
 const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
@@ -97,20 +95,6 @@ class PushMenu {
     this._element.dispatchEvent(event)
   }
 
-  sidebarHover() {
-    const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
-
-    if (selSidebar) {
-      selSidebar.addEventListener('mouseover', () => {
-        document.body.classList.add(CLASS_NAME_SIDEBAR_IS_HOVER)
-      })
-
-      selSidebar.addEventListener('mouseout', () => {
-        document.body.classList.remove(CLASS_NAME_SIDEBAR_IS_HOVER)
-      })
-    }
-  }
-
   addSidebarBreakPoint() {
     const sidebarExpandList = document.querySelector(SELECTOR_SIDEBAR_EXPAND)?.classList ?? []
     const sidebarExpand = Array.from(sidebarExpandList).find(className => className.startsWith(CLASS_NAME_SIDEBAR_EXPAND)) ?? ''
@@ -125,7 +109,7 @@ class PushMenu {
         this.expand()
       }
 
-      if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI)) {
+      if (document.body.classList.contains(CLASS_NAME_SIDEBAR_MINI) && document.body.classList.contains(CLASS_NAME_SIDEBAR_COLLAPSE)) {
         this.collapse()
       }
     }
@@ -141,7 +125,6 @@ class PushMenu {
 
   init() {
     this.addSidebarBreakPoint()
-    this.sidebarHover()
   }
 }
 
@@ -151,7 +134,7 @@ class PushMenu {
  * ------------------------------------------------------------------------
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const sidebar = document?.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | undefined
 
   if (sidebar) {

package/src/ts/treeview.ts

@@ -6,7 +6,7 @@
  */
 
 import {
-  domReady,
+  onDOMContentLoaded,
   slideDown,
   slideUp
 } from './util/index'
@@ -27,6 +27,7 @@ const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
 
 const CLASS_NAME_MENU_OPEN = 'menu-open'
 const SELECTOR_NAV_ITEM = '.nav-item'
+const SELECTOR_NAV_LINK = '.nav-link'
 const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
 const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
 
@@ -46,12 +47,10 @@ type Config = {
 class Treeview {
   _element: HTMLElement
   _config: Config
-  _childNavItem: HTMLElement | undefined
 
   constructor(element: HTMLElement, config: Config) {
     this._element = element
     this._config = { ...Default, ...config }
-    this._childNavItem = this._element.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
   }
 
   open(): void {
@@ -59,8 +58,9 @@ class Treeview {
 
     this._element.classList.add(CLASS_NAME_MENU_OPEN)
 
-    if (this._childNavItem) {
-      slideDown(this._childNavItem, this._config.animationSpeed)
+    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    if (childElement) {
+      slideDown(childElement, this._config.animationSpeed)
     }
 
     this._element.dispatchEvent(event)
@@ -71,8 +71,9 @@ class Treeview {
 
     this._element.classList.remove(CLASS_NAME_MENU_OPEN)
 
-    if (this._childNavItem) {
-      slideUp(this._childNavItem, this._config.animationSpeed)
+    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+    if (childElement) {
+      slideUp(childElement, this._config.animationSpeed)
     }
 
     this._element.dispatchEvent(event)
@@ -93,13 +94,18 @@ class Treeview {
  * ------------------------------------------------------------------------
  */
 
-domReady(() => {
+onDOMContentLoaded(() => {
   const button = document.querySelectorAll(SELECTOR_DATA_TOGGLE)
 
   button.forEach(btn => {
     btn.addEventListener('click', event => {
       const target = event.target as HTMLElement
       const targetItem = target.closest(SELECTOR_NAV_ITEM) as HTMLElement | undefined
+      const targetLink = target.closest(SELECTOR_NAV_LINK) as HTMLAnchorElement | undefined
+
+      if (target?.getAttribute('href') === '#' || targetLink?.getAttribute('href') === '#') {
+        event.preventDefault()
+      }
 
       if (targetItem) {
         const data = new Treeview(targetItem, Default)

package/src/ts/util/index.ts

@@ -1,16 +1,19 @@
-const domReady = (callBack: () => void) => {
+const domContentLoadedCallbacks: Array<() => void> = []
+
+const onDOMContentLoaded = (callback: () => void): void => {
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', callBack)
-  } else {
-    callBack()
-  }
-}
+    // add listener on the first call when the document is in loading state
+    if (!domContentLoadedCallbacks.length) {
+      document.addEventListener('DOMContentLoaded', () => {
+        for (const callback of domContentLoadedCallbacks) {
+          callback()
+        }
+      })
+    }
 
-const windowReady = (callBack: () => void) => {
-  if (document.readyState === 'complete') {
-    callBack()
+    domContentLoadedCallbacks.push(callback)
   } else {
-    window.addEventListener('load', callBack)
+    callback()
   }
 }
 
@@ -91,8 +94,7 @@ const slideToggle = (target: HTMLElement, duration = 500) => {
 }
 
 export {
-  domReady,
-  windowReady,
+  onDOMContentLoaded,
   slideUp,
   slideDown,
   slideToggle

package/src/utils/index.js

@@ -1,11 +1,28 @@
 function convertPathToHtml(path) {
-  let htmlpath = ''
+  let count = 0
+  let htmlPath = ''
   while (path.startsWith('../')) {
+    count++
     path = path.slice(3)
-    htmlpath += htmlpath.length < 2 ? '.' : '/..'
   }
 
-  return htmlpath
+  if (count === 2) {
+    htmlPath = '.'
+  }
+
+  if (count === 3) {
+    htmlPath = '..'
+  }
+
+  if (count === 4) {
+    htmlPath = '../..'
+  }
+
+  if (count === 5) {
+    htmlPath = '../../..'
+  }
+
+  return htmlPath
 }
 
 export { convertPathToHtml }

package/src/html/components/docs/color-mode/navbar-html.md

@@ -1,80 +0,0 @@
-```html
-<!-- Navbar -->
-<nav class="app-header navbar navbar-expand bg-body">
-  <div class="container-fluid">
-    <!-- Start navbar links -->
-    <ul class="navbar-nav">
-      <li class="nav-item">
-        <a
-          class="nav-link"
-          data-lte-toggle="sidebar"
-          href="#"
-          role="button"><i class="fa-solid fa-bars"></i></a
-        >
-      </li>
-      <li class="nav-item d-none d-md-block">
-        <a href="#" class="nav-link">Home</a>
-      </li>
-      <li class="nav-item d-none d-md-block">
-        <a href="#" class="nav-link">Contact</a>
-      </li>
-    </ul>
-    <ul class="navbar-nav ms-auto">
-      <li class="nav-item dropdown">
-        <button
-          class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
-          id="bd-theme"
-          type="button"
-          aria-expanded="false"
-          data-bs-toggle="dropdown"
-          data-bs-display="static"
-        >
-          <span class="theme-icon-active">
-            <i class="my-1"></i>
-          </span>
-        </button>
-        <ul
-          class="dropdown-menu dropdown-menu-end"
-          aria-labelledby="bd-theme"
-          style="--bs-dropdown-min-width: 8rem;"
-        >
-          <li>
-            <button
-              type="button"
-              class="dropdown-item d-flex align-items-center active"
-              data-bs-theme-value="light"
-            >
-              <i class="fa-regular fa-sun me-2"></i>
-              Light
-              <i class="fa-solid fa-check ms-auto d-none"></i>
-            </button>
-          </li>
-          <li>
-            <button
-              type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-theme-value="dark"
-            >
-              <i class="fa-solid fa-moon me-2"></i>
-              Dark
-              <i class="fa-solid fa-check ms-auto d-none"></i>
-            </button>
-          </li>
-          <li>
-            <button
-              type="button"
-              class="dropdown-item d-flex align-items-center"
-              data-bs-theme-value="auto"
-            >
-              <i class="fa-solid fa-circle-half-stroke me-2"
-              ></i>
-              Auto
-              <i class="fa-solid fa-check ms-auto d-none"></i>
-            </button>
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-</nav>
-```