neo.mjs 8.30.0 → 8.31.0

package/BACKERS.md

@@ -1,22 +1,22 @@
 # Sponsors & Backers
 
-Truth to be told, the neo.mjs project is in need of sponsors & backers.
+Truth to be told, the Neo.mjs project is in need of sponsors & backers.
 
 As an <a href="./LICENSE">MIT-licensed</a> open source project,
-you can use neo.mjs for free (as long as you stick to the license & copyright notice).
+you can use Neo.mjs for free (as long as you stick to the license & copyright notice).
 
 Prior to the public release, the project was already at <a href=".github/NEOMJS_HISTORY.md">3720 commits</a>.
 
-To get neo.mjs to this point, I spent 3 years of my full and unpaid working time.
+To get Neo.mjs to this point, I spent 3 years of my full and unpaid working time.
 This does not only include many 100h+ weeks and several sleepless nights,
 but I also burned most of my personal savings to get here.
 
-I did this, since I truly and deeply believe that neo.mjs has the potential to start a new era of UI development.
+I did this, since I truly and deeply believe that Neo.mjs has the potential to start a new era of UI development.
 
 The current version is just a fraction of a much bigger picture I have in mind.
 Trust me, it is beautiful :)
 
-I can definitely say that I did use several other UI frameworks in the past and that neo.mjs boosted my productivity
+I can definitely say that I did use several other UI frameworks in the past and that Neo.mjs boosted my productivity
 to an entire new level.
 
 This is something I would love to share with you!
@@ -29,35 +29,35 @@ By default, the main Readme will only include sponsors starting at the Gold tier
 (*) Only valid as long as the sponsorship stays active.
 
 # What will I sponsor?
-Obviously the continuing of the development for the neo.mjs framework.
+Obviously the continuing of the development for the Neo.mjs framework.
 To get the idea of what this means in detail, please take a look at the: <a href=".github/VISION.md">Project Vision</a>.
 
-# Why should I sponsor neo.mjs?
+# Why should I sponsor Neo.mjs?
 I am in need to make up for the invested time, which means that going forward,
 I have to spend a lot of my time on billable projects.
-Of course I will do my best to continue pushing neo.mjs in my free time.
+Of course I will do my best to continue pushing Neo.mjs in my free time.
 
-With active sponsors I could invest more time into neo.mjs,
+With active sponsors I could invest more time into Neo.mjs,
 which means that you will get new features, guides and bug-fixes a lot faster.
 
 # For developers:
 You can select a Backer tier ($10 / month), which would equal a cup of coffee for me every month (after taxes).
-This will not cover my living costs (unless neo.mjs goes viral), but it does have an impact on
+This will not cover my living costs (unless Neo.mjs goes viral), but it does have an impact on
 my motivation for sure.
 
 # For companies:
 Starting at the bronze tier (special offer), you will be able to place your company logo on the main repository landing page (Readme.md).
-This will have a high impact on the neo.mjs community and make it easier for you
-to find neo.mjs developers in the future.
+This will have a high impact on the Neo.mjs community and make it easier for you
+to find Neo.mjs developers in the future.
 
 Obviously, sponsoring open source projects in general will increase your companies reputation.
 
-As soon as the neo.mjs community grows, it will also increase your company visibility in a good way.
+As soon as the Neo.mjs community grows, it will also increase your company visibility in a good way.
 
-Please make sure to create a feature request ticket inside the neo.mjs <a href="../../issues">Issues Tracker</a>
+Please make sure to create a feature request ticket inside the Neo.mjs <a href="../../issues">Issues Tracker</a>
 after signing a sponsor program to provide your company logo!
 
-### Thanks a lot for your support of the neo.mjs project!<br/>
+### Thanks a lot for your support of the Neo.mjs project!<br/>
 <a href="https://github.com/sponsors/tobiu">Sponsor Tobias Uhlig</a>
 
 <br><br>

package/CONTRIBUTING.md

