neo.mjs 4.2.7 → 4.3.1

package/src/form/field/trigger/Base.mjs

@@ -81,28 +81,20 @@ class Base extends Component {
     construct(config) {
         super.construct(config);
 
-        let me             = this,
-            domListeners   = me.domListeners || [],
-            fieldListeners;
+        let me = this;
 
-        domListeners.push(
+        me.addDomListeners(
             {click: me.onTriggerClick, scope: me}
         );
 
-        me.domListeners = domListeners;
-
         if (me.showOnHover) {
             me.hidden = true;
 
             me.field.on('constructed', () => {
-                fieldListeners = me.field.domListeners || [];
-
-                fieldListeners.push(
+                me.field.addDomListeners([
                     {mouseenter: me.onMouseEnter, scope: me},
                     {mouseleave: me.onMouseLeave, scope: me}
-                );
-
-                me.field.domListeners = fieldListeners;
+                ]);
             }, me);
         }
     }

package/src/grid/header/Button.mjs

@@ -68,15 +68,12 @@ class Button extends BaseButton {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push({
+        me.addDomListeners({
             click: me.onButtonClick,
             scope: me
-        })
-
-        me.domListeners = domListeners;
+        });
     }
 
     /**

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;
     }
 }
 

package/src/layout/Fit.mjs

@@ -26,7 +26,7 @@ class Fit extends Base {
      */
     applyChildAttributes(child, index) {
         if (!child.ignoreLayout) {
-            child.cls = NeoArray.union(child.cls, 'neo-layout-fit-item');
+            child.wrapperCls = NeoArray.union(child.wrapperCls, 'neo-layout-fit-item');
         }
     }
 
@@ -34,17 +34,17 @@ class Fit 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.Fit: applyRenderAttributes -> container not yet created', me.containerId);
         }
 
-        NeoArray.add(cls, 'neo-layout-fit');
+        NeoArray.add(wrapperCls, 'neo-layout-fit');
 
-        container.cls = cls;
+        container.wrapperCls = wrapperCls;
     }
 
     /**
@@ -52,17 +52,17 @@ class Fit 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.Fit: removeRenderAttributes -> container not yet created', me.containerId);
         }
 
-        NeoArray.remove(cls, 'neo-layout-fit');
+        NeoArray.remove(wrapperCls, 'neo-layout-fit');
 
-        container.cls = cls;
+        container.wrapperCls = wrapperCls;
     }
 }
 

package/src/layout/Flexbox.mjs

@@ -130,31 +130,23 @@ class Flexbox extends Base {
      * Applies CSS classes to the container this layout is bound to
      */
     applyRenderAttributes() {
-        let me        = this,
-            container = Neo.getComponent(me.containerId),
-            prefix    = me.prefix,
-            cls       = container?.cls || [];
+        let me         = this,
+            container  = Neo.getComponent(me.containerId),
+            prefix     = me.prefix,
+            wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
             Neo.logError('layout.Flexbox: applyRenderAttributes -> container not yet created', me.containerId);
         }
 
-        NeoArray.add(cls, prefix + 'container');
+        NeoArray.add(wrapperCls, prefix + 'container');
 
-        if (me.align) {
-            NeoArray.add(cls, prefix + 'align-' + me.align);
-        }
-        if (me.direction) {
-            NeoArray.add(cls, prefix + 'direction-' + me.direction);
-        }
-        if (me.pack) {
-            NeoArray.add(cls, prefix + 'pack-' + me.pack);
-        }
-        if (me.wrap) {
-            NeoArray.add(cls, prefix + 'wrap-' + me.wrap);
-        }
+        me.align     && NeoArray.add(wrapperCls, prefix + 'align-'     + me.align);
+        me.direction && NeoArray.add(wrapperCls, prefix + 'direction-' + me.direction);
+        me.pack      && NeoArray.add(wrapperCls, prefix + 'pack-'      + me.pack);
+        me.wrap      && NeoArray.add(wrapperCls, prefix + 'wrap-'      + me.wrap);
 
-        container.cls = cls;
+        container.wrapperCls = wrapperCls;
     }
 
     /**
@@ -220,31 +212,31 @@ class Flexbox extends Base {
      * @protected
      */
     removeRenderAttributes() {
-        let me        = this,
-            container = Neo.getComponent(me.containerId),
-            prefix    = me.prefix,
-            cls       = container?.cls || [];
+        let me         = this,
+            container  = Neo.getComponent(me.containerId),
+            prefix     = me.prefix,
+            wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
             Neo.logError('layout.Flexbox: removeRenderAttributes -> container not yet created', me.containerId);
         }
 
