neo.mjs 4.3.9 → 4.3.11

package/src/dialog/header/Toolbar.mjs

@@ -0,0 +1,105 @@
+import Base from '../../toolbar/Base.mjs';
+
+/**
+ * @class Neo.dialog.header.Toolbar
+ * @extends Neo.toolbar.Base
+ */
+class Toolbar extends Base {
+    /**
+     * @member {Object} actionMap
+     */
+    actionMap = {
+        close   : () => ({action: 'close',    iconCls: 'far fa-window-close'}),
+        maximize: () => ({action: 'maximize', iconCls: 'far fa-window-maximize'})
+    }
+    /**
+     * You can define the action order and directly add custom actions.
+     * @example
+     * {
+     *     actions: [
+     *         'close',
+     *         'maximize',
+     *         {action: 'help', iconCls: 'far fa-circle-question'}
+     *     ]
+     * }
+     *
+     * You can also extend the actionMap if needed.
+     * @member {Object[]|String[]|null} actions=['maximize','close']
+     */
+    actions = ['maximize', 'close']
+
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.dialog.header.Toolbar'
+         * @protected
+         */
+        className: 'Neo.dialog.header.Toolbar',
+        /**
+         * @member {String|null} title=null
+         */
+        title_: null
+    }}
+
+    /**
+     * Triggered after the title config got changed
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    afterSetTitle(value, oldValue) {
+        oldValue && this.down({flag: 'title-label'})?.set({
+            removeDom: !value,
+            text     : value
+        })
+    }
+
+    /**
+     *
+     */
+    createItems() {
+        let me      = this,
+            handler = me.fireAction.bind(me),
+            items   = me.items || [];
+
+        items.push({
+            ntype    : 'label',
+            cls      : ['neo-panel-header-text', 'neo-label'],
+            flag     : 'title-label',
+            removeDom: !me.title,
+            text     : me.title
+        });
+
+        if (me.actions) {
+            items.push('->');
+
+            me.actions.forEach(action => {
+                if (Neo.typeOf(action) !== 'Object') {
+                    action = me.actionMap[action]()
+                }
+
+                items.push({handler, ...action})
+            })
+        }
+
+        me.items = items;
+
+        super.createItems();
+    }
+
+    /**
+     * @param {Object} data
+     */
+    fireAction(data) {
+        let component = data.component;
+
+        this.fire('headerAction', {
+            action: component.action,
+            component,
+            scope : this
+        })
+    }
+}
+
+Neo.applyClassConfig(Toolbar);
+
+export default Toolbar;

package/src/draggable/list/DragZone.mjs

@@ -60,7 +60,6 @@ class DragZone extends BaseDragZone {
         let me    = this,
             owner = me.owner,
             store = owner.store,
-            vdom  = owner.vdom,
             node;
 
         store.items.forEach((record, index) => {
@@ -72,7 +71,7 @@ class DragZone extends BaseDragZone {
             }
         });
 
-        owner.vdom = vdom;
+        owner.update();
     }
 
     /**

package/src/draggable/tree/DragZone.mjs

@@ -42,7 +42,6 @@ class DragZone extends BaseDragZone {
         if (oldValue !== undefined) { // we only need to react to dynamic changes
             let owner = this.owner,
                 store = owner.store,
-                vdom  = owner.vdom,
                 node;
 
             store.items.forEach(record => {
@@ -53,7 +52,7 @@ class DragZone extends BaseDragZone {
                 }
             });
 
-            owner.vdom = vdom;
+            owner.update();
         }
     }
 

package/src/form/Fieldset.mjs

@@ -80,8 +80,7 @@ class Fieldset extends Container {
      * @protected
      */
     afterSetCollapsed(value, oldValue) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         NeoArray[value ? 'add' : 'remove'](me._cls, 'neo-collapsed');
 
