admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

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 (151) hide show
  1. package/.bundlewatch.config.json +2 -2
  2. package/.cache/.eslintcache +1 -0
  3. package/.cache/.stylelintcache +1 -0
  4. package/.eslintignore +1 -0
  5. package/.eslintrc.json +16 -0
  6. package/.stylelintrc.json +47 -0
  7. package/LICENSE +1 -1
  8. package/README.md +5 -6
  9. package/dist/css/adminlte.css +2383 -2754
  10. package/dist/css/adminlte.css.map +1 -1
  11. package/dist/css/adminlte.min.css +2 -2
  12. package/dist/css/adminlte.min.css.map +1 -1
  13. package/dist/css/{rtl/adminlte.rtl.css → adminlte.rtl.css} +2377 -2749
  14. package/dist/css/adminlte.rtl.css.map +1 -0
  15. package/dist/css/adminlte.rtl.min.css +7 -0
  16. package/dist/css/adminlte.rtl.min.css.map +1 -0
  17. package/dist/js/adminlte.js +173 -182
  18. package/dist/js/adminlte.js.map +1 -1
  19. package/dist/js/adminlte.min.js +6 -1
  20. package/dist/js/adminlte.min.js.map +1 -1
  21. package/dist/pages/UI/timeline.html +698 -0
  22. package/dist/pages/docs/browser-support.html +614 -0
  23. package/dist/pages/docs/color-mode.html +855 -0
  24. package/dist/pages/docs/components/main-header.html +926 -0
  25. package/dist/pages/docs/layout.html +617 -0
  26. package/dist/pages/docs.html +617 -0
  27. package/dist/pages/examples/login.html +114 -187
  28. package/dist/pages/examples/register.html +117 -190
  29. package/dist/pages/forms/general.html +598 -647
  30. package/dist/pages/index.html +1091 -0
  31. package/dist/pages/index2.html +1452 -0
  32. package/dist/pages/index3.html +950 -0
  33. package/dist/pages/layout/fixed-sidebar.html +590 -638
  34. package/dist/pages/layout/layout-rtl.html +623 -0
  35. package/dist/pages/layout/sidebar-mini.html +623 -0
  36. package/dist/pages/layout/unfixed-sidebar.html +589 -638
  37. package/dist/pages/tables/simple.html +837 -938
  38. package/dist/pages/widgets/cards.html +814 -698
  39. package/dist/pages/widgets/info-box.html +864 -951
  40. package/dist/pages/widgets/small-box.html +625 -678
  41. package/index.html +1 -6
  42. package/package.json +53 -36
  43. package/src/config/assets.config.mjs +8 -0
  44. package/src/config/astro.config.mjs +17 -0
  45. package/src/config/postcss.config.mjs +15 -0
  46. package/src/config/rollup.config.js +20 -0
  47. package/src/html/.eslintrc.json +24 -0
  48. package/src/html/.tsconfig.json +4 -0
  49. package/src/html/components/_head.astro +31 -0
  50. package/src/html/components/_scripts.astro +40 -0
  51. package/src/html/components/dashboard/_footer.astro +12 -0
  52. package/src/html/components/dashboard/_sidenav.astro +323 -0
  53. package/src/{partials/dashboard/_topbar.html → html/components/dashboard/_topbar.astro} +20 -46
  54. package/src/html/components/docs/browser-support/index.md +22 -0
  55. package/src/html/components/docs/color-mode/navbar-html.md +80 -0
  56. package/src/{partials/_scripts.html → html/components/docs/color-mode/toggle-script.md} +5 -52
  57. package/src/html/components/docs/components/main-header-1.md +159 -0
  58. package/src/html/components/docs/introduction/index.md +35 -0
  59. package/src/html/env.d.ts +1 -0
  60. package/src/html/pages/UI/timeline.astro +158 -0
  61. package/src/html/pages/docs/browser-support.astro +58 -0
  62. package/src/html/pages/docs/color-mode.astro +224 -0
  63. package/src/html/pages/docs/components/main-header.astro +232 -0
  64. package/src/html/pages/docs/index.astro +58 -0
  65. package/src/html/pages/docs/layout.astro +77 -0
  66. package/src/{pages/examples/login.html → html/pages/examples/login.astro} +13 -13
  67. package/src/{pages/examples/register.html → html/pages/examples/register.astro} +13 -13
  68. package/src/{pages/forms/general.html → html/pages/forms/general.astro} +26 -30
  69. package/src/{index.html → html/pages/index.astro} +266 -189
  70. package/src/{index2.html → html/pages/index2.astro} +229 -284
  71. package/src/{index3.html → html/pages/index3.astro} +151 -169
  72. package/src/{pages/layout/fixed-sidebar.html → html/pages/layout/fixed-sidebar.astro} +26 -29
  73. package/src/html/pages/layout/layout-rtl.astro +84 -0
  74. package/src/html/pages/layout/sidebar-mini.astro +83 -0
  75. package/src/{pages/layout/unfixed-sidebar.html → html/pages/layout/unfixed-sidebar.astro} +26 -30
  76. package/src/{pages/tables/simple.html → html/pages/tables/simple.astro} +26 -30
  77. package/src/html/pages/widgets/cards.astro +308 -0
  78. package/src/{pages/widgets/info-box.html → html/pages/widgets/info-box.astro} +26 -31
  79. package/src/html/pages/widgets/small-box.astro +121 -0
  80. package/src/scss/_app-footer.scss +15 -0
  81. package/src/scss/_app-header.scss +26 -0
  82. package/src/scss/_app-main.scss +20 -0
  83. package/src/scss/_app-sidebar.scss +429 -0
  84. package/src/scss/{_wrapper.scss → _app-wrapper.scss} +8 -4
  85. package/src/scss/_bootstrap-variables.scss +41 -26
  86. package/src/scss/_callouts.scss +34 -0
  87. package/src/scss/_cards.scss +30 -224
  88. package/src/scss/_direct-chat.scss +15 -9
  89. package/src/scss/_docs.scss +4 -0
  90. package/src/scss/_dropdown.scss +7 -5
  91. package/src/scss/_info-box.scss +2 -6
  92. package/src/scss/_miscellaneous.scss +0 -455
  93. package/src/scss/_mixins.scss +0 -6
  94. package/src/scss/_root.scss +2 -58
  95. package/src/scss/_small-box.scss +15 -38
  96. package/src/scss/_table.scss +0 -50
  97. package/src/scss/_timeline.scss +120 -0
  98. package/src/scss/_variables-dark.scss +15 -8
  99. package/src/scss/_variables.scss +30 -135
  100. package/src/scss/adminlte.scss +1 -1
  101. package/src/scss/mixins/_animations.scss +4 -0
  102. package/src/scss/mixins/_scrollbar.scss +2 -2
  103. package/src/scss/pages/_login_and_register.scss +1 -2
  104. package/src/scss/parts/_core.scss +7 -15
  105. package/src/scss/parts/_extra-components.scss +1 -2
  106. package/src/ts/adminlte.ts +0 -2
  107. package/src/ts/card-widget.ts +42 -18
  108. package/src/ts/direct-chat.ts +33 -8
  109. package/src/ts/layout.ts +6 -4
  110. package/src/ts/push-menu.ts +94 -145
  111. package/src/ts/treeview.ts +17 -23
  112. package/src/ts/util/index.ts +2 -2
  113. package/src/utils/index.js +11 -0
  114. package/tsconfig.json +11 -3
  115. package/.stylelintrc +0 -40
  116. package/CHECKLIST.md +0 -0
  117. package/dist/css/rtl/adminlte.rtl.css.map +0 -1
  118. package/dist/css/rtl/adminlte.rtl.min.css +0 -7
  119. package/dist/css/rtl/adminlte.rtl.min.css.map +0 -1
  120. package/dist/index.html +0 -1065
  121. package/dist/index2.html +0 -1629
  122. package/dist/index3.html +0 -1015
  123. package/gulpfile.js +0 -315
  124. package/src/pages/widgets/cards.html +0 -143
  125. package/src/pages/widgets/small-box.html +0 -124
  126. package/src/partials/_head.html +0 -31
  127. package/src/partials/dashboard/_footer.html +0 -9
  128. package/src/partials/dashboard/_sidenav.html +0 -244
  129. package/src/scss/_brand-container.scss +0 -72
  130. package/src/scss/_content-header.scss +0 -9
  131. package/src/scss/_content-wrapper.scss +0 -6
  132. package/src/scss/_content.scss +0 -3
  133. package/src/scss/_layout-fixed.scss +0 -43
  134. package/src/scss/_layout-mobile.scss +0 -22
  135. package/src/scss/_main-footer.scss +0 -28
  136. package/src/scss/_main-header.scss +0 -40
  137. package/src/scss/_main-sidebar.scss +0 -63
  138. package/src/scss/_nav-sidebar.scss +0 -66
  139. package/src/scss/_products.scss +0 -55
  140. package/src/scss/_sidebar-close.scss +0 -6
  141. package/src/scss/_sidebar-collapse.scss +0 -120
  142. package/src/scss/_sidebar-horizontal.scss +0 -67
  143. package/src/scss/_sidebar.scss +0 -11
  144. package/src/scss/_users-list.scss +0 -45
  145. package/src/scss/mixins/_brand-variant.scss +0 -9
  146. package/src/scss/mixins/_cards.scss +0 -53
  147. package/src/scss/mixins/_direct-chat.scss +0 -17
  148. package/src/scss/mixins/_header-variant.scss +0 -22
  149. package/src/scss/mixins/_nav-treeview-dark.scss +0 -87
  150. package/src/scss/mixins/_nav-treeview-light.scss +0 -89
  151. package/src/scss/mixins/_sidebar-color.scss +0 -9
