adminforth 2.4.0 → 2.5.1

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

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="afcl-input flex z-0 relative" :class="{'opacity-50' : readonly}">
+  <div class="afcl-input-wrapper flex z-0 relative" :class="{'opacity-50' : readonly}">
     <span
         v-if="$slots.prefix || prefix"
         class="inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 border border-s-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
@@ -15,7 +15,7 @@
       @input="$emit('update:modelValue', $event.target?.value)"
       :value="modelValue"
       aria-describedby="helper-text-explanation"
-      class="inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
+      class="afcl-input inline-flex bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
       blue-500 focus:border-blue-500 block w-20 p-2.5 dark:bg-gray-700 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 dark:text-white translate-y-0"
       :class="{'rounded-l-md': !$slots.prefix && !prefix, 'rounded-r-md': !$slots.suffix && !suffix, 'w-full': fullWidth}"
       :disabled="readonly"

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

@@ -0,0 +1,25 @@
+<template>
+  <JsonViewer
+    class="afcl-json-viewer min-w-[6rem]"
+    :value="value"
+    :expandDepth="expandDepth"
+    copyable
+    sort
+    :theme="currentTheme"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { JsonViewer } from 'vue3-json-viewer'
+import { useCoreStore } from '@/stores/core'
+
+defineProps<{
+  value: any
+  expandDepth?: number
+}>()
+
+const coreStore = useCoreStore()
+
+const currentTheme = computed(() => (coreStore.theme === 'dark' ? 'dark' : 'light'))
+</script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="afcl-select relative inline-block" ref="internalSelect" 
+  <div class="afcl-select afcl-select-wrapper relative inline-block" ref="internalSelect" 
     :class="{'opacity-50': readonly}"
   >
     <div class="relative">
@@ -74,7 +74,6 @@
       <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-gray-400 dark:text-gray-300">
         {{ options.length ? $t('No results found') : $t('No items here') }}
       </div>
-
       <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-gray-400">
         <slot name="extra-item"></slot>
       </div>

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

@@ -1,8 +1,8 @@
 <template>
 
-<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-  <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-      <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+<div class="afcl-table-container relative overflow-x-auto shadow-md sm:rounded-lg">
+  <table class="afcl-table w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+      <thead class="afcl-table-thread text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
         <tr>
           <th scope="col" class="px-6 py-3"
             v-for="column in columns"
@@ -19,7 +19,7 @@
         <tr
           v-for="(item, index) in dataPage"
           :class="{
-            'odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800': evenHighlights,
+            'afcl-table-body odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800': evenHighlights,
             'border-b dark:border-gray-700': index !== dataPage.length - 1 || totalPages > 1,
           }"
         >
@@ -38,24 +38,24 @@
         </tr>
       </tbody>
   </table>
-  <nav class="flex items-center flex-column flex-wrap md:flex-row justify-between p-4" 
+  <nav class="afcl-table-pagination-container flex items-center flex-column flex-wrap md:flex-row justify-between p-4" 
     v-if="totalPages > 1"
     :aria-label="$t('Table navigation')">
     <i18n-t 
-      keypath="Showing {from} to {to} of {total}" tag="span" class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto"
+      keypath="Showing {from} to {to} of {total}" tag="span" class="afcl-table-pagination-text text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto"
     >
       <template #from><span class="font-semibold text-gray-900 dark:text-white">{{ Math.min((currentPage - 1) * props.pageSize + 1, props.data.length) }}</span></template>
       <template #to><span class="font-semibold text-gray-900 dark:text-white">{{ Math.min(currentPage * props.pageSize, props.data.length) }}</span></template>
       <template #total><span class="font-semibold text-gray-900 dark:text-white">{{ props.data.length }}</span></template>
     </i18n-t>
 
-    <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
+    <ul class="afcl-table-pagination-list inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
       <li v-for="page in totalPages" :key="page">
         <a href="#" 
           @click.prevent="switchPage(page)"
           :aria-current="page === page ? 'page' : undefined"
           :class='{
