neo.mjs 4.3.0 → 4.3.1

package/apps/website/view/MainContainer.mjs

@@ -65,6 +65,7 @@ class MainContainer extends Viewport {
                     tabButtonConfig: {
                         editRoute: false,
                         iconCls  : 'fa fa-rss',
+                        reference: 'blog-header-button',
                         route    : 'mainview=blog',
                         text     : 'Blog'
                     }

package/apps/website/view/MainContainerController.mjs

@@ -42,6 +42,13 @@ class MainContainerController extends ComponentController {
         return this.getReference(this.mainTabs[tabIndex]);
     }
 
+    /**
+     * @param {Object[]} records
+     */
+    onBlogPostStoreLoad(records) {
+        this.getReference('blog-header-button').badgeText = records.length + ''
+    }
+
     /**
      *
      */

package/apps/website/view/blog/List.mjs

@@ -24,15 +24,39 @@ class List extends BaseList {
          */
         className: 'Website.view.blog.List',
         /**
-         * @member {String[]} cls=['website-blog-list','neo-list-container','neo-list']
+         * @member {String[]} cls=['website-blog-list','neo-list']
          */
-        cls: ['website-blog-list', 'neo-list-container', 'neo-list'],
+        cls: ['website-blog-list', 'neo-list'],
         /**
          * @member {Neo.data.Store} store=BlogPosts
          */
-        store: BlogPosts
+        store: BlogPosts,
+        /**
+         * @member {Boolean} useWrapperNode=true
+         */
+        useWrapperNode: true,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {cn: [
+            {tag: 'ul', cn: []}
+        ]}
     }}
 
+    /**
+     * @param {Neo.data.Store} value
+     * @param {Neo.data.Store} oldValue
+     */
+    afterSetStore(value, oldValue) {
+        super.afterSetStore(value, oldValue);
+
+        value.on({
+            load : 'onBlogPostStoreLoad',
+            scope: this.getController()
+        });
+    }
+
     /**
      * @param {Object} record
      */
@@ -131,6 +155,20 @@ class List extends BaseList {
 
         me.vdom = vdom;
     }
+
+    /**
+     * @returns {Object}
+     */
+    getVdomRoot() {
+        return this.vdom.cn[0];
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getVnodeRoot() {
+        return this.vnode.childNodes[0];
+    }
 }
 
 Neo.applyClassConfig(List);

package/apps/website/view/examples/List.mjs

@@ -23,9 +23,9 @@ class List extends BaseList {
          */
         className: 'Website.view.examples.List',
         /**
-         * @member {String[]} cls=['website-examples-list','neo-list-container','neo-list']
+         * @member {String[]} cls=['website-examples-list','neo-list']
          */
-        cls: ['website-examples-list', 'neo-list-container', 'neo-list'],
+        cls: ['website-examples-list', 'neo-list'],
         /**
          * @member {Neo.data.Store} store=Examples
          */
@@ -33,7 +33,18 @@ class List extends BaseList {
         /**
          * @member {String|null} storeUrl_=null
          */
-        storeUrl_: null
+        storeUrl_: null,
+        /**
+         * @member {Boolean} useWrapperNode=true
+         */
+        useWrapperNode: true,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {cn: [
+            {tag: 'ul', cn: []}
+        ]}
     }}
 
     /**
@@ -96,6 +107,20 @@ class List extends BaseList {
             ]}
         ];
     }
+
+    /**
+     * @returns {Object}
+     */
+    getVdomRoot() {
+        return this.vdom.cn[0];
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getVnodeRoot() {
+        return this.vnode.childNodes[0];
+    }
 }
 
 Neo.applyClassConfig(List);

package/apps/website/view/examples/TabContainer.mjs

