neo.mjs 6.10.9 → 6.10.11

package/resources/data/deck/training/p/2022-12-29T18-34-25-826Z.md

@@ -1,4 +1,4 @@
 As a developer, your work is done in _neomjs-app-worker_. When you're debugging, 
 choose that worker in the DevTools JavaScript context dropdown.
 
-<img height="400" src="resources/images/DevToolsJavaScriptContext.png">
+<img height="400" src="https://s3.amazonaws.com/mjs.neo.learning.images/DevToolsJavaScriptContext.png">

package/resources/data/deck/training/p/2022-12-29T18-36-56-893Z.md

@@ -18,7 +18,7 @@ From the workspace, run this command.
 
 Name the app _Starter_ and choose the default response for everything.
 
-<img src="resources/images/intro/NpmRunCreateApp.png"/>
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/intro/NpmRunCreateApp.png"/>
 
 <pre>
 </pre>

package/resources/data/deck/training/p/2022-12-31T18-43-56-338Z.md

@@ -1,4 +1,4 @@
-<img style="float:left;margin-right:1em;" height="600" src="resources/images/intro/LookForSetters.png"/>
+<img style="float:left;margin-right:1em;" height="600" src="https://s3.amazonaws.com/mjs.neo.learning.images/intro/LookForSetters.png"/>
 
 Once you find the component, expand it and scroll down until you see the grayed-out 
 properties &mdash; those are the setter/getter properties.

package/resources/data/deck/training/p/2022-12-31T18-51-50-682Z.md

@@ -1 +1 @@
-<img style="float:left;margin-right:1em;" height="600" src="resources/images/intro/ChangeText.png"/>
+<img style="float:left;margin-right:1em;" height="600" src="https://s3.amazonaws.com/mjs.neo.learning.images/intro/ChangeText.png"/>

package/resources/data/deck/training/p/2022-12-31T18-54-04-176Z.md

@@ -1,4 +1,4 @@
 You can run methods too. And since there's no transpiling, anything you can put in your
 code will run on the command line.
 
-<img height="480" src="resources/images/intro/Add.png"/>
+<img height="480" src="https://s3.amazonaws.com/mjs.neo.learning.images/intro/Add.png"/>

package/resources/data/deck/training/p/2023-01-01T17-49-18-429Z.md

@@ -1,3 +1,3 @@
 We can use DevTools and our debugging skills to inspect the store.
 
-<img height="400" src="resources/images/intro/InspectTheStore.png"/>
+<img height="400" src="https://s3.amazonaws.com/mjs.neo.learning.images/intro/InspectTheStore.png"/>

package/resources/data/deck/training/p/2023-01-01T21-23-17-716Z.md

@@ -1,7 +1,7 @@
 Internally, listeners are set up as a map, with event names as the key, and and array of
 function references as the value.
 
-<img src="resources/images/EventsInMemory.png"/>
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/EventsInMemory.png"/>
 
 <!-- 
 <table>

package/resources/data/deck/training/p/2023-01-06T23-21-31-685Z.md

