neo.mjs 6.0.2 → 6.0.3

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.3'
          */
-        version: '6.0.2'
+        version: '6.0.3'
     }
 
     /**

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.3'
          */
-        version: '6.0.2'
+        version: '6.0.3'
     }
 
     /**

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.3",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -109,6 +109,9 @@
         .neo-file-upload-error-message {
             display : initial;
         }
+        input[type="file"],label {
+            display : none;
+        }
     }
 }
 
@@ -230,7 +233,7 @@
     }
 }
 
-.neo-file-upload-state-ready {
+.neo-file-upload-state-ready:not(.neo-invalid) {
     // 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) {

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.3'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.0.2'
+    version: '6.0.3'
 };
 
 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/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

@@ -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}
@@ -388,7 +393,8 @@ class FileUpload extends Base {
     onInputValueChange({ files }) {
         const
             me        = this,
-            { types } = me;
+            { types } = me,
+            body      = me.vdom.cn[1];
 
         if (files.length) {
             const
@@ -397,9 +403,13 @@ class FileUpload extends Base {
                 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
@@ -553,6 +563,9 @@ class FileUpload extends Base {
                 me.clear();
                 me.state = 'ready';
                 break;
+            case 'ready':
+                me.clear();
+                break;
         }
     }
 

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
          */
@@ -133,12 +145,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 +197,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 +265,7 @@ class AccordionTree extends TreeList {
 
     /**
      * Accordion gaining focus without selection => setSelection
+     *
      * @param {Object} data
      */
     onFocus(data) {
@@ -267,8 +276,48 @@ 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;
+
+        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() {