neo.mjs 4.0.53 → 4.0.56

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

@@ -151,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.53",
+    "version": "4.0.56",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -12,14 +12,34 @@
         }
     }
 
-    &.neo-invalid {
+    &.neo-invalid:not(.neo-disabled) {
         .neo-input-wrapper {
-            border-color: brown;
+            border-color: v(textfield-border-color-invalid);
         }
 
-        &.neo-disabled {
-            .neo-input-wrapper {
-                border-color: inherit;
+        .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);
             }
         }
     }
@@ -48,7 +68,7 @@
                 }
 
                 .neo-center-border {
-                    border-top-color: transparent;
+                    border-top-color: transparent !important;
                 }
 
                 .neo-left-border {
@@ -82,7 +102,7 @@
         }
 
         .neo-input-wrapper {
-            border-color: transparent;
+            border-color: transparent !important;
         }
 
         .neo-label-wrapper {
@@ -193,7 +213,7 @@
         }
 
         &.neo-invalid {
-            border-color: brown;
+            border-color: v(textfield-border-color-invalid);
 
             &.neo-disabled {
                 border-color: inherit;

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/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
@@ -877,19 +883,17 @@ class Text extends Base {
     onFocusLeave(data) {
         let me             = this,
             centerBorderEl = me.getCenterBorderEl(), // labelPosition: 'inline'
-            cls            = me.cls,
-            vdom;
+            vdom           = me.vdom;
 
-        NeoArray.remove(cls, 'neo-focus');
+        me.updateValidationIndicators();
+
+        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;
     }
 
     /**
@@ -1023,10 +1027,12 @@ class Text extends Base {
         let me   = this,
             vdom = me.vdom;
 
-        NeoArray[!me.isValid() ? 'add' : 'remove'](me._cls, 'neo-invalid');
+        if (!(me.validBeforeMount && !me.mounted)) {
+            NeoArray[!me.isValid() ? 'add' : 'remove'](me._cls, 'neo-invalid');
 
-        if (!silent) {
-            me.vdom = vdom;
+            if (!silent) {
+                me.vdom = vdom;
+            }
         }
     }
 }