neo.mjs 6.15.3 → 6.15.5

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"},
@@ -23,9 +24,9 @@
         {"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"},
-        {"name": "Components and Containers",               "parentId": "InDepth",           "isLeaf": true,  "id": "ComponentsAndContainers"},
+        {"name": "Component and Container Basics",          "parentId": "InDepth",           "isLeaf": true,  "id": "ComponentsAndContainers"},
         {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "Layouts"},
-        {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": false, "id": "CustomComponents"},
+        {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": true,  "id": "CustomComponents"},
         {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": true,  "expanded": false, "id": "GuideEvents"},
         {"name": "Tables (Stores)",                         "parentId": "InDepth",           "isLeaf": false, "id": "Tables"},
         {"name": "Shared Bindable Data (Component Models)", "parentId": "InDepth",           "isLeaf": false, "id": "InDepthComponentModels"},

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

@@ -1,25 +1,25 @@
 .learn-content {
-
-    max-width: 900px;
-    padding: 0 250px 0 3rem;
-    margin: 0 auto;
     background-color: white;
-    border-radius: 8px;
-    letter-spacing: 1px;
-    overflow: unset;
+    border-radius   : 8px;
+    letter-spacing  : 1px;
+    margin          : 0 auto;
+    max-width       : 900px;
+    overflow        : unset;
+    padding         : 0 3rem;
+    width           : -webkit-fill-available;
 
     pre[data-javascript] {
+        border       : thin solid lightgray;
         border-radius: 4px;
-        padding: 12px;
-        border: thin solid lightgray;
+        padding      : 12px;
     }
 
     p {
-        margin: 0.5em 0em 0.7em 0em;
+        margin: 0.5em 0 0.7em 0;
     }
 
     details summary {
-        cursor: pointer;
+        cursor    : pointer;
         transition: margin 300ms ease-out;
     }
 
@@ -28,12 +28,11 @@
     }
 
     details summary {
-        list-style: none;
-        color: #555;
-        display: flex;
-        /* also removes the list marker */
         align-items: center;
+        color      : #555;
+        display    : flex;
         font-weight: bold;
+        list-style : none;
     }
 
     details summary::before {
@@ -45,11 +44,11 @@
     }
 
     details summary::before {
-        color: #c4c4c4;
+        color      : #c4c4c4;
         font-family: var(--fa-style-family, "Font Awesome 6 Free");
-        font-size: 1em;
+        font-size  : 1em;
         font-weight: var(--fa-style, 900);
-        margin: 0.4em 0.4em 0.4em 0;
+        margin     : 0.4em 0.4em 0.4em 0;
     }
 
     summary::-webkit-details-marker {
@@ -61,8 +60,8 @@
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
         transition: 0.3s;
         /* Add some padding inside the card container */
-        padding: 2px 16px;
-        font-size: 1em;
+        padding      : 2px 16px;
+        font-size    : 1em;
         margin-bottom: 1em;
     }
 
@@ -71,3 +70,9 @@
         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
     }
 }
+
+.portal-size-large {
+    .learn-content {
+        padding: 0 250px 0 3rem;
+    }
+}

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

@@ -1,8 +1,29 @@
 .learn-live-preview {
-    textarea {
-        height: 100%;
-        font-family: monospace !important;
-    }
-
     margin-bottom: 2em;
-}
+
+    .live-preview-container {
+        border-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+        box-shadow   : rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
+        overflow     : hidden;
+
+        .neo-tab-header-toolbar {
+            background-color       : var(--sem-color-surface-neutral-default);
+            border                 : 1px solid #e6e6e6;
+            border-top-left-radius : calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+            border-top-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+            padding                : var(--cmp-tab-strip-height);
+        }
+
+        .neo-tab-strip {
+            margin-top: calc(var(--cmp-tab-strip-height) * (-1) - 1px);
+        }
+
+        .neo-tab-content-container {
+            background-color          : transparent;
+            border                    : 1px solid #e6e6e6;
+            border-bottom-left-radius : calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+            border-bottom-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
+            border-top                : 0;
+        }
+    }
+}

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

@@ -6,39 +6,9 @@
     }
 }
 
