neo.mjs 5.2.16 → 5.3.1

package/apps/ServiceWorker.mjs

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

package/apps/form/view/FormContainer.mjs

@@ -82,12 +82,12 @@ class FormContainer extends BaseFormContainer {
             cls   : ['form-footer'],
             flex  : 'none',
 
-            items: ['->', {
+            items: [{
                 bind   : {disabled: data => data.activeIndex === 0},
                 handler: 'onPrevPageButtonClick',
                 iconCls: 'fas fa-chevron-left',
                 text   : 'Back'
-            }, {
+            }, '->', {
                 bind        : {disabled: data => data.activeIndex === data.maxIndex},
                 handler     : 'onNextPageButtonClick',
                 iconCls     : 'fas fa-chevron-right',

package/apps/form/view/FormContainerController.mjs

@@ -13,6 +13,17 @@ class FormContainerController extends Component {
         className: 'Form.view.FormContainerController'
     }
 
+    /**
+     *
+     */
+    onComponentConstructed() {
+        super.onComponentConstructed();
+
+        this.component.on('fieldFocusLeave', data => {
+            console.log('fieldFocusLeave', data);
+        })
+    }
+
     /**
      * @param {Object} data
      */

package/apps/form/view/Viewport.mjs

@@ -29,7 +29,7 @@ class Viewport extends BaseViewport {
 
             items: [{
                 flex: 'none',
-                vdom: {tag: 'h1', innerHTML: 'My Form Header'}
+                vdom: {tag: 'h1', innerHTML: 'Nested Forms'}
             }, {
                 module   : SideNavList,
                 reference: 'side-nav',

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

@@ -1,5 +1,5 @@
 import FormPageContainer from '../FormPageContainer.mjs';
-import TextField         from '../../../../src/form/field/Text.mjs';
+import TextArea          from '../../../../src/form/field/TextArea.mjs';
 
 /**
  * @class Form.view.pages.Page6
@@ -16,18 +16,28 @@ class Page6 extends FormPageContainer {
          * @member {String} formGroup='page6'
          */
         formGroup: 'page6',
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            module: TextArea
+        },
         /**
          * @member {Object[]} items
          */
         items: [{
-            module   : TextField,
+            height   : 200,
             labelText: 'Page 6 Field 1',
             name     : 'field1',
-            required : true
+            required : true,
+            value    : 'Lorem ipsum'
         }, {
-            module   : TextField,
+            height   : 300,
             labelText: 'Page 6 Field 2',
             name     : 'field2'
+        }, {
+            labelText: 'Page 6 Field 3',
+            name     : 'field3'
         }]
     }
 }

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

@@ -1,5 +1,5 @@
 import FormPageContainer from '../FormPageContainer.mjs';
-import TextField         from '../../../../src/form/field/Text.mjs';
+import NumberField       from '../../../../src/form/field/Number.mjs';
 
 /**
  * @class Form.view.pages.Page8
@@ -16,14 +16,16 @@ class Page8 extends FormPageContainer {
          * @member {Object[]} items
          */
         items: [{
-            module   : TextField,
+            module   : NumberField,
             labelText: 'Page 8 Field 1',
             name     : 'page8field1',
             required : true
         }, {
-            module   : TextField,
+            module   : NumberField,
             labelText: 'Page 8 Field 2',
-            name     : 'page8field2'
+            name     : 'page8field2',
+            stepSize : 0.01,
+            value    : 0.02
         }]
     }
 }

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.2.16",
+    "version": "5.3.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -56,7 +56,7 @@
         "neo-jsdoc": "^1.0.1",
         "neo-jsdoc-x": "^1.0.5",
         "postcss": "^8.4.21",
-        "sass": "^1.59.3",
+        "sass": "^1.60.0",
         "webpack": "^5.76.3",
         "webpack-cli": "^5.0.1",
         "webpack-dev-server": "4.13.1",

package/resources/examples/data/formSideNav.json

@@ -9,10 +9,10 @@
         {"id":  5, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "2. Personal data"},
         {"id":  6, "cardIndex":    3, "isHeader": false, "isValid": null, "name": "CheckBoxes"},
         {"id":  7, "cardIndex":    4, "isHeader": false, "isValid": null, "name": "Radios"},
-        {"id":  8, "cardIndex":    5, "isHeader": false, "isValid": null, "name": "Page 6"},
+        {"id":  8, "cardIndex":    5, "isHeader": false, "isValid": null, "name": "TextAreas"},
         {"id":  9, "cardIndex":    6, "isHeader": false, "isValid": null, "name": "Fieldsets"},
         {"id": 10, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "3. More data"},
-        {"id": 11, "cardIndex":    7, "isHeader": false, "isValid": null, "name": "Page 8"},
+        {"id": 11, "cardIndex":    7, "isHeader": false, "isValid": null, "name": "NumberFields"},
         {"id": 12, "cardIndex":    8, "isHeader": false, "isValid": null, "name": "Page 9"},
         {"id": 13, "cardIndex":    9, "isHeader": false, "isValid": null, "name": "Page 10"},
         {"id": 14, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "3. Optional data"},

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

@@ -1,11 +1,35 @@
 .neo-textarea {
-    align-items: stretch;
+    align-items   : stretch;
+    display       : flex;
+    flex-direction: column;
 
     .neo-input-wrapper {
-        height: fit-content;
+        flex: 1 0 auto;
+    }
+
+    .neo-label-wrapper {
+        height: 100%;
     }
 
     .neo-field-trigger {
         border-bottom: 1px solid var(--textfield-border-color);
     }
+
+    .neo-textfield-error {
+        height: 1.2em; // 1.5em - 0.3em => margin-top
+    }
+
+    &.label-inline {
+        display: flex;
+
+        .neo-label-wrapper {
+            height: 100%;
+        }
+    }
+
+    &:has(.neo-textfield-error) {
+        .neo-label-wrapper {
+            height: calc(100% - 1.5em);
+        }
+    }
 }

package/src/DefaultConfig.mjs

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

package/src/form/Container.mjs

@@ -69,6 +69,18 @@ class Container extends BaseContainer {
         return null;
     }
 
+    /**
+     * @param {Neo.form.field.Base} field
+     * @returns {String}
+     */
+    getFieldPath(field) {
+        let path = field.formGroup ? field.formGroup.split('.') : [];
+
+        path.push(field.name || field.id);
+
+        return path.join('.');
+    }
+
     /**
      * @returns {Promise<Neo.form.field.Base[]>} fields
      */
@@ -188,19 +200,29 @@ class Container extends BaseContainer {
      * @param {Object} values={}
      */
     async setValues(values={}) {
-        let keys   = Object.keys(values),
-            fields = await this.getFields(),
-            index;
+        let me     = this,
+            fields = await me.getFields(),
+            isRadio, path, value;
 
         fields.forEach(item => {
-            index = keys.indexOf(item.name);
-
-            if (index < 0) {
-                index = keys.indexOf(item.id);
-            }
+            path  = me.getFieldPath(item);
+            value = Neo.nsWithArrays(path, false, values);
 
-            if (index > -1) {
-                item.value = values[keys[index]];
+            if (Neo.typeOf(value) === 'Array') {
+                // form.field.CheckBox
+                if (value.includes(item.value)) {
+                    item.checked = true;
+                }
+            } else if (value !== undefined) {
+                isRadio = Neo.form.field?.Radio && item instanceof Neo.form.field.Radio;
+
+                if (isRadio) {
+                    if (item.value === value) {
+                        item.checked = true;
+                    }
+                } else {
+                    item.value = value;
+                }
             }
         })
     }

package/src/form/field/Base.mjs

@@ -102,6 +102,24 @@ class Base extends Component {
         return true;
     }
 
+    /**
+     * @param {Object} data
+     * @param {Object[]} data.oldPath
+     * @protected
+     */
+    onFocusLeave(data) {
+        super.onFocusLeave?.(data);
+
+        ComponentManager.getParents(this).forEach(parent => {
+            if (parent instanceof Neo.form.Container) {
+                parent.fire('fieldFocusLeave', {
+                    ...data,
+                    field: this
+                })
+            }
+        })
+    }
+
     /**
      * Resets the field to a new value or null
      * @param {*} value=null

package/src/form/field/Number.mjs

@@ -229,30 +229,23 @@ class Number extends Text {
 
     /**
      * @param {Object} data
-     * @override
+     * @param {Object[]} data.oldPath
+     * @protected
      */
-    onInputValueChange(data) {
-        let me       = this,
-            value    = data.value,
-            oldValue = me.value;
+    onFocusLeave(data) {
+        let me    = this,
+            value = me.value;
 
-        if (!value && !me.required) {
-            super.onInputValueChange(data);
-        } else {
-            value = parseInt(value); // todo: support for other number types
-
-            if (!Neo.isNumber(value)) {
-                me._value = oldValue;
-            } else {
-                value = value - value % me.stepSize;
-                value = Math.max(me.minValue, value);
-                value = Math.min(me.maxValue, value);
+        if (value !== null) {
+            value = me.stepSizeDigits > 0 ? parseFloat(value) : parseInt(value);
+            value = value - value % me.stepSize;
+            value = Math.max(me.minValue, value);
+            value = Math.min(me.maxValue, value);
 
-                data.value = value;
-
-                super.onInputValueChange(data);
-            }
+            me.value = value;
         }
+
+        super.onFocusLeave(data)
     }
 
     /**

package/src/form/field/Text.mjs

@@ -1109,6 +1109,8 @@ class Text extends Base {
 
             me.update();
         }
+
+        super.onFocusLeave(data);
     }
 
     /**