-        NeoArray.remove(cls, prefix + 'container');
+        NeoArray.remove(wrapperCls, prefix + 'container');
 
         if (me.align) {
-            NeoArray.remove(cls, prefix + 'align-' + me.align);
+            NeoArray.remove(wrapperCls, prefix + 'align-' + me.align);
         }
         if (me.direction) {
-            NeoArray.remove(cls, prefix + 'direction-' + me.direction);
+            NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction);
         }
         if (me.pack) {
-            NeoArray.remove(cls, prefix + 'pack-' + me.pack);
+            NeoArray.remove(wrapperCls, prefix + 'pack-' + me.pack);
         }
         if (me.wrap) {
-            NeoArray.remove(cls, prefix + 'wrap-' + me.wrap);
+            NeoArray.remove(wrapperCls, prefix + 'wrap-' + me.wrap);
         }
 
-        container.cls = cls;
+        container.wrapperCls = wrapperCls;
     }
 
     /**
@@ -268,26 +260,26 @@ class Flexbox extends Base {
     }
 
     /**
-     * Updates the Container CSS cls
+     * Updates the Container CSS wrapperCls
      * @param {String|null} value
      * @param {String|null} oldValue
      * @param {String} propertyName
      * @protected
      */
     updateInputValue(value, oldValue, propertyName) {
-        let me        = this,
-            container = Neo.getComponent(me.containerId),
-            prefix    = me.prefix,
-            cls       = container?.cls;
+        let me         = this,
+            container  = Neo.getComponent(me.containerId),
+            prefix     = me.prefix,
+            wrapperCls = container?.wrapperCls;
 
         if (container?.rendered) {
-            NeoArray.remove(cls, prefix + propertyName + '-' + oldValue);
+            NeoArray.remove(wrapperCls, prefix + propertyName + '-' + oldValue);
 
             if (value !== null) {
-                NeoArray.add(cls, prefix + propertyName + '-' + value);
+                NeoArray.add(wrapperCls, prefix + propertyName + '-' + value);
             }
 
-            container.cls = cls;
+            container.wrapperCls = wrapperCls;
         }
     }
 }

package/src/layout/HBox.mjs