-            "text-blue-600 bg-lightPrimary text-lightPrimaryContrast dark:bg-darkPrimary dark:text-darkPrimaryContrast hover:opacity-90": page === currentPage,
+            "afcl-table-pagination-button text-blue-600 bg-lightPrimary text-lightPrimaryContrast dark:bg-darkPrimary dark:text-darkPrimaryContrast hover:opacity-90": page === currentPage,
             "text-gray-500 border bg-white border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white": page !== currentPage,
             "rounded-s-lg ms-0": page === 1,
             "rounded-e-lg": page === totalPages,

package/dist/spa/src/afcl/index.ts

@@ -19,6 +19,6 @@ export { default as Skeleton } from './Skeleton.vue';
 export { default as Dialog } from './Dialog.vue';
 export { default as MixedChart } from './MixedChart.vue';
 export { default as CountryFlag } from './CountryFlag.vue';
-
+export { default as JsonViewer } from './JsonViewer.vue';
 
 

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

@@ -8,7 +8,7 @@ const modalStore = useModalStore();
   <Teleport to="body">
     <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 " >
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
+            <div class="afcl-confirmation-container relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
                 <button type="button"@click="modalStore.togleModal" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
                     <svg class="w-3 h-3"  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"/>
@@ -19,11 +19,11 @@ const modalStore = useModalStore();
                     <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"  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="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
-                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                    <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
+                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>
-                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{ modalStore?.modalContent?.cancelText }}</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-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{ modalStore?.modalContent?.cancelText }}</button>
                 </div>
             </div>
         </div>

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

@@ -2,7 +2,7 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed  right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-gray-900"
+      class="af-filters-sidebar fixed right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-gray-900"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"

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

@@ -6,7 +6,6 @@
     <!-- skelet loader -->
     <div role="status" v-if="!resource || !resource.columns"
         class="max-w p-4 space-y-4 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
-
         <div role="status" class="max-w-sm animate-pulse">
             <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div>
         </div>      
@@ -128,7 +127,7 @@
                   }"
 
                 >
-                  <IconEyeSolid class="w-5 h-5 me-2"/>
+                  <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
                 </RouterLink>
 
                 <template v-slot:tooltip>
@@ -147,7 +146,7 @@
                     }
                   }"
                 >
-                  <IconPenSolid class="w-5 h-5 me-2"/>
+                  <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
                 </RouterLink>
                 <template v-slot:tooltip>
                   {{ $t('Edit item') }}
@@ -159,7 +158,7 @@
                   v-if="resource.options?.allowedActions.delete"
                   @click="deleteRecord(row)"
                 >
-                  <IconTrashBinSolid class="w-5 h-5 me-2"/>
+                  <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
                 </button>
 
                 <template v-slot:tooltip>
@@ -199,14 +198,14 @@
   <!-- pagination
   totalRows in v-if is used to not hide page input during loading when user puts cursor into it and edit directly (rows gets null there during edit)
   -->
-  <div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3"
-    v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
-  >
+  <div class="af-pagination-container flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
     
-    <div class="inline-flex ">
+    <div class="af-pagination-buttons-container inline-flex "
+      v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
+    >
         <!-- Buttons -->
         <button
-          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page--; pageInput = page.toString();" :disabled="page <= 1">
           <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
               viewBox="0 0 14 10">
@@ -218,14 +217,14 @@
           </span>
         </button>
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page = 1; pageInput = page.toString();" :disabled="page <= 1">
           <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
           1
         </button>
         <div
           contenteditable="true" 
-          class="min-w-10 outline-none inline-block w-auto min-w-10 py-1.5 px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
+          class="af-pagination-input min-w-10 outline-none inline-block w-auto min-w-10 py-1.5 px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
           @keydown="onPageKeydown($event)"
           @input="onPageInput($event)"
           @blur="validatePageInput()"
@@ -234,14 +233,14 @@
         </div>
 
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
           {{ totalPages }}
 
           <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
         </button>
         <button
-          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          class="af-pagination-next-button  flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page++; pageInput = page.toString();" :disabled="page >= totalPages">
           <span class="hidden sm:inline">{{ $t('Next') }}</span>
           <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
@@ -254,10 +253,10 @@
 
     <!-- Help text -->
     <span class="text-sm text-gray-700 dark:text-gray-400">