@@ -116,7 +115,7 @@ class Fieldset extends Container {
             }
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -206,8 +205,7 @@ class Fieldset extends Container {
     updateLegend() {
         let me      = this,
             iconCls = me.collapsed ? me.iconClsUnchecked : me.iconClsChecked,
-            title   = me.title,
-            vdom    = me.vdom;
+            title   = me.title;
 
         if (iconCls === '' && title === '') {
             if (me.legend) {
@@ -231,7 +229,7 @@ class Fieldset extends Container {
             }
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 }
 

package/src/form/field/CheckBox.mjs

@@ -88,11 +88,10 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetChecked(value, oldValue) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
-        vdom.cn[1].checked = value;
-        me.vdom = vdom;
+        me.vdom.cn[1].checked = value;
+        me.update();
 
         if (oldValue !== undefined) {
             me.fire('change', {
@@ -111,8 +110,7 @@ class CheckBox extends Base {
      */
     afterSetEnableLabelClicks(value, oldValue) {
         let me    = this,
-            vdom  = me.vdom,
-            label = vdom.cn[2];
+            label = me.vdom.cn[2];
 
         if (value) {
             label.for = me.getInputElId();
@@ -120,7 +118,7 @@ class CheckBox extends Base {
             delete label.for;
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -130,10 +128,8 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetHideLabel(value, oldValue) {
-        let vdom = this.vdom;
-
-        vdom.cn[0].removeDom = value;
-        this.vdom = vdom;
+        this.vdom.cn[0].removeDom = value;
+        this.update();
     }
 
     /**
@@ -143,10 +139,8 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetHideValueLabel(value, oldValue) {
-        let vdom = this.vdom;
-
-        vdom.cn[2].removeDom = value;
-        this.vdom = vdom;
+        this.vdom.cn[2].removeDom = value;
+        this.update();
     }
 
     /**
@@ -174,10 +168,8 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetInputType(value, oldValue) {
-        let vdom = this.vdom;
-
-        vdom.cn[1].type = value;
-        this.vdom = vdom;
+        this.vdom.cn[1].type = value;
+        this.update();
     }
 
     /**
@@ -187,10 +179,8 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetLabelText(value, oldValue) {
-        let vdom = this.vdom;
-
-        vdom.cn[0].innerHTML = value;
-        this.vdom = vdom;
+        this.vdom.cn[0].innerHTML = value;
+        this.update();
     }
 
     /**
@@ -200,12 +190,11 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetLabelWidth(value, oldValue) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         if (!me.hideLabel) {
-            vdom.cn[0].width = value;
-            me.vdom = vdom;
+            me.vdom.cn[0].width = value;
+            me.update();
         }
     }
 
@@ -216,10 +205,8 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetName(value, oldValue) {
-        let vdom = this.vdom;
-
-        vdom.cn[1].name = value;
-        this.vdom = vdom;
+        this.vdom.cn[1].name = value;
+        this.update();
     }
 
     /**
@@ -230,10 +217,8 @@ class CheckBox extends Base {
      */
     afterSetValue(value, oldValue) {
         if (value) {
-            let vdom = this.vdom;
-
-            vdom.cn[1].value = value;
-            this.vdom = vdom;
+            this.vdom.cn[1].value = value;
+            this.update();
         }
 
         super.afterSetValue(value, oldValue);
@@ -246,12 +231,11 @@ class CheckBox extends Base {
      * @protected
      */
     afterSetValueLabelText(value, oldValue) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         if (!me.hideValueLabel) {
-            vdom.cn[2].innerHTML = value;
-            me.vdom = vdom;
+            me.vdom.cn[2].innerHTML = value;
+            me.update();
         }
     }
 

package/src/form/field/Color.mjs

@@ -51,8 +51,7 @@ class Color extends Select {
         super.construct(config);
 
         let me           = this,
-            vdom         = me.vdom,
-            inputWrapper = VDomUtil.findVdomChild(vdom, {id: me.getInputWrapperId()});
+            inputWrapper = VDomUtil.findVdomChild(me.vdom, {id: me.getInputWrapperId()});
 
         inputWrapper.vdom.cn.unshift({
             cls  : 'neo-color',
@@ -62,7 +61,7 @@ class Color extends Select {
             }
         });
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/src/form/field/Display.mjs

@@ -35,13 +35,12 @@ class Display extends Text {
         super.construct(config);
 
         let me      = this,
-            vdom    = me.vdom,
             inputEl = me.getInputEl();
 
         inputEl.readonly = 'readonly';
         inputEl.tabindex = '-1';
 
-        me.vdom = vdom;
+        me.update();
     }
 }
 

package/src/form/field/Number.mjs

@@ -79,7 +79,6 @@ class Number extends Text {
      */
     afterSetInputEditable(value, oldValue) {
         let me      = this,
-            vdom    = me.vdom,
             inputEl = me.getInputEl(),
             style   = inputEl.style || {};
 
@@ -89,7 +88,7 @@ class Number extends Text {
             style.pointerEvents = 'none';
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/src/form/field/Picker.mjs

@@ -183,7 +183,6 @@ class Picker extends Text {
         me.pickerIsMounted = false;
 
         if (silent) {
-            me._vdom = vdom;
             picker.mounted = false;
         } else {
             me.promiseVdomUpdate().then(data => {

package/src/form/field/Text.mjs

@@ -244,11 +244,9 @@ class Text extends Base {
      */
     afterSetHideLabel(value, oldValue) {
         let me   = this,
-            vdom = me.vdom;
-
-        vdom.cn[0].removeDom = value;
-        me._vdom = vdom; // silent update
+            node = me.labelPosition === 'inline' ? me.getCenterBorderEl() : me.vdom.cn[0];
 
+        node.removeDom = value;
         me.updateInputWidth();
     }
 
@@ -312,18 +310,15 @@ class Text extends Base {
 
             vdom.cn[0] = me.getLabelEl(); // remove the wrapper
 
-            vdom.cn[0].width = me.labelWidth;
-
-            me._vdom = vdom; // silent update
+            vdom.cn[0].removeDom = me.hideLabel;
+            vdom.cn[0].width     = me.labelWidth;
             me.updateInputWidth();
         } else if (value === 'inline') {
             centerBorderElCls = ['neo-center-border'];
             isEmpty           = me.isEmpty();
             vdom              = me.vdom;
 
-            if (!isEmpty) {
-                centerBorderElCls.push('neo-float-above');
-            }
+            !isEmpty && centerBorderElCls.push('neo-float-above');
 
             delete vdom.cn[0].width;
 
@@ -332,21 +327,19 @@ class Text extends Base {
                 cn : [{
                     cls: ['neo-left-border']
                 }, {
-                    cls: centerBorderElCls,
-                    cn : [vdom.cn[0]]
+                    cls      : centerBorderElCls,
+                    cn       : [vdom.cn[0]],
+                    removeDom: me.hideLabel
                 }, {
                     cls: ['neo-right-border']
                 }]
             };
 
-            me._vdom = vdom; // silent update
             me.updateInputWidth();
 
-            if (!isEmpty) {
-                setTimeout(() => {
-                    me.updateCenterBorderElWidth(false);
-                }, 20);
-            }
+            !isEmpty && setTimeout(() => {
+                me.updateCenterBorderElWidth(false);
+            }, 20);
         } else {
             // changes from e.g. left to top
             me.updateInputWidth();
@@ -361,24 +354,21 @@ class Text extends Base {
      */
     afterSetLabelText(value, oldValue) {
         let me      = this,
-            isEmpty = me.isEmpty(),
-            vdom    = me.vdom;
+            isEmpty = me.isEmpty();
 
         me.getLabelEl().innerHTML = value;
 
-        if (me.hideLabel) {
-            me._vdom = vdom; // silent update
-        } else {
+        if (!me.hideLabel) {
             if (me.labelPosition === 'inline') {
                 if (!isEmpty) {
                     delete me.getCenterBorderEl().width;
                 }
 
-                me.promiseVdomUpdate(vdom).then(() => {
+                me.promiseVdomUpdate().then(() => {
                     me.updateCenterBorderElWidth(isEmpty);
                 });
             } else {
-                me.vdom = vdom;
+                me.update();
             }
         }
     }
@@ -396,9 +386,6 @@ class Text extends Base {
                 label = vdom.cn[0];
 
             label.width = value;
-
-            me._vdom = vdom; // silent update
-
             !me.hideLabel && me.updateInputWidth();
         }
     }
@@ -560,9 +547,10 @@ class Text extends Base {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        let me   = this,
-            cls  = me.cls,
-            vdom = me.vdom;
+        let me  = this,
+            cls = me.cls;
+
+        me.silentVdomUpdate = true;
 
         me.getInputEl().value = value;
 
@@ -571,10 +559,13 @@ class Text extends Base {
         }
 
         NeoArray[me.originalConfig.value !== value ? 'add' : 'remove'](cls, 'neo-is-dirty');
+        me.cls = cls;
+
         me.validate(); // silent
 
-        me.cls  = cls;
-        me.vdom = vdom;
+        me.silentVdomUpdate = false;
+
+        me.update();
 
         super.afterSetValue(value, oldValue); // fires the change event
     }
@@ -676,8 +667,7 @@ class Text extends Base {
      * @param {Array|Number|Object|String|null} value
      */
     changeInputElKey(key, value) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         if (value || Neo.isBoolean(value) || value === 0) {
             me.getInputEl()[key] = value;
@@ -685,7 +675,7 @@ class Text extends Base {
             delete me.getInputEl()[key];
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -873,17 +863,15 @@ class Text extends Base {
      */
     onFocusEnter(data) {
         let me  = this,
-            cls = me.cls,
-            vdom;
+            cls = me.cls;
 
         NeoArray.add(cls, 'neo-focus');
         me.cls = cls;
 
         if (me.labelPosition === 'inline') {
             if (me.centerBorderElWidth) {
-                vdom = me.vdom;
                 me.getCenterBorderEl().width = me.centerBorderElWidth;
-                me.vdom = vdom;
+                me.update();
             } else {
                 me.updateCenterBorderElWidth(false);
             }
@@ -898,8 +886,7 @@ class Text extends Base {
     onFocusLeave(data) {
         let me             = this,
             centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
-            cls            = me.cls,
-            vdom           = me.vdom;
+            cls            = me.cls;
 
         me.validate(); // silent
 
@@ -910,7 +897,7 @@ class Text extends Base {
             delete centerBorderEl.width;
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -1002,10 +989,8 @@ class Text extends Base {
             me.centerBorderElWidth = Math.round(data.width * .7) + 8;
 
             if (!silent) {
-                let vdom = me.vdom;
-
                 me.getCenterBorderEl().width = me.centerBorderElWidth;
-                me.vdom = vdom;
+                me.update();
             }
         });
     }
@@ -1015,8 +1000,8 @@ class Text extends Base {
      @param {Boolean} silent=false
      */
     updateError(value, silent=false) {
-        let me   = this,
-            vdom = me.vdom,
+        let me  = this,
+            cls = me.cls,
             errorNode, isValid;
 
         if (!(me.validBeforeMount && !me.mounted)) {
@@ -1024,7 +1009,8 @@ class Text extends Base {
 
             isValid = !value || value === '';
 
-            NeoArray[!isValid ? 'add' : 'remove'](me._cls, 'neo-invalid');
+            NeoArray[!isValid ? 'add' : 'remove'](cls, 'neo-invalid');
+            me.cls = cls; // todo: silent update
 
             errorNode = VDomUtil.findVdomChild(this.vdom, {cls: 'neo-textfield-error'}).vdom;
 
@@ -1036,9 +1022,7 @@ class Text extends Base {
 
             errorNode.removeDom = isValid;
 
-            if (!silent) {
-                me.vdom = vdom;
-            }
+            !silent && me.update();
         }
     }
 
@@ -1048,16 +1032,15 @@ class Text extends Base {
      */
     updateInputWidth() {
         let me         = this,
-            inputWidth = me.getInputWidth(),
-            vdom       = me.vdom;
+            inputWidth = me.getInputWidth();
 
         if (inputWidth !== null && inputWidth !== me.width) {
-            vdom.cn[1].width = inputWidth;
+            me.vdom.cn[1].width = inputWidth;
         } else {
-            delete vdom.cn[1].width;
+            delete me.vdom.cn[1].width;
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/src/form/field/TextArea.mjs

@@ -97,11 +97,10 @@ class TextArea extends Text {
      */
     afterSetResizable(value, oldValue) {
         let me    = this,
-            style = this.getInputEl().style,
-            vdom  = me.vdom;
+            style = this.getInputEl().style;
 
         style.resize = value ? null : 'none';
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/src/form/field/trigger/Base.mjs

@@ -119,11 +119,10 @@ class Base extends Component {
      * @protected
      */
     afterSetHidden(value, oldValue) {
-        let vdom  = this.vdom,
-            style = vdom.style || {};
+        let style = this.style;
 
         style.display = value ? 'none' : 'inline-block';
-        this.vdom = vdom;
+        this.style = style;
     }
 
     /**

package/src/form/field/trigger/SpinUpDown.mjs

@@ -41,15 +41,14 @@ class SpinUpDown extends Base {
      *
      */
     onConstructed() {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
-        vdom.cn = [
+        me.vdom.cn = [
             {cls: ['neo-spin-button', 'neo-up',   me.spinButtonUpIconCls]},
             {cls: ['neo-spin-button', 'neo-down', me.spinButtonDownIconCls]}
         ];
 
-        me.vdom = vdom;
+        me.update();
 
         super.onConstructed();
     }