@@ -17,10 +17,15 @@ class TabContainer extends Container {
          */
         activeIndex: 2,
         /**
-         * @member {Array} items
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            module: List
+        },
+        /**
+         * @member {Object[]} items
          */
         items: [{
-            module         : List,
             reference      : 'examples-devmode-list',
             storeUrl       : '../../apps/website/data/examples_devmode.json',
             tabButtonConfig: {
@@ -29,7 +34,6 @@ class TabContainer extends Container {
                 text   : 'DevMode'
             }
         }, {
-            module         : List,
             reference      : 'examples-dist-dev-list',
             storeUrl       : '../../apps/website/data/examples_dist_dev.json',
             tabButtonConfig: {
@@ -38,7 +42,6 @@ class TabContainer extends Container {
                 text   : 'dist/dev'
             }
         }, {
-            module         : List,
             reference      : 'examples-dist-prod-list',
             storeUrl       : '../../apps/website/data/examples_dist_prod.json',
             tabButtonConfig: {

package/buildScripts/addConfig.mjs

@@ -261,6 +261,7 @@ if (programOpts.info) {
             default: 'Custom',
             choices: [
                 'Custom',
+                'Boolean',
                 'Object',
                 'Object[]',
                 'Number',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/apps/website/blog/List.scss

@@ -1,4 +1,4 @@
-.website-blog-list.neo-list-container.neo-list {
+.website-blog-list.neo-list {
     transition: padding v(website-transition-duration) ease-out;
 
     .neo-list-item {
@@ -180,4 +180,4 @@
             width : 44px;
         }
     }
-}
+}

package/resources/scss/src/apps/website/examples/List.scss

@@ -1,4 +1,4 @@
-.website-examples-list.neo-list-container.neo-list {
+.website-examples-list.neo-list {
     transition: padding v(website-transition-duration) ease-out;
 
     .neo-list-item {
@@ -154,4 +154,4 @@
             margin-top: 20px;
         }
     }
-}
+}

package/resources/scss/src/calendar/view/calendars/ColorsList.scss

@@ -1,4 +1,6 @@
 .neo-calendars-colors-list {
+    overflow: visible;
+
     &:focus {
         outline: none;
     }
@@ -7,11 +9,12 @@
         border-radius: 50%;
         display      : inline-block;
         height       : 1.5em;
-        margin-right : 0.3em;
+        margin       : 0.3em 0.3em 0.3em 0;
+        transition   : box-shadow .2s;
         width        : 1.5em;
 
         &.neo-selected {
-            box-shadow: 0 0 0 3px currentColor;
+            box-shadow: 0 0 0 0.25em currentColor;
         }
     }
 }

package/resources/scss/src/layout/Card.scss

@@ -1,16 +1,12 @@
 .neo-layout-card {
     display    : flex;
     align-items: stretch;
-}
-
-.neo-layout-card-item {
-    flex: 1 0 100%;
 
-    &.active-item {
+    > * {
+        flex: 1 0 100%;
 
+        &.neo-inactive-item {
+            display: none !important;
+        }
     }
-
-    &.inactive-item {
-        display: none !important;
-    }
-}
+}

package/resources/scss/src/list/Base.scss

@@ -1,7 +1,8 @@
-.neo-list-container {
+.neo-list-wrapper {
     background-color: v(list-container-background-color);
     border          : v(list-container-border);
-    overflow        : auto;
+    overflow        : hidden;
+    position        : relative;
 }
 
 .neo-list {
@@ -12,6 +13,7 @@
     margin-inline-start : 0;
     margin-inline-end   : 0;
     padding-inline-start: 0;
+    overflow            : auto;
 
     &.neo-use-checkicons {
         .neo-list-item:before {
@@ -28,6 +30,12 @@
         }
     }
 
+    &.neo-use-wrapper-node {
+        height  : 100%;
+        position: absolute;
+        width   : 100%;
+    }
+
     .neo-list-item {
         background-color: v(list-item-background-color);
         cursor          : pointer;
@@ -51,4 +59,4 @@
             color: v(list-item-highlight-search-color);
         }
     }
-}
+}

package/resources/scss/src/tab/Container.scss

@@ -29,7 +29,8 @@
 }
 
 .neo-tab-content-container {
-    border: v(tab-container-content-border);
+    border  : v(tab-container-content-border);
+    overflow: hidden;
 }
 
 .neo-tab-header-toolbar {

package/resources/scss/src/table/Container.scss

@@ -1,5 +1,6 @@
 .neo-table-wrapper {
     overflow: auto;
+    position: relative;
     height  : 100%;
 }
 
@@ -12,6 +13,7 @@
     font-weight     : 400;
     line-height     : 19px;
     overflow        : auto;
+    position        : absolute;
 
     tr {
         height    : 32px !important;
@@ -118,4 +120,4 @@
     }
 }
 
-#myTableContainer ::-webkit-scrollbar-track:horizontal {margin-left: 400px;}
+#myTableContainer ::-webkit-scrollbar-track:horizontal {margin-left: 400px;}

package/resources/scss/src/tree/List.scss

@@ -4,6 +4,16 @@
     display : flex;
     position: relative;
 
+    .neo-list {
+        overflow: visible;
+    }
+
+    .neo-list-container {
+        background-color: v(list-container-background-color);
+        border          : v(list-container-border);
+        overflow        : auto;
+    }
+
     .neo-list-folder {
         + .neo-list {
             display: none;
@@ -85,4 +95,4 @@
             content: "\f07c";
         }
     }
-}
+}

package/src/calendar/view/calendars/ColorsList.mjs

@@ -21,6 +21,10 @@ class ColorsList extends List {
          * @member {String[]} cls=['neo-calendars-colors-list','neo-list']
          */
         cls: ['neo-calendars-colors-list', 'neo-list'],
+        /**
+         * @member {Boolean} useWrapperNode=false
+         */
+        useWrapperNode: false,
         /**
          * The list gets used as a form field, so we are adjusting the selection based on this config
          * @member {String} value_=null
@@ -63,6 +67,20 @@ class ColorsList extends List {
         }};
     }
 
+    /**
+     * @returns {Object}
+     */
+    getVdomRoot() {
+        return this.vdom;
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getVnodeRoot() {
+        return this.vnode;
+    }
+
     /**
      *
      */

package/src/calendar/view/calendars/EditContainer.mjs

@@ -64,9 +64,7 @@ class EditContainer extends FormContainer {
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
 
-        if (value) {
-            this.getField('name').focus();
-        }
+        value && this.getField('name').focus();
     }
 
     /**
@@ -117,12 +115,12 @@ class EditContainer extends FormContainer {
 
         if (record) {
             me.colorsList = Neo.create({
-                module   : ColorsList,
-                appName  : me.appName,
-                listeners: {change: me.onColorChange, scope: me},
-                parentId : me.parentId,
-                style    : {marginTop: '0.5em'},
-                value    : record.color,
+                module      : ColorsList,
+                appName     : me.appName,
+                listeners   : {change: me.onColorChange, scope: me},
+                parentId    : me.parentId,
+                value       : record.color,
+                wrapperStyle: {marginTop: '0.2em'},
                 ...me.colorsListConfig
             });
 

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
@@ -474,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
@@ -709,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
@@ -729,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,
@@ -740,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
@@ -1198,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;
@@ -1648,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/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: []}
@@ -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

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

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
          */