neo.mjs 4.0.52 → 4.0.53

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,

package/package.json

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

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

@@ -8,7 +8,19 @@
 
     &.neo-focus {
         .neo-input-wrapper {
-            border-color: v(textfield-border-color-active);
+            border-color: v(textfield-border-color-active) !important;
+        }
+    }
+
+    &.neo-invalid {
+        .neo-input-wrapper {
+            border-color: brown;
+        }
+
+        &.neo-disabled {
+            .neo-input-wrapper {
+                border-color: inherit;
+            }
         }
     }
 
@@ -156,10 +168,6 @@
             margin       : 0; // important for Safari => #1125
             min-height   : 25px;
             width        : 30px;
-
-            &:invalid {
-                border: 1px solid brown;
-            }
         }
     }
 
@@ -179,14 +187,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: brown;
+
+            &.neo-disabled {
+                border-color: inherit;
+            }
+        }
     }
 
     .neo-textfield-label {

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

@@ -375,6 +375,7 @@ class Text extends Base {
      * @protected
      */
     afterSetMaxLength(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('maxlength', value);
     }
 
@@ -385,6 +386,7 @@ class Text extends Base {
      * @protected
      */
     afterSetMinLength(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('minlength', value);
     }
 
@@ -437,6 +439,7 @@ class Text extends Base {
      * @protected
      */
     afterSetRequired(value, oldValue) {
+        this.updateValidationIndicators();
         this.changeInputElKey('required', value ? value : null);
     }
 
@@ -532,6 +535,7 @@ class Text extends Base {
         }
 
         NeoArray[me.originalConfig.value !== value ? 'add' : 'remove'](me._cls, 'neo-is-dirty');
+        me.updateValidationIndicators();
 
         me.vdom = vdom;
 
@@ -1011,6 +1015,20 @@ class Text extends Base {
             });
         });
     }
+
+    /**
+     * @param {Boolean} silent=true
+     */
+    updateValidationIndicators(silent=true) {
+        let me   = this,
+            vdom = me.vdom;
+
+        NeoArray[!me.isValid() ? 'add' : 'remove'](me._cls, 'neo-invalid');
+
+        if (!silent) {
+            me.vdom = vdom;
+        }
+    }
 }
 
 Neo.applyClassConfig(Text);