@@ -25,7 +25,7 @@ class HBox extends Flexbox {
 
     /**
      * Applies the flex value to an item of the container this layout is bound to
-     * @param {Object} item
+     * @param {Neo.component.Base} item
      */
     applyChildAttributes(item) {
         // Do not apply flex if fixed width

package/src/layout/VBox.mjs

@@ -25,7 +25,7 @@ class VBox extends Flexbox {
 
     /**
      * Applies the flex value to an item of the container this layout is bound to
-     * @param {Object} item
+     * @param {Neo.component.Base} item
      */
     applyChildAttributes(item) {
         // Do not apply flex if fixed height

package/src/list/Base.mjs

@@ -30,9 +30,9 @@ class Base extends Component {
          */
         autoDestroyStore: true,
         /**
-         * @member {String[]} cls=['neo-list-container','neo-list']
+         * @member {String[]} cls=['neo-list']
          */
-        cls: ['neo-list-container', 'neo-list'],
+        cls: ['neo-list'],
         /**
          * @member {Boolean} disableSelection_=false
          */
@@ -106,7 +106,11 @@ class Base extends Component {
          */
         useCheckBoxes_: false,
         /**
-         * @member {Object} _vdom={tag:'ul',cn:[]}
+         * @member {Boolean} useWrapperNode_=false
+         */
+        useWrapperNode_: false,
+        /**
+         * @member {Object} _vdom
          */
         _vdom:
         {tag: 'ul', cn: []}
@@ -118,14 +122,12 @@ class Base extends Component {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.domListeners;
+        let me = this;
 
-        domListeners.push({
-            click: {fn: me.onClick, scope: me}
+        me.addDomListeners({
+            click: me.onClick,
+            scope: me
         });
-
-        me.domListeners = domListeners;
     }
 
     /**
@@ -225,6 +227,24 @@ class Base extends Component {
         me.cls = cls;
     }
 
+    /**
+     * Triggered after the useWrapperNode config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetUseWrapperNode(value, oldValue) {
+        let me         = this,
+            cls        = me.cls,
+            wrapperCls = me.wrapperCls;
+
+        NeoArray[value ? 'add' : 'remove'](cls, 'neo-use-wrapper-node');
+        NeoArray[value ? 'add' : 'remove'](wrapperCls, 'neo-list-wrapper');
+
+        me.wrapperCls = wrapperCls;
+        me.cls        = cls;
+    }
+
     /**
      * Triggered before the selectionModel config gets changed.
      * @param {Neo.selection.Model} value
@@ -273,7 +293,7 @@ class Base extends Component {
 
         item = {
             tag     : me.itemTagName,
-            cls     : cls,
+            cls,
             id      : itemId,
             tabIndex: -1
         };
@@ -343,7 +363,7 @@ class Base extends Component {
      */
     createItems(silent=false) {
         let me   = this,
-            vdom = me.vdom,
+            vdom = me.getVdomRoot(),
             listItem;
 
         if (!(me.animate && !me.getPlugin('animate'))) {

package/src/plugin/Resizable.mjs

@@ -175,10 +175,9 @@ class Resizable extends Base {
     construct(config) {
         super.construct(config);
 
-        let me           = this,
-            domListeners = me.owner.domListeners;
+        let me = this;
 
-        domListeners.push(
+        me.owner.addDomListeners([
             {'drag:end'  : me.onDragEnd,    scope: me, delegate: '.neo-resizable'},
             {'drag:move' : me.onDragMove,   scope: me, delegate: '.neo-resizable'},
             {'drag:start': me.onDragStart,  scope: me, delegate: '.neo-resizable'},
@@ -186,9 +185,7 @@ class Resizable extends Base {
             {mousemove   : me.onMouseMove,  scope: me, local   : true},
             {mouseleave  : me.onMouseLeave, scope: me, delegate: `.${me.delegationCls}`},
             {mouseup     : me.onMouseUp,    scope: me, delegate: '.neo-resizable'}
-        );
-
-        me.owner.domListeners = domListeners;
+        ]);
     }
 
     /**

package/src/selection/grid/CellModel.mjs

@@ -27,17 +27,14 @@ class CellModel extends Model {
      *
      */
     addDomListener() {
-        let me           = this,
-            view         = me.view,
-            domListeners = view.domListeners;
+        let me   = this,
+            view = me.view;
 
-        domListeners.push({
+        view.addDomListeners({
             click   : me.onCellClick,
             delegate: '.neo-grid-cell',
             scope   : me
         });
-
-        view.domListeners = domListeners;
     }
 
     /**

package/src/selection/grid/ColumnModel.mjs

@@ -28,17 +28,14 @@ class ColumnModel extends Model {
      *
      */
     addDomListener() {
-        let me           = this,
-            view         = me.view,
-            domListeners = view.domListeners;
+        let me   = this,
+            view = me.view;
 
-        domListeners.push({
+        view.addDomListeners({
             click   : me.onCellClick,
             delegate: '.neo-grid-cell',
             scope   : me
         });
-
-        view.domListeners = domListeners;
     }
 
     /**

package/src/selection/grid/RowModel.mjs

@@ -28,17 +28,14 @@ class RowModel extends Model {
      *
      */
     addDomListener() {
-        let me           = this,
-            view         = me.view,
-            domListeners = view.domListeners;
+        let me   = this,
+            view = me.view;
 
-        domListeners.push({
+        view.addDomListeners({
             click   : me.onRowClick,
             delegate: '.neo-grid-row',
             scope   : me
         });
-
-        view.domListeners = domListeners;
     }
 
     /**

package/src/selection/table/CellModel.mjs

@@ -27,17 +27,14 @@ class CellModel extends Model {
      *
      */
     addDomListener() {
-        let me           = this,
-            view         = me.view,
-            domListeners = view.domListeners;
+        let me   = this,
+            view = me.view;
 
-        domListeners.push({
+        view.addDomListeners({
             click   : me.onCellClick,
             delegate: '.neo-table-cell',
             scope   : me
         });
-
-        view.domListeners = domListeners;
     }
 
     /**

package/src/selection/table/ColumnModel.mjs

@@ -28,17 +28,14 @@ class ColumnModel extends Model {
      *
      */
     addDomListener() {
-        let me           = this,
-            view         = me.view,
-            domListeners = view.domListeners;
+        let me   = this,
+            view = me.view;
 
-        domListeners.push({
+        view.addDomListeners({
             click   : me.onCellClick,
             delegate: '.neo-table-cell',
             scope   : me
         });
-
-        view.domListeners = domListeners;
     }
 
     /**