package/src/{index3.html → html/pages/index3.astro} RENAMED
@@ -1,32 +1,35 @@
1
+ ---
2
+ import Head from '@components/_head.astro';
3
+ import Footer from '@components/dashboard/_footer.astro';
4
+ import Topbar from '@components/dashboard/_topbar.astro';
5
+ import Sidenav from '@components/dashboard/_sidenav.astro';
6
+ import Scripts from '@components/_scripts.astro';
7
+
8
+ const title = 'AdminLTE | Dashboard v3'
9
+ const path = '../../dist'
10
+ const mainPage = 'dashboard'
11
+ const page = 'index3'
12
+ ---
1
13
  <!DOCTYPE html>
2
14
  <html lang="en">
3
- <!-- For RTL verison -->
4
- <!-- <html lang="en" dir="rtl"> -->
5
15
  <head>
6
- @@include('./_head.html', {
7
- "path": ".",
8
- "title": "AdminLTE 4 | Dashboard 3"
9
- })
10
- <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
16
+ <Head title={title} path={path} />
17
+
18
+ <!-- apexcharts -->
19
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
11
20
  </head>
12
- <body class="layout-fixed">
13
- <div class="wrapper">
14
- @@include('./dashboard/_topbar.html', {
15
- "path": "."
16
- })
17
21
 
