npm - neo.mjs - Versions diffs - 7.7.0 → 7.9.0 - Mend

neo.mjs 7.7.0 → 7.9.0

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 (58) hide show

package/apps/ServiceWorker.mjs +2 -2
package/apps/portal/index.html +1 -1
package/apps/portal/neo-config.json +1 -0
package/apps/portal/view/ViewportController.mjs +20 -4
package/apps/portal/view/home/FooterContainer.mjs +1 -1
package/apps/portal/view/learn/{ContentView.mjs → ContentComponent.mjs} +98 -38
package/apps/portal/view/learn/CubeLayoutButton.mjs +77 -0
package/apps/portal/view/learn/MainContainerController.mjs +2 -1
package/apps/portal/view/learn/PageContainer.mjs +4 -4
package/apps/shareddialog/view/DemoDialog.mjs +2 -10
package/apps/shareddialog/view/MainContainerController.mjs +107 -105
package/buildScripts/webpack/json/myApps.template.json +1 -1
package/examples/ServiceWorker.mjs +2 -2
package/examples/table/nestedRecordFields/EditUserDialog.mjs +127 -0
package/examples/table/nestedRecordFields/MainContainer.mjs +113 -0
package/examples/table/nestedRecordFields/MainContainerModel.mjs +61 -0
package/examples/table/nestedRecordFields/MainModel.mjs +41 -0
package/examples/table/nestedRecordFields/MainStore.mjs +54 -0
package/examples/table/nestedRecordFields/app.mjs +6 -0
package/examples/table/nestedRecordFields/index.html +11 -0
package/examples/table/nestedRecordFields/neo-config.json +6 -0
package/package.json +4 -4
package/resources/data/deck/learnneo/pages/Welcome.md +1 -1
package/resources/data/deck/learnneo/pages/benefits/FormsEngine.md +1 -1
package/resources/data/deck/learnneo/pages/guides/PortalApp.md +35 -0
package/resources/data/deck/learnneo/tree.json +1 -0
package/resources/scss/src/apps/portal/learn/PageContainer.scss +5 -0
package/src/DefaultConfig.mjs +2 -2
package/src/collection/Base.mjs +4 -3
package/src/container/Base.mjs +12 -7
package/src/data/Model.mjs +0 -7
package/src/data/RecordFactory.mjs +82 -61
package/src/data/Store.mjs +7 -0
package/src/draggable/DragProxyComponent.mjs +10 -20
package/src/form/field/CheckBox.mjs +12 -7
package/src/form/field/ComboBox.mjs +8 -7
package/src/grid/View.mjs +2 -2
package/src/list/Base.mjs +1 -1
package/src/main/addon/Navigator.mjs +34 -32
package/src/main/addon/WindowPosition.mjs +9 -11
package/src/model/Component.mjs +10 -1
package/src/plugin/Resizable.mjs +12 -6
package/src/tab/Container.mjs +5 -1
package/src/table/View.mjs +31 -15
package/src/table/header/Button.mjs +33 -18
package/test/siesta/siesta.js +1 -0
package/test/siesta/tests/ManagerInstance.mjs +35 -0
package/apps/krausest/README.md +0 -3
package/apps/krausest/TableCollection.mjs +0 -46
package/apps/krausest/app.mjs +0 -8
package/apps/krausest/css/currentStyle.css +0 -2
package/apps/krausest/css/main.css +0 -26
package/apps/krausest/index.html +0 -12
package/apps/krausest/neo-config.json +0 -10
package/apps/krausest/view/MainComponent.mjs +0 -122
package/apps/krausest/view/MainComponentController.mjs +0 -33
package/apps/krausest/view/TableComponent.mjs +0 -152
/package/resources/scss/src/apps/portal/learn/{ContentView.scss → ContentComponent.scss} +0 -0

package/examples/table/nestedRecordFields/MainModel.mjs ADDED Viewed

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

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

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

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.7.0",
+    "version": "7.9.0",
     "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": "^10.2.2",
+        "inquirer": "^11.0.2",
         "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.2",
+        "sass": "^1.79.3",
         "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",

