neo.mjs 6.1.2 → 6.1.4

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/resources/scss/src/tab/header/Toolbar.scss

@@ -11,7 +11,7 @@
             .neo-tab-button-indicator {
                 bottom: unset;
                 height: var(--tab-strip-height);
-                top   : calcVar(tab-strip-height, '*', -1);
+                top   : calc(var(--tab-strip-height) * -1);
                 width : 100%;
             }
 
@@ -33,7 +33,7 @@
             .neo-tab-button-indicator {
                 bottom: unset;
                 height: 100%;
-                right : calcVar(tab-strip-height, '*', -1);
+                right : calc(var(--tab-strip-height) * -1);
                 width : var(--tab-strip-height);
             }
 
@@ -62,7 +62,7 @@
             .neo-tab-button-indicator {
                 bottom: unset;
                 height: 100%;
-                left  : calcVar(tab-strip-height, '*', -1);
+                left  : calc(var(--tab-strip-height) * -1);
                 width : var(--tab-strip-height);
             }
 

package/src/DefaultConfig.mjs

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

package/src/main/DomEvents.mjs

@@ -669,16 +669,9 @@ class DomEvents extends Base {
      * @returns {Object}
      */
     parseDomRect(rect) {
-        return {
-            bottom: rect.bottom,
-            height: rect.height,
-            left  : rect.left,
-            right : rect.right,
-            top   : rect.top,
-            width : rect.width,
-            x     : rect.x,
-            y     : rect.y
-        }
+        let {bottom, height, left, right, top, width, x, y} = rect;
+
+        return {bottom, height, left, right, top, width, x, y}
     }
 
     /**

package/src/main/mixin/DeltaUpdates.mjs

@@ -122,12 +122,14 @@ class DeltaUpdates extends Base {
             node       = this.getElement(delta.id),
             parentNode = this.getElement(delta.parentId);
 
-        if (index >= parentNode.children.length) {
-            parentNode.appendChild(node)
-        } else {
-            //index++; // todo?: increase the index in case same parent, oldIndex < newIndex, direct swap
-            if (node && parentNode.children[index].id !== delta.id) {
-                parentNode.insertBefore(node, parentNode.children[index])
+        if (parentNode) {
+            if (index >= parentNode.children.length) {
+                parentNode.appendChild(node)
+            } else {
+                //index++; // todo?: increase the index in case same parent, oldIndex < newIndex, direct swap
+                if (node && parentNode.children[index].id !== delta.id) {
+                    parentNode.insertBefore(node, parentNode.children[index])
+                }
             }
         }
     }

package/src/tree/Accordion.mjs

@@ -2,6 +2,7 @@ import TreeList           from '../tree/List.mjs';
 import TreeAccordionModel from "../selection/TreeAccordionModel.mjs";
 import NeoArray           from "../util/Array.mjs";
 import ClassSystemUtil    from "../util/ClassSystem.mjs";
+import VDomUtil           from "../util/VDom.mjs";
 
 /**
  * @class Neo.tree.Accordion
@@ -39,7 +40,7 @@ class AccordionTree extends TreeList {
         firstParentIsVisible_: true,
         /**
          * Currently selected item, which is bindable
-         * @member {Object[]|null} selection=null
+         * @member {Record[]|null} selection=null
          *
          * @example
          *     module: AccordionTree,
@@ -157,7 +158,7 @@ class AccordionTree extends TreeList {
             items     = me.store.find('parentId', parentId),
             itemCls   = me.itemCls,
             folderCls = me.folderCls,
-            cls, tmpRoot;
+            cls, id, itemIconCls, tmpRoot;
 
         if (items.length > 0) {
             if (!vdomRoot.cn) {
@@ -168,7 +169,8 @@ class AccordionTree extends TreeList {
                 vdomRoot.cn.push({
                     tag: 'ul',
                     cls: ['neo-list'],
-                    cn : []
+                    cn : [],
+                    id : `${me.id}__${parentId}__ul`
                 });
 
                 tmpRoot = vdomRoot.cn[vdomRoot.cn.length - 1];
@@ -179,6 +181,12 @@ class AccordionTree extends TreeList {
             items.forEach(item => {
                 cls = [itemCls];
 
+                itemIconCls = ['neo-accordion-item-icon'];
+                if (item.iconCls) {
+                    NeoArray.add(itemIconCls, item.iconCls.split(' '));
+                }
+
+
                 if (item.isLeaf) {
                     cls.push(itemCls + (item.singleton ? '-leaf-singleton' : '-leaf'));
                 } else {
@@ -196,24 +204,32 @@ class AccordionTree extends TreeList {
                     }
                 }
 
+                id = me.getItemId(item.id);
+
                 tmpRoot.cn.push({
-                    tag  : 'li',
+                    tag: 'li',
                     cls,
-                    id   : me.getItemId(item.id),
-                    cn   : [{
+                    id,
+                    cn : [{
                         tag      : 'span',
                         cls      : ['neo-accordion-item-icon', item.iconCls],
+                        id       : id + '__item',
                         removeDom: !item.isLeaf
                     }, {
                         cls  : [itemCls + '-content'],
+                        id   : id + '__item-content',
                         style: {pointerEvents: 'none'},
                         cn   : [{
+                            flag     : 'name',
                             tag      : 'span',
                             cls      : [itemCls + '-content-header'],
+                            id       : id + '__item-content-header',
                             innerHTML: item.name
                         }, {
+                            flag     : 'content',
                             tag      : 'span',
                             cls      : [itemCls + '-content-text'],
+                            id       : id + '__item-content-text',
                             innerHTML: item.content
                         }]
                     }],
@@ -316,7 +332,7 @@ class AccordionTree extends TreeList {
 
     /**
      * After the store loaded, create the items for the list
-     * @param {Object[]} records
+     * @param {Record[]} records
      */
     onStoreLoad(records) {
         let me = this,
@@ -328,29 +344,51 @@ class AccordionTree extends TreeList {
             listenerId = me.on('mounted', () => {
                 me.un('mounted', listenerId);
                 me.createItems(null, me.getListItemsRoot(), 0);
-                me.timeout(0).then(() => {
-                    me.update();
-                });
+                me.update()
             });
         } else {
             me.createItems(null, me.getListItemsRoot(), 0);
-            me.timeout(0).then(() => {
-                me.update();
-            });
+            me.update()
         }
     }
 
     /**
-     *
+     * Update a record
+     * @param {Object} data
+     * @param {Object} data.fields
+     * @param {Number} data.index
+     * @param {Model}  data.model
+     * @param {Record} data.record
      */
-    onStoreRecordChange() {
+    onStoreRecordChange(data) {
+        const me     = this,
+              record = data.record,
+              fields = data.fields,
+              itemId = me.getItemId(record[me.getKeyProperty()]),
+              vdom   = me.getVdomChild(itemId);
+
+        fields.forEach((field) => {
+            const itemVdom = VDomUtil.getByFlag(vdom, field.name);
+
+            if (field.name === 'iconCls') {
+                const clsItems = field.value.split(' '),
+                      cls      = ['neo-accordion-item-icon'];
+
+                NeoArray.add(cls, clsItems);
+                itemVdom.cls = cls;
+            } else {
+                itemVdom.html = field.value;
+            }
+        })
+
+        me.update();
     }
 
     /**
      * Set the selection either bei record id or record.
      * You can pass a record or a recordId as value
      *
-     * @param {Object|Object[]|Number|Number[]|String|String[]} value
+     * @param {Record|Record[]|Number|Number[]|String|String[]} value
      */
     setSelection(value) {
         if (value === null) {