neo.mjs 8.31.0 → 8.32.0

package/src/component/Base.mjs

@@ -2662,8 +2662,7 @@ class Component extends Base {
      */
     updateVdom(resolve, reject) {
         let me                              = this,
-            {app, mounted, parentId, vnode} = me,
-            listenerId;
+            {app, mounted, parentId, vnode} = me;
 
         if (me.isVdomUpdating || me.silentVdomUpdate) {
             resolve && me.resolveUpdateCache.push(resolve);
@@ -2672,13 +2671,11 @@ class Component extends Base {
             if (!mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
                 me.hasRenderingListener = true;
 
-                listenerId = app.on('mounted', () => {
-                    app.un('mounted', listenerId);
-
+                app.on('mounted', () => {
                     me.timeout(50).then(() => {
                         me.vnode && me.updateVdom(resolve, reject)
                     })
-                })
+                }, me, {once: true})
             } else {
                 if (resolve && (!mounted || !vnode)) {
                     me.resolveUpdateCache.push(resolve)

package/src/component/Helix.mjs

@@ -546,12 +546,11 @@ class Helix extends Component {
             angle, item, matrixItems, transformStyle, vdomItem, c, s, x, y, z;
 
         if (!me.mounted) {
-            const listenerId = me.on('mounted', () => {
-                me.un('mounted', listenerId);
+            me.on('mounted', () => {
                 me.timeout(100).then(() => {
                     me.createItems(startIndex)
                 })
-            })
+            }, me, {once: true})
         } else {
             for (; i < len; i++) {
                 item = me.store.items[i];

package/src/controller/Component.mjs

@@ -45,18 +45,16 @@ class Component extends Base {
         super.construct(config);
 
         let me          = this,
-            {component} = me,
-            listenerId;
+            {component} = me;
 
         me.references = {};
 
         if (component.isConstructed) {
             me.onComponentConstructed()
         } else {
-            listenerId = component.on('constructed', () => {
-                component.un('constructed', listenerId);
+            component.on('constructed', () => {
                 me.onComponentConstructed()
-            })
+            }, me, {once: true})
         }
     }
 

package/src/data/Store.mjs

@@ -430,7 +430,7 @@ class Store extends Base {
 
         // Being constructed does not mean that related afterSetStore() methods got executed
         // => break the sync flow to ensure potential listeners got applied
-        Promise.resolve().then(() => {
+        me.timeout(1).then(() => {
             if (me.getCount() > 0) {
                 me.fire('load', me.items)
             } else if (me.autoLoad) {

package/src/dialog/Base.mjs

@@ -286,15 +286,14 @@ class Dialog extends Panel {
     afterSetResizable(value, oldValue) {
         if (value && !this.getPlugin('resizable')) {
             import('../plugin/Resizable.mjs').then(module => {
-                let me                  = this,
-                    {appName, windowId} = me,
-                    plugins             = me.plugins || [];
+                let me        = this,
+                    {appName} = me,
+                    plugins   = me.plugins || [];
 
                 plugins.push({
                     module       : module.default,
                     appName,
                     delegationCls: 'neo-dialog',
-                    windowId,
                     ...me.resizablePluginConfig
                 });
 

package/src/grid/Container.mjs

@@ -232,14 +232,13 @@ class GridContainer extends BaseContainer {
     afterSetCellEditing(value, oldValue) {
         if (value) {
             import('./plugin/CellEditing.mjs').then(module => {
-                let me                  = this,
-                    {appName, windowId} = me,
-                    plugins             = me.plugins || [];
+                let me        = this,
+                    {appName} = me,
+                    plugins   = me.plugins || [];
 
                 plugins.push({
-                    module : module.default,
-                    appName,
-                    windowId
+                    module: module.default,
+                    appName
                 });
 
                 me.plugins = plugins

package/src/grid/View.mjs

@@ -226,9 +226,7 @@ class GridView extends Component {
                     plugins = me.plugins || [];
 
                 plugins.push({
-                    module  : module.default,
-                    appName : me.appName,
-                    windowId: me.windowId,
+                    module: module.default,
                     ...me.pluginAnimateRowsConfig
                 });
 

package/src/grid/column/AnimatedChange.mjs

@@ -53,22 +53,28 @@ class AnimatedChange extends Column {
      * @param {Neo.data.Model} data.model The model instance of the changed record
      * @param {Object}         data.record
      */
-    onRecordChange({fields, record}) {
+    async onRecordChange({fields, record}) {
         let me     = this,
             {view} = me.parent,
             cellId, field, node;
 
         for (field of fields) {
             if (field.name === me.dataField) {
+                // Wait for the next animation frame
+                await me.timeout(20);
+
                 cellId = view.getCellId(record, me.dataField);
                 node   = VdomUtil.find(view.vdom, cellId)?.vdom;
 
-                NeoArray.add(node.cls, me.getAnimationCls(record));
+                if (node) {
+                    NeoArray.add(node.cls, me.getAnimationCls(record));
+
+                    // This will trigger a 2nd view update, after grid.View: onStoreRecordChange()
+                    // It is crucial to restart the keyframe based animation
+                    // => The previous update call will remove the last animationCls
+                    view.update()
+                }
 
-                // This will trigger a 2nd view update, after grid.View: onStoreRecordChange()
-                // It is crucial to restart the keyframe based animation
-                // => The previous update call will remove the last animationCls
-                view.update();
                 break
             }
         }

package/src/grid/plugin/AnimateRows.mjs

@@ -27,7 +27,7 @@ class AnimateRows extends Base {
          */
         ntype: 'plugin-grid-animate-rows',
         /**
-         * Time in ms. Please ensure to match the CSS based value, in case you change the default.
+         * Time in ms for the background-color, opacity & transform transitions
          * @member {Number} transitionDuration_=500
          */
         transitionDuration_: 500,
@@ -65,7 +65,7 @@ class AnimateRows extends Base {
         // Add the re-bound listeners
         owner.store = store;
 
-        me.updateTransitionDetails()
+        owner.addCls('neo-animate-rows')
     }
 
     /**
@@ -75,7 +75,7 @@ class AnimateRows extends Base {
      * @protected
      */
     afterSetTransitionDuration(value, oldValue) {
-        this.isConstructed && this.updateTransitionDetails(Neo.isNumber(oldValue))
+        this.owner.addStyle({'--neo-duration': value + 'ms'})
     }
 
     /**
@@ -85,7 +85,7 @@ class AnimateRows extends Base {
      * @protected
      */
     afterSetTransitionEasing(value, oldValue) {
-        this.isConstructed && this.updateTransitionDetails(!!oldValue)
+        this.owner.addStyle({'--neo-easing': value})
     }
 
     /**
@@ -102,7 +102,11 @@ class AnimateRows extends Base {
      * @param {Object} args
      */
     destroy(...args) {
-        CssUtil.deleteRules(this.appName, `#${this.owner.id} .neo-grid-row`);
+        this.owner.addStyle({
+            '--neo-duration': null,
+            '--neo-easing'  : null
+        });
+
         super.destroy(...args)
     }
 
@@ -125,32 +129,6 @@ class AnimateRows extends Base {
         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(''))
-    }
-
     /**
      *
      */

package/src/list/Base.mjs

@@ -206,9 +206,7 @@ class List extends Component {
                     plugins = me.plugins || [];
 
                 plugins.push({
-                    module  : module.default,
-                    appName : me.appName,
-                    windowId: me.windowId,
+                    module: module.default,
                     ...me.pluginAnimateConfig
                 });
 

package/src/list/plugin/Animate.mjs

@@ -156,7 +156,7 @@ class Animate extends Base {
      * @param {Object} args
      */
     destroy(...args) {
-        CssUtil.deleteRules(this.appName, `#${this.owner.id} .neo-list-item`);
+        CssUtil.deleteRules(this.windowId, `#${this.owner.id} .neo-list-item`);
         super.destroy(...args)
     }
 
@@ -431,10 +431,10 @@ class Animate extends Base {
             {id}     = me.owner;
 
         if (deleteRule) {
-            await CssUtil.deleteRules(me.appName, `#${id} .neo-list-item`)
+            await CssUtil.deleteRules(me.windowId, `#${id} .neo-list-item`)
         }
 
-        CssUtil.insertRules(me.appName, [
+        CssUtil.insertRules(me.windowId, [
             `#${id} .neo-list-item {`,
                 `transition: opacity ${duration}ms ${easing}, transform ${duration}ms ${easing}`,
             '}'

package/src/manager/Component.mjs

@@ -445,7 +445,7 @@ class Component extends Manager {
                         component = this.get(item.componentId);
 
                         // keep references in case there is no vnode (cmp not mounted)
-                        if (component.vnode) {
+                        if (component?.vnode) {
                             item = component.vnode
                         }
                     }

package/src/plugin/Base.mjs

@@ -37,12 +37,21 @@ class Plugin extends Base {
     construct(config) {
         super.construct(config);
 
-        let me = this;
+        let me      = this,
+            {owner} = me;
 
-        if (me.owner.mounted) {
+        if (owner.isConstructed) {
+            me.onOwnerConstructed()
+        } else {
+            owner.on('constructed', () => {
+                me.onOwnerConstructed()
+            }, me, {once: true})
+        }
+
+        if (owner.mounted) {
             me.onOwnerMounted();
         } else {
-            me.owner.on('mounted', me.onOwnerMounted, me);
+            owner.on('mounted', me.onOwnerMounted, me);
         }
     }
 
@@ -56,6 +65,17 @@ class Plugin extends Base {
         value && Neo.currentWorker.insertThemeFiles(value, this.__proto__)
     }
 
+    /**
+     * Override this method to apply changes to the owner Component when it is constructed
+     */
+    onOwnerConstructed() {
+        let {owner} = this;
+
+        if (owner.windowId) {
+            this.windowId = owner.windowId
+        }
+    }
+
     /**
      * Override this method to apply changes to the owner Component when it does get mounted
      */

package/src/selection/HelixModel.mjs

@@ -223,8 +223,7 @@ class HelixModel extends Model {
             isSelected = toggleSelection === false ? false : me.items.includes(itemId),
             items      = me.items,
             oldItems   = [...items],
-            deltas     = [],
-            listenerId;
+            deltas     = [];
 
         // a select() call can happen before the view is registered
         if (!view) {
@@ -232,13 +231,11 @@ class HelixModel extends Model {
         }
 
         if (!view.mounted) {
-            listenerId = view.on('mounted', () => {
-                view.un('mounted', listenerId);
-
+            view.on('mounted', () => {
                 me.timeout(300).then(() => {
                     me.select(itemId, toggleSelection)
                 })
-            })
+            }, me, {once: true})
         }
 
         if (me.singleSelect) {

package/src/tab/Container.mjs

@@ -524,7 +524,7 @@ class Container extends BaseContainer {
             i             = 0,
             len           = tabBar.items.length,
             index         = -1,
-            card, listenerId;
+            card;
 
         for (; i < len; i++) {
             if (tabBar.items[i].id === buttonId) {
@@ -537,10 +537,9 @@ class Container extends BaseContainer {
             card = cardContainer.items[index];
 
             if (me.vnode && !card.mounted) {
-                listenerId = card.on('mounted', () => {
-                    card.un('mounted', listenerId);
+                card.on('mounted', () => {
                     me.activeIndex = index
-                })
+                }, me, {once: true})
             } else {
                 me.activeIndex = index
             }

package/src/table/Container.mjs

@@ -161,14 +161,13 @@ class Container extends BaseContainer {
     afterSetCellEditing(value, oldValue) {
         if (value) {
             import('./plugin/CellEditing.mjs').then(module => {
-                let me                  = this,
-                    {appName, windowId} = me,
-                    plugins             = me.plugins || [];
+                let me        = this,
+                    {appName} = me,
+                    plugins   = me.plugins || [];
 
                 plugins.push({
-                    module : module.default,
-                    appName,
-                    windowId
+                    module: module.default,
+                    appName
                 });
 
                 me.plugins = plugins
@@ -262,7 +261,7 @@ class Container extends BaseContainer {
         }
 
         if (cssRules.length > 0) {
-            CssUtil.insertRules(me.appName, cssRules)
+            CssUtil.insertRules(me.windowId, cssRules)
         }
 
         me.scrollbarsCssApplied = true

package/src/util/Css.mjs

@@ -15,27 +15,27 @@ class Css extends Base {
 
     /**
      * Pass the selectorText of the rules which you want to remove
-     * @param {String} appName
+     * @param {Number} windowId
      * @param {String[]|String} rules
      */
-    static deleteRules(appName, rules) {
+    static deleteRules(windowId, rules) {
         if (!Array.isArray(rules)) {
             rules = [rules]
         }
 
-        Neo.main.addon.Stylesheet.deleteCssRules({appName, rules})
+        Neo.main.addon.Stylesheet.deleteCssRules({rules, windowId})
     }
 
     /**
-     * @param {String} appName
+     * @param {Number} windowId
      * @param {String[]|String} rules
      */
-    static insertRules(appName, rules) {
+    static insertRules(windowId, rules) {
         if (!Array.isArray(rules)) {
             rules = [rules]
         }
 
-        Neo.main.addon.Stylesheet.insertCssRules({appName, rules})
+        Neo.main.addon.Stylesheet.insertCssRules({rules, windowId})
     }
 }