neo.mjs 4.3.0 → 4.3.2

package/src/component/Base.mjs

@@ -75,6 +75,11 @@ class Base extends CoreBase {
          * @member {Object|null} bind=null
          */
         bind: null,
+        /**
+         * CSS selectors to apply to the root level node of this component
+         * @member {String[]} cls_=null
+         */
+        cls_: null,
         /**
          * manager.Focus will change this flag on focusin & out dom events
          * @member {Boolean} containsFocus_=false
@@ -250,10 +255,10 @@ class Base extends CoreBase {
          */
         silentVdomUpdate: false,
         /**
-         * Top level style attributes
-         * @member {Object} style={}
+         * Style attributes added to this vdom root. see: getVdomRoot()
+         * @member {Object} style_=null
          */
-        style: {},
+        style_: null,
         /**
          * Add tooltip config objects
          * See tooltip/Base.mjs
@@ -271,6 +276,10 @@ class Base extends CoreBase {
          * @member {Number|String|null} width_=null
          */
         width_: null,
+        /**
+         * @member {String[]|null} wrapperCls_=null
+         */
+        wrapperCls_: null,
         /**
          * Top level style attributes. Useful in case getVdomRoot() does not point to the top level DOM node.
          * @member {Object|null} wrapperStyle_=null
@@ -283,44 +292,6 @@ class Base extends CoreBase {
         _vdom: {}
     }}
 
-    /**
-     * CSS selectors to apply to the top level node of this component
-     * @member {String[]} cls=[]
-     */
-    get cls() {
-        return this._cls ? Neo.clone(this._cls) : [];
-    }
-    set cls(value) {
-        value = value ? value : [];
-
-        let me       = this,
-            vdom     = me.vdom,
-            vdomRoot = me.getVdomRoot(),
-            oldCls;
-
-        if (typeof value === 'string') {
-            value = value.split('');
-        }
-
-        if (me.mounted) {
-            oldCls = Neo.clone(me._cls);
-        }
-
-        me._cls = value;
-
-        if (vdomRoot) {
-            vdomRoot.cls = [...value];
-        }
-
-        me._vdom = vdom; // silent update
-
-        if (me.silentVdomUpdate) {
-            me.needsVdomUpdate = true;
-        } else if (me.mounted) {
-            me.updateCls(value, oldCls);
-        }
-    }
-
     /**
      * Apply component based listeners
      * @member {Object} listeners={}
@@ -350,23 +321,6 @@ class Base extends CoreBase {
         }
     }
 
-    /**
-     * Top level style attributes
-     * @member {Object} style={}
-     */
-    get style() {
-        // we need to "clone" the object, otherwise changes will get applied directly and there are no deltas
-        // this only affects non vdom related style to DOM deltas
-        return Neo.clone(this._style || {});
-    }
-    set style(value) {
-        let me       = this,
-            oldStyle = me.style; // cloned => getter
-
-        me._style = value;
-        me.updateStyle(value, oldStyle);
-    }
-
     /**
      * The setter will handle vdom updates automatically
      * @member {Object} vdom=this._vdom
@@ -375,50 +329,7 @@ class Base extends CoreBase {
         return this._vdom;
     }
     set vdom(value) {
-        let me       = this,
-            app      = Neo.apps[me.appName],
-            vdom     = value,
-            vdomRoot = me.getVdomRoot(),
-            listenerId;
-
-        if (vdomRoot && me.cls) {
-            vdomRoot.cls = me.cls;
-        }
-
-        // It is important to keep the vdom tree stable to ensure that containers do not lose the references to their
-        // child vdom trees. The if case should not happen, but in case it does, keeping the reference and merging
-        // the content over seems to be the best strategy
-        if (me._vdom !== vdom) {
-            Logger.warn('vdom got replaced for: ' + me.id + '. Copying the content into the reference holder object');
-
-            Object.keys(me._vdom).forEach(key => {
-                delete me._vdom[key];
-            });
-
-            Object.assign(me._vdom, vdom);
-        } else {
-            me._vdom = vdom;
-        }
-
-        if (me.silentVdomUpdate) {
-            me.needsVdomUpdate = true;
-        } else {
-            if (!me.mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
-                me.hasRenderingListener = true;
-
-                listenerId = app.on('mounted', () => {
-                    app.un('mounted', listenerId);
-
-                    setTimeout(() => {
-                        me.vnode && me.updateVdom(me.vdom, me.vnode);
-                    }, 50);
-                });
-            } else if (me.mounted) {
-                me.vnode && me.updateVdom(vdom, me.vnode);
-            }
-
-            me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted;
-        }
+        this.afterSetVdom(value, value);
     }
 
     /**
@@ -474,6 +385,38 @@ class Base extends CoreBase {
         value && Neo.currentWorker.insertThemeFiles(value, this.__proto__);
     }
 
+    /**
+     * Triggered after the cls config got changed
+     * @param {String[]|null} value
+     * @param {String[]|null} oldValue
+     * @protected
+     */
+    afterSetCls(value, oldValue) {
+        oldValue = oldValue ? oldValue : [];
+        value    = value    ? value    : [];
+
+        let me       = this,
+            vdom     = me.vdom,
+            vdomRoot = me.getVdomRoot(),
+            cls;
+
+        if (vdom !== vdomRoot) {
+            // we are using a wrapper node
+            vdomRoot.cls = [...value];
+        } else {
+            // we need to merge changes
+            cls = [...me.wrapperCls, ...value];
+            NeoArray.remove(cls, NeoArray.difference(oldValue, value));
+            vdom.cls = cls;
+        }
+
+        if (me.isVdomUpdating || me.silentVdomUpdate) {
+            me.needsVdomUpdate = true;
+        } else if (me.mounted) {
+            me.updateCls(value, oldValue, vdomRoot.id);
+        }
+    }
+
     /**
      * Triggered after any config got changed
      * @param {String} key
@@ -667,6 +610,18 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the style config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @protected
+     */
+    afterSetStyle(value, oldValue) {
+        if (!(!value && oldValue === undefined)) {
+            this.updateStyle(value, oldValue);
+        }
+    }
+
     /**
      * Triggered after the tooltips config got changed
      * @param {Boolean} value
@@ -687,6 +642,54 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the vdom config got changed
+     * @param {Object} value
+     * @param {Object|null} oldValue
+     * @protected
+     */
+    afterSetVdom(value, oldValue) {
+        let me   = this,
+            app  = Neo.apps[me.appName],
+            vdom = value,
+            listenerId;
+
+        // It is important to keep the vdom tree stable to ensure that containers do not lose the references to their
+        // child vdom trees. The if case should not happen, but in case it does, keeping the reference and merging
+        // the content over seems to be the best strategy
+        if (me._vdom !== vdom) {
+            Logger.warn('vdom got replaced for: ' + me.id + '. Copying the content into the reference holder object');
+
+            Object.keys(me._vdom).forEach(key => {
+                delete me._vdom[key];
+            });
+
+            Object.assign(me._vdom, vdom);
+        } else {
+            me._vdom = vdom;
+        }
+
+        if (me.silentVdomUpdate) {
+            me.needsVdomUpdate = true;
+        } else {
+            if (!me.mounted && me.isConstructed && !me.hasRenderingListener && app?.rendering === true) {
+                me.hasRenderingListener = true;
+
+                listenerId = app.on('mounted', () => {
+                    app.un('mounted', listenerId);
+
+                    setTimeout(() => {
+                        me.vnode && me.updateVdom(me.vdom, me.vnode);
+                    }, 50);
+                });
+            } else if (me.mounted) {
+                me.vnode && me.updateVdom(vdom, me.vnode);
+            }
+
+            me.hasUnmountedVdomChanges = !me.mounted && me.hasBeenMounted;
+        }
+    }
+
     /**
      * Triggered after the vnode config got changed
      * @param {Object} value
@@ -709,6 +712,46 @@ class Base extends CoreBase {
         this.changeVdomRootKey('width', value);
     }
 
+    /**
+     * Triggered after the wrapperCls config got changed
+     * @param {String[]|null} value
+     * @param {String[]|null} oldValue
+     * @protected
+     */
+    afterSetWrapperCls(value, oldValue) {
+        oldValue = oldValue ? oldValue : [];
+        value    = value    ? value    : [];
+
+        let me       = this,
+            vdom     = me.vdom,
+            vdomRoot = me.getVdomRoot(),
+            cls      = me.vdom?.cls || [];
+
+        if (vdom === vdomRoot) {
+            // we need to merge changes
+            cls = [...cls, ...value];
+            NeoArray.remove(cls, NeoArray.difference(oldValue, value));
+            vdom.cls = cls;
+
+        } else {
+            // we are not using a wrapper => cls & wrapperCls share the same node
+            value = value ? value : [];
+
+            oldValue && NeoArray.remove(cls, oldValue);
+            NeoArray.add(cls, value);
+
+            if (vdom) {
+                vdom.cls = cls;
+            }
+        }
+
+        if (me.isVdomUpdating || me.silentVdomUpdate) {
+            me.needsVdomUpdate = true;
+        } else if (me.mounted) {
+            me.updateCls(value, oldValue);
+        }
+    }
+
     /**
      * Triggered after the wrapperStyle config got changed
      * @param {Object} value
@@ -729,6 +772,15 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered when accessing the cls config
+     * @param {String[]|null} value
+     * @protected
+     */
+    beforeGetCls(value) {
+        return value ? [...value]: [];
+    }
+
     /**
      * Triggered when accessing the data config
      * Convenience shortcut which is expensive to use,
@@ -740,6 +792,24 @@ class Base extends CoreBase {
         return this.getModel().getHierarchyData();
     }
 
+    /**
+     * Triggered when accessing the style config
+     * @param {Object} value
+     * @protected
+     */
+    beforeGetStyle(value) {
+        return {...value};
+    }
+
+    /**
+     * Triggered when accessing the wrapperCls config
+     * @param {String[]|null} value
+     * @protected
+     */
+    beforeGetWrapperCls(value) {
+        return value ? [...value]: [];
+    }
+
     /**
      * Triggered when accessing the wrapperStyle config
      * @param {Object} value
@@ -1198,13 +1268,11 @@ class Base extends CoreBase {
         // avoid any interference on prototype level
         // does not clone existing Neo instances
         me._vdom = Neo.clone(vdom, true, true);
-        me.cls   = config.cls;
 
         me[Neo.isEmpty(config.style) ? '_style' : 'style'] = config.style;
 
         me.wrapperStyle = Neo.clone(config.wrapperStyle, false);
 
-        delete config.cls;
         delete config.style;
         delete config._vdom;
         delete config.vdom;
@@ -1648,28 +1716,30 @@ class Base extends CoreBase {
 
     /**
      * Delta updates for the cls config. Gets called after the cls config gets changed in case the component is mounted.
-     * @param {Array} cls
-     * @param {Array} oldCls
+     * @param {String[]} cls
+     * @param {String[]} oldCls
+     * @param {String} id=this.id
      * @protected
      */
-    updateCls(cls, oldCls) {
-        let me    = this,
-            vnode = me.vnode,
+    updateCls(cls, oldCls, id=this.id) {
+        let me          = this,
+            vnode       = me.vnode,
+            vnodeTarget = VNodeUtil.findChildVnode(me.vnode, {id})?.vnode,
             opts;
 
         if (!Neo.isEqual(cls, oldCls)) {
-            if (vnode) {
-                vnode.className = cls; // keep the vnode in sync
+            if (vnodeTarget) {
+                vnodeTarget.className = cls; // keep the vnode in sync
                 me.vnode = vnode;
             }
 
             opts = {
                 action: 'updateDom',
                 deltas: [{
-                    id : me.id,
+                    id,
                     cls: {
-                        add   : Neo.util.Array.difference(cls, oldCls),
-                        remove: Neo.util.Array.difference(oldCls, cls)
+                        add   : NeoArray.difference(cls, oldCls),
+                        remove: NeoArray.difference(oldCls, cls)
                     }
                 }]
             };

package/src/container/Base.mjs

@@ -171,10 +171,11 @@ class Base extends Component {
 
     /**
      * @param {Object|String} value
+     * @param {Object|String|Neo.layout.Base} oldValue
      * @returns {Neo.layout.Base}
      * @protected
      */
-    beforeSetLayout(value) {
+    beforeSetLayout(value, oldValue) {
         return this.createLayout(value);
     }
 
@@ -458,8 +459,7 @@ class Base extends Component {
             if (config.ntype.indexOf('layout-') < 0) {
                 config.ntype = 'layout-' + config.ntype;
             }
-        }
-        else if (config.indexOf('layout-') < 0) {
+        } else if (config.indexOf('layout-') < 0) {
             config = {
                 ntype: 'layout-' + config
             };

package/src/draggable/toolbar/DragZone.mjs

@@ -47,15 +47,14 @@ class DragZone extends BaseDragZone {
     adjustToolbarItemCls(draggable) {
         let me    = this,
             owner = me.owner,
-            vdom  = owner.vdom;
+            wrapperCls;
 
-        vdom.cn.forEach(item => {
-            item.cls = item.cls || [];
+        owner.items.forEach(item => {
+            wrapperCls = item.wrapperCls || [];
 
-            NeoArray[draggable ? 'add' : 'remove'](item.cls, 'neo-draggable');
+            NeoArray[draggable ? 'add' : 'remove'](wrapperCls, 'neo-draggable');
+            item.wrapperCls = wrapperCls;
         });
-
-        owner.vdom = vdom;
     }
 
     /**

package/src/form/field/Text.mjs

@@ -893,11 +893,13 @@ class Text extends Base {
     onFocusLeave(data) {
         let me             = this,
             centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
+            cls            = me.cls,
             vdom           = me.vdom;
 
         me.validate(); // silent
 
-        NeoArray.remove(me._cls, 'neo-focus');
+        NeoArray.remove(cls, 'neo-focus');
+        me.cls = cls;
 
         if (centerBorderEl && me.isEmpty()) {
             delete centerBorderEl.width;

package/src/layout/Base.mjs

@@ -44,33 +44,31 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetAppName(value, oldValue) {
-        if (value) {
-            Neo.currentWorker.insertThemeFiles(value, this.__proto__);
-        }
+        value && Neo.currentWorker.insertThemeFiles(value, this.__proto__);
     }
 
     /**
-     * Placeholder Method
+     * Placeholder method
      * @param {Neo.component.Base} item
      * @protected
      */
     applyChildAttributes(item) {}
 
     /**
-     * Placeholder Method
+     * Placeholder method
      * @protected
      */
     applyRenderAttributes() {}
 
     /**
-     * Placeholder Method
+     * Placeholder method
      * @param {Neo.component.Base} item
      * @protected
      */
     removeChildAttributes(item) {}
 
     /**
-     * Placeholder Method
+     * Placeholder method
      * @protected
      */
     removeRenderAttributes() {}

package/src/layout/Card.mjs

@@ -9,16 +9,16 @@ class Card extends Base {
     static getStaticConfig() {return {
         /*
          * The name of the CSS class for an active item inside the card layout
-         * @member activeItemCls
+         * @member {String} activeItemCls='neo-active-item'
          * @static
          */
-        activeItemCls: 'active-item',
+        activeItemCls: 'neo-active-item',
         /*
          * The name of the CSS class for an inactive item inside the card layout
-         * @member inactiveItemCls
+         * @member {String} inactiveItemCls='neo-inactive-item'
          * @static
          */
-        inactiveItemCls: 'inactive-item',
+        inactiveItemCls: 'neo-inactive-item',
         /*
          * The name of the CSS class for an item inside the card layout
          * @member itemCls
@@ -67,7 +67,7 @@ class Card extends Base {
             sCfg                = me.getStaticConfig(),
             needsUpdate         = false,
             removeInactiveCards = me.removeInactiveCards,
-            cls, i, isActiveIndex, item, items, len, module, proto, vdom;
+            i, isActiveIndex, item, items, len, module, proto, vdom, wrapperCls;
 
         if (Neo.isNumber(value) && container) {
             items = container.items;
@@ -94,35 +94,32 @@ class Card extends Base {
                 module        = item.module;
 
                 if (isActiveIndex && !module?.isClass && Neo.isFunction(module)) {
-                    module = await module();
-                    module = module.default;
-                    proto  = module.prototype;
-                    cls    = item.cls || proto.constructor.config.cls || [];
+                    module     = await module();
+                    module     = module.default;
+                    proto      = module.prototype;
+                    wrapperCls = item.wrapperCls || proto.constructor.config.wrapperCls || [];
 
-                    item.className = proto.className;
-                    item.cls       = [...cls, sCfg.itemCls]
-                    item.module    = module;
+                    item.className  = proto.className;
+                    item.wrapperCls = [...wrapperCls, sCfg.itemCls];
+                    item.module     = module;
 
                     delete item.vdom;
 
                     items[i] = item = Neo.create(item);
 
-                    container.fire('cardLoaded', {
-                        item: item
-                    });
+                    container.fire('cardLoaded', {item});
 
                     vdom.cn[i] = item.vdom;
                 }
 
                 if (item instanceof Neo.core.Base) {
-                    cls = item.cls;
+                    wrapperCls = item.wrapperCls;
 
-                    NeoArray.remove(cls, isActiveIndex ? sCfg.inactiveItemCls : sCfg.activeItemCls);
-                    NeoArray.add(   cls, isActiveIndex ? sCfg.activeItemCls   : sCfg.inactiveItemCls);
+                    NeoArray.remove(wrapperCls, isActiveIndex ? sCfg.inactiveItemCls : sCfg.activeItemCls);
+                    NeoArray.add(   wrapperCls, isActiveIndex ? sCfg.activeItemCls   : sCfg.inactiveItemCls);
 
                     if (removeInactiveCards || needsUpdate) {
-                        item._cls = cls; // silent update
-                        item.getVdomRoot().cls = cls;
+                        item.wrapperCls = wrapperCls;
 
                         if (isActiveIndex) {
                             delete item.vdom.removeDom;
@@ -132,7 +129,7 @@ class Card extends Base {
                             item.vdom.removeDom = true;
                         }
                     } else {
-                        item.cls = cls;
+                        item.wrapperCls = wrapperCls;
                     }
                 }
             }
@@ -153,18 +150,18 @@ class Card extends Base {
         let me            = this,
             isActiveIndex = me.activeIndex === index,
             sCfg          = me.getStaticConfig(),
-            childCls      = item.cls,
+            childCls      = item.wrapperCls,
             vdom          = item.vdom;
 
         NeoArray.add(childCls, sCfg.itemCls);
         NeoArray.add(childCls, isActiveIndex ? sCfg.activeItemCls : sCfg.inactiveItemCls);
 
         if (!keepInDom && me.removeInactiveCards) {
-            item._cls = childCls; // silent update
-            vdom.removeDom = !isActiveIndex;
+            item.wrapperCls = childCls;
+            vdom.removeDom  = !isActiveIndex;
             item.vdom = vdom;
         } else {
-            item.cls = childCls;
+            item.wrapperCls = childCls;
         }
     }
 
@@ -172,17 +169,17 @@ class Card extends Base {
      * Applies CSS classes to the container this layout is bound to
      */
     applyRenderAttributes() {
-        let me        = this,
-            container = Neo.getComponent(me.containerId),
-            cls       = container?.cls || [];
+        let me         = this,
+            container  = Neo.getComponent(me.containerId),
+            wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
             Neo.logError('layout.Card: applyRenderAttributes -> container not yet created', me.containerId);
         }
 
-        NeoArray.add(cls, 'neo-layout-card');
+        NeoArray.add(wrapperCls, 'neo-layout-card');
 
-        container.cls = cls;
+        container.wrapperCls = wrapperCls;
     }
 
     /**
@@ -190,17 +187,17 @@ class Card extends Base {
      * Gets called when switching to a different layout.
      */
     removeRenderAttributes() {
-        let me        = this,
-            container = Neo.getComponent(me.containerId),
-            cls       = container?.cls || [];
+        let me         = this,
+            container  = Neo.getComponent(me.containerId),
+            wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
             Neo.logError('layout.Card: removeRenderAttributes -> container not yet created', me.containerId);
         }
 
-        NeoArray.remove(cls, 'neo-layout-card');
+        NeoArray.remove(wrapperCls, 'neo-layout-card');
 
-        container.cls = cls;
+        container.wrapperCls = wrapperCls;
     }
 }