@@ -1,15 +1,15 @@
-# neo.mjs Contributing Guide
-We are very excited that you are interested in contributing to neo.mjs.<br>
+# Neo.mjs Contributing Guide
+We are very excited that you are interested in contributing to Neo.mjs.<br>
 No worries, you don't need to be a guru, ninja or rockstar to support the project.
 
 ## What you can do to help:
 
-### 1.  neo.mjs just got released, so the most important thing right now is to get more eyes on the project.
+### 1.  Neo.mjs just got released, so the most important thing right now is to get more eyes on the project.
 1. Add a star to this repository. Ok, this one was easy. Thank you!
-2. Tell your friends about neo.mjs.
+2. Tell your friends about Neo.mjs.
 3. Write blog posts or post on social media (Facebook, LinkedIn, Twitter, etc.)
 4. Please stick to our <a href=".github/CODE_OF_CONDUCT.md">Code of Conduct</a>
-5. Interested to see a neo.mjs session at a developer conference? Definitely possible. Just reach out!
+5. Interested to see a Neo.mjs session at a developer conference? Definitely possible. Just reach out!
 
 ### 2.  Use the issues tracker
 1. In case you got an idea for a new feature
@@ -17,9 +17,9 @@ No worries, you don't need to be a guru, ninja or rockstar to support the projec
     1. Ideally, you create a new breaking test inside the tests folder.
     This saves a lot of time and ensures the bug will stay fixed once the ticket is resolved.
 3. Please like or comment on current tickets.
-    This is a great help to figure out which tickets are the most important ones for the neo.mjs community.
+    This is a great help to figure out which tickets are the most important ones for the Neo.mjs community.
 
-### 3.  Contribute to the neo.mjs code base
+### 3.  Contribute to the Neo.mjs code base
 1. Please ***always*** create a new issue inside our <a href="../../issues">Issues Tracker</a> first and wait for approval.
    This ensures that your idea fits the scope of the project and makes it less likely to get a rejected PR.
    We will do our best to reply to new tickets within 7d max. In case we don't, feel free to bump the ticket.
@@ -27,12 +27,12 @@ No worries, you don't need to be a guru, ninja or rockstar to support the projec
    Otherwise multiple contributors could work on the same item in parallel.
 3. Please make sure that pull requests are always related to an issue inside our <a href="../../issues">Issues Tracker</a>.
 4. Please create PRs for the dev branch and not for master.
-5. Please do not copy code from other frameworks / libraries. So far, the entire neo.mjs code base is written from scratch.
+5. Please do not copy code from other frameworks / libraries. So far, the entire Neo.mjs code base is written from scratch.
     1. It is simply impossible to verify if contributed code is self-written.
     2. Adding new npm packages => dependencies / devDependencies is fine, in case there are no licensing conflicts.
 6. Refer to the <a href="./.github/CODEBASE_OVERVIEW.md">codebase overview</a> to understand how our repository is structured.
 
-### 4.  In case you created a nice app or component using neo.mjs, please let us know about it.
+### 4.  In case you created a nice app or component using Neo.mjs, please let us know about it.
 1.  We are always interested to feature client projects in blog posts or on social media.
 
 <br><br>

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-03-07",
+      "datePublished": "2025-03-09",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.30.0'
+                html  : 'v8.31.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/grid/animatedRowSorting/MainModel.mjs

@@ -0,0 +1,40 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.grid.animatedRowSorting.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.animatedRowSorting.MainModel'
+         * @protected
+         */
+        className: 'Neo.examples.grid.animatedRowSorting.MainModel',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'country',
+            type: 'String'
+        }, {
+            name: 'firstname',
+            type: 'String'
+        }, {
+            name: 'id',
+            type: 'Int'
+        }, {
+            name: 'lastname',
+            type: 'String'
+        }, {
+            name: 'progress',
+            type: 'Int'
+        }],
+        /**
+         * @member {Boolean} trackModifiedFields=true
+         */
+        trackModifiedFields: true
+    }
+}
+
+export default Neo.setupClass(MainModel);

package/examples/grid/animatedRowSorting/MainStore.mjs

