adminforth 2.55.3 → 2.55.4-next.2

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

@@ -10,11 +10,11 @@
         v-show="isModalOpen" 
         v-if="!removeFromDom" 
         @click="backdropClick" 
-        class="bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-1rem max-h-full flex"
+        class="bg-black/50 overflow-y-auto overscroll-contain overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-1rem max-h-full flex"
         :class="props.backgroundCustomClasses"
       >
         <!-- Modal content -->
-        <div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
+        <div v-bind="$attrs" class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund mx-4 sm:mx-0">
 
           <!-- Modal body -->
           <div class="text-lightDialogBodyText dark:text-darkDialogBodyText">
@@ -28,14 +28,14 @@
             :class="props.modalCustomClasses"
           >
             <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm w-full">
-              <h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">Confirm Close</h2>
+              <h2 class="text-lg font-semibold mb-4 text-lightDialogHeaderText dark:text-darkDialogHeaderText">{{ t('Confirm Close') }}</h2>
               <p class="mb-6 text-lightDialogBodyText dark:text-darkDialogBodyText">{{ props.closeConfirmationText }}</p>
               <div class="flex justify-end">
                 <Button
                   class="me-3 !bg-gray-50 dark:!bg-gray-700 !text-lightDialogBodyText dark:!text-darkDialogBodyText hover:!bg-gray-100 dark:hover:!bg-gray-600 !border-gray-200 dark:!border-gray-600"
                   @click="showConfirmationOnClose = false"
                 >
-                  Cancel
+                  {{ t('Cancel') }}
                 </Button>
                 <Button
                   @click="
@@ -43,7 +43,7 @@
                     close();
                   "
                 >
-                  Confirm
+                  {{ t('Confirm') }}
                 </Button>
               </div>
             </div>
@@ -56,8 +56,10 @@
 <script setup lang="ts">
 import Button from "./Button.vue";
 import { ref, onMounted, nextTick, onUnmounted, computed, type Ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const isModalOpen = ref(false);
+const { t } = useI18n();
 
 const removeFromDom = computed(() => {
   return props.removeFromDomOnClose && !isModalOpen.value;

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

@@ -6,7 +6,7 @@
       backgroundCustomClasses="z-[998]"
       modalCustomClasses="z-[999] flex items-center justify-center" 
     >
-      <div class="relative p-6 sm:p-8 w-[440px] bg-white rounded-lg shadow-xl dark:bg-gray-800" >
+      <div class="relative p-6 sm:p-8 sm:w-[440px] 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">

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

@@ -3,7 +3,6 @@ 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 = [] ) {
@@ -55,15 +54,14 @@ export async function getList(resource: AdminForthResourceFrontend, isPageLoaded
 
 
 export async function startBulkAction(actionId: string, resource: AdminForthResourceFrontend, checkboxes: { value: any[] }, 
-  bulkActionLoadingStates: {value: Record<string, boolean>}, getListInner: () => Promise<any>) {
+  bulkActionLoadingStates: {value: Record<string, boolean>}, getListInner: () => Promise<any>, t: (key: string, vars?: Record<string, any>) => string) {
   const action = resource?.options?.bulkActions?.find(a => a.id === actionId);
   const { confirm, alert } = useAdminforth();
-  const { t } = useI18n();
 
   if (action?.confirm) {
     const confirmed = await confirm({
       title: action.confirm,
-      message: t(`Deleting ${checkboxes.value.length} ${checkboxes.value.length === 1 ? 'item' : 'items'}. This process is irreversible.`),
+      message: `${t('Deleting')} ${checkboxes.value.length} ${checkboxes.value.length === 1 ? t('item') : t('items')}. ${t('This process is irreversible.')}`,
     });
     if (!confirmed) {
       return;

package/dist/spa/src/views/ListView.vue

@@ -248,6 +248,7 @@ const filtersShow = ref(false);
 const { list, alert } = useAdminforth();
 const coreStore = useCoreStore();
 const filtersStore = useFiltersStore();
+const { t } = useI18n();
 
 const route = useRoute();
 
@@ -331,7 +332,7 @@ async function refreshExistingList(pk?: any) {
 }
 
 async function startBulkActionInner(actionId: string) {
-  await startBulkAction(actionId, coreStore.resource!, checkboxes, bulkActionLoadingStates, getListInner);
+  await startBulkAction(actionId, coreStore.resource!, checkboxes, bulkActionLoadingStates, getListInner, t);
 }
 
 async function startCustomBulkActionInner(actionId: string | number) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.55.3",
+  "version": "2.55.4-next.2",
   "description": "OpenSource Agent-Native forth-generation admin panel",
   "keywords": [
     "adminforth",