neo.mjs 4.0.53 → 4.0.54

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.54",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -12,14 +12,26 @@
         }
     }
 
-    &.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);
             }
         }
     }
@@ -48,7 +60,7 @@
                 }
 
                 .neo-center-border {
-                    border-top-color: transparent;
+                    border-top-color: transparent !important;
                 }
 
                 .neo-left-border {
@@ -82,7 +94,7 @@
         }
 
         .neo-input-wrapper {
-            border-color: transparent;
+            border-color: transparent !important;
         }
 
         .neo-label-wrapper {
@@ -193,7 +205,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;
             }
         }