neo.mjs 6.9.4 → 6.9.6

package/.github/CONCEPT.md

@@ -24,7 +24,7 @@ The best way to get a feeling for workers is using the Google Chrome Dev Tools (
 In case you open the <a href="https://neomjs.github.io/pages/node_modules/neo.mjs/dist/production/docs/index.html">neo.mjs Docs App</a>
 (or any other neo.mjs app), you will get a dropdown menu where you can pick the console scope:
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/concept/worker_scope.png">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/concept/worker_scope.png">
 
 The default scope (top) will show the (console) logs inside all threads.
 
@@ -162,7 +162,7 @@ class Gallery extends Component {
 <a href="https://github.com/neomjs/neo/blob/dev/src/component/Gallery.mjs">Full component.Gallery Source Code</a>
 
 Now let us take a look at the source code inside the browser:
-<img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/concept/gallery_workers.png">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/concept/gallery_workers.png">
 
 Expand the image and take a close look at the Chrome Dev Tools:
 1. The source code is 1:1 the same

package/.github/NEOMJS_HISTORY.md

@@ -17,7 +17,7 @@ Just to make a point on how much time & effort has already been spent on neo.mjs
 
        1 commits Nils Dehl
 
-<img alt="neo.mjs commit history" src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/neomjs-commit-history.png">
+<img alt="neo.mjs commit history" src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/neomjs-commit-history.png">
 
 I would also like to add a ***big thank you*** to everyone who provided feedback prior to the public release!
 
@@ -26,4 +26,4 @@ Tobi
 
 <br><br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>
-& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>
+& <a href="https://www.linkedin.com/in/richwaters/">Rich Waters</a>

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img height="250" width="250" src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/logo_rounded.svg">
+  <img height="250" width="250" src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/logo_rounded.svg">
 </p>
 
 <p align="center">
@@ -16,8 +16,8 @@ neo.mjs enables you to create scalable & high performant Apps using more than ju
 No need to take care of a workers setup, and the cross channel communication on your own.
 
 <p align="center">
-<a href="https://youtu.be/pYfM28Pz6_0"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/neo33s.png"></a>
-<a href="https://youtu.be/aEA5333WiWY"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/neo-movie.png"></a>
+<a href="https://youtu.be/pYfM28Pz6_0"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/neo33s.png"></a>
+<a href="https://youtu.be/aEA5333WiWY"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/neo-movie.png"></a>
 </p>
 
 <a href="https://tobiasuhlig.medium.com/predictive-offline-support-for-assets-you-have-not-used-yet-aeeccccd3754?source=friends_link&sk=e946e0f25f508e6a8cec4136400291a3">Version 4 release announcement</a>
@@ -44,7 +44,7 @@ Join our community:</br>
 
 </br></br>
 <h2 id="architectures">2. Scalable frontend architectures</h2>
-<img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/apps-today.png">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps-today.png">
 
 Most frontends today still look like this. Everything happens inside the main thread (browser window), leading to a poor rendering performance.
 The business logic happens inside main as well, which can slow down DOM updates and animations.
@@ -56,13 +56,13 @@ neo.mjs offers two different setups which follow the exact same API.
 You can switch between <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker">dedicated</a> and
 <a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">shared</a> workers at any point.
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/workers-setup-v4.png">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/workers-setup-v4.png">
 
 The dedicated workers setup uses 3-6 threads (CPUs).
 Most parts of the frameworks as well as your apps and components live within the app worker.
 Main threads are as small and idle as possible (42KB) plus optional main thread addons.
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/shared-workers-setup.png">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/shared-workers-setup.png">
 
 In case you want to e.g. create a web based IDE or a multi window banking / trading app,
 the shared worker setup using 5+ threads (CPUs) is the perfect solution.
@@ -81,9 +81,9 @@ Blog post: <a href="https://medium.com/swlh/expanding-single-page-apps-into-mult
 Chrome (v83+), Edge, Firefox (Safari does not support SharedWorkers yet).</br>
 Desktop only.</br></br>
 
-<a href="https://youtu.be/n7m7ZT1kXQk"><img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/expanding_spa_vid.png"></a></br>
+<a href="https://youtu.be/n7m7ZT1kXQk"><img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/expanding_spa_vid.png"></a></br>
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/covidDashboard/sw_covid.png">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/covidDashboard/sw_covid.png">
 
 You can find the code of the multi window covid app <a href="https://github.com/neomjs/neo/tree/dev/apps/sharedcovid">here</a>.
 
@@ -92,9 +92,9 @@ You can find the code of the multi window covid app <a href="https://github.com/
 <a href="https://neomjs.github.io/pages/node_modules/neo.mjs/dist/production/apps/covid/index.html#mainview=table">Live Demo: COIN App dist/production</a></br>
 Desktop only => support for mobile devices is on the roadmap.</br></br>
 
-<a href="https://www.youtube.com/watch?v=8lqNVaoGNdU"><img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/covid_app_vid.png"></a></br>
+<a href="https://www.youtube.com/watch?v=8lqNVaoGNdU"><img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/covid_app_vid.png"></a></br>
 
-<img src="https://raw.githubusercontent.com/neomjs/pages/master/resources/images/covidDashboard/v3/table.png">
+<img src="https://raw.githubusercontent.com/neomjs/pages/main/resources/images/covidDashboard/v3/table.png">
 
 You can find the code of the covid app <a href="https://github.com/neomjs/neo/tree/dev/apps/covid">here</a>.
 

package/apps/ServiceWorker.mjs

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

package/apps/covid/Util.mjs

@@ -142,7 +142,7 @@ class Util extends Base {
             return path;
         }
 
-        return `https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/${imageName}.png`;
+        return `https://raw.githubusercontent.com/neomjs/pages/main/resources/images/flaticon/country_flags/png/${imageName}.png`;
     }
 
     /**

package/apps/covid/view/HeaderContainer.mjs

@@ -37,7 +37,7 @@ class HeaderContainer extends Container {
 
             vdom: {
                 tag: 'img',
-                src: 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/apps/covid/covid_logo_dark.jpg'
+                src: 'https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/covid/covid_logo_dark.jpg'
             }
         }, {
             ntype : 'container',

package/apps/covid/view/MainContainerController.mjs

@@ -368,7 +368,7 @@ class MainContainerController extends ComponentController {
             button     = data.component,
             component  = me.component,
             logo       = me.getReference('logo'),
-            logoPath   = 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/apps/covid/',
+            logoPath   = 'https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/covid/',
             mapView    = me.getReference('mapboxglmap'),
             themeLight = button.text === 'Theme Light',
             buttonText, cls, href, iconCls, mapViewStyle, theme;

package/apps/route/view/HeaderContainer.mjs

@@ -28,7 +28,7 @@ class HeaderContainer extends Container {
                 cls: ['center'],
                 vdom: {
                     tag: 'img',
-                    src: 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/logo_rounded.svg'
+                    src: 'https://raw.githubusercontent.com/neomjs/pages/main/resources/images/logo_rounded.svg'
                 }
             },
             {

package/apps/sharedcovid/Util.mjs

@@ -142,7 +142,7 @@ class Util extends Base {
             return path;
         }
 
-        return `https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/${imageName}.png`;
+        return `https://raw.githubusercontent.com/neomjs/pages/main/resources/images/flaticon/country_flags/png/${imageName}.png`;
     }
 
     /**

package/apps/sharedcovid/view/HeaderContainer.mjs

@@ -37,7 +37,7 @@ class HeaderContainer extends Container {
 
             vdom: {
                 tag: 'img',
-                src: 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/apps/covid/covid_logo_dark.jpg'
+                src: 'https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/covid/covid_logo_dark.jpg'
             }
         }, {
             ntype : 'container',

package/apps/sharedcovid/view/MainContainerController.mjs

@@ -553,7 +553,7 @@ class MainContainerController extends ComponentController {
             button     = data.component,
             component  = me.component,
             logo       = me.getReference('logo'),
-            logoPath   = 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/apps/covid/',
+            logoPath   = 'https://raw.githubusercontent.com/neomjs/pages/main/resources/images/apps/covid/',
             themeLight = button.text === 'Theme Light',
             buttonText, cls, href, iconCls, mapView, mapViewStyle, theme;
 

package/apps/website/view/blog/List.mjs

@@ -68,7 +68,7 @@ class List extends BaseList {
                 basePath = '../../' + basePath;
             }
         } else {
-            basePath = 'https://raw.githubusercontent.com/neomjs/pages/master/resources/website';
+            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources/website';
         }
 
         const vdomCn = [

package/apps/website/view/examples/List.mjs

@@ -80,7 +80,7 @@ class List extends BaseList {
                 basePath = '../../' + basePath;
             }
         } else {
-            basePath = 'https://raw.githubusercontent.com/neomjs/pages/master/resources/website/examples';
+            basePath = 'https://raw.githubusercontent.com/neomjs/pages/main/resources/website/examples';
         }
 
         return [

package/examples/ServiceWorker.mjs

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

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -159,7 +159,7 @@ class CountryGallery extends Gallery {
 
         imageName = map[imageName] || imageName;
 
-        return `https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/${imageName}.png`;
+        return `https://raw.githubusercontent.com/neomjs/pages/main/resources/images/flaticon/country_flags/png/${imageName}.png`;
     }
 
     /**

package/examples/component/coronaHelix/CountryHelix.mjs

@@ -191,7 +191,7 @@ class CountryHelix extends Helix {
 
         imageName = map[imageName] || imageName;
 
-        return 'https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/' + imageName + '.png'
+        return 'https://raw.githubusercontent.com/neomjs/pages/main/resources/images/flaticon/country_flags/png/' + imageName + '.png'
     }
     /**
      * @returns {String}

package/examples/component/toast/resources/highlight/CHANGES.md

@@ -772,7 +772,7 @@ New languages in this release:
 [Erik Paluka]: https://github.com/paluka
 [Luke Holder]: https://github.com/lukeholder
 [David Mohundro]: https://github.com/drmohundro
-[ps]: https://github.com/OctopusDeploy/Library/blob/master/app/shared/presentation/highlighting/powershell.js
+[ps]: https://github.com/OctopusDeploy/Library/blob/main/app/shared/presentation/highlighting/powershell.js
 [Christophe de Dinechin]: https://github.com/c3d
 [Taneli Vatanen]: https://github.com/Daiz-
 [Jen Evers-Corvina]: https://github.com/sevvie
@@ -792,7 +792,7 @@ We're going to redesign the old [demo/test suite][demo] into an interactive
 demo web app. If you're confident front-end developer or designer and want to
 help us with it, drop a comment into [the issue][#542] on GitHub.
 
-[test]: https://github.com/isagalaev/highlight.js/tree/master/test
+[test]: https://github.com/isagalaev/highlight.js/tree/main/test
 [demo]: https://highlightjs.org/static/test.html
 [#542]: https://github.com/isagalaev/highlight.js/issues/542
 [ci]: https://travis-ci.org/isagalaev/highlight.js

package/examples/component/toast/resources/highlight/README.md

@@ -182,5 +182,5 @@ Authors and contributors are listed in the [AUTHORS.en.txt][8] file.
 [4]: http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
 [5]: https://highlightjs.org/download/
 [6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html
-[7]: https://github.com/highlightjs/highlight.js/blob/master/LICENSE
-[8]: https://github.com/highlightjs/highlight.js/blob/master/AUTHORS.en.txt
+[7]: https://github.com/highlightjs/highlight.js/blob/main/LICENSE
+[8]: https://github.com/highlightjs/highlight.js/blob/main/AUTHORS.en.txt

package/examples/grid/covid/Util.mjs

@@ -142,7 +142,7 @@ class Util extends Base {
             return path;
         }
 
-        return `https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/${imageName}.png`;
+        return `https://raw.githubusercontent.com/neomjs/pages/main/resources/images/flaticon/country_flags/png/${imageName}.png`;
     }
 
     /**

package/examples/preloadingAssets/view/MainContainer.mjs

@@ -44,7 +44,7 @@ class MainContainer extends Viewport {
 
                 vdom: {
                     tag: 'img',
-                    src: 'https://raw.githubusercontent.com/neomjs/pages/master/resources/examples/ai_images/000150.jpg'
+                    src: 'https://raw.githubusercontent.com/neomjs/pages/main/resources/examples/ai_images/000150.jpg'
                 }
             }, {
                 tabButtonConfig: {
@@ -54,7 +54,7 @@ class MainContainer extends Viewport {
 
                 vdom: {
                     tag: 'img',
-                    src: 'https://raw.githubusercontent.com/neomjs/pages/master/resources/examples/ai_images/000074.jpg'
+                    src: 'https://raw.githubusercontent.com/neomjs/pages/main/resources/examples/ai_images/000074.jpg'
                 }
             }],
             /**

package/examples/preloadingAssets/view/MainContainerController.mjs

@@ -28,7 +28,7 @@ class MainContainerController extends Component {
 
         setTimeout(() => {
             Neo.ServiceWorker.preloadAssets({
-                files: ['https://raw.githubusercontent.com/neomjs/pages/master/resources/examples/ai_images/000074.jpg']
+                files: ['https://raw.githubusercontent.com/neomjs/pages/main/resources/examples/ai_images/000074.jpg']
             }).then(data => {
                 console.log(data);
             });

package/examples/table/covid/Util.mjs

@@ -142,7 +142,7 @@ class Util extends Base {
             return path;
         }
 
-        return `https://raw.githubusercontent.com/neomjs/pages/master/resources/images/flaticon/country_flags/png/${imageName}.png`;
+        return `https://raw.githubusercontent.com/neomjs/pages/main/resources/images/flaticon/country_flags/png/${imageName}.png`;
     }
 
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.9.4",
+    "version": "6.9.6",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

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

@@ -1,27 +1,27 @@
-.neo-floating {
-    top              : -10000px;
-    left             : -10000px;
-    position         : fixed;
-    z-index          : 1000;
-    background-color : var(--neo-background-color);
-}
-
-// Shadow at the top
-.neo-aligned-top {
-    box-shadow : 0px -2px 10px rgba(0, 0, 0, 0.3);
-}
-
 // Shadow at the bottom
 .neo-aligned-bottom {
-    box-shadow : 0px 2px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--aligned-bottom-box-shadow);
 }
 
 // Shadow at the left
 .neo-aligned-left {
-    box-shadow : -2px 0px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--aligned-left-box-shadow);
 }
 
 // Shadow at the right
 .neo-aligned-right {
-    box-shadow : 2px 0px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--aligned-right-box-shadow);
+}
+
+// Shadow at the top
+.neo-aligned-top {
+    box-shadow: var(--aligned-top-box-shadow);
+}
+
+.neo-floating {
+    background-color: var(--neo-background-color);
+    left            : -10000px;
+    position        : fixed;
+    top             : -10000px;
+    z-index         : 1000;
 }

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

@@ -0,0 +1,6 @@
+:root .neo-theme-dark {
+    --aligned-bottom-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+    --aligned-left-box-shadow  : -2px 0px 10px rgba(0, 0, 0, 0.3);
+    --aligned-right-box-shadow : 2px 0px 10px rgba(0, 0, 0, 0.3);
+    --aligned-top-box-shadow   : 0px -2px 10px rgba(0, 0, 0, 0.3);
+}

package/resources/scss/theme-dark/menu/List.scss

@@ -1,7 +1,6 @@
 :root .neo-theme-dark { // .neo-menu-list
     --menu-list-background-color              : #3c3f41;
     --menu-list-border-color                  : #2b2b2b;
-    --menu-list-box-shadow                    : 0 5px 10px rgba(0,0,0,.4);
     --menu-list-item-background-color         : inherit;
     --menu-list-item-background-color-disabled: inherit;
     --menu-list-item-background-color-hover   : inherit;

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

@@ -0,0 +1,6 @@
+:root .neo-theme-light {
+    --aligned-bottom-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+    --aligned-left-box-shadow  : -2px 0px 10px rgba(0, 0, 0, 0.3);
+    --aligned-right-box-shadow : 2px 0px 10px rgba(0, 0, 0, 0.3);
+    --aligned-top-box-shadow   : 0px -2px 10px rgba(0, 0, 0, 0.3);
+}

package/resources/scss/theme-light/menu/List.scss

@@ -1,7 +1,6 @@
 :root .neo-theme-light { // .neo-menu-list
     --menu-list-background-color              : #fff;
     --menu-list-border-color                  : #1c60a0;
-    --menu-list-box-shadow                    : 0 5px 10px rgba(0,0,0,.4);
     --menu-list-item-background-color         : inherit;
     --menu-list-item-background-color-disabled: inherit;
     --menu-list-item-background-color-hover   : inherit;

package/src/DefaultConfig.mjs

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

package/src/Neo.mjs

@@ -380,20 +380,25 @@ Neo = globalThis.Neo = Object.assign({
      * @memberOf module:Neo
      * @param {Object} target
      * @param {Object} source
+     * @param {Object} defaults
      * @returns {Object} target
      */
-    merge(target, source) {
+    merge(target, source, defaults) {
+        if (defaults) {
+            return Neo.merge(Neo.merge(target, defaults), source)
+        }
+
         for (const key in source) {
             const value = source[key];
 
             if (Neo.typeOf(value) === 'Object') {
-                target[key] = Neo.merge(target[key] || {}, value);
+                target[key] = Neo.merge(target[key] || {}, value)
             } else {
-                target[key] = value;
+                target[key] = value
             }
         }
 
-        return target;
+        return target
     },
 
     /**

package/src/component/Base.mjs

@@ -996,8 +996,9 @@ class Base extends CoreBase {
                 edgeAlign: value
             }
         }
+
         // merge the incoming alignment specification into the configured default
-        return Neo.merge(Neo.merge({}, me.constructor.config.align), value)
+        return Neo.merge({}, value, me.constructor.config.align)
     }
 
     /**

package/src/core/Base.mjs

@@ -71,6 +71,12 @@ class Base {
          * @protected
          */
         ntype: 'base',
+        /**
+         * While it is recommended to change the static delayable configs on class level,
+         * you can change it on instance level too. If not null, we will do a deep merge.
+         * @member {Object} delayable=null
+         */
+        delayable: null,
         /**
          * The unique component id
          * @member {String|null} id_=null
@@ -178,9 +184,11 @@ class Base {
      * Adjusts all methods inside static delayable
      */
     applyDelayable() {
-        let me = this;
+        let me            = this,
+            ctorDelayable = me.constructor.delayable,
+            delayable     = me.delayable ? Neo.merge({}, me.delayable, ctorDelayable) : ctorDelayable;
 
-        Object.entries(me.constructor.delayable).forEach(([key, value]) => {
+        Object.entries(delayable).forEach(([key, value]) => {
             let map = {
                 debounce() {me[key] = new debounce(me[key], me, value.timer)},
                 throttle() {me[key] = new throttle(me[key], me, value.timer)}