18
- @@include('./dashboard/_sidenav.html', {
19
- "mainPage": "dashboard",
20
- "page": "index3",
21
- "path": "."
22
- })
22
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
23
+ <div class="app-wrapper">
24
+ <Topbar path={path} />
25
+ <Sidenav path={path} mainPage={mainPage} page={page} />
23
26
  <!-- Main content -->
24
- <main class="content-wrapper">
25
- <div class="content-header">
27
+ <main class="app-main">
28
+ <div class="app-content-header">
26
29
  <div class="container-fluid">
27
- <div class="row mb-2">
30
+ <div class="row">
28
31
  <div class="col-sm-6">
29
- <h3>Dashboard v3</h3>
32
+ <h3 class="mb-0">Dashboard v3</h3>
30
33
  </div>
31
34
  <div class="col-sm-6">
32
35
  <ol class="breadcrumb float-sm-end">
@@ -37,7 +40,7 @@
37
40
  </div>
38
41
  </div>
39
42
  </div>
40
- <div class="content">
43
+ <div class="app-content">
41
44
  <div class="container-fluid">
42
45
  <div class="row">
43
46
  <div class="col-lg-6">
@@ -51,20 +54,20 @@
51
54
  <div class="card-body">
52
55
  <div class="d-flex">
53
56
  <p class="d-flex flex-column">
