npm - neo.mjs - Versions diffs - 5.1.12 → 5.1.14 - Mend

neo.mjs 5.1.12 → 5.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/apps/ServiceWorker.mjs +2 -2
package/apps/form/Overwrites.mjs +13 -0
package/apps/form/app.mjs +7 -0
package/apps/form/index.html +11 -0
package/apps/form/model/SideNav.mjs +38 -0
package/apps/form/neo-config.json +6 -0
package/apps/form/store/SideNav.mjs +24 -0
package/apps/form/view/FormContainer.mjs +98 -0
package/apps/form/view/FormContainerController.mjs +33 -0
package/apps/form/view/FormPageContainer.mjs +34 -0
package/apps/form/view/SideNavList.mjs +91 -0
package/apps/form/view/Viewport.mjs +59 -0
package/apps/form/view/ViewportController.mjs +37 -0
package/apps/form/view/ViewportModel.mjs +50 -0
package/apps/form/view/pages/Page1.mjs +34 -0
package/apps/form/view/pages/Page10.mjs +33 -0
package/apps/form/view/pages/Page2.mjs +28 -0
package/apps/form/view/pages/Page3.mjs +33 -0
package/apps/form/view/pages/Page4.mjs +33 -0
package/apps/form/view/pages/Page5.mjs +33 -0
package/apps/form/view/pages/Page6.mjs +33 -0
package/apps/form/view/pages/Page7.mjs +33 -0
package/apps/form/view/pages/Page8.mjs +33 -0
package/apps/form/view/pages/Page9.mjs +33 -0
package/buildScripts/createClass.mjs +0 -7
package/buildScripts/webpack/json/myApps.template.json +1 -0
package/examples/ServiceWorker.mjs +2 -2
package/package.json +2 -2
package/resources/examples/data/formSideNav.json +19 -0
package/resources/scss/src/apps/form/FormContainer.scss +23 -0
package/resources/scss/src/apps/form/SideNavList.scss +31 -0
package/src/DefaultConfig.mjs +2 -2
package/src/form/field/Date.mjs +11 -0
package/src/form/field/Text.mjs +15 -8

package/apps/ServiceWorker.mjs CHANGED Viewed

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

package/apps/form/Overwrites.mjs ADDED Viewed

@@ -0,0 +1,13 @@
+Neo.overwrites = {
+    Neo: {
+        form: {
+            field: {
+                Text: {
+                    labelPosition_: 'inline'
+                }
+            }
+        }
+    }
+}
+export default Neo.overwrites;

package/apps/form/app.mjs ADDED Viewed

@@ -0,0 +1,7 @@
+import Overwrites from './Overwrites.mjs';
+import Viewport   from './view/Viewport.mjs';
+export const onStart = () => Neo.app({
+    mainView: Viewport,
+    name    : 'Form'
+});

package/apps/form/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Form</title>
+</head>
+<body>
+    <script src="../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/apps/form/model/SideNav.mjs ADDED Viewed

@@ -0,0 +1,38 @@
+import Model from '../../../src/data/Model.mjs';
+/**
+ * @class Form.model.SideNav
+ * @extends Neo.data.Model
+ */
+class SideNav extends Model {
+    static config = {
+        /**
+         * @member {String} className='Form.model.SideNav'
+         * @protected
+         */
+        className: 'Form.model.SideNav',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name: 'cardIndex',
+            type: 'Integer'
+        }, {
+            name: 'id',
+            type: 'String'
+        }, {
+            name: 'isHeader',
+            type: 'Boolean'
+        }, {
+            name: 'isValid',
+            type: 'Boolean'
+        }, {
+            name: 'name',
+            type: 'String'
+        }]
+    }
+}
+Neo.applyClassConfig(SideNav);
+export default SideNav;

package/apps/form/neo-config.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+    "appPath": "apps/form/app.mjs",
+    "basePath": "../../",
+    "environment": "development",
+    "mainPath": "./Main.mjs"
+}

package/apps/form/store/SideNav.mjs ADDED Viewed

