admin-lte 4.0.0-beta3 → 4.0.0-rc3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/.browserslistrc +9 -4
  2. package/ACCESSIBILITY-COMPLIANCE.md +369 -0
  3. package/CHANGELOG.md +460 -0
  4. package/README.md +50 -7
  5. package/dist/{pages/UI → UI}/general.html +79 -28
  6. package/dist/{pages/UI → UI}/icons.html +76 -25
  7. package/dist/{pages/UI → UI}/timeline.html +80 -29
  8. package/dist/css/adminlte.css +516 -332
  9. package/dist/css/adminlte.css.map +1 -1
  10. package/dist/css/adminlte.min.css +1 -1
  11. package/dist/css/adminlte.min.css.map +1 -1
  12. package/dist/css/adminlte.rtl.css +516 -332
  13. package/dist/css/adminlte.rtl.css.map +1 -1
  14. package/dist/css/adminlte.rtl.min.css +1 -1
  15. package/dist/css/adminlte.rtl.min.css.map +1 -1
  16. package/dist/{pages/docs → docs}/browser-support.html +77 -44
  17. package/dist/{pages/docs → docs}/color-mode.html +82 -50
  18. package/dist/{pages/docs → docs}/components/main-header.html +82 -49
  19. package/dist/{pages/docs → docs}/components/main-sidebar.html +78 -46
  20. package/dist/{pages/docs → docs}/faq.html +76 -42
  21. package/dist/{pages/docs → docs}/how-to-contribute.html +77 -44
  22. package/dist/{pages/docs → docs}/introduction.html +82 -54
  23. package/dist/{pages/docs → docs}/javascript/treeview.html +77 -44
  24. package/dist/{pages/docs → docs}/layout.html +76 -25
  25. package/dist/{pages/docs → docs}/license.html +76 -42
  26. package/dist/{pages/examples → examples}/lockscreen.html +49 -18
  27. package/dist/{pages/examples → examples}/login-v2.html +47 -16
  28. package/dist/{pages/examples → examples}/login.html +47 -16
  29. package/dist/{pages/examples → examples}/register-v2.html +47 -16
  30. package/dist/{pages/examples → examples}/register.html +47 -16
  31. package/dist/{pages/forms → forms}/general.html +76 -25
  32. package/dist/{pages/generate → generate}/theme.html +193 -24
  33. package/dist/{pages/index.html → index.html} +90 -57
  34. package/dist/{pages/index2.html → index2.html} +99 -48
  35. package/dist/{pages/index3.html → index3.html} +80 -29
  36. package/dist/js/adminlte.js +795 -345
  37. package/dist/js/adminlte.js.map +1 -1
  38. package/dist/js/adminlte.min.js +3 -3
  39. package/dist/js/adminlte.min.js.map +1 -1
  40. package/dist/{pages/layout → layout}/collapsed-sidebar.html +75 -24
  41. package/dist/layout/fixed-complete.html +883 -0
  42. package/dist/layout/fixed-footer.html +880 -0
  43. package/dist/layout/fixed-header.html +880 -0
  44. package/dist/{pages/layout → layout}/fixed-sidebar.html +76 -25
  45. package/dist/{pages/layout → layout}/layout-custom-area.html +76 -25
  46. package/dist/{pages/layout → layout}/layout-rtl.html +76 -25
  47. package/dist/{pages/layout → layout}/logo-switch.html +55 -24
  48. package/dist/{pages/layout → layout}/sidebar-mini.html +75 -24
  49. package/dist/{pages/layout → layout}/unfixed-sidebar.html +76 -25
  50. package/dist/{pages/tables → tables}/simple.html +76 -25
  51. package/dist/{pages/widgets → widgets}/cards.html +76 -25
  52. package/dist/{pages/widgets → widgets}/info-box.html +76 -25
  53. package/dist/{pages/widgets → widgets}/small-box.html +76 -25
  54. package/eslint.config.js +82 -0
  55. package/package.json +42 -37
  56. package/src/scss/_accessibility.scss +292 -0
  57. package/src/scss/_app-footer.scss +8 -0
  58. package/src/scss/_app-header.scss +8 -0
  59. package/src/scss/_app-sidebar.scss +12 -0
  60. package/src/scss/_table.scss +1 -9
  61. package/src/scss/_variables.scss +2 -1
  62. package/src/scss/adminlte.scss +3 -0
  63. package/src/ts/accessibility.ts +533 -0
  64. package/src/ts/adminlte.ts +48 -9
  65. package/src/ts/card-widget.ts +1 -2
  66. package/src/ts/push-menu.ts +1 -2
  67. package/src/ts/treeview.ts +13 -2
  68. package/src/ts/util/index.ts +39 -7
  69. package/.astro/content-assets.mjs +0 -1
  70. package/.astro/content-modules.mjs +0 -1
  71. package/.astro/content.d.ts +0 -166
  72. package/.astro/data-store.json +0 -1
  73. package/.astro/settings.json +0 -5
  74. package/.astro/types.d.ts +0 -2
  75. package/adminlte-v4.0.0-beta1-with-dist.zip +0 -0
  76. package/adminlte-v4.0.0-beta3.zip +0 -0
