neo.mjs 6.6.5 → 6.7.1

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.6.5'
+         * @member {String} version='6.7.1'
          */
-        version: '6.6.5'
+        version: '6.7.1'
     }
 
     /**

package/examples/ConfigurationViewport.mjs

@@ -1,8 +1,14 @@
-import Button    from '../src/button/Base.mjs';
-import Container from '../src/container/Base.mjs';
-import NeoArray  from '../src/util/Array.mjs';
-import Panel     from '../src/container/Panel.mjs';
-import Viewport  from '../src/container/Viewport.mjs';
+import Button       from '../src/button/Base.mjs';
+import Container    from '../src/container/Base.mjs';
+import {bindAppend} from '../src/util/Function.mjs';
+import Panel        from '../src/container/Panel.mjs';
+import Viewport     from '../src/container/Viewport.mjs';
+
+// add custom themes here
+const themes = [
+    {name: 'neo-theme-dark',  label: 'Theme Dark'},
+    {name: 'neo-theme-light', label: 'Theme Light'}
+]
 
 /**
  * Base class for example Apps which should be configurable
@@ -112,8 +118,7 @@ class ConfigurationViewport extends Viewport {
 
                 items: [...me.configurationComponents, {
                     module : Button,
-                    handler: me.onSwitchTheme.bind(me, 'cmp'),
-                    id     : me.id + '_cmp_' + 'switchThemeButton',
+                    handler: bindAppend(me.onSwitchTheme, me, 'cmp'),
                     style  : {marginTop: '20px'},
                     text   : theme === 'neo-theme-dark' ? 'Theme Light' : 'Theme Dark',
                     width  : 100
@@ -172,24 +177,26 @@ class ConfigurationViewport extends Viewport {
     }
 
     /**
+     * @param {Object} data
      * @param {String} target
      */
