neo.mjs 6.0.2 → 6.0.4

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.0.2'
+         * @member {String} version='6.0.4'
          */
-        version: '6.0.2'
+        version: '6.0.4'
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.0.2'
+         * @member {String} version='6.0.4'
          */
-        version: '6.0.2'
+        version: '6.0.4'
     }
 
     /**

package/examples/treeSelectionModel/MainContainer.mjs

@@ -1,9 +1,13 @@
 import ConfigurationViewport from '../ConfigurationViewport.mjs';
 
-import Store         from '../../src/data/Store.mjs';
-import NumberField   from '../../src/form/field/Number.mjs';
-import AccordionTree from '../../src/tree/Accordion.mjs';
-import CheckBox      from "../../src/form/field/CheckBox.mjs";
+import AccordionTree  from '../../src/tree/Accordion.mjs';
+import CheckBox       from "../../src/form/field/CheckBox.mjs";
+import NumberField    from '../../src/form/field/Number.mjs';
+import Panel          from '../../src/container/Panel.mjs';
+import Store          from '../../src/data/Store.mjs';
+// Do not remove the ViewController nor ViewModel
+import ViewController from '../../src/controller/Component.mjs';
+import ViewModel      from '../../src/model/Component.mjs';
 
 /**
  * @class Neo.examples.treeSelectionModel.MainContainer
@@ -48,9 +52,9 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'height',
             listeners: {change: me.onConfigChange.bind(me, 'height')},
             maxValue : 1200,
-            minValue : 400,
-            stepSize : 5,
-            value    : treeList.height,
+            minValue : 250,
+            stepSize : 50,
+            value    : 650,
             style    : {marginTop: '10px'}
         }, {
             module   : NumberField,
@@ -59,9 +63,9 @@ class MainContainer extends ConfigurationViewport {
             listeners: {change: me.onConfigChange.bind(me, 'width')},
             maxValue : 1200,
             minValue : 200,
-            stepSize : 5,
+            stepSize : 3,
             style    : {marginTop: '10px'},
-            value    : treeList.width
+            value    : 400
         }];
     }
 
@@ -69,69 +73,91 @@ class MainContainer extends ConfigurationViewport {
      * @returns {*}
      */
     createExampleComponent() {
-        const store = Neo.create(Store, {
-            keyProperty: 'id',
-            model      : {
-                fields: [
-                    {name: 'collapsed', type: 'Boolean'},
-                    {name: 'content', type: 'String'},
-                    {name: 'iconCls', type: 'String'},
-                    {name: 'id', type: 'Integer'},
-                    {name: 'isLeaf', type: 'Boolean'},
-                    {name: 'name', type: 'String'},
-                    {name: 'parentId', type: 'Integer'}
-                ]
-            }
-        });
+        const me    = this,
+              store = Neo.create(Store, {
+                  keyProperty: 'id',
+                  model      : {
+                      fields: [
+                          {name: 'collapsed', type: 'Boolean'},
+                          {name: 'content', type: 'String'},
+                          {name: 'iconCls', type: 'String'},
+                          {name: 'id', type: 'Integer'},
+                          {name: 'isLeaf', type: 'Boolean'},
+                          {name: 'name', type: 'String'},
+                          {name: 'parentId', type: 'Integer'}
+                      ]
+                  },
+
+                  autoLoad: true,
+                  url     : '../../examples/treeSelectionModel/tree.json'
+              });
 
         return Neo.ntype({
-            ntype : 'container',
+            ntype: 'container',
+
+            model: {
+                data: {
+                    selection: [{name: 'Please select something'}]
+                }
+            },
+
             layout: {ntype: 'hbox', align: 'stretch'},
             items : [{
-                //     module: TextField,
-                //     label: 'Test',
-                //     plugin: {
-                //         Plugin: {
-                //             bold: true
-                //         }
-                //     }
-                // },{
                 module: AccordionTree,
-                store : store,
-                height: 800,
-                width : 400,
-
-                // ensure afterSetMounted runs only once
-                storeLoaded: false,
-                afterSetMounted() {
-                    if (!this.storeLoaded) {
-                        this.storeLoaded = true;
-                    } else {
-                        return;
-                    }
 
-                    let me = this;
+                bind: {selection: {twoWay: true, value: data => data.selection}},
 
-                    Neo.Xhr.promiseJson({
-                        url: '../../examples/treeSelectionModel/tree.json'
-                    }).then(data => {
-                        const items      = data.json,
-                              colorArray = ['red', 'yellow', 'green'],
-                              iconArray  = ['home', 'industry', 'user'];
+                store: store,
 
-                        // create random iconCls colors
-                        items.forEach((item) => {
-                            if (!item.iconCls) {
-                                const rand = Math.floor(Math.random() * 3);
-
-                                item.iconCls = 'fa fa-' + iconArray[rand] + ' color-' + colorArray[rand];
-                            }
-                        });
+                /**
+                 * We are using data-binding.
+                 * Here is an example for listener and controller
+                 */
+                // controller: {
+                //     module: ViewController,
+                //
+                //     onAccordionItemClick(record) {
+                //         let viewport = Neo.get('neo-configuration-viewport-1'),
+                //             outputEl = viewport.getReference('output');
+                //
+                //         outputEl.html = record.name;
+                //     }
+                // },
+                //
+                // listeners: {
+                //     leafItemClick: 'onAccordionItemClick'
+                // }
 
-                        me.store.data = data.json;
-                        me.createItems(null, me.getListItemsRoot(), 0);
-                    });
+                listeners: {
+                    selectPreFirstItem: () => Neo.log('listener selectPreFirstItem fired'),
+                    selectPostLastItem: () => Neo.log('listener selectPostLastItem fired')
                 }
+            }, {
+                module: Panel,
+                height: 150,
+                width : '100%',
+
+                itemDefaults: {
+                    style: {
+                        padding: '10px'
+                    }
+                },
+
+                headers: [{
+                    dock : 'top',
+                    style: {borderRightColor: 'transparent'},
+
+                    items: [{
+                        ntype: 'label',
+                        text : 'Accordion Selection'
+                    }]
+                }],
+
+                items: [{
+                    ntype    : 'component',
+                    reference: 'output',
+                    bind     : {html: data => data.selection[0].name}
+                }]
             }]
         });
     }

package/package.json

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

package/resources/scss/src/form/field/FileUpload.scss

@@ -98,17 +98,39 @@
         flex          : 0 0 1.2rem;
     }
 
