neo.mjs 5.5.5 → 5.5.7

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.5.5'
+         * @member {String} version='5.5.7'
          */
-        version: '5.5.5'
+        version: '5.5.7'
     }
 
     /**

package/apps/form/view/pages/Page12.mjs

@@ -1,5 +1,5 @@
+import EmailField        from '../../../../src/form/field/Email.mjs';
 import FormPageContainer from '../FormPageContainer.mjs';
-import TextField         from '../../../../src/form/field/Text.mjs';
 
 /**
  * @class Form.view.pages.Page12
@@ -16,11 +16,12 @@ class Page12 extends FormPageContainer {
          * @member {Object[]} items
          */
         items: [{
-            module   : TextField,
+            module   : EmailField,
             labelText: 'Page 12 Field 1',
-            name     : 'page12field1'
+            name     : 'page12field1',
+            required : true
         }, {
-            module   : TextField,
+            module   : EmailField,
             labelText: 'Page 12 Field 2',
             name     : 'page12field2'
         }]

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.5.5'
+         * @member {String} version='5.5.7'
          */
-        version: '5.5.5'
+        version: '5.5.7'
     }
 
     /**

package/package.json

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

package/resources/examples/data/formSideNav.json

@@ -17,7 +17,7 @@
         {"id": 13, "cardIndex":    9, "isHeader": false, "isValid": null, "name": "SelectFields"},
         {"id": 14, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "4. Optional data"},
         {"id": 15, "cardIndex":   10, "isHeader": false, "isValid": null, "name": "ZipCodeFields"},
-        {"id": 16, "cardIndex":   11, "isHeader": false, "isValid": null, "name": "Page 12"},
+        {"id": 16, "cardIndex":   11, "isHeader": false, "isValid": null, "name": "EmailFields"},
         {"id": 17, "cardIndex":   12, "isHeader": false, "isValid": null, "name": "Page 13"},
         {"id": 18, "cardIndex":   13, "isHeader": false, "isValid": null, "name": "Page 14"}
     ]

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

@@ -40,6 +40,14 @@
         margin-top : .3em;
         white-space: break-spaces;
         word-break : break-word;
+
+        &.neo-absolute {
+            position: absolute;
+        }
+    }
+
+    .neo-error-wrapper {
+        position: relative;
     }
 
     &.neo-invalid {

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.5.5'
+     * @default '5.5.7'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.5.5'
+    version: '5.5.7'
 };
 
 Object.assign(DefaultConfig, {

package/src/form/field/CheckBox.mjs

@@ -38,6 +38,11 @@ class CheckBox extends Base {
          * @member {String|null} error_=null
          */
         error_: null,
+        /**
+         * Useful for fields inside a css grid where errors should live outside the layout
+         * @member {Boolean} errorPositionAbsolute_=false
+         */
+        errorPositionAbsolute_: false,
         /**
          * @member {Function} errorTextGroupRequired='Required'
          */
@@ -126,7 +131,9 @@ class CheckBox extends Base {
                 {tag: 'i',     cls: ['neo-checkbox-icon']},
                 {tag: 'span',  cls: ['neo-checkbox-value-label']}
             ]},
-            {cls: ['neo-error'], removeDom: true}
+            {cls: ['neo-error-wrapper'], removeDom: true, cn: [
+                {cls: ['neo-error']}
+            ]}
         ]}
     }
 
@@ -189,6 +196,21 @@ class CheckBox extends Base {
         this.updateError(value)
     }
 
+    /**
+     * Triggered after the errorPositionAbsolute config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetErrorPositionAbsolute(value, oldValue) {
+        let me  = this,
+            cls = me.vdom.cn[1].cn[0].cls;
+
+        NeoArray[value ? 'add' : 'remove'](cls, 'neo-absolute');
+
+        me.update()
+    }
+
     /**
      * Triggered after the required groupRequired got changed
      * @param {Boolean} value
@@ -463,7 +485,7 @@ class CheckBox extends Base {
         let me        = this,
             cls       = me.cls,
             showError = value && me.showErrorTexts,
-            errorNode;
+            errorNode, errorWrapper;
 
         if (!(me.clean && !me.mounted)) {
             me._error = value; // silent update
@@ -471,7 +493,8 @@ class CheckBox extends Base {
             NeoArray[value ? 'add' : 'remove'](cls, 'neo-invalid');
             me.cls = cls;
 
-            errorNode = me.vdom.cn[1];
+            errorWrapper = me.vdom.cn[1];
+            errorNode    = errorWrapper.cn[0];
 
             if (showError) {
                 errorNode.html = value;
@@ -479,7 +502,7 @@ class CheckBox extends Base {
                 delete errorNode.html;
             }
 
-            errorNode.removeDom = !showError;
+            errorWrapper.removeDom = !showError;
 
             !silent && me.update()
         }

package/src/form/field/Email.mjs

@@ -5,6 +5,14 @@ import Text from './Text.mjs';
  * @extends Neo.form.field.Text
  */
 class Email extends Text {
+    /**
+     * See: https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address
+     * @member {RegExp} emailRegex
+     * @protected
+     * @static
+     */
+    static emailRegex = /^[a-z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)*$/i
+
     static config = {
         /**
          * @member {String} className='Neo.form.field.Email'
@@ -16,11 +24,36 @@ class Email extends Text {
          * @protected
          */
         ntype: 'emailfield',
+        /**
+         * @member {String} errorTextValidEmail='Not a valid email address'
+         */
+        errorTextValidEmail: 'Not a valid email address',
         /**
          * @member {String} inputType='email'
          */
         inputType: 'email'
     }
+
+    /**
+     * 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) {
+        let me          = this,
+            returnValue = super.validate(silent);
+
+        if (returnValue) {
+            if (!Email.emailRegex.test(me.value)) {
+                me._error = me.errorTextValidEmail;
+                returnValue = false;
+            }
+        }
+
+        !returnValue && !me.clean && me.updateError(me._error, silent);
+
+        return returnValue
+    }
 }
 
 Neo.applyClassConfig(Email);