-        <span v-if="((page || 1) - 1) * pageSize + 1 > totalRows">{{ $t('Wrong Page') }} </span>
-        <template v-else>
+        <span v-if="((((page || 1) - 1) * pageSize + 1 > totalRows) && totalRows > 0)">{{ $t('Wrong Page') }} </span>
+        <template v-else-if="resource && totalRows > 0">
           
-          <span class="hidden sm:inline">
+          <span class="af-pagination-info hidden sm:inline">
             <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >
               <template v-slot:from>
                 <strong>{{ from }}</strong>

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

@@ -216,11 +216,11 @@
   <!-- pagination
   totalRows in v-if is used to not hide page input during loading when user puts cursor into it and edit directly (rows gets null there during edit)
   -->
-  <div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3"
-    v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
-  >
+  <div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
     
-    <div class="inline-flex ">
+    <div class="inline-flex "
+      v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
+    >
         <!-- Buttons -->
         <button
           class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
@@ -271,8 +271,8 @@
 
     <!-- Help text -->
     <span class="text-sm text-gray-700 dark:text-gray-400">
-        <span v-if="((page || 1) - 1) * pageSize + 1 > totalRows">{{ $t('Wrong Page') }} </span>
-        <template v-else>
+        <span v-if="((((page || 1) - 1) * pageSize + 1 > totalRows) && totalRows > 0)">{{ $t('Wrong Page') }} </span>
+        <template v-else-if="resource && totalRows > 0">
           
           <span class="hidden sm:inline">
             <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="overflow-x-auto rounded-default shadow-resourseFormShadow dark:shadow-darkResourseFormShadow">
+      <div :class="`overflow-x-auto ${isRounded ? 'rounded-default' : ''} shadow-resourseFormShadow dark:shadow-darkResourseFormShadow`">
         <div v-if="groupName && !noTitle"  class="text-md font-semibold px-6 py-3 flex flex-1 items-center dark:border-gray-600 text-gray-700 bg-lightFormHeading dark:bg-gray-700 dark:text-gray-400 rounded-t-lg">
         {{ groupName }}
         </div>
@@ -60,7 +60,7 @@
   import { getCustomComponent } from '@/utils';
   import { useCoreStore } from '@/stores/core';
   import { computed } from 'vue';