package/resources/data/deck/learnneo/pages/Welcome.md CHANGED Viewed

@@ -3,7 +3,7 @@ Welcome to Neo.mjs! This set of topics contains information to help you use Neo.
 ## Topics
-### Why Neo?
+### Benefits
 Describes technical and business reasons for using Neo.mjs

package/resources/data/deck/learnneo/pages/benefits/FormsEngine.md CHANGED Viewed

@@ -1,7 +1,7 @@
 ## Forms include a State-Provider
 You do not need to define a state tree on your own.
-It if sufficient to just use namespaces inside the `name` attribute of each field.
+It is sufficient to just use namespaces inside the `name` attribute of each field.
 <pre data-neo>
 import Button        from '../button/Base.mjs';

package/resources/data/deck/learnneo/pages/guides/PortalApp.md ADDED Viewed

@@ -0,0 +1,35 @@
+## Study the Code
+As you hopefully have noticed by now, this entire multi-window app is created based on Neo.mjs.
+You can learn a lot by studying the code-base carefully:
+<a target="_blank" href="https://github.com/neomjs/neo/tree/dev/apps/portal">Portal App Code</a>
+Please give us a heads-up, in case there are specific topics which you would like to see
+getting covered here.
+## Easter Eggs
+Every good app needs to have some meaningful Easter eggs.
+### Examples: Resort TabHeaderButtons via Drag&Drop
+Did you notice that you can resort the Tabs inside <a href="#/examples">Examples</a>?
+After re-sorting, the routing and the tab.Strip animations will still work. Enjoy!
+### Switch the main navigation layout to an animated Cube
+Fair warning: this animated layout does require some advanced GPU processing power.
+At the moment, it performs best using Firefox.
+The setting will get stored inside the LocalStorage,
+so you will need to click the following Button a 2nd time to deactivate it again.
+Or you can clear the LocalStorage manually.</br></br>
+<pre data-neo-component>
+{
+    "className": "Portal.view.learn.CubeLayoutButton",
+    "style"    : {"margin": 0}
+}
+</pre>

package/resources/data/deck/learnneo/tree.json CHANGED Viewed

@@ -32,6 +32,7 @@
         {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": false, "id": "GuideEvents"},
             {"name": "Custom Events",                       "parentId": "GuideEvents",                        "id": "guides.events.CustomEvents"},
             {"name": "DOM Events",                          "parentId": "GuideEvents",                        "id": "guides.events.DomEvents"},
+        {"name": "Portal App",                              "parentId": "InDepth",                            "id": "guides.PortalApp"},
         {"name": "Tables (Stores)",                         "parentId": "InDepth",                            "id": "guides.Tables", "hidden": true},
         {"name": "Multi-Window Applications",               "parentId": "InDepth",                            "id": "guides.MultiWindow", "hidden":  true},
         {"name": "Main Thread Addons",                      "parentId": "InDepth",           "isLeaf": false, "id": "MainThreadAddons", "hidden": true},

package/resources/scss/src/apps/portal/learn/PageContainer.scss CHANGED Viewed

@@ -14,6 +14,11 @@
             padding      : 0 1rem;
         }
