Merge branch 'next' of https://github.com/devforth/adminforth into next

Author: NoOne7135

adminforth/documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -277,7 +277,7 @@ Now create file `CheckReadingTime.vue` in the `custom` folder of your project:
 ```html title="./custom/CheckReadingTime.vue"
 <template>
   <div class="text-gray-500 text-sm">
-    <div @click="checkReadingTime" class="cursor-pointer flex gap-2 items-center">
+    <div class="cursor-pointer flex gap-2 items-center">
       Check reading time
     </div>
   </div>
@@ -287,6 +287,10 @@ Now create file `CheckReadingTime.vue` in the `custom` folder of your project:
 import { getReadingTime} from "text-analyzer";
 import adminforth from '@/adminforth';
 
+defineExpose({
+  click,
+});
+
 function checkReadingTime() {
   const text = document.querySelector('[data-af-column="description"]')?.innerText;
   if (text) {
@@ -298,6 +302,11 @@ function checkReadingTime() {
   }
   adminforth.list.closeThreeDotsDropdown();
 }
+
+function click() {
+  checkReadingTime();
+}
+
 </script>
 ```
 
@@ -312,6 +321,7 @@ npm i text-analyzer
 
 > ☝️ Please note that we are using AdminForth [Frontend API](/docs/api/FrontendAPI/interfaces/FrontendAPIInterface/) `adminforth.list.closeThreeDotsDropdown();` to close the dropdown after the item is clicked.
 
+>☝️ Please note that the injected component might have an exposed click function as well as a defined click function, which executes the click on component logic.
 
 ## List table custom action icons
 

adminforth/documentation/docs/tutorial/03-Customization/15-afcl.md