@@ -0,0 +1,24 @@
+import SideNavModel from '../model/SideNav.mjs'
+import Store        from '../../../src/data/Store.mjs';
+/**
+ * @class Form.store.SideNav
+ * @extends Neo.data.Store
+ */
+class SideNav extends Store {
+    static config = {
+        /**
+         * @member {String} className='Form.store.SideNav'
+         * @protected
+         */
+        className: 'Form.store.SideNav',
+        /**
+         * @member {Neo.data.Model} model=SideNavModel
+         */
+        model: SideNavModel
+    }
+}
+Neo.applyClassConfig(SideNav);
+export default SideNav;

package/apps/form/view/FormContainer.mjs ADDED Viewed

@@ -0,0 +1,98 @@
+import BaseFormContainer       from '../../../src/form/Container.mjs';
+import Container               from '../../../src/container/Base.mjs';
+import FormContainerController from './FormContainerController.mjs';
+import Label                   from '../../../src/component/Label.mjs';
+import Toolbar                 from '../../../src/toolbar/Base.mjs';
+/**
+ * @class Form.view.FormContainer
+ * @extends Neo.form.Container
+ */
+class FormContainer extends BaseFormContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.FormContainer'
+         * @protected
+         */
+        className: 'Form.view.FormContainer',
+        /**
+         * @member {String[]} baseCls=['form-form-container','neo-container'],
+         * @protected
+         */
+        baseCls: ['form-form-container', 'neo-container'],
+        /**
+         * @member {Neo.controller.Component} controller=FormContainerController
+         */
+        controller: FormContainerController,
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: Toolbar,
+            cls   : ['form-header'],
+            flex  : 'none',
+            items: [{
+                module: Label,
+                bind  : {text: data => data.activeTitle},
+                cls   : ['form-header-label'],
+                flex  : 'none'
+            }, '->', {
+                handler: 'onValidatePageButtonClick',
+                text   : 'Validate Page'
+            }]
+        }, {
+            module   : Container,
+            reference: 'pages-container',
+            layout: {
+                ntype: 'card',
+                bind : {activeIndex: data => data.activeIndex}
+            },
+            items: [{
+                module: () => import('./pages/Page1.mjs')
+            }, {
+                module: () => import('./pages/Page2.mjs')
+            }, {
+                module: () => import('./pages/Page3.mjs')
+            }, {
+                module: () => import('./pages/Page4.mjs')
+            }, {
+                module: () => import('./pages/Page5.mjs')
+            }, {
+                module: () => import('./pages/Page6.mjs')
+            }, {
+                module: () => import('./pages/Page7.mjs')
+            }, {
+                module: () => import('./pages/Page8.mjs')
+            }, {
+                module: () => import('./pages/Page9.mjs')
+            }, {
+                module: () => import('./pages/Page10.mjs')
+            }]
+        }, {
+            module: Toolbar,
+            cls   : ['form-footer'],
+            flex  : 'none',
+            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',
+                iconPosition: 'right',
+                style       : {marginLeft: '1em'},
+                text        : 'Next page'
+            }]
+        }]
+    }
+}
+Neo.applyClassConfig(FormContainer);
+export default FormContainer;

package/apps/form/view/FormContainerController.mjs ADDED Viewed

@@ -0,0 +1,33 @@
+import Component from '../../../src/controller/Component.mjs';
+/**
+ * @class Form.view.FormContainerController
+ * @extends Neo.controller.Component
+ */
+class FormContainerController extends Component {
+    static config = {
+        /**
+         * @member {String} className='Form.view.FormContainerController'
+         * @protected
+         */
+        className: 'Form.view.FormContainerController'
+    }
+    /**
+     * @param {Object} data
+     */
+    onNextPageButtonClick(data) {
+        this.getModel().data.activeIndex++;
+    }
+    /**
+     * @param {Object} data
+     */
+    onPrevPageButtonClick(data) {
+        this.getModel().data.activeIndex--;
+    }
+}
+Neo.applyClassConfig(FormContainerController);
+export default FormContainerController;

package/apps/form/view/FormPageContainer.mjs ADDED Viewed