+        @media (min-width: 1297px) {
+            padding: 0 0 0 3rem;
+        }
         .neo-button {
             flex           : 1 !important;
             height         : 75px;

package/src/DefaultConfig.mjs CHANGED Viewed

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

package/src/collection/Base.mjs CHANGED Viewed

@@ -990,12 +990,13 @@ class Base extends CoreBase {
     }
     /**
-     * Helper method to check if a given value is either an object or a neo data record
+     * Helper method to check if a given input is either object-like or a key
      * @param {*} value
-     * @returns {Boolean}
+     * @returns {Boolean} returns true for object-like values
      */
     isItem(value) {
-        return Neo.isObject(value) || Neo.isRecord(value)
+        // We can not use Neo.isObject() || Neo.isRecord(), since collections can store neo instances too.
+        return typeof value === 'object'
     }
     /**

package/src/container/Base.mjs CHANGED Viewed

@@ -87,7 +87,10 @@ class Base extends Component {
          */
         items_: [],
         /**
-         * @member {Object} layout_={ntype: 'vbox', align: 'stretch'}
+         * It is crucial to define a layout before the container does get rendered.
+         * Meaning: onConstructed() is the latest life-cycle point.
+         * You can use layout: 'base', in case you do not need a layout at all.
+         * @member {Object|String|null} layout_={ntype: 'vbox', align: 'stretch'}
          */
         layout_: {
             ntype: 'vbox',
@@ -135,7 +138,7 @@ class Base extends Component {
     }
     /**
-     * @param {Neo.layout.Base} value
+     * @param {Neo.layout.Base|null} value
      * @param {Neo.layout.Base|null} oldValue
      * @protected
      */
@@ -144,15 +147,15 @@ class Base extends Component {
         if (me.rendered) {
             oldValue?.removeRenderAttributes();
-            value.applyRenderAttributes();
+            value?.applyRenderAttributes();
             me.items.forEach((item, index) => {
                 oldValue?.removeChildAttributes(item, index);
-                value.applyChildAttributes(item, index)
-            });
-            oldValue?.destroy()
+                value?.applyChildAttributes(item, index)
+            })
         }
+        oldValue?.destroy?.()
     }
     /**
@@ -419,6 +422,8 @@ class Base extends Component {
      * @param {Boolean} [silent=false] true to update the vdom silently (useful for destroying multiple child items in a row)
      */
     destroy(updateParentVdom=false, silent=false) {
+        this.layout?.destroy();
         this.items?.forEach(item => {
             item.destroy?.(false, true)
         });

package/src/data/Model.mjs CHANGED Viewed

@@ -38,13 +38,6 @@ class Model extends Base {
         trackModifiedFields: false
     }
-    /**
-     * A property set in all data records so that they are easily identifiable.
-     * @property {Boolean} isRecord=true
-     * @readonly
-     */
-    isRecord = true
     /**
      * Finds a field config by a given field name
      * @param {String} name

package/src/data/RecordFactory.mjs CHANGED Viewed

@@ -16,11 +16,6 @@ class RecordFactory extends Base {
          * @protected
          */
         className: 'Neo.data.RecordFactory',
-        /**
-         * @member {Boolean} singleton=true
-         * @protected
-         */
-        singleton: true,
         /**
          * The internal record prefix for original field values.
          * Only used in case the model has trackModifiedFields set to true.
@@ -30,7 +25,84 @@ class RecordFactory extends Base {
         /**
          * @member {String} recordNamespace='Neo.data.record'
          */
-        recordNamespace: 'Neo.data.record'
+        recordNamespace: 'Neo.data.record',
+        /**
+         * @member {Boolean} singleton=true
+         * @protected
+         */
+        singleton: true
+    }
+    /**
+     * @param {Object} data
+     * @param {Object} data.config
+     * @param {Object} data.field
+     * @param {Neo.data.RecordFactory} data.me
+     * @param {Neo.data.Model} data.model
+     * @param {String} data.path=''
+     */
+    createField({config, field, me, model, path=''}) {
+        let value     = Neo.ns(field.mapping || field.name, false, config),
+            fieldName = field.name.split('.').pop(),
+            symbol    = Symbol.for(fieldName),
+            fieldPath, parsedValue, properties;
+        if (field.fields) {
+            field.fields.forEach(childField => {
+                fieldPath = path.split('.');
+                fieldPath = fieldPath.filter(Boolean);
+                fieldPath.push(field.name);
+                this.createField({config, field: childField, me, model, path: fieldPath.join('.')})
+            })
+        } else {
+            if (value === undefined && Object.hasOwn(field, 'defaultValue')) {
+                value = field.defaultValue
+            }
+            parsedValue = instance.parseRecordValue(me, field, value, config);
+            properties = {
+                [symbol]: {
+                    value   : Neo.clone(parsedValue, true),
+                    writable: true
+                },
+                [fieldName]: {
+                    configurable: true,
+                    enumerable  : true,
+                    get() {
+                        return this[symbol]
+                    },
+                    set(value) {
+                        let oldValue = this[symbol];
+                        value = instance.parseRecordValue(me, field, value);
+                        if (!Neo.isEqual(value, oldValue)) {
+                            this[symbol] = value;
+                            me._isModified = true;
+                            me._isModified = instance.isModified(me, model.trackModifiedFields);
+                            instance.onRecordChange({
+                                fields: [{name: field.name, oldValue, value}],
+                                model,
+                                record: me
+                            })
+                        }
+                    }
+                }
+            };
+            // adding the original value of each field
+            if (model.trackModifiedFields) {
+                properties[instance.ovPrefix + field.name] = {
+                    value: parsedValue
+                }
+            }
+            Object.defineProperties(path ? Neo.ns(path, true, me) : me, properties)
+        }
     }
     /**
@@ -67,8 +139,7 @@ class RecordFactory extends Base {
                     static name = 'Record'
                     constructor(config) {
-                        let me = this,
-                            properties;
+                        let me = this;
                         Object.defineProperties(me, {
                             _isModified: {
@@ -79,57 +150,7 @@ class RecordFactory extends Base {
                         if (Array.isArray(model.fields)) {
                             model.fields.forEach(field => {
-                                let value  = config[field.mapping || field.name],
-                                    symbol = Symbol.for(field.name),
-                                    parsedValue;
-                                if (!Object.hasOwn(config, field.name) && Object.hasOwn(field, 'defaultValue')) {
-                                    value = field.defaultValue
-                                }
-                                parsedValue = instance.parseRecordValue(me, field, value, config);
-                                properties = {
-                                    [symbol]: {
-                                        value   : parsedValue,
-                                        writable: true
-                                    },
-                                    [field.name]: {
-                                        configurable: true,
-                                        enumerable  : true,
-                                        get() {
-                                            return this[symbol]
-                                        },
-                                        set(value) {
-                                            let me       = this,
-                                                oldValue = me[symbol];
-                                            value = instance.parseRecordValue(me, field, value);
-                                            if (!Neo.isEqual(value, oldValue)) {
-                                                me[symbol] = value;
-                                                me._isModified = true;
-                                                me._isModified = instance.isModified(me, model.trackModifiedFields);
-                                                instance.onRecordChange({
-                                                    fields: [{name: field.name, oldValue, value}],
-                                                    model,
-                                                    record: me
-                                                })
-                                            }
-                                        }
-                                    }
-                                };
-                                // adding the original value of each field
-                                if (model.trackModifiedFields) {
-                                    properties[instance.ovPrefix + field.name] = {
-                                        value: parsedValue
-                                    }
-                                }
-                                Object.defineProperties(me, properties)
+                                instance.createField({config, field, me, model})
                             })
                         }
                     }
@@ -151,8 +172,8 @@ class RecordFactory extends Base {
                     }
                 };
-                Object.defineProperty(cls.prototype, 'isRecord', { value : true });
-                Object.defineProperty(cls, 'isClass', { vale : true });
+                Object.defineProperty(cls.prototype, 'isRecord', {value: true});
+                Object.defineProperty(cls, 'isClass', {value: true});
                 return ns[key]
             }

package/src/data/Store.mjs CHANGED Viewed

@@ -309,6 +309,13 @@ class Store extends Base {
         RecordFactory.createRecord(config)
     }
+    /**
+     * @returns {String}
+     */
+    getKeyProperty() {
+        return this.keyProperty || this.model.keyProperty
+    }
     /**
      * @param {Object} opts={}
      * @param {Object} opts.data

package/src/draggable/DragProxyComponent.mjs CHANGED Viewed

@@ -25,9 +25,9 @@ class DragProxyComponent extends Base {
          */
         autoRender: true,
         /**
-         * @member {String[]} cls=['neo-dragproxy']
+         * @member {String[]} baseCls=['neo-dragproxy']
          */
