neo.mjs 4.3.9 → 4.3.11

package/src/component/Chip.mjs

@@ -81,11 +81,8 @@ class Chip extends Component {
      * @protected
      */
     afterSetClosable(value, oldValue) {
-        let me   = this,
-            vdom = me.vdom;
-
-        vdom.cn[2].removeDom = !value;
-        me.vdom = vdom;
+        this.vdom.cn[2].removeDom = !value;
+        this.update();
     }
 
     /**
@@ -108,8 +105,7 @@ class Chip extends Component {
      */
     afterSetIconCls(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
-            iconNode = vdom.cn[0];
+            iconNode = me.vdom.cn[0];
 
         NeoArray.remove(iconNode.cls, oldValue);
 
@@ -120,7 +116,7 @@ class Chip extends Component {
             NeoArray.add(iconNode.cls, value);
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -130,9 +126,7 @@ class Chip extends Component {
      * @protected
      */
     afterSetText(value, oldValue) {
-        let me       = this,
-            vdom     = me.vdom,
-            textNode = vdom.cn[1];
+        let textNode = this.vdom.cn[1];
 
         if (!value || value === '') {
             textNode.removeDom = true;
@@ -141,7 +135,7 @@ class Chip extends Component {
             textNode.innerHTML = value;
         }
 
-        me.vdom = vdom;
+        this.update();
     }
 
     /**

package/src/component/Circle.mjs

@@ -132,8 +132,7 @@ class Circle extends Component {
             cls : ['neo-circle', 'neo-circle-back']
         });
 
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         if (!me.backsideIconPath) {
             me.backsideIconPath = Neo.config.resourcesPath + 'images/circle/';
@@ -177,7 +176,7 @@ class Circle extends Component {
         me.updateOuterCircle(true);
         me.updateTitle(true);
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -205,8 +204,7 @@ class Circle extends Component {
     afterSetMaxItems(value, oldValue) {
         if (oldValue && this.rendered) {
             let me      = this,
-                frontEl = me.getFrontEl(),
-                vdom    = me.vdom;
+                frontEl = me.getFrontEl();
 
             if (value < oldValue) {
                 if (me.collapsed) {
@@ -216,12 +214,12 @@ class Circle extends Component {
 
                     setTimeout(() => {
                         frontEl.cn.splice(value + 2);
-                        me.vdom = vdom;
+                        me.update();
                     }, 300);
                 }
 
                 me.updateItemPositions(true);
-                me.vdom = vdom;
+                me.update();
             } else {
                 me.createItems(oldValue, true);
                 me.updateItemPositions(true);
@@ -229,7 +227,7 @@ class Circle extends Component {
                 me.promiseVdomUpdate().then(() => {
                     if (!me.collapsed) {
                         me.updateItemOpacity(1, true, oldValue);
-                        me.vdom = vdom;
+                        me.update();
                     }
                 });
             }
@@ -372,8 +370,7 @@ class Circle extends Component {
     collapseItem(data) {
         let me    = this,
             item  = me.getItemEl(data.path[0].id),
-            style = item.cn[0].style,
-            vdom  = me.vdom;
+            style = item.cn[0].style;
 
         delete style.marginLeft;
         delete style.marginTop;
@@ -382,7 +379,7 @@ class Circle extends Component {
         style.height = me.itemSize + 'px';
         style.width  = me.itemSize + 'px';
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -470,8 +467,7 @@ class Circle extends Component {
      */
     expandItem(data) {
         let me   = this,
-            item = me.getItemEl(data.path[0].id),
-            vdom = me.vdom;
+            item = me.getItemEl(data.path[0].id);
 
         item.cn[0].style = {
             height    : (me.itemSize + 20) + 'px',
@@ -481,17 +477,16 @@ class Circle extends Component {
             zIndex    : 40
         };
 
-        me.vdom = vdom;
+        me.update();
     }
 
     flipCircle() {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
-        NeoArray[me.isFlipped ? 'remove': 'add'](vdom.cn[0].cls, 'neo-flipped');
+        NeoArray[me.isFlipped ? 'remove': 'add'](me.vdom.cn[0].cls, 'neo-flipped');
 
         me.isFlipped = !me.isFlipped;
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -644,8 +639,7 @@ class Circle extends Component {
      */
     rotate() {
         let me             = this,
-            vdom           = me.vdom,
-            circleCenterEl = vdom.cn[0],
+            circleCenterEl = me.vdom.cn[0],
             transform = [
                 `rotateX(${me.rotateX}deg)`,
                 `rotateY(${me.rotateY}deg)`,
@@ -660,12 +654,12 @@ class Circle extends Component {
             me.promiseVdomUpdate().then(() => {
                 me.updateItemAngle(true);
                 circleCenterEl.style.transform = transform;
-                me.vdom = vdom;
+                me.update();
             });
         } else {
             me.updateItemAngle(true);
             circleCenterEl.style.transform = transform;
-            me.vdom = vdom;
+            me.update();
         }
     }
 

package/src/component/Clock.mjs

@@ -113,7 +113,7 @@ class Clock extends Component {
         vdom.cn[0].style.transform = `rotate(${minutesAngle}deg)`;
         vdom.cn[1].style.transform = `rotate(${hoursAngle}deg)`;
 
-        this.vdom = vdom;
+        this.update();
     }
 }
 

package/src/component/DateSelector.mjs

@@ -231,14 +231,13 @@ class DateSelector extends Component {
     afterSetLocale(value, oldValue) {
         if (oldValue !== undefined) {
             let me   = this,
-                dt   = new Intl.DateTimeFormat(me.locale, {month: 'short'}),
-                vdom = me.vdom;
+                dt   = new Intl.DateTimeFormat(me.locale, {month: 'short'});
 
             me.updateHeaderDays(me.dayNameFormat, '', true);
 
             me.getHeaderMonthEl().html = dt.format(me.currentDate);
 
-            me.vdom = vdom;
+            me.update();
         }
     }
 
@@ -423,7 +422,7 @@ class DateSelector extends Component {
                     me.promiseVdomUpdate().then(() => {
                         me.changeMonthTransitionCallback({data: data[0], slideDirection: slideDirection});
                         me.updateHeaderMonthTransitionCallback(headerMonthOpts);
-                        me.vdom = vdom;
+                        me.update();
 
                         setTimeout(() => {
                             me.changeMonthWrapperCallback(slideDirection);
@@ -453,7 +452,6 @@ class DateSelector extends Component {
 
         x = slideDirection === 'right' ? -data.width : 0;
         vdom.cn[1].cn[0].style.transform = `translateX(${x}px)`;
-        me._vdom = vdom; // silent update
     }
 
     /**
@@ -466,7 +464,6 @@ class DateSelector extends Component {
             vdom = me.vdom;
 
         vdom.cn[1] = vdom.cn[1].cn[0].cn[slideDirection === 'right' ? 1 : 0];
-        me._vdom = vdom; // silent update
     }
 
     /**
@@ -511,7 +508,7 @@ class DateSelector extends Component {
                     me.promiseVdomUpdate(vdom).then(() => {
                         y = scrollFromTop ? -data.height : 0;
                         vdom.cn[1].cn[0].style.transform = `translateY(${y}px)`;
-                        me.vdom = vdom;
+                        me.update();
 
                         setTimeout(() => {
                             vdom.cn[1] = vdom.cn[1].cn[0].cn[scrollFromTop ? 1 : 0];
@@ -926,7 +923,6 @@ class DateSelector extends Component {
 
         y = slideDirection === 'top' ? -data.height : 0;
         headerCenterEl.cn[0].cn[0].style.transform = `translateY(${y}px)`;
-        me._vdom = vdom; // silent update
     }
 
     /**
@@ -944,7 +940,6 @@ class DateSelector extends Component {
             slideDirection = yearIncrement > 0 ? 'bottom' : yearIncrement < 0 ? 'top' : increment < 0 ? 'top' : 'bottom';
 
         headerCenterEl.cn[0] = headerCenterEl.cn[0].cn[0].cn[slideDirection === 'top' ? 1 : 0];
-        me._vdom = vdom; // silent update
     }
 
     /**

package/src/component/Gallery.mjs

@@ -211,8 +211,7 @@ class Gallery extends Component {
         super.afterSetId(value, oldValue);
 
         let me     = this,
-            vdom   = me.vdom,
-            origin = vdom.cn[0],
+            origin = me.vdom.cn[0],
             camera = origin.cn[0],
             dolly  = camera.cn[0],
             view   = dolly.cn[0],
@@ -223,7 +222,7 @@ class Gallery extends Component {
         origin.id = prefix + 'origin';
         view  .id = prefix + 'view';
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -297,7 +296,6 @@ class Gallery extends Component {
             let me   = this,
                 i    = 0,
                 len  = Math.min(me.maxItems, me.store.items.length),
-                vdom = me.vdom,
                 view = me.getItemsRoot();
 
             if (me.rendered) {
@@ -308,7 +306,7 @@ class Gallery extends Component {
                         view.cn[i].style.transform = me.getItemTransform(i);
                     }
 
-                    me.vdom = vdom;
+                    me.update();
 
                     setTimeout(() => {
                         let sm = me.selectionModel;
@@ -453,12 +451,11 @@ class Gallery extends Component {
      */
     destroyItems(startIndex, amountItems) {
         let me           = this,
-            vdom         = me.vdom,
             countItems   = amountItems || me.store.getCount(),
             selectedItem = me.selectionModel.items[0];
 
         me.getItemsRoot().cn.splice(startIndex || 0, countItems);
-        me.vdom = vdom;
+        me.update();
 
         if (me.selectionModel.hasSelection() && selectedItem > startIndex && selectedItem < startIndex + countItems) {
             me.afterSetMounted(true, false);
@@ -546,12 +543,10 @@ class Gallery extends Component {
      *
      */
     moveOrigin() {
-        let me   = this,
-            vdom = me.vdom;
-
-        vdom.cn[0].style.transform = me.translate3d(me.translateX, me.translateY, me.translateZ);
+        let me = this;
 
-        me.vdom = vdom;
+        me.vdom.cn[0].style.transform = me.translate3d(me.translateX, me.translateY, me.translateZ);
+        me.update();
     }
 
     /**
@@ -595,7 +590,7 @@ class Gallery extends Component {
             itemHeight     = me.itemHeight,
             itemWidth      = me.itemWidth,
             vdom           = me.vdom,
-            camera         = vdom.cn[0].cn[0],
+            camera         = me.vdom.cn[0].cn[0],
             cameraStyle    = camera.style,
             dollyTransform = me.getCameraTransformForCell(index),
             height         = me.offsetHeight / (me.amountRows + 2),
@@ -651,17 +646,15 @@ class Gallery extends Component {
                 cameraStyle.transform          = `rotateY(${angle}deg)`;
                 cameraStyle.transitionDuration = '330ms';
 
-                me.vdom = vdom;
+                me.update();
 
                 timeoutId = setTimeout(() => {
                     NeoArray.remove(me.transitionTimeouts, timeoutId);
 
-                    vdom = me.vdom;
-
                     cameraStyle.transform          = 'rotateY(0deg)';
                     cameraStyle.transitionDuration = '5000ms';
 
-                    me.vdom = vdom;
+                    me.update();
                 }, 330);
 
                 me.transitionTimeouts.push(timeoutId);
@@ -678,7 +671,6 @@ class Gallery extends Component {
                 hasChange = false,
                 items     = [...me.store.items || []],
                 newCn     = [],
-                vdom      = me.vdom,
                 view      = me.getItemsRoot(),
                 vdomMap   = view.cn.map(e => e.id),
                 fromIndex, vdomId;
@@ -699,7 +691,7 @@ class Gallery extends Component {
 
                 if (hasChange) {
                     view.cn = newCn;
-                    me.vdom = vdom;
+                    me.update();
 
                     setTimeout(() => {
                         me.afterSetOrderByRow(me.orderByRow, !me.orderByRow);
@@ -725,7 +717,6 @@ class Gallery extends Component {
             amountRows       = me.amountRows,
             orderByRow       = me.orderByRow,
             secondLastColumn = amountRows - 1,
-            vdom             = me.vdom,
             view             = me.getItemsRoot(),
             amountColumns;
 
@@ -741,7 +732,7 @@ class Gallery extends Component {
             }
         });
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/src/component/Helix.mjs

@@ -637,11 +637,10 @@ class Helix extends Component {
      * @param {Number} [amountItems]
      */
     destroyItems(startIndex, amountItems) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         me.getItemsRoot().cn.splice(startIndex || 0, amountItems || me.store.getCount());
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/src/component/Label.mjs

@@ -39,9 +39,8 @@ class Label extends Component {
      * @protected
      */
     afterSetText(value, oldValue) {
-        let vdom = this.vdom;
-        vdom.html = value;
-        this.vdom = vdom;
+        this.vdom.html = value;
+        this.update();
     }
 }
 

package/src/component/Legend.mjs

@@ -51,9 +51,8 @@ class Legend extends Component {
      * @protected
      */
     afterSetIconCls(value, oldValue) {
-        let vdom = this.vdom;
-        vdom.cn[0].html = `<i class="neo-legend-icon ${value}"></i>`;
-        this.vdom = vdom;
+        this.vdom.cn[0].html = `<i class="neo-legend-icon ${value}"></i>`;
+        this.update();
     }
 
     /**
@@ -63,9 +62,8 @@ class Legend extends Component {
      * @protected
      */
     afterSetText(value, oldValue) {
-        let vdom = this.vdom;
-        vdom.cn[1].html = value;
-        this.vdom = vdom;
+        this.vdom.cn[1].html = value;
+        this.update();
     }
 
     /**
@@ -75,9 +73,8 @@ class Legend extends Component {
      * @protected
      */
     afterSetUseIcon(value, oldValue) {
-        let vdom = this.vdom;
-        vdom.cn[0].removeDom = !value;
-        this.vdom = vdom;
+        this.vdom.cn[0].removeDom = !value;
+        this.update();
     }
 }
 

package/src/container/Base.mjs

@@ -258,8 +258,7 @@ class Base extends Component {
         let me        = this,
             items     = me._items,
             itemsRoot = me.getVdomItemsRoot(),
-            layout    = me.layout,
-            vdom      = me.vdom;
+            layout    = me.layout;
 
         itemsRoot.cn = [];
 
@@ -273,7 +272,7 @@ class Base extends Component {
             itemsRoot.cn.push(item.vdom);
         });
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -381,9 +380,7 @@ class Base extends Component {
             me.getVdomItemsRoot().cn.splice(index, 0, item.vdom);
         }
 
-        if (silent) {
-            me._vdom = vdom;
-        } else {
+        if (!silent) {
             me.promiseVdomUpdate().then(() => {
                 me.fire('insert', {
                     index,
@@ -539,13 +536,12 @@ class Base extends Component {
     switchItems(item1id, item2id) {
         let me         = this,
             item1Index = Neo.isNumber(item1id) ? item1id : me.indexOf(item1id),
-            item2Index = Neo.isNumber(item2id) ? item2id : me.indexOf(item2id),
-            vdom       = me.vdom;
+            item2Index = Neo.isNumber(item2id) ? item2id : me.indexOf(item2id);
 
         NeoArray.move(me.items,                 item2Index, item1Index);
         NeoArray.move(me.getVdomItemsRoot().cn, item2Index, item1Index);
 
-        me.vdom = vdom;
+        me.update();
     }
 }
 

package/src/container/Panel.mjs

@@ -68,6 +68,10 @@ class Panel extends Container {
      * @returns {Object}
      */
     static createHeaderConfig(header) {
+        if (Neo.typeOf(header) === 'NeoInstance') {
+            return header;
+        }
+
         let config = {
             ntype: 'toolbar',
             cls  : ['neo-panel-header-toolbar', 'neo-toolbar'],

package/src/dialog/Base.mjs

@@ -1,5 +1,6 @@
 import Panel    from '../container/Panel.mjs';
 import NeoArray from '../util/Array.mjs';
+import Toolbar  from './header/Toolbar.mjs';
 import VDomUtil from '../util/VDom.mjs';
 
 let DragZone;
@@ -12,11 +13,11 @@ class Base extends Panel {
     static getStaticConfig() {return {
         /**
          * Valid values for closeAction
-         * @member {String[]} closeActions=['close', 'hide']
+         * @member {String[]} closeActions=['close','hide']
          * @protected
          * @static
          */
-        iconPositions: ['top', 'right', 'bottom', 'left']
+        closeActions: ['close', 'hide']
     }}
 
     static getConfig() {return {
@@ -80,6 +81,10 @@ class Base extends Panel {
          * @member {Object} dragZoneConfig=null
          */
         dragZoneConfig: null,
+        /**
+         * @member {Object} headerConfig=null
+         */
+        headerConfig: null,
         /**
          * @member {Neo.toolbar.Base|null} headerToolbar=null
          */
@@ -112,7 +117,7 @@ class Base extends Panel {
         /**
          * @member {String} title='Dialog Title'
          */
-        title_: 'Dialog Title',
+        title: 'Dialog Title',
         /**
          * @member {Object} _vdom
          */
@@ -215,11 +220,10 @@ class Base extends Panel {
      */
     afterSetMaximized(value, oldValue) {
         let me   = this,
-            vdom = me.vdom,
-            cls  = vdom.cls;
+            cls  = me.vdom.cls; // todo: using wrapperCls
 
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-maximized');
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -234,14 +238,10 @@ class Base extends Panel {
         let me = this;
 
         if (value && me.animateTargetId) {
-            Neo.currentWorker.promiseMessage('main', {
-                action : 'updateDom',
-                appName: me.appName,
-                deltas : [{
-                    action: 'removeNode',
-                    id    : me.getAnimateTargetId()
-                }]
-            });
+            Neo.applyDeltas(me.appName, {
+                action: 'removeNode',
+                id    : me.getAnimateTargetId()
+            })
         }
     }
 
@@ -270,18 +270,6 @@ class Base extends Panel {
         });
     }
 
-    /**
-     * Triggered after the title config got changed
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    afterSetTitle(value, oldValue) {
-        if (oldValue) {
-            this.down({flag: 'title-label'}).text = value;
-        }
-    }
-
     /**
      *
      */
@@ -405,26 +393,36 @@ class Base extends Panel {
 
         me.draggable && cls.push('neo-draggable');
 
-        headers.unshift({
-            cls  : cls,
-            dock : 'top',
-            id   : me.getHeaderToolbarId(),
-            items: [{
-                ntype: 'label',
-                flag : 'title-label',
-                text : me.title
-            }, '->', {
-                iconCls: 'far fa-window-maximize',
-                handler: me.maximize.bind(me)
-            }, {
-                iconCls: 'far fa-window-close',
-                handler: me.closeOrHide.bind(me)
-            }]
+        me.headerToolbar = Neo.create({
+            module   : Toolbar,
+            appName  : me.appName,
+            cls,
+            dock     : 'top',
+            id       : me.getHeaderToolbarId(),
+            listeners: {headerAction: me.executeHeaderAction, scope: me},
+            title    : me.title,
+            ...me.headerConfig
         });
 
+        headers.unshift(me.headerToolbar);
+
         me.headers = headers;
     }
 
+    /**
+     * {Object} data
+     */
+    executeHeaderAction(data) {
+        let me = this,
+
+        map = {
+            close   : me.closeOrHide,
+            maximize: me.maximize
+        };
+
+        map[data.action].call(me, data);
+    }
+
     /**
      * Returns the id of the animation node
      * @returns {String}
@@ -491,7 +489,7 @@ class Base extends Panel {
     }
 
     /**
-     * @param {Object} data
+     * @param {Object} [data]
      */
     maximize(data) {
         let me = this;