-  const props = defineProps<{ 
+  const props = withDefaults(defineProps<{ 
     columns: Array<{
         name: string;
         label: string;
@@ -80,8 +80,11 @@
     noTitle?: boolean;
     resource: Record<string, any>;
     record: Record<string, any>;
-  }>();
-
+    isRounded?: boolean;
+  }>(), {
+    isRounded: true
+  });
+  
   const coreStore = useCoreStore();
   const allColumnsHaveCustomComponent = computed(() => {
     return props.columns.every(column => {

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

@@ -28,7 +28,7 @@
         
     <span v-else-if="column.type === 'boolean'">
       <span v-if="record[column.name] === true" class="bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
-      <span v-else-if="record[column.name] === false" class="bg-red-100 whitespace-nowrap text-red-800gg text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
+      <span v-else-if="record[column.name] === false" class="bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
       <span v-else class="bg-gray-100 whitespace-nowrap text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-400">{{ $t('Unset') }}</span>
     </span>
     <span

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

@@ -92,16 +92,16 @@ export interface IExpressHttpServer extends IHttpServer {
    * Adds adminUser to request object if user is authorized. Drops request with 401 status if user is not authorized.
    * @param callable : Function which will be called if user is authorized.
    * 
-   * Example:
    * 
+   * @example
    * ```ts
-   * expressApp.get('/myApi', authorize((req, res) => \{
+   * expressApp.get('/myApi', authorize((req, res) => {
    *  console.log('User is authorized', req.adminUser);
-   *  res.json(\{ message: 'Hello World' \});
-   * \}));
-   * ``
+   *  res.json({ message: 'Hello World' });
+   * }));
+   * ```
    * 
-   */
+   */  
   authorize(callable: Function): void;
 }
 

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

@@ -0,0 +1,25 @@
+export interface CompletionAdapter {
+
+  /**
+   * This method is called to validate the configuration of the adapter
+   * and should throw a clear user-readbale error if the configuration is invalid.
+   */
+  validate(): void;
+
+  /**
+   * This method should return a text completion based on the provided content and stop sequence.
+   * @param content - The input text to complete
+   * @param stop - An array of stop sequences to indicate where to stop the completion
+   * @param maxTokens - The maximum number of tokens to generate
+   * @returns A promise that resolves to an object containing the completed text and other metadata
+   */
+  complete(
+    content: string,
+    stop: string[],
+    maxTokens: number,
+  ): Promise<{
+    content?: string;
+    finishReason?: string;
+    error?: string;
+  }>;
+}

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

@@ -0,0 +1,29 @@
+interface EmailAdapter {
+
+  /**
+   * This method is called to validate the configuration of the adapter
+   * and should throw a clear user-readbale error if the configuration is invalid.
+   */
+  validate(): Promise<void>;
+
+  /**
+   * This method should send an email using the adapter
+   * @param from - The sender's email address
+   * @param to - The recipient's email address
+   * @param text - The plain text version of the email
+   * @param html - The HTML version of the email
+   * @param subject - The subject of the email
+   */
+  sendEmail(
+    from: string,
+    to: string,
+    text: string,
+    html: string,
+    subject: string
+  ): Promise<{
+    error?: string;
+    ok?: boolean;
+  }>;
+}
+
+export { EmailAdapter };

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

@@ -0,0 +1,50 @@
+export interface ImageGenerationAdapter {
+
+  /**
+   * This method is called to validate the configuration of the adapter
+   * and should throw a clear user-readbale error if the configuration is invalid.
+   */
+  validate(): void;
+
+  /**
+   * Return max number of images which model can generate in one request
+   */
+  outputImagesMaxCountSupported(): number;
+
+  /**
+   * Return the list of supported dimensions in format ["100x500", "200x200"]
+   */
+  outputDimensionsSupported(): string[];
+
+  /**
+   * Input file extension supported
+   */
+  inputFileExtensionSupported(): string[];
+
+  /**
+   * This method should generate an image based on the provided prompt and input files.
+   * @param prompt - The prompt to generate the image
+   * @param inputFiles - An array of input file paths (optional)
+   * @param n - The number of images to generate (default is 1)
+   * @param size - The size of the generated image (default is the lowest dimension supported)
+   * @returns A promise that resolves to an object containing the generated image URLs and any error message
+   */
+  generate({
+    prompt, 
+    inputFiles,
+    n,
+    size,
+  }: {
+    prompt: string,
+    inputFiles: string[],
+
+    // default = lowest dimension supported 
+    size?: string,
+
+    // one by default
+    n?: number
+  }): Promise<{
+    imageURLs?: string[];
+    error?: string;
+  }>;
+}

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

@@ -0,0 +1,34 @@
+
+/**
+ * This interface is used to implement OAuth2 authentication adapters.
+ */
+export interface OAuth2Adapter {
+  /**
+   * This method should return navigatable URL to the OAuth2 provider authentication page.
+   */
+  getAuthUrl(): string;
+
+  /**
+   * This method should return the token from the OAuth2 provider using the provided code and redirect URI.
+   * @param code - The authorization code received from the OAuth2 provider
+   * @param redirect_uri - The redirect URI used in the authentication request
+   * @returns A promise that resolves to an object containing the email address of the authenticated user
+   */
+  getTokenFromCode(code: string, redirect_uri: string): Promise<{ email: string }>;
+
+  /**
+   * This method should return text (content) of SVG icon which will be used in the UI.
+   * Use official SVG icons with simplest possible conent, omit icons which have base64 encoded raster images inside.
+   */
+  getIcon(): string;
+
+  /**
+   * This method should return the text to be displayed on the button in the UI
+   */
+  getButtonText?(): string;
+
+  /**
+   * This method should return the name of the adapter
+   */
+  getName?(): string;
+}

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

@@ -0,0 +1,73 @@
+
+/**
+ * Each storage adapter should support two ways of storing files:
+ * - publically (public URL) - the file can be accessed by anyone by HTTP GET / HEAD request with plain URL
+ * - privately (presigned URL) - the file can be accessed by anyone by HTTP GET / HEAD request only with presigned URLs, limited by expiration time
+ * 
+ */
+export interface StorageAdapter {
+  /**
+   * This method should return the presigned URL for the given key capable of upload (adapter user will call PUT multipart form data to this URL within expiresIn seconds after link generation).
+   * By default file which will be uploaded on PUT should be marked for deletion. So if during 24h it is not marked for not deletion, it adapter should delete it forever.
+   * The PUT method should fail if the file already exists.
+   * 
+   * Adapter user will always pass next parameters to the method:
+   * @param key - The key of the file to be uploaded e.g. "uploads/file.txt"
+   * @param expiresIn - The expiration time in seconds for the presigned URL
+   * @param contentType - The content type of the file to be uploaded, e.g. "image/png"
+   * 
+   * @returns A promise that resolves to an object containing the upload URL and any extra parameters which should be sent with PUT multipart form data
+   */
+  getUploadSignedUrl(key: string, contentType: string, expiresIn?: number): Promise<{
+    uploadUrl: string;
+    uploadExtraParams?: Record<string, string>;
+  }>;
+
+  /**
+   * This method should return the URL for the given key capable of download (200 GET request with response body or 200 HEAD request without response body).
+   * If adapter configured to store objects publically, this method should return the public URL of the file.
+   * If adapter configured to no allow public storing of images, this method should return the presigned URL for the file.
+   * 
+   * @param key - The key of the file to be downloaded e.g. "uploads/file.txt"
+   * @param expiresIn - The expiration time in seconds for the presigned URL
+   */
+  getDownloadUrl(key: string, expiresIn?: number): Promise<string>;
+
+  /**
+   * This method should mark the file for deletion.
+   * If file is marked for delation and exists more then 24h (since creation date) it should be deleted.
+   * This method should work even if the file does not exist yet (e.g. only presigned URL was generated).
+   * @param key - The key of the file to be uploaded e.g. "uploads/file.txt"
+   */
+  markKeyForDeletation(key: string): Promise<void>;
+
+
+  /**
+   * This method should mark the file to not be deleted.
+   * This method should be used to cancel the deletion of the file if it was marked for deletion.
+   * @param key - The key of the file to be uploaded e.g. "uploads/file.txt"
+   */
+  markKeyForNotDeletation(key: string): Promise<void>;
+
+
+  /**
+   * This method can start needed schedullers, cron jobs, etc. to clean up the storage.
+   * @param adapterUserUniqueRepresentation - The unique representation of the plugin instance which 
+   * wil use this adapter. Might be handy if you need to distinguish between different instances of the same adapter.
+   */
+  setupLifecycle(adapterUserUniqueRepresentation: string): Promise<void>;
+
+  /**
+   * If adapter is configured to publically, this method should return true.
+   */
+  objectCanBeAccesedPublicly(): Promise<boolean>;
+
+  /**
+   * This method should return the key as a data URL (base64 encoded string).
+   * @param key - The key of the file to be converted to a data URL
+   * @returns A promise that resolves to a string containing the data URL
+   */
+  getKeyAsDataURL(key: string): Promise<string>;
+}
+
+  

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

@@ -0,0 +1,5 @@
+export type { EmailAdapter } from './EmailAdapter.js';
+export type { CompletionAdapter } from './CompletionAdapter.js';
+export type { ImageGenerationAdapter } from './ImageGenerationAdapter.js';
+export type { OAuth2Adapter } from './OAuth2Adapter.js';
+export type { StorageAdapter } from './StorageAdapter.js';

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

@@ -13,14 +13,14 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="af-cancel-button flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         {{ $t('Cancel') }}
       </button>
 
       <button  
         @click="saveRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+        class="af-save-button flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
         :disabled="saving || (validating && !isValid)"
       > 
         <svg v-if="saving"

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

@@ -74,14 +74,14 @@
 
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="af-create-button flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <IconPlusOutline class="w-4 h-4 me-2"/>
         {{ $t('Create') }}
       </RouterLink>
 
       <button
-        class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="af-filter-button flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
         @click="()=>{filtersShow = !filtersShow}"
         v-if="coreStore.resource?.options?.allowedActions?.filter"
       >