@@ -797,7 +797,7 @@ const isoFlagToEmoji = (iso) => iso.toUpperCase().replace(/./g, char => String.f
 
 
 
-## Pagination
+### Pagination
 
 Table provides front-end side pagination. You can set `pageSize` (default is 10) to set how many rows to show per page.
 If there is less then `pageSize` rows, pagination will not be shown.
@@ -829,6 +829,38 @@ If there is less then `pageSize` rows, pagination will not be shown.
   </div>
 </div>
 
+### Server-side pagination
+
+To load pages dynamically, simply pass async callback to data:
+
+```ts
+async function loadPageData(data) {  
+  const { offset, limit } = data;
+  // in real app do await callAdminForthApi or await fetch to get date, use offset and limit value to slice data
+  return {
+    data: [
+      { name: 'John', age: offset, country: 'US' },
+      { name: 'Rick', age: offset+1, country: 'CA' },
+      { name: 'Alice', age: offset+2, country: 'BR' },
+    ],
+    total: 3 // should return total amount of records in database
+  }
+}
+
+<Table
+  :columns="[
+    { label: 'Name', fieldName: 'name' },
+    { label: 'Age', fieldName: 'age' },
+    { label: 'Country', fieldName: 'country' },
+  ]"
+//diff-remove
+  :data="[...] 
+//diff-add
+  :data="loadPageData"
+
+  :pageSize="3"> </Table>
+```
+> 👆 The page size is used as the limit for pagination.
 
 ## ProgressBar
 

adminforth/documentation/docs/tutorial/07-Plugins/10-i18n.md

@@ -5,6 +5,8 @@ Main features:
 - Stores all translation strings in your application in a single AdminForth resource. You can set [allowed actions](/docs/tutorial/Customization/limitingAccess/) only  to Developers/Translators role if you don't want other users to see/edit the translations.
 - Supports AI completion adapters to help with translations. For example, you can use OpenAI ChatGPT to generate translations. Supports correct pluralization, even for Slavic languages.
 - Supports any number of languages.
+- Supports BCP47 language codes (e.g., `en-GB`, `pt-BR`) for regional language variants.
+- Configurable primary language.
 
 
 Under the hood it uses vue-i18n library and provides several additional facilities to make the translation process easier.
@@ -46,6 +48,8 @@ model translations {
 
 If you want more languages, just add more fields like `uk_string`, `ja_string`, `fr_string`, `es_string` to the model.
 
+> 💡 **Tip**: For regional language variants, you can also use BCP47 codes like `en-GB`, `pt-BR`, `fr-CA` and add corresponding fields like `enGB_string`, `ptBR_string`, `frCA_string`. See the [BCP47 Language Code Support](#bcp47-language-code-support) section for more details.
+
 Next, add resource for translations:
 
 ```ts title='./resources/translations.ts'
@@ -86,6 +90,9 @@ export default {
       // will hel to filter out incomplete translations
       completedFieldName: 'completedLangs',
 
+      // optional: set primary language (defaults to 'en' if not specified)
+      // primaryLanguage: 'fr', // Uncomment to set French as primary language
+
       completeAdapter: new CompletionAdapterOpenAIChatGPT({
         openAiApiKey: process.env.OPENAI_API_KEY as string,
         model: 'gpt-4o-mini',
@@ -205,6 +212,125 @@ You can add translations for each language manually or use Bulk actions to gener
 
 For simplicity you can also use filter to get only untranslated strings and complete them one by one (filter name "Fully translated" in the filter).
 
+## BCP47 Language Code Support
+
+The i18n plugin supports BCP47 language tags, which allow you to specify regional variants of languages. This is particularly useful for applications that need to support different regional dialects or cultural variations.
+
+### Supported Language Code Formats
+
+- **ISO 639-1 codes**: Basic language codes like `en`, `fr`, `de`, `es`
+- **BCP47 tags**: Regional variants like `en-GB` (British English), `pt-BR` (Brazilian Portuguese), `en-US` (American English)
+
+### Example with Regional Variants
+
+Here's how to configure the plugin to support both basic and regional language codes:
+
+```ts title='./resources/translations.ts'
+export default {
+  dataSource: "maindb",
+  table: "translations",
+  resourceId: "translations",
+  label: "Translations",
+
+  recordLabel: (r: any) => `✍️ ${r.en_string}`,
+  plugins: [
+    new I18nPlugin({
+      // Support both basic and regional language codes
+      supportedLanguages: ['en', 'en-GB', 'en-US', 'pt', 'pt-BR', 'fr', 'fr-CA'],
+
+      // Map language codes to database field names
+      translationFieldNames: {
+        en: 'en_string',
+        'en-GB': 'enGB_string',
+        'en-US': 'enUS_string',
+        pt: 'pt_string',
+        'pt-BR': 'ptBR_string',
+        fr: 'fr_string',
+        'fr-CA': 'frCA_string',
+      },
+
+      categoryFieldName: 'category',
+      sourceFieldName: 'source',
+      completedFieldName: 'completedLangs',
+
+      completeAdapter: new CompletionAdapterOpenAIChatGPT({
+        openAiApiKey: process.env.OPENAI_API_KEY as string,
+        model: 'gpt-4o-mini',
+        expert: {
+          temperature: 0.5,
+        },
+      }),
+    }),
+  ],
+  // ... rest of configuration
+} as AdminForthResourceInput;
+```
+
+### Database Schema for Regional Variants
+
+When using BCP47 codes, make sure your database schema includes fields for each regional variant:
+
+```ts title='./schema.prisma'
+model translations {
+    id              String   @id
+    en_string        String
+    created_at       DateTime
+    
+    // Basic language codes
+    fr_string        String?
+    pt_string        String?
+    
+    // Regional variants (BCP47)
+    enGB_string      String?  // British English
+    enUS_string      String?  // American English
+    ptBR_string      String?  // Brazilian Portuguese
+    frCA_string      String?  // Canadian French
+    
+    category         String
+    source           String?
+    completedLangs   String?
+    
+    @@index([en_string, category])
+    @@index([category])
+    @@index([completedLangs])
+}
+```
+
+## Primary Language Configuration
+
+The `primaryLanguage` option allows you to set the default language for your application. This is particularly useful when your application's primary language is not English.
+
+### How Primary Language Works
+
+- **Default Language**: The language shown to users by default
+- **Fallback Chain**: When a translation is missing, the system falls back to: `requested language` → `primaryLanguage` → `English`
+- **Translation Source**: English (`en_string`) is always used as the source for AI translations, regardless of the primary language setting
+
+### Example: Portuguese as Primary Language
+
+```ts title='./resources/translations.ts'
+export default {
+  // ... other configuration
+  plugins: [
+    new I18nPlugin({
+      // Set Portuguese as the primary language
+      primaryLanguage: 'pt-BR',
+      
+      supportedLanguages: ['pt-BR', 'en', 'en-GB', 'es', 'fr'],
+      translationFieldNames: {
+        'pt-BR': 'ptBR_string',
+        en: 'en_string',
+        'en-GB': 'enGB_string',
+        es: 'es_string',
+        fr: 'fr_string',
+      },
+      
+      // ... rest of configuration
+    }),
+  ],
+  // ... rest of configuration
+} as AdminForthResourceInput;
+```
 
 ## Translation for custom components
 
@@ -458,6 +584,8 @@ If you don't use params, you can use `tr` without third param:
 }
 ```
 
+> 🔄 **Fallback Behavior**: The `tr` function automatically handles fallbacks when translations are missing. It follows this chain: `requested language` → `primaryLanguage` → `English`. This ensures users always see content in a language they can understand, even if specific translations are missing.
+
 > 🙅‍♂️ Temporary limitation: For now all translations strings for backend (adminforth internal and for from custom APIs)
  appear in Translations resource and table only after they are used. So greeting string will appear in the Translations table only after the first request to the API which reaches the `tr` function call. 
 > So to collect all translations you should use your app for some time and make sure all strings are used at

adminforth/documentation/docs/tutorial/07-Plugins/16-email-invite.md

@@ -98,7 +98,7 @@ export default {
      //diff-add
       emailField: 'email',
      //diff-add
-      passwordField: 'password_hash',
+      passwordField: 'password',
      //diff-add
       sendFrom: 'noreply@yourapp.com',
      //diff-add
@@ -164,7 +164,7 @@ export default {
     new EmailInvitePlugin({
       emailField: 'email',
       sendFrom: 'noreply@yourapp.com',
-      passwordField: 'password_hash',
+      passwordField: 'password',
       adapter: new EmailAdapterAwsSes(/* ... */),
       //diff-add
       emailConfirmedField: 'email_confirmed', // Enable email confirmation
@@ -191,7 +191,7 @@ import EmailAdapterMailgun from "@adminforth/email-adapter-mailgun";
   plugins: [
     new EmailInvitePlugin({
       emailField: 'email',
-      passwordField: 'password_hash',
+      passwordField: 'password',
       sendFrom: 'noreply@yourapp.com',
       //diff-add
       adapter: new EmailAdapterMailgun({

adminforth/modules/styles.ts

@@ -251,6 +251,9 @@ export const styles = () => ({
     lightTableOddBackground: "#FFFFFF",
     lightTablePaginationText: "#6B7280",
     lightTablePaginationNumeration: "#111827",
+    lightTablePaginationInputBackground: "#FFFFFF",
+    lightTablePaginationInputBorder: "#D1D5DB",
+    lightTablePaginationInputText: "#111827",
     lightUnactivePaginationButtonBackground: "#FFFFFF",
     lightUnactivePaginationButtonText: "#6B7280",
     lightUnactivePaginationButtonBorder: "#D1D5DB",
@@ -580,6 +583,9 @@ export const styles = () => ({
     darkTableOddBackground: "#111827",
     darkTablePaginationText: "#9CA3AF",
     darkTablePaginationNumeration: "#FFFFFF",
+    darkTablePaginationInputBackground: "#1f2937",
+    darkTablePaginationInputBorder: "#374151",
+    darkTablePaginationInputText: "#FFFFFF",
     darkUnactivePaginationButtonBackground: "#1F2937",
     darkUnactivePaginationButtonText: "#9CA3AF",
     darkUnactivePaginationButtonBorder: "#374151",

adminforth/spa/src/adminforth.ts

@@ -1,6 +1,5 @@
-import type { FilterParams, FrontendAPIInterface } from "./types/FrontendAPI";
-import type { FrontendAPIInterface, ConfirmParams, AlertParams, } from '@/types/FrontendAPI';
-import type { AdminForthFilterOperators, AdminForthResourceColumn } from '@/types/Common';
+import type { FilterParams, FrontendAPIInterface, ConfirmParams, AlertParams, } from '@/types/FrontendAPI';
+import type { AdminForthFilterOperators, AdminForthResourceColumnCommon } from '@/types/Common';
 import { useToastStore } from '@/stores/toast';
 import { useModalStore } from '@/stores/modal';
 import { useCoreStore } from '@/stores/core';
@@ -85,7 +84,7 @@ class FrontendAPI implements FrontendAPIInterface {
     }
   }
 
-  confirm(params: ConfirmParams): Promise<void> {
+  confirm(params: ConfirmParams): Promise<boolean> {
     return new Promise((resolve, reject) => {
       this.modalStore.setModalContent({ 
         content: params.message, 
@@ -112,7 +111,7 @@ class FrontendAPI implements FrontendAPIInterface {
       throw new Error(`Cannot use ${this.setListFilter.name} filter on a list page`)
     } else {
       console.log(this.coreStore.resourceColumnsWithFilters,'core store')
-      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumn) => col.name === filter.field)
+      const filterField = this.coreStore.resourceColumnsWithFilters.find((col: AdminForthResourceColumnCommon) => col.name === filter.field)
       if(!filterField){
           throw new Error(`Field ${filter.field} is not available for filtering`)
       }
@@ -123,7 +122,7 @@ class FrontendAPI implements FrontendAPIInterface {
 
   setListFilter(filter: FilterParams): void {
     if(this.listFilterValidation(filter)){
-      if(this.filtersStore.filters.some((f) => {return f.field === filter.field && f.operator === filter.operator})){
+      if(this.filtersStore.filters.some((f: any) => {return f.field === filter.field && f.operator === filter.operator})){
         throw new Error(`Filter ${filter.field} with operator ${filter.operator} already exists`)
       } else {
       this.filtersStore.setFilter(filter)

adminforth/spa/src/afcl/BarChart.vue

@@ -60,7 +60,7 @@ const optionsBase = {
   tooltip: {
     shared: true,
     intersect: false,
-    formatter: function (value) {
+    formatter: function (value: any) {
       return value
     },
   },
@@ -71,7 +71,7 @@ const optionsBase = {
         fontFamily: "Inter, sans-serif",
         cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
       },
-      formatter: function (value) {
+      formatter: function (value: any) {
         return value
       }
     },

adminforth/spa/src/afcl/Checkbox.vue

@@ -6,7 +6,7 @@
         type="checkbox"
         :checked="props.modelValue"
         :disabled="props.disabled"
-        @change="$emit('update:modelValue', $event.target.checked)"
+        @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
         class="peer appearance-none min-w-4 min-h-4 bg-lightCheckboxBgUnchecked border border-lightCheckboxBorderColor rounded-sm checked:bg-lightCheckboxBgChecked 
                         focus:ring-lightFocusRing dark:focus:ring-darkFocusRing dark:focus:ring-darkFocusRing
                         focus:ring-2 dark:bg-darkCheckboxBgUnchecked dark:border-darkCheckboxBorderColor dark:checked:bg-darkCheckboxBgChecked cursor-pointer"

adminforth/spa/src/afcl/Dropzone.vue

@@ -3,7 +3,7 @@
   <form class="flex items-center justify-center w-full"
     @dragover.prevent="dragging = true"
     @dragleave.prevent="dragging = false"
-    @drop.prevent="dragging = false; doEmit($event.dataTransfer.files)"
+    @drop.prevent="dragging = false; doEmit(($event.dataTransfer as DataTransfer).files)"
   >
       <label :id="id" class="flex flex-col items-center justify-center w-full border-2 border-dashed rounded-lg cursor-pointer
         hover:bg-lightDropzoneBackgroundHover hover:border-lightDropzoneBorderHover  dark:hover:border-darkDropzoneBorderHover dark:hover:bg-darkDropzoneBackgroundHover"
@@ -42,7 +42,7 @@
           </div>
           <input :id="id" type="file" class="hidden" 
             :accept="props.extensions.join(', ')"
-            @change="doEmit($event.target.files)"
+            @change="$event.target && doEmit(($event.target as HTMLInputElement).files!)"
             :multiple="props.multiple || false"
           />
       </label>

adminforth/spa/src/afcl/Input.vue

@@ -12,7 +12,7 @@
       ref="input"
       v-bind="$attrs"
       :type="type"
-      @input="$emit('update:modelValue', type === 'number' ? Number($event.target?.value) : $event.target?.value)"
+      @input="$emit('update:modelValue', type === 'number' ? Number(($event.target as HTMLInputElement)?.value) : ($event.target as HTMLInputElement)?.value)"
       :value="modelValue"
       aria-describedby="helper-text-explanation"
       class="afcl-input inline-flex bg-lightInputBackground border border-lightInputBorder text-lightInputText text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary