neo.mjs 7.9.0 → 7.10.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-09-27",
+      "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.9.0'
+                html  : 'v7.10.0'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

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

@@ -50,7 +50,7 @@ class MainContainer extends Viewport {
                 checked       : true,
                 hideLabel     : true,
                 hideValueLabel: false,
-                listeners     : {change: me.onConfigChange.bind(me, 'boundaryContainerId')},
+                listeners     : {change: me.onBoundaryContainerIdChange.bind(me)},
                 style         : {marginLeft: '3em'},
                 valueLabelText: 'Limit Drag&Drop to the document.body'
             }, {
@@ -82,29 +82,47 @@ 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
         })
     }
 
+    /**
+     * @param {Object} opts
+     */
+    onBoundaryContainerIdChange(opts) {
+        let me                  = this,
+            {dialog}            = me,
+            boundaryContainerId = opts.value ? 'document.body' : null;
+
+        me.boundaryContainerId = boundaryContainerId
+
+        if (dialog) {
+            dialog.boundaryContainerId = boundaryContainerId
+        }
+    }
+
     /**
      * @param {String} config
      * @param {Object} opts
      */
     onConfigChange(config, opts) {
         if (this.dialog) {
-            this.dialog[config] = opts.value ? 'document.body' : null
+            this.dialog[config] = opts.value
         }
     }
 

package/examples/table/nestedRecordFields/EditUserDialog.mjs

@@ -120,7 +120,17 @@ class EditUserDialog extends Dialog {
      * @param {Object} data
      */
     onSelectedFieldChange(data) {
-        this.record.annotations.selected = data.value
+        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
+            })
+        }
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.9.0",
+    "version": "7.10.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -54,13 +54,13 @@
         "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.95.0",

package/resources/data/deck/learnneo/pages/tutorials/Earthquakes.md

@@ -523,16 +523,16 @@ class MainView extends Base {
                 module: Store,
                 model: {
                     fields: [{
-                        name: "humanReadableLocation",
+                        name: "location",
                     }, {
-                        name: "size",
+                        name: "magnitude",
                     }, {
                         name: "timestamp",
                         type: "Date",
                     }],
                 },
                 url: "https://nameless-tundra-27404.herokuapp.com/go/?fn=earthquakes",
-                responseRoot: "results",
+                responseRoot: "data",
                 autoLoad: true,
             },
             style: {width: '100%'},
@@ -543,10 +543,10 @@ class MainView extends Base {
                     {weekday: "long", year: "numeric", month: "long", day: "numeric"}
                 )
             }, {
-                dataField: "humanReadableLocation",
+                dataField: "location",
                 text: "Location"
             }, {
-                dataField: "size",
+                dataField: "magnitude",
                 text: "Magnitude",
                 align: "right",
                 renderer: (data) => data.value.toLocaleString()
@@ -595,36 +595,38 @@ Here's the config for the store.
     module: Store,
     model: {
         fields: [{
-            name: "humanReadableLocation",
+            name: "location",
         }, {
-            name: "size",
+            name: "magnitude",
         }, {
             name: "timestamp",
             type: "Date",
         }],
     },
     url: "https://nameless-tundra-27404.herokuapp.com/go/?fn=earthquakes",
-    responseRoot: "results",
+    responseRoot: "data",
     autoLoad: true,
 }
 </pre>
 
