neo.mjs 5.1.13 → 5.1.14

package/apps/ServiceWorker.mjs

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

package/apps/form/model/SideNav.mjs

@@ -23,6 +23,9 @@ class SideNav extends Model {
         }, {
             name: 'isHeader',
             type: 'Boolean'
+        }, {
+            name: 'isValid',
+            type: 'Boolean'
         }, {
             name: 'name',
             type: 'String'

package/apps/form/view/FormContainerController.mjs

@@ -26,20 +26,6 @@ class FormContainerController extends Component {
     onPrevPageButtonClick(data) {
         this.getModel().data.activeIndex--;
     }
-
-    /**
-     * @param {Object} data
-     */
-    onValidatePageButtonClick(data) {
-        let me             = this,
-            activeIndex    = me.getModel().data.activeIndex,
-            pagesContainer = me.getReference('pages-container'),
-            activeCard     = pagesContainer.items[activeIndex];
-
-        console.log(`Current page: ${activeIndex + 1}`, activeCard.getValues());
-
-        activeCard.validate();
-    }
 }
 
 Neo.applyClassConfig(FormContainerController);

package/apps/form/view/SideNavList.mjs

@@ -11,12 +11,49 @@ class SideNavList extends List {
          * @protected
          */
         className: 'Form.view.SideNavList',
+        /**
+         * @member {String[]} baseCls=['form-side-nav-list','neo-list']
+         * @protected
+         */
+        baseCls: ['form-side-nav-list', 'neo-list'],
         /**
          * @member {Boolean} useHeaders=true
          */
         useHeaders: true
     }
 
+    /**
+     * @param {Object} record
+     * @param {Number} index
+     * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
+     */
+    createItemContent(record, index) {
+        let itemText = record[this.displayField];
+
+        return record.isHeader ? itemText : [
+            {tag: 'i', cls: this.getIconCls(record)},
+            {html: itemText}
+        ];
+    }
+
+    /**
+     * @param {Object} record
+     * @returns {String[]}
+     */
+    getIconCls(record) {
+        let cls = ['neo-list-icon'];
+
+        if (record.isValid === true) {
+            return [...cls, 'neo-color-green', 'far', 'fa-circle-check'];
+        }
+
+        if (record.isValid === false) {
+            return [...cls, 'neo-color-red', 'far', 'fa-circle-xmark'];
+        }
+
+        return [...cls, 'neo-color-blue', 'far', 'fa-circle'];
+    }
+
     /**
      * Saves activeIndex & activeTitle into the closest view model
      * @param {String[]} items

package/apps/form/view/Viewport.mjs

@@ -1,7 +1,8 @@
-import BaseViewport  from '../../../src/container/Viewport.mjs';
-import FormContainer from './FormContainer.mjs';
-import SideNavList   from './SideNavList.mjs';
-import ViewportModel from './ViewportModel.mjs';
+import BaseViewport       from '../../../src/container/Viewport.mjs';
+import FormContainer      from './FormContainer.mjs';
+import SideNavList        from './SideNavList.mjs';
+import ViewportController from './ViewportController.mjs';
+import ViewportModel      from './ViewportModel.mjs';
 
 /**
  * @class Form.view.Viewport
@@ -14,18 +15,24 @@ class Viewport extends BaseViewport {
          * @protected
          */
         className: 'Form.view.Viewport',
+        /**
+         * @member {Neo.controller.Component} controller=ViewportController
+         */
+        controller: ViewportController,
         /**
          * @member {Object[]} items
          */
         items: [{
             ntype: 'container',
+            style: {margin: '0 1em'},
             width: '300',
 
             items: [{
                 flex: 'none',
                 vdom: {tag: 'h1', innerHTML: 'My Form Header'}
             }, {
-                module: SideNavList,
+                module   : SideNavList,
+                reference: 'side-nav',
 
                 bind: {
                     headerlessActiveIndex: data => data.activeIndex,

package/apps/form/view/ViewportController.mjs

@@ -0,0 +1,37 @@
+import Component from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Form.view.ViewportController
+ * @extends Neo.controller.Component
+ */
+class ViewportController extends Component {
+    static config = {
+        /**
+         * @member {String} className='Form.view.ViewportController'
+         * @protected
+         */
+        className: 'Form.view.ViewportController'
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onValidatePageButtonClick(data) {
+        let me             = this,
+            model          = me.getModel(),
+            activeIndex    = model.data.activeIndex,
+            pagesContainer = me.getReference('pages-container'),
+            store          = model.getStore('sideNav'),
+            activeCard     = pagesContainer.items[activeIndex],
+            listIndex      = me.getReference('side-nav').getActiveIndex(activeIndex),
+            isValid        = activeCard.validate();
+
+        console.log(`Current page: ${activeIndex + 1}`, activeCard.getValues());
+
+        store.getAt(listIndex).isValid = isValid;
+    }
+}
+
+Neo.applyClassConfig(ViewportController);
+
+export default ViewportController;

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/resources/examples/data/formSideNav.json

@@ -2,18 +2,18 @@
     "success": true,
 
     "data": [
-        {"id":  1, "cardIndex": null, "isHeader": true,  "name": "1. Basic data"},
-        {"id":  2, "cardIndex":    0, "isHeader": false, "name": "Page 1"},
-        {"id":  3, "cardIndex":    1, "isHeader": false, "name": "Page 2"},
-        {"id":  4, "cardIndex":    2, "isHeader": false, "name": "Page 3"},
-        {"id":  5, "cardIndex": null, "isHeader": true,  "name": "2. Personal data"},
-        {"id":  6, "cardIndex":    3, "isHeader": false, "name": "Page 4"},
-        {"id":  7, "cardIndex":    4, "isHeader": false, "name": "Page 5"},
-        {"id":  8, "cardIndex":    5, "isHeader": false, "name": "Page 6"},
-        {"id":  9, "cardIndex":    6, "isHeader": false, "name": "Page 7"},
-        {"id": 10, "cardIndex": null, "isHeader": true,  "name": "3. More data"},
-        {"id": 11, "cardIndex":    7, "isHeader": false, "name": "Page 8"},
-        {"id": 12, "cardIndex":    8, "isHeader": false, "name": "Page 9"},
-        {"id": 13, "cardIndex":    9, "isHeader": false, "name": "Page 10"}
+        {"id":  1, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "1. Basic data"},
+        {"id":  2, "cardIndex":    0, "isHeader": false, "isValid": null, "name": "Page 1"},
+        {"id":  3, "cardIndex":    1, "isHeader": false, "isValid": null, "name": "Page 2"},
+        {"id":  4, "cardIndex":    2, "isHeader": false, "isValid": null, "name": "Page 3"},
+        {"id":  5, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "2. Personal data"},
+        {"id":  6, "cardIndex":    3, "isHeader": false, "isValid": null, "name": "Page 4"},
+        {"id":  7, "cardIndex":    4, "isHeader": false, "isValid": null, "name": "Page 5"},
+        {"id":  8, "cardIndex":    5, "isHeader": false, "isValid": null, "name": "Page 6"},
+        {"id":  9, "cardIndex":    6, "isHeader": false, "isValid": null, "name": "Page 7"},
+        {"id": 10, "cardIndex": null, "isHeader": true,  "isValid": null, "name": "3. More data"},
+        {"id": 11, "cardIndex":    7, "isHeader": false, "isValid": null, "name": "Page 8"},
+        {"id": 12, "cardIndex":    8, "isHeader": false, "isValid": null, "name": "Page 9"},
+        {"id": 13, "cardIndex":    9, "isHeader": false, "isValid": null, "name": "Page 10"}
     ]
 }

package/resources/scss/src/apps/form/FormContainer.scss

@@ -1,6 +1,7 @@
 .form-form-container.neo-container {
     border       : 1px solid #ddd;
     border-radius: 5px;
+    max-width    : 600px;
 
     .form-footer {
         border-top: 1px solid #ddd;

package/resources/scss/src/apps/form/SideNavList.scss

@@ -0,0 +1,31 @@
+.form-side-nav-list.neo-list {
+    .neo-list-header {
+        font-weight   : bold;
+        text-transform: uppercase;
+    }
+
+    .neo-list-item {
+        .neo-color-blue {
+            color: #1c60a0;
+        }
+
+        .neo-color-green {
+            color: darkgreen;
+        }
+
+        .neo-color-red {
+            color: brown;
+        }
+
+        .neo-list-icon {
+            margin-right: .5em;
+        }
+
+        &:not(.neo-list-header) {
+            align-items   : center;
+            display       : flex;
+            flex-direction: row;
+            margin-left   : 18px;
+        }
+    }
+}

package/src/DefaultConfig.mjs

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

package/src/form/field/Date.mjs

@@ -90,6 +90,17 @@ class DateField extends Picker {
         return this.dateSelector;
     }
 
+    /**
+     * @returns {Boolean}
+     */
+    hasContent() {
+        if (this.labelPosition === 'inline') {
+            return true;
+        }
+
+        return super.hasContent()
+    }
+
     /**
      * @param {Object} data
      * @protected

package/src/form/field/Text.mjs

@@ -696,19 +696,17 @@ class Text extends Base {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        let me              = this,
-            cls             = me.cls,
-            placeholderText = me.placeholderText,
-            hasContent      = placeholderText?.length > 0 || value !== null && value.toString().length > 0,
-            originalValue   = me.originalConfig.value,
-            isDirty         = value !== originalValue && Neo.isEmpty(value) !== Neo.isEmpty(originalValue);
+        let me            = this,
+            cls           = me.cls,
+            originalValue = me.originalConfig.value,
+            isDirty       = value !== originalValue && Neo.isEmpty(value) !== Neo.isEmpty(originalValue);
 
         me.silentVdomUpdate = true;
 
         me.getInputEl().value = value;
 
-        NeoArray[hasContent ? 'add' : 'remove'](cls, 'neo-has-content');
-        NeoArray[isDirty    ? 'add' : 'remove'](cls, 'neo-is-dirty');
+        NeoArray[me.hasContent() ? 'add' : 'remove'](cls, 'neo-has-content');
+        NeoArray[isDirty         ? 'add' : 'remove'](cls, 'neo-is-dirty');
         me.cls = cls;
 
         me.validate(); // silent
@@ -998,6 +996,15 @@ class Text extends Base {
         return this.id + '-trigger-' + type;
     }
 
+    /**
+     * @returns {Boolean}
+     */
+    hasContent() {
+        let value = this.value;
+
+        return this.placeholderText?.length > 0 || value !== null && value.toString().length > 0
+    }
+
     /**
      * Finds a trigger by a given type config
      * @param {String} type