@@ -0,0 +1,34 @@
+import FormContainer from '../../../src/form/Container.mjs';
+/**
+ * @class Form.view.FormPageContainer
+ * @extends Neo.form.Container
+ */
+class FormPageContainer extends FormContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.FormPageContainer'
+         * @protected
+         */
+        className: 'Form.view.FormPageContainer',
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            style: {maxWidth: '300px'}
+        },
+        /**
+         * @member {Object} layout={ntype:'vbox'}
+         */
+        layout: {ntype: 'vbox'},
+        /**
+         * @member {Object} _vdom
+         */
+        vdom:
+        {cn: []} // using a div instead of a form tag
+    }
+}
+Neo.applyClassConfig(FormPageContainer);
+export default FormPageContainer;

package/apps/form/view/SideNavList.mjs ADDED Viewed

@@ -0,0 +1,91 @@
+import List from '../../../src/list/Base.mjs';
+/**
+ * @class Form.view.SideNavList
+ * @extends Neo.list.Base
+ */
+class SideNavList extends List {
+    static config = {
+        /**
+         * @member {String} className='Form.view.SideNavList'
+         * @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
+     */
+    onSelect(items) {
+        let me     = this,
+            record = me.store.get(me.getItemRecordId(items[0]));
+        me.getModel().setData({
+            activeIndex: record.cardIndex,
+            activeTitle: record.name
+        })
+    }
+    /**
+     * Saves the amount of non-header items into the closest view model
+     */
+    onStoreLoad() {
+        let maxIndex = -1;
+        this.store.items.forEach(record => {
+            if (!record.isHeader) {
+                maxIndex++;
+            }
+        });
+        this.getModel().data.maxIndex = maxIndex;
+        super.onStoreLoad()
+    }
+}
+Neo.applyClassConfig(SideNavList);
+export default SideNavList;

package/apps/form/view/Viewport.mjs ADDED Viewed

@@ -0,0 +1,59 @@
+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
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        /**
+         * @member {String} className='Form.view.Viewport'
+         * @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,
+                reference: 'side-nav',
+                bind: {
+                    headerlessActiveIndex: data => data.activeIndex,
+                    store                : 'stores.sideNav'
+                }
+            }]
+        }, {
+            module: FormContainer,
+            style : {margin: '20px'}
+        }],
+        /**
+         * @member {Object} layout={ntype:'hbox',align:'stretch'}
+         */
+        layout: {ntype: 'hbox', align: 'stretch'},
+        /**
+         * @member {Neo.model.Component} model=ViewportModel
+         */
+        model: ViewportModel
+    }
+}
+Neo.applyClassConfig(Viewport);
+export default Viewport;

package/apps/form/view/ViewportController.mjs ADDED Viewed

@@ -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/apps/form/view/ViewportModel.mjs ADDED Viewed

@@ -0,0 +1,50 @@
+import Component    from '../../../src/model/Component.mjs';
+import SideNavStore from '../store/SideNav.mjs'
+/**
+ * @class Form.view.ViewportModel
+ * @extends Neo.model.Component
+ */
+class ViewportModel extends Component {
+    static config = {
+        /**
+         * @member {String} className='Form.view.ViewportModel'
+         * @protected
+         */
+        className: 'Form.view.ViewportModel',
+        /**
+         * @member {Object} data
+         */
+        data: {
+            /**
+             * The currently selected list item inside the SideNavList
+             * @member {Number} data.activeIndex
+             */
+            activeIndex: 0,
+            /**
+             * The name of the currently selected list item record
+             * @member {String} data.activeTitle
+             */
+            activeTitle: '',
+            /**
+             * The amount of non-header SideNavList items
+             * @member {Number} data.maxIndex
+             */
+            maxIndex: 0
+        },
+        /**
+         * @member {Object} stores
+         */
+        stores: {
+            sideNav: {
+                module  : SideNavStore,
+                autoLoad: true,
+                url     : '../../resources/examples/data/formSideNav.json'
+            }
+        }
+    }
+}
+Neo.applyClassConfig(ViewportModel);
+export default ViewportModel;

