adminforth 1.0.83 → 1.0.86

package/dist/index.js

@@ -23,10 +23,10 @@ import ExpressServer from './servers/express.js';
 import { v1 as uuid } from 'uuid';
 import fs from 'fs';
 import { ADMINFORTH_VERSION } from './modules/utils.js';
-import { AdminForthFilterOperators, AdminForthDataTypes } from './types/AdminForthConfig.js';
+import { AdminForthFilterOperators, AdminForthDataTypes, AdminForthResourcePages } from './types/AdminForthConfig.js';
 import { getFunctionList } from './modules/utils.js';
 import path from 'path';
-const AVAILABLE_SHOW_IN = ['list', 'edit', 'create', 'filter', 'show'];
+//get array from enum AdminForthResourcePages
 const DEFAULT_ALLOWED_ACTIONS = { create: true, edit: true, show: true, delete: true };
 class AdminForth {
     constructor(config) {
@@ -122,12 +122,12 @@ class AdminForth {
                 if (!res.table) {
                     errors.push(`Resource "${res.dataSource}" is missing table`);
                 }
-                // if itemLabel is not callable, throw error
-                if (res.itemLabel && typeof res.itemLabel !== 'function') {
-                    errors.push(`Resource "${res.dataSource}" itemLabel is not a function`);
+                // if recordLabel is not callable, throw error
+                if (res.recordLabel && typeof res.recordLabel !== 'function') {
+                    errors.push(`Resource "${res.dataSource}" recordLabel is not a function`);
                 }
-                if (!res.itemLabel) {
-                    res.itemLabel = (item) => {
+                if (!res.recordLabel) {
+                    res.recordLabel = (item) => {
                         const pkVal = item[res.columns.find((col) => col.primaryKey).name];
                         return `${res.label} ${pkVal}`;
                     };
@@ -141,7 +141,6 @@ class AdminForth {
                     res.columns = [];
                 }
                 res.columns.forEach((col) => {
-                    var _b;
                     col.label = col.label || guessLabelFromName(col.name);
                     //define default sortable
                     if (!Object.keys(col).includes('sortable')) {
@@ -171,11 +170,11 @@ class AdminForth {
                             errors.push(`Resource "${res.resourceId}" column "${col.name}" has invalid editingNote value "${wrongEditingNoteOn}", allowed keys are 'create', 'edit']`);
                         }
                     }
-                    const wrongShowIn = col.showIn && col.showIn.find((c) => !AVAILABLE_SHOW_IN.includes(c));
+                    const wrongShowIn = col.showIn && col.showIn.find((c) => AdminForthResourcePages[c] === undefined);
                     if (wrongShowIn) {
-                        errors.push(`Resource "${res.resourceId}" column "${col.name}" has invalid showIn value "${wrongShowIn}", allowed values are ${AVAILABLE_SHOW_IN.join(', ')}`);
+                        errors.push(`Resource "${res.resourceId}" column "${col.name}" has invalid showIn value "${wrongShowIn}", allowed values are ${Object.keys(AdminForthResourcePages).join(', ')}`);
                     }
-                    col.showIn = ((_b = col.showIn) === null || _b === void 0 ? void 0 : _b.map(c => c.toLowerCase())) || AVAILABLE_SHOW_IN;
+                    col.showIn = col.showIn || Object.values(AdminForthResourcePages);
                 });
                 if (!res.options) {
                     res.options = { bulkActions: [], allowedActions: {} };
@@ -204,6 +203,25 @@ class AdminForth {
                         return Object.assign(action, { id: uuid() });
                     });
                     bulkActions = newBulkActions;
+                    // if pageInjection is a string, make array with one element. Also check file exists
+                    const possibleInjections = ['beforeBreadcrumbs', 'afterBreadcrumbs', 'bottom'];
+                    if (res.options.pageInjections) {
+                        Object.entries(res.options.pageInjections).map(([key, value]) => {
+                            Object.entries(value).map(([injection, target]) => {
+                                if (possibleInjections.includes(injection)) {
+                                    if (typeof target === 'string') {
+                                        res.options.pageInjections[key][injection] = [target];
+                                    }
+                                    res.options.pageInjections[key][injection].forEach((target) => {
+                                        errors.push(...this.checkCustomFileExists(target));
+                                    });
+                                }
+                                else {
+                                    errors.push(`Resource "${res.resourceId}" has invalid pageInjection key "${injection}", Supported keys are ${possibleInjections.join(', ')}`);
+                                }
+                            });
+                        });
+                    }
                 }
                 //add default allowedActions to resources
                 if (res.options.allowedActions) {
@@ -277,8 +295,8 @@ class AdminForth {
         // check is all custom components files exists
         for (const resource of this.config.resources) {
             for (const column of resource.columns) {
-                if (column.component) {
-                    for (const [key, value] of Object.entries(column.component)) {
+                if (column.components) {
+                    for (const [key, value] of Object.entries(column.components)) {
                         if (this.codeInjector.allComponentNames[value]) {
                             // not obvious, but if we are in this if, it means that this is plugin component
                             // and there is no sense to check if it exists in users folder
@@ -594,7 +612,7 @@ class AdminForth {
                     });
                     const targetDataMap = targetData.data.reduce((acc, item) => {
                         acc[item[targetResourcePkField]] = {
-                            label: targetResource.itemLabel(item),
+                            label: targetResource.recordLabel(item),
                             pk: item[targetResourcePkField],
                         };
                         return acc;
@@ -621,7 +639,7 @@ class AdminForth {
                     });
                 });
                 data.data.forEach((item) => {
-                    item._label = resource.itemLabel(item);
+                    item._label = resource.recordLabel(item);
                 });
                 return Object.assign(Object.assign({}, data), { options: resource === null || resource === void 0 ? void 0 : resource.options });
             }),
@@ -670,7 +688,7 @@ class AdminForth {
                 });
                 const items = dbDataItems.data.map((item) => {
                     const pk = item[targetResource.columns.find((col) => col.primaryKey).name];
-                    const labler = targetResource.itemLabel;
+                    const labler = targetResource.recordLabel;
                     return {
                         value: pk,
                         label: labler(item),

package/dist/modules/codeInjector.js

@@ -94,7 +94,7 @@ class CodeInjector {
     }
     prepareSources(_a) {
         return __awaiter(this, arguments, void 0, function* ({ filesUpdated, verbose = false }) {
-            var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _b, _c, _d, _e, _f, _g, _h, _j;
             // check SPA_TMP_PATH exists and create if not
             try {
                 yield fs.promises.access(CodeInjector.SPA_TMP_PATH, fs.constants.F_OK);
@@ -233,18 +233,27 @@ class CodeInjector {
                 return `import { ${PascalIconName} } from '@iconify-prerendered/vue-${collection}';`;
             }).join('\n');
             // for each custom component generate import statement
-            const customComponentsDir = (_c = this.adminforth.config.customization) === null || _c === void 0 ? void 0 : _c.customComponentsDir;
             const customResourceComponents = [];
             this.adminforth.config.resources.forEach((resource) => {
+                var _a;
                 resource.columns.forEach((field) => {
-                    if (field.component) {
-                        Object.values(field.component).forEach((filePath) => {
+                    if (field.components) {
+                        Object.values(field.components).forEach((filePath) => {
                             if (!customResourceComponents.includes(filePath)) {
                                 customResourceComponents.push(filePath);
                             }
                         });
                     }
                 });
+                (Object.values(((_a = resource.options) === null || _a === void 0 ? void 0 : _a.pageInjections) || {})).forEach((injection) => {
+                    Object.values(injection).forEach((filePathes) => {
+                        filePathes.forEach((filePath) => {
+                            if (!customResourceComponents.includes(filePath)) {
+                                customResourceComponents.push(filePath);
+                            }
+                        });
+                    });
+                });
             });
             customResourceComponents.forEach((filePath) => {
                 const componentName = getComponentNameFromPath(filePath);
@@ -270,7 +279,7 @@ class CodeInjector {
             }
             let imports = iconImports + '\n';
             imports += customComponentsImports + '\n';
-            if ((_d = this.adminforth.config.customization) === null || _d === void 0 ? void 0 : _d.vueUsesFile) {
+            if ((_c = this.adminforth.config.customization) === null || _c === void 0 ? void 0 : _c.vueUsesFile) {
                 imports += `import addCustomUses from '${this.adminforth.config.customization.vueUsesFile}';\n`;
             }
             // inject that code into spa_tmp/src/App.vue
@@ -278,13 +287,13 @@ class CodeInjector {
             let appVueContent = yield fs.promises.readFile(appVuePath, 'utf-8');
             appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH IMPORTS */', imports);
             appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */', iconComponents + '\n' + customComponentsComponents + '\n');
-            if ((_e = this.adminforth.config.customization) === null || _e === void 0 ? void 0 : _e.vueUsesFile) {
+            if ((_d = this.adminforth.config.customization) === null || _d === void 0 ? void 0 : _d.vueUsesFile) {
                 appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH CUSTOM USES */', 'addCustomUses(app);');
             }
             yield fs.promises.writeFile(appVuePath, appVueContent);
             // generate tailwind extend styles 
-            if ((_f = this.adminforth.config) === null || _f === void 0 ? void 0 : _f.styles) {
-                const tailwindStyles = (_g = this.adminforth.config) === null || _g === void 0 ? void 0 : _g.styles;
+            if ((_e = this.adminforth.config) === null || _e === void 0 ? void 0 : _e.styles) {
+                const tailwindStyles = (_f = this.adminforth.config) === null || _f === void 0 ? void 0 : _f.styles;
                 const stylesText = JSON.stringify(tailwindStyles, null, 2).slice(1, -1);
                 let tailwindConfigPath = path.join(CodeInjector.SPA_TMP_PATH, 'tailwind.config.js');
                 let tailwindConfigContent = yield fs.promises.readFile(tailwindConfigPath, 'utf-8');
@@ -308,10 +317,10 @@ class CodeInjector {
             /* generate custom routes */
             const homepageMenuItem = this.adminforth.config.menu.find((mi) => mi.homepage);
             let childrenHomePageMenuItem = this.adminforth.config.menu.find((mi) => { var _a; return mi.children && ((_a = mi.children) === null || _a === void 0 ? void 0 : _a.find((mi) => mi.homepage)); });
-            let childrenHomepage = (_h = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _h === void 0 ? void 0 : _h.find((mi) => mi.homepage);
+            let childrenHomepage = (_g = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _g === void 0 ? void 0 : _g.find((mi) => mi.homepage);
             let homePagePath = (homepageMenuItem === null || homepageMenuItem === void 0 ? void 0 : homepageMenuItem.path) || `/resource/${childrenHomepage === null || childrenHomepage === void 0 ? void 0 : childrenHomepage.resourceId}`;
             if (!homePagePath) {
-                homePagePath = ((_j = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _j === void 0 ? void 0 : _j.path) || `/resource/${(_k = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _k === void 0 ? void 0 : _k.resourceId}`;
+                homePagePath = ((_h = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _h === void 0 ? void 0 : _h.path) || `/resource/${(_j = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _j === void 0 ? void 0 : _j.resourceId}`;
             }
             routes += `{
       path: '/',

package/dist/plugins/ForeignInlineListPlugin/index.js

@@ -1,3 +1,4 @@
+import { AdminForthResourcePages } from "../../types/AdminForthConfig.js";
 import AdminForthPlugin from "../base.js";
 export default class ForeignInlineListPlugin extends AdminForthPlugin {
     constructor(options) {
@@ -15,8 +16,8 @@ export default class ForeignInlineListPlugin extends AdminForthPlugin {
             name: `foreignInlineList_${this.foreignResource.resourceId}`,
             label: 'Foreign Inline List',
             virtual: true,
-            showIn: ['show'],
-            component: {
+            showIn: [AdminForthResourcePages.show],
+            components: {
                 showRow: this.componentPath('InlineList.vue'),
             },
         });

package/dist/servers/express.js

@@ -8,12 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import path from 'path';
-import { fileURLToPath } from 'url';
 import fs from 'fs';
 import CodeInjector from '../modules/codeInjector.js';
 import fetch from 'node-fetch';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
 function replaceAtStart(string, substring) {
     if (string.startsWith(substring)) {
         return string.slice(substring.length);

package/dist/spa/spa/package-lock.json

@@ -17,6 +17,7 @@
         "flowbite-datepicker": "^1.2.6",
         "pinia": "^2.1.7",
         "unhead": "^1.9.12",
+        "uuid": "^10.0.0",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",
         "vue-slider-component": "^4.1.0-beta.7"
@@ -4032,6 +4033,18 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "5.2.13",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz",

package/dist/spa/spa/package.json

@@ -21,6 +21,7 @@
     "flowbite-datepicker": "^1.2.6",
     "pinia": "^2.1.7",
     "unhead": "^1.9.12",
+    "uuid": "^10.0.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7"

package/dist/spa/spa/src/App.vue

@@ -123,15 +123,43 @@
     </div>
   </div>
   <AcceptModal />
+  <div v-if="toastStore.toasts.length>0" class="fixed bottom-5 right-5 flex gap-1 flex-col-reverse">
+    <transition-group
+      name="fade"
+      tag="div"
+      class="flex flex-col-reverse gap-1"
+    >
+      <Toast :toast="t" @close="toastStore.removeToast(t)" v-for="(t,i) in toastStore.toasts" :key="`t-${t.id}`" ></Toast>
+    </transition-group>
+  </div>
 
   <div v-if="sideBarOpen" 
   @click="sideBarOpen = false"
   
   drawer-backdrop="" class="bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30"></div>
 
+
+
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+
+  .fade-leave-active {
+    @apply transition-opacity duration-500;
+  }
+  .fade-leave-to {
+    @apply opacity-0;
+  }
+  .fade-enter-active {
+    @apply transition-opacity duration-500;
+  }
+  .fade-enter-from {
+    @apply opacity-0;
+  }
+  .fade-enter-to {
+    @apply opacity-100;
+  }
+
 </style>
 
 <script setup lang="ts">
@@ -140,6 +168,7 @@ import { RouterLink, RouterView } from 'vue-router';
 import { initFlowbite } from 'flowbite'
 import './index.scss'
 import { useCoreStore } from '@/stores/core';
+import {useModalStore} from '@/stores/modal';
 import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
 import AcceptModal from './components/AcceptModal.vue';
 import MenuLink from './components/MenuLink.vue';
@@ -148,33 +177,22 @@ import { getIcon } from '@/utils';
 import { useHead } from 'unhead'
 import { createHead } from 'unhead'
 import { loadFile } from './utils';
-
+import Toast from './components/Toast.vue';
+import {useToastStore} from '@/stores/toast';
+import { FrontendAPI } from '@/composables/useStores'
 // import { link } from 'fs';
 const coreStore = useCoreStore();
-
-
+const modalStore = useModalStore();
+const toastStore = useToastStore();
+const frontendApi = new FrontendAPI();
+frontendApi.init();
 const splitAtLast = (str: string, separator: string) => {
   const index = str.lastIndexOf(separator);
   return [str.slice(0, index), str.slice(index + 1)];
 }
-
-
-
 createHead()
-
-
 const sideBarOpen = ref(false);
-
-
-
 const route = useRoute();
-watch(route, () => {
-  title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
-  useHead({
-    title: title.value,
-  })
-});
-
 const router = useRouter();
 const title = ref('');
 //create a ref to store the opened menu items with ts type;
@@ -226,6 +244,13 @@ async function loadMenu() {
   });
 }
 
+watch(route, () => {
+  title.value = `${coreStore.config?.title || coreStore.config?.brandName || 'Adminforth'} | ${ Object.values(route.params)[0] || route.meta.title || ' '}`;
+  useHead({
+    title: title.value,
+  })
+});
+
 // initialize components based on data attribute selectors
 onMounted(async () => {
   loadMenu(); // run this in async mode

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

@@ -3,13 +3,6 @@ import { ref,onMounted } from 'vue'
 import { useModalStore } from '@/stores/modal';
 
 const modalStore = useModalStore();
-
-
-
-
-
-
-        
 </script>
 
 <template>
@@ -28,10 +21,10 @@ const modalStore = useModalStore();
                         <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();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">
+                    <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">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>
-                    <button @click="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-blue-700 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="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-blue-700 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/spa/src/components/Toast.vue

@@ -0,0 +1,65 @@
+<template>
+    
+
+<div id="toast-default" class="flex  items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
+    <div v-if="toast.variant == 'info'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
+        <svg class="w-4 h-4"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"/>
+        </svg>
+        <span class="sr-only">Fire icon</span>
+    </div>
+    <div v-else-if="toast.variant == 'danger'" class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"/>
+        </svg>
+        <span class="sr-only">Error icon</span>
+    </div>
+    <div v-else-if="toast.variant == 'warning'"class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
+        </svg>
+        <span class="sr-only">Warning icon</span>
+    </div>
+    <div v-else class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
+        </svg>
+        <span class="sr-only">Check icon</span>
+    </div>
+    <div class="ms-3 text-sm font-normal">{{toast.message}}</div>
+    <button @click="closeToast" type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" >
+        <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"/>
+        </svg>
+    </button>
+</div>
+
+
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useToastStore } from '@/stores/toast';
+const toastStore = useToastStore();
+const emit = defineEmits(['close']);
+const props = defineProps<{
+    toast:{message: string;
+    variant: string;
+    id: string;
+    duration?: number;}
+}>();
+function closeToast() {
+    emit('close');
+}
+
+onMounted(() => {
+    setTimeout(() => {
+     emit('close');   
+    }, props.toast.duration  || 5000 );
+});
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -2,9 +2,9 @@
   <div>
     
     <span v-if="column.foreignResource">
-      <RouterLink v-if="row[column.name]" class="font-medium text-blue-600 dark:text-blue-500 hover:brightness-110"
-        :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: row[column.name].pk } }">
-        {{ row[column.name].label }}
+      <RouterLink v-if="record[column.name]" class="font-medium text-blue-600 dark:text-blue-500 hover:brightness-110"
+        :to="{ name: 'resource-show', params: { resourceId: column.foreignResource.resourceId, primaryKey: record[column.name].pk } }">
+        {{ record[column.name].label }}
       </RouterLink>
       <div v-else>
         <span class="text-gray-400">-</span>
@@ -12,18 +12,18 @@
     </span>
         
     <span v-else-if="column.type === 'boolean'">
-      <span v-if="row[column.name]" class="bg-green-100 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">Yes</span>
+      <span v-if="record[column.name]" class="bg-green-100 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">Yes</span>
       <span v-else class="bg-red-100 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">No</span>
     </span>
     <span v-else-if="column.enum">
-      {{ checkEmptyValues(column.enum.find(e => e.value === row[column.name])?.label,route.meta.type) }}
+      {{ checkEmptyValues(column.enum.find(e => e.value === record[column.name])?.label,route.meta.type) }}
     </span>
     <span v-else-if="column.type === 'datetime'">
-      {{ checkEmptyValues(formatDate(row[column.name]),route.meta.type) }}
+      {{ checkEmptyValues(formatDate(record[column.name]),route.meta.type) }}
       
     </span>
     <span v-else>
-      {{ checkEmptyValues(row[column.name],route.meta.type) }}
+      {{ checkEmptyValues(record[column.name],route.meta.type) }}
     </span>
   </div>
 </template>
@@ -49,7 +49,7 @@ dayjs.extend(timezone);
 
 const props = defineProps({
   column: Object,
-  row: Object
+  record: Object
 });
 
 

package/dist/spa/spa/src/composables/useStores.ts

@@ -0,0 +1,51 @@
+import type { FrontendAPIInterface, ConfirmParams, AlertParams } from '../types/FrontendAPI';
+import { useToastStore } from '../stores/toast';
+import { useModalStore } from '../stores/modal';
+
+
+
+declare global {
+  interface Window {
+    adminforth: {
+      confirm: (params: ConfirmParams) => Promise<void>;
+      alert: (params: AlertParams) => void;
+    };
+  }
+}
+
+export class FrontendAPI implements FrontendAPIInterface {
+  private toastStore:any
+  private modalStore:any
+  init() {
+    if (window.adminforth) {
+      throw new Error('adminforth already initialized');
+    }
+    this.toastStore = useToastStore();
+    this.modalStore = useModalStore();
+    console.log(this.toastStore, this.modalStore,'init of adminforth frontend api')
+    window.adminforth = {
+      confirm: this.confirm.bind(this),
+      alert: this.alert.bind(this)
+    }
+  }
+
+  confirm(params: ConfirmParams): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.modalStore.setModalContent({ content: params.message, acceptText: params.yes, cancelText: params.no })
+      this.modalStore.onAcceptFunction = resolve
+      this.modalStore.onCancelFunction = reject
+      this.modalStore.togleModal()
+    })
+  }
+
+  alert(params: AlertParams): void {
+    this.toastStore.addToast({
+      message: params.message,
+      variant: params.variant
+    })
+  }
+}
+
+
+
+

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

@@ -8,6 +8,8 @@ export const useCoreStore = defineStore('core', () => {
   const config = ref({});
   const record = ref({});
   const resourceColumns = ref(null);
+  const resource = ref(null);
+
   const resourceOptions = ref(null);
   const resourceColumnsError = ref('');
   const resourceColumnsId = ref(null);
@@ -85,6 +87,7 @@ export const useCoreStore = defineStore('core', () => {
     } else {
       resourceColumns.value = res.resource.columns;
       resourceById.value[resourceId] = res.resource;
+      resource.value = res.resource;
       resourceOptions.value = res.resource.options;
     }
   }
@@ -129,6 +132,7 @@ export const useCoreStore = defineStore('core', () => {
     fetchResourceFull, 
     resourceColumnsError,
     resourceOptions,
-    logout
+    logout,
+    resource,
   }
 })

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

@@ -2,6 +2,13 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import { callAdminForthApi } from '@/utils';
 
+ type ModalContentType = {
+  title?: string;
+  content?: string;
+  acceptText?: string;
+  cancelText?: string;
+ }
+
 
 export const useModalStore = defineStore('modal', () => {
   const modalContent = ref({
@@ -12,13 +19,17 @@ export const useModalStore = defineStore('modal', () => {
   });  
   const isOpened = ref(false);
   const onAcceptFunction: any = ref(()=>{});
+  const onCancelFunction: any = ref(()=>{});
   function togleModal() {
     isOpened.value = !isOpened.value;
   }
   function setOnAcceptFunction(func: Function) {
     onAcceptFunction.value = func;
   }
-  function setModalContent(content: string) {
+  function setOnCancelFunction(func: Function) {
+    onCancelFunction.value = func;
+  }
+  function setModalContent(content: ModalContentType) {
     modalContent.value = content;
   }
   function resetmodalState() {
@@ -33,6 +44,6 @@ export const useModalStore = defineStore('modal', () => {
 
   }
     
-  return {isOpened, setModalContent, togleModal,modalContent, setOnAcceptFunction, onAcceptFunction,resetmodalState} 
+  return {isOpened, setModalContent,onCancelFunction, togleModal,modalContent, setOnAcceptFunction, onAcceptFunction,resetmodalState,setOnCancelFunction} 
    
 })

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

@@ -0,0 +1,15 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import { callAdminForthApi } from '@/utils';
+import { v1 as uuid } from 'uuid';
+
+export const useToastStore = defineStore('toast', () => {
+    const toasts = ref([]);
+    const addToast = (toast) => {
+        toasts.value.push({...toast, id: uuid()});
+    };
+    const removeToast = (toast) => {
+        toasts.value = toasts.value.filter((t) => t.id !== toast.id);
+    };
+    return { toasts, addToast, removeToast };
+});