-        cls: ['neo-dragproxy'],
+        baseCls: ['neo-dragproxy'],
         /**
          * @member {Boolean} moveInMainThread=true
          */
@@ -35,28 +35,18 @@ class DragProxyComponent extends Base {
     }
     /**
-     * @param {Object} config
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
      */
-    construct(config) {
-        super.construct(config);
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
-        let me = this;
-        me.on('mounted', me.onMounted, me)
-    }
-    /**
-     * @param {String} id
-     */
-    onMounted(id) {
-        if (this.moveInMainThread) {
+        if (value && this.moveInMainThread) {
             let {appName, id, windowId} = this;
-            Neo.main.addon.DragDrop.setDragProxyElement({
-                appName,
-                id,
-                windowId
-            })
+            Neo.main.addon.DragDrop.setDragProxyElement({appName, id, windowId})
         }
     }
 }

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

@@ -456,14 +456,19 @@ class CheckBox extends Base {
      */
     getGroupValue() {
         let form   = this.getClosestForm(),
-            fields = ComponentManager.find({path: this.getPath()}),
-            value  = [];
+            path   = this.getPath(),
+            value  = [],
+            fields;
-        fields.forEach(field => {
-            if (field.checked && field.getClosestForm() === form) {
-                NeoArray.add(value, field.value)
-            }
-        });
+        if (path) {
+            fields = ComponentManager.find({path});
+            fields.forEach(field => {
+                if (field.checked && field.getClosestForm() === form) {
+                    NeoArray.add(value, field.value)
+                }
+            })
+        }
         return value
     }

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

@@ -346,6 +346,7 @@ class ComboBox extends Picker {
             role          : 'listbox',
             selectionModel: {stayInList: false},
             store         : me.store,
+            windowId      : me.windowId,
             ...me.listConfig
         });