package/apps/form/view/pages/Page1.mjs ADDED Viewed

@@ -0,0 +1,34 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+/**
+ * @class Form.view.pages.Page1
+ * @extends Form.view.FormPageContainer
+ */
+class Page1 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page1'
+         * @protected
+         */
+        className: 'Form.view.pages.Page1',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Firstname',
+            minLength: 3,
+            name     : 'firstname',
+            required : true
+        }, {
+            module   : TextField,
+            labelText: 'Lastname',
+            name     : 'lastname'
+        }]
+    }
+}
+Neo.applyClassConfig(Page1);
+export default Page1;

package/apps/form/view/pages/Page10.mjs ADDED Viewed

@@ -0,0 +1,33 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+/**
+ * @class Form.view.pages.Page10
+ * @extends Form.view.FormPageContainer
+ */
+class Page10 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page10'
+         * @protected
+         */
+        className: 'Form.view.pages.Page10',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 10 Field 1',
+            name     : 'page10field1',
+            required : true
+        }, {
+            module   : TextField,
+            labelText: 'Page 10 Field 2',
+            name     : 'page10field2'
+        }]
+    }
+}
+Neo.applyClassConfig(Page10);
+export default Page10;

package/apps/form/view/pages/Page2.mjs ADDED Viewed

@@ -0,0 +1,28 @@
+import DateField         from '../../../../src/form/field/Date.mjs';
+import FormPageContainer from '../FormPageContainer.mjs';
+/**
+ * @class Form.view.pages.Page2
+ * @extends Form.view.FormPageContainer
+ */
+class Page2 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page2'
+         * @protected
+         */
+        className: 'Form.view.pages.Page2',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : DateField,
+            labelText: 'Birthday',
+            name     : 'birthday'
+        }]
+    }
+}
+Neo.applyClassConfig(Page2);
+export default Page2;

package/apps/form/view/pages/Page3.mjs ADDED Viewed

@@ -0,0 +1,33 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+/**
+ * @class Form.view.pages.Page3
+ * @extends Form.view.FormPageContainer
+ */
+class Page3 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page3'
+         * @protected
+         */
+        className: 'Form.view.pages.Page3',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 3 Field 1',
+            name     : 'page3field1',
+            required : true
+        }, {
+            module   : TextField,
+            labelText: 'Page 3 Field 2',
+            name     : 'page3field2'
+        }]
+    }
+}
+Neo.applyClassConfig(Page3);
+export default Page3;

package/apps/form/view/pages/Page4.mjs ADDED Viewed

@@ -0,0 +1,33 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+/**
+ * @class Form.view.pages.Page4
+ * @extends Form.view.FormPageContainer
+ */
+class Page4 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page4'
+         * @protected
+         */
+        className: 'Form.view.pages.Page4',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 4 Field 1',
+            name     : 'page4field1',
+            required : true
+        }, {
+            module   : TextField,
+            labelText: 'Page 4 Field 2',
+            name     : 'page4field2'
+        }]
+    }
+}
+Neo.applyClassConfig(Page4);
+export default Page4;

package/apps/form/view/pages/Page5.mjs ADDED Viewed

@@ -0,0 +1,33 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+/**
+ * @class Form.view.pages.Page5
+ * @extends Form.view.FormPageContainer
+ */
+class Page5 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page5'
+         * @protected
+         */
+        className: 'Form.view.pages.Page5',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 5 Field 1',
+            name     : 'page5field1',
+            required : true
+        }, {
+            module   : TextField,
+            labelText: 'Page 5 Field 2',
+            name     : 'page5field2'
+        }]
+    }
+}
+Neo.applyClassConfig(Page5);
+export default Page5;

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

@@ -0,0 +1,33 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+/**
+ * @class Form.view.pages.Page6
+ * @extends Form.view.FormPageContainer
+ */
+class Page6 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page6'
+         * @protected
+         */
+        className: 'Form.view.pages.Page6',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 6 Field 1',
+            name     : 'page6field1',
+            required : true
+        }, {
+            module   : TextField,
+            labelText: 'Page 6 Field 2',
+            name     : 'page6field2'
+        }]
+    }
+}
+Neo.applyClassConfig(Page6);
+export default Page6;

