adminforth 2.7.18 → 2.8.0

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

@@ -51,8 +51,8 @@
               </div>
               <span
                 class="bg-red-100 text-red-800 text-xs font-medium me-1 px-1 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
-                v-if="sort.findIndex((s) => s.field === c.name) !== -1 && sort?.length > 1">
-                {{ sort.findIndex((s) => s.field === c.name) + 1 }}
+                v-if="sort.findIndex((s: any) => s.field === c.name) !== -1 && sort?.length > 1">
+                {{ sort.findIndex((s: any) => s.field === c.name) + 1 }}
               </span>
 
             </div>
@@ -68,7 +68,7 @@
         <!-- table header end -->
         <SkeleteLoader 
           v-if="!rows" 
-          :columns="resource?.columns.filter(c => c.showIn.list).length + 2"
+          :columns="resource?.columns.filter((c: AdminForthResourceColumnCommon) => c.showIn?.list).length + 2"
           :rows="rowHeights.length || 20"
           :row-heights="rowHeights"
           :column-widths="columnWidths"
@@ -99,13 +99,13 @@
           ref="rowRefs"
           class="bg-lightListTable dark:bg-darkListTable border-lightListBorder dark:border-gray-700 hover:bg-lightListTableRowHover dark:hover:bg-darkListTableRowHover"
           :class="{'border-b': rowI !== visibleRows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
-          @mounted="(el) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
+          @mounted="(el: any) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
         >
         <td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
           <Checkbox
             :model-value="checkboxesInternal.includes(row._primaryKeyValue)"
-            @change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
-            @click="(e)=>e.stopPropagation()"
+            @change="(e: any)=>{addToCheckedValues(row._primaryKeyValue)}"
+            @click="(e: any)=>e.stopPropagation()"
           >
             <span class="sr-only">{{ $t('checkbox') }}</span>
           </Checkbox>
@@ -113,8 +113,8 @@
           <td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">
             <!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
             <component
-              :is="c?.components?.list ? getCustomComponent(c.components.list) : ValueRenderer"
-              :meta="c?.components?.list?.meta"
+              :is="c?.components?.list ? getCustomComponent(typeof c.components.list === 'string' ? { file: c.components.list } : c.components.list) : ValueRenderer"
+              :meta="typeof c?.components?.list === 'object' ? c.components.list.meta : undefined"
               :column="c"
               :record="row"
               :adminUser="coreStore.adminUser"
@@ -125,7 +125,7 @@
             <div class="flex text-lightPrimary dark:text-darkPrimary items-center">
               <Tooltip>
                 <RouterLink