-
-
-
-
-// Live preview Container
-.live-preview-container {
-
-    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
-    border-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
-
-    .neo-tab-header-toolbar {
-        background-color: var(--sem-color-surface-neutral-default);
-        padding: var(--cmp-tab-strip-height);
-        border: 1px solid #e6e6e6;
-        border-top-left-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
-        border-top-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
-    }
-
-    .neo-tab-strip {
-       margin-top: calc(var(--cmp-tab-strip-height) * (-1) - 1px);
-    }
-
-    .neo-tab-content-container {
-        background-color: transparent;
-        border: 1px solid #e6e6e6;
-        border-top: 0;
-        border-bottom-left-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
-        border-bottom-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
-    }
-}
-
+// todo: @mxmrtns this makes scrollbars globally(!) invisible
 // Scrollbar Behaviour
-::-webkit-scrollbar {
+/*::-webkit-scrollbar {
     width: 6px;
 }
 
@@ -62,4 +32,4 @@ background: transparent;
         background: #b2b2b2;
         border-radius: 100px;
     }
-}
+}*/

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

@@ -1,12 +1,11 @@
 .learn-content-container {
-    // align-items: center !important;
-    // padding: 0 3rem;
-    overflow: scroll;
+    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;
@@ -34,3 +33,9 @@
         }
     }
 }
+
+.portal-size-large {
+    .content-bottom-toolbar {
+        margin-right: 250px;
+    }
+}

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

@@ -0,0 +1,14 @@
+.portal-page-sections-container.neo-container {
+    background-color: transparent;
+    border          : none; // reset the default 1px
+    display         : block;
+    flex-shrink     : 0;
+    position        : fixed;
+    right           : 0;
+    width           : 250px;
+    z-index         : 1;
+
+    h3 {
+        margin-left: 16px;
+    }
+}

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