@@ -580,18 +581,18 @@ class ComboBox extends Picker {
     }
     /**
-     * @param {Object} record
+     * @param {Object} data
      * @protected
      */
-    onListItemNavigate(record) {
-        let {activeIndex} = record;
+    onListItemNavigate(data) {
+        let {activeIndex} = data;
         if (activeIndex >= 0) {
             let me      = this,
                 {store} = me;
-            me.activeRecord   = store.getAt(activeIndex);
-            me.activeRecordId = me.activeRecord[store.keyProperty || model.keyProperty];
+            me.activeRecord   = data.record || store.getAt(activeIndex);
+            me.activeRecordId = me.activeRecord[store.getKeyProperty()];
             // Update typeahead hint (which updates DOM), or update DOM
             me.typeAhead ? me.updateTypeAheadValue(me.lastManualInput) : me.update()
@@ -737,7 +738,7 @@ class ComboBox extends Picker {
                 if (match && inputHintEl) {
                     inputHintEl.value = value + match[displayField].substr(value.length);
                     me.activeRecord   = match;
-                    me.activeRecordId = match[store.keyProperty || store.model.keyProperty]
+                    me.activeRecordId = match[store.getKeyProperty()]
                 }
             }
@@ -771,7 +772,7 @@ class ComboBox extends Picker {
  * The select event fires when a list item gets selected
  * @event select
  * @param {Object} record
- * @param {value} record[store.keyProperty]
+ * @param {value} record[store.getKeyProperty()]
  * @returns {Object}
  */

package/src/grid/View.mjs CHANGED Viewed

@@ -95,9 +95,9 @@ class View extends Component {
             for (; j < colCount; j++) {
                 column         = columns[j];
-                rendererValue  = record[column.field];
+                rendererValue  = Neo.ns(column.field, false, record);
-                if (rendererValue === undefined) {
+                if (rendererValue === null || rendererValue === undefined) {
                     rendererValue = ''
                 }

package/src/list/Base.mjs CHANGED Viewed

@@ -689,7 +689,7 @@ class Base extends Component {
     getItemRecordId(vnodeId) {
         let itemId   = vnodeId.split('__')[1],
             {model}  = this.store,
-            keyField = model?.getField(model.keyProperty),
+            keyField = model?.getField(this.getKeyProperty()),
             keyType  = keyField?.type?.toLowerCase();
         if (keyType === 'int' || keyType === 'integer') {