neo.mjs 7.8.0 → 7.9.1

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-09-21",
+      "datePublished": "2024-09-30",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.8.0'
+                html  : 'v7.9.1'
             }]
         }],
         /**

package/apps/portal/view/learn/MainContainerController.mjs

@@ -141,7 +141,7 @@ class MainContainerController extends Controller {
      */
     onRouteDefault(data) {
         if (!this.getModel().data.currentPageRecord) {
-            this.onRouteLearnItem({itemId: 'WhyNeo-Intro'})
+            this.onRouteLearnItem({itemId: 'benefits.Introduction'})
         }
     }
 

package/examples/ServiceWorker.mjs

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

package/examples/dialog/DemoDialog.mjs

@@ -135,7 +135,8 @@ class DemoDialog extends Dialog {
             trapFocus              : true,
             optionalAnimateTargetId: button.id,
             style                  : {left: me.getOffset(), top: me.getOffset()},
-            title                  : 'Dialog ' + nextIndex
+            title                  : 'Dialog ' + nextIndex,
+            windowId               : me.windowId
         })
     }
 

package/examples/dialog/MainContainer.mjs

@@ -58,7 +58,6 @@ class MainContainer extends Viewport {
                 checked       : true,
                 hideLabel     : true,
                 hideValueLabel: false,
-                listeners     : {change: me.onConfigChange.bind(me, 'animated')},
                 style         : {marginLeft: '3em'},
                 valueLabelText: 'Animated'
             }, {
@@ -66,7 +65,6 @@ class MainContainer extends Viewport {
                 checked       : true,
                 hideLabel     : true,
                 hideValueLabel: false,
-                listeners     : {change: me.onConfigChange.bind(me, 'modal')},
                 style         : {marginLeft: '1em'},
                 valueLabelText: 'Modal'
             }, '->', {
@@ -82,19 +80,22 @@ class MainContainer extends Viewport {
      * @param {Object} data
      */
     createDialog(data) {
-        let me = this;
+        let me                                       = this,
+            button                                   = data.component,
+            {appName, boundaryContainerId, windowId} = me;
 
-        data.component.disabled = true;
+        button.disabled = true;
 
         me.dialog = Neo.create(DemoDialog, {
             animated               : me.down({valueLabelText: 'Animated'}).checked,
-            appName                : me.appName,
-            boundaryContainerId    : me.boundaryContainerId,
+            appName,
+            boundaryContainerId,
             listeners              : {close: me.onWindowClose, scope: me},
             modal                  : me.down({valueLabelText: 'Modal'}).checked,
             trapFocus              : true,
-            optionalAnimateTargetId: data.component.id,
-            title                  : 'Dialog 1'
+            optionalAnimateTargetId: button.id,
+            title                  : 'Dialog 1',
+            windowId
         })
     }
 
@@ -103,8 +104,13 @@ class MainContainer extends Viewport {
      * @param {Object} opts
      */
     onConfigChange(config, opts) {
-        if (this.dialog) {
-            this.dialog[config] = opts.value ? 'document.body' : null
+        let me                  = this,
+            boundaryContainerId = opts.value ? 'document.body' : null;
+
+        me.boundaryContainerId = boundaryContainerId
+
+        if (me.dialog) {
+            me.dialog[config] = boundaryContainerId
         }
     }
 

package/examples/table/nestedRecordFields/EditUserDialog.mjs

@@ -0,0 +1,137 @@
+import CheckBox     from '../../../src/form/field/CheckBox.mjs';
+import CountryField from '../../../src/form/field/Country.mjs';
+import Dialog       from '../../../src/dialog/Base.mjs';
+import TextField    from '../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.table.nestedRecordFields.EditUserDialog
+ * @extends Neo.dialog.Base
+ */
+class EditUserDialog extends Dialog {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.model.dialog.EditUserDialog'
+         * @protected
+         */
+        className: 'Neo.examples.model.dialog.EditUserDialog',
+        /**
+         * @member {String} closeAction='hide'
+         */
+        closeAction: 'hide',
+        /**
+         * @member {Object} containerConfig={style:{padding:'1em'}}
+         */
+        containerConfig: {
+            style: {
+                padding: '1em'
+            }
+        },
+        /**
+         * @member {Boolean} modal=true
+         */
+        modal: true,
+        /**
+         * @member {Record|null} record_=null
+         */
+        record_: null,
+        /**
+         * @member {String} title='Edit User'
+         */
+        title: 'Edit User',
+        /**
+         * @member {Object} itemDefaults
+         */
+        itemDefaults: {
+            flex      : 'none',
+            labelWidth: 110
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : TextField,
+            labelText: 'Firstname',
+            listeners: {change: 'up.onFirstnameFieldChange'},
+            reference: 'firstname-field'
+        }, {
+            module   : TextField,
+            labelText: 'Lastname',
+            listeners: {change: 'up.onLastnameFieldChange'},
+            reference: 'lastname-field'
+        }, {
+            module    : CountryField,
+            bind      : {store: 'stores.countries'},
+            labelText : 'Country',
+            listeners : {change: 'up.onCountryFieldChange'},
+            reference : 'country-field',
+            valueField: 'code'
+        }, {
+            module   : CheckBox,
+            labelText: 'Selected',
+            listeners: {change: 'up.onSelectedFieldChange'},
+            reference: 'selected-field',
+            style    : {marginTop: '1em'}
+        }]
+    }
+
+    /**
+     * Triggered after the record config got changed
+     * @param {Record|null} value
+     * @param {Record|null} oldValue
+     * @protected
+     */
+    async afterSetRecord(value, oldValue) {
+        if (value) {
+            let me       = this,
+                {record} = me;
+
+            // ensure the store has its data
+            await me.timeout(20);
+
+            me.getItem('country-field')  .value   = record.country;
+            me.getItem('firstname-field').value   = record.user.firstname;
+            me.getItem('lastname-field') .value   = record.user.lastname;
+            me.getItem('selected-field') .checked = record.annotations.selected
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCountryFieldChange(data) {
+        this.record.country = data.value.code
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFirstnameFieldChange(data) {
+        this.record.user.firstname = data.value
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onLastnameFieldChange(data) {
+        this.record.user.lastname = data.value
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onSelectedFieldChange(data) {
+        let me    = this,
+            store = me.getModel().getStore('mainStore');
+
+        if (data.value === false) {
+            me.record.annotations.selected = false
+        } else {
+            // Assuming we want to support a single row selection
+            store.items.forEach(record => {
+                record.annotations.selected = record === me.record ? data.value : false
+            })
+        }
+    }
+}
+
+export default Neo.setupClass(EditUserDialog);

package/examples/table/nestedRecordFields/MainContainer.mjs

@@ -0,0 +1,113 @@
+import Button             from '../../../src/button/Base.mjs';
+import MainContainerModel from './MainContainerModel.mjs';
+import TableContainer     from '../../../src/table/Container.mjs';
+import Viewport           from '../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.table.nestedRecordFields.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.table.nestedRecordFields.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.table.nestedRecordFields.MainContainer',
+        /**
+         * @member {Object|String} layout='fit'
+         */
+        layout: 'fit',
+        /**
+         * @member {Neo.model.Component} model=MainContainerModel
+         */
+        model: MainContainerModel,
+        /**
+         * @member {Object} style={padding:'20px'}
+         */
+        style: {padding: '20px'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module: TableContainer,
+            bind  : {store : 'stores.mainStore'},
+
+            columns: [
+                {dataField: 'user.firstname', text: 'Firstname'},
+                {dataField: 'user.lastname',  text: 'Lastname'},
+                {dataField: 'githubId',       text: 'Github Id'},
+                {dataField: 'country',        text: 'Country',     renderer: 'up.countryRenderer'},
+                {dataField: 'edit',           text: 'Edit Action', renderer: 'up.editRenderer'}
+            ]
+        }]
+    }
+
+    /**
+     * @member {Neo.dialog.Base|null} dialog=null
+     */
+    dialog = null
+
+    /**
+     * @param {Object} data
+     */
+    countryRenderer({record}) {
+        let countryStore = this.getModel().getStore('countries');
+
+        if (countryStore.getCount() > 0) {
+            return countryStore.get(record.country).name
+        }
+
+        return ''
+    }
+
+    /**
+     * @param {Object} data
+     */
+    editButtonHandler(data) {
+        let me                          = this,
+            button                      = data.component,
+            {appName, dialog, windowId} = me,
+            {record}                    = button;
+
+        if (!dialog) {
+            import('./EditUserDialog.mjs').then(module => {
+                me.dialog = Neo.create({
+                    module         : module.default,
+                    animateTargetId: button.id,
+                    appName,
+                    model          : {parent: me.getModel()},
+                    record,
+                    windowId
+                })
+            })
+        } else {
+            dialog.animateTargetId = button.id;
+            dialog.record          = record;
+
+            dialog.show()
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    editRenderer({column, index, record, tableContainer}) {
+        let me                  = this,
+            {appName, windowId} = me,
+            widgetId            = `${column.id}-widget-${index}`,
+            button              = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
+                module  : Button,
+                appName,
+                handler : 'up.editButtonHandler',
+                parentId: tableContainer.id,
+                record,
+                text    : 'Edit',
+                windowId
+            }));
+
+        return button.vdom
+    }
+}
+
+export default Neo.setupClass(MainContainer);

package/examples/table/nestedRecordFields/MainContainerModel.mjs

@@ -0,0 +1,61 @@
+import MainStore from './MainStore.mjs';
+import Model     from '../../../src/model/Component.mjs';
+import Store     from '../../../src/data/Store.mjs';
+
+const countrySymbol = Symbol.for('country');
+
+/**
+ * @class Neo.examples.table.nestedRecordFields.MainContainerModel
+ * @extends Neo.model.Component
+ */
+class MainContainerModel extends Model {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.table.nestedRecordFields.MainContainerModel'
+         * @protected
+         */
+        className: 'Neo.examples.table.nestedRecordFields.MainContainerModel',
+        /**
+         * @member {Object} stores
+         */
+        stores: {
+            countries: {
+                module     : Store,
+                autoLoad   : true,
+                keyProperty: 'code',
+                listeners  : {load: 'onCountryStoreLoad'},
+                url        : '../../../resources/examples/data/countries.json',
+
+                model: {
+                    fields: [
+                        {name: 'code'},
+                        {name: 'name'}
+                    ]},
+            },
+            mainStore: MainStore
+        }
+    }
+
+    /**
+     * @param {Record[]} items
+     */
+    onCountryStoreLoad(items) {
+        let me        = this,
+            mainStore = me.getStore('mainStore'),
+            country;
+
+        // if the main table store is already loaded, the country field renderer had no data
+        if (mainStore.getCount() > 0) {
+            mainStore.items.forEach(record => {
+                country = record.country;
+
+                // hack resetting the current value to get a new record change
+                record[countrySymbol] = null;
+
+                record.country = country
+            })
+        }
+    }
+}
+
+export default Neo.setupClass(MainContainerModel);

package/examples/table/nestedRecordFields/MainModel.mjs

@@ -0,0 +1,41 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Neo.examples.table.nestedRecordFields.MainModel
+ * @extends Neo.data.Model
+ */
+class MainModel extends Model {
+    static config = {
+        className: 'Neo.examples.table.container.MainModel',
+
+        fields: [{
+            name: 'annotations',
+            type: 'Object',
+
+            fields: [{
+                name        : 'annotations.selected',
+                type        : 'Boolean',
+                defaultValue: false
+            }]
+        }, {
+            name: 'country',
+            type: 'String'
+        }, {
+            name: 'githubId',
+            type: 'String'
+        }, {
+            name: 'user',
+            type: 'Object',
+
+            fields: [{
+                name: 'user.firstname',
+                type: 'String'
+            }, {
+                name: 'user.lastname',
+                type: 'String'
+            }]
+        }]
+    }
+}
+
+export default Neo.setupClass(MainModel);

package/examples/table/nestedRecordFields/MainStore.mjs

@@ -0,0 +1,54 @@
+import Model from './MainModel.mjs';
+import Store from '../../../src/data/Store.mjs';
+
+/**
+ * @class Neo.examples.table.nestedRecordFields.MainStore
+ * @extends Neo.data.Store
+ */
+class MainStore extends Store {
+    static config = {
+        className  : 'Neo.examples.table.container.MainStore',
+        keyProperty: 'githubId',
+        model      : Model,
+
+        data: [{
+            country : 'DE',
+            githubId: 'tobiu',
+
+            user: {
+                firstname: 'Tobias',
+                lastname : 'Uhlig'
+            }
+        }, {
+            annotations: {
+                selected: true
+            },
+
+            country : 'US',
+            githubId: 'rwaters',
+
+            user: {
+                firstname: 'Rich',
+                lastname : 'Waters'
+            }
+        }, {
+            country : 'DE',
+            githubId: 'mrsunshine',
+
+            user: {
+                firstname: 'Nils',
+                lastname : 'Dehl'
+            }
+        }, {
+            country : 'US',
+            githubId: 'camtnbikerrwc',
+
+            user: {
+                firstname: 'Gerard',
+                lastname : 'Horan'
+            }
+        }]
+    }
+}
+
+export default Neo.setupClass(MainStore);

package/examples/table/nestedRecordFields/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.table.nestedRecordFields'
+});

package/examples/table/nestedRecordFields/index.html

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

package/examples/table/nestedRecordFields/neo-config.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.8.0",
+    "version": "7.9.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,16 +54,16 @@
         "envinfo": "^7.14.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^11.0.2",
+        "inquirer": "^11.1.0",
         "marked": "^14.1.2",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.47",
-        "sass": "^1.79.3",
+        "sass": "^1.79.4",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
-        "webpack": "^5.94.0",
+        "webpack": "^5.95.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.1.0",
         "webpack-hook-plugin": "^1.0.7",