neo.mjs 4.0.79 → 4.0.82

package/examples/form/field/text/MainContainer.mjs

@@ -42,6 +42,13 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'disabled',
             listeners: {change: me.onConfigChange.bind(me, 'disabled')},
             style    : {marginTop: '10px'}
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'error',
+            listeners: {change: me.onConfigChange.bind(me, 'error')},
+            reference: 'error-field',
+            value    : me.exampleComponent.error
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.hideLabel,
@@ -157,7 +164,14 @@ class MainContainer extends ConfigurationViewport {
             labelWidth   : 70,
             minLength    : 3,
             value        : 'Hello World',
-            width        : 200
+            width        : 200,
+
+            listeners: {
+                change(value) {
+                    this.down({reference: 'error-field'}).clear();
+                },
+                scope: this
+            }
         });
     }
 }

package/package.json

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

package/resources/scss/src/form/field/Text.scss

@@ -56,6 +56,7 @@
     &.label-inline {
         display  : block;
         font-size: 14px;
+        height   : inherit;
         position : relative;
 
         &.neo-focus {
@@ -108,7 +109,7 @@
 
         .neo-label-wrapper {
             display : flex;
-            height  : 100%;
+            height  : 27px;
             position: absolute;
             width   : 100%;
 

package/src/form/Container.mjs

@@ -156,11 +156,11 @@ class Container extends BaseContainer {
      * Updates the invalid state for all fields, which have updateValidationIndicators() implemented.
      * This can be useful for create entity forms which show up "clean", when pressing a submit button.
      */
-    updateValidationIndicators() {
+    validate() {
         let fields = this.getFields();
 
         fields.forEach(item => {
-            item.updateValidationIndicators?.(false);
+            item.validate?.(false);
         });
     }
 }

package/src/form/field/Base.mjs

@@ -68,6 +68,15 @@ class Base extends Component {
     reset(value) {
         this.value = value;
     }
+
+    /**
+     * Checks for client-side field errors
+     * @param {Boolean} silent=true
+     * @returns {Boolean} Returns true in case there are no client-side errors
+     */
+    validate(silent=true) {
+        return true;
+    }
 }
 
 /**

package/src/form/field/Number.mjs

@@ -99,7 +99,7 @@ class Number extends Text {
      * @protected
      */
     afterSetMaxValue(value, oldValue) {
-        this.updateValidationIndicators();
+        this.validate(); // silent
         this.changeInputElKey('max', value);
     }
 
@@ -110,7 +110,7 @@ class Number extends Text {
      * @protected
      */
     afterSetMinValue(value, oldValue) {
-        this.updateValidationIndicators();
+        this.validate(); // silent
         this.changeInputElKey('min', value);
     }
 

package/src/form/field/Text.mjs

@@ -236,7 +236,7 @@ class Text extends Base {
      * @protected
      */
     afterSetError(value, oldValue) {
-        this.updateValidationIndicators(false);
+        this.updateError(value);
     }
 
     /**
@@ -410,7 +410,7 @@ class Text extends Base {
      * @protected
      */
     afterSetMaxLength(value, oldValue) {
-        this.updateValidationIndicators();
+        this.validate(); // silent
         this.changeInputElKey('maxlength', value);
     }
 
@@ -421,7 +421,7 @@ class Text extends Base {
      * @protected
      */
     afterSetMinLength(value, oldValue) {
-        this.updateValidationIndicators();
+        this.validate(); // silent
         this.changeInputElKey('minlength', value);
     }
 
@@ -474,7 +474,7 @@ class Text extends Base {
      * @protected
      */
     afterSetRequired(value, oldValue) {
-        this.updateValidationIndicators();
+        this.validate(); // silent
         this.changeInputElKey('required', value ? value : null);
     }
 
@@ -570,7 +570,7 @@ class Text extends Base {
         }
 
         NeoArray[me.originalConfig.value !== value ? 'add' : 'remove'](me._cls, 'neo-is-dirty');
-        me.updateValidationIndicators();
+        me.validate(); // silent
 
         me.vdom = vdom;
 
@@ -845,28 +845,7 @@ class Text extends Base {
      * @returns {Boolean}
      */
     isValid() {
-        let me          = this,
-            maxLength   = me.maxLength,
-            minLength   = me.minLength,
-            value       = me.value,
-            valueLength = value?.toString().length;
-
-        if (me.required && (!value || valueLength < 1)) {
-            me._error = 'Required';
-            return false;
-        }
-
-        if (Neo.isNumber(maxLength) && valueLength > maxLength) {
-            me._error = `Max length violation: ${valueLength} / ${maxLength}`;
-            return false;
-        }
-
-        if (Neo.isNumber(minLength) && valueLength < minLength) {
-            me._error = `Min length violation: ${valueLength} / ${minLength}`;
-            return false;
-        }
-
-        return super.isValid();
+        return this.error?.length > 0 ? false : super.isValid();
     }
 
     /**
@@ -919,7 +898,7 @@ class Text extends Base {
             centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
             vdom           = me.vdom;
 
-        me.updateValidationIndicators();
+        me.validate(); // silent
 
         NeoArray.remove(me._cls, 'neo-focus');
 
@@ -1017,6 +996,36 @@ class Text extends Base {
         });
     }
 
+    /**
+     @param {String|null} value
+     @param {Boolean} silent=false
+     */
+    updateError(value, silent=false) {
+        let me   = this,
+            vdom = me.vdom,
+            errorNode, isValid;
+
+        if (!(me.validBeforeMount && !me.mounted)) {
+            isValid = !value || value === '';
+
+            NeoArray[!isValid ? 'add' : 'remove'](me._cls, 'neo-invalid');
+
+            errorNode = VDomUtil.findVdomChild(this.vdom, {cls: 'neo-textfield-error'}).vdom;
+
+            if (!isValid) {
+                errorNode.html = me.error;
+            } else {
+                delete errorNode.html;
+            }
+
+            errorNode.removeDom = isValid;
+
+            if (!silent) {
+                me.vdom = vdom;
+            }
+        }
+    }
+
     /**
      * Calculates the new inputWidth based on the labelWidth & total width
      * @protected
@@ -1057,27 +1066,43 @@ class Text extends Base {
     }
 
     /**
+     * Checks for client-side field errors
      * @param {Boolean} silent=true
+     * @returns {Boolean} Returns true in case there are no client-side errors
      */
-    updateValidationIndicators(silent=true) {
-        let me   = this,
-            vdom = me.vdom,
-            errorNode, isValid;
-
-        if (!(me.validBeforeMount && !me.mounted)) {
-            isValid = me.isValid();
-
-            NeoArray[!isValid ? 'add' : 'remove'](me._cls, 'neo-invalid');
+    validate(silent=true) {
+        let me          = this,
+            errorField  = silent ? '_error' : 'error',
+            maxLength   = me.maxLength,
+            minLength   = me.minLength,
+            required    = me.required,
+            returnValue = true,
+            value       = me.value,
+            valueLength = value?.toString().length,
+            isEmpty     = !value || valueLength < 1;
+
+        if (required && isEmpty) {
+            me[errorField] = 'Required';
+            returnValue = false;
+        } else if (Neo.isNumber(maxLength) && valueLength > maxLength) {
+            if (required || !isEmpty) {
+                me[errorField] = `Max length violation: ${valueLength} / ${maxLength}`;
+                returnValue = false;
+            }
+        } else if (Neo.isNumber(minLength) && valueLength < minLength) {
+            if (required || !isEmpty) {
+                me[errorField] = `Min length violation: ${valueLength} / ${minLength}`;
+                returnValue = false;
+            }
+        }
 
-            errorNode = VDomUtil.findVdomChild(this.vdom, {cls: 'neo-textfield-error'}).vdom;
+        if (returnValue) {
+            me[errorField] = null;
+        }
 
-            errorNode.html      = me.error;
-            errorNode.removeDom = isValid;
+        silent && me.updateError(me[errorField], true);
 
-            if (!silent) {
-                me.vdom = vdom;
-            }
-        }
+        return !returnValue ? false : super.validate(silent);
     }
 }