54
- <span class="fw-bold text-lg">820</span>
57
+ <span class="fw-bold fs-5">820</span>
55
58
  <span>Visitors Over Time</span>
56
59
  </p>
57
60
  <p class="ms-auto d-flex flex-column text-end">
58
61
  <span class="text-success">
59
62
  <i class="fa-solid fa-arrow-up"></i> 12.5%
60
63
  </span>
61
- <span class="text-muted">Since last week</span>
64
+ <span class="text-secondary">Since last week</span>
62
65
  </p>
63
66
  </div>
64
67
  <!-- /.d-flex -->
65
68
 
66
69
  <div class="position-relative mb-4">
67
- <canvas id="visitors-chart" height="200"></canvas>
70
+ <div id="visitors-chart"></div>
68
71
  </div>
69
72
 
70
73
  <div class="d-flex flex-row justify-content-end">
@@ -73,7 +76,7 @@
73
76
  </span>
74
77
 
75
78
  <span>
76
- <i class="fa-solid fa-square text-gray"></i> Last Week
79
+ <i class="fa-solid fa-square text-secondary"></i> Last Week
77
80
  </span>
78
81
  </div>
79
82
  </div>
@@ -105,7 +108,7 @@
105
108
  <tbody>
106
109
  <tr>
107
110
  <td>
108
- <img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
111
+ <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
109
112
  Some Product
110
113
  </td>
111
114
  <td>$13 USD</td>
@@ -117,14 +120,14 @@
117
120
  12,000 Sold
118
121
  </td>
119
122
  <td>
120
- <a href="#" class="text-muted">
123
+ <a href="#" class="text-secondary">
121
124
  <i class="fa-solid fa-search"></i>
122
125
  </a>
123
126
  </td>
124
127
  </tr>
125
128
  <tr>
126
129
  <td>
127
- <img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
130
+ <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
128
131
  Another Product
129
132
  </td>
130
133
  <td>$29 USD</td>
@@ -136,14 +139,14 @@
136
139
  123,234 Sold
137
140
  </td>
138
141
  <td>
139
- <a href="#" class="text-muted">
142
+ <a href="#" class="text-secondary">
140
143
  <i class="fa-solid fa-search"></i>
141
144
  </a>
142
145
  </td>
143
146
  </tr>
144
147
  <tr>
145
148
  <td>
146
- <img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
149
+ <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
147
150
  Amazing Product
148
151
  </td>
149
152
  <td>$1,230 USD</td>
@@ -155,14 +158,14 @@
155
158
  198 Sold
156
159
  </td>
157
160
  <td>
158
- <a href="#" class="text-muted">
161
+ <a href="#" class="text-secondary">
159
162
  <i class="fa-solid fa-search"></i>
160
163
  </a>
161
164
  </td>
162
165
  </tr>
163
166
  <tr>
164
167
  <td>
165
- <img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
168
+ <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
166
169
  Perfect Item
167
170
  <span class="badge text-bg-danger">NEW</span>
168
171
  </td>
@@ -175,7 +178,7 @@
175
178
  87 Sold
176
179
  </td>
177
180
  <td>
178
- <a href="#" class="text-muted">
181
+ <a href="#" class="text-secondary">
179
182
  <i class="fa-solid fa-search"></i>
180
183
  </a>
181
184
  </td>
@@ -198,20 +201,20 @@
198
201
  <div class="card-body">
199
202
  <div class="d-flex">
200
203
  <p class="d-flex flex-column">
201
- <span class="fw-bold text-lg">$18,230.00</span>
204
+ <span class="fw-bold fs-5">$18,230.00</span>
202
205
  <span>Sales Over Time</span>
203
206
  </p>
204
207
  <p class="ms-auto d-flex flex-column text-end">
205
208
  <span class="text-success">
206
209
  <i class="fa-solid fa-arrow-up"></i> 33.1%