@@ -1,15 +1,14 @@
-
-
 .portal-page-sections-list.neo-list {
     .neo-h3 {
         margin-left: 1.5em;
     }
 
     .neo-list-item {
-        color      : var(--sem-color-text-neutral-subdued);
-        height     : unset;
-        white-space: normal;
-        padding: 8px 0 8px 8px !important;
+        color        : var(--sem-color-text-neutral-subdued);
+        height       : unset;
+        margin-bottom: 0;
+        padding      : 5px 0 5px 5px !important;
+        white-space  : normal;
 
         &[aria-selected=true] {
             background-color: transparent !important;

package/resources/scss/src/component/wrapper/MonacoEditor.scss

@@ -0,0 +1,3 @@
+.neo-monaco-editor {
+    overflow: hidden;
+}

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -370,7 +370,6 @@ class Base extends CoreBase {
      * @member {String[]} childUpdateCache=[]
      */
     childUpdateCache = []
-
     /**
      * @member {Function[]} resolveUpdateCache=[]
      */

package/src/component/wrapper/MonacoEditor.mjs

@@ -40,6 +40,11 @@ class MonacoEditor extends Base {
          * @protected
          */
         ntype: 'monaco-editor',
+        /**
+         * @member {String[]} baseCls=['neo-monaco-editor']
+         * @protected
+         */
+        baseCls: ['neo-monaco-editor'],
         /**
          * @member {Boolean} contextmenu_=false
          */

package/src/core/Base.mjs

@@ -1,5 +1,5 @@
-import {buffer, debounce, throttle} from '../util/Function.mjs';
-import IdGenerator                  from './IdGenerator.mjs'
+import {buffer, debounce, intercept, throttle} from '../util/Function.mjs';
+import IdGenerator                             from './IdGenerator.mjs'
 
 const configSymbol       = Symbol.for('configSymbol'),
       forceAssignConfigs = Symbol('forceAssignConfigs'),
@@ -150,6 +150,13 @@ class Base {
 
         me.applyDelayable();
 
+        /*
+         * We do not want to force devs to check for the `isDestroyed` flag in every possible class extension.
+         * So, we are intercepting the top-most `destroy()` call to check for the flag there.
+         * Rationale: `destroy()` must only get called once.
+         */
+        intercept(me, 'destroy', me.isDestroyedCheck, me);
+
         me.remote && setTimeout(me.initRemote.bind(me), 1)
     }
 
@@ -305,9 +312,14 @@ class Base {
 
         Object.keys(me).forEach(key => {
             if (Object.getOwnPropertyDescriptor(me, key).writable) {
-                delete me[key]
+                // We must not delete some custom destroy() interceptor
+                if (key !== 'destroy' && key !== '_id') {
+                    delete me[key]
+                }
             }
-        })
+        });
+
+        me.isDestroyed = true
     }
 
     /**
@@ -387,6 +399,14 @@ class Base {
         }
     }
 
+    /**
+     * Intercepts destroy() calls to ensure they will only get called once
+     * @returns {Boolean}
+     */
+    isDestroyedCheck() {
+        return !this.isDestroyed
+    }
+
     /**
      * Override this method to change the order configs are applied to this instance.
      * @param {Object} config

package/src/form/field/ComboBox.mjs

@@ -342,6 +342,7 @@ class ComboBox extends Picker {
             displayField  : me.displayField,
             itemRole      : 'option',
             itemsFocusable: false,
+            keepFocusIndex: true,
             navigator     : {eventSource: me.getInputElId()},
             parentId      : me.id,
             role          : 'listbox',
@@ -760,6 +761,7 @@ class ComboBox extends Picker {
         if (!me.programmaticValueChange) {
             // changing the input => silent record reset
             me._value = null;
+            me.list?.selectionModel.deselectAll();
 
             me.filterOnInput(inputValue)
         }

package/src/list/Base.mjs

@@ -98,6 +98,12 @@ class Base extends Component {
          * @member {Boolean} itemsFocusable=true
          */
         itemsFocusable: true,
+        /**
+         * The config will get passed to the navigator main thread addon.
+         * E.g. for ComboBoxes, which shall preserve their focussed list item when filtering the store, use true.
+         * @member {Boolean} keepFocusIndex=false
+         */
+        keepFocusIndex: false,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys
@@ -146,7 +152,7 @@ class Base extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-        {tag: 'ul', cn: []}
+            {tag: 'ul', cn: []}
     }
 
     /**
@@ -288,10 +294,11 @@ class Base extends Component {
             // Set up item navigation in the list
             if (!me.hasNavigator) {
                 me.navigator = {
-                    appName  : me.appName,
-                    id       : me.id,
-                    selector : `.${me.itemCls}:not(.neo-disabled,.neo-list-header)`,
-                    windowId : me.windowId,
+                    appName       : me.appName,
+                    id            : me.id,
+                    keepFocusIndex: me.keepFocusIndex,
+                    selector      : `.${me.itemCls}:not(.neo-disabled,.neo-list-header)`,
+                    windowId      : me.windowId,
                     ...me.navigator
                 };
 

package/src/main/addon/IntersectionObserver.mjs

@@ -28,6 +28,12 @@ class NeoIntersectionObserver extends Base {
         }
     }
 
+    /**
+     * Storing data from observe() calls which arrived prior to register()
+     * @member {Object} map={}
+     * @protected
+     */
+    cache = {}
     /**
      * Storing component ids and their IntersectionObservers
      * @member {Object} map={}
@@ -77,17 +83,29 @@ class NeoIntersectionObserver extends Base {
      * @param {Boolean} data.disconnect=false true removes all currently observed targets
      * @param {String} data.id
      * @param {String} data.observe The querySelector to match elements
+     * @returns {Boolean} true in case the targets got observed, false in case they got cached prior to a register() call
      */
     observe(data) {
         let me       = this,
+            cache    = me.cache,
             targets  = document.querySelectorAll(data.observe),
             observer = me.map[data.id];
 
-        data.disconnect && observer.disconnect();
+        if (observer) {
+            data.disconnect && observer.disconnect();
 
-        targets.forEach(target => {
-            observer.observe(target)
-        })
+            targets.forEach(target => {
+                observer.observe(target)
+            })
+        } else {
+            if (!cache[data.id]) {
+                cache[data.id] = []
+            }
+
+            cache[data.id].push(data);
+        }
+
+        return !!observer
     }
 
     /**
@@ -101,6 +119,7 @@ class NeoIntersectionObserver extends Base {
      */
     register(data) {
         let me      = this,
+            cache   = me.cache,
             targets = data.observe && document.querySelectorAll(data.observe),
             observer;
 
@@ -114,7 +133,12 @@ class NeoIntersectionObserver extends Base {
 
         targets?.forEach(target => {
             observer.observe(target)
-        })
+        });
+
+        if (cache[data.id]) {
+            cache[data.id].forEach(item => me.observe(item));
+            delete cache[data.id]
+        }
     }
 
     /**