-    // The file input and label is only visible in the ready state
-    &:not(.neo-file-upload-state-ready) {
+    // When we have a file selected, the file input and label are hidden
+    &:not(.neo-field-empty) {
         input[type="file"],label {
             display : none;
         }
     }
 
-    &.neo-invalid {
+    &.neo-field-empty {
+        // The input field and its label are visible when no file is selected.
+        // It takes up the whole component, and is the only interactive item
+        :not(input[type="file"],label) {
+            display : none;
+        }
+        input::file-selector-button {
+            position         : absolute;
+            border           : 0 none;
+            margin           : 0;
+            top              : 0;
+            left             : 0;
+            right            : 0;
+            bottom           : 0;
+            background-color : var(--fileuploadfield-background-color);
+            color            : var(--fileuploadfield-color);
+        }
+    }
+
+    &.neo-invalid:not(.neo-field-empty) {
         .neo-file-upload-error-message {
             display : initial;
         }
+        input[type="file"],label {
+            display : none;
+        }
     }
 }
 
@@ -230,25 +252,6 @@
     }
 }
 
-.neo-file-upload-state-ready {
-    // Only the input field and its label is visible when in ready state
-    // It takes up the whole component, and is the only interactive item
-    :not(input[type="file"],label) {
-        display : none;
-    }
-    input::file-selector-button {
-        position         : absolute;
-        border           : 0 none;
-        margin           : 0;
-        top              : 0;
-        left             : 0;
-        right            : 0;
-        bottom           : 0;
-        background-color : var(--fileuploadfield-background-color);
-        color            : var(--fileuploadfield-color);
-    }
-}
-
 .neo-file-upload-body {
     flex        : 1 1 0%;
     display     : flex;

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.0.2'
+     * @default '6.0.4'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.0.2'
+    version: '6.0.4'
 };
 
 Object.assign(DefaultConfig, {

package/src/Neo.mjs

@@ -59,11 +59,11 @@ Neo = globalThis.Neo = Object.assign({
 
             if (Object.hasOwn(ctor, 'classConfigApplied')) {
                 baseCfg = Neo.clone(ctor.config, true);
-                break;
+                break
             }
 
             protos.unshift(proto);
-            proto = proto.__proto__;
+            proto = proto.__proto__
         }
 
         config = baseCfg || {};
@@ -76,7 +76,7 @@ Neo = globalThis.Neo = Object.assign({
             cfg = ctor.config || {};
 
             if (Neo.overwrites) {
-                ctor.applyOverwrites(cfg);
+                ctor.applyOverwrites(cfg)
             }
 
             Object.entries(cfg).forEach(([key, value]) => {
@@ -84,7 +84,7 @@ Neo = globalThis.Neo = Object.assign({
                     delete cfg[key];
                     key = key.slice(0, -1);
                     cfg[key] = value;
-                    autoGenerateGetSet(element, key);
+                    autoGenerateGetSet(element, key)
                 }
 
                 // only apply properties which have no setters inside the prototype chain
@@ -94,7 +94,7 @@ Neo = globalThis.Neo = Object.assign({
                         enumerable: true,
                         value,
                         writable  : true
-                    });
+                    })
                 }
             });
 
@@ -104,7 +104,7 @@ Neo = globalThis.Neo = Object.assign({
                 // Running the docs app inside a workspace can pull in the same classes from different roots,
                 // so we want to check for different class names as well
                 if (Object.hasOwn(ntypeMap, ntype) && cfg.className !== ntypeMap[ntype]) {
-                    throw new Error(`ntype conflict for '${ntype}' inside the classes:\n${ntypeMap[ntype]}\n${cfg.className}`);
+                    throw new Error(`ntype conflict for '${ntype}' inside the classes:\n${ntypeMap[ntype]}\n${cfg.className}`)
                 }
 
                 ntypeMap[ntype] = cfg.className;
@@ -113,11 +113,11 @@ Neo = globalThis.Neo = Object.assign({
             mixins = Object.hasOwn(config, 'mixins') && config.mixins || [];
 
             if (ctor.observable) {
-                mixins.push('Neo.core.Observable');
+                mixins.push('Neo.core.Observable')
             }
 
             if (Object.hasOwn(cfg, 'mixins') && Array.isArray(cfg.mixins) && cfg.mixins.length > 0) {
-                mixins.push(...cfg.mixins);
+                mixins.push(...cfg.mixins)
             }
 
             if (mixins.length > 0) {
@@ -139,17 +139,17 @@ Neo = globalThis.Neo = Object.assign({
                 isClass           : true
             });
 
-            !config.singleton && this.applyToGlobalNs(cls);
+            !config.singleton && this.applyToGlobalNs(cls)
         });
 
         proto = cls.prototype || cls;
 
         if (proto.singleton) {
             cls = Neo.create(cls);
-            Neo.applyToGlobalNs(cls);
+            Neo.applyToGlobalNs(cls)
         }
 
-        return cls;
+        return cls
     },
 
     /**
@@ -177,10 +177,10 @@ Neo = globalThis.Neo = Object.assign({
             Object.entries(config).forEach(([key, value]) => {
                 fnName = namespace[value];
                 target[key] = bind ? fnName.bind(namespace) : fnName;
-            });
+            })
         }
 
-        return target;
+        return target
     },
 
     /**
@@ -199,7 +199,7 @@ Neo = globalThis.Neo = Object.assign({
             nsArray = className.split('.');
             key     = nsArray.pop();
             ns      = Neo.ns(nsArray, true);
-            ns[key] = cls;
+            ns[key] = cls
         }
     },
 
@@ -214,12 +214,12 @@ Neo = globalThis.Neo = Object.assign({
         if (target && Neo.typeOf(defaults) === 'Object') {
             Object.entries(defaults).forEach(([key, value]) => {
                 if (!Object.hasOwn(target, key)) {
-                    target[key] = value;
+                    target[key] = value
                 }
-            });
+            })
         }
 
-        return target;
+        return target
     },
 
     /**
@@ -243,7 +243,7 @@ Neo = globalThis.Neo = Object.assign({
                 out = {};
 
                 Object.entries(obj).forEach(([key, value]) => {
-                    out[key] = !deep ? value : Neo.clone(value, deep, ignoreNeoInstances);
+                    out[key] = !deep ? value : Neo.clone(value, deep, ignoreNeoInstances)
                 });
 
                 return out
@@ -263,7 +263,7 @@ Neo = globalThis.Neo = Object.assign({
         delete config._id;
         delete config.id;
 
-        return Neo.create(instance.className, config);
+        return Neo.create(instance.className, config)
     },
 
     /**
@@ -305,7 +305,7 @@ Neo = globalThis.Neo = Object.assign({
             cls, instance;
 
         if (type === 'NeoClass') {
-            cls = className;
+            cls = className
         } else {
             if (type === 'Object') {
                 config = className;
@@ -313,17 +313,17 @@ Neo = globalThis.Neo = Object.assign({
                 if (!config.className && !config.module) {
                     // using console.error instead of throw to show the config object
                     console.error('Class created with object configuration missing className or module property', config);
-                    return null;
+                    return null
                 }
 
                 className = config.className || config.module.prototype.className;
             }
 
             if (!exists(className)) {
-                throw new Error('Class ' + className + ' does not exist');
+                throw new Error('Class ' + className + ' does not exist')
             }
 
-            cls = Neo.ns(className);
+            cls = Neo.ns(className)
         }
 
         instance = new cls();
@@ -333,7 +333,7 @@ Neo = globalThis.Neo = Object.assign({
         instance.onAfterConstructed();
         instance.init();
 
-        return instance;
+        return instance
     },
 
     /**
@@ -435,7 +435,7 @@ Neo = globalThis.Neo = Object.assign({
                     return createArrayNs(true, current, prev);
                 }
 
-                prev[current] = {};
+                prev[current] = {}
             }
 
             if (prev) {
@@ -443,9 +443,9 @@ Neo = globalThis.Neo = Object.assign({
                     return createArrayNs(false, current, prev);
                 }
 
-                return prev[current];
+                return prev[current]
             }
-        }, scope || globalThis);
+        }, scope || globalThis)
     },
 
     /**
@@ -474,16 +474,17 @@ Neo = globalThis.Neo = Object.assign({
             if (!config.ntype) {
                 throw new Error('Class defined with object configuration missing ntype property. ' + config.ntype);
             }
-            ntype = config.ntype;
+
+            ntype = config.ntype
         }
 
         let className = Neo.ntypeMap[ntype];
 
         if (!className) {
-            throw new Error('ntype ' + ntype + ' does not exist');
+            throw new Error('ntype ' + ntype + ' does not exist')
         }
 
-        return Neo.create(className, config);
+        return Neo.create(className, config)
     },
 
     /**
@@ -492,7 +493,7 @@ Neo = globalThis.Neo = Object.assign({
      */
     typeOf(item) {
         if (item === null || item === undefined) {
-            return null;
+            return null
         }
 
         return {
@@ -626,7 +627,7 @@ function autoGenerateGetSet(proto, key) {
                 delete me[configSymbol][key];
 
                 if (key !== 'items') {
-                    value = Neo.clone(value, true, true);
+                    value = Neo.clone(value, true, true)
                 }
 
                 // we do want to store the value before the beforeSet modification as well,
@@ -639,7 +640,7 @@ function autoGenerateGetSet(proto, key) {
                     // If they don't return a value, that means no change
                     if (value === undefined) {
                         me[_key] = oldValue;
-                        return;
+                        return
                     }
 
                     me[_key] = value;
@@ -650,7 +651,7 @@ function autoGenerateGetSet(proto, key) {
                     !Neo.isEqual(value, oldValue)
                 ) {
                     me[afterSet]?.(value, oldValue);
-                    me.afterSetConfig?.(key, value, oldValue);
+                    me.afterSetConfig?.(key, value, oldValue)
                 }
             }
         };
@@ -672,9 +673,9 @@ function createArrayNs(create, current, prev) {
         arrItem, arrRoot;
 
     if (create) {
-        prev[arrDetails[0]] = arrRoot = prev[arrDetails[0]] || [];
+        prev[arrDetails[0]] = arrRoot = prev[arrDetails[0]] || []
     } else {
-        arrRoot = prev[arrDetails[0]];
+        arrRoot = prev[arrDetails[0]]
     }
 
     if (!arrRoot) {
@@ -688,10 +689,10 @@ function createArrayNs(create, current, prev) {
             arrRoot[arrItem] = arrRoot[arrItem] || {};
         }
 
-        arrRoot = arrRoot[arrItem];
+        arrRoot = arrRoot[arrItem]
     }
 
-    return arrRoot;
+    return arrRoot
 }
 
 /**
@@ -704,9 +705,9 @@ function exists(className) {
     try {
         return !!className.split('.').reduce((prev, current) => {
             return prev[current];
-        }, globalThis);
+        }, globalThis)
     } catch(e) {
-        return false;
+        return false
     }
 }
 
@@ -725,8 +726,9 @@ function mixinProperty(proto, mixinProto) {
         if (proto[key]?._from) {
             if (mixinProto.className === proto[key]._from) {
                 console.warn('Mixin set multiple times or already defined on a Base Class', proto.className, mixinProto.className, key);
-                return;
+                return
             }
+
             throw new Error(
                 `${proto.className}: Multiple mixins defining same property (${mixinProto.className}, ${proto[key]._from}) => ${key}`
             );
@@ -737,7 +739,7 @@ function mixinProperty(proto, mixinProto) {
         Object.getOwnPropertyDescriptor(proto, key)._from = mixinProto.className;
 
         if (typeof proto[key] === 'function') {
-            proto[key]._name = key;
+            proto[key]._name = key
         }
     };
 }
@@ -749,8 +751,8 @@ function mixinProperty(proto, mixinProto) {
  */
 function mixReduce(mixinCls) {
     return (prev, current, idx, arr) => {
-        return prev[current] = idx !== arr.length -1 ? prev[current] || {} : mixinCls;
-    };
+        return prev[current] = idx !== arr.length -1 ? prev[current] || {} : mixinCls
+    }
 }
 
 /**
@@ -761,7 +763,7 @@ function mixReduce(mixinCls) {
 function parseArrayFromString(str) {
     return (extractArraysRegex.exec(str) || [null]).slice(1).reduce(
         (fun, args) => [fun].concat(args.match(charsRegex))
-    );
+    )
 }
 
 Neo.config = Neo.config || {};

package/src/core/Util.mjs

@@ -42,7 +42,7 @@ class Util extends Base {
      * @returns {Boolean|String} Returns false for non string inputs
      */
     static capitalize(value) {
-        return Util.isString(value) && value[0].toUpperCase() + value.slice(1);
+        return value[0].toUpperCase() + value.slice(1)
     }
 
     /**
@@ -51,10 +51,6 @@ class Util extends Base {
      * @returns {Object} The camelcase styles object
      */
     static createStyleObject(string) {
-        if (!string) {
-            return null;
-        }
-
         let parts;
 
         // split(';') does fetch semicolons inside brackets
@@ -74,10 +70,11 @@ class Util extends Base {
                 parts[0] = parts[0].replace(/-([a-z])/g, (str, letter) => {
                     return letter.toUpperCase();
                 });
-                obj[parts[0]] = parts[1];
+
+                obj[parts[0]] = parts[1]
             }
             return obj;
-        }, {});
+        }, {})
     }
 
     /**
@@ -90,11 +87,11 @@ class Util extends Base {
 
         Object.entries(styles).forEach(([key, value]) => {
             if (value !== undefined && value !== null) {
-                style += Util.decamel(key) + ':' + value + ';';
+                style += Util.decamel(key) + ':' + value + ';'
             }
         });
 
-        return style;
+        return style
     }
 
     /**
@@ -104,7 +101,7 @@ class Util extends Base {
      * @returns {String} The lowercase output
      */
     static decamel(value) {
-        return value.replace(Util.decamelRegEx, '$1-$2').toLowerCase();
+        return value.replace(Util.decamelRegEx, '$1-$2').toLowerCase()
     }
 
     /**
@@ -122,7 +119,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isBoolean(value) {
-        return typeof value === 'boolean';
+        return typeof value === 'boolean'
     }
 
     /**
@@ -131,7 +128,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isDefined(value) {
-        return typeof value !== 'undefined';
+        return typeof value !== 'undefined'
     }
 
     /**
@@ -141,26 +138,26 @@ class Util extends Base {
      */
     static isEmpty(value) {
         if (value === null || value === undefined) {
-            return true;
+            return true
         }
 
         if (Array.isArray(value)) {
-            return value.length === 0;
+            return value.length === 0
         }
 
         if (value instanceof Date) {
-            return false;
+            return false
         }
 
         if (Util.isObject(value)) {
-            return Object.keys(value).length === 0;
+            return Object.keys(value).length === 0
         }
 
         if (Util.isString(value)) {
-            return value === '';
+            return value === ''
         }
 
-        return false;
+        return false
     }
 
     /**
@@ -169,7 +166,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isFunction(value) {
-        return typeof value === 'function';
+        return typeof value === 'function'
     }
 
     /**
@@ -178,7 +175,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isNumber(value){
-        return typeof value === 'number' && isFinite(value);
+        return typeof value === 'number' && isFinite(value)
     }
 
     /**
@@ -187,7 +184,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isObject(value) {
-        return value !== null && typeof value === 'object' && !Array.isArray(value);
+        return value !== null && typeof value === 'object' && !Array.isArray(value)
     }
 
     /**
@@ -196,7 +193,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isString(value) {
-        return typeof value === 'string';
+        return typeof value === 'string'
     }
 
     /**
@@ -210,14 +207,14 @@ class Util extends Base {
         let len;
 
         if (!iterable || !(len = iterable.length)) {
-            return [];
+            return []
         }
 
         if (typeof iterable === 'string') {
-            return iterable.split('');
+            return iterable.split('')
         }
 
-        return Array.prototype.slice.call(iterable, start || 0, end || len);
+        return Array.prototype.slice.call(iterable, start || 0, end || len)
     }
 }
 

package/src/form/field/CheckBox.mjs

@@ -481,6 +481,8 @@ class CheckBox extends Base {
      * @returns {Boolean}
      */
     isValid() {
+        this.validate(true); // silent
+        
         return this.error ? false : super.isValid()
     }
 

package/src/form/field/FileUpload.mjs

@@ -132,7 +132,7 @@ class FileUpload extends Base {
             ]
         },
 
-        cls : [],
+        cls : ['neo-field-empty'],
 
         /**
          * An Object containing a default set of headers to be passed to the server on every HTTP request.
@@ -153,6 +153,7 @@ class FileUpload extends Base {
             UPLOADING        : 'scanning',
 
             MALWARE_DETECTED : 'scan-failed',
+            UN_DOWNLOADABLE  : 'not-downloadable',
             AVAILABLE        : 'not-downloadable',
             DOWNLOADABLE     : 'downloadable',
             DELETED          : 'deleted'
@@ -317,6 +318,7 @@ class FileUpload extends Base {
         // UI strings which can be overridden for other languages
         chooseFile           : 'Choose file',
         documentText         : 'Document',
+        invalidFileFormat    : 'invalid file format',
         pleaseUseTheseTypes  : 'Please use these file types',
         fileSizeMoreThan     : 'File size exceeds',
         documentDeleteError  : 'Document delete service error',
@@ -346,16 +348,19 @@ class FileUpload extends Base {
     }
 
     afterSetId(value, oldValue) {
-        const
-            labelEl   = this.vdom.cn[4],
-            inputElId = `${this.id}-input`;
+        const inputElId = `${this.id}-input`;
 
-        this.getInputEl().id =  labelEl.for = inputElId;
-        labelEl.html = this.chooseFile;
+        this.getInputEl().id =  this.vdom.cn[4].for = inputElId;
 
         // silent vdom update, the super call will trigger the engine
         super.afterSetId?.(value, oldValue);
     }
+
+    onConstructed() {
+        super.onConstructed(...arguments);
+
+        this.vdom.cn[4].html = this.chooseFile;
+    }
     
     /**
      * @returns {Object}
@@ -365,9 +370,15 @@ class FileUpload extends Base {
     }
 
     async clear() {
-        const me = this;
+        const
+            me      = this,
+            { cls } = me;
+
+        NeoArray.add(cls, 'neo-field-empty');
+        me.cls = cls;
 
         me.vdom.cn[3] = {
+            id    : `${me.id}-input`,
             cls   : 'neo-file-upload-input',
             tag   : 'input',
             type  : 'file',
@@ -375,6 +386,7 @@ class FileUpload extends Base {
         };
         me.state = 'ready';
         me.error = '';
+        me.file = me.document = null;
 
         // We have to wait for the DOM to have changed, and the input field to be visible
         await new Promise(resolve => setTimeout(resolve, 100));
@@ -388,18 +400,29 @@ class FileUpload extends Base {
     onInputValueChange({ files }) {
         const
             me        = this,
-            { types } = me;
+            {
+                types,
+                cls
+            } = me,
+            body      = me.vdom.cn[1];
 
         if (files.length) {
+            NeoArray.remove(cls, 'neo-field-empty');
+            me.cls = cls;
+            
             const
                 file     = files.item(0),
                 pointPos = file.name.lastIndexOf('.'),
                 type     = pointPos > -1 ? file.name.slice(pointPos + 1) : '';
 
             if (me.types && !types[type]) {
+                body.cn[0].innerHTML = file.name;
+                body.cn[1].innerHTML = `${me.invalidFileFormat} (.${type}) ${me.formatSize(file.size)}`;
                 me.error = `${me.pleaseUseTheseTypes}: .${Object.keys(types).join(' .')}`;
             }
             else if (file.size > me.maxSize) {
+                body.cn[0].innerHTML = file.name;
+                body.cn[1].innerHTML = me.formatSize(file.size);
                 me.error = `${me.fileSizeMoreThan} ${String(me._maxSize).toUpperCase()}`;
             }
             // If it passes the type and maxSize check, upload it
@@ -424,6 +447,7 @@ class FileUpload extends Base {
             headers    = { ...me.headers };
 
         // Show the action button
+        me.file  = file;
         me.state = 'starting';
 
         // We have to wait for the DOM to have changed, and the action button to be visible
@@ -553,6 +577,9 @@ class FileUpload extends Base {
                 me.clear();
                 me.state = 'ready';
                 break;
+            case 'ready':
+                me.clear();
+                break;
         }
     }
 
@@ -629,9 +656,12 @@ class FileUpload extends Base {
     afterSetDocument(document) {
         if (document) {
             const
-                me = this;
+                me      = this,
+                { cls } = me;
+
+            NeoArray.remove(cls, 'neo-field-empty');
+            me.cls = cls;
 
-            me.preExistingDocument = true;
             me.documentId = document.id;
             me.fileSize = me.formatSize(document.size);
             me.vdom.cn[1].cn[0].innerHTML = document.fileName;
@@ -680,8 +710,7 @@ class FileUpload extends Base {
                 status.innerHTML = me.fileSize;
                 break;
             case 'not-downloadable':
-                status.innerHTML = me.preExistingDocument ?
-                me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
+                status.innerHTML = me.document ? me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
                 break;
             case 'deleted':
                 status.innerHTML = me.fileWasDeleted;
@@ -695,6 +724,7 @@ class FileUpload extends Base {
 
         NeoArray.remove(cls, 'neo-file-upload-state-' + oldValue);
         NeoArray.add(cls, 'neo-file-upload-state-' + value);
+        NeoArray[me.file || me.document ? 'remove' : 'add', 'neo-field-empty'];
         me.cls = cls;
     }
 

package/src/form/field/Text.mjs

@@ -23,7 +23,7 @@ class Text extends Base {
      * @protected
      * @static
      */
-    static labelPositions       = ['bottom', 'inline', 'left', 'right', 'top']
+    static labelPositions = ['bottom', 'inline', 'left', 'right', 'top']
 
     static config = {
         /**
@@ -220,18 +220,14 @@ class Text extends Base {
          * @member {Object} _vdom
          */
         _vdom:
-            {
-                cn: [
-                    {tag: 'label', cls: [], style: {}},
-                    {tag: 'label', cls: []},
-                    {tag: 'input', cls: ['neo-textfield-input'], flag: 'neo-real-input', style: {}},
-                    {
-                        cls: ['neo-textfield-error-wrapper'], removeDom: true, cn: [
-                            {cls: ['neo-textfield-error']}
-                        ]
-                    }
-                ]
-            }
+        {cn: [
+            {tag: 'label', cls: [], style: {}},
+            {tag: 'label', cls: []},
+            {tag: 'input', cls: ['neo-textfield-input'], flag: 'neo-real-input', style: {}},
+            {cls: ['neo-textfield-error-wrapper'], removeDom: true, cn: [
+                {cls: ['neo-textfield-error']}
+            ]}
+        ]}
     }
 
     /**
@@ -250,10 +246,10 @@ class Text extends Base {
         let me = this;
 
         me.addDomListeners([
-            {input: me.onInputValueChange, scope: me},
+            {input     : me.onInputValueChange, scope: me},
             {mouseenter: me.onMouseEnter, scope: me},
             {mouseleave: me.onMouseLeave, scope: me}
-        ]);
+        ])
     }
 
     /**
@@ -263,13 +259,11 @@ class Text extends Base {
      * @protected
      */
     afterSetAppName(value, oldValue) {
-        let me = this;
-
         super.afterSetAppName(value, oldValue);
 
-        value && me.triggers?.forEach(item => {
+        value && this.triggers?.forEach(item => {
             item.appName = value;
-        });
+        })
     }
 
     /**
@@ -279,7 +273,7 @@ class Text extends Base {
      * @protected
      */
     afterSetAutoCapitalize(value, oldValue) {
-        this.changeInputElKey('autocapitalize', value === 'off' || value === 'none' ? null : value);
+        this.changeInputElKey('autocapitalize', value === 'off' || value === 'none' ? null : value)
     }
 
     /**
@@ -290,7 +284,7 @@ class Text extends Base {
      * @protected
      */
     afterSetAutoComplete(value, oldValue) {
-        this.changeInputElKey('autocomplete', value ? null : 'no');
+        this.changeInputElKey('autocomplete', value ? null : 'no')
     }
 
     /**
@@ -306,9 +300,9 @@ class Text extends Base {
         if (value) {
             triggers = me.triggers || [];
             triggers.unshift(ClearTrigger);
-            me.triggers = triggers;
+            me.triggers = triggers
         } else {
-            me.removeTrigger('clear');
+            me.removeTrigger('clear')
         }
     }
 
@@ -505,7 +499,7 @@ class Text extends Base {
 
             !isEmpty && setTimeout(() => {
                 me.updateCenterBorderElWidth(false)
-            }, 20);
+            }, 20)
         } else {
             // changes from e.g. left to top
             me.updateInputWidth()
@@ -980,7 +974,7 @@ class Text extends Base {
             })
         }
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**
@@ -1419,7 +1413,7 @@ class Text extends Base {
      * @param {Boolean} silent=true
      * @returns {Boolean} Returns true in case there are no client-side errors
      */
-    validate(silent = true) {
+    validate(silent=true) {
         let me           = this,
             maxLength    = me.maxLength,
             minLength    = me.minLength,

package/src/tree/Accordion.mjs

@@ -37,6 +37,18 @@ class AccordionTree extends TreeList {
          * @member {Boolean} firstParentIsVisible=true
          */
         firstParentIsVisible_: true,
+        /**
+         * Currently selected item, which is bindable
+         * @member {Record[|null} selection=null
+         *
+         * @example
+         *     module: AccordionTree,
+         *     bind  : {selection: {twoWay: true, value: data => data.selection}}
+         *
+         *     ntype: 'component',
+         *     bind : {html: data => data.selection[0].name}
+         */
+        selection_: null,
         /**
          * @member {Object} _vdom
          */
@@ -112,6 +124,25 @@ class AccordionTree extends TreeList {
         return ClassSystemUtil.beforeSetInstance(value, TreeAccordionModel);
     }
 
+    /**
+     * Remove all items from the accordion
+     * If you do not need to update the view after clearing, set `withUpdate = false`
+     *
+     * @param {Boolean} [withUpdate=true]
+     */
+    clear(withUpdate = true) {
+        delete this.getVdomRoot().cn[0].cn
+
+        if (withUpdate) this.update();
+    }
+
+    /**
+     * Remove all items from the selection
+     */
+    clearSelection() {
+        this.selectionModel.deselectAll();
+    }
+
     /**
      * @param {String} [parentId] The parent node
      * @param {Object} [vdomRoot] The vdom template root for the current sub tree
@@ -133,12 +164,9 @@ class AccordionTree extends TreeList {
 
             if (parentId !== null) {
                 vdomRoot.cn.push({
-                    tag  : 'ul',
-                    cls  : ['neo-list'],
-                    cn   : [],
-                    style: {
-                        paddingLeft: '15px'
-                    }
+                    tag: 'ul',
+                    cls: ['neo-list'],
+                    cn : []
                 });
 
                 tmpRoot = vdomRoot.cn[vdomRoot.cn.length - 1];
@@ -188,7 +216,6 @@ class AccordionTree extends TreeList {
                         }]
                     }],
                     style: {
-                        padding : '10px',
                         position: item.isLeaf ? null : 'sticky',
                         top     : item.isLeaf ? null : (level * 38) + 'px',
                         zIndex  : item.isLeaf ? null : (20 / (level + 1)),
@@ -257,6 +284,7 @@ class AccordionTree extends TreeList {
 
     /**
      * Accordion gaining focus without selection => setSelection
+     *
      * @param {Object} data
      */
     onFocus(data) {
@@ -267,12 +295,85 @@ class AccordionTree extends TreeList {
         if (!selection) selModel.selectRoot();
     }
 
-    // Todo Might be needed
-    onStoreLoad() {
+    /**
+     * Called from SelectionModel select()
+     *
+     * @param {String[]} value
+     */
+    onSelect(value) {
+        const me = this;
+        let records = [];
+
+        value.forEach((selectItemId) => {
+            let id     = me.getItemRecordId(selectItemId),
+                record = me.store.get(id);
+
+            records.push(record);
+        });
+
+        me.selection = records;
+    }
+
+    /**
+     * After the store loaded, create the items for the list
+     *
+     * @param {Record[]} records
+     */
+    onStoreLoad(records) {
+        let me = this,
+            listenerId;
+
+        me.clear(false);
+
+        if (!me.mounted && me.rendering) {
+            listenerId = me.on('mounted', () => {
+                me.un('mounted', listenerId);
+                me.createItems(null, me.getListItemsRoot(), 0);
+                me.timeout(0).then(() => {
+                    me.update();
+                });
+            });
+        } else {
+            me.createItems(null, me.getListItemsRoot(), 0);
+            me.timeout(0).then(() => {
+                me.update();
+            });
+        }
     }
 
     onStoreRecordChange() {
     }
+
+    /**
+     * Set the selection either bei record id or record.
+     * You can pass a record or a recordId as value
+     *
+     * @param {Record|Record[]|Number|Number[]|String|String[]} value
+     */
+    setSelection(value) {
+        if (value === null) {
+            this.clearSelection();
+            return;
+        }
+
+        // In case you pass in an array use only the first item
+        if (Neo.isArray(value)) value = value[0];
+
+        const me = this;
+        let recordKeyProperty, elId;
+
+        if (Neo.isObject(value)) {
+            // Record
+            recordKeyProperty = value[me.getKeyProperty()];
+        } else {
+            // RecordId
+            recordKeyProperty = value;
+        }
+
+        elId = me.getItemId(recordKeyProperty);
+
+        me.selectionModel.selectAndScrollIntoView(elId);
+    }
 }
 
 Neo.applyClassConfig(AccordionTree);