neo.mjs 6.12.1 → 6.14.0

package/src/form/field/Text.mjs

@@ -137,6 +137,10 @@ class Text extends Base {
          * @member {String} inputType_='text'
          */
         inputType_: 'text',
+        /**
+         * @member {String|null} inputValue_=null
+         */
+        inputValue_: null,
         /**
          * @member {String[]} labelBaseCls=['neo-textfield-label']
          */
@@ -281,8 +285,8 @@ class Text extends Base {
 
         me.addDomListeners([
             {input     : me.onInputValueChange, scope: me},
-            {mouseenter: me.onMouseEnter, scope: me},
-            {mouseleave: me.onMouseLeave, scope: me}
+            {mouseenter: me.onMouseEnter,       scope: me},
+            {mouseleave: me.onMouseLeave,       scope: me}
         ])
     }
 
@@ -296,7 +300,7 @@ class Text extends Base {
         super.afterSetAppName(value, oldValue);
 
         value && this.triggers?.forEach(item => {
-            item.appName = value;
+            item.appName = value
         })
     }
 
@@ -458,7 +462,7 @@ class Text extends Base {
         if (this.inputPatternDOM) {
             if (value) {
                 value = value.toString();
-                value = value.substring(1, value.length - 1);
+                value = value.substring(1, value.length - 1)
             }
 
             this.changeInputElKey('pattern', value)
@@ -475,6 +479,26 @@ class Text extends Base {
         this.changeInputElKey('type', value)
     }
 
+    /**
+     * Triggered after the inputValue config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetInputValue(value, oldValue) {
+        let me  = this,
+            cls = me.cls;
+
+        me.getInputEl().value = me.containsFocus ? value : me.inputValueRenderer(value);
+
+        me.useAlertState && NeoArray.toggle(cls, 'neo-empty-required', me.isEmpty() && me.required);
+
+        NeoArray.toggle(cls, 'neo-has-content', me.hasContent());
+        me.cls = cls;
+
+        me.updateValueFromInputValue(value)
+    }
+
     /**
      * Triggered after the labelCls config got changed
      * @param {String[]} value
@@ -524,7 +548,7 @@ class Text extends Base {
 
             vdom.cn[0].removeDom = me.hideLabel;
             vdom.cn[0].width     = me.labelWidth;
-            me.updateInputWidth();
+            me.updateInputWidth()
         } else if (value === 'inline') {
             centerBorderElCls = ['neo-center-border'];
             isEmpty           = me.isEmpty();
@@ -577,7 +601,7 @@ class Text extends Base {
         if (!me.hideLabel) {
             if (me.labelPosition === 'inline') {
                 if (!isEmpty) {
-                    delete me.getCenterBorderEl()?.width;
+                    delete me.getCenterBorderEl()?.width
                 }
 
                 me.promiseUpdate().then(() => {
@@ -817,9 +841,9 @@ class Text extends Base {
                     width: inputEl.width
                 };
 
-                delete inputEl.width;
+                delete inputEl.width
             } else {
-                inputEl.cn = [...preTriggers, me.getInputEl(), ...postTriggers];
+                inputEl.cn = [...preTriggers, me.getInputEl(), ...postTriggers]
             }
         } else {
             if (inputEl.tag !== 'input') {
@@ -837,29 +861,22 @@ class Text extends Base {
 
     /**
      * Triggered after the value config got changed
-     * todo: add validation logic
      * @param {String} value
      * @param {String} oldValue
      * @protected
      */
     afterSetValue(value, oldValue) {
-        let me            = this,
-            originalValue = me.originalConfig.value,
-            isDirty       = value !== originalValue && Neo.isEmpty(value) !== Neo.isEmpty(originalValue),
+        let me = this,
             cls;
 
         me.silentVdomUpdate = true;
 
-        me.getInputEl().value = me.containsFocus ? value : me.inputValueRenderer(value);
+        me.updateInputValueFromValue(value);
 
         me.validate(); // silent
 
         cls = me.cls;
-
-        me.useAlertState && NeoArray.toggle(cls, 'neo-empty-required', me.isEmpty() && me.required);
-
-        NeoArray[me.hasContent() ? 'add' : 'remove'](cls, 'neo-has-content');
-        NeoArray[isDirty ? 'add' : 'remove'](cls, 'neo-is-dirty');
+        NeoArray.toggle(cls, 'neo-is-dirty', me.isDirty);
         me.cls = cls;
 
         me.silentVdomUpdate = false;
@@ -880,6 +897,18 @@ class Text extends Base {
         this.updateInputWidth()
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        value && this.triggers?.forEach(item => {
+            item.windowId = value
+        })
+    }
+
     /**
      * Return a shallow copy of the triggers config
      * @param {Array|null} value
@@ -887,7 +916,7 @@ class Text extends Base {
      */
     beforeGetTriggers(value) {
         if (Array.isArray(value)) {
-            return [...value];
+            return [...value]
         }
 
         return value
@@ -939,10 +968,10 @@ class Text extends Base {
 
         if (me.showOptionalText && !me.required) {
             if (!hasOptionalText) {
-                value += labelOptionalText;
+                value += labelOptionalText
             }
         } else if (value && hasOptionalText) {
-            value = value.replace(labelOptionalText, '');
+            value = value.replace(labelOptionalText, '')
         }
 
         return value
@@ -971,7 +1000,7 @@ class Text extends Base {
         if (!value) {
             value = [];
         } else if (!Array.isArray(value)) {
-            value = [value];
+            value = [value]
         }
 
         let me = this;
@@ -982,15 +1011,15 @@ class Text extends Base {
                     appName: me.appName,
                     id     : me.getTriggerId(item.prototype.type),
                     field  : me
-                });
+                })
             } else if (!(item instanceof BaseTrigger)) {
                 if (!item.module && !item.ntype) {
-                    item.ntype = 'trigger';
+                    item.ntype = 'trigger'
                 }
 
                 if (item.module) {
                     item.className = item.module.prototype.className;
-                    item.id        = me.getTriggerId(item.module.prototype.type);
+                    item.id        = me.getTriggerId(item.module.prototype.type)
                 }
 
                 value[index] = Neo[item.className ? 'create' : 'ntype']({
@@ -1178,7 +1207,7 @@ class Text extends Base {
      * @returns {Boolean}
      */
     hasContent() {
-        let value = this.value;
+        let value = this.inputValue;
 
         return this.placeholderText?.length > 0 || value !== null && value.toString().length > 0
     }
@@ -1246,8 +1275,7 @@ class Text extends Base {
     }
 
     /**
-     * @param {Object} config
-     * @param {Boolean} [preventOriginalConfig] True prevents the instance from getting an originalConfig property
+     * @param args
      * @returns {Object} config
      */
     mergeConfig(...args) {
@@ -1306,7 +1334,7 @@ class Text extends Base {
             me.cls = cls;
 
             if (centerBorderEl && me.isEmpty()) {
-                delete centerBorderEl.width;
+                delete centerBorderEl.width
             }
         }
 
@@ -1320,28 +1348,30 @@ class Text extends Base {
     }
 
     /**
+     * Gets triggered by the 'input' DOM event.
      * @param {Object} data
      * @protected
      */
     onInputValueChange(data) {
-        let me       = this,
-            oldValue = me.value,
-            value    = data.value,
-            vnode    = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
+        let me         = this,
+            oldValue   = me.value,
+            inputValue = data.value,
+            vnode      = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
 
         if (vnode) {
-            // required for validation -> revert a wrong user input
-            vnode.vnode.attributes.value = value
+            // Update the current state (modified DOM by the user) to enable the delta-updates logic.
+            // Required e.g. for validation -> revert a wrong user input
+            vnode.vnode.attributes.value = inputValue
         }
 
-        if (Neo.isString(value)) {
-            value = value.trim()
+        if (Neo.isString(inputValue)) {
+            inputValue = inputValue.trim()
         }
 
-        me.clean = false;
-        me.value = me.inputValueAdjustor(value);
+        me.clean      = false;
+        me.inputValue = me.inputValueAdjustor(inputValue); // updates this.value
 
-        me.fireUserChangeEvent(value, oldValue)
+        me.fireUserChangeEvent(me.value, oldValue)
     }
 
     /**
@@ -1391,12 +1421,12 @@ class Text extends Base {
             if (trigger.type === type) {
                 NeoArray.remove(triggers, trigger);
                 len--;
-                hasMatch = true;
+                hasMatch = true
             }
         }
 
         if (hasMatch && !silent) {
-            me.triggers = triggers;
+            me.triggers = triggers
         }
 
         return hasMatch
@@ -1412,7 +1442,7 @@ class Text extends Base {
 
         if (me.clearToOriginalValue) {
             if (value) {
-                me.originalConfig.value = value;
+                me.originalConfig.value = value
             } else {
                 value = me.originalConfig.value
             }
@@ -1460,9 +1490,9 @@ class Text extends Base {
             errorNode    = errorWrapper.cn[0];
 
             if (value) {
-                errorNode.html = value;
+                errorNode.html = value
             } else {
-                delete errorNode.html;
+                delete errorNode.html
             }
 
             errorWrapper.removeDom = !value;
@@ -1471,6 +1501,15 @@ class Text extends Base {
         }
     }
 
+    /**
+     * Override this method as needed inside class extensions.
+     * @param {*} value
+     * @protected
+     */
+    updateInputValueFromValue(value) {
+        this.inputValue = value
+    }
+
     /**
      * Calculates the new inputWidth based on the labelWidth & total width
      * @protected
@@ -1494,7 +1533,7 @@ class Text extends Base {
     updateReadOnlyState() {
         let me = this;
 
-        me.changeInputElKey('readonly', !me.editable || me.readOnly || null);
+        me.changeInputElKey('readonly', !me.editable || me.readOnly || null)
     }
 
     /**
@@ -1518,6 +1557,15 @@ class Text extends Base {
         })
     }
 
+    /**
+     * Override this method as needed inside class extensions.
+     * @param {String} inputValue
+     * @protected
+     */
+    updateValueFromInputValue(inputValue) {
+        this.value = inputValue
+    }
+
     /**
      * Checks for client-side field errors
      * @param {Boolean} silent=true
@@ -1538,36 +1586,36 @@ class Text extends Base {
 
         if (!silent) {
             // in case we manually call validate(false) on a form or field before it is mounted, we do want to see errors.
-            me.clean = false;
+            me.clean = false
         }
 
         if (isEmpty) {
             if (required) {
                 me._error   = me.errorTextRequired;
-                returnValue = false;
+                returnValue = false
             }
         } else {
             if (Neo.isNumber(maxLength) && valueLength > maxLength) {
                 me._error   = me.errorTextMaxLength(errorParam);
-                returnValue = false;
+                returnValue = false
             } else if (Neo.isNumber(minLength) && valueLength < minLength) {
                 me._error   = me.errorTextMinLength(errorParam);
-                returnValue = false;
+                returnValue = false
             } else if (inputPattern && !inputPattern.test(value)) {
                 me._error   = me.errorTextInputPattern(errorParam);
-                returnValue = false;
+                returnValue = false
             } else if (Neo.isFunction(me.validator)) {
                 errorText = me.validator(me);
 
                 if (errorText !== true) {
                     me._error   = errorText;
-                    returnValue = false;
+                    returnValue = false
                 }
             }
         }
 
         if (returnValue) {
-            me._error = null;
+            me._error = null
         }
 
         !me.clean && me.updateError(me._error, silent);
@@ -1576,6 +1624,6 @@ class Text extends Base {
     }
 }
 
-Neo.applyClassConfig(Text);
+Neo.setupClass(Text);
 
 export default Text;

package/src/form/field/TextArea.mjs

@@ -216,6 +216,6 @@ class TextArea extends Text {
     }
 }
 
-Neo.applyClassConfig(TextArea);
+Neo.setupClass(TextArea);
 
 export default TextArea;

package/src/form/field/Time.mjs

@@ -419,6 +419,6 @@ class Time extends Picker {
     }
 }
 
-Neo.applyClassConfig(Time);
+Neo.setupClass(Time);
 
 export default Time;

package/src/form/field/Url.mjs

@@ -38,6 +38,6 @@ class Url extends Text {
     }
 }
 
-Neo.applyClassConfig(Url);
+Neo.setupClass(Url);
 
 export default Url;

package/src/form/field/ZipCode.mjs

@@ -112,6 +112,6 @@ class ZipCode extends Text {
     }
 }
 
-Neo.applyClassConfig(ZipCode);
+Neo.setupClass(ZipCode);
 
 export default ZipCode;

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

@@ -197,6 +197,6 @@ class Base extends Component {
     }
 }
 
-Neo.applyClassConfig(Base);
+Neo.setupClass(Base);
 
 export default Base;

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

@@ -141,6 +141,6 @@ class Clear extends Base {
     }
 }
 
-Neo.applyClassConfig(Clear);
+Neo.setupClass(Clear);
 
 export default Clear;

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

@@ -103,6 +103,6 @@ class CopyToClipboard extends Base {
     }
 }
 
-Neo.applyClassConfig(CopyToClipboard);
+Neo.setupClass(CopyToClipboard);
 
 export default CopyToClipboard;

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

@@ -24,6 +24,6 @@ class DateTrigger extends Picker {
     }
 }
 
-Neo.applyClassConfig(DateTrigger);
+Neo.setupClass(DateTrigger);
 
 export default DateTrigger;

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

@@ -37,6 +37,6 @@ class Picker extends Base {
     } 
 }
 
-Neo.applyClassConfig(Picker);
+Neo.setupClass(Picker);
 
 export default Picker;

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

@@ -23,6 +23,6 @@ class Search extends Picker {
     }
 }
 
-Neo.applyClassConfig(Search);
+Neo.setupClass(Search);
 
 export default Search;

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

@@ -41,6 +41,6 @@ class SpinDown extends Base {
     }
 }
 
-Neo.applyClassConfig(SpinDown);
+Neo.setupClass(SpinDown);
 
 export default SpinDown;

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

@@ -37,6 +37,6 @@ class SpinUp extends Base {
     }
 }
 
-Neo.applyClassConfig(SpinUp);
+Neo.setupClass(SpinUp);
 
 export default SpinUp;

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

@@ -69,6 +69,6 @@ class SpinUpDown extends Base {
     }
 }
 
-Neo.applyClassConfig(SpinUpDown);
+Neo.setupClass(SpinUpDown);
 
 export default SpinUpDown;

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

@@ -96,6 +96,6 @@ class Time extends Picker {
     }
 }
 
-Neo.applyClassConfig(Time);
+Neo.setupClass(Time);
 
 export default Time;

package/src/grid/Container.mjs

@@ -336,6 +336,6 @@ class Container extends BaseContainer {
     }
 }
 
-Neo.applyClassConfig(Container);
+Neo.setupClass(Container);
 
 export default Container;

package/src/grid/View.mjs

@@ -263,6 +263,6 @@ class View extends Component {
     }
 }
 
-Neo.applyClassConfig(View);
+Neo.setupClass(View);
 
 export default View;

package/src/grid/header/Button.mjs

@@ -168,6 +168,6 @@ class Button extends BaseButton {
     }
 }
 
-Neo.applyClassConfig(Button);
+Neo.setupClass(Button);
 
 export default Button;

package/src/grid/header/Toolbar.mjs

@@ -82,6 +82,6 @@ class Toolbar extends BaseToolbar {
     }
 }
 
-Neo.applyClassConfig(Toolbar);
+Neo.setupClass(Toolbar);
 
 export default Toolbar;

package/src/layout/Base.mjs

@@ -34,7 +34,18 @@ class Base extends CoreBase {
          * @member {Boolean} isLayout=true
          * @protected
          */
-        isLayout: true
+        isLayout: true,
+        /**
+         * @member {Number|null} windowId=null
+         */
+        windowId: null
+    }
+
+    /**
+     * @returns {Neo.container.Base|null}
+     */
+    get container() {
+        return Neo.getComponent(this.containerId)
     }
 
     /**
@@ -44,7 +55,7 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetAppName(value, oldValue) {
-        value && Neo.currentWorker.insertThemeFiles(value, this.__proto__);
+        value && Neo.currentWorker.insertThemeFiles(value, this.container.windowId, this.__proto__);
     }
 
     /**
@@ -66,9 +77,9 @@ class Base extends CoreBase {
     destroy() {
         let me = this;
 
-        me.bind && Neo.getComponent(me.containerId).getModel()?.removeBindings(me.id);
+        me.bind && me.container.getModel()?.removeBindings(me.id);
 
-        super.destroy();
+        super.destroy()
     }
 
     /**
@@ -77,7 +88,7 @@ class Base extends CoreBase {
      * @returns {Neo.model.Component|null}
      */
     getModel(ntype) {
-        return Neo.getComponent(this.containerId).getModel();
+        return this.container.getModel();
     }
 
     /**
@@ -90,7 +101,7 @@ class Base extends CoreBase {
 
         let me = this;
 
-        me.bind && Neo.getComponent(me.containerId).getModel()?.parseConfig(me);
+        me.bind && me.container.getModel()?.parseConfig(me);
     }
 
     /**
@@ -107,6 +118,6 @@ class Base extends CoreBase {
     removeRenderAttributes() {}
 }
 
-Neo.applyClassConfig(Base);
+Neo.setupClass(Base);
 
 export default Base;

package/src/layout/Card.mjs

@@ -230,6 +230,6 @@ class Card extends Base {
     }
 }
 
-Neo.applyClassConfig(Card);
+Neo.setupClass(Card);
 
 export default Card;

package/src/layout/Fit.mjs

@@ -66,6 +66,6 @@ class Fit extends Base {
     }
 }
 
-Neo.applyClassConfig(Fit);
+Neo.setupClass(Fit);
 
 export default Fit;

package/src/layout/Flexbox.mjs

@@ -308,6 +308,6 @@ class Flexbox extends Base {
     }
 }
 
-Neo.applyClassConfig(Flexbox);
+Neo.setupClass(Flexbox);
 
 export default Flexbox;

package/src/layout/Form.mjs

@@ -135,6 +135,6 @@ class Form extends Base {
     }
 }
 
-Neo.applyClassConfig(Form);
+Neo.setupClass(Form);
 
 export default Form;

package/src/layout/Grid.mjs

@@ -37,6 +37,6 @@ class Grid extends Base {
     }
 }
 
-Neo.applyClassConfig(Grid);
+Neo.setupClass(Grid);
 
 export default Grid;

package/src/layout/HBox.mjs

@@ -33,6 +33,6 @@ class HBox extends Flexbox {
     }
 }
 
-Neo.applyClassConfig(HBox);
+Neo.setupClass(HBox);
 
 export default HBox;

package/src/layout/VBox.mjs

@@ -33,6 +33,6 @@ class VBox extends Flexbox {
     }
 }
 
-Neo.applyClassConfig(VBox);
+Neo.setupClass(VBox);
 
 export default VBox;