@@ -0,0 +1,36 @@
+import Model from './MainModel.mjs';
+import Store from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.grid.animatedRowSorting.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static config = {
+        className: 'Neo.examples.grid.animatedRowSorting.MainStore',
+        model    : Model,
+
+        data: [
+            {country : 'DE', firstname: 'Max',     id: 1, lastname : 'Johnson',  progress :  50},
+            {country : 'UK', firstname: 'Paul',    id: 2, lastname : 'Walker',   progress :  10},
+            {country : 'US', firstname: 'Sam',     id: 3, lastname : 'Anderson', progress :  90},
+            {country : 'GR', firstname: 'William', id: 4, lastname : 'Wilson',   progress :  30},
+            {country : 'AT', firstname: 'Carol',   id: 5, lastname : 'Jackson',  progress :  70},
+            {country : 'NL', firstname: 'Amanda',  id: 6, lastname : 'King',     progress : 100},
+            {country : 'FR', firstname: 'Sarah',   id: 7, lastname : 'Scott',    progress :  35}
+        ],
+
+        filters: [{
+            property: 'firstname',
+            operator: 'like',
+            value   : null
+        }],
+
+        sorters: [{
+            property : 'id',
+            direction: 'ASC'
+        }]
+    }
+}
+
+export default Neo.setupClass(MainStore);

package/examples/grid/animatedRowSorting/Viewport.mjs

@@ -0,0 +1,87 @@
+import BaseViewport  from '../../../src/container/Viewport.mjs';
+import GridContainer from '../../../src/grid/Container.mjs';
+import MainStore     from './MainStore.mjs';
+import NumberField   from '../../../src/form/field/Number.mjs';
+import Toolbar       from '../../../src/toolbar/Base.mjs';
+
+/**
+ * @class Neo.examples.grid.animatedRowSorting.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.grid.animatedRowSorting.Viewport'
+         * @protected
+         */
+        className: 'Neo.examples.grid.animatedRowSorting.Viewport',
+        /**
+         * @member {Object} style={padding:'1em'}
+         */
+        style: {padding: '1em'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Toolbar,
+            flex  : 'none',
+            style : {marginBottom: '1em', maxWidth: 'fit-content'},
+
+            items : [{
+                ntype        : 'textfield',
+                labelPosition: 'inline',
+                labelText    : 'Firstname',
+                listeners    : {change: 'up.onFirstnameFieldChange'},
+                width        : 120
+            },{
+                module       : NumberField,
+                clearable    : false,
+                labelPosition: 'inline',
+                labelText    : 'Transition Duration',
+                listeners    : {change: 'up.onTransitionDurationFieldChange'},
+                maxValue     : 1000,
+                minValue     : 200,
+                stepSize     : 100,
+                style        : {marginLeft: '1em'},
+                value        : 500,
+                width        : 180
+            }]
+        }, {
+            module   : GridContainer,
+            reference: 'grid',
+            store    : MainStore,
+
+            columnDefaults: {
+                width: 200
+            },
+
+            viewConfig: {
+                animatedRowSorting: true
+            },
+
+            columns: [
+                {dataField: 'id',        text: 'Id', width: 100},
+                {dataField: 'firstname', text: 'Firstname'},
+                {dataField: 'lastname',  text: 'Lastname'},
+                {dataField: 'progress',  text: 'Progress', type: 'progress'},
+                {dataField: 'country',   text: 'Country'}
+            ]
+        }]
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFirstnameFieldChange(data) {
+        this.getReference('grid').store.getFilter('firstname').value = data.value
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onTransitionDurationFieldChange(data) {
+        this.getReference('grid').view.getPlugin('grid-animate-rows').transitionDuration = data.value
+    }
+}
+
+export default Neo.setupClass(Viewport);

package/examples/grid/animatedRowSorting/app.mjs

@@ -0,0 +1,6 @@
+import Viewport from './Viewport.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: Viewport,
+    name    : 'Neo.examples.grid.animatedRowSorting'
+})

package/examples/grid/animatedRowSorting/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Grid: Animated Row Sorting</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/grid/animatedRowSorting/neo-config.json

