neo.mjs 3.0.0 → 3.0.4

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -166,9 +166,7 @@ class MainContainerController extends ComponentController {
         let me = this;
 
         Neo.Main.getWindowData().then(winData => {
-            Neo.main.DomAccess.getBoundingClientRect({
-                id: [me.getReference(containerReference).id]
-            }).then(data => {
+            me.component.getDomRect(me.getReference(containerReference).id).then(data => {
                 let {height, left, top, width} = data[0];
 
                 height -= 50; // popup header in Chrome
@@ -178,7 +176,7 @@ class MainContainerController extends ComponentController {
                 Neo.Main.windowOpen({
                     url           : `../${url}/index.html`,
                     windowFeatures: `height=${height},left=${left},top=${top},width=${width}`,
-                    windowName    : windowName
+                    windowName
                 });
             });
         });
@@ -371,13 +369,11 @@ class MainContainerController extends ComponentController {
     onComponentConstructed() {
         super.onComponentConstructed();
 
-        if (!Neo.config.hash) {
-            this.onHashChange({
-                country   : 'all',
-                hash      : {mainview: 'table'},
-                hashString: 'mainview=table'
-            }, null);
-        }
+        !Neo.config.hash && this.onHashChange({
+            country   : 'all',
+            hash      : {mainview: 'table'},
+            hashString: 'mainview=table'
+        }, null);
     }
 
     /**
@@ -611,16 +607,16 @@ class MainContainerController extends ComponentController {
         } else {
             [component.appName, ...me.connectedApps].forEach(appName => {
                 Neo.main.addon.Stylesheet.swapStyleSheet({
-                    appName: appName,
-                    href   : href,
-                    id     : 'neo-theme'
+                    appName,
+                    href,
+                    id: 'neo-theme'
                 });
             });
         }
 
         button.set({
-            iconCls: iconCls,
-            text   : buttonText
+            iconCls,
+            text: buttonText
         });
 
         if (mapView) {

package/apps/website/data/blog.json

@@ -1,4 +1,17 @@
 [
+    {
+        "author"      : "Tobias Uhlig",
+        "authorImage" : "author_TobiasUhlig.jpeg",
+        "date"        : "Dec 15, 2021",
+        "id"          : 47,
+        "image"       : "resolving-pitfalls-of-the-ecmascript-class-system.png",
+        "name"        : "Resolving pitfalls of the ECMAScript class system",
+        "provider"    : "Medium",
+        "publisher"   : "ITNEXT",
+        "selectedInto": [],
+        "type"        : "Blog Post",
+        "url"         : "https://itnext.io/resolving-pitfalls-of-the-ecmascript-class-system-856024218399?source=friends_link&sk=9733342654c50d8d618671b754089e1d"
+    },
     {
         "author"      : "Tobias Uhlig",
         "authorImage" : "author_TobiasUhlig.jpeg",

package/examples/list/animate/List.mjs

@@ -32,13 +32,15 @@ class List extends BaseList {
      * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
      */
     createItemContent(record, index) {
+        let id = this.getItemId(record.id);
+
         return [
-            {cls: ['neo-list-item-content'], cn: [
-                {tag: 'img', src: `../../../resources/examples/${record.image}`},
-                {cls: ['neo-list-item-text'], cn: [
-                    {html: record.firstname},
-                    {cls: ['neo-lastname'], html: record.lastname},
-                    {cls: ['neo-is-online'], removeDom: !record.isOnline}
+            {cls: ['neo-list-item-content'], id: `${id}__content`, cn: [
+                {tag: 'img', id: `${id}__image`, src: `../../../resources/examples/${record.image}`},
+                {cls: ['neo-list-item-text'], id: `${id}__content_wrapper`, cn: [
+                    {html: record.firstname, id: `${id}__firstname`},
+                    {cls: ['neo-lastname'],  id: `${id}__lastname`, html: record.lastname},
+                    {cls: ['neo-is-online'], id: `${id}__isonline`, removeDom: !record.isOnline}
                 ]}
             ]}
         ];

package/examples/list/animate/MainContainer.mjs

@@ -1,8 +1,10 @@
-import CheckBox  from '../../../src/form/field/CheckBox.mjs';
-import List      from './List.mjs';
-import MainStore from './MainStore.mjs';
-import Toolbar   from '../../../src/container/Toolbar.mjs';
-import Viewport  from '../../../src/container/Viewport.mjs';
+import CheckBox    from '../../../src/form/field/CheckBox.mjs';
+import List        from './List.mjs';
+import MainStore   from './MainStore.mjs';
+import NumberField from '../../../src/form/field/Number.mjs';
+import TextField   from '../../../src/form/field/Text.mjs';
+import Toolbar     from '../../../src/container/Toolbar.mjs';
+import Viewport    from '../../../src/container/Viewport.mjs';
 
 /**
  * @class Neo.examples.list.animate.MainContainer
@@ -12,7 +14,8 @@ class MainContainer extends Viewport {
     static getConfig() {return {
         className: 'Neo.examples.list.animate.MainContainer',
         autoMount: true,
-        layout   : {ntype: 'vbox', align: 'stretch'}
+        layout   : {ntype: 'vbox', align: 'stretch'},
+        sortBy   : 'firstname'
     }}
 
     /**
@@ -36,11 +39,16 @@ class MainContainer extends Viewport {
                 ntype: 'label',
                 text : 'Sort by'
             }, {
-                handler: me.changeSorting.bind(me, 'firstname'),
-                text   : 'Firstname'
+                field       : 'firstname',
+                handler     : me.changeSorting.bind(me, 'firstname'),
+                iconCls     : 'fas fa-arrow-circle-up',
+                iconPosition: 'right',
+                text        : 'Firstname'
             }, {
-                handler: me.changeSorting.bind(me, 'lastname'),
-                text   : 'Lastname'
+                field       : 'lastname',
+                handler     : me.changeSorting.bind(me, 'lastname'),
+                iconPosition: 'right',
+                text        : 'Lastname'
             }, {
                 module    : CheckBox,
                 labelText : 'Is online',
@@ -48,6 +56,27 @@ class MainContainer extends Viewport {
                 listeners : {change: me.changeIsOnlineFilter.bind(me)},
                 style     : {marginLeft: '50px'}
             }]
+        }, {
+            module    : TextField,
+            flex      : 'none',
+            labelText : 'Search',
+            labelWidth: 60,
+            listeners : {change: me.changeNameFilter.bind(me)},
+            style     : {marginLeft: '10px'},
+            width     : 262
+        }, {
+            module              : NumberField,
+            clearToOriginalValue: true,
+            flex                : 'none',
+            labelText           : 'Transition Duration',
+            labelWidth          : 150,
+            listeners           : {change: me.changeTransitionDuration.bind(me)},
+            maxValue            : 5000,
+            minValue            : 100,
+            stepSize            : 100,
+            style               : {marginLeft: '10px'},
+            value               : 3000,
+            width               : 262
         }, {
             module: List,
             store : MainStore
@@ -64,13 +93,48 @@ class MainContainer extends Viewport {
     }
 
     /**
-     * @param {String} field
      * @param {Object} data
      */
-    changeSorting(field, data) {
+    changeNameFilter(data) {
         let store = this.down({module: List}).store;
 
-        store.sorters[0].property = field;
+        store.getFilter('name').value = data.value;
+    }
+
+    /**
+     * @param {String} property
+     * @param {Object} data
+     */
+    changeSorting(property, data) {
+        let me              = this,
+            buttonFirstName = me.down({field: 'firstname'}),
+            buttonLastName  = me.down({field: 'lastname'}),
+            direction       = 'ASC',
+            store           = me.down({module: List}).store,
+            sorter          = store.sorters[0],
+            button;
+
+        button = property === 'firstname' ? buttonFirstName : buttonLastName;
+
+        if (property === me.sortBy) {
+            direction = sorter.direction === 'ASC' ? 'DESC' : 'ASC';
+        }
+
+        button.iconCls = `fas fa-arrow-circle-${direction === 'ASC' ? 'up' : 'down'}`;
+
+        button = button === buttonFirstName ? buttonLastName : buttonFirstName;
+        button.iconCls = null;
+
+        sorter.set({direction, property});
+
+        me.sortBy = property;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    changeTransitionDuration(data) {
+        this.down({module: List}).getPlugin('animate').transitionDuration = data.value;
     }
 }
 

package/examples/list/animate/MainStore.mjs

@@ -17,6 +17,23 @@ class MainStore extends Store {
             disabled : true,
             property : 'isOnline',
             value    : true
+        }, {
+            property : 'name',
+            value    : null,
+
+            filterBy: opts => {
+                let record = opts.item,
+                    value  = opts.value;
+
+                if (value) {
+                    return !(
+                        record.firstname.toLowerCase().includes(value) ||
+                        record.lastname .toLowerCase().includes(value)
+                    );
+                }
+
+                return false;
+            }
         }],
 
         sorters: [{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "3.0.0",
+    "version": "3.0.4",
     "description": "The webworkers driven UI framework",
     "repository": {
         "type": "git",
@@ -36,22 +36,22 @@
         "@fortawesome/fontawesome-free": "^5.15.4",
         "@material/mwc-button": "^0.25.3",
         "@material/mwc-textfield": "^0.25.3",
-        "autoprefixer": "^10.4.0",
+        "autoprefixer": "^10.4.2",
         "chalk": "^4.1.2",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^8.3.0",
-        "cssnano": "^5.0.12",
+        "cssnano": "^5.0.15",
         "envinfo": "^7.8.1",
         "fs-extra": "^10.0.0",
         "highlightjs-line-numbers.js": "^2.8.0",
         "inquirer": "^8.1.5",
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.4",
-        "postcss": "^8.4.4",
-        "sass": "^1.45.0",
+        "postcss": "^8.4.5",
+        "sass": "^1.47.0",
         "webpack": "^5.65.0",
         "webpack-cli": "^4.9.1",
-        "webpack-dev-server": "4.6.0",
+        "webpack-dev-server": "4.7.2",
         "webpack-hook-plugin": "^1.0.7",
         "webpack-node-externals": "^3.0.0"
     },

package/resources/scss/src/examples/list/animate/List.scss

@@ -17,7 +17,6 @@
         border          : 1px solid #1c60a0;
         border-radius   : 6px;
         opacity         : .9;
-        transition      : transform .5s ease-in-out;
     }
 
     .neo-list-item-content {

package/src/calendar/view/YearComponent.mjs

@@ -488,9 +488,7 @@ class YearComponent extends Component {
             if (!me.isUpdating) {
                 me.isUpdating = true;
 
-                Neo.main.DomAccess.getBoundingClientRect({
-                    id: me.id
-                }).then(data => {
+                me.getDomRect().then(data => {
                     scrollFromTop = me.scrollNewYearFromTop && increment < 0 || !me.scrollNewYearFromTop && increment > 0;
                     vdom          = me.vdom;
                     y             = scrollFromTop ? 0 : -data.height;

package/src/calendar/view/month/Component.mjs

@@ -316,9 +316,7 @@ class Component extends BaseComponent {
             }
 
             setTimeout(() => {
-                Neo.main.DomAccess.getBoundingClientRect({
-                    id: [me.vdom.cn[1].id, me.vdom.cn[0].id]
-                }).then(data => {
+                me.getDomRect([me.vdom.cn[1].id, me.vdom.cn[0].id]).then(data => {
                     me.headerHeight = data[1].height;
 
                     Neo.main.DomAccess.scrollTo({

package/src/calendar/view/week/Component.mjs

@@ -458,10 +458,7 @@ class Component extends BaseComponent {
             }
 
             setTimeout(() => {
-                Neo.main.DomAccess.getBoundingClientRect({
-                    appName: me.appName,
-                    id     : me.getColumnContainer().id
-                }).then(data => {
+                me.getDomRect(me.getColumnContainer().id).then(data => {
                     Neo.main.DomAccess.scrollBy({
                         appName  : me.appName,
                         direction: 'left',

package/src/calendar/view/week/EventDragZone.mjs

@@ -501,9 +501,7 @@ class EventDragZone extends DragZone {
         let me = this,
             eventDuration, offsetX, offsetY;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            id: [me.getDragElementRoot().id, data.path[1].id]
-        }).then(rects => {
+        me.owner.getDomRect([me.getDragElementRoot().id, data.path[1].id]).then(rects => {
             eventDuration = (me.eventRecord.endDate - me.eventRecord.startDate) / 60 / 1000;
             offsetX       = data.clientX - rects[0].left;
             offsetY       = data.clientY - rects[0].top;

package/src/collection/Base.mjs

@@ -469,11 +469,13 @@ class Base extends CoreBase {
     }
 
     /**
+     *
+     * @param {Object[]} items=this._items
+     * @param {Boolean} silent=false
      * @protected
      */
-    doSort() {
+    doSort(items=this._items, silent=false) {
         let me                = this,
-            items             = me._items,
             previousItems     = [...items],
             sorters           = me.sorters,
             sortDirections    = me.sortDirections,
@@ -558,7 +560,7 @@ class Base extends CoreBase {
 
         me[isSorted] = countSorters > 0;
 
-        if (me[updatingIndex] === 0) {
+        if (!silent && me[updatingIndex] === 0) {
             me.fire('sort', {
                 items: me._items,
                 previousItems,
@@ -607,6 +609,8 @@ class Base extends CoreBase {
             i               = 0,
             countItems      = items.length,
             filteredItems   = [],
+            needsSorting    = false,
+            oldItems        = [...me._items],
             config, isIncluded, item, j, tmpItems;
 
         for (; i < countAllFilters; i++) {
@@ -616,6 +620,10 @@ class Base extends CoreBase {
         }
 
         if (countFilters === 0 && me.allItems) {
+            if (me.sorters.length > 0) {
+                needsSorting = true;
+            }
+
             me.clear();
 
             me.items = [...me.allItems._items];
@@ -682,7 +690,16 @@ class Base extends CoreBase {
 
         me[isFiltered] = countFilters !== 0;
 
-        me.fire('filter', me);
+        if (needsSorting) {
+            me.doSort(me.items, true);
+        }
+
+        me.fire('filter', {
+            isFiltered: me[isFiltered],
+            items     : me.items,
+            oldItems,
+            scope     : me
+        });
     }
 
     /**

package/src/collection/Filter.mjs

@@ -40,7 +40,7 @@ class Filter extends Base {
          */
         disabled_: false,
         /**
-         * Provide a custom filtering function, has a higher priority than property, operator & value
+         * Provide a custom filtering function which has a higher priority than property, operator & value
          * @member {Function|null} filterBy_=null
          */
         filterBy_: null,
@@ -173,7 +173,12 @@ class Filter extends Base {
         }
 
         if (me._filterBy) {
-            return me.filterBy.call(me.scope || me, item, filteredItems, allItems);
+            return me.filterBy.call(me.scope || me, {
+                allItems,
+                filteredItems,
+                item,
+                value: me._value
+            });
         }
 
         if (me.includeEmptyValues && (me._value === null || Neo.isEmpty(me._value))) {

package/src/component/Base.mjs

@@ -959,6 +959,19 @@ class Base extends CoreBase {
         return this.getConfigInstanceByNtype('controller', ntype);
     }
 
+    /**
+     * Convenience shortcut
+     * @param {String[]|String} id=this.id
+     * @param {String} appName=this.appName
+     * @returns {Promise<*>}
+     */
+    getDomRect(id=this.id, appName=this.appName) {
+        return Neo.main.DomAccess.getBoundingClientRect({
+            appName,
+            id
+        });
+    }
+
     /**
      * Returns this.model or the closest parent model
      * @param {String} [ntype]

package/src/component/DateSelector.mjs

@@ -400,9 +400,7 @@ class DateSelector extends Component {
             if (!me.isUpdating) {
                 me.isUpdating = true;
 
-                Neo.main.DomAccess.getBoundingClientRect({
-                    id: [me.getCenterContentEl().id, me.getHeaderMonthEl().id]
-                }).then(data => {
+                me.getDomRect([me.getCenterContentEl().id, me.getHeaderMonthEl().id]).then(data => {
                     vdom = me.vdom;
                     x    = slideDirection === 'right' ? 0 : -data[0].width;
 
@@ -486,9 +484,7 @@ class DateSelector extends Component {
             if (!me.isUpdating) {
                 me.isUpdating = true;
 
-                Neo.main.DomAccess.getBoundingClientRect({
-                    id: me.getCenterContentEl().id
-                }).then(data => {
+                me.getDomRect(me.getCenterContentEl().id).then(data => {
                     scrollFromTop = me.scrollNewYearFromTop && increment < 0 || !me.scrollNewYearFromTop && increment > 0;
                     vdom          = me.vdom;
                     y             = scrollFromTop ? 0 : -data.height;

package/src/component/Splitter.mjs

@@ -158,9 +158,7 @@ class Splitter extends Component {
 
         me.style = style;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            id: me.parentId
-        }).then(parentRect => {
+        me.getDomRect(me.parentId).then(parentRect => {
             parent  = Neo.getComponent(me.parentId);
             index   = parent.indexOf(me);
             sibling = parent.items[resizeNext ? index + 1 :index - 1];

package/src/core/Observable.mjs

@@ -107,6 +107,10 @@ class Observable extends Base {
             for (i = 0; i < len; i++) {
                 eventConfig = events[i];
 
+                if (!Neo.isFunction(eventConfig.fn)) {
+                    eventConfig.fn = eventConfig.scope[eventConfig.fn];
+                }
+
                 eventConfig.fn.apply(eventConfig.scope || me, eventConfig.data ? args.concat(eventConfig.data) : args);
             }
         }

package/src/dialog/Base.mjs

@@ -286,10 +286,7 @@ class Base extends Panel {
             appName = me.appName,
             id      = me.getAnimateTargetId();
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            appName: appName,
-            id     : [me.id, me.animateTargetId]
-        }).then(rects => {
+        me.getDomRect([me.id, me.animateTargetId]).then(rects => {
             Neo.currentWorker.promiseMessage('main', {
                 action  : 'mountDom',
                 appName : appName,
@@ -336,10 +333,7 @@ class Base extends Panel {
             appName = me.appName,
             id      = me.getAnimateTargetId();
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            appName: appName,
-            id     : me.animateTargetId
-        }).then(rect => {
+        me.getDomRect(me.animateTargetId).then(rect => {
             Neo.currentWorker.promiseMessage('main', {
                 action  : 'mountDom',
                 appName : appName,
@@ -530,10 +524,7 @@ class Base extends Panel {
             initialTransitionProperty, wrapperStyle;
 
         if (!me.maximized) {
-            Neo.main.DomAccess.getBoundingClientRect({
-                appName: me.appName,
-                id     : me.dragZone.dragProxy.id
-            }).then(rect => {
+            me.getDomRect(me.dragZone.dragProxy.id).then(rect => {
                 wrapperStyle = me.wrapperStyle;
 
                 Object.assign(wrapperStyle, {

package/src/draggable/toolbar/SortZone.mjs

@@ -204,9 +204,7 @@ class SortZone extends DragZone {
                 });
             });
 
-            Neo.main.DomAccess.getBoundingClientRect({
-                id: [owner.id].concat(owner.items.map(e => e.id))
-            }).then(itemRects => {
+            owner.getDomRect([owner.id].concat(owner.items.map(e => e.id))).then(itemRects => {
                 me.ownerRect = itemRects[0];
 
                 ownerStyle.height = `${itemRects[0].height}px`;

package/src/form/field/Picker.mjs

@@ -143,9 +143,7 @@ class Picker extends Text {
     getClientRectsThenShow(callback, callbackScope) {
         let me = this;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            id: [me.id, me.getInputWrapperId(), 'body']
-        }).then(data => {
+        me.getDomRect([me.id, me.getInputWrapperId(), 'body']).then(data => {
             me.clientRects = data;
             me.showPicker(callback, callbackScope);
         });

package/src/form/field/Text.mjs

@@ -921,9 +921,7 @@ class Text extends Base {
     updateCenterBorderElWidth(silent=false) {
         let me = this;
 
-        me.mounted && Neo.main.DomAccess.getBoundingClientRect({
-            id: me.getCenterBorderEl().id
-        }).then(data => {
+        me.mounted && me.getDomRect(me.getCenterBorderEl().id).then(data => {
             me.centerBorderElWidth = Math.round(data.width * .7) + 8;
 
             if (!silent) {

package/src/list/Base.mjs

@@ -132,7 +132,7 @@ class Base extends Component {
             plugins.push({
                 module : module.default,
                 appName: me.appName,
-                flag   : 'animate',
+                id     : 'animate',
                 ...me.pluginAnimateConfig
             });
 
@@ -191,9 +191,9 @@ class Base extends Component {
         let me = this;
 
         value?.on({
-            filter      : me.onStoreFilter,
-            load        : me.onStoreLoad,
-            recordChange: me.onStoreRecordChange,
+            filter      : 'onStoreFilter',
+            load        : 'onStoreLoad',
+            recordChange: 'onStoreRecordChange',
             scope       : me
         });
 

package/src/list/plugin/Animate.mjs

@@ -1,4 +1,6 @@
-import Base from '../../plugin/Base.mjs';
+import Base     from '../../plugin/Base.mjs';
+import CssUtil  from '../../util/Css.mjs';
+import VdomUtil from '../../util/VDom.mjs';
 
 /**
  * @class Neo.list.plugin.Animate
@@ -39,7 +41,17 @@ class Animate extends Base {
          * Read only
          * @member {Number|null} rows=null
          */
-        rows: null
+        rows: null,
+        /**
+         * Time in ms. Please ensure to match the CSS based value, in case you change the default.
+         * @member {Number} transitionDuration_=500
+         */
+        transitionDuration_: 2000,
+        /**
+         * The id of the setTimeout() call which gets triggered after a transition is done.
+         * @member {Number|null} transitionTimeoutId=null
+         */
+        transitionTimeoutId: null
     }}
 
     /**
@@ -48,14 +60,16 @@ class Animate extends Base {
     construct(config) {
         super.construct(config);
 
-        let me = this;
+        let me    = this,
+            owner = me.owner;
 
         me.adjustCreateItem();
 
-        me.owner.store.on({
-            filter: me.onFilter,
-            sort  : me.onSort,
-            scope : me
+        owner.onStoreFilter = me.onStoreFilter.bind(me);
+
+        owner.store.on({
+            sort : me.onStoreSort,
+            scope: me
         });
     }
 
@@ -70,6 +84,25 @@ class Animate extends Base {
         owner.createItem   = me.createItem.bind(owner, me);
     }
 
+    /**
+     * Triggered after the transitionDuration config got changed.
+     *
+     * We do not want to apply the style to each list item itself,
+     * so we are using Neo.util.Css
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetTransitionDuration(value, oldValue) {
+        Neo.isNumber(oldValue) && CssUtil.deleteRules(`#${this.owner.id} .neo-list-item`);
+
+        CssUtil.insertRules([
+            `#${this.owner.id} .neo-list-item {`,
+                `transition: opacity ${value}ms ease-in-out, transform ${value}ms ease-in-out`,
+            '}'
+        ].join(''));
+    }
+
     /**
      * @param {Neo.list.plugin.Animate} me
      * @param {Object} record
@@ -77,27 +110,19 @@ class Animate extends Base {
      * @returns {Object}
      */
     createItem(me, record, index) {
-        let item       = me.ownerCreateItem(record, index),
-            itemHeight = me.itemHeight,
-            itemWidth  = me.itemWidth,
-            margin     = me.itemMargin,
-            style      = item.style || {},
-            column, row, x, y;
+        let item     = me.ownerCreateItem(record, index),
+            position = me.getItemPosition(record, index),
+            style    = item.style || {};
 
         if (!me.ownerRect) {
             return null;
         }
 
-        column = index % me.columns;
-        row    = Math.floor(index / me.columns);
-        x      = column * (margin + itemWidth)  + margin;
-        y      = row    * (margin + itemHeight) + margin;
-
         Object.assign(style, {
-            height   : `${itemHeight}px`,
+            height   : `${me.itemHeight}px`,
             position : 'absolute',
-            transform: `translate(${x}px, ${y}px)`,
-            width    : `${itemWidth}px`
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            width    : `${me.itemWidth}px`
         });
 
         item.style = style;
@@ -106,10 +131,38 @@ class Animate extends Base {
     }
 
     /**
-     * @param {Object} data
+     *
+     * @param {Object} record
+     * @param {Number} index
+     * @returns {{x: Number, y: Number}}
      */
-    onFilter(data) {
-        console.log('onFilter', data);
+    getItemPosition(record, index) {
+        let me     = this,
+            column = index % me.columns,
+            margin = me.itemMargin,
+            row    = Math.floor(index / me.columns),
+            x      = column * (margin + me.itemWidth)  + margin,
+            y      = row    * (margin + me.itemHeight) + margin;
+
+        return {x, y};
+    }
+
+    /**
+     *
+     * @param {Object} obj
+     * @param {String[]} map
+     * @param {Boolean} intercept
+     * @returns {Number}
+     */
+    getItemIndex(obj, map, intercept) {
+        if (!intercept) {
+            return obj.index;
+        }
+
+        let owner = this.owner,
+            key   = owner.store.keyProperty;
+
+        return map.indexOf(owner.getItemId(obj.record[key]));
     }
 
     /**
@@ -118,9 +171,7 @@ class Animate extends Base {
     onOwnerMounted() {
         let me = this;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            id: me.owner.id
-        }).then(rect => {
+        me.owner.getDomRect().then(rect => {
             Object.assign(me, {
                 columns  : Math.floor(rect.width / me.itemWidth),
                 ownerRect: rect,
@@ -129,13 +180,126 @@ class Animate extends Base {
         });
     }
 
+    /**
+     * @param {Object} data
+     * @param {Boolean} data.isFiltered
+     * @param {Object[]} data.items
+     * @param {Object[]} data.oldItems
+     * @param {Neo.data.Store} data.scope
+     */
+    onStoreFilter(data) {
+        let me                  = this,
+            owner               = me.owner,
+            key                 = owner.store.keyProperty,
+            hasAddedItems       = false,
+            addedItems          = [],
+            movedItems          = [],
+            removedItems        = [],
+            transitionTimeoutId = me.transitionTimeoutId,
+            intercept           = !!transitionTimeoutId,
+            vdom                = owner.vdom,
+            index, item, map, position, vdomIndex;
+
+        if (transitionTimeoutId) {
+            clearTimeout(transitionTimeoutId);
+            me.transitionTimeoutId = null;
+        }
+
+        map = intercept ? vdom.cn.map(e => e.id) : [];
+
+        data.items.forEach((record, index) => {
+            item = {index, record};
+
+            if (!data.oldItems.includes(record)) {
+                // flag items which are still inside the DOM (running remove OP)
+                if (intercept && map.includes(owner.getItemId(record[key]))) {
+                    item.reAdded = true;
+                }
+
+                addedItems.push(item);
+            } else {
+                movedItems.push(item);
+            }
+        });
+
+        data.oldItems.forEach((record, index) => {
+            if (!data.items.includes(record)) {
+                removedItems.push({index, record});
+            }
+        });
+
+        addedItems.forEach(obj => {
+            if (!obj.reAdded) {
+                index = me.getItemIndex(obj, map, intercept);
+
+                if (index > -1) {
+                    hasAddedItems = true;
+
+                    vdom.cn.splice(index, 0, me.createItem(me, obj.record, obj.index));
+
+                    obj.item = vdom.cn[index];
+                    obj.item.style.opacity = 0;
+                }
+            }
+        });
+
+        if (hasAddedItems) {
+            owner.vdom = vdom;
+        }
+
+        // ensure to get into the next animation frame
+        setTimeout(() => {
+            // get the latest version of the vdom, since this is a delayed callback
+            vdom = owner.vdom;
+
+            // new items are already added into the vdom, while old items are not yet removed
+            // => we need a map to ensure getting the correct index
+            map = vdom.cn.map(e => e.id);
+
+            addedItems.forEach(obj => {
+                index = me.getItemIndex(obj, map, intercept);
+
+                if (index > -1) {
+                    // we can change the opacity for re-added items too => the vdom engine will ignore this
+                    vdom.cn[index].style.opacity = 1;
+                }
+            });
+
+            movedItems.forEach(obj => {
+                index = me.getItemIndex(obj, map, true); // honor removed items, even without interceptions
+
+                if (index > -1) {
+                    position = me.getItemPosition(obj.record, obj.index);
+
+                    Object.assign(vdom.cn[index].style, {
+                        opacity  : 1,
+                        transform: `translate(${position.x}px, ${position.y}px)`
+                    });
+                }
+            });
+
+            removedItems.forEach(obj => {
+                index = me.getItemIndex(obj, map, intercept);
+
+                if (index > -1) {
+                    obj.item = vdom.cn[index];
+                    obj.item.style.opacity = 0;
+                }
+            });
+
+            owner.vdom = vdom;
+
+            me.triggerTransitionCallback();
+        }, 50);
+    }
+
     /**
      * @param {Object} data
      * @param {Object[]} data.items
      * @param {Object[]} data.previousItems
      * @param {Neo.data.Store} data.scope
      */
-    onSort(data) {
+    onStoreSort(data) {
         let me          = this,
             hasChange   = false,
             keyProperty = data.scope.keyProperty,
@@ -169,6 +333,19 @@ class Animate extends Base {
             }
         }
     }
+
+    /**
+     *
+     */
+    triggerTransitionCallback() {
+        let me = this;
+
+        me.transitionTimeoutId = setTimeout(() => {
+            me.transitionTimeoutId = null;
+
+            me.owner.createItems();
+        }, me.transitionDuration);
+    }
 }
 
 Neo.applyClassConfig(Animate);

package/src/main/addon/Stylesheet.mjs

@@ -8,6 +8,12 @@ import Base from '../../core/Base.mjs';
  * @singleton
  */
 class Stylesheet extends Base {
+    /**
+     * @member {String} dynamicStyleSheetId='neo-dynamic-stylesheet'
+     * @protected
+     */
+    dynamicStyleSheetId = 'neo-dynamic-stylesheet';
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.main.addon.Stylesheet'
@@ -23,6 +29,7 @@ class Stylesheet extends Base {
             app: [
                 'addThemeFiles',
                 'createStyleSheet',
+                'deleteCssRules',
                 'insertCssRules',
                 'swapStyleSheet'
             ]
@@ -137,6 +144,32 @@ class Stylesheet extends Base {
         document.head.appendChild(link);
     }
 
+    /**
+     * @param {Object} data
+     * @param {Array} data.rules
+     * @protected
+     */
+    deleteCssRules(data) {
+        let styleEl    = document.getElementById(this.dynamicStyleSheetId),
+            styleSheet = styleEl.sheet,
+            cssRules   = styleSheet.cssRules,
+            i          = 0,
+            len        = data.rules.length,
+            j, rulesLen;
+
+        for (; i < len; i++) {
+            j        = 0;
+            rulesLen = cssRules.length;
+
+            for (; j < rulesLen; j++) {
+                if (cssRules[j].selectorText === data.rules[i]) {
+                    styleSheet.deleteRule(j);
+                    break;
+                }
+            }
+        }
+    }
+
     /**
      * @param {String} token
      * @returns {Boolean}
@@ -162,7 +195,7 @@ class Stylesheet extends Base {
      * @protected
      */
     insertCssRules(data) {
-        let styleEl = document.getElementById('neoDynamicStyleSheet'),
+        let styleEl = document.getElementById(this.dynamicStyleSheetId),
             i     = 0,
             len   = data.rules.length,
             styleSheet;
@@ -170,7 +203,7 @@ class Stylesheet extends Base {
         if (!styleEl) {
             styleEl = document.createElement('style');
 
-            styleEl.id = 'neoDynamicStyleSheet';
+            styleEl.id = this.dynamicStyleSheetId;
             document.head.appendChild(styleEl);
         }
 

package/src/menu/List.mjs

@@ -193,9 +193,7 @@ class List extends BaseList {
 
         me.store.destroy();
 
-        if (activeSubMenu) {
-            activeSubMenu.unmount();
-        }
+        activeSubMenu?.unmount();
 
         Object.entries(subMenuMap).forEach(([key, value]) => {
             value.destroy();
@@ -279,10 +277,7 @@ class List extends BaseList {
 
         if (me.activeSubMenu !== me.subMenuMap?.[me.getMenuMapId(recordId)]) {
             me.hideSubMenu();
-
-            if (me.hasChildren(record)) {
-                me.showSubMenu(nodeId, record);
-            }
+            me.hasChildren(record) && me.showSubMenu(nodeId, record);
         }
     }
 
@@ -299,10 +294,7 @@ class List extends BaseList {
             subMenu      = subMenuMap[subMenuMapId],
             menuStyle, style;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            appName: me.appName,
-            id     : nodeId
-        }).then(rect => {
+        me.getDomRect(nodeId).then(rect => {
             style = {
                 left: `${rect.right + me.subMenuGap}px`,
                 top : `${rect.top - 1}px` // minus the border
@@ -324,7 +316,7 @@ class List extends BaseList {
                     parentId   : Neo.apps[me.appName].mainView.id,
                     parentIndex: store.indexOf(record),
                     parentMenu : me,
-                    style      : style,
+                    style,
                     zIndex     : me.zIndex + 1
                 });
             }

package/src/plugin/Base.mjs

@@ -33,7 +33,11 @@ class Base extends CoreBase {
 
         let me = this;
 
-        me.owner.on('mounted', me.onOwnerMounted, me);
+        if (me.owner.mounted) {
+            me.onOwnerMounted();
+        } else {
+            me.owner.on('mounted', me.onOwnerMounted, me);
+        }
     }
 
     /**

package/src/plugin/Resizable.mjs

@@ -396,7 +396,7 @@ class Resizable extends Base {
         me.isDragging = true;
 
         style.opacity = 0.3;
-        me.owner.wrapperStyle = style;
+        owner.wrapperStyle = style;
 
         for (; i < len; i++) {
             target = data.path[i];
@@ -414,10 +414,7 @@ class Resizable extends Base {
         }
 
         if (!me.boundaryContainerRect) {
-            Neo.main.DomAccess.getBoundingClientRect({
-                appName: appName,
-                id     : me.boundaryContainerRect
-            }).then(rect => {
+            owner.getDomRect(me.boundaryContainerRect).then(rect => {
                 me.boundaryContainerRect = rect;
             });
         }

package/src/tab/Strip.mjs

@@ -80,9 +80,7 @@ class Strip extends Component {
             ids = ids.map(e => e?.id).filter(Boolean);
 
             if (me.useActiveTabIndicator) {
-                Neo.main.DomAccess.getBoundingClientRect({
-                    id: ids
-                }).then(data => {
+                me.getDomRect(ids).then(data => {
                     me.moveActiveIndicator(data);
                 });
             }

package/src/util/Css.mjs

@@ -14,15 +14,29 @@ class Css extends Base {
     }}
 
     /**
-     * @param {Array} rules
+     * Pass the selectorText of the rules which you want to remove
+     * @param {String[]|String} rules
+     */
+    static deleteRules(rules) {
+        if (!Array.isArray(rules)) {
+            rules = [rules];
+        }
+
+        Neo.main.addon.Stylesheet.deleteCssRules({
+            rules: rules
+        });
+    }
+
+    /**
+     * @param {String[]|String} rules
      */
     static insertRules(rules) {
+        if (!Array.isArray(rules)) {
+            rules = [rules];
+        }
+
         Neo.main.addon.Stylesheet.insertCssRules({
             rules: rules
-        }).then(function(data) {
-            // console.log('inserted CSS rules', data);
-        }).catch(function(err) {
-            console.log('App: Got error attempting to insert CSS rules', err, rules);
         });
     }
 }