adminforth 1.0.32 → 1.0.34

package/dataConnectors/sqlite.ts

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

package/dist/dataConnectors/sqlite.js

@@ -148,6 +148,7 @@ class SQLiteConnector {
         return value;
     }
     getData({ resource, limit, offset, sort, filters }) {
+        console.log('getDataREQ', { resource, limit, offset, sort, filters });
         const columns = resource.dataSourceColumns.map((col) => col.name).join(', ');
         const tableName = resource.table;
         for (const filter of filters) {

package/dist/index.js

@@ -22,14 +22,7 @@ import { guessLabelFromName } from './modules/utils.js';
 import ExpressServer from './servers/express.js';
 import { v1 as uuid } from 'uuid';
 import fs from 'fs';
-let package_json;
-if (fs.existsSync('../package.json')) {
-    // in prod we are in dist folder
-    package_json = JSON.parse(fs.readFileSync('../package.json', 'utf8'));
-}
-else {
-    package_json = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
-}
+import { ADMINFORTH_VERSION } from './modules/utils.js';
 import { AdminForthFilterOperators, AdminForthTypes } from './types.js';
 const AVAILABLE_SHOW_IN = ['list', 'edit', 'create', 'filter', 'show'];
 const DEFAULT_ALLOWED_ACTIONS = { create: true, edit: true, show: true, delete: true };
@@ -45,6 +38,7 @@ class AdminForth {
         this.codeInjector = new CodeInjector(this);
         this.connectors = {};
         this.statuses = {};
+        console.log(`🚀 AdminForth v${ADMINFORTH_VERSION} starting up`);
     }
     validateConfig() {
         if (this.config.rootUser) {
@@ -257,7 +251,7 @@ class AdminForth {
                 if (!this.config.databaseConnectors[dbType]) {
                     throw new Error(`Database type ${dbType} is not supported, consider using databaseConnectors in AdminForth config`);
                 }
-                this.connectors[ds.id] = new this.config.databaseConnectors[dbType]({ url: ds.url, fieldtypesByTable: ds.fieldtypesByTable });
+                this.connectors[ds.id] = new this.config.databaseConnectors[dbType]({ url: ds.url });
             });
             yield Promise.all(this.config.resources.map((res) => __awaiter(this, void 0, void 0, function* () {
                 if (!this.connectors[res.dataSource]) {
@@ -287,11 +281,6 @@ class AdminForth {
             // console.log('⚙️⚙️⚙️ Database discovery done', JSON.stringify(this.config.resources, null, 2));
         });
     }
-    init() {
-        return __awaiter(this, void 0, void 0, function* () {
-            console.log('AdminForth init');
-        });
-    }
     bundleNow(_b) {
         return __awaiter(this, arguments, void 0, function* ({ hotReload = false, verbose = false }) {
             this.codeInjector.bundleNow({ hotReload, verbose });
@@ -396,11 +385,11 @@ class AdminForth {
                         return { error: 'Unauthorized' };
                     }
                     username = user.data[0][this.config.auth.usernameField];
-                    userFullName = user.data[0][this.config.auth.userFullName];
+                    userFullName = user.data[0][this.config.auth.userFullNameField];
                 }
                 const userData = {
                     [this.config.auth.usernameField]: username,
-                    [this.config.auth.userFullName]: userFullName
+                    [this.config.auth.userFullNameField]: userFullName
                 };
                 return {
                     user: userData,
@@ -417,7 +406,7 @@ class AdminForth {
                         usernameField: this.config.auth.usernameField,
                     },
                     adminUser,
-                    version: package_json.version,
+                    version: ADMINFORTH_VERSION,
                 };
             }),
         });
@@ -442,8 +431,12 @@ class AdminForth {
         server.endpoint({
             method: 'POST',
             path: '/get_resource_data',
-            handler: (_g) => __awaiter(this, [_g], void 0, function* ({ body }) {
-                const { resourceId, limit, offset, filters, sort } = body;
+            handler: (_g) => __awaiter(this, [_g], void 0, function* ({ body, adminUser }) {
+                var _h, _j, _k, _l, _m, _o, _p, _q;
+                const { resourceId, source } = body;
+                if (['show', 'list'].includes(source) === false) {
+                    return { error: 'Invalid source, should be list or show' };
+                }
                 if (!this.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
                 }
@@ -454,6 +447,16 @@ 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 (!resp || (!resp.ok && !resp.error)) {
+                        throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
+                    }
+                    if (resp.error) {
+                        return { error: resp.error };
+                    }
+                }
+                const { limit, offset, filters, sort } = body;
                 const data = yield this.connectors[resource.dataSource].getData({
                     resource,
                     limit,
@@ -461,14 +464,52 @@ class AdminForth {
                     filters,
                     sort,
                 });
+                // for foreign keys, add references
+                yield Promise.all(resource.columns.filter((col) => col.foreignResource).map((col) => __awaiter(this, void 0, void 0, function* () {
+                    const targetResource = this.config.resources.find((res) => res.resourceId == col.foreignResource.resourceId);
+                    const targetConnector = this.connectors[targetResource.dataSource];
+                    const targetResourcePkField = targetResource.columns.find((col) => col.primaryKey).name;
+                    const targetData = yield targetConnector.getData({
+                        resource: targetResource,
+                        limit: limit,
+                        offset: 0,
+                        filters: [
+                            {
+                                field: targetResourcePkField,
+                                operator: AdminForthFilterOperators.IN,
+                                value: data.data.map((item) => item[col.name]),
+                            }
+                        ],
+                        sort: [],
+                    });
+                    const targetDataMap = targetData.data.reduce((acc, item) => {
+                        acc[item[targetResourcePkField]] = {
+                            label: targetResource.itemLabel ? targetResource.itemLabel(item) : item[targetResourcePkField],
+                            pk: item[targetResourcePkField],
+                        };
+                        return acc;
+                    }, {});
+                    data.data.forEach((item) => {
+                        item[col.name] = targetDataMap[item[col.name]];
+                    });
+                })));
+                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 (!resp || (!resp.ok && !resp.error)) {
+                        throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
+                    }
+                    if (resp.error) {
+                        return { error: resp.error };
+                    }
+                }
                 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: (_h) => __awaiter(this, [_h], void 0, function* ({ body, adminUser }) {
-                var _j, _k, _l, _m;
+            handler: (_r) => __awaiter(this, [_r], void 0, function* ({ body, adminUser }) {
+                var _s, _t, _u, _v;
                 const { resourceId, column } = body;
                 if (!this.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
@@ -486,8 +527,8 @@ class AdminForth {
                 }
                 const targetResourceId = columnConfig.foreignResource.resourceId;
                 const targetResource = this.config.resources.find((res) => res.resourceId == targetResourceId);
-                if ((_j = columnConfig.foreignResource.hooks) === null || _j === void 0 ? void 0 : _j.beforeDatasourceRequest) {
-                    const resp = yield ((_k = column.foreignResource.hooks) === null || _k === void 0 ? void 0 : _k.beforeDatasourceRequest({ query: body, adminUser }));
+                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 (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -515,8 +556,8 @@ class AdminForth {
                 const response = {
                     items
                 };
-                if ((_l = columnConfig.foreignResource.hooks) === null || _l === void 0 ? void 0 : _l.afterDatasourceRequest) {
-                    const resp = yield ((_m = column.foreignResource.hooks) === null || _m === void 0 ? void 0 : _m.afterDatasourceRequest({ response, adminUser }));
+                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 (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -530,7 +571,7 @@ class AdminForth {
         server.endpoint({
             method: 'POST',
             path: '/get_min_max_for_columns',
-            handler: (_o) => __awaiter(this, [_o], void 0, function* ({ body }) {
+            handler: (_w) => __awaiter(this, [_w], void 0, function* ({ body }) {
                 const { resourceId } = body;
                 if (!this.statuses.dbDiscover) {
                     return { error: 'Database discovery not started' };
@@ -556,40 +597,12 @@ class AdminForth {
                 return item;
             }),
         });
-        server.endpoint({
-            method: 'POST',
-            path: '/get_record',
-            handler: (_p) => __awaiter(this, [_p], void 0, function* ({ body, adminUser }) {
-                var _q, _r;
-                const { resourceId, primaryKey } = body;
-                const resource = this.config.resources.find((res) => res.resourceId == resourceId);
-                const primaryKeyColumn = resource.columns.find((col) => col.primaryKey);
-                const connector = this.connectors[resource.dataSource];
-                const record = yield connector.getRecordByPrimaryKey(resource, primaryKey);
-                if (!record) {
-                    return { error: `Record with ${primaryKeyColumn.name} ${primaryKey} not found` };
-                }
-                // execute hook if needed
-                if ((_q = resource.hooks) === null || _q === void 0 ? void 0 : _q.show) {
-                    const resp = yield ((_r = resource.hooks) === null || _r === void 0 ? void 0 : _r.show({ resource, record, adminUser }));
-                    if (!resp || (!resp.ok && !resp.error)) {
-                        throw new Error(`Hook must return object with {ok: true} or { error: 'Error' } `);
-                    }
-                    if (resp.error) {
-                        return { error: resp.error };
-                    }
-                }
-                const labler = resource.itemLabel || ((record) => `${resource.label} ${record[primaryKeyColumn.name]}`);
-                record._label = labler(record);
-                return record;
-            })
-        });
         server.endpoint({
             noAuth: true, // TODO
             method: 'POST',
             path: '/create_record',
-            handler: (_s) => __awaiter(this, [_s], void 0, function* ({ body, adminUser }) {
-                var _t, _u, _v, _w, _x, _y, _z, _0, _1;
+            handler: (_x) => __awaiter(this, [_x], void 0, function* ({ body, adminUser }) {
+                var _y, _z, _0, _1, _2, _3, _4, _5, _6;
                 console.log('create_record', body, this.config.resources);
                 const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
                 if (!resource) {
@@ -597,8 +610,8 @@ class AdminForth {
                 }
                 const record = body['record'];
                 // execute hook if needed
-                if ((_u = (_t = resource.hooks) === null || _t === void 0 ? void 0 : _t.create) === null || _u === void 0 ? void 0 : _u.beforeSave) {
-                    const resp = yield ((_w = (_v = resource.hooks) === null || _v === void 0 ? void 0 : _v.create) === null || _w === void 0 ? void 0 : _w.beforeSave({ resource, record, adminUser }));
+                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 (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -614,7 +627,7 @@ class AdminForth {
                             });
                         }
                     }
-                    if (((_x = column.required) === null || _x === void 0 ? void 0 : _x.create) && body['record'][column.name] === undefined) {
+                    if (((_2 = column.required) === null || _2 === void 0 ? void 0 : _2.create) && body['record'][column.name] === undefined) {
                         return { error: `Column '${column.name}' is required` };
                     }
                     if (column.isUnique) {
@@ -639,8 +652,8 @@ class AdminForth {
                 const connector = this.connectors[resource.dataSource];
                 yield connector.createRecord({ resource, 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.afterSave) {
-                    const resp = yield ((_1 = (_0 = resource.hooks) === null || _0 === void 0 ? void 0 : _0.create) === null || _1 === void 0 ? void 0 : _1.afterSave({ resource, record, adminUser }));
+                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 (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -657,8 +670,8 @@ class AdminForth {
             noAuth: true, // TODO
             method: 'POST',
             path: '/update_record',
-            handler: (_2) => __awaiter(this, [_2], void 0, function* ({ body, adminUser }) {
-                var _3, _4, _5, _6, _7, _8, _9, _10;
+            handler: (_7) => __awaiter(this, [_7], void 0, function* ({ body, adminUser }) {
+                var _8, _9, _10, _11, _12, _13, _14, _15;
                 console.log('update_record', body);
                 const resource = this.config.resources.find((res) => res.resourceId == body['resourceId']);
                 if (!resource) {
@@ -673,8 +686,8 @@ class AdminForth {
                 }
                 const record = body['record'];
                 // execute hook if needed
-                if ((_4 = (_3 = resource.hooks) === null || _3 === void 0 ? void 0 : _3.edit) === null || _4 === void 0 ? void 0 : _4.beforeSave) {
-                    const resp = yield ((_6 = (_5 = resource.hooks) === null || _5 === void 0 ? void 0 : _5.edit) === null || _6 === void 0 ? void 0 : _6.beforeSave({ resource, record, adminUser }));
+                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 (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -692,8 +705,8 @@ class AdminForth {
                     yield connector.updateRecord({ resource, recordId, record, newValues });
                 }
                 // execute hook if needed
-                if ((_8 = (_7 = resource.hooks) === null || _7 === void 0 ? void 0 : _7.edit) === null || _8 === void 0 ? void 0 : _8.afterSave) {
-                    const resp = yield ((_10 = (_9 = resource.hooks) === null || _9 === void 0 ? void 0 : _9.edit) === null || _10 === void 0 ? void 0 : _10.afterSave({ resource, record, adminUser }));
+                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 (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -710,16 +723,16 @@ class AdminForth {
             noAuth: true, // TODO
             method: 'POST',
             path: '/delete_record',
-            handler: (_11) => __awaiter(this, [_11], void 0, function* ({ body, adminUser }) {
-                var _12, _13, _14, _15, _16, _17, _18, _19;
+            handler: (_16) => __awaiter(this, [_16], void 0, function* ({ body, adminUser }) {
+                var _17, _18, _19, _20, _21, _22, _23, _24;
                 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 ((_13 = (_12 = resource.hooks) === null || _12 === void 0 ? void 0 : _12.delete) === null || _13 === void 0 ? void 0 : _13.beforeSave) {
-                    const resp = yield ((_15 = (_14 = resource.hooks) === null || _14 === void 0 ? void 0 : _14.delete) === null || _15 === void 0 ? void 0 : _15.beforeSave({ resource, record, adminUser }));
+                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 (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -730,8 +743,8 @@ class AdminForth {
                 const connector = this.connectors[resource.dataSource];
                 yield connector.deleteRecord({ resource, recordId: body['primaryKey'] });
                 // execute hook if needed
-                if ((_17 = (_16 = resource.hooks) === null || _16 === void 0 ? void 0 : _16.delete) === null || _17 === void 0 ? void 0 : _17.afterSave) {
-                    const resp = yield ((_19 = (_18 = resource.hooks) === null || _18 === void 0 ? void 0 : _18.delete) === null || _19 === void 0 ? void 0 : _19.afterSave({ resource, record, adminUser }));
+                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 (!resp || (!resp.ok && !resp.error)) {
                         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
                     }
@@ -748,7 +761,7 @@ class AdminForth {
             noAuth: true, // TODO
             method: 'POST',
             path: '/start_bulk_action',
-            handler: (_20) => __awaiter(this, [_20], void 0, function* ({ body }) {
+            handler: (_25) => __awaiter(this, [_25], void 0, function* ({ body }) {
                 const { resourceId, actionId, recordIds } = body;
                 const resource = this.config.resources.find((res) => res.resourceId == resourceId);
                 if (!resource) {

package/dist/modules/utils.js

@@ -1,3 +1,6 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
 export function guessLabelFromName(name) {
     if (name.includes('_')) {
         return name.split('_').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
@@ -10,3 +13,11 @@ export function guessLabelFromName(name) {
         return name.split(/(?=[A-Z])/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
     }
 }
+let package_json;
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.join(path.dirname(__filename), '..');
+console.log('📦 __filename', __dirname);
+console.log('📦 __dirname', __dirname);
+export const ADMIN_FORTH_ABSOLUTE_PATH = __dirname;
+package_json = JSON.parse(fs.readFileSync(path.join(ADMIN_FORTH_ABSOLUTE_PATH, 'package.json'), 'utf8'));
+export const ADMINFORTH_VERSION = package_json.version;

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

@@ -42,9 +42,6 @@
                   </p>
                 </div>
                 <ul class="py-1" role="none">
-                  <li>
-                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Dashboard</a>
-                  </li>
                   <li >
                     <span @click="toggleTheme" class=" cursor-pointer flex items-center	 gap-1 block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">
                       {{ theme === 'dark' ? 'Light' : 'Dark' }}

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

@@ -5,7 +5,7 @@
         <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
 
         <div class="relative">
-          <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
+          <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
             <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
           </div>
 
@@ -97,7 +97,7 @@ const start = computed(() => {
 })
 
 function updateFromProps() {
-  if (props.valueStart === undefined) {
+  if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
   }
@@ -157,5 +157,5 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   removeChangeDateListener();
-})
+});
 </script>

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

@@ -26,7 +26,7 @@
       <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
         <div>
           <div class="relative">
-            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
+            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
               <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
             </div>
 
@@ -132,11 +132,11 @@ const end = computed(() => {
 })
 
 function updateFromProps() {
-  if (props.valueStart === undefined) {
+  if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
   }
-  if (props.valueEnd === undefined) {
+  if (!props.valueEnd) {
     datepickerEndEl.value.value = '';
     endTime.value = '';
   }

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

@@ -71,33 +71,52 @@ const sliderValue = ref([start.value, end.value]);
 
 const updateFromSlider =
     debounce((value: [number, number]) => {
+      console.log('start end', value)
       start.value = value[0];
       end.value = value[1];
     }, 500);
 
-function updateFromProps() {
-  if (props.valueStart || props.valueEnd) {
-    setFromProps(props.valueStart, props.valueEnd)
-  } else {
-    clear();
-  }
-}
-
 onMounted(() => {
-  updateFromProps();
+  updateStartFromProps();
+  updateEndFromProps();
 
-  watch(() => [props.valueStart, props.valueEnd], (value) => {
-    updateFromProps();
+  watch(() => props.valueStart, (value) => {
+    updateStartFromProps();
+  });
+
+  watch(() => props.valueEnd, (value) => {
+    updateEndFromProps();
   });
 })
 
+function updateStartFromProps() {
+  if (props.valueStart || props.valueStart === 0) {
+    start.value = props.valueStart ? props.valueStart : minFormatted.value;
+    sliderValue.value = [start.value, end.value]
+  } else {
+    console.log(props.valueStart)
+    start.value = minFormatted.value;
+    sliderValue.value = [minFormatted.value, end.value];
+  }
+}
+
+function updateEndFromProps() {
+  if (props.valueEnd || props.valueStart === 0) {
+    end.value = props.valueEnd ? props.valueEnd : minFormatted.value;
+    sliderValue.value = [start.value, end.value]
+  } else {
+    end.value = maxFormatted.value;
+    sliderValue.value = [start.value, maxFormatted.value];
+  }
+}
+
 watch(start, () => {
-  //console.log('⚡ emit', start.value)
+  console.log('⚡ emit', start.value)
   emit('update:valueStart', start.value)
 })
 
 watch(end, () => {
-  //console.log('⚡ emit', end.value)
+  console.log('⚡ emit', end.value)
   emit('update:valueEnd', end.value);
 })
 
@@ -106,12 +125,6 @@ const clear = () => {
   end.value = maxFormatted.value;
   sliderValue.value = [start.value, end.value]
 }
-
-function setFromProps(startValue: number, endValue: number) {
-  start.value = startValue ? startValue : minFormatted.value
-  end.value = endValue ? endValue : maxFormatted.value
-  sliderValue.value = [start.value, end.value]
-}
 </script>
 
 <style lang="scss" scoped>

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

@@ -78,7 +78,12 @@ const selectedItems = ref([]);
 function updateFromProps() {
   if (props.modelValue !== undefined) {
     if (props.single) {
-      selectedItems.value = [props.options.find(item => item.value === props.modelValue)];
+      const el = props.options.find(item => item.value === props.modelValue);
+      if (el) {
+        selectedItems.value = [el];
+      } else {
+        selectedItems.value = [];
+      }
     } else {
       selectedItems.value = props.options.filter(item => props.modelValue.includes(item.value));
     }