-    onSwitchTheme(target) {
-        let me     = this,
-            button = Neo.getComponent(me.id + (target !== 'cmp' ? '__' : '_cmp_') + 'switchThemeButton'),
-            newTheme, oldTheme;
-
-        if (button.text === 'Theme Light') {
-            newTheme = 'neo-theme-light';
-            oldTheme = 'neo-theme-dark';
-
-            button.text = 'Theme Dark';
-        } else {
-            newTheme = 'neo-theme-dark';
-            oldTheme = 'neo-theme-light';
-
-            button.text = 'Theme Light';
-        }
+    onSwitchTheme(data, target) {
+        let me          = this,
+            button      = data.component,
+            countThemes = themes.length,
+            newTheme, oldIndex, oldTheme, themeIndex;
+
+        themes.forEach((theme, index) => {
+            if (button.text === theme.label) {
+                newTheme   = theme.name;
+                themeIndex = index;
+            }
+        });
+
+        oldIndex = (themeIndex + 1) % countThemes;
+        oldTheme = themes[oldIndex].name;
+
+        button.text = themes[oldIndex].label;
 
         if (target === 'cmp') {
             me.exampleComponent.theme = newTheme;

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.6.5'
+         * @member {String} version='6.7.1'
          */
-        version: '6.6.5'
+        version: '6.7.1'
     }
 
     /**

package/examples/dialog/DemoDialog.mjs

@@ -44,11 +44,12 @@ class DemoDialog extends Dialog {
                 })()
             }
         }, {
-            module : Button,
-            handler: me.createDialog.bind(me),
-            iconCls: 'fa fa-window-maximize',
-            text   : 'Create new modal Dialog',
-        }];
+            module   : Button,
+            handler  : me.createDialog.bind(me),
+            iconCls  : 'fa fa-window-maximize',
+            reference: 'create-second-dialog-button',
+            text     : 'Create new modal Dialog',
+        }]
     }
 
     /**
@@ -63,16 +64,16 @@ class DemoDialog extends Dialog {
             appName            : me.appName,
             boundaryContainerId: me.boundaryContainerId,
             listeners          : {close: me.onWindowClose, scope: me},
-            modal              : true
+            modal              : true,
+            title              : 'Second Dialog'
         });
     }
 
+    /**
+     *
+     */
     onWindowClose() {
-        let button = this.down({
-            text: 'Create new modal Dialog'
-        });
-
-        button.disabled = false;
+        this.getReference('create-second-dialog-button').disabled = false;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.6.5",
+    "version": "6.7.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -45,7 +45,7 @@
         "@fortawesome/fontawesome-free": "^6.4.2",
         "@material/mwc-button": "^0.27.0",
         "@material/mwc-textfield": "^0.27.0",
-        "autoprefixer": "^10.4.15",
+        "autoprefixer": "^10.4.16",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^11.0.0",
@@ -57,7 +57,7 @@
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.30",
-        "sass": "^1.67.0",
+        "sass": "^1.68.0",
         "showdown": "^2.1.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.6.5'
+     * @default '6.7.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.6.5'
+    version: '6.7.1'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -2050,13 +2050,17 @@ class Base extends CoreBase {
      * Placeholder method for util.VDom.syncVdomIds to allow overriding (disabling) it
      * @param {Neo.vdom.VNode} [vnode=this.vnode]
      * @param {Object} [vdom=this.vdom]
+     * @param {Boolean} force=false
      */
-    syncVdomIds(vnode=this.vnode, vdom=this.vdom) {
-        VDomUtil.syncVdomIds(vnode, vdom)
+    syncVdomIds(vnode=this.vnode, vdom=this.vdom, force=false) {
+        VDomUtil.syncVdomIds(vnode, vdom, force)
     }
 
     /**
-     * Placeholder method for util.VDom.syncVdomIds to allow overriding (disabling) it
+     * In case a component receives a new vnode, we want to do:
+     * - sync the vdom ids
+     * - setting rendered to true for child components
+     * - updating the parent component to ensure that the vnode tree stays persistent
      * @param {Neo.vdom.VNode} [vnode=this.vnode]
      */
     syncVnodeTree(vnode=this.vnode) {

package/src/component/DateSelector.mjs

@@ -156,7 +156,7 @@ class DateSelector extends Component {
         me.addDomListeners([
             {click: me.onComponentClick, scope: me},
             {wheel: me.onComponentWheel, scope: me}
-        ]);
+        ])
     }
 
     /**
@@ -176,12 +176,12 @@ class DateSelector extends Component {
 
             if (monthIncrement !== 0) { // gets used when month & year changed as well
                 method       = 'changeMonth';
-                methodParams = [monthIncrement, yearIncrement];
+                methodParams = [monthIncrement, yearIncrement]
             } else if (yearIncrement !== 0) {
                 method       = 'changeYear';
-                methodParams = [yearIncrement];
+                methodParams = [yearIncrement]
             } else if (dayIncrement !== 0) {
-                me.selectionModel.select(me.id + '__' + DateUtil.convertToyyyymmdd(value));
+                me.selectionModel.select(me.id + '__' + DateUtil.convertToyyyymmdd(value))
             }
 
             if (method) {
@@ -189,10 +189,10 @@ class DateSelector extends Component {
                     Neo.main.DomAccess.focus({
                         id: me.id
                     }).then(data => {
-                        me[method](...methodParams);
-                    });
+                        me[method](...methodParams)
+                    })
                 } else {
-                    me[method](...methodParams);
+                    me[method](...methodParams)
                 }
             }
         } else if (value) {
@@ -209,7 +209,7 @@ class DateSelector extends Component {
      * @protected
      */
     afterSetDayNameFormat(value, oldValue) {
-        this.updateHeaderDays(value, oldValue);
+        this.updateHeaderDays(value, oldValue)
     }
 
     /**
@@ -223,10 +223,10 @@ class DateSelector extends Component {
             let me = this;
 
             if (me.cachedUpdate && me.cachedUpdate !== new Date(`${me.value}T00:00:00.000Z`)) {
-                me.afterSetValue(me.value, DateUtil.convertToyyyymmdd(me.cachedUpdate));
+                me.afterSetValue(me.value, DateUtil.convertToyyyymmdd(me.cachedUpdate))
             }
 
-            me.cachedUpdate = null;
+            me.cachedUpdate = null
         }
     }
 
@@ -238,14 +238,14 @@ class DateSelector extends Component {
      */
     afterSetLocale(value, oldValue) {
         if (oldValue !== undefined) {
-            let me   = this,
-                dt   = new Intl.DateTimeFormat(me.locale, {month: 'short'});
+            let me = this,
+                dt = new Intl.DateTimeFormat(me.locale, {month: 'short'});
 
             me.updateHeaderDays(me.dayNameFormat, '', true);
 
             me.getHeaderMonthEl().html = dt.format(me.currentDate);
 
-            me.update();
+            me.update()
         }
     }
 
@@ -279,8 +279,8 @@ class DateSelector extends Component {
         let me  = this,
             cls = me.cls;
 
-        NeoArray[value ? 'remove' : 'add'](cls, 'neo-hide-inner-borders');
-        me.cls = cls;
+        NeoArray.toggle(cls, 'neo-hide-inner-borders', !value);
+        me.cls = cls
     }
 
     /**
@@ -313,9 +313,9 @@ class DateSelector extends Component {
 
                         if (item.cls.includes('neo-weekend')) {
                             if (value) {
-                                delete item.removeDom;
+                                delete item.removeDom
                             } else {
-                                item.removeDom = true;
+                                item.removeDom = true
                             }
                         }
                     }
@@ -366,7 +366,7 @@ class DateSelector extends Component {
      * @protected
      */
     afterSetWeekStartDay(value, oldValue) {
-        oldValue !== undefined && this.recreateDayViewContent(false, false);
+        oldValue !== undefined && this.recreateDayViewContent(false, false)
     }
 
     /**
@@ -376,7 +376,7 @@ class DateSelector extends Component {
      * @protected
      */
     beforeSetDayNameFormat(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'dayNameFormat', DateUtil.prototype.dayNameFormats);
+        return this.beforeSetEnumValue(value, oldValue, 'dayNameFormat', DateUtil.prototype.dayNameFormats)
     }
 
     /**
@@ -388,7 +388,7 @@ class DateSelector extends Component {
     beforeSetSelectionModel(value, oldValue) {
         oldValue && oldValue.destroy();
 
-        return ClassSystemUtil.beforeSetInstance(value, DateSelectorModel);
+        return ClassSystemUtil.beforeSetInstance(value, DateSelectorModel)
     }
 
     /**
@@ -398,7 +398,7 @@ class DateSelector extends Component {
      * @protected
      */
     beforeSetWeekStartDay(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'weekStartDay', DateUtil.prototype.weekStartDays);
+        return this.beforeSetEnumValue(value, oldValue, 'weekStartDay', DateUtil.prototype.weekStartDays)
     }
 
     /**
@@ -407,7 +407,7 @@ class DateSelector extends Component {
      * @protected
      */
     cacheUpdate(date=this.currentDate) {
-        this.cachedUpdate = date;
+        this.cachedUpdate = date
     }
 
     /**
@@ -420,7 +420,7 @@ class DateSelector extends Component {
             headerMonthOpts, vdom, x;
 
         if (!me.useAnimations) {
-            me.recreateContent(increment, yearIncrement);
+            me.recreateContent(increment, yearIncrement)
         } else {
             if (!me.isUpdating) {
                 me.isUpdating = true;
@@ -440,7 +440,7 @@ class DateSelector extends Component {
                     headerMonthOpts = me.updateHeaderMonth(increment, yearIncrement, true, data[1]);
 
                     if (yearIncrement !== 0) {
-                        me.updateHeaderYear(increment, true);
+                        me.updateHeaderYear(increment, true)
                     }
 
                     me.createDayViewContent(true, vdom.cn[2].cn[0].cn[0]);
@@ -455,12 +455,12 @@ class DateSelector extends Component {
                         setTimeout(() => {
                             me.changeMonthWrapperCallback(slideDirection);
                             me.updateHeaderMonthWrapperCallback(headerMonthOpts);
-                            me.triggerVdomUpdate();
+                            me.triggerVdomUpdate()
                         }, 300);
                     });
                 });
             } else {
-                me.cacheUpdate();
+                me.cacheUpdate()
             }
         }
     }
@@ -474,12 +474,11 @@ class DateSelector extends Component {
      */
     changeMonthTransitionCallback(opts) {
         let me   = this,
-            vdom = me.vdom,
             {data, slideDirection} = opts,
             x;
 
         x = slideDirection === 'right' ? -data.width : 0;
-        vdom.cn[1].cn[0].style.transform = `translateX(${x}px)`;
+        me.vdom.cn[1].cn[0].style.transform = `translateX(${x}px)`
     }
 
     /**
@@ -488,10 +487,9 @@ class DateSelector extends Component {
      * @protected
      */
     changeMonthWrapperCallback(slideDirection) {
-        let me   = this,
-            vdom = me.vdom;
+        let vdom = this.vdom;
 
-        vdom.cn[1] = vdom.cn[1].cn[0].cn[slideDirection === 'right' ? 1 : 0];
+        vdom.cn[1] = vdom.cn[1].cn[0].cn[slideDirection === 'right' ? 1 : 0]
     }
 
     /**
@@ -502,7 +500,7 @@ class DateSelector extends Component {
             scrollFromTop, style, vdom, y;
 
         if (!me.useAnimations) {
-            me.recreateContent(0, increment);
+            me.recreateContent(0, increment)
         } else {
             if (!me.isUpdating) {
                 me.isUpdating = true;
@@ -540,12 +538,12 @@ class DateSelector extends Component {
 
                         setTimeout(() => {
                             vdom.cn[1] = vdom.cn[1].cn[0].cn[scrollFromTop ? 1 : 0];
-                            me.triggerVdomUpdate();
-                        }, 300);
+                            me.triggerVdomUpdate()
+                        }, 300)
                     });
                 });
             } else {
-                me.cacheUpdate();
+                me.cacheUpdate()
             }
         }
     }
@@ -572,15 +570,15 @@ class DateSelector extends Component {
             day = date.getDay();
 
             if (!me.showWeekends && (day === 0 || day === 6)) {
-                config.removeDom = true;
+                config.removeDom = true
             }
 
             row.cn.push(config);
 
-            date.setDate(date.getDate() + 1);
+            date.setDate(date.getDate() + 1)
         }
 
-        return row;
+        return row
     }
 
     /**
@@ -636,7 +634,7 @@ class DateSelector extends Component {
 
                 if (dateDay === 0 || dateDay === 6) {
                     if (!me.showWeekends) {
-                        config.removeDom = true;
+                        config.removeDom = true
                     }
 
                     config.cls.push('neo-weekend');
@@ -685,37 +683,37 @@ class DateSelector extends Component {
         day = day.toString();
 
         if (day.length < 2) {
-            day = '0' + day;
+            day = '0' + day
         }
 
         month = month.toString();
 
         if (month.length < 2) {
-            month = '0' + month;
+            month = '0' + month
         }
 
-        return this.id + '__' + year + '-' + month + '-' + day;
+        return this.id + '__' + year + '-' + month + '-' + day
     }
 
     /**
      * @returns {Object}
      */
     getCenterContentEl() {
-        return this.vdom.cn[1];
+        return this.vdom.cn[1]
     }
 
     /**
      * @returns {Object}
      */
     getHeaderMonthEl() {
-        return this.vdom.cn[0].cn[1].cn[0];
+        return this.vdom.cn[0].cn[1].cn[0]
     }
 
     /**
      * @returns {Object}
      */
     getHeaderYearEl() {
-        return this.vdom.cn[0].cn[1].cn[1];
+        return this.vdom.cn[0].cn[1].cn[1]
     }
 
     /**
@@ -732,7 +730,7 @@ class DateSelector extends Component {
         // We want to always trigger a change event.
         // Reason: A form.field.Date can have a null value, and we want to select the current date.
         me._value = date;
-        me.afterSetValue(date, null);
+        me.afterSetValue(date, null)
     }
 
     /**
@@ -743,14 +741,14 @@ class DateSelector extends Component {
             cls = data.path[0].cls,
             date, monthIncrement;
 
-             if (cls.includes('neo-cell'))        {me.onCellClick(data);}
-        else if (cls.includes('neo-next-button')) {monthIncrement =  1;}
-        else if (cls.includes('neo-prev-button')) {monthIncrement = -1;}
+             if (cls.includes('neo-cell'))        {me.onCellClick(data)}
+        else if (cls.includes('neo-next-button')) {monthIncrement =  1}
+        else if (cls.includes('neo-prev-button')) {monthIncrement = -1}
 
         if (monthIncrement) {
             date = me.currentDate; // cloned
             date.setMonth(date.getMonth() + monthIncrement);
-            me.value = DateUtil.convertToyyyymmdd(date);
+            me.value = DateUtil.convertToyyyymmdd(date)
         }
     }
 
@@ -765,21 +763,21 @@ class DateSelector extends Component {
             date, monthIncrement, yearIncrement;
 
         if (Math.abs(deltaY) >= Math.abs(deltaX)) {
-                 if (deltaY >=  wheelDelta) {yearIncrement  =  1;}
-            else if (deltaY <= -wheelDelta) {yearIncrement  = -1;}
+                 if (deltaY >=  wheelDelta) {yearIncrement  =  1}
+            else if (deltaY <= -wheelDelta) {yearIncrement  = -1}
         } else {
-                 if (deltaX >=  wheelDelta) {monthIncrement =  1;}
-            else if (deltaX <= -wheelDelta) {monthIncrement = -1;}
+                 if (deltaX >=  wheelDelta) {monthIncrement =  1}
+            else if (deltaX <= -wheelDelta) {monthIncrement = -1}
         }
 
         if (monthIncrement) {
             date = me.currentDate; // cloned
             date.setMonth(date.getMonth() + monthIncrement);
-            me.value = DateUtil.convertToyyyymmdd(date);
+            me.value = DateUtil.convertToyyyymmdd(date)
         } else if (yearIncrement) {
             date = me.currentDate; // cloned
             date.setFullYear(date.getFullYear() + yearIncrement);
-            me.value = DateUtil.convertToyyyymmdd(date);
+            me.value = DateUtil.convertToyyyymmdd(date)
         }
     }
 
@@ -828,9 +826,8 @@ class DateSelector extends Component {
         me.getCenterContentEl().cn = [];
         me.createDayViewContent(true);
 
-        if (syncIds) {
-            me.syncVdomIds()
-        }
+        // using force => we do want to keep the same ids
+        syncIds && me.syncVdomIds(me.vnode, me.vdom, true);
 
         me.triggerVdomUpdate(silent)
     }
@@ -846,9 +843,9 @@ class DateSelector extends Component {
 
             me.isUpdating = true;
 
-            me.promiseUpdate(me.vdom).then(() => {
-                me.isUpdating = false;
-            });
+            me.promiseUpdate().then(() => {
+                me.isUpdating = false
+            })
         }
     }
 
@@ -865,7 +862,6 @@ class DateSelector extends Component {
         if (oldValue !== undefined) {
             let centerEl = me.getCenterContentEl().cn[0],
                 date     = me.currentDate, // cloned
-                vdom     = me.vdom,
                 i        = 0,
                 day, node;
 
@@ -879,15 +875,15 @@ class DateSelector extends Component {
                 day = date.getDay();
 
                 if (!me.showWeekends && (day === 0 || day === 6)) {
-                    node.removeDom = true;
+                    node.removeDom = true
                 } else {
-                    delete node.removeDom;
+                    delete node.removeDom
                 }
 
-                date.setDate(date.getDate() + 1);
+                date.setDate(date.getDate() + 1)
             }
 
-            me[silent ? '_vdom' : 'vdom'] = vdom;
+            !silent && me.update()
         }
     }
 
@@ -909,8 +905,8 @@ class DateSelector extends Component {
 
         if (!me.mounted || !me.useAnimations) {
             monthEl.html = currentMonth;
-            !silent && me.update()
-            return null;
+            !silent && me.update();
+            return null
         } else {
             y = slideDirection === 'top' ? 0 : -monthElDomRect.height;
 
@@ -941,14 +937,14 @@ class DateSelector extends Component {
             headerCenterEl.cn[0].cn[0].cn[slideDirection === 'top' ? 'unshift' : 'push'](headerCenterEl.cn[1]);
             headerCenterEl.cn.splice(1, 1);
 
-            me[silent ? '_vdom' : 'vdom'] = vdom;
+            !silent && me.update();
 
             return {
                 data: monthElDomRect,
                 headerCenterEl,
                 increment,
                 yearIncrement
-            };
+            }
         }
     }
 
@@ -967,7 +963,7 @@ class DateSelector extends Component {
             y;
 
         y = slideDirection === 'top' ? -data.height : 0;
-        headerCenterEl.cn[0].cn[0].style.transform = `translateY(${y}px)`;
+        headerCenterEl.cn[0].cn[0].style.transform = `translateY(${y}px)`
     }
 
     /**
@@ -982,7 +978,7 @@ class DateSelector extends Component {
         let {headerCenterEl, increment, yearIncrement} = opts,
             slideDirection = yearIncrement > 0 ? 'bottom' : yearIncrement < 0 ? 'top' : increment < 0 ? 'top' : 'bottom';
 
-        headerCenterEl.cn[0] = headerCenterEl.cn[0].cn[0].cn[slideDirection === 'top' ? 1 : 0];
+        headerCenterEl.cn[0] = headerCenterEl.cn[0].cn[0].cn[slideDirection === 'top' ? 1 : 0]
     }
 
     /**

package/src/form/field/Base.mjs

@@ -13,8 +13,8 @@ class Base extends Component {
      * @static
      */
     static delayable = {
-        fireChangeEvent    : {type: 'debounce', timer: 300},
-        fireUserChangeEvent: {type: 'debounce', timer: 300}
+        fireChangeEvent    : {type: 'debounce', timer: 1000},
+        fireUserChangeEvent: {type: 'debounce', timer: 1000}
     }
 
     static config = {

package/src/toolbar/Breadcrumb.mjs

@@ -27,6 +27,13 @@ class Breadcrumb extends Toolbar {
          * @member {String[]} baseCls=['neo-breadcrumb-toolbar','neo-toolbar']
          */
         baseCls: ['neo-breadcrumb-toolbar', 'neo-toolbar'],
+        /**
+         * @member {Object} itemDefaults={ntype:'button', ui: 'tertiary'}
+         */
+        itemDefaults: {
+            ntype: 'button',
+            ui   : 'tertiary'
+        },
         /**
          * @member {Neo.data.Store|Object} store_=null
          */

package/src/util/Function.mjs

@@ -1,11 +1,11 @@
 /**
  * Append args instead of prepending them
+ * @param {Function} fn
  * @param {Object} scope
  * @returns {Function}
  */
-export function bindAppend(scope) {
-    const fn   = this,
-          args = [].slice.call(arguments).slice(1);
+export function bindAppend(fn, scope) {
+    const args = [].slice.call(arguments).slice(2);
 
     return function() {
         return fn.apply(scope, [].slice.call(arguments).concat(args))

package/src/util/VDom.mjs

@@ -15,23 +15,23 @@ class VDom extends Base {
 
     /**
      * @param {Object} vdom
-     * @param {Boolean} [removeIds=true]
+     * @param {Boolean} removeIds=true
      * @returns {Object} cloned vdom
      */
     static clone(vdom, removeIds=true) {
         const clone = Neo.clone(vdom, true);
 
         if (removeIds) {
-            delete clone.id;
+            delete clone.id
         }
 
         if (clone.cn) {
             clone.cn.forEach((item, index) => {
-                clone.cn[index] = VDom.clone(item, removeIds);
-            });
+                clone.cn[index] = VDom.clone(item, removeIds)
+            })
         }
 
-        return clone;
+        return clone
     }
 
     /**
@@ -64,39 +64,39 @@ class VDom extends Base {
                     case 'cls':
                         if (typeof value === 'string' && Neo.isArray(vdom[key])) {
                             if (vdom[key].includes(value)) {
-                                matchArray.push(true);
+                                matchArray.push(true)
                             }
                         } else if (typeof value === 'string' && typeof vdom[key] === 'string') {
                             if (vdom[key] === value) {
-                                matchArray.push(true);
+                                matchArray.push(true)
                             }
                         } else if (Neo.isArray(value) && Neo.isArray(vdom[key])) {
                             // todo: either search the vdom array for all keys or compare if the arrays are equal.
-                            throw new Error('findVdomChild: cls matching not supported for target & source types of Arrays');
+                            throw new Error('findVdomChild: cls matching not supported for target & source types of Arrays')
                         }
                         break;
                     case 'style':
                         if (typeof value === 'string' && typeof vdom[key] === 'string') {
                             if (vdom[key] === value) {
-                                matchArray.push(true);
+                                matchArray.push(true)
                             }
                         } else if (Neo.isObject(value) && Neo.isObject(vdom[key])) {
                             Object.entries(value).forEach(([styleKey, styleValue]) => {
                                 if (!(vdom[key].hasOwnProperty(styleKey) && vdom[key][styleKey] === styleValue)) {
-                                    styleMatch = false;
+                                    styleMatch = false
                                 }
                             });
 
                             if (styleMatch) {
-                                matchArray.push(true);
+                                matchArray.push(true)
                             }
                         } else {
-                            throw new Error('findVdomChild: style matching not supported for mixed target & source types (Object VS String)');
+                            throw new Error('findVdomChild: style matching not supported for mixed target & source types (Object VS String)')
                         }
                         break;
                     default:
                         if (vdom[key] === value) {
-                            matchArray.push(true);
+                            matchArray.push(true)
                         }
                         break;
                 }
@@ -118,13 +118,13 @@ class VDom extends Base {
                             parentNode: subChild.parentNode,
                             vdom      : subChild.vdom
                         };
-                        break;
+                        break
                     }
                 }
             }
         }
 
-        return child;
+        return child
     }
 
     /**
@@ -135,7 +135,7 @@ class VDom extends Base {
      */
     static getByFlag(vdom, flag) {
         let node = VDom.findVdomChild(vdom, {flag: flag});
-        return node?.vdom;
+        return node?.vdom
     }
 
     /**
@@ -149,13 +149,13 @@ class VDom extends Base {
 
         childNodes.forEach(childNode => {
             if (childNode.id) {
-                childIds.push(childNode.id);
+                childIds.push(childNode.id)
             }
 
-            childIds = VDom.getChildIds(childNode, childIds);
+            childIds = VDom.getChildIds(childNode, childIds)
         });
 
-        return childIds;
+        return childIds
     }
 
     /**
@@ -169,12 +169,12 @@ class VDom extends Base {
         if (vdom.cn) {
             vdom.cn.forEach(row => {
                 if (row.cn?.[index]) {
-                    columnNodes.push(row.cn[index]);
+                    columnNodes.push(row.cn[index])
                 }
-            });
+            })
         }
 
-        return columnNodes;
+        return columnNodes
     }
 
     /**
@@ -183,7 +183,7 @@ class VDom extends Base {
      * @returns {Array}
      */
     static getColumnNodesIds(vdom, index) {
-        return VDom.getColumnNodes(vdom, index).map(e => e.id);
+        return VDom.getColumnNodes(vdom, index).map(e => e.id)
     }
 
     /**
@@ -197,19 +197,19 @@ class VDom extends Base {
             matchArray = [];
 
             if (vdom.flag === flag) {
-                matchArray.push(vdom);
+                matchArray.push(vdom)
             }
         }
 
         (vdom?.cn || []).forEach(childNode => {
             if (childNode.flag === flag) {
-                matchArray.push(childNode);
+                matchArray.push(childNode)
             }
 
-            matchArray = VDom.getFlags(childNode, flag, matchArray);
+            matchArray = VDom.getFlags(childNode, flag, matchArray)
         });
 
-        return matchArray;
+        return matchArray
     }
 
     /**
@@ -224,7 +224,7 @@ class VDom extends Base {
             len     = vdom.cn?.length || 0;
 
         if (vdom.id === id) {
-            return [];
+            return []
         }
 
         for (; i < len; i++) {
@@ -232,15 +232,15 @@ class VDom extends Base {
 
             if (parents) {
                 parents.push(vdom.cn[i]);
-                break;
+                break
             }
         }
 
         if (topLevel && parents) {
-            parents.push(vdom);
+            parents.push(vdom)
         }
 
-        return parents;
+        return parents
     }
 
     /**
@@ -251,7 +251,7 @@ class VDom extends Base {
      * @returns {Boolean}
      */
     static insertAfterNode(vdom, nodeToInsert, targetNodeId) {
-        return VDom.insertNode(vdom, nodeToInsert, targetNodeId, false);
+        return VDom.insertNode(vdom, nodeToInsert, targetNodeId, false)
     }
 
     /**
@@ -262,7 +262,7 @@ class VDom extends Base {
      * @returns {Boolean}
      */
     static insertBeforeNode(vdom, nodeToInsert, targetNodeId) {
-        return VDom.insertNode(vdom, nodeToInsert, targetNodeId, true);
+        return VDom.insertNode(vdom, nodeToInsert, targetNodeId, true)
     }
 
     /**
@@ -275,7 +275,7 @@ class VDom extends Base {
      */
     static insertNode(vdom, nodeToInsert, targetNodeId, insertBefore) {
         if (Neo.isObject(targetNodeId)) {
-            targetNodeId = targetNodeId.id;
+            targetNodeId = targetNodeId.id
         }
 
         let targetNode = VDom.findVdomChild(vdom, {id: targetNodeId}),
@@ -284,10 +284,10 @@ class VDom extends Base {
         if (targetNode) {
             index = insertBefore ? targetNode.index : targetNode.index + 1;
             targetNode.parentNode.cn.splice(index, 0, nodeToInsert);
-            return true;
+            return true
         }
 
-        return false;
+        return false
     }
 
     /**
@@ -301,10 +301,10 @@ class VDom extends Base {
 
         if (child) {
             child.parentNode.cn.splice(child.index, 1);
-            return true;
+            return true
         }
 
-        return false;
+        return false
     }
 
     /**
@@ -321,7 +321,7 @@ class VDom extends Base {
             childNode;
 
         if (vdom.id === id) {
-            throw new Error('replaceVdomChild: target id matches the root vnode id: ' + id);
+            throw new Error('replaceVdomChild: target id matches the root vnode id: ' + id)
         }
 
         for (; i < len; i++) {
@@ -329,11 +329,11 @@ class VDom extends Base {
 
             if (childNode.id === id) {
                 cn[i] = newChildNode;
-                return true;
+                return true
             }
 
             if (VDom.replaceVdomChild(childNode, id, newChildNode)) {
-                return true;
+                return true
             }
         }
 
@@ -345,16 +345,23 @@ class VDom extends Base {
      * so we need to sync them into the vdom.
      * @param {Neo.vdom.VNode} vnode
      * @param {Object} vdom
+     * @param {Boolean} force=false The force param will enforce overwriting different ids
      */
-    static syncVdomIds(vnode, vdom) {
+    static syncVdomIds(vnode, vdom, force=false) {
         if (vnode && vdom) {
             let childNodes = vdom.cn,
                 cn, i, len;
 
-            // we only want to change vdom ids in case there is not already an own id
-            // (think of adding & removing nodes in parallel)
-            if (!vdom.id && vnode.id) {
-                vdom.id = vnode.id;
+            if (force) {
+                if (vnode.id && vdom.id !== vnode.id) {
+                    vdom.id = vnode.id
+                }
+            } else {
+                // we only want to change vdom ids in case there is not already an own id
+                // (think of adding & removing nodes in parallel)
+                if (!vdom.id && vnode.id) {
+                    vdom.id = vnode.id
+                }
             }
 
             if (childNodes) {
@@ -364,7 +371,7 @@ class VDom extends Base {
 
                 for (; i < len; i++) {
                     if (vnode.childNodes) {
-                        VDom.syncVdomIds(vnode.childNodes[i], cn[i])
+                        VDom.syncVdomIds(vnode.childNodes[i], cn[i], force)
                     }
                 }
             }