neo.mjs 6.15.4 → 6.15.6

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

@@ -1,4 +1,5 @@
 {"data": [
+    {"name":  "Welcome!",                                   "parentId": null,                "isLeaf":  true, "id": "Welcome" },
     {"name": "Why Neo.mjs?",                                "parentId": null,                "isLeaf": false, "id": "WhyNeo"},
         {"name": "Introduction ",                           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Intro"},
         {"name": "Multi-Threaded",                          "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Multi-Threaded"},
@@ -6,7 +7,7 @@
         {"name": "Quick Application Development",           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Quick"},
         {"name": "Multi-Window Applications",               "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Multi-Window"},
         {"name": "Complexity and Effort",                   "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Effort"},
-    {"name": "Getting Started",                             "parentId": null,                "isLeaf": false, "id": "GettingStarted"},
+    {"name": "Getting Started",                             "parentId": null,                "isLeaf": false, "id": "GettingStarted", "collapsed":  true},
         {"name": "Setup",                                   "parentId": "GettingStarted",    "isLeaf": true,  "id": "Setup", "hidden":  false},
         {"name": "Workspaces and Applications",             "parentId": "GettingStarted",    "isLeaf": true,  "id": "2023-10-14T19-25-08-153Z"},
         {"name": "Describing a View",                       "parentId": "GettingStarted",    "isLeaf": true,  "id": "DescribingTheUI"},
@@ -15,11 +16,11 @@
         {"name": "Extending Classes",                       "parentId": "GettingStarted",    "isLeaf": true,  "id": "Extending"},
         {"name": "Config",                                  "parentId": "GettingStarted",    "isLeaf": true,  "id": "Config"},
         {"name": "Shared Bindable Data",                    "parentId": "GettingStarted",    "isLeaf": true,  "id": "ComponentModels"},
-    {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "expanded": false, "id": "Tutorials"},
+    {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "expanded": false, "id": "Tutorials",  "collapsed":  true},
         {"name": "Rock Scissors Paper",                     "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "RSP", "hidden":  true},
         {"name": "Earthquakes",                             "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "Earthquakes"},
         {"name": "Todo List",                               "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "TodoList"},
-    {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth"},
+    {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth",  "collapsed":  true},
         {"name": "Config",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Config"},
         {"name": "Instance Lifecycle",                      "parentId": "InDepth",           "isLeaf": false, "id": "InstanceLifecycle"},
         {"name": "User Input (Forms)",                      "parentId": "InDepth",           "isLeaf": false, "id": "Forms"},
@@ -40,7 +41,7 @@
         {"name": "Other JavaScript Class Features",         "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T20-20-37-336Z"},
         {"name": "Super",                                   "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-08T21-58-25-809Z"},
         {"name": "New Node",                                "parentId": "JavaScriptClasses", "isLeaf": true,  "id": "2023-10-31T13-59-37-550Z"},
-    {"name": "Appendix",                                    "parentId": null,                                 "id": "appendix"},
+    {"name": "Appendix",                                    "parentId": null,                                 "id": "appendix",  "collapsed":  true},
         {"name": "Stylesheet",                              "parentId": "appendix",          "isLeaf": true,  "id": "stylesheet"},
         {"name": "Test",                                    "parentId": "appendix",          "isLeaf": true,  "id": "TestLivePreview"}
 ]}

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

@@ -2,9 +2,10 @@
     overflow: auto;
 
     .content-bottom-toolbar {
-        gap    : 8px;
-        padding: 0 3rem;
-        margin-top: 100px;
+        gap          : 8px;
+        padding      : 0 3rem;
+        margin-bottom: 3rem;
+        margin-top   : 3rem;
 
         .neo-button {
             flex           : 1 !important;

package/resources/scss/src/date/SelectorContainer.scss

@@ -0,0 +1,120 @@
+.neo-dateselector.neo-container {
+    background-color: var(--dateselector-background-color);
+    color           : var(--dateselector-color);
+    font-size       : 16px; // todo: em-based once table headers are em based
+    font-weight     : 400;
+    user-select     : none;
+
+    &.neo-hide-inner-borders {
+        .neo-day-view {
+            .neo-row {
+                border: none !important;
+
+                .neo-cell {
+                    border: none !important;
+                }
+            }
+        }
+    }
+
+    .neo-header-toolbar {
+        background-color: var(--dateselector-header-background-color);
+        border          : 1px solid var(--dateselector-border-color);
+        border-bottom   : var(--dateselector-header-border-bottom);
+        min-height      : 30px;
+    }
+
+    .neo-day-view {
+        border        : 1px solid var(--dateselector-border-color);
+        border-top    : var(--dateselector-content-border-top);
+        display       : flex;
+        flex          : 1;
+        flex-direction: column;
+        font-size     : 12px;
+
+        .neo-row {
+            border-bottom: 1px solid var(--dateselector-border-color);
+            display      : flex;
+            flex         : 1;
+
+            &.neo-header-row {
+                border-bottom: var(--dateselector-header-cell-border-bottom) !important;
+                flex         : none;
+                height       : 30px;
+
+                .neo-cell {
+                    background-color: var(--dateselector-header-cell-background-color);
+                    color           : var(--dateselector-header-cell-color);
+                    cursor          : default;
+                    pointer-events  : none;
+                }
+            }
+
+            &:last-child {
+                border-bottom: 0;
+            }
+
+            .neo-cell {
+                align-items     : center;
+                background-color: var(--dateselector-cell-background-color);
+                border-right    : 1px solid var(--dateselector-border-color);
+                color           : var(--dateselector-cell-color);
+                cursor          : pointer;
+                display         : flex;
+                flex            : 1;
+                padding         : 2px;
+                justify-content : center;
+
+                &:focus {
+                    outline: 0;
+                }
+
+                &:last-child {
+                    border-right: 0;
+                }
+
+                &.neo-disabled {
+                    background-color: var(--dateselector-cell-background-color-disabled);
+                    color           : var(--dateselector-cell-color-disabled);
+                    opacity         : var(--dateselector-cell-opacity-disabled);
+                }
+
+                &.neo-disabled {
+                    cursor        : default;
+                    pointer-events: none;
+                }
+
+                &.neo-selected {
+                    .neo-cell-content {
+                        background-color: var(--dateselector-cell-today-border-color);
+                        border          : 1px solid var(--dateselector-header-cell-background-color);
+                        border-radius   : 50%;
+                        color           : var(--dateselector-cell-color-selected);
+
+                        &:before {
+                            content    : '';
+                            display    : inline-block;
+                            padding-top: 100%;
+                        }
+                    }
+                }
+
+                .neo-cell-content {
+                    align-items    : center;
+                    display        : flex;
+                    flex-basis     : 0.1px;
+                    flex-grow      : 0.2;
+                    justify-content: center;
+                    min-height     : 22px;
+                    min-width      : 22px;
+                    pointer-events : none;
+
+                    &.neo-today {
+                        border       : 1px solid var(--dateselector-cell-today-border-color);
+                        border-radius: 50%;
+                    }
+                }
+            }
+        }
+    }
+}

package/resources/scss/theme-dark/date/SelectorContainer.scss

@@ -0,0 +1,24 @@
+:root .neo-theme-dark { // .neo-dateselector
+    --dateselector-background-color              : #323232;
+    --dateselector-border-color                  : #3c3f41;
+    --dateselector-cell-background-color         : #323232;
+    --dateselector-cell-background-color-disabled: #323232;
+    --dateselector-cell-color                    : #bbb;
+    --dateselector-cell-color-disabled           : #555;
+    --dateselector-cell-color-selected           : #fff;
+    --dateselector-cell-opacity-disabled         : 1;
+    --dateselector-cell-today-border-color       : #5d83a7;
+    --dateselector-color                         : #bbb;
+    --dateselector-content-border-top            : none;
+    --dateselector-header-background-color       : #323232;
+    --dateselector-header-border-bottom          : none;
+    --dateselector-header-cell-background-color  : #33343d;
+    --dateselector-header-cell-border-bottom     : none;
+    --dateselector-header-cell-color             : #bbb;
+    --dateselector-header-month-text-color       : #ccc;
+    --dateselector-header-year-text-color        : #bbb;
+    --dateselector-nav-button-background-color   : #323232;
+    --dateselector-nav-button-color              : #bbb;
+    --dateselector-nav-button-color-hover        : #ddd;
+    --dateselector-nav-button-inner-border       : none;
+}

package/resources/scss/theme-light/date/SelectorContainer.scss

@@ -0,0 +1,24 @@
+:root .neo-theme-light { // .neo-dateselector
+    --dateselector-background-color              : #323232;
+    --dateselector-border-color                  : #ddd;
+    --dateselector-cell-background-color         : #fff;
+    --dateselector-cell-background-color-disabled: #fff;
+    --dateselector-cell-color                    : #000;
+    --dateselector-cell-color-disabled           : #999;
+    --dateselector-cell-color-selected           : #fff;
+    --dateselector-cell-opacity-disabled         : 1;
+    --dateselector-cell-today-border-color       : #5d83a7;
+    --dateselector-color                         : #000;
+    --dateselector-content-border-top            : none;
+    --dateselector-header-background-color       : #fff;
+    --dateselector-header-border-bottom          : none;
+    --dateselector-header-cell-background-color  : #5d83a7;
+    --dateselector-header-cell-border-bottom     : none;
+    --dateselector-header-cell-color             : #fff;
+    --dateselector-header-month-text-color       : #000;
+    --dateselector-header-year-text-color        : #1c60a0;
+    --dateselector-nav-button-background-color   : #fff;
+    --dateselector-nav-button-color              : #bbb;
+    --dateselector-nav-button-color-hover        : #1c60a0;
+    --dateselector-nav-button-inner-border       : none;
+}

package/resources/scss/theme-neo-light/date/SelectorContainer.scss

@@ -0,0 +1,24 @@
+:root .neo-theme-neo-light { // .neo-dateselector
+    --dateselector-background-color              : #323232;
+    --dateselector-border-color                  : #ddd;
+    --dateselector-cell-background-color         : #fff;
+    --dateselector-cell-background-color-disabled: #fff;
+    --dateselector-cell-color                    : #000;
+    --dateselector-cell-color-disabled           : #999;
+    --dateselector-cell-color-selected           : #fff;
+    --dateselector-cell-opacity-disabled         : 1;
+    --dateselector-cell-today-border-color       : #5d83a7;
+    --dateselector-color                         : #000;
+    --dateselector-content-border-top            : none;
+    --dateselector-header-background-color       : #fff;
+    --dateselector-header-border-bottom          : none;
+    --dateselector-header-cell-background-color  : #5d83a7;
+    --dateselector-header-cell-border-bottom     : none;
+    --dateselector-header-cell-color             : #fff;
+    --dateselector-header-month-text-color       : #000;
+    --dateselector-header-year-text-color        : #1c60a0;
+    --dateselector-nav-button-background-color   : #fff;
+    --dateselector-nav-button-color              : #bbb;
+    --dateselector-nav-button-color-hover        : #1c60a0;
+    --dateselector-nav-button-inner-border       : none;
+}

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -635,23 +635,23 @@ function autoGenerateGetSet(proto, key) {
 
                 if (Array.isArray(value)) {
                     if (key !== 'items') {
-                        value = [...value];
+                        value = [...value]
                     }
                 } else if (value instanceof Date) {
-                    value = new Date(value.valueOf());
+                    value = new Date(value.valueOf())
                 }
 
                 if (hasNewKey) {
                     me[key] = value; // we do want to trigger the setter => beforeSet, afterSet
                     value = me['_' + key]; // return the value parsed by the setter
-                    delete me[configSymbol][key];
+                    delete me[configSymbol][key]
                 }
 
                 if (typeof me[beforeGet] === 'function') {
-                    value = me[beforeGet](value);
+                    value = me[beforeGet](value)
                 }
 
-                return value;
+                return value
             },
 
             set(value) {

package/src/component/Base.mjs

@@ -536,7 +536,7 @@ class Base extends CoreBase {
             let binding = this.bind?.[key];
 
             if (binding?.twoWay) {
-                this.getModel()?.setData(binding.key, value)
+                this.getModel()?.setData(key, value)
             }
         }
     }

package/src/container/Base.mjs

@@ -123,7 +123,7 @@ class Base extends Component {
 
         if (value && me.items) {
             me.items.forEach(item => {
-                if (Neo.isObject(item)) {
+                if (!Neo.isString(item)) {
                     item.appName = value
                 }
             })
@@ -221,7 +221,7 @@ class Base extends Component {
         let me = this;
 
         value && me.items?.forEach(item => {
-            if (Neo.isObject(item)) {
+            if (!Neo.isString(item)) {
                 item.windowId = value
             }
         })
@@ -392,18 +392,15 @@ class Base extends Component {
      * @returns {Neo.layout.Base}
      */
     createLayout(value) {
-        let me = this;
-
         if (value) {
+            let me                      = this,
+                {appName, id, windowId} = me;
+
             if (value instanceof LayoutBase && value.isLayout) {
-                value.appName     = me.appName;
-                value.containerId = me.id;
-                value.windowId    = me.windowId;
+                Object.assign(value, {appName, containerId: id, windowId})
             } else {
                 value = me.parseLayoutClass(value);
-                value.appName     = me.appName;
-                value.containerId = me.id;
-                value.windowId    = me.windowId;
+                Object.assign(value, {appName, containerId: id, windowId});
                 value = Neo.ntype(value)
             }
         }
@@ -424,6 +421,38 @@ class Base extends Component {
         super.destroy(updateParentVdom, silent)
     }
 
+    /**
+     * An alternative for `getReference()` which is useful before a component tree got created.
+     * `getReference()` relies on child items being registered inside `manager.Component`,
+     * while this method simply walks down the items array.
+     *
+     * However, classes / modules inside the items tree can not get parsed further.
+     * @param {String} reference
+     * @param {Object[]} items=this.items
+     * @returns {Object|Neo.component.Base|null}
+     */
+    getItem(reference, items=this.items) {
+        let i   = 0,
+            len = items.length,
+            item,
+            childItem;
+
+        for (; i < len; i++) {
+            item = items[i];
+            if (item.reference === reference) {
+                return item
+            } else if (item.items) {
+                childItem = this.getItem(reference, item.items);
+
+                if (childItem) {
+                    return childItem
+                }
+            }
+        }
+
+        return null
+    }
+
     /**
      * Specify a different vdom items root if needed (useful in case this container uses a wrapper node).
      * @returns {Object} The new vdom items root
@@ -567,16 +596,12 @@ class Base extends Component {
      */
     parseLayoutClass(config) {
         if (Neo.isObject(config)) {
-            if (config.ntype.indexOf('layout-') < 0) {
-                config.ntype = 'layout-' + config.ntype
-            }
-        } else if (config.indexOf('layout-') < 0) {
-            config = {
-                ntype: 'layout-' + config
+            if (!config.ntype.startsWith('layout-')) {
+                config.ntype = `layout-${config.ntype}`
             }
         } else {
             config = {
-                ntype: config
+                ntype: config.startsWith('layout-') ? config : `layout-${config}`
             }
         }
 

package/src/controller/Component.mjs

@@ -71,7 +71,8 @@ class Component extends Base {
 
     /**
      * @param {String} handlerName
-     * @returns {Neo.controller.Component|null}
+     * @param {Neo.component.Base} component
+     * @returns {Neo.controller.Component|Boolean|null}
      */
     getHandlerScope(handlerName, component) {
         let me     = this,
@@ -83,15 +84,15 @@ class Component extends Base {
             const handlerCb = component.resolveCallback(handlerName, component);
 
             // Handler fn is resolved in the Component or its own parent chain.
-            // Return a status indicating that we do not need an erly binding
+            // Return a status indicating that we do not need an early binding
             if (handlerCb.fn) {
-                return true;
+                return true
             }
         }
 
         return Neo.isFunction(me[handlerName]) ?
             me : parent ?
-            parent.getHandlerScope(handlerName) : null;
+            parent.getHandlerScope(handlerName) : null
     }
 
     /**

package/src/core/Observable.mjs

@@ -241,12 +241,35 @@ class Observable extends Base {
     }
 
     /**
+     * There are different syntax's how you can use this method.
+     * Using the eventId:
+     * ```
+     * this.removeListener('change', 'neo-event-7');
+     * ```
+     * Passing the handler method:
+     * ```
+     * this.removeListener('change', this.onChange, this);
+     * ```
+     * Passing an object:
+     * ```
+     * me.field.un({
+     *     change                    : me.onFieldChange,
+     *     changeClearToOriginalValue: me.onFieldChange,
+     *     scope                     : me
+     * });
+     * ```
      * @param {Object|String} name
-     * @param {String} [eventId]
+     * @param {Function|String} [eventId]
+     * @param {Neo.core.Base} [scope]
      */
-    removeListener(name, eventId) {
+    removeListener(name, eventId, scope) {
         let me = this,
-            i, len, listener, listeners, match, scope;
+            i, len, listener, listeners, match;
+
+        if (Neo.isFunction(eventId)) {
+            me.removeListener({[name]: eventId, scope});
+            return
+        }
 
         if (Neo.isObject(name)) {
             if (name.scope) {
@@ -316,9 +339,11 @@ class Observable extends Base {
                 fn = fn.slice(3);
                 while (!scope[fn] && (scope = scope.parent));
             }
-            fn = scope[fn];
+
+            fn = scope[fn]
         }
-        return { scope,  fn };
+
+        return {fn, scope}
     }
 
     /**

package/src/core/Util.mjs

@@ -175,7 +175,7 @@ class Util extends Base {
      * @returns {Boolean}
      */
     static isObject(value) {
-        return value !== null && typeof value === 'object' && !Array.isArray(value)
+        return value?.constructor?.name === 'Object' || false
     }
 
     /**