adminforth 2.49.3 → 2.50.0-next.10

package/dist/spa/src/adminforth.ts

@@ -118,11 +118,13 @@ class FrontendAPI implements FrontendAPIInterface {
 
   confirm(params: Parameters<FrontendAPIInterface['confirm']>[0]): ReturnType<FrontendAPIInterface['confirm']> {
     return new Promise((resolve, reject) => {
-      this.modalStore.setModalContent({ 
-        content: params.message, 
+      this.modalStore.setModalContent({
+        title: params.title,
+        guardMessage: params.guardMessage,
+        content: params.message,
         contentHTML: params.messageHtml,
         acceptText: params.yes || 'Yes',
-        cancelText: params.no || 'Cancel' 
+        cancelText: params.no || 'Cancel'
       })
       this.modalStore.onAcceptFunction = resolve
       this.modalStore.onCancelFunction = reject

package/dist/spa/src/afcl/Link.vue

@@ -1,17 +1,37 @@
 <template>
+  <a 
+    v-if="isExternal"
+    v-bind="$attrs"
+    :href="to"
+    :target="target"
+    rel="noopener noreferrer"
+    :class="linkClasses"
+  >
+    <slot></slot>
+  </a>
+
   <router-link 
+    v-else
     v-bind="$attrs"
     :to="to"
-    class="afcl-link text-lightPrimary underline dark:text-darkPrimary hover:no-underline hover:brightness-110
-      cursor-pointer"
+    :target="target"
+    :class="linkClasses"
   >
     <slot></slot>
   </router-link>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 
-defineProps<{
+const props = defineProps<{
   to: string,
-}>()
+  target?: 'blank' | 'self' | 'parent' | 'top'
+}>();
+
+const isExternal = computed(() => {
+  return typeof props.to === 'string' && props.to.startsWith('http');
+});
+
+const linkClasses = "afcl-link text-lightPrimary underline dark:text-darkPrimary hover:no-underline hover:brightness-110 cursor-pointer";
 </script>

package/dist/spa/src/afcl/Modal.vue

@@ -104,6 +104,10 @@ async function close() {
   isModalOpen.value = false;
 }
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 defineExpose({
   open: open,
   close: close,

package/dist/spa/src/components/AcceptModal.vue

@@ -4,26 +4,59 @@
       ref="modalRef"
       :beforeCloseFunction="()=>{modalStore.onAcceptFunction(false);modalStore.isOpened=false}"
       backgroundCustomClasses="z-[998]"
-      modalCustomClasses="z-[999]"
+      modalCustomClasses="z-[999] flex items-center justify-center" 
     >
-      <div class="relative p-4 w-full max-w-md max-h-full" >
-        <button type="button" @click="modalStore.togleModal()" class="absolute top-3 end-2.5 text-lightAcceptModalCloseIcon bg-transparent hover:bg-lightAcceptModalCloseIconHoverBackground hover:text-lightAcceptModalCloseIconHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkAcceptModalCloseIcon dark:hover:bg-darkAcceptModalCloseIconHoverBackground dark:hover:text-darkAcceptModalCloseIconHover" >
-          <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+      <div class="relative p-6 sm:p-8 w-[440px] bg-white rounded-lg shadow-xl dark:bg-gray-800" >
+        
+        <button type="button" @click="modalStore.togleModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-900 transition-colors dark:hover:text-white" >
+          <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
           </svg>
-          <span class="sr-only">{{ $t('Close modal') }}</span>
         </button>
-        <div class="p-4 md:p-5 text-center">
-          <svg class="mx-auto mb-4 text-lightAcceptModalWarningIcon w-12 h-12 dark:text-darkAcceptModalWarningIcon"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
-          </svg>
-          <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText">{{ modalStore?.modalContent?.content }}</h3>
-          <h3 class=" afcl-confirmation-title mb-5 text-lg font-normal text-lightAcceptModalText dark:text-darkAcceptModalText" v-html="modalStore?.modalContent?.contentHTML"></h3>
 
-          <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-lightAcceptModalConfirmButtonText bg-lightAcceptModalConfirmButtonBackground hover:bg-lightAcceptModalConfirmButtonBackgroundHover focus:ring-4 focus:outline-none focus:ring-lightAcceptModalConfirmButtonFocus font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center dark:text-darkAcceptModalConfirmButtonText dark:bg-darkAcceptModalConfirmButtonBackground dark:hover:bg-darkAcceptModalConfirmButtonBackgroundHover dark:focus:ring-darkAcceptModalConfirmButtonFocus">
-              {{ modalStore?.modalContent?.acceptText }}
-          </button>
-          <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-lightAcceptModalCancelButtonText focus:outline-none bg-lightAcceptModalCancelButtonBackground rounded-lg border border-lightAcceptModalCancelButtonBorder hover:bg-lightAcceptModalCancelButtonBackgroundHover hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-lightAcceptModalCancelButtonFocus dark:focus:ring-darkAcceptModalCancelButtonFocus dark:bg-darkAcceptModalCancelButtonBackground dark:text-darkAcceptModalCancelButtonText dark:border-darkAcceptModalCancelButtonBorder dark:hover:text-darkAcceptModalCancelButtonTextHover dark:hover:bg-darkAcceptModalCancelButtonBackgroundHover">{{ modalStore?.modalContent?.cancelText }}</button>
+        <div class="text-center flex flex-col">
+          <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-red-50 mb-4 relative dark:bg-red-900/20">
+            <IconClipboardDocumentSolid class="w-10 h-10 text-red-500" />
+            <div class="absolute bottom-1 right-1 bg-red-500 rounded-full w-[18px] h-[18px] flex items-center justify-center border-2 border-white dark:border-gray-800">
+                <span class="text-white text-[10px] font-medium">!</span>
+            </div>
+          </div>
+          
+          <div class="flex flex-col gap-3">
+            <h3 v-if="modalStore?.modalContent?.title" class="text-2xl font-bold text-gray-900 dark:text-white">
+              {{ modalStore.modalContent.title }}
+            </h3>
+            
+            <div class="text-[15px] text-gray-600 dark:text-gray-300">
+              <div v-if="modalStore?.modalContent?.contentHTML" class="font-medium" v-html="modalStore.modalContent.contentHTML"></div>
+              <p v-else-if="modalStore?.modalContent?.content" class="font-medium">{{ modalStore.modalContent.content }}</p>
+            </div>
+          </div>
+
+          <hr class="border-t-2 border-gray-300 dark:border-gray-700 my-6">
+
+          <div class="flex justify-center gap-4 w-full">
+            <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}" type="button" class="flex-1 py-2.5 px-4 text-sm font-medium text-gray-700 bg-white rounded-lg border border-gray-200 hover:bg-gray-50 focus:ring-4 focus:ring-gray-100 transition-all dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
+                {{ modalStore?.modalContent?.cancelText }}
+            </button>
+            
+            <button 
+              @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" 
+              type="button" 
+              class="flex-1 flex items-center justify-center py-2.5 px-4 text-sm font-medium transition-all focus:outline-none 
+                    text-white bg-red-600 hover:bg-red-700 
+                    dark:bg-red-500 dark:hover:bg-red-600 
+                    border-none rounded-lg shadow-sm focus:z-10 focus:ring-4 
+                    focus:ring-red-100 dark:focus:ring-red-900 gap-1">
+                {{ modalStore?.modalContent?.acceptText }}
+            </button>
+          </div>
+
+          <div v-if="modalStore?.modalContent?.guardMessage" class="flex items-center justify-center mt-6 text-xs text-gray-400 gap-1.5 font-medium">
+            <IconShieldCheck class="w-4 h-4" />
+            <span> {{ modalStore?.modalContent?.guardMessage }}</span>
+          </div>
+
         </div>
       </div>
     </Modal>
@@ -31,9 +64,11 @@
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, nextTick, ref } from 'vue';
+import { watch, ref } from 'vue';
 import { useModalStore } from '@/stores/modal';
 import { Modal } from '@/afcl';
+import { IconClipboardDocumentSolid, IconShieldCheck } from '@iconify-prerendered/vue-heroicons';
+
 
 const modalRef = ref();
 const modalStore = useModalStore();

package/dist/spa/src/components/CustomRangePicker.vue

@@ -18,7 +18,7 @@
       v-model="end"
     >
 
-    <div v-if="min && max" class="w-full px-2.5">
+    <div v-if="min !== undefined && max !== undefined" class="w-full px-2.5">
       <RangePicker
         :dot-size="20"
         height="7.99px"
@@ -31,96 +31,70 @@
   </div>
 </template>
 <script setup lang="ts">
-import {computed, onMounted, ref, watch} from "vue";
+import { computed, ref, watch } from "vue";
 import debounce from 'debounce'
 import RangePicker from './RangePicker.vue';
 
 const props = defineProps<{
-  valueStart: number | null,
-  valueEnd: number | null,
-  min: number,
-  max: number,
+  valueStart: number | null | string,
+  valueEnd: number | null | string,
+  min: number | string | undefined,
+  max: number | string | undefined,
 }>()
 
 const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 
-const minFormatted = computed(() => Math.floor(<number>props.min));
-const maxFormatted = computed(() => Math.ceil(<number>props.max));
+const minFormatted = computed(() => {
+  const v = Number(props.min);
+  return isNaN(v) ? 0 : Math.floor(v);
+});
 
+const maxFormatted = computed(() => {
+  const v = Number(props.max);
+  return isNaN(v) ? 100 : Math.ceil(v);
+});
 
-const start = ref<number | null>(props.valueStart);
-const end = ref<number | null>(props.valueEnd);
+const normalize = (val: any) => {
+  if (val === "" || val === null || val === undefined) return null;
+  const numericValue = Number(val);
+  return isNaN(numericValue) ? null : numericValue;
+};
 
-const sliderValue = ref<[number, number]>([minFormatted.value, maxFormatted.value]);
+const start = ref<number | null>(normalize(props.valueStart));
+const end = ref<number | null>(normalize(props.valueEnd));
 
-watch([start, end], () => {
-  if ( !start.value && end.value ) {
-    setSliderValues(minFormatted.value, end.value);
-  } else if ( start.value && !end.value ) {
-    setSliderValues(start.value, maxFormatted.value);
-  } else if ( !start.value && !end.value ) {
-    setSliderValues(minFormatted.value, maxFormatted.value);
-  } else {
-    setSliderValues(start.value, end.value);
-  }
-})
+const sliderValue = ref<[number, number]>([
+  start.value ?? minFormatted.value, 
+  end.value ?? maxFormatted.value
+]);
 
-const updateFromSlider =
-    debounce((value: [number, number]) => {
-      start.value = value[0] === minFormatted.value ? null : value[0];
-      end.value = value[1] === maxFormatted.value ? null : value[1];
-    }, 500);
+function setSliderValues(s: number | null, e: number | null) {
+  sliderValue.value = [s ?? minFormatted.value, e ?? maxFormatted.value];
+}
 
-onMounted(() => {
-  updateStartFromProps();
-  updateEndFromProps();
+watch([start, end], () => {
+  setSliderValues(start.value, end.value);
+}, { immediate: true });
 
-  watch(() => props.valueStart, (value) => {
-    updateStartFromProps();
-  });
+const updateFromSlider = debounce((value: [number, number]) => {
+  start.value = value[0] === minFormatted.value ? null : value[0];
+  end.value = value[1] === maxFormatted.value ? null : value[1];
+}, 500);
 
-  watch(() => props.valueEnd, (value) => {
-    updateEndFromProps();
-  });
-})
+watch(() => props.valueStart, (newVal) => {
+  const v = normalize(newVal);
+  if (v !== start.value) start.value = v;
+});
 
-function updateStartFromProps() {
-  if (props.valueStart == start.value) {
-    return;
-  }
-  start.value = props.valueStart;
-  setSliderValues(start.value, end.value)
-}
+watch(() => props.valueEnd, (newVal) => {
+  const v = normalize(newVal);
+  if (v !== end.value) end.value = v;
+});
 
-function updateEndFromProps() {
-  if (props.valueEnd == end.value) {
-    return;
-  }
-  end.value = props.valueEnd;
-  setSliderValues(start.value, end.value)
-}
+watch(start, (newVal) => emit('update:valueStart', newVal));
+watch(end, (newVal) => emit('update:valueEnd', newVal));
 
-watch(start, () => {
-  emit('update:valueStart', start.value)
+watch([minFormatted, maxFormatted], () => {
+  setSliderValues(start.value, end.value);
 })
-
-watch(end, () => {
-  emit('update:valueEnd', end.value);
-})
-
-watch([minFormatted,maxFormatted], () => {
-  if ( !start.value && end.value ) {
-    setSliderValues(minFormatted.value, end.value);
-  } else if ( start.value && !end.value ) {
-    setSliderValues(start.value, maxFormatted.value);
-  } else if ( !start.value && !end.value ) {
-    setSliderValues(minFormatted.value, maxFormatted.value);
-  } else {
-    setSliderValues(start.value, end.value);
-  }
-})
-
-function setSliderValues(start: any, end: any) {
-  sliderValue.value = [start || minFormatted.value, end || maxFormatted.value];
-}
 </script>

package/dist/spa/src/components/ResourceForm.vue

@@ -490,6 +490,13 @@ async function validateUsingUserValidationFunction(editableColumnsInner: AdminFo
   }
 }
 
+watch(customComponentsInValidity, () => {
+  editableColumns.value?.forEach(column => {
+    checkIfColumnHasError(column);
+  });
+  isValid.value = checkIfAnyColumnHasErrors();
+});
+
 defineExpose({
   columnError,
   editableColumns,

package/dist/spa/src/components/ResourceListTable.vue

@@ -372,7 +372,7 @@ import CallActionWrapper from '@/components/CallActionWrapper.vue'
 const coreStore = useCoreStore();
 const { t } = useI18n();
 const { alert, confirm } = useAdminforth();
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   page: number,
   resource: AdminForthResourceFrontend | null,
   rows: any[] | null,
@@ -389,7 +389,9 @@ const props = defineProps<{
   customActionIconsThreeDotsMenuItems?: AdminForthComponentDeclaration[]
   tableRowReplaceInjection?: AdminForthComponentDeclaration,
   isVirtualScrollEnabled: boolean
-}>();
+}>(), {
+  sort: () => []
+});
 
 //select between all rows or rows, that should be rendered in virtual scroll
 const rowsToRender = computed(() => {
@@ -582,7 +584,8 @@ async function onClick(e: any, row: any) {
 
 async function deleteRecord(row: any) {
   const data = await confirm({
-    message: t('Are you sure you want to delete this item?'),
+    title: t('Are you sure you want to delete this item?'),
+    message: t(`This process is irreversible.`),
     yes: t('Delete'),
     no: t('Cancel'),
   });

package/dist/spa/src/components/Sidebar.vue

@@ -32,7 +32,7 @@
         <img v-if="coreStore.config?.iconOnlySidebar?.logo" :src="loadFile(coreStore.config?.iconOnlySidebar?.logo || '')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-sidebar-icon-only-logo h-8" :class="{ 'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && coreStore.config?.iconOnlySidebar?.logo && iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering) }" />
         <span 
           v-if="coreStore.config?.showBrandNameInSidebar && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))"
-          class="af-title self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"
+          class="af-title self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText truncate"
         >
           {{ coreStore.config?.brandName }}
         </span>

package/dist/spa/src/stores/modal.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 
  type ModalContentType = {
   title?: string;
+  guardMessage?: string;
   content?: string;
   contentHTML?: string;
   acceptText?: string;
@@ -13,6 +14,7 @@ import { defineStore } from 'pinia'
 export const useModalStore = defineStore('modal', () => {
   const modalContent = ref({
     title: 'title',
+    guardMessage: 'guardMessage',
     content: '',
     contentHTML: '',
     acceptText: 'acceptText',
@@ -32,7 +34,8 @@ export const useModalStore = defineStore('modal', () => {
   }
   function setModalContent(content: ModalContentType) {
     modalContent.value = {
-      title: content.title || 'title',
+      title: content.title || '',
+      guardMessage: content.guardMessage || '',
       content: content.content || '',
       contentHTML: content.contentHTML || '',
       acceptText: content.acceptText || 'acceptText',
@@ -43,6 +46,7 @@ export const useModalStore = defineStore('modal', () => {
     isOpened.value = false;
     modalContent.value = {
       title: 'title',
+      guardMessage: 'guardMessage',
       content: 'content',
       contentHTML: '',
       acceptText: 'acceptText',

package/dist/spa/src/types/Back.ts

@@ -62,6 +62,8 @@ export interface IAdminForthEndpointOptions {
   request_schema?: AnySchemaObject,
   response_schema?: AnySchemaObject,
   responce_schema?: AnySchemaObject,
+  meta?: Record<string, unknown>,
+  target?: 'json' | 'upload',
   handler: (input: IAdminForthEndpointHandlerInput) => void | Promise<any>,
 }
 
@@ -82,14 +84,21 @@ export interface IAdminForthExpressRouteSchema {
    * JSON schema or Zod schema describing the JSON response body for a custom Express route.
    */
   response?: AdminForthExpressSchemaInput;
+
+  /**
+   * Internal metadata for AdminForth integrations. This is not rendered in the OpenAPI document.
+   */
+  meta?: Record<string, unknown>;
 }
 
 export interface IRegisteredApiSchema {
   method: string;
   path: string;
   description?: string;
+  meta?: Record<string, unknown>;
   request_schema?: AnySchemaObject;
   response_schema?: AnySchemaObject;
+  handler?: (input: IAdminForthEndpointHandlerInput) => void | Promise<any>;
 }
 
 export interface IAdminForthApiValidationError {
@@ -1416,7 +1425,7 @@ export interface AdminForthActionInput {
     adminUser: AdminUser;
     standardAllowedActions: AllowedActions;
   }) => boolean | Promise<boolean>);
-  url?: string;
+  url?: string | ((params: { adminUser: AdminUser; resource: AdminForthResource; recordId: string, record: any }) => string);
   bulkHandler?: (params: {
       adminforth: IAdminForth;
       resource: AdminForthResource;

package/dist/spa/src/types/Common.ts

@@ -66,7 +66,7 @@ export enum ActionCheckSource {
   EditRequest = 'editRequest',
   CreateRequest = 'createRequest',
   DeleteRequest = 'deleteRequest',
-  BulkActionRequest = 'bulkActionRequest',
+  BulkActionRequest = 'bulkActionRequest',  // @deprecated beacuse whole bulk action is deprecated in favor of custom actions, never use this value in new code
   CustomActionRequest = 'customActionRequest',
 }
 

package/dist/spa/src/types/FrontendAPI.ts

@@ -160,6 +160,16 @@ export interface FrontendAPIInterface {
 }
 
 export type ConfirmParams = {
+    /**
+     * The title to display in the dialog
+     */
+    title?: string;
+
+    /**
+     * The message to display in the dialog as a warning that action is irreversible
+     */
+    guardMessage?: string;
+    
     /**
      * The message to display in the dialog
      */

package/dist/spa/src/types/adapters/AudioAdapter.ts

@@ -0,0 +1,73 @@
+export type SpeechToTextInput = {
+  buffer: Buffer;
+  filename: string;
+  mimeType: string;
+  language?: string;
+  prompt?: string;
+};
+
+export type SpeechToTextResult = {
+  text: string;
+  language?: string;
+  raw?: unknown;
+};
+
+export interface SpeechToTextAdapter {
+  name: string;
+
+  validate(): void;
+
+  transcribe(input: SpeechToTextInput): Promise<SpeechToTextResult>;
+}
+
+export type TtsAudioFormat =
+  | "mp3"
+  | "opus"
+  | "aac"
+  | "flac"
+  | "wav"
+  | "pcm";
+
+export type TextToSpeechInput<Voice extends string = string> = {
+  text: string;
+  voice?: Voice;
+  format?: TtsAudioFormat;
+  speed?: number;
+  instructions?: string;
+  stream?: false;
+};
+
+export type TextToSpeechResult = {
+  audio: Buffer;
+  mimeType: string;
+  format: TtsAudioFormat;
+  raw?: unknown;
+};
+
+export type TtsStreamFormat = "audio" | "sse";
+
+export type TextToSpeechStreamInput<Voice extends string = string> =
+  Omit<TextToSpeechInput<Voice>, "stream"> & {
+    stream: true;
+    streamFormat?: TtsStreamFormat;
+  };
+
+export type TextToSpeechStreamResult = {
+  audioStream: ReadableStream<Uint8Array>;
+  mimeType: string;
+  format: TtsAudioFormat;
+  streamFormat: TtsStreamFormat;
+  raw?: unknown;
+};
+
+export interface TextToSpeechAdapter<Voice extends string = string> {
+  name: string;
+
+  validate(): void;
+
+  synthesize(input: TextToSpeechStreamInput<Voice>): Promise<TextToSpeechStreamResult>;
+  synthesize(input: TextToSpeechInput<Voice>): Promise<TextToSpeechResult>;
+}
+
+export type AudioAdapter<Voice extends string = string> =
+  SpeechToTextAdapter & TextToSpeechAdapter<Voice>;

package/dist/spa/src/types/adapters/index.ts

@@ -15,3 +15,13 @@ export type { ImageVisionAdapter } from './ImageVisionAdapter.js';
 export type { OAuth2Adapter } from './OAuth2Adapter.js';
 export type { StorageAdapter } from './StorageAdapter.js';
 export type { CaptchaAdapter } from './CaptchaAdapter.js';
+export type {
+	AudioAdapter,
+	SpeechToTextAdapter,
+	SpeechToTextInput,
+	SpeechToTextResult,
+	TextToSpeechAdapter,
+	TextToSpeechInput,
+	TextToSpeechResult,
+	TtsAudioFormat,
+} from './AudioAdapter.js';

package/dist/spa/src/utils/listUtils.ts

@@ -3,6 +3,7 @@ import { callAdminForthApi } from '@/utils';
 import { type AdminForthResourceFrontend } from '../types/Common';
 import { useAdminforth } from '@/adminforth';
 import { showErrorTost } from '@/composables/useFrontendApi'
+import { useI18n } from 'vue-i18n';
 
 let getResourceDataLastAbortController: AbortController | null = null;
 export async function getList(resource: AdminForthResourceFrontend, isPageLoaded: boolean, page: number | null , pageSize: number, sort: any, checkboxes:{ value: any[] }, filters: any = [] ) {
@@ -57,10 +58,12 @@ export async function startBulkAction(actionId: string, resource: AdminForthReso
   bulkActionLoadingStates: {value: Record<string, boolean>}, getListInner: () => Promise<any>) {
   const action = resource?.options?.bulkActions?.find(a => a.id === actionId);
   const { confirm, alert } = useAdminforth();
+  const { t } = useI18n();
 
   if (action?.confirm) {
     const confirmed = await confirm({
-      message: action.confirm,
+      title: action.confirm,
+      message: t(`Deleting ${checkboxes.value.length} ${checkboxes.value.length === 1 ? 'item' : 'items'}. This process is irreversible.`),
     });
     if (!confirmed) {
       return;