neo.mjs 4.3.0 → 4.3.2

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

@@ -82,7 +82,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetAlign(value, oldValue) {
-        this.updateInputValue(value, oldValue, 'align');
+        oldValue && this.updateInputValue(value, oldValue, 'align');
     }
 
     /**
@@ -92,7 +92,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetDirection(value, oldValue) {
-        this.updateInputValue(value, oldValue, 'direction');
+        oldValue && this.updateInputValue(value, oldValue, 'direction');
     }
 
     /**
@@ -102,7 +102,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetPack(value, oldValue) {
-        this.updateInputValue(value, oldValue, 'pack');
+        oldValue && this.updateInputValue(value, oldValue, 'pack');
     }
 
     /**
@@ -112,7 +112,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetWrap(value, oldValue) {
-        this.updateInputValue(value, oldValue, 'wrap');
+        oldValue && this.updateInputValue(value, oldValue, 'wrap');
     }
 
     /**
@@ -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: []}
@@ -223,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
@@ -271,7 +293,7 @@ class Base extends Component {
 
         item = {
             tag     : me.itemTagName,
-            cls     : cls,
+            cls,
             id      : itemId,
             tabIndex: -1
         };
@@ -341,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/tab/Container.mjs

@@ -12,7 +12,7 @@ class Container extends BaseContainer {
     static getStaticConfig() {return {
         /**
          * Valid values for tabBarPosition
-         * @member {String[]} tabBarPositions=['top', 'right', 'bottom', 'left']
+         * @member {String[]} tabBarPositions=['top','right','bottom','left']
          * @protected
          * @static
          */
@@ -45,7 +45,7 @@ class Container extends BaseContainer {
          */
         baseCls: 'neo-tab-container',
         /**
-         * @member {String|null} [cardContainerId]=null
+         * @member {String|null} cardContainerId=null
          */
         cardContainerId: null,
         /**
@@ -56,12 +56,12 @@ class Container extends BaseContainer {
         cls: ['neo-tab-container'],
         /**
          * Default configs for the tab.Strip
-         * @member {Object|null} [contentContainerDefaults]=null
+         * @member {Object|null} contentContainerDefaults=null
          */
         contentContainerDefaults: null,
         /**
          * Default configs for the tab.HeaderToolbar
-         * @member {Object|null} [headerToolbarDefaults]=null
+         * @member {Object|null} headerToolbarDefaults=null
          */
         headerToolbarDefaults: null,
         /**
@@ -87,11 +87,11 @@ class Container extends BaseContainer {
         tabBarId: null,
         /**
          * Default configs for the tab.Strip
-         * @member {Object|null} [tabStripDefaults]=null
+         * @member {Object|null} tabStripDefaults=null
          */
         tabStripDefaults: null,
         /**
-         * @member {String|null} [tabStripId]=null
+         * @member {String|null} tabStripId=null
          */
         tabStripId: null,
         /**
@@ -117,8 +117,8 @@ class Container extends BaseContainer {
 
     /**
      * Triggered after the activeIndex config got changed
-     * @param {Number} value
-     * @param {Number} oldValue
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
      * @protected
      */
      async afterSetActiveIndex(value, oldValue) {
@@ -157,7 +157,7 @@ class Container extends BaseContainer {
     afterSetPlain(value, oldValue) {
         let me      = this,
             baseCls = me.baseCls,
-            cls     = me.cls || [];
+            cls     = me.cls;
 
         NeoArray[value ? 'unshift' : 'remove'](cls, baseCls + '-plain');
         me.cls = cls;
@@ -196,8 +196,8 @@ class Container extends BaseContainer {
 
             me.fire('tabBarPositionChange', {
                 component: me,
-                oldValue : oldValue,
-                value    : value
+                oldValue,
+                value
             });
         }
     }

package/src/tab/header/Button.mjs

@@ -17,7 +17,7 @@ class Button extends BaseButton {
          */
         ntype: 'tab-header-button',
         /**
-         * @member {Array} cls=['neo-button', 'neo-tab-button']
+         * @member {Array} cls=['neo-button','neo-tab-button']
          */
         cls: ['neo-tab-header-button', 'neo-button'],
         /**
@@ -57,7 +57,7 @@ class Button extends BaseButton {
     }
 
     /**
-     * @param {Boolean} [silent=false]
+     * @param {Boolean} silent=false
      */
     updateUseActiveTabIndicator(silent=false) {
         let me   = this,

package/src/table/Container.mjs

@@ -135,7 +135,7 @@ class Container extends BaseContainer {
             ...me.viewConfig
         }];
 
-        me.vdom.id = me.id + 'wrapper';
+        me.vdom.id = me.getWrapperId();
 
         me.createColumns(me.columns);
     }
@@ -179,14 +179,15 @@ class Container extends BaseContainer {
      */
     applyCustomScrollbarsCss() {
         let me       = this,
+            id       = me.getWrapperId(),
             cssRules = [];
 
         if (me.dockLeftMargin) {
-            cssRules.push('#' + me.id + 'wrapper' + '::-webkit-scrollbar-track:horizontal {margin-left: ' + me.dockLeftMargin + 'px;}');
+            cssRules.push('#' + id + '::-webkit-scrollbar-track:horizontal {margin-left: ' + me.dockLeftMargin + 'px;}');
         }
 
         if (me.dockRightMargin) {
-            cssRules.push('#' + me.id + 'wrapper' + '::-webkit-scrollbar-track:horizontal {margin-right: ' + me.dockRightMargin + 'px;}');
+            cssRules.push('#' + id + '::-webkit-scrollbar-track:horizontal {margin-right: ' + me.dockRightMargin + 'px;}');
         }
         if (cssRules.length > 0) {
             Css.insertRules(cssRules);
@@ -368,6 +369,13 @@ class Container extends BaseContainer {
         return this.vnode.childNodes[0];
     }
 
+    /**
+     * @returns {String}
+     */
+    getWrapperId() {
+        return `${this.id}__wrapper`;
+    }
+
     /**
      * @param {Number} countRows
      */

package/src/tree/List.mjs

@@ -47,6 +47,10 @@ class Tree extends Base {
          * @member {Object} dragZoneConfig=null
          */
         sortZoneConfig: null,
+        /**
+         * @member {String[]} wrapperCls=[]
+         */
+        wrapperCls: [],
         /**
          * @member {Object} _vdom
          */