adminforth 1.0.46 → 1.0.48

package/dataConnectors/sqlite.ts

@@ -138,7 +138,6 @@ class SQLiteConnector {
     
 
     getData({ resource, limit, offset, sort, filters }) {
-      console.log('SQLITE getData', { resource, limit, offset, sort, filters });
       const columns = resource.dataSourceColumns.map((col) => col.name).join(', ');
       const tableName = resource.table;
 

package/dist/dataConnectors/sqlite.js

@@ -148,7 +148,6 @@ class SQLiteConnector {
         return value;
     }
     getData({ resource, limit, offset, sort, filters }) {
-        console.log('SQLITE getData', { resource, limit, offset, sort, filters });
         const columns = resource.dataSourceColumns.map((col) => col.name).join(', ');
         const tableName = resource.table;
         const where = filters.length ? `WHERE ${filters.map((f, i) => {

package/dist/index.js

@@ -193,6 +193,15 @@ class AdminForth {
                     if (item.component && !item.path) {
                         errors.push(`Menu item with component must have path : ${JSON.stringify(item)}`);
                     }
+                    if (item.type === 'resource' && !item.resourceId) {
+                        errors.push(`Menu item with type 'resource' must have resourceId : ${JSON.stringify(item)}`);
+                    }
+                    if (item.resourceId && !this.config.resources.find((res) => res.resourceId === item.resourceId)) {
+                        errors.push(`Menu item with type 'resourceId' has resourceId which is not in resources: ${JSON.stringify(item)}`);
+                    }
+                    if (item.type === 'component' && !item.component) {
+                        errors.push(`Menu item with type 'component' must have component : ${JSON.stringify(item)}`);
+                    }
                     // make sure component starts with @@
                     if (item.component) {
                         if (!item.component.startsWith('@@')) {
@@ -384,6 +393,7 @@ class AdminForth {
             method: 'GET',
             path: '/get_base_config',
             handler: (_e) => __awaiter(this, [_e], void 0, function* ({ input, adminUser, cookies }) {
+                var _f;
                 const cookieParsed = this.auth.verify(cookies['adminforth_jwt']);
                 let username = '';
                 let userFullName = '';
@@ -424,6 +434,7 @@ class AdminForth {
                         deleteConfirmation: this.config.deleteConfirmation,
                         auth: this.config.auth,
                         usernameField: this.config.auth.usernameField,
+                        title: (_f = this.config) === null || _f === void 0 ? void 0 : _f.title,
                     },
                     adminUser,
                     version: ADMINFORTH_VERSION,
@@ -433,7 +444,7 @@ class AdminForth {
         server.endpoint({
             method: 'POST',
             path: '/get_resource_columns',
-            handler: (_f) => __awaiter(this, [_f], void 0, function* ({ body }) {
+            handler: (_g) => __awaiter(this, [_g], void 0, function* ({ body }) {
                 const { resourceId } = body;
                 if (!this.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
@@ -451,8 +462,8 @@ class AdminForth {
         server.endpoint({
             method: 'POST',
             path: '/get_resource_data',
-            handler: (_g) => __awaiter(this, [_g], void 0, function* ({ body, adminUser }) {
-                var _h, _j, _k, _l, _m, _o, _p, _q;
+            handler: (_h) => __awaiter(this, [_h], void 0, function* ({ body, adminUser }) {
+                var _j, _k, _l, _m, _o, _p, _q, _r;
                 const { resourceId, source } = body;
                 if (['show', 'list'].includes(source) === false) {
                     return { error: 'Invalid source, should be list or show' };
@@ -467,8 +478,8 @@ class AdminForth {
                 if (!resource) {
                     return { error: `Resource ${resourceId} not found` };
                 }
-                if ((_j = (_h = resource.hooks) === null || _h === void 0 ? void 0 : _h[source]) === null || _j === void 0 ? void 0 : _j.beforeDatasourceRequest) {
-                    const resp = yield ((_l = (_k = resource.hooks) === null || _k === void 0 ? void 0 : _k[source]) === null || _l === void 0 ? void 0 : _l.beforeDatasourceRequest({ resource, query: body, adminUser }));
+                if ((_k = (_j = resource.hooks) === null || _j === void 0 ? void 0 : _j[source]) === null || _k === void 0 ? void 0 : _k.beforeDatasourceRequest) {
+                    const resp = yield ((_m = (_l = resource.hooks) === null || _l === void 0 ? void 0 : _l[source]) === null || _m === void 0 ? void 0 : _m.beforeDatasourceRequest({ resource, query: body, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -533,12 +544,19 @@ class AdminForth {
                     data.data.forEach((item) => {
                         item[col.name] = targetDataMap[item[col.name]];
                     });
+                    data.data.forEach((item) => {
+                        Object.keys(item).forEach((key) => {
+                            if (!targetResource.columns.find((col) => col.name === key) || targetResource.columns.find((col) => col.name === key && col.backendOnly)) {
+                                delete item[key];
+                            }
+                        });
+                    });
                 })));
                 data.data.forEach((item) => {
                     item._label = resource.itemLabel(item);
                 });
-                if ((_o = (_m = resource.hooks) === null || _m === void 0 ? void 0 : _m[source]) === null || _o === void 0 ? void 0 : _o.afterDatasourceRequest) {
-                    const resp = yield ((_q = (_p = resource.hooks) === null || _p === void 0 ? void 0 : _p[source]) === null || _q === void 0 ? void 0 : _q.afterDatasourceRequest({ resource, response: data.data, adminUser }));
+                if ((_p = (_o = resource.hooks) === null || _o === void 0 ? void 0 : _o[source]) === null || _p === void 0 ? void 0 : _p.afterDatasourceRequest) {
+                    const resp = yield ((_r = (_q = resource.hooks) === null || _q === void 0 ? void 0 : _q[source]) === null || _r === void 0 ? void 0 : _r.afterDatasourceRequest({ resource, response: data.data, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -546,14 +564,22 @@ class AdminForth {
                         return { error: resp.error };
                     }
                 }
+                // remove all columns which are not defined in resources, or defined but backendOnly
+                data.data.forEach((item) => {
+                    Object.keys(item).forEach((key) => {
+                        if (!resource.columns.find((col) => col.name === key) || resource.columns.find((col) => col.name === key && col.backendOnly)) {
+                            delete item[key];
+                        }
+                    });
+                });
                 return Object.assign(Object.assign({}, data), { options: resource === null || resource === void 0 ? void 0 : resource.options });
             }),
         });
         server.endpoint({
             method: 'POST',
             path: '/get_resource_foreign_data',
-            handler: (_r) => __awaiter(this, [_r], void 0, function* ({ body, adminUser }) {
-                var _s, _t, _u, _v;
+            handler: (_s) => __awaiter(this, [_s], void 0, function* ({ body, adminUser }) {
+                var _t, _u, _v, _w;
                 const { resourceId, column } = body;
                 if (!this.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
@@ -574,8 +600,8 @@ class AdminForth {
                 }
                 const targetResourceId = columnConfig.foreignResource.resourceId;
                 const targetResource = this.config.resources.find((res) => res.resourceId == targetResourceId);
-                if ((_s = columnConfig.foreignResource.hooks) === null || _s === void 0 ? void 0 : _s.beforeDatasourceRequest) {
-                    const resp = yield ((_t = column.foreignResource.hooks) === null || _t === void 0 ? void 0 : _t.beforeDatasourceRequest({ query: body, adminUser }));
+                if ((_t = columnConfig.foreignResource.hooks) === null || _t === void 0 ? void 0 : _t.beforeDatasourceRequest) {
+                    const resp = yield ((_u = column.foreignResource.hooks) === null || _u === void 0 ? void 0 : _u.beforeDatasourceRequest({ query: body, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -603,8 +629,8 @@ class AdminForth {
                 const response = {
                     items
                 };
-                if ((_u = columnConfig.foreignResource.hooks) === null || _u === void 0 ? void 0 : _u.afterDatasourceResponse) {
-                    const resp = yield ((_v = column.foreignResource.hooks) === null || _v === void 0 ? void 0 : _v.afterDatasourceResponse({ response, adminUser }));
+                if ((_v = columnConfig.foreignResource.hooks) === null || _v === void 0 ? void 0 : _v.afterDatasourceResponse) {
+                    const resp = yield ((_w = column.foreignResource.hooks) === null || _w === void 0 ? void 0 : _w.afterDatasourceResponse({ response, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -618,7 +644,7 @@ class AdminForth {
         server.endpoint({
             method: 'POST',
             path: '/get_min_max_for_columns',
-            handler: (_w) => __awaiter(this, [_w], void 0, function* ({ body }) {
+            handler: (_x) => __awaiter(this, [_x], void 0, function* ({ body }) {
                 const { resourceId } = body;
                 if (!this.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
@@ -645,11 +671,10 @@ class AdminForth {
             }),
         });
         server.endpoint({
-            noAuth: true, // TODO
             method: 'POST',
             path: '/create_record',
-            handler: (_x) => __awaiter(this, [_x], void 0, function* ({ body, adminUser }) {
-                var _y, _z, _0, _1, _2, _3, _4, _5, _6;
+            handler: (_y) => __awaiter(this, [_y], void 0, function* ({ body, adminUser }) {
+                var _z, _0, _1, _2, _3, _4, _5, _6, _7;
                 console.log('create_record', body, this.config.resources);
                 const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
                 if (!resource) {
@@ -657,8 +682,8 @@ class AdminForth {
                 }
                 const record = body['record'];
                 // execute hook if needed
-                if ((_z = (_y = resource.hooks) === null || _y === void 0 ? void 0 : _y.create) === null || _z === void 0 ? void 0 : _z.beforeSave) {
-                    const resp = yield ((_1 = (_0 = resource.hooks) === null || _0 === void 0 ? void 0 : _0.create) === null || _1 === void 0 ? void 0 : _1.beforeSave({ resource, record, adminUser }));
+                if ((_0 = (_z = resource.hooks) === null || _z === void 0 ? void 0 : _z.create) === null || _0 === void 0 ? void 0 : _0.beforeSave) {
+                    const resp = yield ((_2 = (_1 = resource.hooks) === null || _1 === void 0 ? void 0 : _1.create) === null || _2 === void 0 ? void 0 : _2.beforeSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -674,7 +699,7 @@ class AdminForth {
                             });
                         }
                     }
-                    if (((_2 = column.required) === null || _2 === void 0 ? void 0 : _2.create) && body['record'][column.name] === undefined) {
+                    if (((_3 = column.required) === null || _3 === void 0 ? void 0 : _3.create) && body['record'][column.name] === undefined) {
                         return { error: `Column '${column.name}' is required` };
                     }
                     if (column.isUnique) {
@@ -699,8 +724,8 @@ class AdminForth {
                 const connector = this.connectors[resource.dataSource];
                 yield connector.createRecord({ resource, record });
                 // execute hook if needed
-                if ((_4 = (_3 = resource.hooks) === null || _3 === void 0 ? void 0 : _3.create) === null || _4 === void 0 ? void 0 : _4.afterSave) {
-                    const resp = yield ((_6 = (_5 = resource.hooks) === null || _5 === void 0 ? void 0 : _5.create) === null || _6 === void 0 ? void 0 : _6.afterSave({ resource, record, adminUser }));
+                if ((_5 = (_4 = resource.hooks) === null || _4 === void 0 ? void 0 : _4.create) === null || _5 === void 0 ? void 0 : _5.afterSave) {
+                    const resp = yield ((_7 = (_6 = resource.hooks) === null || _6 === void 0 ? void 0 : _6.create) === null || _7 === void 0 ? void 0 : _7.afterSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -714,11 +739,10 @@ class AdminForth {
             })
         });
         server.endpoint({
-            noAuth: true, // TODO
             method: 'POST',
             path: '/update_record',
-            handler: (_7) => __awaiter(this, [_7], void 0, function* ({ body, adminUser }) {
-                var _8, _9, _10, _11, _12, _13, _14, _15;
+            handler: (_8) => __awaiter(this, [_8], void 0, function* ({ body, adminUser }) {
+                var _9, _10, _11, _12, _13, _14, _15, _16;
                 const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
                 if (!resource) {
                     return { error: `Resource '${body['resourceId']}' not found` };
@@ -732,8 +756,8 @@ class AdminForth {
                 }
                 const record = body['record'];
                 // execute hook if needed
-                if ((_9 = (_8 = resource.hooks) === null || _8 === void 0 ? void 0 : _8.edit) === null || _9 === void 0 ? void 0 : _9.beforeSave) {
-                    const resp = yield ((_11 = (_10 = resource.hooks) === null || _10 === void 0 ? void 0 : _10.edit) === null || _11 === void 0 ? void 0 : _11.beforeSave({ resource, record, adminUser }));
+                if ((_10 = (_9 = resource.hooks) === null || _9 === void 0 ? void 0 : _9.edit) === null || _10 === void 0 ? void 0 : _10.beforeSave) {
+                    const resp = yield ((_12 = (_11 = resource.hooks) === null || _11 === void 0 ? void 0 : _11.edit) === null || _12 === void 0 ? void 0 : _12.beforeSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -742,17 +766,24 @@ class AdminForth {
                     }
                 }
                 const newValues = {};
-                for (const col of resource.columns.filter((col) => !col.virtual)) {
-                    if (record[col.name] !== oldRecord[col.name]) {
-                        newValues[col.name] = connector.setFieldValue(col, record[col.name]);
+                for (const recordField in record) {
+                    if (record[recordField] !== oldRecord[recordField]) {
+                        const column = resource.columns.find((col) => col.name === recordField);
+                        if (column) {
+                            newValues[recordField] = connector.setFieldValue(column, record[recordField]);
+                        }
+                        else {
+                            newValues[recordField] = record[recordField];
+                        }
                     }
                 }
+                console.log('✅ newValues', newValues);
                 if (Object.keys(newValues).length > 0) {
                     yield connector.updateRecord({ resource, recordId, record, newValues });
                 }
                 // execute hook if needed
-                if ((_13 = (_12 = resource.hooks) === null || _12 === void 0 ? void 0 : _12.edit) === null || _13 === void 0 ? void 0 : _13.afterSave) {
-                    const resp = yield ((_15 = (_14 = resource.hooks) === null || _14 === void 0 ? void 0 : _14.edit) === null || _15 === void 0 ? void 0 : _15.afterSave({ resource, record, adminUser }));
+                if ((_14 = (_13 = resource.hooks) === null || _13 === void 0 ? void 0 : _13.edit) === null || _14 === void 0 ? void 0 : _14.afterSave) {
+                    const resp = yield ((_16 = (_15 = resource.hooks) === null || _15 === void 0 ? void 0 : _15.edit) === null || _16 === void 0 ? void 0 : _16.afterSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -766,19 +797,18 @@ class AdminForth {
             })
         });
         server.endpoint({
-            noAuth: true, // TODO
             method: 'POST',
             path: '/delete_record',
-            handler: (_16) => __awaiter(this, [_16], void 0, function* ({ body, adminUser }) {
-                var _17, _18, _19, _20, _21, _22, _23, _24;
+            handler: (_17) => __awaiter(this, [_17], void 0, function* ({ body, adminUser }) {
+                var _18, _19, _20, _21, _22, _23, _24, _25;
                 const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
                 const record = yield this.connectors[resource.dataSource].getRecordByPrimaryKey(resource, body['primaryKey']);
                 if (!resource) {
                     return { error: `Resource '${body['resourceId']}' not found` };
                 }
                 // execute hook if needed
-                if ((_18 = (_17 = resource.hooks) === null || _17 === void 0 ? void 0 : _17.delete) === null || _18 === void 0 ? void 0 : _18.beforeSave) {
-                    const resp = yield ((_20 = (_19 = resource.hooks) === null || _19 === void 0 ? void 0 : _19.delete) === null || _20 === void 0 ? void 0 : _20.beforeSave({ resource, record, adminUser }));
+                if ((_19 = (_18 = resource.hooks) === null || _18 === void 0 ? void 0 : _18.delete) === null || _19 === void 0 ? void 0 : _19.beforeSave) {
+                    const resp = yield ((_21 = (_20 = resource.hooks) === null || _20 === void 0 ? void 0 : _20.delete) === null || _21 === void 0 ? void 0 : _21.beforeSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -789,8 +819,8 @@ class AdminForth {
                 const connector = this.connectors[resource.dataSource];
                 yield connector.deleteRecord({ resource, recordId: body['primaryKey'] });
                 // execute hook if needed
-                if ((_22 = (_21 = resource.hooks) === null || _21 === void 0 ? void 0 : _21.delete) === null || _22 === void 0 ? void 0 : _22.afterSave) {
-                    const resp = yield ((_24 = (_23 = resource.hooks) === null || _23 === void 0 ? void 0 : _23.delete) === null || _24 === void 0 ? void 0 : _24.afterSave({ resource, record, adminUser }));
+                if ((_23 = (_22 = resource.hooks) === null || _22 === void 0 ? void 0 : _22.delete) === null || _23 === void 0 ? void 0 : _23.afterSave) {
+                    const resp = yield ((_25 = (_24 = resource.hooks) === null || _24 === void 0 ? void 0 : _24.delete) === null || _25 === void 0 ? void 0 : _25.afterSave({ resource, record, adminUser }));
                     if (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -804,10 +834,9 @@ class AdminForth {
             })
         });
         server.endpoint({
-            noAuth: true, // TODO
             method: 'POST',
             path: '/start_bulk_action',
-            handler: (_25) => __awaiter(this, [_25], void 0, function* ({ body }) {
+            handler: (_26) => __awaiter(this, [_26], void 0, function* ({ body }) {
                 const { resourceId, actionId, recordIds } = body;
                 const resource = this.config.resources.find((res) => res.resourceId == resourceId);
                 if (!resource) {

package/dist/modules/codeInjector.js

@@ -7,14 +7,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import fs from 'fs';
-import fsExtra from 'fs-extra';
-import filewatcher from 'filewatcher';
 import { exec, spawn } from 'child_process';
-import { promisify } from 'util';
-import path from 'path';
 import crypto from 'crypto';
+import filewatcher from 'filewatcher';
+import fs from 'fs';
+import fsExtra from 'fs-extra';
 import os from 'os';
+import path from 'path';
+import { promisify } from 'util';
 import { ADMIN_FORTH_ABSOLUTE_PATH } from './utils.js';
 let TMP_DIR;
 try {
@@ -71,7 +71,7 @@ class CodeInjector {
     }
     prepareSources(_a) {
         return __awaiter(this, arguments, void 0, function* ({ filesUpdated, verbose = false }) {
-            var _b, _c, _d, _e, _f, _g;
+            var _b, _c, _d, _e, _f, _g, _h;
             // check SPA_TMP_PATH exists and create if not
             try {
                 yield fs.promises.access(CodeInjector.SPA_TMP_PATH, fs.constants.F_OK);
@@ -154,6 +154,25 @@ class CodeInjector {
                 }).join('');
                 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;
+            let customComponentsImports = '';
+            if (customComponentsDir) {
+                // if file - return, if dir - go recursively
+                const customComponents = yield fs.promises.readdir(customComponentsDir);
+                for (const filePath of customComponents) {
+                    fs.stat(`${customComponentsDir}/${filePath}`, (err, data) => {
+                        if (err) {
+                            console.log(err);
+                            return;
+                        }
+                        if (data.isFile()) {
+                            const componentName = filePath.split('.')[0].replace('/', '');
+                            customComponentsImports += `import ${componentName} from '@/custom/${filePath}';\n`;
+                        }
+                    });
+                }
+            }
             // Generate Vue.component statements for each icon
             const iconComponents = uniqueIcons.map((icon) => {
                 const [collection, iconName] = icon.split(':');
@@ -162,26 +181,44 @@ class CodeInjector {
                 }).join('');
                 return `app.component('${PascalIconName}', ${PascalIconName});`;
             }).join('\n');
+            // Generate Vue.component statements for each custom component
+            let customComponentsComponents = '';
+            if (customComponentsDir) {
+                const customComponents = yield fs.promises.readdir(customComponentsDir);
+                for (const filePath of customComponents) {
+                    fs.stat(`${customComponentsDir}/${filePath}`, (err, data) => {
+                        if (err) {
+                            console.log('Custom components importing error: ', err);
+                            return;
+                        }
+                        if (data.isFile()) {
+                            const componentName = filePath.split('.')[0].replace('/', '');
+                            customComponentsComponents += `app.component('${componentName}', ${componentName});\n`;
+                        }
+                    });
+                }
+            }
             let imports = iconImports + '\n';
-            if ((_c = this.adminforth.config.customization) === null || _c === void 0 ? void 0 : _c.vueUsesFile) {
+            imports += customComponentsImports + '\n';
+            if ((_d = this.adminforth.config.customization) === null || _d === void 0 ? void 0 : _d.vueUsesFile) {
                 imports += `import addCustomUses from '${this.adminforth.config.customization.vueUsesFile}';\n`;
             }
             // inject that code into spa_tmp/src/App.vue
             const appVuePath = path.join(CodeInjector.SPA_TMP_PATH, 'src', 'main.ts');
             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');
-            if ((_d = this.adminforth.config.customization) === null || _d === void 0 ? void 0 : _d.vueUsesFile) {
+            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) {
                 appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH CUSTOM USES */', 'addCustomUses(app);');
             }
             yield fs.promises.writeFile(appVuePath, appVueContent);
             /* generate custom rotes */
             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 = (_e = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _e === void 0 ? void 0 : _e.find((mi) => mi.homepage);
+            let childrenHomepage = (_f = childrenHomePageMenuItem === null || childrenHomePageMenuItem === void 0 ? void 0 : childrenHomePageMenuItem.children) === null || _f === void 0 ? void 0 : _f.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 = ((_f = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _f === void 0 ? void 0 : _f.path) || `/resource/${(_g = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _g === void 0 ? void 0 : _g.resourceId}`;
+                homePagePath = ((_g = this.adminforth.config.menu.filter((mi) => mi.path)[0]) === null || _g === void 0 ? void 0 : _g.path) || `/resource/${(_h = this.adminforth.config.menu.filter((mi) => mi.children)[0]) === null || _h === void 0 ? void 0 : _h.resourceId}`;
             }
             routes += `{
       path: '/',

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

@@ -15,6 +15,7 @@
         "flowbite": "^2.3.0",
         "flowbite-datepicker": "^1.2.6",
         "pinia": "^2.1.7",
+        "unhead": "^1.9.12",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",
         "vue-slider-component": "^4.1.0-beta.7"
@@ -1149,6 +1150,41 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@unhead/dom": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.9.12.tgz",
+      "integrity": "sha512-3MY1TbZmEjGNZapi3wvJW0vWNS2CLKHt7/m57sScDHCNvNBe1mTwrIOhtZFDgAndhml2EVQ68RMa0Vhum/M+cw==",
+      "dependencies": {
+        "@unhead/schema": "1.9.12",
+        "@unhead/shared": "1.9.12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/schema": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/schema/-/schema-1.9.12.tgz",
+      "integrity": "sha512-ue2FKyIZKsuZDpWJBMlBGwMm4s+vFeU3NUWsNt8Z+2JkOUIqO/VG43LxNgY1M595bOS71Gdxk+G9VtzfKJ5uEA==",
+      "dependencies": {
+        "hookable": "^5.5.3",
+        "zhead": "^2.2.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
+    "node_modules/@unhead/shared": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@unhead/shared/-/shared-1.9.12.tgz",
+      "integrity": "sha512-72wlLXG3FP3sXUrwd42Uv8jYpHSg4R6IFJcsl+QisRjKM89JnjOFSw1DqWO4IOftW5xOxS4J5v7SQyJ4NJo7Bw==",
+      "dependencies": {
+        "@unhead/schema": "1.9.12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
@@ -2471,6 +2507,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3914,6 +3955,20 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
+    "node_modules/unhead": {
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-1.9.12.tgz",
+      "integrity": "sha512-s6VxcTV45hy8c/IioKQOonFnAO+kBOSpgDfqEHhnU0YVSQYaRPEp9pzW1qSPf0lx+bg9RKeOQyNNbSGGUP26aQ==",
+      "dependencies": {
+        "@unhead/dom": "1.9.12",
+        "@unhead/schema": "1.9.12",
+        "@unhead/shared": "1.9.12",
+        "hookable": "^5.5.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.16",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
@@ -4260,6 +4315,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zhead": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/zhead/-/zhead-2.2.4.tgz",
+      "integrity": "sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==",
+      "funding": {
+        "url": "https://github.com/sponsors/harlan-zw"
+      }
     }
   }
 }

package/dist/spa/spa/package.json

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

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

@@ -64,6 +64,7 @@
     </div>
   </nav>
 
+
   <aside 
     v-if="loggedIn"
 
@@ -132,10 +133,22 @@ import AcceptModal from './components/AcceptModal.vue';
 import MenuLink from './components/MenuLink.vue';
 import { useRoute, useRouter } from 'vue-router';
 import { getIcon } from '@/utils';
+import { useHead } from 'unhead'
+import { createHead } from 'unhead'
+const coreStore = useCoreStore();
+
+
+createHead()
+
+
+
+
 
 
 const route = useRoute();
 const router = useRouter();
+const title = ref('');
+
 
 const routerIsReady = ref(false);
 
@@ -153,7 +166,6 @@ async function logout() {
   router.push({ name: 'login' });
 }
 
-const coreStore = useCoreStore();
 
 
 
@@ -167,6 +179,11 @@ onMounted(async () => {
   initRouter();
   initFlowbite();
   await coreStore.fetchMenuAndResource();
+  title.value = coreStore.config.title || 'Admin Forth';
+  useHead({
+  title: title.value,
+  
+})
 })
 
 </script>

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

@@ -29,9 +29,9 @@ export async function callAdminForthApi({ path, method, body=undefined }) {
   }
 }
 
-
-
-
+export function getCustomComponent(name) {
+    return resolveComponent(name);
+}
 
 export function getIcon(icon: string) {
   // icon format is "feather:icon-name". We need to get IconName in pascal case

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

@@ -45,9 +45,9 @@ import BreadcrumbsWithButtons from '@/components/BreadcrumbsWithButtons.vue';
 import ResourceForm from '@/components/ResourceForm.vue';
 import SingleSkeletLoader from '@/components/SingleSkeletLoader.vue';
 import { useCoreStore } from '@/stores/core';
-import { callAdminForthApi } from '@/utils';
+import { callAdminForthApi, getCustomComponent } from '@/utils';
 import { IconFloppyDiskSolid } from '@iconify-prerendered/vue-flowbite';
-import { defineAsyncComponent, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 const isValid = ref(false);
@@ -75,12 +75,10 @@ onMounted(async () => {
     resourceId: route.params.resourceId
   });
   createComponentsPerColumn = coreStore.resourceColumns.reduce((acc, column) => {
-    if (column.component?.create) {
-      const path = column.component.create.replace('@@', '../custom');
-      let component = defineAsyncComponent(() => import(`${path}`))
-      acc[column.name] = component;
-    }
-    return acc;
+      if (column.component?.show) {
+          acc[column.name] = getCustomComponent(column.component.create.replace('@@', '').replace('./custom/', '')).split('.')[0];
+      }
+      return acc;
     }, {});
   loading.value = false;
 });