admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

package/src/{partials/dashboard/_topbar.html → html/components/dashboard/_topbar.astro}

@@ -1,10 +1,14 @@
+---
+const { path } = Astro.props
+const distPath = path
+---
 <!-- Navbar -->
-<nav class="main-header navbar navbar-expand navbar-light">
+<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-full" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
+        <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>
@@ -13,8 +17,8 @@
         <a href="#" class="nav-link">Contact</a>
       </li>
     </ul>
-
     <!-- End navbar links -->
+
     <ul class="navbar-nav ms-auto">
       <!-- Navbar Search -->
       <li class="nav-item">
@@ -34,7 +38,7 @@
             <!-- Message Start -->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src="@@path/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
+                <img src={distPath + '/assets/img/user1-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
@@ -42,7 +46,7 @@
                   <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
                 </h3>
                 <p class="fs-7">Call me whenever you can...</p>
-                <p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
               </div>
             </div>
             <!-- Message End -->
@@ -52,15 +56,15 @@
             <!-- Message Start -->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src="@@path/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
+                <img src={distPath + '/assets/img/user8-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   John Pierce
-                  <span class="float-end fs-7 text-muted"><i class="fa-solid fa-star"></i></span>
+                  <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
                 </h3>
                 <p class="fs-7">I got your message bro</p>
-                <p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
               </div>
             </div>
             <!-- Message End -->
@@ -70,7 +74,7 @@
             <!-- Message Start -->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src="@@path/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
+                <img src={distPath + '/assets/img/user3-128x128.jpg'}alt="User Avatar" class="img-size-50 rounded-circle me-3">
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
@@ -78,7 +82,7 @@
                   <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
                 </h3>
                 <p class="fs-7">The subject goes here</p>
-                <p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
               </div>
             </div>
             <!-- Message End -->
@@ -98,17 +102,17 @@
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
             <i class="fa-solid fa-envelope me-2"></i> 4 new messages
-            <span class="float-end text-muted fs-7">3 mins</span>
+            <span class="float-end text-secondary fs-7">3 mins</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
             <i class="fa-solid fa-users me-2"></i> 8 friend requests
-            <span class="float-end text-muted fs-7">12 hours</span>
+            <span class="float-end text-secondary fs-7">12 hours</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item">
             <i class="fa-solid fa-file me-2"></i> 3 new reports
-            <span class="float-end text-muted fs-7">2 days</span>
+            <span class="float-end text-secondary fs-7">2 days</span>
           </a>
           <div class="dropdown-divider"></div>
           <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
@@ -116,17 +120,17 @@
       </li>
       <li class="nav-item dropdown user-menu">
         <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
-          <img src="@@path/assets/img/user2-160x160.jpg" class="user-image img-circle shadow" alt="User Image">
+          <img src={distPath + '/assets/img/user2-160x160.jpg'} class="user-image rounded-circle shadow" alt="User Image">
           <span class="d-none d-md-inline">Alexander Pierce</span>
         </a>
         <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <!-- User image -->
           <li class="user-header text-bg-primary">
-            <img src="@@path/assets/img/user2-160x160.jpg" class="img-circle shadow" alt="User Image">
+            <img src={distPath + '/assets/img/user2-160x160.jpg'} class="rounded-circle shadow" alt="User Image">
 
             <p>
               Alexander Pierce - Web Developer
-              <small>Member since Nov. 2012</small>
+              <small>Member since Nov. 2023</small>
             </p>
           </li>
           <!-- Menu Body -->
@@ -151,36 +155,6 @@
           </li>
         </ul>
       </li>
-      <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 opacity-50"></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 opacity-50"></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 opacity-50"></i>
-              Auto
-              <i class="fa-solid fa-check ms-auto d-none"></i>
-            </button>
-          </li>
-        </ul>
-      </li>
       <!-- TODO tackel in v4.1 -->
       <!-- <li class="nav-item">
         <a class="nav-link" data-widget="fullscreen" href="#" role="button">

package/src/html/components/docs/browser-support/index.md

@@ -0,0 +1,22 @@
+AdminLTE comes with the same browser support as Bootstrap 5.
+
+> ##### Excerpt from Bootstrap's official Documentation!
+> Bootstrap supports the __latest, stable releases__ of all major browsers and platforms.
+>
+> For more details [look here](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers).
+
+You can find our supported range of browsers and their versions in [our .browserslistrc file](https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc):
+
+```
+# https://github.com/browserslist/browserslist#readme
+
+>= 0.5%
+last 2 major versions
+not dead
+Chrome >= 60
+Firefox >= 60
+Firefox ESR
+iOS >= 12
+Safari >= 12
+not Explorer <= 11
+```

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

@@ -0,0 +1,80 @@
+```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>
+```

package/src/{partials/_scripts.html → html/components/docs/color-mode/toggle-script.md}

@@ -1,54 +1,14 @@
-<!-- OPTIONAL SCRIPTS -->
-<!-- overlayScrollbars -->
-<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-/dwBbLeVyyWBtWfH3jHdL2oVVmLKoGnEFzoOSL3nJC0=" crossorigin="anonymous"></script>
-
-<!-- OPTIONAL SCRIPT For Bootstrap 5 -->
-<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
-
-<!-- Bootstrap 5 -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
-
-<!-- REQUIRED SCRIPTS -->
-<!-- AdminLTE App -->
-<script src="@@path/js/adminlte.js"></script>
-
-<!-- OPTIONAL SCRIPTS -->
-<script>
-  const SELECTOR_SIDEBAR = '.sidebar'
-  const Default = {
-    scrollbarTheme: 'os-theme-light',
-    scrollbarAutoHide: 'leave'
-  }
-
-  document.addEventListener("DOMContentLoaded", function() {
-    if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
-      OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR), {
-        scrollbars: {
-          theme: Default.scrollbarTheme,
-          autoHide: Default.scrollbarAutoHide,
-          clickScroll: true
-        }
-      })
-    }
-  })
-</script>
-
-<!-- DON'T USE THIS IN PRODUCTION -->
-<script>
-  // Color Mode Toggler
- (() => {
+```js
+// Color Mode Toggler
+(() => {
   'use strict'
-
   const storedTheme = localStorage.getItem('theme')
-
   const getPreferredTheme = () => {
     if (storedTheme) {
       return storedTheme
     }
-
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   }
-
   const setTheme = function (theme) {
     if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
       document.documentElement.setAttribute('data-bs-theme', 'dark')
@@ -56,31 +16,24 @@
       document.documentElement.setAttribute('data-bs-theme', theme)
     }
   }
-
   setTheme(getPreferredTheme())
-
   const showActiveTheme = theme => {
     const activeThemeIcon = document.querySelector('.theme-icon-active i')
-    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const btnToActive = document.querySelector('[data-bs-theme-value="' + theme + '"]')
     const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
-
     document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
       element.classList.remove('active')
     })
-
     btnToActive.classList.add('active')
     activeThemeIcon.setAttribute('class', svgOfActiveBtn)
   }
-
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
     if (storedTheme !== 'light' || storedTheme !== 'dark') {
       setTheme(getPreferredTheme())
     }
   })
-
   window.addEventListener('DOMContentLoaded', () => {
     showActiveTheme(getPreferredTheme())
-
     document.querySelectorAll('[data-bs-theme-value]')
       .forEach(toggle => {
         toggle.addEventListener('click', () => {
@@ -92,4 +45,4 @@
       })
   })
 })()
-</script>
+```

package/src/html/components/docs/components/main-header-1.md

@@ -0,0 +1,159 @@
+```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>
+    <!-- End navbar links -->
+
+    <ul class="navbar-nav ms-auto">
+      <!-- Navbar Search -->
+      <li class="nav-item">
+        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
+          <i class="fa-solid fa-search"></i>
+        </a>
+      </li>
+
+      <!-- Messages Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-bs-toggle="dropdown" href="#">
+          <i class="fa-regular fa-comments"></i>
+          <span class="navbar-badge badge text-bg-danger">3</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="d-flex">
+              <div class="flex-shrink-0">
+                <img src="../../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
+              </div>
+              <div class="flex-grow-1">
+                <h3 class="dropdown-item-title">
+                  Brad Diesel
+                  <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
+                </h3>
+                <p class="fs-7">Call me whenever you can...</p>
+                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="d-flex">
+              <div class="flex-shrink-0">
+                <img src="../../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
+              </div>
+              <div class="flex-grow-1">
+                <h3 class="dropdown-item-title">
+                  John Pierce
+                  <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
+                </h3>
+                <p class="fs-7">I got your message bro</p>
+                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <!-- Message Start -->
+            <div class="d-flex">
+              <div class="flex-shrink-0">
+                <img src="../../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
+              </div>
+              <div class="flex-grow-1">
+                <h3 class="dropdown-item-title">
+                  Nora Silvester
+                  <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
+                </h3>
+                <p class="fs-7">The subject goes here</p>
+                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+              </div>
+            </div>
+            <!-- Message End -->
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
+        </div>
+      </li>
+      <!-- Notifications Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-bs-toggle="dropdown" href="#">
+          <i class="fa-regular fa-bell"></i>
+          <span class="navbar-badge badge text-bg-warning">15</span>
+        </a>
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+          <span class="dropdown-item dropdown-header">15 Notifications</span>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fa-solid fa-envelope me-2"></i> 4 new messages
+            <span class="float-end text-secondary fs-7">3 mins</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fa-solid fa-users me-2"></i> 8 friend requests
+            <span class="float-end text-secondary fs-7">12 hours</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item">
+            <i class="fa-solid fa-file me-2"></i> 3 new reports
+            <span class="float-end text-secondary fs-7">2 days</span>
+          </a>
+          <div class="dropdown-divider"></div>
+          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+        </div>
+      </li>
+      <li class="nav-item dropdown user-menu">
+        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
+          <img src="../../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
+          <span class="d-none d-md-inline">Alexander Pierce</span>
+        </a>
+        <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+          <!-- User image -->
+          <li class="user-header text-bg-primary">
+            <img src="../../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
+
+            <p>
+              Alexander Pierce - Web Developer
+              <small>Member since Nov. 2023</small>
+            </p>
+          </li>
+          <!-- Menu Body -->
+          <li class="user-body">
+            <div class="row">
+              <div class="col-4 text-center">
+                <a href="#">Followers</a>
+              </div>
+              <div class="col-4 text-center">
+                <a href="#">Sales</a>
+              </div>
+              <div class="col-4 text-center">
+                <a href="#">Friends</a>
+              </div>
+            </div>
+            <!-- /.row -->
+          </li>
+          <!-- Menu Footer-->
+          <li class="user-footer">
+            <a href="#" class="btn btn-default btn-flat">Profile</a>
+            <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</nav>
+<!-- /.navbar -->
+```

package/src/html/components/docs/introduction/index.md

@@ -0,0 +1,35 @@
+## Quick start
+There are multiple ways to install AdminLTE.
+
+### Download & Changelog:
+Always Recommended to download from GitHub latest release [AdminLTE 4](https://github.com/ColorlibHQ/AdminLTE/releases/latest) for bug free and latest features.\
+Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.\
+Legacy Releases are [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0) / [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18) / [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1).
+
+## Stable release
+### Grab from [jsdelivr](https://www.jsdelivr.com/package/npm/admin-lte) CDN:
+_**Important Note**: You needed to add separately cdn links for plugins in your project._
+```html
+<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/js/adminlte.min.js" integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw=" crossorigin="anonymous"></script>
+```
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/css/adminlte.min.css" integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg=" crossorigin="anonymous">
+```
+### Using The Command Line:
+_**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or higher._
+#### Via npm
+```bash
+npm install admin-lte@4.0.0-alpha2 --save
+```
+#### Via Yarn
+```bash
+yarn add admin-lte@4.0.0-alpha2
+```
+#### Via Composer
+```bash
+composer require "almasaeed2010/adminlte=4.0.0-alpha2"
+```
+#### Via Git
+```bash
+git clone https://github.com/ColorlibHQ/AdminLTE.git
+```

package/src/html/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />