adminforth 1.0.82 → 1.0.84

package/dist/index.js

@@ -204,6 +204,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) {

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,9 +233,9 @@ 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) => {
@@ -245,6 +245,15 @@ class CodeInjector {
                         });
                     }
                 });
+                (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/spa/spa/src/views/CreateView.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="relative">
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
@@ -22,6 +30,14 @@
 
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
 
     
@@ -36,6 +52,13 @@
     >
     </ResourceForm>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.bottom || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
 
   </div>
 </template>

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

@@ -1,5 +1,12 @@
 <template>
   <div class="relative">
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
 
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
@@ -19,6 +26,14 @@
 
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
 
     <ResourceForm 
@@ -31,6 +46,15 @@
       :customComponentsPerColumn="editComponentsPerColumn"
     >
     </ResourceForm>
+
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.bottom || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
   </div>
 </template>
 

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

@@ -9,6 +9,14 @@
       />
     </Teleport>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <BreadcrumbsWithButtons>
       <button
         @click="()=>{checkboxes = []}"
@@ -64,6 +72,14 @@
       </button>
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <!-- table -->
     <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	overflow-y-hidden  rounded-default">
 
@@ -260,8 +276,7 @@
     </div>
     <!-- pagination -->
     <div class="flex flex-col items-center mt-4 xs:flex-row xs:justify-between xs:items-center"
-         v-if="rows && totalRows >= pageSize && totalRows > 0"
-    >
+         v-if="rows && totalRows >= pageSize && totalRows > 0">
       <!-- Help text -->
       <span class="text-sm text-gray-700 dark:text-gray-400">
             Showing <span class="font-semibold text-gray-900 dark:text-white">
@@ -313,6 +328,15 @@
         </button>
       </div>
     </div>
+
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.bottom || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
   </div>
 </template>
 

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

@@ -1,5 +1,12 @@
 <template>
   <div class="relative">
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
     <BreadcrumbsWithButtons>
       <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
         class="flex items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 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"
@@ -16,6 +23,14 @@
       </button>
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <div v-if="loading" role="status" class="max-w-sm animate-pulse">
         <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
         <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
@@ -70,6 +85,14 @@
             </tr>
         </tbody>
     </table>
+
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.bottom || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
 </div>
 
 

package/dist/types/AdminForthConfig.js

@@ -1,3 +1,49 @@
+export var AdminForthMenuType;
+(function (AdminForthMenuType) {
+    /**
+     * HEADING is just a label in the menu.
+     * Respect `label` and `icon` property in @AdminForthConfigMenuItem
+     */
+    AdminForthMenuType["HEADING"] = "heading";
+    /**
+     * GROUP is a group of menu items.
+     * Respects `label`, `icon` and `children` properties in @AdminForthConfigMenuItem
+     * use @AdminForthMenuType.open to set if group is open by default
+     */
+    AdminForthMenuType["GROUP"] = "group";
+    /**
+     * RESOURCE is a link to a resource.
+     * Respects `label`, `icon`,  `resourceId`, `homepage`, `isStaticRoute` properties in @AdminForthConfigMenuItem
+     */
+    AdminForthMenuType["RESOURCE"] = "resource";
+    /**
+     * PAGE is a link to a custom page.
+     * Respects `label`, `icon`, `path`, `component`, `homepage`, `isStaticRoute`, properties in @AdminForthConfigMenuItem
+     *
+     * Example:
+     *
+     * ```ts
+     * {
+     *  type: AdminForthMenuType.PAGE,
+     *  label: 'Custom Page',
+     *  icon: 'home',
+     *  path: '/dash',
+     *  component: '@@/Dashboard.vue',
+     *  homepage: true,
+     * }
+     * ```
+     *
+     */
+    AdminForthMenuType["PAGE"] = "page";
+    /**
+     * GAP ads some space between menu items.
+     */
+    AdminForthMenuType["GAP"] = "gap";
+    /**
+     * DIVIDER is a divider between menu items.
+     */
+    AdminForthMenuType["DIVIDER"] = "divider";
+})(AdminForthMenuType || (AdminForthMenuType = {}));
 export var AdminForthDataTypes;
 (function (AdminForthDataTypes) {
     AdminForthDataTypes["STRING"] = "string";

package/documentation/docusaurus.config.ts

@@ -8,7 +8,7 @@ const config: Config = {
   favicon: 'img/favicon.png',
 
   // Set the production url of your site here
-  url: 'https://adminforth.devforth.io',
+  url: 'https://adminforth.dev',
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
   baseUrl: '/',
@@ -76,7 +76,7 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/docusaurus-social-card.jpg',
+    // image: 'img/docusaurus-social-card.jpg',
     navbar: {
       title: 'AdminForth',
       logo: {
@@ -114,6 +114,10 @@ const config: Config = {
               label: 'Tutorial',
               to: '/docs/Getting%20Started',
             },
+            {
+              label: 'API',
+              to: '/docs/api',
+            },
           ],
         },
         // {
@@ -158,7 +162,7 @@ const config: Config = {
       copyright: `Copyright © ${new Date().getFullYear()} Devforth sp. z o.o.`,
     },
     prism: {
-      theme: prismThemes.vsLight,
+      theme: prismThemes.okaidia,
       darkTheme: prismThemes.dracula,
     },
   } satisfies Preset.ThemeConfig,

package/documentation/static/CNAME

@@ -0,0 +1 @@
+adminforth.dev

package/index.ts

@@ -243,6 +243,27 @@ class AdminForth implements AdminForthClass {
             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

package/modules/codeInjector.ts

@@ -260,8 +260,6 @@ class CodeInjector {
     }).join('\n');
 
     // for each custom component generate import statement
-    const customComponentsDir = this.adminforth.config.customization?.customComponentsDir;
-
     const customResourceComponents = [];
     this.adminforth.config.resources.forEach((resource) => {
       resource.columns.forEach((field) => {
@@ -273,6 +271,17 @@ class CodeInjector {
           });
         }
       });
+      (Object.values(resource.options?.pageInjections || {})).forEach((injection) => {
+        Object.values(injection).forEach((filePathes: string[]) => {
+          filePathes.forEach((filePath) => {
+            if (!customResourceComponents.includes(filePath)) {
+              customResourceComponents.push(filePath);
+            }
+          });
+        });
+      });
+
+
     });
 
     customResourceComponents.forEach((filePath) => {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "adminforth",
-  "version": "1.0.82",
+  "version": "1.0.84",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
-    "rollout": "tsc && cp -r spa dist/spa && npm version patch  && npm publish && cd documentation && npm run deploy",
+    "rollout": "tsc && cp -r spa dist/spa && npm version patch  && npm publish && cd documentation && npm run build && npm run deploy",
     "docs": "typedoc"
   },
   "author": "devforth.io",

package/spa/src/views/CreateView.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="relative">
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
@@ -22,6 +30,14 @@
 
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
 
     
@@ -36,6 +52,13 @@
     >
     </ResourceForm>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.create?.bottom || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
 
   </div>
 </template>

package/spa/src/views/EditView.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="relative">
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
 
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
@@ -19,6 +26,14 @@
 
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <SingleSkeletLoader v-if="loading"></SingleSkeletLoader>
 
     <ResourceForm 
@@ -31,6 +46,15 @@
       :customComponentsPerColumn="editComponentsPerColumn"
     >
     </ResourceForm>
+
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.edit?.bottom || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
   </div>
 </template>
 

package/spa/src/views/ListView.vue

@@ -9,6 +9,14 @@
       />
     </Teleport>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <BreadcrumbsWithButtons>
       <button
         @click="()=>{checkboxes = []}"
@@ -64,6 +72,14 @@
       </button>
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <!-- table -->
     <div class="relative overflow-x-auto shadow-list-table-shadow dark:shadow-black	overflow-y-hidden  rounded-default">
 
@@ -260,8 +276,7 @@
     </div>
     <!-- pagination -->
     <div class="flex flex-col items-center mt-4 xs:flex-row xs:justify-between xs:items-center"
-         v-if="rows && totalRows >= pageSize && totalRows > 0"
-    >
+         v-if="rows && totalRows >= pageSize && totalRows > 0">
       <!-- Help text -->
       <span class="text-sm text-gray-700 dark:text-gray-400">
             Showing <span class="font-semibold text-gray-900 dark:text-white">
@@ -313,6 +328,15 @@
         </button>
       </div>
     </div>
+
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.list?.bottom || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
   </div>
 </template>
 

package/spa/src/views/ShowView.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="relative">
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.beforeBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
     <BreadcrumbsWithButtons>
       <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
         class="flex items-center py-1 px-3 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 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"
@@ -16,6 +23,14 @@
       </button>
     </BreadcrumbsWithButtons>
 
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.afterBreadcrumbs || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
+
     <div v-if="loading" role="status" class="max-w-sm animate-pulse">
         <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
         <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div>
@@ -70,6 +85,14 @@
             </tr>
         </tbody>
     </table>
+
+    <component 
+      v-for="c in coreStore?.resourceOptions?.pageInjections?.show?.bottom || []"
+      :is="getCustomComponent(c)"
+      :record="coreStore.record"
+      :columns="coreStore.resourceColumns"
+      :adminUser="coreStore.adminUser"
+    />
 </div>
 
 

package/types/AdminForthConfig.ts

@@ -19,17 +19,130 @@ export interface AdminForthPluginType {
   componentPath(componentFile: string): string;
 }
 
+export enum AdminForthMenuType {
+  /**
+   * HEADING is just a label in the menu.
+   * Respect `label` and `icon` property in @AdminForthConfigMenuItem
+   */
+  HEADING = 'heading',
+
+  /**
+   * GROUP is a group of menu items.
+   * Respects `label`, `icon` and `children` properties in @AdminForthConfigMenuItem
+   * use @AdminForthMenuType.open to set if group is open by default
+   */
+  GROUP = 'group',
+
+  /**
+   * RESOURCE is a link to a resource.
+   * Respects `label`, `icon`,  `resourceId`, `homepage`, `isStaticRoute` properties in @AdminForthConfigMenuItem
+   */
+  RESOURCE = 'resource',
+
+  /**
+   * PAGE is a link to a custom page.
+   * Respects `label`, `icon`, `path`, `component`, `homepage`, `isStaticRoute`, properties in @AdminForthConfigMenuItem
+   * 
+   * Example:
+   * 
+   * ```ts
+   * {
+   *  type: AdminForthMenuType.PAGE,
+   *  label: 'Custom Page',
+   *  icon: 'home',
+   *  path: '/dash',
+   *  component: '@@/Dashboard.vue',
+   *  homepage: true,
+   * }
+   * ```
+   * 
+   */
+  PAGE = 'page',
+
+  /**
+   * GAP ads some space between menu items.
+   */
+  GAP = 'gap',
+
+  /**
+   * DIVIDER is a divider between menu items.
+   */
+  DIVIDER = 'divider',
+}
+
 export type AdminForthConfigMenuItem = {
-    type?: 'heading' | 'group' | 'resource' | 'page' | 'gap' | 'divider',
+    type?: AdminForthMenuType,
+
+    /**
+     * Label for menu item which will be displayed in the admin panel.
+     */
     label?: string,
+
+    /**
+     * Icon for menu item which will be displayed in the admin panel.
+     * Supports iconify icons in format `<icon set name>:<icon name>`
+     * Browse available icons here: https://icon-sets.iconify.design/
+     * 
+     * Example:
+     * 
+     * ```ts
+     * icon: 'flowbite:brain-solid', 
+     * ```
+     * 
+     */
     icon?: string,
+
+    /**
+     * Path to custom component which will be displayed in the admin panel.
+     * 
+     */
     path?: string,
+
+    /**
+     * Component to be used for this menu item. Component should be placed in custom folder and referenced with `@@/` prefix.
+     * Supported for AdminForthMenuType.PAGE only!
+     * Example:
+     * 
+     * ```ts
+     * component: '@@/Dashboard.vue',
+     * ```
+     * 
+     */
     component?: string,
+
+    /**
+     * Resource ID which will be used to fetch data from.
+     * Supported for AdminForthMenuType.RESOURCE only!
+     * 
+     */
     resourceId?: string,
+
+    /**
+     * If true, group will be open by default after user login to the admin panel.
+     * Also will be used to redirect from root path.
+     */
     homepage?: boolean,
+
+    /**
+     * Where Group is open by default
+     * Supported for AdminForthMenuType.GROUP only!
+     * 
+     * */    
     open?: boolean,
+
+    /**
+     * Children menu items which will be displayed in this group.
+     * Supported for AdminForthMenuType.GROUP only!
+     */
     children?: Array<AdminForthConfigMenuItem>,
+
+    /**
+     * By default all pages are imported dynamically with lazy import().
+     * If you wish to import page statically, set this option to true.
+     * Homepage will be imported statically by default. but you can override it with this option.
+     */
     isStaticRoute?: boolean,
+
     meta?: {
       title?: string,
     },
@@ -148,7 +261,50 @@ export type AdminForthResource = {
         id?: string,
       }>,
       allowedActions?: AllowedActions,
+
+      /** 
+       * Page size for list view
+       */
       listPageSize?: number,
+
+      /** 
+       * Custom components which can be injected into AdminForth CRUD pages.
+       * Each injection is a path to a custom component which will be displayed in the admin panel.
+       * Can be also array to render multiple injections one after another.
+       * 
+       * Example:
+       * 
+       * ```ts
+       * pageInjections: {
+       *  list: {
+       *   beforeBreadcrumbs: '@@/Announcement.vue',
+       *  }
+       * }
+       * ```
+       * 
+       */
+      pageInjections?: {
+        list?: {
+          beforeBreadcrumbs?: string | Array<string>,
+          afterBreadcrumbs?: string | Array<string>,
+          bottom?: string | Array<string>,
+        },
+        show?: {
+          beforeBreadcrumbs?: string | Array<string>,
+          afterBreadcrumbs?: string | Array<string>,
+          bottom?: string | Array<string>,
+        },
+        edit?: {
+          beforeBreadcrumbs?: string | Array<string>,
+          afterBreadcrumbs?: string | Array<string>,
+          bottom?: string | Array<string>,
+        },
+        create?: {
+          beforeBreadcrumbs?: string | Array<string>,
+          afterBreadcrumbs?: string | Array<string>,
+          bottom?: string | Array<string>,
+        },
+      }
     },
   }
   
@@ -301,6 +457,7 @@ export type AdminForthConfig = {
        * component: {
        *  show: '@@/comp/my.vue',
        * }
+       * ```
        * 
        */
       customComponentsDir?: string,