neo.mjs 4.0.52 → 4.0.55

package/buildScripts/createClass.mjs

@@ -83,7 +83,7 @@ if (programOpts.info) {
         }
 
         if (programOpts.className.indexOf('.') !== -1) {
-            console.error(chalk.red('No .dot-notation avcailable when -d option is selected.'));
+            console.error(chalk.red('No .dot-notation available when -d option is selected.'));
             console.info(chalk.bgCyan('Usage: createClass -d -c <className> -b <baseClass> [-s sourceParent]'));
             process.exit(1);
         }

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

@@ -36,6 +36,12 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'clearToOriginalValue',
             listeners: {change: me.onConfigChange.bind(me, 'clearToOriginalValue')},
             style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.disabled,
+            labelText: 'disabled',
+            listeners: {change: me.onConfigChange.bind(me, 'disabled')},
+            style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.hideLabel,
@@ -145,11 +151,13 @@ class MainContainer extends ConfigurationViewport {
 
     createExampleComponent() {
         return Neo.create(TextField, {
-            clearable : true,
-            labelText : 'Label',
-            labelWidth: 70,
-            value     : 'Hello World',
-            width     : 200
+            clearable    : true,
+            labelPosition: 'inline',
+            labelText    : 'Label',
+            labelWidth   : 70,
+            minLength    : 3,
+            value        : 'Hello World',
+            width        : 200
         });
     }
 }

package/package.json

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

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

@@ -8,7 +8,39 @@
 
     &.neo-focus {
         .neo-input-wrapper {
-            border-color: v(textfield-border-color-active);
+            border-color: v(textfield-border-color-active) !important;
+        }
+    }
+
+    &.neo-invalid:not(.neo-disabled) {
+        .neo-input-wrapper {
+            border-color: v(textfield-border-color-invalid);
+        }
+
+        .neo-label-wrapper {
+            .neo-center-border, .neo-left-border, .neo-right-border {
+                border-bottom-color: v(textfield-border-color-invalid);
+            }
+
+            .neo-left-border, .neo-right-border {
+                border-top-color: v(textfield-border-color-invalid);
+            }
+
+            .neo-left-border {
+                border-left-color: v(textfield-border-color-invalid);
+            }
+
+            .neo-right-border {
+                border-right-color: v(textfield-border-color-invalid);
+            }
+        }
+    }
+
+    &.neo-invalid:not(.neo-disabled, .neo-has-content) {
+        .neo-label-wrapper {
+            .neo-center-border {
+                border-top-color: v(textfield-border-color-invalid);
+            }
         }
     }
 
@@ -36,7 +68,7 @@
                 }
 
                 .neo-center-border {
-                    border-top-color: transparent;
+                    border-top-color: transparent !important;
                 }
 
                 .neo-left-border {
@@ -70,7 +102,7 @@
         }
 
         .neo-input-wrapper {
-            border-color: transparent;
+            border-color: transparent !important;
         }
 
         .neo-label-wrapper {
@@ -156,10 +188,6 @@
             margin       : 0; // important for Safari => #1125
             min-height   : 25px;
             width        : 30px;
-
-            &:invalid {
-                border: 1px solid brown;
-            }
         }
     }
 
@@ -179,14 +207,18 @@
             outline     : none;
         }
 
-        &:invalid {
-            border-color: brown;
-        }
-
         &::-webkit-input-placeholder {
             color  : v(textfield-input-placeholder-color) !important;
             opacity: v(textfield-input-placeholder-opacity) !important;
         }