-                  v-if="resource.options?.allowedActions.show"
+                  v-if="resource.options?.allowedActions?.show"
                   :to="{ 
                     name: 'resource-show', 
                     params: { 
@@ -145,7 +145,7 @@
 
               <Tooltip>
                 <RouterLink
-                  v-if="resource.options?.allowedActions.edit"
+                  v-if="resource.options?.allowedActions?.edit"
                   :to="{ 
                     name: 'resource-edit', 
                     params: { 
@@ -163,7 +163,7 @@
 
               <Tooltip>
                 <button
-                  v-if="resource.options?.allowedActions.delete"
+                  v-if="resource.options?.allowedActions?.delete"
                   @click="deleteRecord(row)"
                 >
                   <IconTrashBinSolid class="w-5 h-5 me-2"/>
@@ -325,7 +325,7 @@ import {
 } from '@iconify-prerendered/vue-flowbite';
 import router from '@/router';
 import { Tooltip } from '@/afcl';
-import type { AdminForthResourceCommon } from '@/types/Common';
+import type { AdminForthResourceCommon, AdminForthResourceColumnCommon } from '@/types/Common';
 import adminforth from '@/adminforth';
 import Checkbox from '@/afcl/Checkbox.vue';
 
@@ -359,7 +359,7 @@ const emits = defineEmits([
 const checkboxesInternal: Ref<any[]> = ref([]);
 const pageInput = ref('1');
 const page = ref(1);
-const sort = ref([]);
+const sort: Ref<Array<{field: string, direction: string}>> = ref([]);
 
 
 const from = computed(() => ((page.value || 1) - 1) * props.pageSize + 1);
@@ -368,11 +368,11 @@ const to = computed(() => Math.min((page.value || 1) * props.pageSize, props.tot
 watch(() => page.value, (newPage) => {
   emits('update:page', newPage);
 });
-async function onPageKeydown(event) {
+async function onPageKeydown(event: any) {
   // page input should accept only numbers, arrow keys and backspace
   if (['Enter', 'Space'].includes(event.code) ||
     (!['Backspace', 'ArrowRight', 'ArrowLeft'].includes(event.code)
-    && isNaN(String.fromCharCode(event.keyCode)))) {
+    && isNaN(Number(String.fromCharCode(event.keyCode || 0))))) {
     event.preventDefault();
     if (event.code === 'Enter') {
       validatePageInput();
@@ -393,7 +393,7 @@ watch(() => props.checkboxes, (newCheckboxes) => {
   checkboxesInternal.value = newCheckboxes;
 });
 
-watch(() => props.sort, (newSort) => {
+watch(() => props.sort, (newSort: any) => {
   sort.value = newSort;
 });
 
@@ -404,17 +404,17 @@ watch(() => props.page, (newPage) => {
   page.value = newPage;
 });
 
-const rowRefs = useTemplateRef('rowRefs');
-const headerRefs = useTemplateRef('headerRefs');
-const rowHeights = ref([]);
-const columnWidths = ref([]);
+const rowRefs = useTemplateRef<HTMLElement[]>('rowRefs');
+const headerRefs = useTemplateRef<HTMLElement[]>('headerRefs');
+const rowHeights = ref<number[]>([]);
+const columnWidths = ref<number[]>([]);
 watch(() => props.rows, (newRows) => {
   // rows are set to null when new records are loading
-  rowHeights.value = newRows || !rowRefs.value ? [] : rowRefs.value.map((el) => el.offsetHeight);
-  columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el) => el.offsetWidth)];
+  rowHeights.value = newRows || !rowRefs.value ? [] : rowRefs.value.map((el: HTMLElement) => el.offsetHeight);
+  columnWidths.value = newRows || !headerRefs.value ? [] : [48, ...headerRefs.value.map((el: HTMLElement) => el.offsetWidth)];
 });
 
-function addToCheckedValues(id) {
+function addToCheckedValues(id: any) {
   if (checkboxesInternal.value.includes(id)) {
     checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== id);
   } else {
@@ -423,17 +423,17 @@ function addToCheckedValues(id) {
   checkboxesInternal.value = [ ...checkboxesInternal.value ]
 }
 
-const columnsListed = computed(() => props.resource?.columns?.filter(c => c.showIn.list));
+const columnsListed = computed(() => props.resource?.columns?.filter((c: AdminForthResourceColumnCommon) => c.showIn?.list));
 
-async function selectAll(value) {
+async function selectAll() {
   if (!allFromThisPageChecked.value) {
-    props.rows.forEach((r) => {
+    props.rows?.forEach((r) => {
       if (!checkboxesInternal.value.includes(r._primaryKeyValue)) {
         checkboxesInternal.value.push(r._primaryKeyValue)
       } 
     });
   } else {
-    props.rows.forEach((r) => {
+    props.rows?.forEach((r) => {
       checkboxesInternal.value = checkboxesInternal.value.filter((item) => item !== r._primaryKeyValue);
     });
   }
@@ -446,15 +446,15 @@ const allFromThisPageChecked = computed(() => {
   if (!props.rows || !props.rows.length) return false;
   return props.rows.every((r) => checkboxesInternal.value.includes(r._primaryKeyValue));
 });
-const ascArr = computed(() => sort.value.filter((s) => s.direction === 'asc').map((s) => s.field));
-const descArr = computed(() => sort.value.filter((s) => s.direction === 'desc').map((s) => s.field));
+const ascArr = computed(() => sort.value.filter((s: any) => s.direction === 'asc').map((s: any) => s.field));
+const descArr = computed(() => sort.value.filter((s: any) => s.direction === 'desc').map((s: any) => s.field));
 
 
-function onSortButtonClick(event, field) {
+function onSortButtonClick(event: any, field: any) {
   // if ctrl key is pressed, add to sort otherwise sort by this field
   // in any case if field is already in sort, toggle direction
   
-  const sortIndex = sort.value.findIndex((s) => s.field === field);
+  const sortIndex = sort.value.findIndex((s: any) => s.field === field);
   if (sortIndex === -1) {
     // field is not in sort, add it
     if (event.ctrlKey) {
@@ -475,11 +475,11 @@ function onSortButtonClick(event, field) {
 
 const clickTarget = ref(null);
 
-async function onClick(e,row) {
+async function onClick(e: any,row: any) {
   if(clickTarget.value === e.target) return;
   clickTarget.value = e.target;
   await new Promise((resolve) => setTimeout(resolve, 100));
-  if (window.getSelection().toString()) return;
+  if (window.getSelection()?.toString()) return;
   else {
     if (row._clickUrl === null) {
       // user asked to nothing on click
@@ -494,7 +494,7 @@ async function onClick(e,row) {
           router.resolve({
             name: 'resource-show',
             params: {
-              resourceId: props.resource.resourceId,
+              resourceId: props.resource?.resourceId,
               primaryKey: row._primaryKeyValue,
             },
           }).href,
@@ -512,7 +512,7 @@ async function onClick(e,row) {
         router.push({
           name: 'resource-show',
           params: {
-            resourceId: props.resource.resourceId,
+            resourceId: props.resource?.resourceId,
             primaryKey: row._primaryKeyValue,
           },
         });
@@ -521,7 +521,7 @@ async function onClick(e,row) {
   }
 }
 
-async function deleteRecord(row) {
+async function deleteRecord(row: any) {
   const data = await adminforth.confirm({
     message: t('Are you sure you want to delete this item?'),
     yes: t('Delete'),
@@ -533,7 +533,7 @@ async function deleteRecord(row) {
         path: '/delete_record',
         method: 'POST',
         body: {
-          resourceId: props.resource.resourceId,
+          resourceId: props.resource?.resourceId,
           primaryKey: row._primaryKeyValue,
         }
       });
@@ -551,16 +551,16 @@ async function deleteRecord(row) {
   }
 }
 
-const actionLoadingStates = ref({});
+const actionLoadingStates = ref<Record<string | number, boolean>>({});
 
-async function startCustomAction(actionId, row) {
+async function startCustomAction(actionId: string, row: any) {
   actionLoadingStates.value[actionId] = true;
 
   const data = await callAdminForthApi({
     path: '/start_custom_action',
     method: 'POST',
     body: {
-      resourceId: props.resource.resourceId,
+      resourceId: props.resource?.resourceId,
       actionId: actionId,
       recordId: row._primaryKeyValue
     }
@@ -598,7 +598,7 @@ async function startCustomAction(actionId, row) {
   }
 }
 
-function onPageInput(event) {
+function onPageInput(event: any) {
   pageInput.value = event.target.innerText;
 }
 

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

@@ -62,10 +62,11 @@
   import { getCustomComponent } from '@/utils';
   import { useCoreStore } from '@/stores/core';
   import { computed } from 'vue';
+  import type { AdminForthResourceCommon } from '@/types/Common';
   const props = withDefaults(defineProps<{ 
     columns: Array<{
         name: string;
-        label: string;
+        label?: string;
         components?: {
           show?: {
             file: string;
@@ -77,10 +78,9 @@
           };
         };
     }>;
-    source: string;
     groupName?: string | null;
     noTitle?: boolean;
-    resource: Record<string, any>;
+    resource: AdminForthResourceCommon | null;
     record: Record<string, any>;
     isRounded?: boolean;
   }>(), {

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

@@ -26,8 +26,8 @@ const props = withDefaults(defineProps<{
     rowHeights?: number[];
     columnWidths?: number[];
 }>(), {
-    rowHeights: [],
-    columnWidths: [],
+    rowHeights: () => [],
+    columnWidths: () => [],
 });
 
 </script>

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

@@ -1,5 +1,5 @@
 <template >
-  <template v-if="threeDotsDropdownItems?.length || customActions?.length">
+  <template v-if="threeDotsDropdownItems?.length || customActions?.length || (bulkActions?.some((action: AdminForthBulkActionCommon) => action.showInThreeDotsDropdown))">
     <button 
       data-dropdown-toggle="listThreeDotsDropdown" 
       class="flex items-center py-2 px-2 text-sm font-medium text-lightThreeDotsMenuIconDots focus:outline-none bg-lightThreeDotsMenuIconBackground rounded border border-lightThreeDotsMenuIconBackgroundBorder hover:bg-lightThreeDotsMenuIconBackgroundHover hover:text-lightThreeDotsMenuIconDotsHover focus:z-10 focus:ring-4 focus:ring-lightThreeDotsMenuIconFocus dark:focus:ring-darkThreeDotsMenuIconFocus dark:bg-darkThreeDotsMenuIconBackground dark:text-darkThreeDotsMenuIconDots dark:border-darkThreeDotsMenuIconBackgroundBorder dark:hover:text-darkThreeDotsMenuIconDotsHover dark:hover:bg-darkThreeDotsMenuIconBackgroundHover rounded-default"
@@ -14,16 +14,26 @@
       id="listThreeDotsDropdown" 
       class="z-20 hidden bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600">
         <ul class="py-2 text-sm text-lightThreeDotsMenuBodyText dark:text-darkThreeDotsMenuBodyText" aria-labelledby="dropdownMenuIconButton">
-          <li v-for="item in threeDotsDropdownItems" :key="`dropdown-item-${item.label}`">
-            <a href="#" class="block px-4 py-2 hover:bg-lightThreeDotsMenuBodyBackgroundHover hover:text-lightThreeDotsMenuBodyTextHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
-              <component :is="getCustomComponent(item)" 
+          <li v-for="(item, i) in threeDotsDropdownItems" :key="`dropdown-item-${i}`">
+            <a  href="#" 
+              class="block px-4 py-2 hover:bg-lightThreeDotsMenuBodyBackgroundHover hover:text-lightThreeDotsMenuBodyTextHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
+              :class="{
+                'pointer-events-none': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
+                'opacity-50': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
+                'cursor-not-allowed': checkboxes && checkboxes.length === 0 && item.meta?.disabledWhenNoCheckboxes,
+              }"
+              @click="injectedComponentClick(i)">
+              <component :ref="(el: any) => setComponentRef(el, i)" :is="getCustomComponent(item)" 
                 :meta="item.meta" 
                 :resource="coreStore.resource" 
                 :adminUser="coreStore.adminUser"
+                :checkboxes="checkboxes"
+                :updateList="props.updateList"
+                :clearCheckboxes="clearCheckboxes"
               />
             </a>
           </li>
-          <li v-for="action in customActions" :key="action.id">
+          <li v-if="customActions" v-for="action in customActions" :key="action.id">
             <a href="#" @click.prevent="handleActionClick(action)" class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
               <div class="flex items-center gap-2">
                 <component 
@@ -35,6 +45,24 @@
               </div>
             </a>
           </li>
+          <li v-for="action in bulkActions?.filter((a:AdminForthBulkActionCommon ) => a.showInThreeDotsDropdown)" :key="action.id">
+            <a href="#" @click.prevent="startBulkAction(action.id)" 
+                class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover"
+                :class="{
+                  'pointer-events-none': checkboxes && checkboxes.length === 0,
+                  'opacity-50': checkboxes && checkboxes.length === 0,
+                  'cursor-not-allowed': checkboxes && checkboxes.length === 0
+                }">
+              <div class="flex items-center gap-2">
+                <component 
+                  v-if="action.icon" 
+                  :is="getIcon(action.icon)" 
+                  class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
+                />
+                {{ action.label }}
+              </div>
+            </a>
+          </li>
         </ul>
     </div>
   </template>
@@ -47,17 +75,36 @@ import { useCoreStore } from '@/stores/core';
 import adminforth from '@/adminforth';
 import { callAdminForthApi } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
+import type { AdminForthComponentDeclarationFull, AdminForthBulkActionCommon, AdminForthActionInput } from '@/types/Common.js';
+import { ref, type ComponentPublicInstance } from 'vue';
 
 const route = useRoute();
 const coreStore = useCoreStore();
 const router = useRouter();
+const threeDotsDropdownItemsRefs = ref<Array<ComponentPublicInstance | null>>([]);
 
 const props = defineProps({
-  threeDotsDropdownItems: Array,
-  customActions: Array
+  threeDotsDropdownItems: Array<AdminForthComponentDeclarationFull>,
+  customActions: Array<AdminForthActionInput>,
+  bulkActions: Array<AdminForthBulkActionCommon>,
+  checkboxes: Array,
+  updateList: {
+    type: Function,
+  },
+  clearCheckboxes: {
+    type: Function
+  }
 });
 
-async function handleActionClick(action) {
+const emit = defineEmits(['startBulkAction']);
+
+function setComponentRef(el: ComponentPublicInstance | null, index: number) {
+  if (el) {
+    threeDotsDropdownItemsRefs.value[index] = el;
+  }
+}
+
+async function handleActionClick(action: AdminForthActionInput) {
   adminforth.list.closeThreeDotsDropdown();
   
   const actionId = action.id;
@@ -88,8 +135,8 @@ async function handleActionClick(action) {
   
   if (data?.ok) {
     await coreStore.fetchRecord({
-      resourceId: route.params.resourceId, 
-      primaryKey: route.params.primaryKey,
+      resourceId: route.params.resourceId as string, 
+      primaryKey: route.params.primaryKey as string,
       source: 'show',
     });
 
@@ -108,4 +155,16 @@ async function handleActionClick(action) {
     });
   }
 }
+
+function startBulkAction(actionId: string) {
+  adminforth.list.closeThreeDotsDropdown();
+  emit('startBulkAction', actionId);
+}
+
+async function injectedComponentClick(index: number) {
+  const componentRef = threeDotsDropdownItemsRefs.value[index];
+  if (componentRef && 'click' in componentRef) {
+    (componentRef as any).click?.();
+  }
+}
 </script>

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

@@ -30,7 +30,18 @@
     </div>
 
     <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-if="toast.messageHtml" v-html="toast.messageHtml"></div>
-    <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-else>{{toast.message}}</div>
+    <div class="ms-3 text-sm font-normal max-w-xs pr-2" v-else>
+        <div class="flex flex-col items-center justify-center">
+            {{toast.message}}
+            <div v-if="toast.buttons" class="flex justify-center mt-2 gap-2">
+                <div v-for="button in toast.buttons" class="rounded-md bg-lightButtonsBackground hover:bg-lightButtonsHover text-lightButtonsText dark:bg-darkPrimary dark:hover:bg-darkButtonsBackground  dark:text-darkButtonsText">
+                    <button @click="onButtonClick(button.value)" class="px-2 py-1 rounded hover:bg-black/5 dark:hover:bg-white/10">
+                        {{ button.label }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
     <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-lightToastCloseIconBackground text-lightToastCloseIcon hover:text-lightToastCloseIconHover rounded-lg focus:ring-2 focus:ring-lightToastCloseIconFocusRing p-1.5 hover:bg-lightToastCloseIconBackgroundHover inline-flex items-center justify-center h-8 w-8 dark:text-darkToastCloseIcon dark:hover:text-darkToastCloseIconHover dark:bg-darkToastCloseIconBackground dark:hover:bg-darkToastCloseIconBackgroundHover dark:focus:ring-darkToastCloseIconFocusRing" >
         <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"/>
@@ -53,16 +64,28 @@ const props = defineProps<{
         variant: string;
         id: string;
         timeout?: number|'unlimited';
+        buttons?: { value: any; label: string }[];
     }
 }>();
 function closeToast() {
+    // resolve with undefined on close (X button)
+    toastStore.resolveToast(props.toast.id);
+    emit('close');
+}
+
+function onButtonClick(value: any) {
+    toastStore.resolveToast(props.toast.id, value);
     emit('close');
 }
 
 onMounted(() => {
     if (props.toast.timeout === 'unlimited') return;
     else { 
-      setTimeout(() => {emit('close');}, (props.toast.timeout || 10) * 1e3 );
+      setTimeout(() => {
+        // resolve with undefined on auto-timeout
+        toastStore.resolveToast(props.toast.id);
+        emit('close');
+      }, (props.toast.timeout || 10) * 1e3 );
     }
 });
 

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

@@ -12,13 +12,40 @@
       >
         <RouterLink
           class="font-medium text-lightSidebarText dark:text-darkSidebarText hover:brightness-110 whitespace-nowrap"
-          :to="{ name: 'resource-show', params: { primaryKey: foreignResource.pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }"
+          :to="{
+            name: 'resource-show',
+            params: {
+              primaryKey: foreignResource.pk,
+              resourceId: column.foreignResource
+                ? (
+                    column.foreignResource.resourceId
+                    || column.foreignResource.polymorphicResources?.find(
+                        (pr: any) => pr.whenValue === record[column.foreignResource?.polymorphicOn!]
+                      )?.resourceId
+                  )
+                : undefined
+            }
+          }"
         >
           {{ foreignResource.label }}
         </RouterLink>
       </span>
       <RouterLink v-else-if="record[column.name]" class="font-medium text-lightPrimary dark:text-darkPrimary hover:brightness-110 whitespace-nowrap"
-        :to="{ name: 'resource-show', params: { primaryKey: record[column.name].pk, resourceId: column.foreignResource.resourceId || column.foreignResource.polymorphicResources.find((pr) => pr.whenValue === record[column.foreignResource.polymorphicOn]).resourceId } }">
+          :to="{
+            name: 'resource-show',
+            params: {
+              primaryKey: record[column.name].pk,
+              resourceId: column.foreignResource
+                ? (
+                    column.foreignResource.resourceId
+                    || column.foreignResource.polymorphicResources?.find(
+                        (pr: any) => pr.whenValue === record[column.foreignResource?.polymorphicOn!]
+                      )?.resourceId
+                  )
+                : undefined
+            }
+          }"
+        >
         {{ record[column.name].label }}
       </RouterLink>
       <div v-else>
@@ -38,13 +65,13 @@
       <template v-for="(arrayItem, arrayItemIndex) in record[column.name]">
         <span
           v-if="column.isArray.itemType === 'boolean' && arrayItem"
-          :key="`${column.name}-${arrayItemIndex}`"
+          :key="`${column.name}-${arrayItemIndex}-true`"
           class="af-true-value-icon 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="column.isArray.itemType === 'boolean'"
-          :key="`${column.name}-${arrayItemIndex}`"
+          :key="`${column.name}-${arrayItemIndex}-false`"
           class="af-false-value-icon 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>
@@ -53,30 +80,30 @@
           :key="`${column.name}-${arrayItemIndex}`"
           class="rounded-md m-0.5 bg-lightAnnouncementBG dark:bg-darkAnnouncementBG text-lightAnnouncementText dark:text-darkAnnouncementText py-0.5 px-2.5 text-sm"
         >
-          {{ checkEmptyValues(getArrayItemDisplayValue(arrayItem, column), route.meta.type) }}
+          {{ checkEmptyValues(getArrayItemDisplayValue(arrayItem, column), route.meta.type as "show" | "list") }}
         </span>
       </template>
     </span>
     <span v-else-if="column.enum">
-      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type) }}
+      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label || record[column.name], route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'datetime'" class="whitespace-nowrap">
-      {{ checkEmptyValues(formatDateTime(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(formatDateTime(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'date'" class="whitespace-nowrap">
-      {{ checkEmptyValues(formatDate(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(formatDate(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'time'" class="whitespace-nowrap">
-      {{ checkEmptyValues(formatTime(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(formatTime(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'decimal'">
-      {{ checkEmptyValues(record[column.name] && parseFloat(record[column.name]), route.meta.type) }}
+      {{ checkEmptyValues(record[column.name] && parseFloat(record[column.name]), route.meta.type as "show" | "list") }}
     </span>
     <span v-else-if="column.type === 'json'">
       <JsonViewer class="min-w-[6rem]" :value="record[column.name]" :expandDepth="column.extra?.jsonCollapsedLevel" copyable sort :theme="coreStore.theme"/>
     </span>
     <span v-else>
-      {{ checkEmptyValues(record[column.name],route.meta.type) }}
+      {{ checkEmptyValues(record[column.name], route.meta.type as "show" | "list") }}
     </span>
   </div>
 </template>
@@ -122,7 +149,7 @@ function formatTime(time: string) {
   return dayjs(`0000-00-00 ${time}`).format(coreStore.config?.timeFormat || 'HH:mm:ss');
 }
 
-function getArrayItemDisplayValue(value, column) {
+function getArrayItemDisplayValue(value: any, column: AdminForthResourceColumnCommon) {
   if (column.isArray?.itemType === 'datetime') {
     return formatDateTime(value);
   } else if (column.isArray?.itemType === 'date') {

package/dist/spa/src/i18n.ts

@@ -3,7 +3,7 @@ import { createApp } from 'vue';
 
 
 // taken from here https://vue-i18n.intlify.dev/guide/essentials/pluralization.html#custom-pluralization
-function slavicPluralRule(choice, choicesLength, orgRule) {
+function slavicPluralRule(choice: number, choicesLength: number, orgRule: any) {
   if (choice === 0) {
     return 0
   }

package/dist/spa/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/dist/spa/src/spa_types/core.ts

@@ -1,4 +1,4 @@
-import type { AdminForthResource, AdminForthResourceColumn } from '../types/AdminForthConfig';
+import type { AdminForthResource, AdminForthResourceColumn } from '../types/Back.js';
 
 export type resourceById = {
     [key: string]: AdminForthResource;

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

@@ -29,7 +29,12 @@ export const useModalStore = defineStore('modal', () => {
     onCancelFunction.value = func;
   }
   function setModalContent(content: ModalContentType) {
-    modalContent.value = content;
+    modalContent.value = {
+      title: content.title || 'title',
+      content: content.content || 'content',
+      acceptText: content.acceptText || 'acceptText',
+      cancelText: content.cancelText || 'cancelText',
+    };
   }
   function resetmodalState() {
     isOpened.value = false;

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

@@ -12,19 +12,38 @@ export const useToastStore = defineStore('toast', () => {
     watch(route, () => {
         // on route change clear all toasts older then 5 seconds
         const now = +new Date();
-        toasts.value = toasts.value.filter((t) => now - t.createdAt < 5000);
+        toasts.value = toasts.value.filter((t) => t?.timeout === 'unlimited' || now - t.createdAt < 5000);
     });
 
-    const addToast = (toast: { message: string; variant: string }) => {
+    const addToast = (toast: { 
+        message?: string; 
+        messageHtml?: string; 
+        variant: string; 
+        timeout?: number | 'unlimited';
+        buttons?: { value: any; label: string }[];
+        onResolve?: (value?: any) => void;
+    }): string => {
         const toastId = uuid();
         toasts.value.push({
             ...toast,
             id: toastId,
             createdAt: +new Date(),
         });
+        return toastId;
     };
     const removeToast = (toast: { id: string }) => {
         toasts.value = toasts.value.filter((t) => t.id !== toast.id);
     };
-    return { toasts, addToast, removeToast };
+
+    const resolveToast = (toastId: string, value?: any) => {
+        const t = toasts.value.find((x) => x.id === toastId);
+        try {
+            t?.onResolve?.(value);
+        } catch {
+            // no-op
+        }
+        toasts.value = toasts.value.filter((x) => x.id !== toastId);
+    };
+
+    return { toasts, addToast, removeToast, resolveToast };
 });