@@ -4,45 +4,55 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE v4 | Dashboard</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE v4 | Dashboard" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="./css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
29
41
  <link
30
42
  rel="stylesheet"
31
- href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
32
- integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
43
+ href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
33
44
  crossorigin="anonymous"
34
45
  />
35
46
  <!--end::Third Party Plugin(OverlayScrollbars)-->
36
47
  <!--begin::Third Party Plugin(Bootstrap Icons)-->
37
48
  <link
38
49
  rel="stylesheet"
39
- href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
40
- integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
50
+ href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
41
51
  crossorigin="anonymous"
42
52
  />
43
53
  <!--end::Third Party Plugin(Bootstrap Icons)-->
44
54
  <!--begin::Required Plugin(AdminLTE)-->
45
- <link rel="stylesheet" href="../../dist/css/adminlte.css" />
55
+ <link rel="stylesheet" href="./css/adminlte.css" />
46
56
  <!--end::Required Plugin(AdminLTE)-->
47
57
  <!-- apexcharts -->
48
58
  <link
@@ -61,7 +71,7 @@
61
71
  </head>
62
72
  <!--end::Head-->
63
73
  <!--begin::Body-->
64
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
74
+ <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
65
75
  <!--begin::App Wrapper-->
66
76
  <div class="app-wrapper">
67
77
  <!--begin::Header-->
@@ -100,7 +110,7 @@
100
110
  <div class="d-flex">
101
111
  <div class="flex-shrink-0">
102
112
  <img
103
- src="../../dist/assets/img/user1-128x128.jpg"
113
+ src="/assets/img/user1-128x128.jpg"
104
114
  alt="User Avatar"
105
115
  class="img-size-50 rounded-circle me-3"
106
116
  />
@@ -126,7 +136,7 @@
126
136
  <div class="d-flex">
127
137
  <div class="flex-shrink-0">
128
138
  <img
129
- src="../../dist/assets/img/user8-128x128.jpg"
139
+ src="/assets/img/user8-128x128.jpg"
130
140
  alt="User Avatar"
131
141
  class="img-size-50 rounded-circle me-3"
132
142
  />
@@ -152,7 +162,7 @@
152
162
  <div class="d-flex">
153
163
  <div class="flex-shrink-0">
154
164
  <img
155
- src="../../dist/assets/img/user3-128x128.jpg"
165
+ src="/assets/img/user3-128x128.jpg"
156
166
  alt="User Avatar"
157
167
  class="img-size-50 rounded-circle me-3"
158
168
  />
@@ -217,7 +227,7 @@
217
227
  <li class="nav-item dropdown user-menu">
218
228
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
219
229
  <img
220
- src="../../dist/assets/img/user2-160x160.jpg"
230
+ src="/assets/img/user2-160x160.jpg"
221
231
  class="user-image rounded-circle shadow"
222
232
  alt="User Image"
223
233
  />
@@ -227,7 +237,7 @@
227
237
  <!--begin::User Image-->
228
238
  <li class="user-header text-bg-primary">
229
239
  <img
230
- src="../../dist/assets/img/user2-160x160.jpg"
240
+ src="/assets/img/user2-160x160.jpg"
231
241
  class="rounded-circle shadow"
232
242
  alt="User Image"
233
243
  />
@@ -271,7 +281,7 @@
271
281
  <a href="./index.html" class="brand-link">
272
282
  <!--begin::Brand Image-->
273
283
  <img
274
- src="../../dist/assets/img/AdminLTELogo.png"
284
+ src="/assets/img/AdminLTELogo.png"
275
285
  alt="AdminLTE Logo"
276
286
  class="brand-image opacity-75 shadow"
277
287
  />
@@ -290,8 +300,10 @@
290
300
  <ul
291
301
  class="nav sidebar-menu flex-column"
292
302
  data-lte-toggle="treeview"
293
- role="menu"
303
+ role="navigation"
304
+ aria-label="Main navigation"
294
305
  data-accordion="false"
306
+ id="navigation"
295
307
  >
296
308
  <li class="nav-item menu-open">
297
309
  <a href="#" class="nav-link active">
@@ -379,6 +391,24 @@
379
391
  <p>Fixed Sidebar</p>