207
210
  </span>
208
- <span class="text-muted">Since last month</span>
211
+ <span class="text-secondary">Since Past Year</span>
209
212
  </p>
210
213
  </div>
211
214
  <!-- /.d-flex -->
212
215
 
213
216
  <div class="position-relative mb-4">
214
- <canvas id="sales-chart" height="200"></canvas>
217
+ <div id="sales-chart"></div>
215
218
  </div>
216
219
 
217
220
  <div class="d-flex flex-row justify-content-end">
@@ -220,7 +223,7 @@
220
223
  </span>
221
224
 
222
225
  <span>
223
- <i class="fa-solid fa-square text-gray"></i> Last year
226
+ <i class="fa-solid fa-square text-secondary"></i> Last year
224
227
  </span>
225
228
  </div>
226
229
  </div>
@@ -242,37 +245,43 @@
242
245
  <div class="card-body">
243
246
  <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
244
247
  <p class="text-success fs-2">
245
- <i class="ion ion-ios-refresh-empty"></i>
248
+ <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
249
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"></path>
250
+ </svg>
246
251
  </p>
247
252
  <p class="d-flex flex-column text-end">
248
253
  <span class="fw-bold">
249
254
  <i class="ion ion-android-arrow-up text-success"></i> 12%
250
255
  </span>
251
- <span class="text-muted">CONVERSION RATE</span>
256
+ <span class="text-secondary">CONVERSION RATE</span>
252
257
  </p>
253
258
  </div>
254
259
  <!-- /.d-flex -->
255
260
  <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
256
261
  <p class="text-warning fs-2">
257
- <i class="ion ion-ios-cart-outline"></i>
262
+ <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
263
+ <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"></path>
264
+ </svg>
258
265
  </p>
259
266
  <p class="d-flex flex-column text-end">
260
267
  <span class="fw-bold">
261
268
  <i class="ion ion-android-arrow-up text-warning"></i> 0.8%
262
269
  </span>
263
- <span class="text-muted">SALES RATE</span>
270
+ <span class="text-secondary">SALES RATE</span>
264
271
  </p>
265
272
  </div>
266
273
  <!-- /.d-flex -->
267
274
  <div class="d-flex justify-content-between align-items-center mb-0">
268
275
  <p class="text-danger fs-2">
269
- <i class="ion ion-ios-people-outline"></i>
276
+ <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
277
+ <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
278
+ </svg>
270
279
  </p>
271
280
  <p class="d-flex flex-column text-end">
272
281
  <span class="fw-bold">
273
282
  <i class="ion ion-android-arrow-down text-danger"></i> 1%
274
283
  </span>
275
- <span class="text-muted">REGISTRATION RATE</span>
284
+ <span class="text-secondary">REGISTRATION RATE</span>
276
285
  </p>
277
286
  </div>
278
287
  <!-- /.d-flex -->
@@ -285,146 +294,119 @@
285
294
  </div><!-- /.container-fluid -->
286
295
  </div>
287
296
  </main>
288
- <!-- /.content-wrapper -->
297
+ <!-- /.app-content -->
289
298
 
290
- @@include('./dashboard/_footer.html', {
291
- "path": "."
292
- })
299
+ <Footer />
293
300
  </div>
294
- <!-- ./wrapper -->
301
+ <!-- ./app-wrapper -->
295
302
 
296
- @@include('./_scripts.html', {
297
- "path": "."
298
- })
303
+ <Scripts path={path} />
299
304
 
300
305
  <!-- OPTIONAL SCRIPTS -->
301
306
 
302
- <!-- ChartJS -->
303
- <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
304
- <!-- AdminLTE dashboard3 demo (This is only for demo purposes) -->
305
- <script src="./assets/js/dashboard3.js"></script>
306
- <script>
307
+ <!-- apexcharts -->
308
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
309
+
310
+ <script is:inline>
307
311
  // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
308
312
  // IT'S ALL JUST JUNK FOR DEMO
309
313
  // ++++++++++++++++++++++++++++++++++++++++++
310
314
 
