neo.mjs 4.2.7 → 4.3.1

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
@@ -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={}
@@ -375,16 +346,11 @@ class Base extends CoreBase {
         return this._vdom;
     }
     set vdom(value) {
-        let me       = this,
-            app      = Neo.apps[me.appName],
-            vdom     = value,
-            vdomRoot = me.getVdomRoot(),
+        let me   = this,
+            app  = Neo.apps[me.appName],
+            vdom = value,
             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
@@ -432,6 +398,22 @@ class Base extends CoreBase {
         this.cls = cls;
     }
 
+    /**
+     * Convenience shortcut to add additional dom listeners
+     * @param {Object|Object[]} value
+     */
+    addDomListeners(value) {
+        if (!Array.isArray(value)) {
+            value = [value];
+        }
+
+        let domListeners = this.domListeners;
+
+        domListeners.push(...value);
+
+        this.domListeners = domListeners;
+    }
+
     /**
      * Either a string like 'color: red; background-color: blue;'
      * or an object containing style attributes
@@ -458,6 +440,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
@@ -693,6 +707,39 @@ 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) {
+        let me       = this,
+            vdom     = me.vdom,
+            vdomRoot = me.getVdomRoot(),
+            cls      = me.vdom?.cls || [];
+
+        if (vdom === vdomRoot) {
+            // we are not using a wrapper => cls & wrapperCls share the same node
+            me.afterSetCls(me._cls, me._cls);
+        } else {
+            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
@@ -713,6 +760,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,
@@ -724,6 +780,15 @@ class Base extends CoreBase {
         return this.getModel().getHierarchyData();
     }
 
+    /**
+     * 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
@@ -1182,13 +1247,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;
@@ -1632,28 +1695,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/component/Carousel.mjs

@@ -99,24 +99,12 @@ class Carousel extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
-
-        domListeners.push({
-            click: {
-                fn      : me.onCarouselBtnClick,
-                delegate: '.neo-carousel-btn',
-                scope   : me
-            }
-        }, {
-            click: {
-                fn      : me.onClick,
-                delegate: '.neo-carousel-item',
-                scope   : me
-            }
-        });
+        let me = this;
 
-        me.domListeners = domListeners;
+        me.addDomListeners([
+            {click: me.onCarouselBtnClick, delegate: '.neo-carousel-btn',  scope: me},
+            {click: me.onClick,            delegate: '.neo-carousel-item', scope: me}
+        ]);
     }
 
     /**

package/src/component/Chip.mjs

@@ -63,19 +63,14 @@ class Chip extends Component {
     construct(config) {
         super.construct(config);
 
-        let me = this,
-            domListeners;
+        let me = this;
 
         if (me.useDomListeners) {
-            domListeners = me.domListeners;
-
-            domListeners.push({
+            me.addDomListeners({
                 click   : me.onCloseButtonClick,
                 delegate: 'neo-chip-close-button',
                 scope   : me
             });
-
-            me.domListeners = domListeners;
         }
     }
 

package/src/component/Circle.mjs

@@ -132,9 +132,8 @@ class Circle extends Component {
             cls : ['neo-circle', 'neo-circle-back']
         });
 
-        let me           = this,
-            domListeners = me.domListeners,
-            vdom         = me.vdom;
+        let me   = this,
+            vdom = me.vdom;
 
         if (!me.backsideIconPath) {
             me.backsideIconPath = Neo.config.resourcesPath + 'images/circle/';
@@ -144,7 +143,7 @@ class Circle extends Component {
             me.itemImagePath = Neo.config.resourcesPath + 'examples/';
         }
 
-        domListeners.push({
+        me.addDomListeners([{
             mouseenter: me.expand,
             mouseleave: me.collapse,
             scope     : me
@@ -166,9 +165,7 @@ class Circle extends Component {
             wheel      : me.onMouseWheel,
             delegate   : 'neo-circle',
             scope      : me
-        });
-
-        me.domListeners = domListeners;
+        }]);
 
         me.store = Neo.create(Collection, {
             keyProperty: 'id'

package/src/component/DateSelector.mjs

@@ -143,15 +143,12 @@ class DateSelector extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
-
-        domListeners.push({
-            click: {fn: me.onComponentClick, scope: me},
-            wheel: {fn: me.onComponentWheel, scope: me}
-        });
+        let me = this;
 
-        me.domListeners = domListeners;
+        me.addDomListeners([
+            {click: me.onComponentClick, scope: me},
+            {wheel: me.onComponentWheel, scope: me}
+        ]);
 
         me.updateHeaderMonth(0, 0, true);
         me.updateHeaderYear(0, true);

package/src/component/Gallery.mjs

@@ -176,18 +176,15 @@ class Gallery extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = Neo.clone(me.domListeners, true);
+        let me = this;
 
         me[itemsMounted] = false;
 
-        domListeners.push({
+        me.addDomListeners({
             click: me.onClick,
             wheel: me.onMouseWheel,
             scope: me
         });
-
-        me.domListeners = domListeners;
     }
 
     /**
@@ -579,8 +576,8 @@ class Gallery extends Component {
         let me = this;
 
         if (me.mouseWheelEnabled) {
-            me._translateX = me.translateX - (me.deltaX * me.mouseWheelDeltaX); // silent update
-            me._translateZ = me.translateZ + (me.deltaY * me.mouseWheelDeltaY); // silent update
+            me._translateX = me.translateX - (data.deltaX * me.mouseWheelDeltaX); // silent update
+            me._translateZ = me.translateZ + (data.deltaY * me.mouseWheelDeltaY); // silent update
 
             me.moveOrigin();
 

package/src/component/Helix.mjs

@@ -252,8 +252,7 @@ class Helix extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = Neo.clone(me.domListeners, true);
+        let me = this;
 
         me[itemsMounted] = false;
         me[lockWheel]    = false;
@@ -262,13 +261,11 @@ class Helix extends Component {
             me.imageSource = Neo.config.resourcesPath + 'examples/';
         }
 
-        domListeners.push({
+        me.addDomListeners({
             click: me.onClick,
             wheel: me.onMouseWheel,
             scope: me
         });
-
-        me.domListeners = domListeners;
     }
 
     /**

package/src/component/Splitter.mjs

@@ -74,15 +74,12 @@ class Splitter extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners([
             {'drag:end'  : me.onDragEnd,   scope: me},
             {'drag:start': me.onDragStart, scope: me}
-        );
-
-        me.domListeners = domListeners;
+        ]);
     }
 
     /**

package/src/component/mwc/Button.mjs

@@ -99,13 +99,10 @@ class Button extends Component {
      * @protected
      */
     afterSetHandler(value, oldValue) {
-        if (value) {
-            let me           = this,
-                domListeners = me.domListeners;
-
-            domListeners.push({click: value, scope: me});
-            me.domListeners = domListeners;
-        }
+        value && this.addDomListeners({
+            click: value,
+            scope: this
+        });
     }
 
     /**

package/src/component/mwc/TextField.mjs

@@ -77,14 +77,11 @@ class TextField extends Component {
             Neo.main.addon.Mwc.loadTextFieldModule();
         }
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners(
             {input: me.onInputValueChange, scope: me}
         );
-
-        me.domListeners = domListeners;
     }
 
     /**

package/src/draggable/DropZone.mjs

@@ -28,17 +28,13 @@ class DropZone extends Base {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            owner        = me.owner,
-            domListeners = owner.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.owner.addDomListeners([
             {'drop'      : me.onDrop,      scope: me},
             {'drop:enter': me.onDropEnter, scope: me},
             {'drop:leave': me.onDropLeave, scope: me}
-        );
-
-        owner.domListeners = domListeners;
+        ]);
     }
 
     /**

package/src/draggable/list/DragZone.mjs

@@ -32,18 +32,15 @@ class DragZone extends BaseDragZone {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            owner        = me.owner,
-            domListeners = owner.domListeners,
-            opts         = {delegate: '.neo-draggable', scope: me},
-            store        = owner.store;
+        let me    = this,
+            owner = me.owner,
+            opts  = {delegate: '.neo-draggable', scope: me},
+            store = owner.store;
 
-        domListeners.push(
+        owner.addDomListeners([
             {'drag:end'  : me.onDragEnd,   ...opts},
             {'drag:start': me.onDragStart, ...opts}
-        );
-
-        owner.domListeners = domListeners;
+        ]);
 
         store.on({
             load : me.onStoreLoad,

package/src/draggable/toolbar/DragZone.mjs

@@ -26,18 +26,15 @@ class DragZone extends BaseDragZone {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            owner        = me.owner,
-            domListeners = owner.domListeners,
-            opts         = {delegate: '.neo-draggable', scope: me};
+        let me    = this,
+            owner = me.owner,
+            opts  = {delegate: '.neo-draggable', scope: me};
 
-        domListeners.push(
+        owner.addDomListeners([
             {'drag:end'  : me.onDragEnd,   ...opts},
             {'drag:move' : me.onDragMove,  ...opts},
             {'drag:start': me.onDragStart, ...opts}
-        );
-
-        owner.domListeners = domListeners;
+        ]);
 
         owner.on('insert', me.onItemInsert, me);
 

package/src/form/Fieldset.mjs

@@ -126,9 +126,8 @@ class Fieldset extends Container {
      * @protected
      */
     afterSetCollapsible(value, oldValue) {
-        let me           = this,
-            cls          = me.cls,
-            domListeners = me.domListeners || [];
+        let me  = this,
+            cls = me.cls;
 
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-collapsible');
         me.cls = cls;
@@ -140,12 +139,10 @@ class Fieldset extends Container {
         if (value && !me.hasLabelClickListener) {
             me.hasLabelClickListener = true;
 
-            domListeners.push({
+            me.addDomListeners({
                 click   : me.onLegendClick,
                 delegate: 'neo-legend'
             });
-
-            me.domListeners = domListeners;
         }
     }
 

package/src/form/field/CheckBox.mjs

@@ -75,14 +75,11 @@ class CheckBox extends Base {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners(
             {change: me.onInputValueChange, scope: me}
         );
-
-        me.domListeners = domListeners;
     }
 
     /**

package/src/form/field/Range.mjs

@@ -51,20 +51,17 @@ class Range extends Number {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners,
-            inputEl      = me.vdom.cn[1];
+        let me      = this,
+            inputEl = me.vdom.cn[1];
 
         if (me.useInputEvent) {
-            domListeners.push({
+            me.addDomListeners({
                 input: {
                     fn    : me.onInputValueChange,
                     id    : me.vdom.cn[1].id,
                     scope : me
                 }
             });
-
-            me.domListeners = domListeners;
         }
 
         inputEl.cls = ['neo-rangefield-input']; // replace neo-textfield-input

package/src/form/field/Text.mjs

@@ -151,14 +151,11 @@ class Text extends Base {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners(
             {input: me.onInputValueChange, scope: me}
         );
-
-        me.domListeners = domListeners;
     }
 
     /**