Merge branch 'main' of github.com:devforth/adminforth

Author: SerVitasik

Changelog.md

@@ -5,10 +5,28 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [v1.5.11] - next
+## [v1.5.12] - next
+
+### Fixed
+- beforeEnter navigation guard on login route to check user already logged in postponed onMounted and created undefined rest request e.g. on signupPage (with race condition). Now it is called in component
+- AFCL progress bar component
+- sorting for virtual columns is disabled by default now, and sorting icon appers only if user sets column.sortable = true, in this case user has to implement sorting in `list.beforeDatasourceRequest` hook
+
+### Improved
+- add pluralization support exposed `tr` function
+
+
+## [v1.5.11] - 2025-01-07
+
+Major AFCL update https://adminforth.dev/docs/tutorial/Customization/afcl/
 
 ### Added
 - AFCL Table component
+- AFCL Chart components and documentation
+
+### Fixed
+
+- two dropdowns now can't be opened at the same time
 
 ## [v1.5.10] 
 

README.md

@@ -6,43 +6,64 @@
 
 * [Try live demo](https://demo.adminforth.dev/)  (Read-only mode)
 
-* [Hello world in 5 minutes](https://adminforth.dev/docs/tutorial/gettingStarted) with AdminForth.
+* [Hello world in 5 minutes](https://adminforth.dev/docs/tutorial/gettingStarted) with AdminForth
 
-* [Full API reference](https://adminforth.dev/docs/api/).
+* [Tutorial](https://adminforth.dev/docs/tutorial/Customization/branding/)
+
+<br/>
 
 <div align="center">
-  <img src="https://github.com/user-attachments/assets/f507a46b-f282-4f81-97e0-32fceb002ded"
- alt="Image description" width="800px">
+  <img src="https://github.com/user-attachments/assets/e643caad-1daa-4085-b125-cc940557a2ec"
+ alt="AdminForth Dashboard" width="90%">
 </div>
 
-Features:
+<br/>
+
+Why AdminForth:
 * AdminForth is always free and open-source (no paid versions, no cloud subscriptions sh*t)
 * Init AdminForth with your database URL in Node.js file, easily describe the tables you wish to see in admin, and get fully functional UI for your data (filter, create, edit, remove)
-* Define Vue components to any part (place in data cell, instead of row, add something above the table, inject something to header or sidebar, add custom page with charts)
+* Define Vue components to change look of various parts of admin (place in data cell, instead of row, add something above the table, inject something to header or sidebar, add custom page with charts or custom components)
+* Rich build-in Components library (AdminForth AFCL) with premade easy-to-use build-blocks which follow your theme
 * Define express APIs and call them from your components and pages
-* Use various modern back-office-must-have plugins like audit log, files/image upload, TOTP 2FA, Copilot-style AI writing and images generation
+* Use various modern back-office-must-have plugins like audit log, files/image upload, TOTP 2FA, I18N, Copilot-style AI writing and image generation
 
-## Previews
+## Project initialisation
 
+```
+mkdir myadmin && cd myadmin
+npx adminforth create-app
+```
 
+## Previews
 
-[Custom Dashboard](https://adminforth.dev/docs/tutorial/Customization/customPages):
 
-<div align="center">
-  <img src="https://github.com/user-attachments/assets/aa899196-f7f3-4582-839c-2267f2e9e197" alt="AdminForth Dashboard demo" width="500px">
-</div>
-
-[Chat-GPT plugin](https://adminforth.dev/docs/tutorial/Plugins/chat-gpt):
+<table>
+  <tr>
+    <td style="width: 40%; vertical-align: top;">
+      <a href="https://adminforth.dev/docs/tutorial/Customization/customPages">Custom Dashboard</a>
+      <br/>
+      <img src="https://github.com/user-attachments/assets/aa899196-f7f3-4582-839c-2267f2e9e197" alt="AdminForth Dashboard demo" width="500px" />
+    </td>
+    
+  </tr>
+  <tr>
+    <td style="width: 40%; vertical-align: top;">
+      <a href="https://adminforth.dev/docs/tutorial/Plugins/chat-gpt">Chat-GPT plugin</a>
+      <br/>
+      <img src="https://github.com/user-attachments/assets/cfa17cbd-3a53-4725-ab46-53c7c7666028" alt="AdminForth ChatGPT demo" width="500px" />
+    </td>
+  </tr>
+  <tr>
+    <td style="width: 40%; vertical-align: top;">
+      <a href="https://adminforth.dev/docs/tutorial/Plugins/upload/#image-generation">Image DALEE Generation</a>
+       <br/>
+      <img src="https://github.com/user-attachments/assets/b923e044-7e29-46ff-ab91-eeca5eee2b0a" alt="AdminForth DALE-E image generator demo" width="500px">
+    </td>
+  </tr>
+</table>
 
-<div align="center">
-  <img src="https://github.com/user-attachments/assets/cfa17cbd-3a53-4725-ab46-53c7c7666028" alt="AdminForth ChatGPT demo" width="500px">
-</div>
 
-[Image DALEE Generation](https://adminforth.dev/docs/tutorial/Plugins/upload/#image-generation)
 
-<div align="center">
-  <img src="https://github.com/user-attachments/assets/b923e044-7e29-46ff-ab91-eeca5eee2b0a" alt="AdminForth DALE-E image generator demo" width="500px">
-</div>
 
 
 # For developers

adminforth/documentation/docs/tutorial/03-Customization/01-branding.md

@@ -1,3 +1,9 @@
+---
+description: "Learn how to customize the branding and theming of your AdminForth application."
+image: "/ogs/branding.png"  # Path to the OG image
+---
+
+
 # Branding and Theming
 
 The first things you would probably like to change are the logo, favicon and the name of the application. 
@@ -77,11 +83,8 @@ In `index.ts` file set the `styles` property in the configuration:
 const admin = new AdminForth({
   ...
   customization: {
-//diff-add
     styles: {
-//diff-add
       colors: {
-//diff-add
         light: {
 //diff-add
           // color for links, icons etc.
@@ -95,18 +98,15 @@ const admin = new AdminForth({
           sidebar: { main: '#f9fafb', text: '#213045' },
 //diff-add
           sidebar: {main:'#571e58', text:'white'},
-//diff-add
         },
-//diff-add
       }
-//diff-add
     } 
   },
   ...
 });
 ```
 Here is how it looks:
-![alt text](image-10.png)
+![AdminForth Themes](image-10.png)
 
 
 
@@ -147,7 +147,7 @@ const admin = new AdminForth({
 });
 ```
 Here is how it looks:
-![alt text](demo.adminforth.dev_login.png)
+![AdminForth Login Background](demo_adminforth_login.png)
 
 You can also set background position and size:
 

adminforth/documentation/docs/tutorial/03-Customization/04-hooks.md

@@ -1,3 +1,9 @@
+---
+description: "Hooks are powerful tools to modify the data before it is saved to the database, execute something after data were saved or deleted, change the query before fetching items from the database, modify the fetched data before it is displayed in the list and show, and prevent the request to db depending on some condition."
+image: "/ogs/hooks.png"  # Path to the OG image
+---
+
+
 
 # Hooks
 
@@ -25,7 +31,7 @@ Here we will consider possible flows one by one
 
 When user opens edit page, AdminForth makes a request to the backend to get the initial data for the form.
 
-![Initial data for edit page flow](image-28.png)
+![Initial data for edit page flow](initial_edit_data_flow.png)
 
 Practically you can use `show.afterDatasourceResponse` to modify or add some data before it is displayed on the edit page. 
 

adminforth/documentation/docs/tutorial/03-Customization/06-customPages.md

@@ -1,3 +1,8 @@
+---
+description: "Learn how to create custom pages in AdminForth."
+image: "/ogs/customPages.png" 
+---
+
 # Custom pages
 
 Most Admin Panels should have some Dashboards or custom pages. 
@@ -15,7 +20,7 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
       <div class="max-w-md w-full bg-white rounded-lg shadow dark:bg-gray-800 p-4 md:p-5" v-if="data">
         <div>
           <h5 class="leading-none text-3xl font-bold text-gray-900 dark:text-white pb-2">{{ data.totalAparts }}</h5>
-          <p class="text-base font-normal text-gray-500 dark:text-gray-400">{{  $t('Apartment last 7 days | Apartments last 7 days') }}</p>
+          <p class="text-base font-normal text-gray-500 dark:text-gray-400">{{  $t('Apartment last 7 days | Apartments last 7 days', data.totalAparts) }}</p>
         </div>
         <BarChart
           :data="apartsCountsByDaysChart"
@@ -120,6 +125,7 @@ Create a Vue component in the `custom` directory of your project, e.g. `Dashboar
         <PieChart
           :data="apartsCountsByRooms"
           :options="{
+            chart: { type: 'donut'},
             plotOptions: {
               pie: {
                 donut: {