-The feed looks like this. (For simplicity, some values are omitted.)
+The feed looks like this.
 <pre data-javascript>
 {
-    "results": [{
-        "timestamp": "2017-10-13T12:07:24.000Z",
-        "latitude": 63.976,
-        "longitude": -21.949,
-        "size": 0.6,
-        "humanReadableLocation": "6,1 km SV af Helgafelli"
+  "data": [{
+      "timestamp": "2024-09-29T16:45:14.000Z",
+      "lat": "64.012",
+      "lng": "-16.659",
+      "location": "1.2 km ESE  of Hvannadalshnjúkur",
+      "magnitude": "0.32964",
+      "depth": "1.2"
     }, {
-        "timestamp": "2017-10-13T09:50:50.000Z",
-        "latitude": 65.124,
-        "longitude": -16.288,
-        "size": 0.9,
-        "humanReadableLocation": "6,1 km NA af Her\u00F0ubrei\u00F0art\u00F6glum"
-    }, //...
+      "timestamp": "2024-09-29T16:16:25.000Z",
+      "lat": "63.929",
+      "lng": "-21.447",
+      "location": "2.8 km WSW of Raufarhólshellir",
+      "magnitude": "0.80979",
+      "depth": "10.2"
+    }, ... 
     ]
 }
 </pre>
@@ -644,10 +646,10 @@ columns: [{
     text: "Date",
     renderer: (data) => data.value.toLocaleDateString(undefined, {weekday: "long", year: "numeric", month: "long", day: "numeric"}),
 }, {
-    dataField: "humanReadableLocation",
+    dataField: "location",
     text: "Location",
 }, {
-    dataField: "size",
+    dataField: "magnitude",
     text: "Magnitude",
     align: "right",
     renderer: (data) => data.value.toLocaleString(),
@@ -692,10 +694,10 @@ class Table extends Base {
             text: "Date",
             renderer: (data) => data.value.toLocaleDateString(undefined, {weekday: "long", year: "numeric", month: "long", day: "numeric"}),
         }, {
-            dataField: "humanReadableLocation",
+            dataField: "location",
             text: "Location",
         }, {
-            dataField: "size",
+            dataField: "magnitude",
             text: "Magnitude",
             align: "right",
             renderer: (data) => data.value.toLocaleString(),
@@ -765,16 +767,16 @@ static config = {
                 module: Store,
                 model: {
                     fields: [{
-                        name: "humanReadableLocation",
+                        name: "location",
                     }, {
-                        name: "size",
+                        name: "magnitude",
                     }, {
                         name: "timestamp",
                         type: "Date",
                     }],
                 },
                 url: "https://nameless-tundra-27404.herokuapp.com/go/?fn=earthquakes",
-                responseRoot: "results",
+                responseRoot: "data",
                 autoLoad: true,
             },
             style: {width: '100%'},
@@ -888,16 +890,16 @@ class MainView extends Base {
                     module: Store,
                     model: {
                         fields: [{
-                            name: "humanReadableLocation"
+                            name: "location"
                         }, {
-                            name: "size"
+                            name: "magnitude"
                         }, {
                             name: "timestamp",
                             type: "Date"
                         }]
                     },
                     url: "https://nameless-tundra-27404.herokuapp.com/go/?fn=earthquakes",
-                    responseRoot: "results",
+                    responseRoot: "data",
                     autoLoad: true
                 },    
             }
@@ -912,16 +914,16 @@ class MainView extends Base {
                 module: Store,
                 model: {
                     fields: [{
-                        name: "humanReadableLocation"
+                        name: "location"
                     }, {
-                        name: "size"
+                        name: "magnitude"
                     }, {
                         name: "timestamp",
                         type: "Date"
                     }]
                 },
                 url: "https://nameless-tundra-27404.herokuapp.com/go/?fn=earthquakes",
-                responseRoot: "results",
+                responseRoot: "data",
                 autoLoad: true
             },
             style: {width: '100%'}
@@ -931,16 +933,16 @@ class MainView extends Base {
                 module: Store,
                 model: {
                     fields: [{
-                        name: "humanReadableLocation"
+                        name: "location"
                     }, {
-                        name: "size"
+                        name: "magnitude"
                     }, {
                         name: "timestamp",
                         type: "Date"
                     }]
                 },
                 url: "https://nameless-tundra-27404.herokuapp.com/go/?fn=earthquakes",
-                responseRoot: "results",
+                responseRoot: "data",
                 autoLoad: true
             },
             style: {width: '100%'}
@@ -1004,16 +1006,16 @@ class MainView extends Base {
                     module: Store,
                     model: {
                         fields: [{
-                            name: "humanReadableLocation"
+                            name: "location"
                         }, {
-                            name: "size"
+                            name: "magnitude"
                         }, {
                             name: "timestamp",
                             type: "Date"
                         }]
                     },
                     url: "https://nameless-tundra-27404.herokuapp.com/go/?fn=earthquakes",
-                    responseRoot: "results",
+                    responseRoot: "data",
                     autoLoad: true
                 },    
             }
@@ -1084,16 +1086,16 @@ class MainViewModel extends Model {
                 module: Store,
                 model: {
                     fields: [{
-                        name: "humanReadableLocation"
+                        name: "location"
                     }, {
-                        name: "size"
+                        name: "magnitude"
                     }, {
                         name: "timestamp",
                         type: "Date"
                     }]
                 },
                 url: "https://nameless-tundra-27404.herokuapp.com/go/?fn=earthquakes",
-                responseRoot: "results",
+                responseRoot: "data",
                 autoLoad: true
             },    
         }
@@ -1247,22 +1249,22 @@ Edit `apps/earthquakes/view/MainViewModel.mjs` and modify `fields` as follows.
 
 <pre data-javascript>
 fields: [{
-    name: "humanReadableLocation",
+    name: "location",
 }, {
-    name: "size",
+    name: "magnitude",
 }, {
     name: "timestamp",
     type: "Date",
 }, {
     name: 'title',
-    mapping: "humanReadableLocation"
+    mapping: "location"
 }, {
     name: "position",
     calculate: (data, field, item)=>({lat: item.latitude, lng: item.longitude})
 }],
 </pre>
 
-As you can see, _title_ is mapped to the existing feed value _humanReadableLocation_, and _position_ is 
+As you can see, _title_ is mapped to the existing feed value _location_, and _position_ is 
 calculated by returning an object with _lat_ and _lng_ set to the corresponding values from the feed.
 
 Save and refresh _earthquakes_. You can use the debugger to inspect the store via _Shift-Ctrl-right-click_ and
@@ -1391,9 +1393,9 @@ Add this table config:
 
 Save and refresh, then click on a table row. If you look at the debugger console you'll see the record being logged.
 
-Just for fun, expand the logged value and look for the size property. If you recall, that's a value from the feed, and one of the things we configured in the store's fields:[].
+Just for fun, expand the logged value and look for the `magnitude` property. If you recall, that's a value from the feed, and one of the things we configured in the store's fields:[].
 
-In the console, click on the ellipses by size and enter a new value, like 2.5. (Don't enter a larger value, or you may destroy that part of Iceland.)
+In the console, click on the ellipses by `magnitude` and enter a new value, like 2.5. (Don't enter a larger value, or you may destroy that part of Iceland.)
 
 <img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/LogTableClick.png"></img>
 

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -92,17 +92,13 @@ Neo = globalThis.Neo = Object.assign({
      * @param {Neo.core.Base} cls
      */
     applyToGlobalNs(cls) {
-        let proto = typeof cls === 'function' ? cls.prototype: cls,
-            className, nsArray, key, ns;
+        let proto     = typeof cls === 'function' ? cls.prototype : cls,
+            className = proto.isClass ? proto.config.className : proto.className,
+            nsArray   = className.split('.'),
+            key       = nsArray.pop(),
+            ns        = Neo.ns(nsArray, true);
 
-        if (proto.constructor.registerToGlobalNs === true) {
-            className = proto.isClass ? proto.config.className : proto.className;
-
-            nsArray = className.split('.');
-            key     = nsArray.pop();
-            ns      = Neo.ns(nsArray, true);
-            ns[key] = cls
-        }
+        ns[key] = cls
     },
 
     /**
@@ -571,8 +567,7 @@ const ignoreMixin = [
     'isClass',
     'mixin',
     'ntype',
-    'observable',
-    'registerToGlobalNs'
+    'observable'
 ],
 
     charsRegex         = /\d+/g,

package/src/controller/Application.mjs

@@ -1,6 +1,5 @@
 import Base            from './Base.mjs';
 import ClassSystemUtil from '../util/ClassSystem.mjs';
-import Logger          from '../util/Logger.mjs';
 
 /**
  * @class Neo.controller.Application
@@ -101,8 +100,6 @@ class Application extends Base {
             // short delay to ensure changes from onHashChange() got applied
             await me.timeout(Neo.config.hash ? 200 : 10);
 
-            Logger.addContextMenuListener(me.mainView);
-
             await value.render(true)
         }
     }

package/src/core/Base.mjs

@@ -52,14 +52,6 @@ class Base {
      * @static
      */
     static overwrittenMethods = {}
-    /**
-     * Set this one to false in case you don't want to stick
-     * to the "anti-pattern" to apply classes to the global Neo or App namespace
-     * @member {Boolean} registerToGlobalNs=true
-     * @protected
-     * @static
-     */
-    static registerToGlobalNs = true
     /**
      * Configs will get merged throughout the class hierarchy
      * @returns {Object} config

package/src/core/IdGenerator.mjs

@@ -5,15 +5,6 @@
  * @singleton
  */
 class IdGenerator {
-    /**
-     * Set this one to false in case you don't want to stick
-     * to the "anti-pattern" to apply classes to the global Neo or App namespace
-     * @member {Boolean} registerToGlobalNs=true
-     * @protected
-     * @static
-     */
-    static registerToGlobalNs = true
-
     static config = {
         /**
          * @member {String} className='Neo.core.IdGenerator'

package/src/dialog/Base.mjs

@@ -274,7 +274,7 @@ class Base extends Panel {
         super.afterSetMounted(value, oldValue);
 
         // Ensure focus trapping is up-to-date, enabled or disabled.
-        this.syncTrapFocus()
+        oldValue !== undefined && this.syncTrapFocus()
     }
 
     /**
@@ -730,6 +730,30 @@ class Base extends Panel {
         this.hidden = true
     }
 
+    /**
+     * @param {Boolean} [mount] Mount the DOM after the vnode got created
+     */
+    async render(mount) {
+        let me             = this,
+            {wrapperStyle} = me;
+
+        // If there is no animation target, we need to ensure that the initial offscreen positioning
+        // from .neo-floating gets reverted
+        if (!me.animateTargetId) {
+            if (!wrapperStyle.left) {
+                wrapperStyle.left = 'initial'
+            }
+
+            if (!wrapperStyle.top) {
+                wrapperStyle.top = 'initial'
+            }
+
+            me.wrapperStyle = wrapperStyle
+        }
+
+        await super.render(mount)
+    }
+
     /**
      * @param {Boolean} animate=!!this.animateTargetId
      */
@@ -739,7 +763,7 @@ class Base extends Panel {
         if (animate) {
             me.animateShow()
         } else {
-            if (!me.rendered) {
+            if (!me.mounted) {
                 me.render(true)
             }
 

package/src/manager/DomEvent.mjs

@@ -172,7 +172,9 @@ class DomEvent extends Base {
             }
         }
 
-        if (eventName.startsWith('drop')) {
+        if (eventName === 'contextmenu' && data.ctrlKey) {
+            Neo.util?.Logger?.onContextMenu(data)
+        } else if (eventName.startsWith('drop')) {
             let dragZone = data.dragZoneId && Neo.get(data.dragZoneId);
 
             if (dragZone) {

package/src/util/Logger.mjs

@@ -77,17 +77,6 @@ class Logger extends Base {
         })
     }
 
-    /**
-     * Ctrl-Right-Click will show the current component
-     * @param {Neo.component.Base} view
-     */
-    addContextMenuListener(view) {
-        view.addDomListeners({
-            contextmenu: this.onContextMenu,
-            scope      : this
-        })
-    }
-
     /**
      * Set level to number based on position in logLevels
      * @param {String} value
@@ -169,11 +158,7 @@ class Logger extends Base {
     onContextMenu(data) {
         let {config} = Neo;
 
-        if (
-            data.ctrlKey
-            && config.enableComponentLogger
-            && !(config.env === 'dist/production' && config.enableLogsInProduction)
-        ) {
+        if (config.enableComponentLogger && !(config.env === 'dist/production' && config.enableLogsInProduction)) {
             let isGroupSet = false,
                 component;