@@ -67,7 +67,7 @@ headers: [{
 
 When you run your app and enter a city you should see its value being logged from the main view.
 
-<img src="resources/images/yelp/OnCityChangeEvent.png"></pre>
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/yelp/OnCityChangeEvent.png"></pre>
 
 ??Fire _categoryChange_
 

package/resources/data/deck/training/p/2023-01-06T23-34-13-897Z.md

@@ -44,7 +44,7 @@ Edit the main view and use the new banner:
 
 ??Get the Yelp logo
 
-Create the file `resources/images/yelp_logo.svg` with this content
+Create the file `https://s3.amazonaws.com/mjs.neo.learning.images/yelp_logo.svg` with this content
 
 <pre class="runnable readonly text 200">
 &lt;svg width="1000" height="385" viewBox="0 0 1000 385" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -74,7 +74,7 @@ class Banner extends Base {
         height: 32,
         _vdom: {
             tag: 'img',
-            src: '../../resources/images/yelp_logo.svg',
+            src: '../../https://s3.amazonaws.com/mjs.neo.learning.images/yelp_logo.svg',
         };
     }
 }

package/resources/data/deck/training/p/2023-01-06T23-46-36-687Z.md

@@ -1 +1 @@
-<img src="resources/images/YelpAppSketch.png"></img>
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/YelpAppSketch.png"></img>

package/resources/data/deck/training/p/2023-01-08T01-24-21-088Z.md

@@ -84,7 +84,7 @@ Then edit `MainContainerController` and in the `onTableSelect` method add this s
 Save your changes, then click on a few table rows — you should see the corresponding
 map marker become highlighted.
 
-<img src="resources/images/earthquakes/TableSyncsMap.png"></img>
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/TableSyncsMap.png"></img>
 
 ??To reiterate: Neo.findFirst should not be used in your app logic
 

package/resources/data/deck/training/p/2023-01-08T02-11-26-333Z.md

@@ -10,11 +10,11 @@ In English there's an expression: _don't lose the forest for the trees_.
 	<tr><td>&nbsp;</td></tr>
 	<tr>
 		<td style="text-align: center;">
-        <img src="resources/images/MortonArboretumForest.jpg" width="400" />
+        <img src="https://s3.amazonaws.com/mjs.neo.learning.images/MortonArboretumForest.jpg" width="400" />
 		</td>
 		<td>&nbsp;</td>
 		<td style="text-align: center;">
-<img src="resources/images/MortonArboretumTrees.jpg" width="400" />
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/MortonArboretumTrees.jpg" width="400" />
 		</td></tr>
 
 <tr><td>&nbsp;</td></tr>

package/resources/data/deck/training/p/2023-01-14T00-40-27-784Z.md

@@ -26,7 +26,7 @@ Add a config _businesses_ in the `stores` config block
 
 Save and refresh then look in the debugger's Network tab. You should see the data being fetched.
 
-<img style="border: thin solid gray" src="resources/images/yelp/initialNetworkTraffic.png"></img>
+<img style="border: thin solid gray" src="https://s3.amazonaws.com/mjs.neo.learning.images/yelp/initialNetworkTraffic.png"></img>
 
 ??Load the store procedurally
 
@@ -73,7 +73,7 @@ doFetchYelpData() {
 Test this by saving, refreshing, then changing the city a few times. 
 With each city changes you should see a new call to the Yelp web service.
 
-<img style="border:thin solid gray" src="resources/images/yelp/CityChangesReflectedInTheFeed.png"></img>
+<img style="border:thin solid gray" src="https://s3.amazonaws.com/mjs.neo.learning.images/yelp/CityChangesReflectedInTheFeed.png"></img>
 
 ??Add two fields to the store's model config
 

package/resources/data/deck/training/p/2023-07-31T00-37-21-927Z.md

@@ -87,11 +87,11 @@ open a new browser window and enter (or copy-and-paste) that exact URL.
 
 Then select the "Shared workers" option on the left, then click on `inspect` by the entry for _neomjs-app-worker_.
 
-<img src="resources/images/debugging/ChromeDevToolsInspectWorkers.png"/>
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/debugging/ChromeDevToolsInspectWorkers.png"/>
 
 Clicking `inspect` opens a standard debug window, but with a single execution context.
 
-<img src="resources/images/debugging/ChromeDevToolsSharedWorkerContext.png"/>
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/debugging/ChromeDevToolsSharedWorkerContext.png"/>
 
 If you run the app and click on a map item, or a table row, you should see the 
 console logs being run from your event handlers.

package/resources/data/deck/training/p/2023-10-14T19-25-08-153Z.md

@@ -1,12 +1,12 @@
 If you haven't already done it, run `npx neo-app` to create a Neo.mjs workspace.
 
-<img src="resources/images/learn/NeoWorkspace.png" style="height: 400px;">
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/learn/NeoWorkspace.png" style="height: 400px;">
 
 As you can see, a Neo.mjs workspace is a conventional npm workspace. If you run 
 the script `npm run server-start` from the workspace, Neo.mjs launches a web
 serve whose doc root is the workspace. 
 
-<img src="resources/images/learn/ServerRoot.png" style="height: 400px;">
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/learn/ServerRoot.png" style="height: 400px;">
 
 If you drill down into the `src` directory you'll see your applications.
 The `docs` directory holds the Neo.mjs API docs. Examples are in the `examples` directory.
@@ -19,7 +19,7 @@ app. To do that, run this command from the workspace.
 At the first prompt, name the app `Foo`, and accept the default for everything else.
 The script creates an application structured as follows.
 
-<img src="resources/images/learn/FooFolder.png" style="height: 400px;">
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/learn/FooFolder.png" style="height: 400px;">
 
 These files are part of the typical structure of a Neo.mjs application. The files `index.html`, `app.mjs`, `neo-config.json`, `view/Viewport.mjs` are rarely modified.
 You will, however, edit the main container, and its associated "controller" and "model",

package/resources/scss/src/apps/newwebsite/Viewport.scss

@@ -0,0 +1,32 @@
+.newwebsite-viewport {
+    align-items    : center !important;
+    display        : flex !important;
+    gap            : 48px;
+    justify-content: center !important;
+    padding        : 10% 15% 15% 15%;
+}
+
+.button-group {
+    display       : flex !important;
+    flex-direction: row-reverse !important;
+    gap           : 8px !important;
+}
+
+.neo-h1 {
+    font-size  : 48px;
+    font-weight: 600;
+    text-align : center;
+}
+
+.vector {
+    background-image   : url("../../../../../../resources/images/Neo_Vector.svg");
+    background-position: center center;
+    background-repeat  : no-repeat;
+    background-size    : contain;
+    height             : 150px;
+    width              : 100%;
+}
+
+.get-started-button {
+    cursor: not-allowed !important;
+}

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

@@ -1,14 +1,14 @@
 .learn-content {
 
     background-color: white;
-    border-radius   : 8px;
-    margin          : 8px 8px 8px 0 ;
+    border-radius: 8px;
+    margin: 8px 8px 8px 0;
 
     letter-spacing: 1px;
     overflow: scroll;
     padding: 1em;
 
-    pre[data-javascript]{
+    pre[data-javascript] {
         border-radius: 4px;
         padding: 12px;
         border: thin solid lightgray;
@@ -53,7 +53,7 @@
     details summary::before {
         color: #c4c4c4;
         font-family: var(--fa-style-family, "Font Awesome 6 Free");
-        font-size: 1.3em;
+        font-size: 1em;
         font-weight: var(--fa-style, 900);
         margin: 0.4em 0.4em 0.4em 0;
     }
@@ -61,4 +61,20 @@
     summary::-webkit-details-marker {
         display: none;
     }
+
+    .lab {
+        /* Add shadows to create the "card" effect */
+        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;
+        margin-bottom: 1em;
+    }
+
+    /* On mouse-over, add a deeper shadow */
+    .lab:hover {
+        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    }
+
 }

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

@@ -0,0 +1,8 @@
+.learn-live-preview {
+    textarea {
+        height: 100%;
+        font-family: monospace !important;
+    }
+
+    margin-bottom: 2em;
+}

package/resources/scss/src/component/Base.scss

@@ -27,12 +27,17 @@
 }
 
 .neo-masked {
-    position : relative;
+    font-family : inherit;
+    font-size   : inherit;
+    font-weight : var(--button-text-font-weight);
+    position    : relative;
+    color       : var(--button-text-color);
 
     .neo-load-mask {
         position         : absolute;
         inset            : 0;
         background-color : inherit;
+        border-radius    : inherit;
         z-index          : 4;
         display          : grid;
         justify-content  : center;
@@ -40,10 +45,14 @@
         overflow         : clip;
 
         .neo-load-mask-body {
-            display   : flex;
-            flex-flow : row nowrap;
-            gap       : 0.7em;
+            align-items : center;
+            display     : flex;
+            flex-flow   : row nowrap;
+            gap         : 0.7em;
 
+            .neo-loading-message {
+                color: inherit;
+            }
             .fa-spinner {
                 width  : 1em;
                 height : 1em;

package/resources/scss/src/form/field/Select.scss

@@ -4,11 +4,8 @@
         position: relative;
 
         .neo-textfield-input, .neo-typeahead-input {
-            height  : 100% !important;
-            left    : 0;
-            position: absolute;
-            top     : 0;
-            width   : 100% !important;
+            position : absolute;
+            inset    : 0;
         }
 
         .neo-textfield-input {

package/resources/scss/src/form/field/Text.scss

@@ -231,7 +231,6 @@
     &.label-inline {
         display  : block;
         font-size: 14px;
-        height   : inherit;
         position : relative;
 
         &.neo-focus {

package/resources/scss/src/list/Base.scss

@@ -54,16 +54,61 @@
             cursor: pointer;
 
             &:hover {
-                background-color: var(--list-item-background-color-hover);
+                background-color: var(--list-item-background-color-hover) !important;
                 color           : var(--list-container-list-color);
             }
             &:active {
                 background-color: var(--list-item-background-color-active);
                 color           : var(--list-container-list-color);
             }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+        }
+
+        &.neo-navigator-active-item {
+            outline        : 1px solid var(--list-item-border-color-active);
+            outline-offset : -1px;
         }
 
-        &.neo-selected {
+        &[aria-selected="true"] {
             background-color: var(--list-item-background-color-selected) !important;
             color           : var(--list-item-color-selected) !important;
             cursor          : default !important;

package/resources/scss/src/list/Chip.scss

@@ -3,20 +3,26 @@
     overflow: auto;
 
     .neo-list-item {
-        padding: 0;
+        padding : 0;
+        outline : 0 none !important; // TODO. Fix order so important can be removed
 
-        &.neo-selected {
-            background-color: inherit;
+        &[aria-selected="true"] {
+            background-color: inherit !important; // TODO. Fix order so important can be removed
             color           : inherit;
+            outline         : inherit;
 
             .neo-chip {
                 background-color: var(--list-item-background-color-selected);
-                border-color    : var(--chip-border-color-focus);
             }
 
             .neo-chip-close-button {
                 color: var(--chip-close-button-color-hover);
             }
         }
+        &.neo-navigator-active-item {
+            .neo-chip {
+                border-color : var(--list-item-border-color-active);
+            }
+        }
     }
 }

package/resources/scss/theme-dark/list/Base.scss

@@ -1,12 +1,13 @@
 :root .neo-theme-dark { // .neo-list-container
-    --list-container-background-color    : #33343d;
-    --list-container-border              : 1px solid #282829;
-    --list-container-list-color          : #bbb;
-    --list-item-background-color         : #33343d;
-    --list-item-background-color-hover   : #{lighten(#33343d, 10%)};
-    --list-item-background-color-selected: #5a7082;
-    --list-item-color-selected           : #2b2b2b;
-    --list-item-glyph-color              : inherit;
-    --list-item-highlight-search-color   : #fff;
-    --list-item-padding                  : 5px;
+    --list-container-background-color     : #33343d;
+    --list-container-border               : 1px solid #282829;
+    --list-container-list-color           : #bbb;
+    --list-item-background-color          : #33343d;
+    --list-item-background-color-hover    : #{lighten(#33343d, 10%)};
+    --list-item-background-color-selected : #5a7082;
+    --list-item-color-selected            : #2b2b2b;
+    --list-item-border-color-active       : #f6d199;
+    --list-item-glyph-color               : inherit;
+    --list-item-highlight-search-color    : #fff;
+    --list-item-padding                   : 5px;
 }

package/resources/scss/theme-light/list/Base.scss

@@ -1,12 +1,13 @@
 :root .neo-theme-light { // .neo-list-container
-    --list-container-background-color    : #fff;
-    --list-container-border              : 0;
-    --list-container-list-color          : #{lighten(#33343d, 20%)};
-    --list-item-background-color         : #fff;
-    --list-item-background-color-hover   : #{lighten(#33343d, 70%)};
-    --list-item-background-color-selected: #{lighten(#64B5F6, 22%)};
-    --list-item-color-selected           : #2b2b2b;
-    --list-item-glyph-color              : #{lighten(#33343d, 20%)};
-    --list-item-highlight-search-color   : red;
-    --list-item-padding                  : 5px;
+    --list-container-background-color     : #fff;
+    --list-container-border               : 0;
+    --list-container-list-color           : #{lighten(#33343d, 20%)};
+    --list-item-background-color          : #fff;
+    --list-item-background-color-hover    : #{lighten(#33343d, 70%)};
+    --list-item-background-color-selected : #{lighten(#64B5F6, 22%)};
+    --list-item-color-selected            : #2b2b2b;
+    --list-item-border-color-active       : darkorange;
+    --list-item-glyph-color               : #{lighten(#33343d, 20%)};
+    --list-item-highlight-search-color    : red;
+    --list-item-padding                   : 5px;
 }

package/resources/scss/theme-neo-light/design-tokens/Components.scss

@@ -0,0 +1,3 @@
+:root .neo-theme-neo-light {
+    --cmp-button-bg                       : blue;
+}

package/resources/scss/theme-neo-light/list/Base.scss

@@ -7,6 +7,7 @@
     --list-item-background-color-active  : var(--sem-color-bg-neutral-active);
     --list-item-background-color-selected: var(--sem-color-bg-primary-background);
     --list-item-color-selected           : var(--sem-color-fg-neutral-contrast);
+    --list-item-border-color-active      : #f6d199;
     --list-item-glyph-color              : var(--sem-color-fg-neutral-default);
     --list-item-highlight-search-color   : red;
     --list-item-padding                  : 5px;

package/src/DefaultConfig.mjs

@@ -131,7 +131,7 @@ const DefaultConfig = {
      * @name config.mainThreadAddons
      * @type String[]
      */
-    mainThreadAddons: ['DragDrop', 'Stylesheet'],
+    mainThreadAddons: ['DragDrop', 'Stylesheet', 'Navigator'],
     /**
      * Pass the URL of a JSON-file, which contains the services and methods from your backend,
      * which you want to expose to the client.
@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.10.9'
+     * @default '6.10.11'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.10.9'
+    version: '6.10.11'
 };
 
 Object.assign(DefaultConfig, {

package/src/collection/Base.mjs

@@ -778,6 +778,10 @@ class Base extends CoreBase {
                     items.push(item);
                 }
             } else if (item[property] === value) {
+                if (returnFirstMatch) {
+                    return item;
+                }
+                
                 items.push(item);
             }
         }

package/src/component/Base.mjs

@@ -374,6 +374,13 @@ class Base extends CoreBase {
         return Neo.apps[this.appName] || null
     }
 
+    /**
+     * Returns true if this Component is fully visible, that is it is not hidden and has no hidden ancestors
+     */
+    get isVisible() {
+        return this.mounted && !this.hidden && (!this.parent || this.parent.isVisible);
+    }
+
     /**
      * Apply component based listeners
      * @member {Object} listeners={}

package/src/container/Base.mjs

@@ -160,20 +160,14 @@ class Base extends Component {
      * @protected
      */
     afterSetMounted(value, oldValue) {
-        super.afterSetMounted(value, oldValue);
-
         if (oldValue !== undefined) {
-            setTimeout(() => {
-                let items = this.items,
-                    i     = 0,
-                    len   = items?.length || 0;
-
-                for (; i < len; i++) {
-                    if (!items[i].vdom.removeDom) {
-                        items[i].mounted = value
-                    }
+            super.afterSetMounted(value, oldValue);
+
+            for (let i = 0, { items } = this, { length } = items; i < length; i++) {
+                if (!items[i].vdom.removeDom) {
+                    items[i].mounted = value
                 }
-            }, 1)
+            }
         }
     }
 

package/src/core/Base.mjs

@@ -1,4 +1,4 @@
-import {debounce, throttle} from '../util/Function.mjs';
+import {debounce, throttle, buffer} from '../util/Function.mjs';
 import IdGenerator          from './IdGenerator.mjs'
 
 const configSymbol       = Symbol.for('configSymbol'),
@@ -192,7 +192,8 @@ class Base {
             if (value) {
                 let map = {
                     debounce() {me[key] = new debounce(me[key], me, value.timer)},
-                    throttle() {me[key] = new throttle(me[key], me, value.timer)}
+                    throttle() {me[key] = new throttle(me[key], me, value.timer)},
+                    buffer()   {me[key] = new buffer(me[key],   me, value.timer)}
                 };
 
                 map[value.type]?.()
@@ -342,8 +343,10 @@ class Base {
     initConfig(config, preventOriginalConfig) {
         let me = this;
 
+        me.isConfiguring = true;
         Object.assign(me[configSymbol], me.mergeConfig(config, preventOriginalConfig));
         me.processConfigs()
+        me.isConfiguring = false;
     }
 
     /**

package/src/data/Model.mjs

@@ -38,6 +38,13 @@ 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

@@ -56,13 +56,13 @@ class RecordFactory extends Base {
         if (model instanceof Model) {
             let className = `${this.recordNamespace}.${model.className}.${model.id}`,
                 ns        = Neo.ns(className),
-                key, nsArray;
+                key, nsArray, cls;
 
             if (!ns) {
                 nsArray = className.split('.');
                 key     = nsArray.pop();
-                ns      = Neo.ns(nsArray, true);
-                ns[key] = class Record {
+                ns      = Neo.ns(nsArray, true),
+                cls     = ns[key] = class Record {
                     constructor(config) {
                         let me = this,
                             properties;
@@ -151,7 +151,8 @@ class RecordFactory extends Base {
                     }
                 };
 
-                ns[key].isClass = true;
+                Object.defineProperty(cls.prototype, 'isRecord', { value : true });
+                Object.defineProperty(cls, 'isClass', { vale : true });
 
                 return ns[key];
             }