neo.mjs 6.2.0 → 6.3.0

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

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.0",
+    "version": "6.3.0",
     "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.0'
+     * @default '6.3.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.2.0'
+    version: '6.3.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/form/Container.mjs

@@ -135,6 +135,7 @@ class Container extends BaseContainer {
      */
     async getValues() {
         let fields = await this.getFields(),
+            Radio  = Neo.form.field.Radio,
             values = {},
             itemName, key, ns, nsArray, value;
 
@@ -156,12 +157,23 @@ class Container extends BaseContainer {
                 ns  = values
             }
 
+            // Ensuring that Radios will not return arrays
+            if (Radio && item instanceof Radio) {
+                // Only overwrite an existing value with a checked value
+                if (Object.hasOwn(ns, key)) {
+                    if (value !== item.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) {
+            else if (Object.hasOwn(ns, key) && value !== undefined) {
                 if (ns[key] === item.uncheckedValue) {
                     ns[key] = []
                 } else if (!Array.isArray(ns[key])) {

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/menu/List.mjs

@@ -357,9 +357,12 @@ class List extends BaseList {
 
             record.handler?.call(me, record);
 
-            if (me.hideOnLeafItemClick && !record.items) {
-                me.unmount()
-            }
+            record.route && Neo.Main.setRoute({
+                appName: me.appName,
+                value  : record.route
+            });
+
+            me.hideOnLeafItemClick && !record.items && me.unmount();
 
             if (record.items) {
                 submenu = me.subMenuMap?.[me.getMenuMapId(recordId)];

package/src/menu/Model.mjs

@@ -33,6 +33,9 @@ class Model extends BaseModel {
         }, {
             name: 'items', // optional
             type: 'Array'
+        }, {
+            name: 'route',
+            type: 'String'
         }, {
             name: 'text',
             type: 'String'

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,