380
392
  </a>
381
393
  </li>
394
+ <li class="nav-item">
395
+ <a href="./layout/fixed-header.html" class="nav-link">
396
+ <i class="nav-icon bi bi-circle"></i>
397
+ <p>Fixed Header</p>
398
+ </a>
399
+ </li>
400
+ <li class="nav-item">
401
+ <a href="./layout/fixed-footer.html" class="nav-link">
402
+ <i class="nav-icon bi bi-circle"></i>
403
+ <p>Fixed Footer</p>
404
+ </a>
405
+ </li>
406
+ <li class="nav-item">
407
+ <a href="./layout/fixed-complete.html" class="nav-link">
408
+ <i class="nav-icon bi bi-circle"></i>
409
+ <p>Fixed Complete</p>
410
+ </a>
411
+ </li>
382
412
  <li class="nav-item">
383
413
  <a href="./layout/layout-custom-area.html" class="nav-link">
384
414
  <i class="nav-icon bi bi-circle"></i>
@@ -906,7 +936,7 @@
906
936
  <!-- /.direct-chat-infos -->
907
937
  <img
908
938
  class="direct-chat-img"
909
- src="../../dist/assets/img/user1-128x128.jpg"
939
+ src="/assets/img/user1-128x128.jpg"
910
940
  alt="message user image"
911
941
  />
912
942
  <!-- /.direct-chat-img -->
@@ -925,7 +955,7 @@
925
955
  <!-- /.direct-chat-infos -->
926
956
  <img
927
957
  class="direct-chat-img"
928
- src="../../dist/assets/img/user3-128x128.jpg"
958
+ src="/assets/img/user3-128x128.jpg"
929
959
  alt="message user image"
930
960
  />
931
961
  <!-- /.direct-chat-img -->
@@ -942,7 +972,7 @@
942
972
  <!-- /.direct-chat-infos -->
943
973
  <img
944
974
  class="direct-chat-img"
945
- src="../../dist/assets/img/user1-128x128.jpg"
975
+ src="/assets/img/user1-128x128.jpg"
946
976
  alt="message user image"
947
977
  />
948
978
  <!-- /.direct-chat-img -->
@@ -961,7 +991,7 @@
961
991
  <!-- /.direct-chat-infos -->
962
992
  <img
963
993
  class="direct-chat-img"
964
- src="../../dist/assets/img/user3-128x128.jpg"
994
+ src="/assets/img/user3-128x128.jpg"
965
995
  alt="message user image"
966
996
  />
967
997
  <!-- /.direct-chat-img -->
@@ -978,7 +1008,7 @@
978
1008
  <a href="#">
979
1009
  <img
980
1010
  class="contacts-list-img"
981
- src="../../dist/assets/img/user1-128x128.jpg"
1011
+ src="/assets/img/user1-128x128.jpg"
982
1012
  alt="User Avatar"
983
1013
  />
984
1014
  <div class="contacts-list-info">
@@ -996,7 +1026,7 @@
996
1026
  <a href="#">
997
1027
  <img
998
1028
  class="contacts-list-img"
999
- src="../../dist/assets/img/user7-128x128.jpg"
1029
+ src="/assets/img/user7-128x128.jpg"
1000
1030
  alt="User Avatar"
1001
1031
  />
1002
1032
  <div class="contacts-list-info">
@@ -1014,7 +1044,7 @@
1014
1044
  <a href="#">
1015
1045
  <img
1016
1046
  class="contacts-list-img"
1017
- src="../../dist/assets/img/user3-128x128.jpg"
1047
+ src="/assets/img/user3-128x128.jpg"
1018
1048
  alt="User Avatar"
1019
1049
  />
1020
1050
  <div class="contacts-list-info">
@@ -1032,7 +1062,7 @@
1032
1062
  <a href="#">
1033
1063
  <img
1034
1064
  class="contacts-list-img"
1035
- src="../../dist/assets/img/user5-128x128.jpg"
1065
+ src="/assets/img/user5-128x128.jpg"
1036
1066
  alt="User Avatar"
1037
1067
  />
1038
1068
  <div class="contacts-list-info">
@@ -1050,7 +1080,7 @@
1050
1080
  <a href="#">
1051
1081
  <img
1052
1082
  class="contacts-list-img"
1053
- src="../../dist/assets/img/user6-128x128.jpg"
1083
+ src="/assets/img/user6-128x128.jpg"
1054
1084
  alt="User Avatar"
1055
1085
  />
1056
1086
  <div class="contacts-list-info">
@@ -1068,7 +1098,7 @@
1068
1098
  <a href="#">
1069
1099
  <img
1070
1100
  class="contacts-list-img"
