neo.mjs 6.2.1 → 6.3.1

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/examples/popover/MainContainer.mjs

@@ -0,0 +1,58 @@
+import ConfigurationViewport from '../ConfigurationViewport.mjs';
+
+import Component     from '../../src/component/Base.mjs';
+import PopoverPlugin from '../../src/plugin/Popover.mjs';
+import Button        from '../../src/button/Base.mjs';
+
+/**
+ * @class Neo.examples.popover.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.popover.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 100,
+        configItemWidth     : 230,
+        layout              : {ntype: 'hbox', align: 'stretch'},
+        cls                 : ['examples-container-accordion']
+    }
+
+
+    /**
+     * @returns {*}
+     */
+    createExampleComponent() {
+        return Neo.ntype({
+            ntype : 'container',
+            height: '30%',
+            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+            items : [{
+                module: Component,
+                height: 10
+            }, {
+                module : Button,
+                width  : 200,
+                text   : 'Click Me',
+                plugins: [{
+                    module: PopoverPlugin,
+                    align : 'bc-tc',
+                    items : [{
+                        ntype  : 'panel',
+                        headers: [{
+                            dock: 'top',
+                            html: 'HEADER'
+                        }],
+                        items  : [{
+                            html: 'This is a comment about the button'
+                        }]
+                    }]
+                }]
+            }]
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/{treeSelectionModel → popover}/app.mjs

@@ -2,5 +2,5 @@ import MainContainer from './MainContainer.mjs';
 
 export const onStart = () => Neo.app({
     mainView: MainContainer,
-    name    : 'Neo.examples.treeSelectionModel'
+    name    : 'Neo.examples.popover'
 });

package/examples/popover/neo-config.json

@@ -0,0 +1,13 @@
+{
+    "appPath"    : "examples/popover/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark", "neo-theme-light"],
+    "mainThreadAddons": [
+        "DragDrop",
+        "ScrollSync",
+        "Stylesheet",
+        "Popover"
+    ]
+}

package/examples/{treeSelectionModel → popover}/tree.json

@@ -57,7 +57,7 @@
     "id": 8,
     "name": "V01 . At vero eos et accusam",
     "parentId": 7,
-    "collapsed": true,
+    "collapsed": false,
     "isLeaf": false,
     "content": "Auswählliste",
     "iconCls": "fa fa-chevron-down color-red"

package/examples/{treeSelectionModel → treeAccordion}/MainContainer.mjs

@@ -10,12 +10,12 @@ import ViewController from '../../src/controller/Component.mjs';
 import ViewModel      from '../../src/model/Component.mjs';
 
 /**
- * @class Neo.examples.treeSelectionModel.MainContainer
+ * @class Neo.examples.treeAccordion.MainContainer
  * @extends Neo.examples.ConfigurationViewport
  */
 class MainContainer extends ConfigurationViewport {
     static config = {
-        className           : 'Neo.examples.treeSelectionModel.MainContainer',
+        className           : 'Neo.examples.treeAccordion.MainContainer',
         autoMount           : true,
         configItemLabelWidth: 100,
         configItemWidth     : 230,
@@ -46,6 +46,14 @@ class MainContainer extends ConfigurationViewport {
             listeners     : {change: me.onConfigChange.bind(me, 'firstParentIsVisible')},
             style         : {marginTop: '10px'},
             valueLabelText: 'firstParentIsVisible'
+        }, {
+            module        : CheckBox,
+            checked       : treeList.showIcon,
+            hideLabel     : true,
+            hideValueLabel: false,
+            listeners     : {change: me.onConfigChange.bind(me, 'showIcon')},
+            style         : {marginTop: '10px'},
+            valueLabelText: 'showIcon'
         }, {
             module   : NumberField,
             clearable: true,
@@ -89,7 +97,7 @@ class MainContainer extends ConfigurationViewport {
                   },
 
                   autoLoad: true,
-                  url     : '../../examples/treeSelectionModel/tree.json'
+                  url     : '../../examples/treeAccordion/tree.json'
               });
 
         return Neo.ntype({
@@ -135,7 +143,7 @@ class MainContainer extends ConfigurationViewport {
             }, {
                 module: Panel,
                 height: 150,
-                width : '100%',
+                flex : 1,
 
                 itemDefaults: {
                     style: {

package/examples/treeAccordion/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.treeAccordion'
+});

package/examples/treeAccordion/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo Tree</title>
+</head>
+<body>
+    <script src="../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/{treeSelectionModel → treeAccordion}/neo-config.json

@@ -1,5 +1,5 @@
 {
-    "appPath"    : "examples/treeSelectionModel/app.mjs",
+    "appPath"    : "examples/treeAccordion/app.mjs",
     "basePath"   : "../../",
     "environment": "development",
     "mainPath"   : "./Main.mjs",

package/examples/treeAccordion/tree.json

@@ -0,0 +1,112 @@
+[
+  {
+    "id": 1,
+    "name": "ROOT",
+    "parentId": null,
+    "collapsed": false,
+    "isLeaf": false
+  },
+  {
+    "id": 2,
+    "name": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,",
+    "parentId": 1,
+    "isLeaf": true,
+    "content": "Textfeld",
+    "iconCls": "fa fa-t color-blue"
+  },
+  {
+    "id": 3,
+    "name": "Sed diam nonumy",
+    "parentId": 1,
+    "isLeaf": true,
+    "content": "Textfeld",
+    "iconCls": "fa fa-t color-blue"
+  },
+  {
+    "id": 4,
+    "name": "Eirmod",
+    "parentId": 1,
+    "isLeaf": true,
+    "content": "Textfeld",
+    "iconCls": "fa fa-t color-blue"
+  },
+  {
+    "id": 5,
+    "name": "Tempor",
+    "parentId": 1,
+    "isLeaf": true,
+    "content": "Textfeld",
+    "iconCls": "fa fa-t color-blue"
+  },
+  {
+    "id": 6,
+    "name": "Invidunt ut labore",
+    "parentId": 1,
+    "isLeaf": true,
+    "content": "Textfeld",
+    "iconCls": "fa fa-t color-blue"
+  },
+  {
+    "id": 7,
+    "name": "Dolore magna aliquyam",
+    "parentId": null,
+    "collapsed": false,
+    "isLeaf": false
+  },
+  {
+    "id": 8,
+    "name": "V01 . At vero eos et accusam",
+    "parentId": 7,
+    "collapsed": false,
+    "isLeaf": false,
+    "content": "Auswählliste",
+    "iconCls": "fa fa-chevron-down color-red"
+  },
+  {
+    "id": 9,
+    "name": "Justo  1",
+    "parentId": 8,
+    "isLeaf": true,
+    "content": "Child",
+    "iconCls": "fa-regular fa-square-check color-green"
+  },
+  {
+    "id": 10,
+    "name": "Justo 2",
+    "parentId": 8,
+    "isLeaf": true,
+    "content": "Child",
+    "iconCls": "fa-regular fa-square-check color-green"
+  },
+  {
+    "id": 11,
+    "name": "Rebum",
+    "parentId": null,
+    "collapsed": false,
+    "isLeaf": false
+  },
+  {
+    "id": 12,
+    "name": "F0801 - Stet ",
+    "parentId": 11,
+    "isLeaf": true,
+    "content": "Datumfeld",
+    "iconCls": "fa-solid fa-calendar-days color-yellow"
+  },
+  {
+    "id": 13,
+    "name": "F0802 - Kasd",
+    "parentId": 11,
+    "isLeaf": true,
+    "content": "Datumfeld",
+    "iconCls": "fa-solid fa-calendar-days color-yellow"
+  },
+  {
+    "id": 14,
+    "name": "E30 - Gubergren",
+    "parentId": 11,
+    "isLeaf": true,
+    "content": "Mehrfachauswahl",
+    "iconCls": "fa-regular fa-square-check color-green"
+  }
+]

package/package.json

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

package/resources/scss/src/examples/popover/MainContainer.scss

@@ -0,0 +1,111 @@
+[popover] {
+  inset: unset;
+  border-radius: 5px;
+  box-shadow: 2px 2px 7px #111;
+  background-color: #222;
+
+  //&.neo-popover[popover] {
+  //  display: revert;
+  //}
+
+  &.bc-tc {
+    position-fallback: --bc-tc;
+    translate: -50%;
+    margin: .5rem 0;
+  }
+  &.tc-bc {
+    position-fallback: --tc-bc;
+    translate: -50%;
+    margin: .5rem 0;
+  }
+  &.tl-tr {
+    position-fallback: --tl-tr;
+    margin: 0 .5rem;
+  }
+  &.tr-tl {
+    position-fallback: --tl-tr;
+    margin: 0 .5rem;
+  }
+  &.cl-cr {
+    position-fallback: --cl-cr;
+    margin: 0 .25rem;
+    translate: 0 -50%;
+  }
+  &.cr-cl {
+    position-fallback: --cr-cl;
+    margin: 0 .25rem;
+    translate: 0 -50%;
+  }
+}
+
+@position-fallback --bc-tc {
+  @try {
+    bottom: anchor(top);
+    left: anchor(center);
+  }
+
+  @try {
+    top: anchor(bottom);
+    left: anchor(center);
+  }
+}
+
+@position-fallback --tc-bc {
+  @try {
+    top: anchor(bottom);
+    left: anchor(center);
+  }
+
+  @try {
+    bottom: anchor(top);
+    left: anchor(center);
+  }
+}
+
+@position-fallback --tl-tr {
+  @try {
+    top: anchor(top);
+    left: anchor(right);
+  }
+
+  @try {
+    top: anchor(top);
+    right: anchor(left);
+  }
+}
+
+@position-fallback --tr-tl {
+  @try {
+    top: anchor(top);
+    right: anchor(left);
+  }
+
+  @try {
+    top: anchor(top);
+    left: anchor(right);
+  }
+}
+
+@position-fallback --cr-cl {
+  @try {
+    top: anchor(center);
+    right: anchor(left);
+  }
+
+  @try {
+    top: anchor(center);
+    left: anchor(right);
+  }
+}
+
+@position-fallback --cl-cr {
+  @try {
+    top: anchor(center);
+    left: anchor(right);
+  }
+
+  @try {
+    top: anchor(center);
+    right: anchor(left);
+  }
+}

package/src/DefaultConfig.mjs

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

package/src/form/Container.mjs

@@ -123,8 +123,8 @@ class Container extends BaseContainer {
 
         await this.loadModules();
 
-        ComponentManager.getChildComponents(this).forEach(item => {
-            item instanceof BaseField && fields.push(item)
+        ComponentManager.getChildComponents(this).forEach(field => {
+            field instanceof BaseField && fields.push(field)
         });
 
         return fields
@@ -135,40 +135,52 @@ class Container extends BaseContainer {
      */
     async getValues() {
         let fields = await this.getFields(),
+            Radio  = Neo.form.field.Radio,
             values = {},
-            itemName, key, ns, nsArray, value;
+            fieldName, key, ns, nsArray, value;
 
-        fields.forEach(item => {
-            value = item.getValue();
+        fields.forEach(field => {
+            value = field.getValue();
 
-            if (item.name) {
-                itemName = item.name;
+            if (field.name) {
+                fieldName = field.name;
 
-                if (item.formGroup) {
-                    itemName = item.formGroup + '.' + itemName;
+                if (field.formGroup) {
+                    fieldName = field.formGroup + '.' + fieldName;
                 }
 
-                nsArray = itemName.split('.');
+                nsArray = fieldName.split('.');
                 key     = nsArray.pop();
                 ns      = Neo.nsWithArrays(nsArray, true, values);
             } else {
-                key = item.id;
+                key = field.id;
                 ns  = values
             }
 
+            // Ensuring that Radios will not return arrays
+            if (Radio && field instanceof Radio) {
+                // Only overwrite an existing value with a checked value
+                if (Object.hasOwn(ns, key)) {
+                    if (value !== field.uncheckedValue) {
+                        ns[key] = value
+                    }
+                } else {
+                    ns[key] = value
+                }
+            }
             /*
              * CheckBoxes need custom logic
              * => we only want to pass the uncheckedValue in case the field does not belong to a group
              * (multiple fields using the same name)
              */
-            if (Object.hasOwn(ns, key) && value !== undefined) {
-                if (ns[key] === item.uncheckedValue) {
+            else if (Object.hasOwn(ns, key) && value !== undefined) {
+                if (ns[key] === field.uncheckedValue) {
                     ns[key] = []
                 } else if (!Array.isArray(ns[key])) {
                     ns[key] = [ns[key]]
                 }
 
-                value !== item.uncheckedValue && ns[key].unshift(value)
+                value !== field.uncheckedValue && ns[key].unshift(value)
             } else if (value !== undefined) {
                 ns[key] = value
             }
@@ -223,11 +235,11 @@ class Container extends BaseContainer {
             fields = await me.getFields(),
             path, value;
 
-        fields.forEach(item => {
-            path  = me.getFieldPath(item);
+        fields.forEach(field => {
+            path  = me.getFieldPath(field);
             value = Neo.nsWithArrays(path, false, values);
 
-            item.reset(path ? value : null)
+            field.reset(path ? value : null)
         })
     }
 
@@ -241,38 +253,38 @@ class Container extends BaseContainer {
             fields = await me.getFields(),
             fieldConfigs, isCheckBox, isRadio, path, value;
 
-        fields.forEach(item => {
-            path         = me.getFieldPath(item);
+        fields.forEach(field => {
+            path         = me.getFieldPath(field);
             fieldConfigs = Neo.nsWithArrays(path, false, configs);
 
             if (fieldConfigs) {
                 if (suspendEvents) {
-                    item.suspendEvents = true
+                    field.suspendEvents = true
                 }
 
-                isCheckBox = Neo.form.field?.CheckBox && item instanceof Neo.form.field.CheckBox;
+                isCheckBox = Neo.form.field?.CheckBox && field instanceof Neo.form.field.CheckBox;
+                isRadio    = Neo.form.field?.Radio && field instanceof Neo.form.field.Radio;
                 value      = fieldConfigs.value;
 
-                if (isCheckBox) {
+                if (isRadio) {
+                    fieldConfigs.checked = field.value === value;
+                    delete fieldConfigs.value
+                } else if (isCheckBox) {
                     if (Neo.typeOf(value) === 'Array') {
-                        if (value.includes(item.value)) {
+                        if (value.includes(field.value)) {
                             fieldConfigs.checked = true
                         }
                     } else {
-                        fieldConfigs.checked = item.value === value
+                        fieldConfigs.checked = field.value === value
                     }
-                } else if (value !== undefined) {
-                    isRadio = Neo.form.field?.Radio && item instanceof Neo.form.field.Radio;
 
-                    if (isRadio) {
-                        fieldConfigs.checked = item.value === value
-                    }
+                    delete fieldConfigs.value
                 }
 
-                item.set(fieldConfigs)
+                field.set(fieldConfigs)
 
                 if (suspendEvents) {
-                    delete item.suspendEvents
+                    delete field.suspendEvents
                 }
             }
         })
@@ -299,8 +311,8 @@ class Container extends BaseContainer {
             fields  = await this.getFields(),
             validField;
 
-        fields.forEach(item => {
-            validField = item.validate?.(false);
+        fields.forEach(field => {
+            validField = field.validate?.(false);
 
             if (!validField) {
                 isValid = false

package/src/form/field/Base.mjs

@@ -76,9 +76,7 @@ class Base extends Component {
      * @param {*} oldValue
      */
     afterSetValue(value, oldValue) {
-        if (oldValue !== undefined) {
-            this.fireChangeEvent(value, oldValue)
-        }
+        oldValue !== undefined && this.fireChangeEvent(value, oldValue)
     }
 
     /**
@@ -134,27 +132,42 @@ class Base extends Component {
      */
     fireChangeEvent(value, oldValue) {
         let me            = this,
-            FormContainer = Neo.form?.Container;
+            FormContainer = Neo.form?.Container,
+            opts          = {component: me, oldValue, value};
 
-        me.fire('change', {
-            component: me,
-            oldValue,
-            value
-        });
+        if (Neo.isFunction(me.getGroupValue)) {
+            opts.groupValue = me.getGroupValue()
+        }
+
+        me.fire('change', opts);
 
         if (!me.suspendEvents) {
             ComponentManager.getParents(me).forEach(parent => {
                 if (FormContainer && parent instanceof FormContainer) {
-                    parent.fire('fieldChange', {
-                        component: me,
-                        oldValue,
-                        value
-                    })
+                    parent.fire('fieldChange', opts)
                 }
             })
         }
     }
 
+    /**
+     * Forms in neo can be nested. This method will return the closest parent which is a form.Container or null.
+     * @returns {Neo.form.Container|null}
+     */
+    getClosestForm() {
+        let me            = this,
+            FormContainer = Neo.form?.Container,
+            parent;
+
+        for (parent of ComponentManager.getParents(me)) {
+            if (FormContainer && parent instanceof FormContainer) {
+                return parent
+            }
+        }
+
+        return null
+    }
+
     /**
      * Override this method as needed
      * @returns {Object|null}
@@ -213,15 +226,17 @@ class Base extends Component {
         super.onFocusLeave?.(data);
 
         let me            = this,
-            FormContainer = Neo.form?.Container;
+            FormContainer = Neo.form?.Container,
+            opts          = {...data, component: me, value: me.getValue()};
+
+        if (Neo.isFunction(me.getGroupValue)) {
+            opts.groupValue = me.getGroupValue()
+        }
 
         if (!me.suspendEvents) {
             ComponentManager.getParents(me).forEach(parent => {
                 if (FormContainer && parent instanceof FormContainer) {
-                    parent.fire('fieldFocusLeave', {
-                        ...data,
-                        component: me
-                    })
+                    parent.fire('fieldFocusLeave', opts)
                 }
             })
         }

package/src/form/field/CheckBox.mjs

@@ -194,7 +194,7 @@ class CheckBox extends Base {
         me.update();
 
         if (oldValue !== undefined) {
-            me.fireChangeEvent(me.getValue(), null)
+            me.fireChangeEvent(me.getValue(), me.getOldValue())
         }
     }
 
@@ -433,6 +433,23 @@ class CheckBox extends Base {
         return true
     }
 
+    /**
+     * @returns {String[]}
+     */
+    getGroupValue() {
+        let form   = this.getClosestForm(),
+            fields = ComponentManager.find({path: this.getPath()}),
+            value  = [];
+
+        fields.forEach(field => {
+            if (field.checked && field.getClosestForm() === form) {
+                NeoArray.add(value, field.value)
+            }
+        });
+
+        return value
+    }
+
     /**
      * @returns {String}
      */
@@ -462,6 +479,17 @@ class CheckBox extends Base {
     }
 
     /**
+     * Counterpart to getValue(), returning the uncheckedValue if checked
+     * @returns {String|null}
+     */
+    getOldValue() {
+        let me = this;
+
+        return me.checked ? me.uncheckedValue : me.value
+    }
+
+    /**
+     * Returns this.value if checked, otherwise this.uncheckedValue
      * @returns {String|null}
      */
     getValue() {
@@ -482,7 +510,7 @@ class CheckBox extends Base {
      */
     isValid() {
         this.validate(true); // silent
-        
+
         return this.error ? false : super.isValid()
     }
 

package/src/form/field/Radio.mjs

@@ -45,10 +45,22 @@ class Radio extends CheckBox {
     }
 
     /**
-     * @returns {String|null}
+     * Radios should only fire change & fieldChange events if checked.
+     * If there was just 1 radio, you can not uncheck it.
+     * @param {*} value
+     * @param {*} oldValue
      */
-    getValue() {
-        return this.checked ? this.value : undefined
+    fireChangeEvent(value, oldValue) {
+        this.checked && super.fireChangeEvent(value, oldValue)
+    }
+
+    /**
+     * @returns {String[]}
+     */
+    getGroupValue() {
+        let value = super.getGroupValue();
+
+        return value.length > 0 ? value[0] : []
     }
 
     /**

package/src/main/addon/Popover.mjs

@@ -0,0 +1,75 @@
+import Base      from '../../core/Base.mjs';
+import DomAccess from '../DomAccess.mjs'
+/**
+ * Addon for Popover
+ * @class Neo.main.addon.Popover
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class Popover extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.Popover'
+         * @protected
+         */
+        className: 'Neo.main.addon.Popover',
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote={app: [//...]}
+         * @protected
+         */
+        remote: {
+            app: [
+                'hide',
+                'show',
+                'toggle'
+            ]
+        },
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @returns {Boolean}
+     */
+    hide(data) {
+        this.getPopover(data.id).hidePopover();
+        return true;
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @returns {Boolean}
+     */
+    show(data) {
+        this.getPopover(data.id).showPopover();
+        return true;
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @returns {Boolean}
+     */
+    toggle(data) {
+        this.getPopover(data.id).togglePopover();
+        return true;
+    }
+
+    getPopover(parentId) {
+        const parent = document.getElementById(parentId),
+              popover = document.getElementById(parent.getAttribute('popovertarget'));
+
+        return popover;
+    }
+}
+
+let instance = Neo.applyClassConfig(Popover);
+
+export default instance;

package/src/main/addon/PrefixField.mjs

@@ -0,0 +1,149 @@
+import Base from '../../core/Base.mjs';
+
+/**
+ * Helper class to include Google's Material Web Components into your neo.mjs app
+ * https://www.amcharts.com/docs/v4/
+ * @class Neo.main.addon.PrefixField
+ * @extends Neo.core.Base
+ * @singleton
+ */
+class PrefixField extends Base {
+    static config = {
+        /**
+         * @member {String} className='Neo.main.addon.PrefixField'
+         * @protected
+         */
+        className: 'Neo.main.addon.PrefixField',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true,
+        /**
+         * Remote method access for other workers
+         * @member {Object} remote
+         * @protected
+         */
+        remote: {
+            app: [
+                'initialize',
+                'destroy',
+                'updateAccept',
+                'updatePattern',
+                'updateSlots',
+            ]
+        },
+
+        /**
+         * regex to calculate if entered value is acceptable
+         * Preset to numbers only
+         *
+         * @member {regex|null} accept
+         */
+        accept_: null,
+        /**
+         * @member {String} pattern=null
+         */
+        pattern_: null,
+        /**
+         * Only add a String. A Set will be automatically created
+         * @member {String|Set|null} slots=null
+         */
+        slots_: null
+    }
+
+    destroy() {
+
+    }
+
+    elIds = new Map();
+
+    prev;
+
+    back = false;
+
+    /**
+     *
+     * @param {Object} data
+     * @param {String} data.elId
+     * @param {String} data.pattern
+     * @param {String} data.slots
+     * @param {String} data.accept
+     */
+    initialize(data) {
+        const me = this;
+
+        me.elId     = data.elId;
+
+        const el      = me.el = document.getElementById(data.elId),
+              pattern = me.pattern = data.pattern,
+              slots = me.slots = new Set(data.slots || "_");
+
+        me.accept = data.accept;
+        me.prev   = (j => Array.from(pattern, (c, i) => slots.has(c) ? j = i + 1 : j))(0);
+        me.first  = [...pattern].findIndex(c => slots.has(c));
+
+        me.addListeners();
+        me.addCss();
+    }
+
+    addCss() {
+        this.el.classList.add('tiny-prefix-field-input');
+    }
+
+    addListeners() {
+        const me       = this,
+              el       = me.el,
+              formatFn = me.format.bind(me);
+
+        el.addEventListener("keypress", me.onKeyDown.bind(me));
+        el.addEventListener("input", formatFn);
+        el.addEventListener("focusin", formatFn);
+        el.addEventListener("focusout", me.onBlur.bind(me));
+    }
+
+    onBlur() {
+        const pattern = this.pattern,
+              el      = this.el;
+
+        return el.value === pattern && (el.value = "");
+    }
+
+    onKeyDown(event) {
+        this.back = (event.key === "Backspace");
+    }
+
+    clean(input) {
+        const el      = this.el,
+              accept  = new RegExp(this.accept || "\\d", "g"),
+              pattern = this.pattern,
+              slots   = this.slots;
+
+        input = input.match(accept) || [];
+
+        return Array.from(pattern, c =>
+            input[0] === c || slots.has(c) ? input.shift() || c : c
+        );
+    }
+
+    format() {
+        const me    = this,
+              el    = this.el,
+              prev  = this.prev,
+              clean = this.clean.bind(this);
+        console.log(el.selectionStart, el.selectionEnd);
+        const [i, j] = [el.selectionStart, el.selectionEnd].map(i => {
+            i = clean(el.value.slice(0, i)).findIndex(c => me.slots.has(c));
+            return i < 0 ? prev[prev.length - 1] : me.back ? prev[i - 1] || me.first : i;
+        });
+
+        el.value = clean(el.value).join``;
+        el.setSelectionRange(i, j);
+
+        this.back = false;
+    }
+}
+
+let instance = Neo.applyClassConfig(PrefixField);
+
+export default instance;

package/src/plugin/Popover.mjs

@@ -0,0 +1,194 @@
+import Base      from './Base.mjs';
+import Container from '../container/Base.mjs'
+import NeoArray  from "../util/Array.mjs";
+
+/**
+ * Popover usable as tooltip
+ * @class Neo.plugin.Popover
+ * @extends Neo.plugin.Base
+ *
+ * @example
+ *
+ *     module : Button,
+ *     width  : 200,
+ *     text   : 'Click Me',
+ *     plugins: [{
+ *         module: PopoverPlugin,
+ *         align : 'bc-tc',
+ *         items : [{
+ *             ntype  : 'panel',
+ *             headers: [{
+ *                 dock: 'top',
+ *                 html: 'HEADER'
+ *             }],
+ *             items  : [{
+ *                 html: 'This is a comment about the button'
+ *             }]
+ *         }]
+ *     }]
+ */
+class Popover extends Base {
+    /**
+     * Valid values for align
+     * @member {String[]} alignValues=['bc-tc','tc-bc','tl-tr','tr-tl','cl-cr','cr-cl',null]
+     * @protected
+     * @static
+     *
+     * todo add more
+     */
+    static alignValues = ['bc-tc', 'tc-bc', 'tl-tr', 'tr-tl', 'cl-cr', 'cr-cl', null]
+
+    static config = {
+        /**
+         * @member {String} className='Neo.plugin.Popover'
+         * @protected
+         */
+        className: 'Neo.plugin.Popover',
+        /**
+         * @member {String} ntype='popover'
+         * @protected
+         */
+        ntype: 'plugin-popover',
+
+
+        /**
+         * Define popover to popovertarget alignment
+         * Defaults to bottom center of popover is aligned to top center of owner
+         * @type {string} align='bc-tc'
+         */
+        align_: 'bc-tc',
+        /**
+         * Custom cls to add to the owner component
+         * @member {String} ownerCls='neo-prefixfield'
+         */
+        popovertargetCls: 'neo-popover-target',
+        /**
+         * Custom cls to add to the owner component
+         * @member {String} ownerCls='neo-prefixfield'
+         */
+        popoverBaseCls: 'neo-popover',
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        let me = this;
+
+        super.construct(config);
+
+        me.popoverId = Neo.getId('popover');
+
+        // prepare owner
+        me.preparePopoverTarget();
+        me.addPopover();
+
+        me.addListeners();
+    }
+
+    /**
+     * Add listeners
+     * @protected
+     */
+    addListeners() {
+        const me = this;
+
+        me.owner.addDomListeners([
+            {mouseover: me.onTargetMouseOver, scope: me},
+            {mouseout: me.onTargetMouseOut, scope: me}
+        ]);
+    }
+
+    /**
+     * Create the popover and add it to the parent component of the owner
+     * @protected
+     */
+    addPopover() {
+        const me      = this,
+              owner   = me.owner,
+              parent  = Neo.get(me.owner.parentId),
+              popover = {
+                  module: Container,
+                  id    : me.popoverId,
+
+                  baseCls: [me.popoverBaseCls],
+                  cls    : [me.align],
+
+                  layout: 'base',
+                  items : me.items || [],
+
+                  vdom: {
+                      // Possible Values are auto, manual.
+                      popover: 'auto',
+                      anchor : owner.id
+                  }
+              };
+
+        parent.add(popover);
+    }
+
+    /**
+     * Checks if the new value for "align" is valid
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     * @returns {String|null} value
+     */
+    beforeSetAlign(value, oldValue) {
+        return this.testInputValue(value, oldValue, 'alignValues', 'align');
+    }
+
+    /**
+     * @event mouseout
+     * @param {Object} data
+     * @protected
+     */
+    onTargetMouseOut(data) {
+        Neo.main.addon.Popover.hide({id: data.component.id});
+    }
+
+    /**
+     * @event mouseover
+     * @param {Object} data
+     * @protected
+     */
+    onTargetMouseOver(data) {
+        Neo.main.addon.Popover.show({id: data.component.id});
+    }
+
+    /**
+     * @protected
+     */
+    preparePopoverTarget() {
+        const me         = this,
+              target     = me.owner,
+              targetVdom = target.vdom;
+
+        target.addCls(me.popovertargetCls);
+        targetVdom.popovertarget = me.popoverId;
+    }
+
+    /**
+     * Checks if the new value for propertyName is valid
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @param {String} validValuesName
+     * @param {String} propertyName
+     * @protected
+     * @returns {String|null} value
+     */
+    testInputValue(value, oldValue, validValuesName, propertyName) {
+        const validValues = this.getStaticConfig(validValuesName);
+
+        if (!NeoArray.hasItem(validValues, value)) {
+            Neo.logError(this.id + ' -> layout: supported values for "' + propertyName + '" are', validValues);
+            return oldValue;
+        }
+
+        return value;
+    }
+}
+
+Neo.applyClassConfig(Popover);
+
+export default Popover;

package/src/tree/Accordion.mjs

@@ -7,6 +7,20 @@ import VDomUtil           from "../util/VDom.mjs";
 /**
  * @class Neo.tree.Accordion
  * @extends Neo.tree.List
+ *
+ * Accordion Store expects the following fields
+ *
+ *      [
+ *          iconCls,        // can be defined in fields:icon
+ *          content,        // can be defined in fields:text
+ *          name,           // can be defined in fields:header
+ *
+ *          collapsed,      // collapsed state for non-leaf-items
+ *          isLeaf,         // defines it item is leaf-item
+ *          id,             // defines item id
+ *          parentId        // leaf or sub-items need a parentId
+ *      ]
+ *
  */
 class AccordionTree extends TreeList {
     static config = {
@@ -25,19 +39,24 @@ class AccordionTree extends TreeList {
          */
         baseCls: ['neo-tree-list'],
         /**
-         * @member {Boolean} showCollapseExpandAllIcons=true
+         * Set to false to hide the initial root item
+         * @member {Boolean} firstParentIsVisible=true
          */
-        showCollapseExpandAllIcons: false,
+        firstParentIsVisible_: true,
+        /**
+         * Define the field names for the store to show header, text and icon
+         * @member {Object} fields={header:'name',icon:'iconCls',text:'content'}
+         */
+        fields: {
+            header: 'name',
+            icon  : 'iconCls',
+            text  : 'content'
+        },
         /**
          * Set to false will auto expand root parent items and disallow collapsing
          * @member {Boolean} rootParentIsCollapsible=false
          */
         rootParentsAreCollapsible_: false,
-        /**
-         * Set to false to hide the initial root item
-         * @member {Boolean} firstParentIsVisible=true
-         */
-        firstParentIsVisible_: true,
         /**
          * Currently selected item, which is bindable
          * @member {Record[]|null} selection=null
@@ -50,6 +69,15 @@ class AccordionTree extends TreeList {
          *     bind : {html: data => data.selection[0].name}
          */
         selection_: null,
+        /**
+         * Set to false will hide the icons for all leaf items
+         * @member {Boolean} showIcon=true
+         */
+        showIcon_: true,
+        /**
+         * @member {Boolean} showCollapseExpandAllIcons=true
+         */
+        showCollapseExpandAllIcons: false,
         /**
          * @member {Object} _vdom
          */
@@ -114,6 +142,31 @@ class AccordionTree extends TreeList {
         }
     }
 
+    /**
+     * Called when changing showIcon
+     * Changes the display of the icons
+     *
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     */
+    afterSetShowIcon(value, oldValue) {
+        const me    = this,
+              store = me.store,
+              hide  = !value;
+
+        store.items.forEach((record) => {
+            const itemId   = me.getItemId(record[me.getKeyProperty()]),
+                  vdom     = me.getVdomChild(itemId),
+                  itemVdom = VDomUtil.getByFlag(vdom, 'icon');
+
+            if (record.isLeaf) {
+                itemVdom.removeDom = hide;
+            }
+        })
+
+        me.update()
+    }
+
     /**
      * Triggered before the selectionModel config gets changed.
      * @param {Neo.selection.Model} value
@@ -211,10 +264,11 @@ class AccordionTree extends TreeList {
                     cls,
                     id,
                     cn : [{
+                        flag     : 'icon',
                         tag      : 'span',
-                        cls      : ['neo-accordion-item-icon', item.iconCls],
-                        id       : id + '__item',
-                        removeDom: !item.isLeaf
+                        cls      : ['neo-accordion-item-icon', item[me.fields.icon]],
+                        id       : id + '__icon',
+                        removeDom: (!item.isLeaf || !me.showIcon)
                     }, {
                         cls  : [itemCls + '-content'],
                         id   : id + '__item-content',
@@ -224,13 +278,13 @@ class AccordionTree extends TreeList {
                             tag      : 'span',
                             cls      : [itemCls + '-content-header'],
                             id       : id + '__item-content-header',
-                            innerHTML: item.name
+                            innerHTML: item[me.fields.header]
                         }, {
                             flag     : 'content',
                             tag      : 'span',
                             cls      : [itemCls + '-content-text'],
                             id       : id + '__item-content-text',
-                            innerHTML: item.content
+                            innerHTML: item[me.fields.text]
                         }]
                     }],
                     style: {
@@ -273,7 +327,6 @@ class AccordionTree extends TreeList {
         const me             = this,
               selectionModel = me.selectionModel,
               itemId         = item.id,
-              // ! todo make it String
               id             = Number(itemId.split('__')[1]),
               record         = me.store.get(id);
 
@@ -354,11 +407,11 @@ class AccordionTree extends TreeList {
 
     /**
      * Update a record
-     * @param {Object} data
-     * @param {Object[]} data.fields
-     * @param {Number} data.index
+     * @param {Object}         data
+     * @param {Object[]}       data.fields
+     * @param {Number}         data.index
      * @param {Neo.data.Model} data.model
-     * @param {Record} data.record
+     * @param {Record}         data.record
      */
     onStoreRecordChange(data) {
         let me     = this,