+
+        &.neo-invalid {
+            border-color: v(textfield-border-color-invalid);
+
+            &.neo-disabled {
+                border-color: inherit;
+            }
+        }
     }
 
     .neo-textfield-label {

package/resources/scss/theme-dark/form/field/Text.scss

@@ -1,6 +1,7 @@
 $neoMap: map-merge($neoMap, (
     'textfield-border-color'             : #424242,
     'textfield-border-color-active'      : #5d83a7,
+    'textfield-border-color-invalid'     : brown,
     'textfield-border-radius'            : 0,
     'textfield-input-background-color'   : #2b2b2b,
     'textfield-input-color'              : #ccc,
@@ -13,6 +14,7 @@ $neoMap: map-merge($neoMap, (
     :root .neo-theme-dark { // .neo-textfield
         --textfield-border-color             : #{neo(textfield-border-color)};
         --textfield-border-color-active      : #{neo(textfield-border-color-active)};
+        --textfield-border-color-invalid     : #{neo(textfield-border-color-invalid)};
         --textfield-border-radius            : #{neo(textfield-border-radius)};
         --textfield-input-background-color   : #{neo(textfield-input-background-color)};
         --textfield-input-color              : #{neo(textfield-input-color)};
@@ -20,4 +22,4 @@ $neoMap: map-merge($neoMap, (
         --textfield-input-placeholder-opacity: #{neo(textfield-input-placeholder-opacity)};
         --textfield-label-color              : #{neo(textfield-label-color)};
     }
-}
+}

package/resources/scss/theme-light/form/field/Text.scss

@@ -1,6 +1,7 @@
 $neoMap: map-merge($neoMap, (
     'textfield-border-color'             : #ddd,
     'textfield-border-color-active'      : #1c60a0,
+    'textfield-border-color-invalid'     : brown,
     'textfield-border-radius'            : 3px,
     'textfield-input-background-color'   : #fff,
     'textfield-input-color'              : #000,
@@ -13,6 +14,7 @@ $neoMap: map-merge($neoMap, (
     :root .neo-theme-light { // .neo-textfield
         --textfield-border-color             : #{neo(textfield-border-color)};
         --textfield-border-color-active      : #{neo(textfield-border-color-active)};
+        --textfield-border-color-invalid     : #{neo(textfield-border-color-invalid)};
         --textfield-border-radius            : #{neo(textfield-border-radius)};
         --textfield-input-background-color   : #{neo(textfield-input-background-color)};
         --textfield-input-color              : #{neo(textfield-input-color)};
@@ -20,4 +22,4 @@ $neoMap: map-merge($neoMap, (
         --textfield-input-placeholder-opacity: #{neo(textfield-input-placeholder-opacity)};
         --textfield-label-color              : #{neo(textfield-label-color)};
     }
-}
+}

package/src/data/RecordFactory.mjs

@@ -231,6 +231,7 @@ class RecordFactory extends Base {
         let mapping   = field.mapping,
             maxLength = field.maxLength,
             minLength = field.minLength,
+            nullable  = field.nullable,
             oldValue  = recordConfig?.[field.name] || record[field.name],
             type      = field.type?.toLowerCase();
 
@@ -244,16 +245,23 @@ class RecordFactory extends Base {
             value = ns[key];
         }
 
-        if (Object.hasOwn(field, maxLength)) {
+        if (Object.hasOwn(field, 'maxLength')) {
             if (value?.toString() > maxLength) {
-                console.warn(`Setting record field: ${field} value: ${value} conflicts with the maxLength: ${maxLength}`);
+                console.warn(`Setting record field: ${field} value: ${value} conflicts with maxLength: ${maxLength}`);
                 return oldValue;
             }
         }
 
-        if (Object.hasOwn(field, minLength)) {
+        if (Object.hasOwn(field, 'minLength')) {
             if (value?.toString() < minLength) {
-                console.warn(`Setting record field: ${field} value: ${value} conflicts with the minLength: ${minLength}`);
+                console.warn(`Setting record field: ${field} value: ${value} conflicts with minLength: ${minLength}`);
+                return oldValue;
+            }
+        }
+
+        if (Object.hasOwn(field, 'nullable')) {
+            if (nullable === false && value === null) {
+                console.warn(`Setting record field: ${field} value: ${value} conflicts with nullable: ${nullable}`);
                 return oldValue;
             }
         }

package/src/form/field/Number.mjs

@@ -99,6 +99,7 @@ class Number extends Text {
      * @protected
      */
     afterSetMaxValue(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('max', value);
     }
 
@@ -109,6 +110,7 @@ class Number extends Text {
      * @protected
      */
     afterSetMinValue(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('min', value);
     }
 
@@ -178,14 +180,17 @@ class Number extends Text {
      * @returns {Boolean}
      */
     isValid() {
-        let me    = this,
-            value = me.value;
+        let me       = this,
+            maxValue = me.maxValue,
+            minValue = me.minValue,
+            value    = me.value,
+            isNumber = Neo.isNumber(value);
 
-        if (Neo.isNumber(me.maxValue) && value > me.maxValue) {
+        if (Neo.isNumber(maxValue) && isNumber && value > maxValue) {
             return false;
         }
 
-        if (Neo.isNumber(me.minValue) && value < me.minValue) {
+        if (Neo.isNumber(minValue) && isNumber && value < minValue) {
             return false;
         }
 

package/src/form/field/Text.mjs

@@ -10,6 +10,12 @@ import VNodeUtil    from '../../util/VNode.mjs';
  * @extends Neo.form.field.Base
  */
 class Text extends Base {
+    /**
+     * Set this value to false, in case a field should display errors up front
+     * @member {Boolean} validBeforeMount=true
+     */
+    validBeforeMount = true
+
     static getStaticConfig() {return {
         /**
          * Valid values for autoCapitalize
@@ -375,6 +381,7 @@ class Text extends Base {
      * @protected
      */
     afterSetMaxLength(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('maxlength', value);
     }
 
@@ -385,6 +392,7 @@ class Text extends Base {
      * @protected
      */
     afterSetMinLength(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('minlength', value);
     }
 
@@ -437,6 +445,7 @@ class Text extends Base {
      * @protected
      */
     afterSetRequired(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('required', value ? value : null);
     }
 
@@ -532,6 +541,7 @@ class Text extends Base {
         }
 
         NeoArray[me.originalConfig.value !== value ? 'add' : 'remove'](me._cls, 'neo-is-dirty');
+        me.updateValidationIndicators();
 
         me.vdom = vdom;
 
@@ -873,19 +883,17 @@ class Text extends Base {
     onFocusLeave(data) {
         let me             = this,
             centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
-            cls            = me.cls,
-            vdom;
+            vdom           = me.vdom;
+
+        me.updateValidationIndicators();
 
-        NeoArray.remove(cls, 'neo-focus');
+        NeoArray.remove(me.cls, 'neo-focus');
 
         if (centerBorderEl && me.isEmpty()) {
-            me._cls = cls; // silent update
-            vdom = me.vdom;
             delete centerBorderEl.width;
-            me.vdom = vdom;
-        } else {
-            me.cls = cls;
         }
+
+        me.vdom = vdom;
     }
 
     /**
@@ -1011,6 +1019,22 @@ class Text extends Base {
             });
         });
     }
+
+    /**
+     * @param {Boolean} silent=true
+     */
+    updateValidationIndicators(silent=true) {
+        let me   = this,
+            vdom = me.vdom;
+
+        if (!(me.validBeforeMount && !me.mounted)) {
+            NeoArray[!me.isValid() ? 'add' : 'remove'](me._cls, 'neo-invalid');
+
+            if (!silent) {
+                me.vdom = vdom;
+            }
+        }
+    }
 }
 
 Neo.applyClassConfig(Text);