1071
- src="../../dist/assets/img/user8-128x128.jpg"
1101
+ src="/assets/img/user8-128x128.jpg"
1072
1102
  alt="User Avatar"
1073
1103
  />
1074
1104
  <div class="contacts-list-info">
@@ -1161,7 +1191,7 @@
1161
1191
  <!--end::To the end-->
1162
1192
  <!--begin::Copyright-->
1163
1193
  <strong>
1164
- Copyright &copy; 2014-2024&nbsp;
1194
+ Copyright &copy; 2014-2025&nbsp;
1165
1195
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1166
1196
  </strong>
1167
1197
  All rights reserved.
@@ -1173,24 +1203,21 @@
1173
1203
  <!--begin::Script-->
1174
1204
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
1175
1205
  <script
1176
- src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
1177
- integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
1206
+ src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
1178
1207
  crossorigin="anonymous"
1179
1208
  ></script>
1180
1209
  <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
1181
1210
  <script
1182
1211
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
1183
- integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
1184
1212
  crossorigin="anonymous"
1185
1213
  ></script>
1186
1214
  <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
1187
1215
  <script
1188
- src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
1189
- integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
1216
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
1190
1217
  crossorigin="anonymous"
1191
1218
  ></script>
1192
1219
  <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
1193
- <script src="../../dist/js/adminlte.js"></script>
1220
+ <script src="./js/adminlte.js"></script>
1194
1221
  <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
1195
1222
  <script>
1196
1223
  const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
@@ -1201,7 +1228,7 @@
1201
1228
  };
1202
1229
  document.addEventListener('DOMContentLoaded', function () {
1203
1230
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1204
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1231
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1205
1232
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1206
1233
  scrollbars: {
1207
1234
  theme: Default.scrollbarTheme,
@@ -1212,22 +1239,42 @@
1212
1239
  }
1213
1240
  });
1214
1241
  </script>
1215
- <!--end::OverlayScrollbars Configure-->
1242
+ <!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
1243
+ <script>
1244
+ document.addEventListener('DOMContentLoaded', () => {
1245
+ // Find the link tag for the main AdminLTE CSS file.
1246
+ const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
1247
+ if (!cssLink) {
1248
+ return; // Exit if the link isn't found
1249
+ }
1250
+
1251
+ // Extract the base path from the CSS href.
1252
+ // e.g., from "../css/adminlte.css", we get "../"
1253
+ // e.g., from "./css/adminlte.css", we get "./"
1254
+ const cssHref = cssLink.getAttribute('href');
1255
+ const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
1256
+
1257
+ // Find all images with absolute paths and fix them.
1258
+ document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
1259
+ const originalSrc = img.getAttribute('src');
1260
+ if (originalSrc) {
1261
+ const relativeSrc = originalSrc.slice(1); // Remove leading '/'
1262
+ img.src = deploymentPath + relativeSrc;
1263
+ }
1264
+ });
1265
+ });
1266
+ </script>
1216
1267
  <!-- OPTIONAL SCRIPTS -->
1217
1268
  <!-- sortablejs -->
1218
1269
  <script
1219
1270
  src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
1220
- integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
1221
1271
  crossorigin="anonymous"
1222
1272
  ></script>
1223
1273
  <!-- sortablejs -->
1224
1274
  <script>
1225
- const connectedSortables = document.querySelectorAll('.connectedSortable');
1226
- connectedSortables.forEach((connectedSortable) => {
1227
- let sortable = new Sortable(connectedSortable, {
1228
- group: 'shared',
1229
- handle: '.card-header',
1230
- });
1275
+ new Sortable(document.querySelector('.connectedSortable'), {
1276
+ group: 'shared',
1277
+ handle: '.card-header',
1231
1278
  });
1232
1279
 
1233
1280
  const cardHeaders = document.querySelectorAll('.connectedSortable .card-header');
@@ -1313,22 +1360,8 @@
1313
1360
  ></script>
1314
1361
  <!-- jsvectormap -->
1315
1362
  <script>
1316
- const visitorsData = {
1317
- US: 398, // USA
1318
- SA: 400, // Saudi Arabia
1319
- CA: 1000, // Canada
1320
- DE: 500, // Germany
1321
- FR: 760, // France
1322
- CN: 300, // China
1323
- AU: 700, // Australia
1324
- BR: 600, // Brazil
1325
- IN: 800, // India
1326
- GB: 320, // Great Britain
1327
- RU: 3000, // Russia
1328
- };
1329
-
1330
1363
  // World map by jsVectorMap
1331
- const map = new jsVectorMap({
1364
+ new jsVectorMap({
1332
1365
  selector: '#world-map',
1333
1366
  map: 'world',
1334
1367
  });