package/apps/form/view/pages/Page7.mjs ADDED Viewed

@@ -0,0 +1,33 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+/**
+ * @class Form.view.pages.Page7
+ * @extends Form.view.FormPageContainer
+ */
+class Page7 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page7'
+         * @protected
+         */
+        className: 'Form.view.pages.Page7',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 7 Field 1',
+            name     : 'page7field1',
+            required : true
+        }, {
+            module   : TextField,
+            labelText: 'Page 7 Field 2',
+            name     : 'page7field2'
+        }]
+    }
+}
+Neo.applyClassConfig(Page7);
+export default Page7;

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

@@ -0,0 +1,33 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+/**
+ * @class Form.view.pages.Page8
+ * @extends Form.view.FormPageContainer
+ */
+class Page8 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page8'
+         * @protected
+         */
+        className: 'Form.view.pages.Page8',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 8 Field 1',
+            name     : 'page8field1',
+            required : true
+        }, {
+            module   : TextField,
+            labelText: 'Page 8 Field 2',
+            name     : 'page8field2'
+        }]
+    }
+}
+Neo.applyClassConfig(Page8);
+export default Page8;

package/apps/form/view/pages/Page9.mjs ADDED Viewed

@@ -0,0 +1,33 @@
+import FormPageContainer from '../FormPageContainer.mjs';
+import TextField         from '../../../../src/form/field/Text.mjs';
+/**
+ * @class Form.view.pages.Page9
+ * @extends Form.view.FormPageContainer
+ */
+class Page9 extends FormPageContainer {
+    static config = {
+        /**
+         * @member {String} className='Form.view.pages.Page9'
+         * @protected
+         */
+        className: 'Form.view.pages.Page9',
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Page 9 Field 1',
+            name     : 'page9field1',
+            required : true
+        }, {
+            module   : TextField,
+            labelText: 'Page 9 Field 2',
+            name     : 'page9field2'
+        }]
+    }
+}
+Neo.applyClassConfig(Page9);
+export default Page9;

package/buildScripts/createClass.mjs CHANGED Viewed

@@ -584,13 +584,6 @@ if (programOpts.info) {
             `        className: '${className}'`
         );
-        baseClass === 'container.Viewport' && addComma(classContent).push(
-            "        /**",
-            "         * @member {Boolean} autoMount=true",
-            "         */",
-            "        autoMount: true"
-        );
         baseClass === 'table.Container' && addComma(classContent).push(
             "        /**",
             "         * @member {Object[]} columns",

package/buildScripts/webpack/json/myApps.template.json CHANGED Viewed

@@ -2,6 +2,7 @@
     "apps": [
         "Covid",
         "Docs",
+        "Form",
         "Krausest",
         "RealWorld",
         "RealWorld2",

package/examples/ServiceWorker.mjs CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.1.12",
+    "version": "5.1.14",
     "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.58.1",
+        "sass": "^1.58.3",
         "webpack": "^5.75.0",
         "webpack-cli": "^5.0.1",
         "webpack-dev-server": "4.11.1",

package/resources/examples/data/formSideNav.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+    "success": true,
+    "data": [
+        {"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 ADDED Viewed

@@ -0,0 +1,23 @@
+.form-form-container.neo-container {
+    border       : 1px solid #ddd;
+    border-radius: 5px;
+    max-width    : 600px;
+    .form-footer {
+        border-top: 1px solid #ddd;
+        min-height: 50px;
+        padding   : .5em 1em;
+    }
+    .form-header {
+        align-items  : center;
+        border-bottom: 1px solid #ddd;
+        display      : flex;
+        min-height   : 50px;
+        padding      : .5em 1em;
+    }
+    .form-header-label {
+        font-size: 24px;
+    }
+}

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

@@ -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 CHANGED Viewed

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

package/src/form/field/Date.mjs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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