@@ -0,0 +1,8 @@
+{
+    "appPath"         : "examples/grid/animatedRowSorting/app.mjs",
+    "basePath"        : "../../../",
+    "environment"     : "development",
+    "mainPath"        : "./Main.mjs",
+    "mainThreadAddons": ["DragDrop", "Navigator", "ResizeObserver", "Stylesheet"],
+    "themes"          : ["neo-theme-dark", "neo-theme-light"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.30.0",
+    "version": "8.31.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -48,7 +48,7 @@
     "homepage": "https://neomjs.com/",
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.7.2",
-        "autoprefixer": "^10.4.20",
+        "autoprefixer": "^10.4.21",
         "chalk": "^5.4.1",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^13.1.0",
@@ -56,7 +56,7 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
-        "inquirer": "^12.4.2",
+        "inquirer": "^12.4.3",
         "marked": "^15.0.7",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",

package/src/DefaultConfig.mjs

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

package/src/collection/Base.mjs

@@ -360,7 +360,8 @@ class Collection extends Base {
      * @protected
      */
     cacheUpdate(opts) {
-        console.log('cacheUpdate', opts, this[toAddArray]);
+        // disabled for now
+        // console.log('cacheUpdate', opts, this[toAddArray]);
         return;
 
         let me            = this,

package/src/data/Store.mjs

@@ -400,7 +400,7 @@ class Store extends Base {
     onCollectionMutate(opts) {
         let me = this;
 
-        if (me.configsApplied && !me.isLoading) {
+        if (me.isConstructed && !me.isLoading) {
             me.fire('load', me.items)
         }
     }
@@ -411,9 +411,8 @@ class Store extends Base {
     onCollectionSort() {
         let me = this;
 
-        if (me.configsApplied) {
-            // console.log('onCollectionSort', me.collection.items);
-            // me.fire('load', me.items);
+        if (me.isConstructed) {
+            //me.fire('load', me.items)
         }
     }
 
@@ -426,14 +425,18 @@ class Store extends Base {
         let me = this;
 
         if (me.data) {
-            me.afterSetData(me.data);
+            me.afterSetData(me.data)
         }
 
-        if (me.autoLoad) {
-            me.timeout(100).then(() => { // todo
+        // Being constructed does not mean that related afterSetStore() methods got executed
+        // => break the sync flow to ensure potential listeners got applied
+        Promise.resolve().then(() => {
+            if (me.getCount() > 0) {
+                me.fire('load', me.items)
+            } else if (me.autoLoad) {
                 me.load()
-            })
-        }
+            }
+        })
     }
 
     /**

package/src/grid/Container.mjs

@@ -322,6 +322,29 @@ class GridContainer extends BaseContainer {
         }
     }
 
+    /**
+     * Triggered after the store config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetStore(value, oldValue) {
+        let me        = this,
+            listeners = {
+                filter: me.onStoreFilter,
+                load  : me.onStoreLoad,
+                scope : me
+            };
+
+        value   ?.on(listeners);
+        oldValue?.un(listeners);
+
+        // in case we dynamically change the store, the view needs to get the new reference
+        if (me.view) {
+            me.view.store = value
+        }
+    }
+
     /**
      * Triggered before the columns config gets changed.
      * @param {Object[]} value
@@ -348,36 +371,13 @@ class GridContainer extends BaseContainer {
 
     /**
      * Triggered before the store config gets changed.
-     * @param {Neo.data.Store} value
-     * @param {Neo.data.Store} oldValue
+     * @param {Object|Neo.data.Store|null} value
+     * @param {Neo.data.Store}             oldValue
      * @protected
      */
     beforeSetStore(value, oldValue) {
-        oldValue?.destroy();
-
         if (value) {
-            let me = this,
-
-                listeners = {
-                    filter      : me.onStoreFilter,
-                    load        : me.onStoreLoad,
-                    recordChange: me.onStoreRecordChange,
-                    scope       : me
-                };
-
-            if (value instanceof Store) {
-                value.on(listeners);
-                value.getCount() > 0 && me.onStoreLoad(value.items)
-            } else {
-                value = ClassSystemUtil.beforeSetInstance(value, Store, {
-                    listeners
-                })
-            }
-
-            // in case we dynamically change the store, the view needs to get the new reference
-            if (me.view) {
-                me.view.store = value
-            }
+            value = ClassSystemUtil.beforeSetInstance(value, Store)
         }
 
         return value
@@ -476,24 +476,14 @@ class GridContainer extends BaseContainer {
         })
     }
 
-    /**
-     * @param {Array} inputData
-     */
-    createViewData(inputData) {
-        let me = this;
-
-        me.getVdomRoot()['aria-rowcount'] = inputData.length + 2; // 1 based & the header row counts as well
-        me.update();
-
-        me.view.createViewData()
-    }
-
     /**
      * @param args
      */
     destroy(...args) {
         let me = this;
 
+        me.store = null; // remove the listeners
+
         me.scrollManager.destroy();
 
         me.mounted && Neo.main.addon.ResizeObserver.unregister({
@@ -570,14 +560,14 @@ class GridContainer extends BaseContainer {
 
         me.store.sort(opts);
         me.removeSortingCss(opts.property);
-        me.onStoreLoad(me.store.items)
+        me.view.onStoreLoad()
     }
 
     /**
      *
      */
     onStoreFilter() {
-        this.onStoreLoad(this.store.items)
+        this.updateRowCount()
     }
 
     /**
@@ -587,37 +577,13 @@ class GridContainer extends BaseContainer {
     onStoreLoad(data) {
         let me = this;
 
-        if (me.rendered) {
-            me.createViewData(data);
-
-            me.timeout(50).then(() => {
-                Neo.main.DomAccess.scrollTo({
-                    direction: 'top',
-                    id       : me.view.vdom.id,
-                    value    : 0
-                })
-            })
+        me.updateRowCount();
 
-            if (me.store.sorters.length < 1) {
-                me.removeSortingCss()
-            }
+        if (me.store.sorters?.length < 1) {
+            me.removeSortingCss()
         }
     }
 
-    /**
-     * Gets triggered after changing the value of a record field.
-     * E.g. myRecord.foo = 'bar';
-     * @param {Object} opts
-     * @param {String} opts.field The name of the field which got changed
-     * @param {Neo.data.Model} opts.model The model instance of the changed record
-     * @param {*} opts.oldValue
-     * @param {Object} opts.record
-     * @param {*} opts.value
-     */
-    onStoreRecordChange(opts) {
-        this.view.onStoreRecordChange(opts)
-    }
-
     /**
      * @param {Boolean} silent=false
      * @returns {Promise<void>}
@@ -701,6 +667,16 @@ class GridContainer extends BaseContainer {
             })
         }
     }
+
+    /**
+     * @param {Boolean} silent=false
+     */
+    updateRowCount(silent=false) {
+        let me = this;
+
+        this.getVdomRoot()['aria-rowcount'] = me.store.getCount() + 2; // 1 based & the header row counts as well
+        !silent && this.update()
+    }
 }
 
 export default Neo.setupClass(GridContainer);

package/src/grid/View.mjs

@@ -21,6 +21,10 @@ class GridView extends Component {
          * @protected
          */
         ntype: 'grid-view',
+        /**
+         * @member {Boolean} animatedRowSorting_=false
+         */
+        animatedRowSorting_: false,
         /**
          * Internal flag. Gets calculated when mounting the grid.Container
          * @member {Number} availableHeight_=0
@@ -93,6 +97,11 @@ class GridView extends Component {
          * @protected
          */
         mountedRows: [0, 0],
+        /**
+         * Optional config values for Neo.grid.plugin.AnimateRows
+         * @member {Object} pluginAnimateRowsConfig=null
+         */
+        pluginAnimateRowsConfig: null,
         /**
          * @member {String} role='rowgroup'
          */
@@ -204,6 +213,30 @@ class GridView extends Component {
         }])
     }
 
+    /**
+     * Triggered after the animatedRowSorting config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetAnimatedRowSorting(value, oldValue) {
+        if (value && !this.getPlugin('grid-animate-rows')) {
+            import('./plugin/AnimateRows.mjs').then(module => {
+                let me      = this,
+                    plugins = me.plugins || [];
+
+                plugins.push({
+                    module  : module.default,
+                    appName : me.appName,
+                    windowId: me.windowId,
+                    ...me.pluginAnimateRowsConfig
+                });
+
+                me.plugins = plugins
+            })
+        }
+    }
+
     /**
      * Triggered after the availableHeight config got changed
      * @param {Number} value
@@ -364,6 +397,25 @@ class GridView extends Component {
         oldValue !== undefined && this.createViewData()
     }
 
+    /**
+     * Triggered after the store config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetStore(value, oldValue) {
+        let me        = this,
+            listeners = {
+                filter      : me.onStoreFilter,
+                load        : me.onStoreLoad,
+                recordChange: me.onStoreRecordChange,
+                scope       : me
+            };
+
+        oldValue?.un(listeners);
+        value   ?.on(listeners);
+    }
+
     /**
      * @param {Object} data
      * @param {String} [data.cellId]
@@ -608,7 +660,8 @@ class GridView extends Component {
      * @param args
      */
     destroy(...args) {
-        this.store = null;
+        this.store = null; // remove the listeners
+
         super.destroy(...args)
     }
 
@@ -849,6 +902,33 @@ class GridView extends Component {
         this.fireRowEvent(data, 'rowDoubleClick')
     }
 
+    /**
+     *
+     */
+    onStoreFilter() {
+        this.onStoreLoad()
+    }
+
+    /**
+     * @param {Object[]} data
+     * @protected
+     */
+    onStoreLoad(data) {
+        let me = this;
+
+        me.createViewData();
+
+        if (me.mounted) {
+            me.timeout(50).then(() => {
+                Neo.main.DomAccess.scrollTo({
+                    direction: 'top',
+                    id       : me.vdom.id,
+                    value    : 0
+                })
+            })
+        }
+    }
+
     /**
      * @param {Object}         data
      * @param {Object[]}       data.fields Each field object contains the keys: name, oldValue, value

package/src/grid/column/Component.mjs

@@ -84,7 +84,6 @@ class Component extends Column {
             delete componentConfig.module;
             delete componentConfig.ntype;
 
-
             componentConfig[recordProperty] = record;
 
             component.set(componentConfig)

package/src/grid/header/Button.mjs

@@ -176,7 +176,7 @@ class Button extends BaseButton {
         let me    = this,
             {cls} = me;
 
-        if (value === true) {
+        if (value) {
             NeoArray.remove(cls, 'neo-sort-hidden');
 
             me.addDomListeners({
@@ -211,7 +211,6 @@ class Button extends BaseButton {
      */
     destroy(...args) {
         this.filterField?.destroy();
-
         super.destroy(...args)
     }
 

package/src/grid/plugin/AnimateRows.mjs

@@ -0,0 +1,234 @@
+import Base     from '../../plugin/Base.mjs';
+import CssUtil  from '../../util/Css.mjs';
+import NeoArray from '../../util/Array.mjs';
+
+/**
+ * @class Neo.grid.plugin.AnimateRows
+ * @extends Neo.plugin.Base
+ */
+class AnimateRows extends Base {
+    /**
+     * Valid values for transitionEasing
+     * @member {String[]} transitionEasings=['ease','ease-in','ease-out','ease-in-out','linear']
+     * @protected
+     * @static
+     */
+    static transitionEasings = ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear']
+
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.plugin.AnimateRows'
+         * @protected
+         */
+        className: 'Neo.grid.plugin.AnimateRows',
+        /**
+         * @member {String} ntype='plugin-grid-animate-rows'
+         * @protected
+         */
+        ntype: 'plugin-grid-animate-rows',
+        /**
+         * Time in ms. Please ensure to match the CSS based value, in case you change the default.
+         * @member {Number} transitionDuration_=500
+         */
+        transitionDuration_: 500,
+        /**
+         * The easing used for fadeIn, fadeOut and position changes.
+         * Valid values: 'ease','ease-in','ease-out','ease-in-out','linear'
+         * @member {String} transitionEasing_='ease-out'
+         */
+        transitionEasing_: 'ease-out'
+    }
+
+    /**
+     * The id of the setTimeout() call which gets triggered after a transition is done.
+     * @member {Number|null} transitionTimeoutId=null
+     * @protected
+     */
+    transitionTimeoutId = null
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me      = this,
+            {owner} = me,
+            {store} = owner;
+
+        // Remove the previous view listeners
+        owner.store = null;
+
+        owner.onStoreFilter = me.onStoreFilter.bind(me);
+        owner.onStoreLoad   = me.onStoreLoad  .bind(me);
+
+        // Add the re-bound listeners
+        owner.store = store;
+
+        me.updateTransitionDetails()
+    }
+
+    /**
+     * Triggered after the transitionDuration config got changed.
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetTransitionDuration(value, oldValue) {
+        this.isConstructed && this.updateTransitionDetails(Neo.isNumber(oldValue))
+    }
+
+    /**
+     * Triggered after the transitionEasing config got changed.
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetTransitionEasing(value, oldValue) {
+        this.isConstructed && this.updateTransitionDetails(!!oldValue)
+    }
+
+    /**
+     * Triggered before the transitionEasing config gets changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetTransitionEasing(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'transitionEasing')
+    }
+
+    /**
+     * @param {Object} args
+     */
+    destroy(...args) {
+        CssUtil.deleteRules(this.appName, `#${this.owner.id} .neo-grid-row`);
+        super.destroy(...args)
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Boolean} data.isFiltered
+     * @param {Object[]} data.items
+     * @param {Object[]} data.oldItems
+     * @param {Neo.data.Store} data.scope
+     */
+    onStoreFilter(data) {
+        this.updateView()
+    }
+
+    /**
+     * @param {Object[]} data
+     * @protected
+     */
+    onStoreLoad(data) {
+        this.updateView()
+    }
+
+    /**
+     * We do not want to apply the style to each list item itself,
+     * so we are using Neo.util.Css
+     * @param {Boolean} deleteRule=false
+     * @protected
+     */
+    async updateTransitionDetails(deleteRule=false) {
+        let me       = this,
+            duration = me.transitionDuration,
+            easing   = me.transitionEasing,
+            {id}     = me.owner;
+
+        if (deleteRule) {
+            await CssUtil.deleteRules(me.appName, `#${id} .neo-grid-row`)
+        }
+
+        CssUtil.insertRules(me.appName, [
+            `#${id} .neo-grid-row {`,
+                'transition:',
+                    `background-color ${duration}ms ${easing},`,
+                    `opacity ${duration}ms ${easing},`,
+                    `transform ${duration}ms ${easing}`,
+            '}'
+        ].join(''))
+    }
+
+    /**
+     *
+     */
+    updateView() {
+        let me            = this,
+            {owner}       = me,
+            {mountedRows} = owner,
+            addedRows     = [],
+            hasChange     = false,
+            map           = {},
+            rowsContainer = owner.getVdomRoot().cn,
+            id, mapItem, record, row, rowIndex, transform;
+
+        rowsContainer.forEach(row => {
+            map[row.id] = row
+        });
+
+        // Creates the new start & end indexes inside mountedRows
+        owner.updateMountedAndVisibleRows();
+
+        for (rowIndex=mountedRows[0]; rowIndex < mountedRows[1]; rowIndex++) {
+            record  = owner.store.getAt(rowIndex);
+            id      = owner.getRowId(record, rowIndex)
+            mapItem = map[id];
+
+            if (mapItem) {
+                // Inside the map (previous state) & vdom => move OP
+                transform = `translate(0px, ${rowIndex * owner.rowHeight}px)`;
+
+                if (mapItem.style.transform !== transform) {
+                    mapItem.style.opacity   = .9; // slightly less than 1 to see visual overlays while moving
+                    mapItem.style.transform = transform;
+                    NeoArray.toggle(mapItem.cls, 'neo-even', rowIndex % 2 !== 0);
+                    hasChange = true
+                }
+
+                delete map[id]
+            } else {
+                // Inside the vdom, but not the map => insert OP
+                row = owner.createRow({record, rowIndex});
+
+                row.style.opacity = 0;
+
+                addedRows    .push(row);
+                rowsContainer.push(row);
+
+                owner.updateDepth = -1; // Added rows might contain components
+                hasChange = true
+            }
+        }
+
+        // Only rows which need to get removed are still inside the map
+        Object.values(map).forEach(row => {
+            row.style.opacity = 0;
+            hasChange = true
+        });
+
+        if (hasChange) {
+            clearTimeout(me.transitionTimeoutId);
+
+            owner.promiseUpdate().then(() => {
+                if (addedRows.length > 0) {
+                    // Added rows need a 2nd DOM update to change the opacity from 0 to 1.
+                    // If we added them with 1 directly, there would not be a fade-in transition.
+                    addedRows.forEach(row => {
+                        row.style.opacity = 1
+                    });
+
+                    owner.update()
+                }
+            });
+
+            me.transitionTimeoutId = setTimeout(() => {
+                me.transitionTimeoutId = null;
+                owner.createViewData()
+            }, me.transitionDuration)
+        }
+    }
+}
+
+export default Neo.setupClass(AnimateRows);

package/src/list/plugin/Animate.mjs

@@ -80,7 +80,7 @@ class Animate extends Base {
         owner.onStoreFilter = me.onStoreFilter.bind(me);
         owner.onStoreSort   = me.onStoreSort  .bind(me);
 
-        this.updateTransitionDetails(false)
+        this.updateTransitionDetails()
     }
 
     /**
@@ -152,6 +152,14 @@ class Animate extends Base {
         return item
     }
 
+    /**
+     * @param {Object} args
+     */
+    destroy(...args) {
+        CssUtil.deleteRules(this.appName, `#${this.owner.id} .neo-list-item`);
+        super.destroy(...args)
+    }
+
     /**
      * @param {Object} record
      * @param {Number} index
@@ -412,18 +420,19 @@ class Animate extends Base {
     }
 
     /**
-     * We do not want to apply the style to each list item itself,
-     * so we are using Neo.util.Css
-     * @param {Boolean} deleteRule
+     * We do not want to apply the style to each list item itself, so we are using Neo.util.Css
+     * @param {Boolean} deleteRule=false
      * @protected
      */
-    updateTransitionDetails(deleteRule) {
+    async updateTransitionDetails(deleteRule=false) {
         let me       = this,
             duration = me.transitionDuration,
             easing   = me.transitionEasing,
-            id       = me.owner.id;
+            {id}     = me.owner;
 
-        deleteRule && CssUtil.deleteRules(me.appName, `#${id} .neo-list-item`);
+        if (deleteRule) {
+            await CssUtil.deleteRules(me.appName, `#${id} .neo-list-item`)
+        }
 
         CssUtil.insertRules(me.appName, [
             `#${id} .neo-list-item {`,

package/src/worker/Manager.mjs

@@ -295,18 +295,16 @@ class Manager extends Base {
 
     /**
      * Handler method for worker message events
-     * @param {Object} e
+     * @param {Object} event
      */
-    onWorkerMessage(e) {
+    onWorkerMessage(event) {
         let me       = this,
-            {data}   = e,
+            {data}   = event,
             transfer = null,
             promise;
 
         const {action, destination: dest, replyId} = data;
 
-        // console.log('Main: Incoming Worker message: ' + data.origin + ':' + action, data);
-
         me.fire('message:'+action, data);
 
         if (action === 'reply') {
@@ -317,14 +315,14 @@ class Manager extends Base {
                     data.data.autoMount  && me.fire('automount',  data);
                     data.data.updateVdom && me.fire('updateVdom', data);
 
-                    // we want to delay the message until the rendering queue has processed it
-                    // see: https://github.com/neomjs/neo/issues/2864
+                    // We want to delay the message until the rendering queue has processed it
+                    // See: https://github.com/neomjs/neo/issues/2864
                     me.promiseForwardMessage(data).then(msgData => {
                         me.sendMessage(msgData.destination, msgData)
                     })
                 }
             } else {
-                if (data.destination === 'main') {
+                if (dest === 'main') {
                     data = data.data
                 }