311
- /* global Chart:false */
312
- (function () {
313
- 'use strict'
315
+ var visitors_chart_options = {
316
+ series: [
317
+ {
318
+ name: "High - 2023",
319
+ data: [100, 120, 170, 167, 180, 177, 160]
320
+ },
321
+ {
322
+ name: "Low - 2023",
323
+ data: [60, 80, 70, 67, 80, 77, 100]
324
+ }
325
+ ],
326
+ chart: {
327
+ height: 200,
328
+ type: 'line',
329
+ toolbar: {
330
+ show: false
331
+ }
332
+ },
333
+ colors: ['#0d6efd', '#adb5bd'],
334
+ stroke: {
335
+ curve: 'smooth'
336
+ },
337
+ grid: {
338
+ borderColor: '#e7e7e7',
339
+ row: {
340
+ colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
341
+ opacity: 0.5
342
+ },
343
+ },
344
+ legend: {
345
+ show: false
346
+ },
347
+ markers: {
348
+ size: 1
349
+ },
350
+ xaxis: {
351
+ categories: ['22th', '23th', '24th', '25th', '26th', '27th', '28th'],
352
+ },
353
+ };
314
354
 
315
- var ticksStyle = {
316
- fontColor: '#495057',
317
- fontStyle: 'bold'
318
- }
355
+ var visitors_chart = new ApexCharts(document.querySelector("#visitors-chart"), visitors_chart_options);
356
+ visitors_chart.render();
319
357
 
320
- var mode = 'index'
321
- var intersect = true
322
358
 
323
- var salesChartSelector = document.querySelector('#sales-chart')
324
- // eslint-disable-next-line no-unused-vars
325
- var salesChart = new Chart(salesChartSelector, {
326
- type: 'bar',
327
- data: {
328
- labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
329
- datasets: [{
330
- label: 'My First Dataset',
331
- data: [65, 59, 80, 81, 56, 55, 40],
332
- backgroundColor: [
333
- 'rgba(255, 99, 132, 0.2)',
334
- 'rgba(255, 159, 64, 0.2)',
335
- 'rgba(255, 205, 86, 0.2)',
336
- 'rgba(75, 192, 192, 0.2)',
337
- 'rgba(54, 162, 235, 0.2)',
338
- 'rgba(153, 102, 255, 0.2)',
339
- 'rgba(201, 203, 207, 0.2)'
340
- ],
341
- borderColor: [
342
- 'rgb(255, 99, 132)',
343
- 'rgb(255, 159, 64)',
344
- 'rgb(255, 205, 86)',
345
- 'rgb(75, 192, 192)',
346
- 'rgb(54, 162, 235)',
347
- 'rgb(153, 102, 255)',
348
- 'rgb(201, 203, 207)'
349
- ],
350
- borderWidth: 1
351
- }]
352
- },
353
- options: {
354
- maintainAspectRatio: false,
355
- scales: {
356
- y: {
357
- beginAtZero: true
358
- }
359
- }
359
+ var sales_chart_options = {
360
+ series: [{
361
+ name: 'Net Profit',
362
+ data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
363
+ }, {
364
+ name: 'Revenue',
365
+ data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
366
+ }, {
367
+ name: 'Free Cash Flow',
368
+ data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
369
+ }],
370
+ chart: {
371
+ type: 'bar',
372
+ height: 200
373
+ },
374
+ plotOptions: {
375
+ bar: {
376
+ horizontal: false,
377
+ columnWidth: '55%',
378
+ endingShape: 'rounded'
379
+ },
380
+ },
381
+ legend: {
382
+ show: false
383
+ },
384
+ colors:['#0d6efd', '#20c997', '#ffc107'],
385
+ dataLabels: {
386
+ enabled: false
387
+ },
388
+ stroke: {
389
+ show: true,
390
+ width: 2,
391
+ colors: ['transparent']
392
+ },
393
+ xaxis: {
394
+ categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
395
+ },
396
+ fill: {
397
+ opacity: 1
398
+ },
399
+ tooltip: {
400
+ y: {
401
+ formatter: function (val) {
402
+ return "$ " + val + " thousands"
360
403
  }
361
- })
404
+ }
405
+ }
406
+ };
362
407
 
363
- var visitorsChartSelector = document.querySelector('#visitors-chart')
364
- var visitorsChart = new Chart(visitorsChartSelector, {
365
- data: {
366
- labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
367
- datasets: [{
368
- type: 'line',
369
- data: [100, 120, 170, 167, 180, 177, 160],
370
- backgroundColor: 'transparent',
371
- borderColor: '#007bff',
372
- pointBorderColor: '#007bff',
373
- pointBackgroundColor: '#007bff'
374
- // pointHoverBackgroundColor: '#007bff',
375
- // pointHoverBorderColor : '#007bff'
376
- },
377
- {
378
- type: 'line',
379
- data: [60, 80, 70, 67, 80, 77, 100],
380
- backgroundColor: 'tansparent',
381
- borderColor: '#ced4da',
382
- pointBorderColor: '#ced4da',
383
- pointBackgroundColor: '#ced4da'
384
- // pointHoverBackgroundColor: '#ced4da',
385
- // pointHoverBorderColor : '#ced4da'
386
- }]
387
- },
388
- options: {
389
- maintainAspectRatio: false,
390
- tooltip: {
391
- mode: mode,
392
- intersect: intersect
393
- },
394
- hover: {
395
- mode: mode,
396
- intersect: intersect
397
- },
398
- plugins: {
399
- legend: {
400
- display: false
401
- }
402
- },
403
- scales: {
404
- yAxes: {
405
- // display: false,
406
- gridLines: {
407
- display: true,
408
- lineWidth: '4px',
409
- color: 'rgba(0, 0, 0, .2)',
410
- zeroLineColor: 'transparent'
411
- },
412
- ticks: Object.assign({
413
- beginAtZero: true,
414
- suggestedMax: 200
415
- }, ticksStyle)
416
- },
417
- xAxes: {
418
- display: true,
419
- gridLines: {
420
- display: false
421
- },
422
- ticks: ticksStyle
423
- }
424
- }
425
- }
426
- })
427
- })()
408
+ var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
409
+ sales_chart.render();
428
410
  </script>
429
411
  </body>
430
412
  </html>
package/src/{pages/layout/fixed-sidebar.html → html/pages/layout/fixed-sidebar.astro} RENAMED
@@ -1,31 +1,32 @@
1
+ ---
2
+ import Head from '@components/_head.astro';
3
+ import Footer from '@components/dashboard/_footer.astro';
4
+ import Topbar from '@components/dashboard/_topbar.astro';
5
+ import Sidenav from '@components/dashboard/_sidenav.astro';
6
+ import Scripts from '@components/_scripts.astro';
7
+
8
+ const title = 'AdminLTE 4 | Fixed Sidebar'
9
+ const path = '../../../dist'
10
+ const mainPage = 'layout'
11
+ const page = 'fixed-sidebar'
12
+ ---
1
13
  <!DOCTYPE html>
2
14
  <html lang="en">
3
- <!-- For RTL verison -->
4
- <!-- <html lang="en" dir="rtl"> -->
5
15
  <head>
6
- @@include('./_head.html', {
7
- "path": "../..",
8
- "title": "AdminLTE 4 | Fixed Sidebar"
9
- })
16
+ <Head title={title} path={path} />
10
17
  </head>
11
- <body class="layout-fixed">
12
- <div class="wrapper">
13
- @@include('./dashboard/_topbar.html', {
14
- "path": "../.."
15
- })
18
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
19
+ <div class="app-wrapper">
20
+ <Topbar path={path} />
21
+ <Sidenav path={path} mainPage={mainPage} page={page} />
16
22
 
17
- @@include('./dashboard/_sidenav.html', {
18
- "mainPage": "layout",
19
- "page": "fixed-sidebar",
20
- "path": "../.."
21
- })
22
23
  <!-- Main content -->
23
- <main class="content-wrapper">
24
- <div class="content-header">
24
+ <main class="app-main">
25
+ <div class="app-content-header">
25
26
  <div class="container-fluid">
26
- <div class="row mb-2">
27
+ <div class="row">
27
28
  <div class="col-sm-6">
28
- <h3>Fixed Layout</h3>
29
+ <h3 class="mb-0">Fixed Layout</h3>
29
30
  </div>
30
31
  <div class="col-sm-6">
31
32
  <ol class="breadcrumb float-sm-end">
@@ -37,7 +38,7 @@
37
38
  </div>
38
39
  </div>
39
40
  <!-- Main content -->
40
- <div class="content">
41
+ <div class="app-content">
41
42
  <div class="container-fluid">
42
43
  <div class="row">
43
44
  <div class="col-12">
@@ -72,16 +73,12 @@
72
73
  </div>
73
74
  <!-- /.content -->
74
75
  </main>
75
- <!-- /.content-wrapper -->
76
+ <!-- /.app-content -->
76
77
 
77
- @@include('./dashboard/_footer.html', {
78
- "path": "../.."
79
- })
78
+ <Footer />
80
79
  </div>
81
- <!-- ./wrapper -->
80
+ <!-- ./app-wrapper -->
82
81
 
83
- @@include('./_scripts.html', {
84
- "path": "../.."
85
- })
82
+ <Scripts path={path} />
86
83
  </body>
87
84
  </html>
package/src/html/pages/layout/layout-rtl.astro ADDED
@@ -0,0 +1,84 @@
1
+ ---
2
+ import Head from '@components/_head.astro';
3
+ import Footer from '@components/dashboard/_footer.astro';
4
+ import Topbar from '@components/dashboard/_topbar.astro';
5
+ import Sidenav from '@components/dashboard/_sidenav.astro';
6
+ import Scripts from '@components/_scripts.astro';
7
+
8
+ const title = 'AdminLTE 4 | Layout RTL'
9
+ const path = '../../../dist'
10
+ const mainPage = 'layout'
11
+ const page = 'layout-rtl'
12
+ const isRtl = true
13
+ ---
14
+ <!DOCTYPE html>
15
+ <html lang="en" dir="rtl">
16
+ <head>
17
+ <Head title={title} path={path} isRtl={isRtl} />
18
+ </head>
19
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
20
+ <div class="app-wrapper">
21
+ <Topbar path={path} />
22
+ <Sidenav path={path} mainPage={mainPage} page={page} />
23
+ <!-- Main content -->
24
+ <main class="app-main">
25
+ <div class="app-content-header">
26
+ <div class="container-fluid">
27
+ <div class="row">
28
+ <div class="col-sm-6">
29
+ <h3 class="mb-0">Layout RTL</h3>
30
+ </div>
31
+ <div class="col-sm-6">
32
+ <ol class="breadcrumb float-sm-end">
33
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
34
+ <li class="breadcrumb-item active" aria-current="page">Layout RTL</li>
35
+ </ol>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ </div>
40
+ <!-- Main content -->
41
+ <div class="app-content">
42
+ <div class="container-fluid">
43
+ <div class="row">
44
+ <div class="col-12">
45
+ <!-- Default box -->
46
+ <div class="card">
47
+ <div class="card-header">
48
+ <h3 class="card-title">Title</h3>
49
+
50
+ <div class="card-tools">
51
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
52
+ <i class="fa-solid fa-minus"></i>
53
+ </button>
54
+ <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
55
+ <i class="fa-solid fa-times"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ <div class="card-body">
60
+ Start creating your amazing application!
61
+ </div>
62
+ <!-- /.card-body -->
63
+ <div class="card-footer">
64
+ Footer
65
+ </div>
66
+ <!-- /.card-footer-->
67
+ </div>
68
+ <!-- /.card -->
69
+ </div>
70
+ </div>
71
+ <!-- /.row -->
72
+ </div><!-- /.container-fluid -->
73
+ </div>
74
+ <!-- /.content -->
75
+ </main>
76
+ <!-- /.app-content -->
77
+
78
+ <Footer />
79
+ </div>
80
+ <!-- ./app-wrapper -->
81
+
82
+ <Scripts path={path} />
83
+ </body>
84
+ </html>