neo.mjs 6.20.1 → 6.22.0

package/docs/app/view/classdetails/TutorialComponent.mjs

@@ -48,12 +48,12 @@ class TutorialComponent extends Component {
             url    = '../../docs/tutorials/' + me.fileName;
 
         Neo.Xhr[isJson ? 'promiseJson' : 'promiseRequest']({
-            url: url
+            url
         }).then(data => {
-            setTimeout(() => { // ensure we are not mounting
+            me.timeout(100).then(() => { // ensure we are not mounting
                 me.applySourceCode(isJson ? data.json : data.response);
-            }, 100);
-        });
+            })
+        })
     }
 
     /**
@@ -64,16 +64,16 @@ class TutorialComponent extends Component {
         let me = this;
 
         if (me.fileType === 'json') {
-            me.vdom.cn = data;
+            me.vdom.cn = data
         } else {
-            me.vdom.innerHTML = data;
+            me.vdom.innerHTML = data
         }
 
         me.update();
 
-        setTimeout(() => {
-            TutorialComponent.syntaxHighlight();
-        }, 50);
+        me.timeout(50).then(() => {
+            TutorialComponent.syntaxHighlight()
+        })
     }
 
     /**

package/examples/ServiceWorker.mjs

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

package/examples/component/coronaGallery/CountryGallery.mjs

@@ -176,10 +176,12 @@ class CountryGallery extends Gallery {
     onStoreLoad(items) {
         super.onStoreLoad(items);
 
-        setTimeout(() => {
-            this.selectOnMount = true;
-            this.afterSetMounted(true, false);
-        }, Neo.config.environment === 'development' ? 200 : 500);
+        let me = this;
+
+        me.timeout(Neo.config.environment === 'development' ? 200 : 500).then(() => {
+            me.selectOnMount = true;
+            me.afterSetMounted(true, false)
+        })
     }
 }
 

package/examples/component/helix/Viewport.mjs

@@ -275,7 +275,7 @@ class Viewport extends BaseViewport {
             });
 
             if (me.showGitHubStarButton) {
-                setTimeout(() => {
+                me.timeout(200).then(() => {
                     let {windowId}  = me,
                         {windowIds} = Viewport;
 
@@ -289,7 +289,7 @@ class Viewport extends BaseViewport {
                             windowId
                         })
                     }
-                }, 200)
+                })
             }
         }
     }

package/examples/list/circle/MainContainer.mjs

@@ -85,7 +85,7 @@ class MainContainer extends ConfigurationViewport {
             name     : 'group2',
             style    : {marginTop: '10px'},
             value    : me.exampleComponent.store.getAt(1).name
-        }];
+        }]
     }
 
     /**
@@ -94,7 +94,7 @@ class MainContainer extends ConfigurationViewport {
      */
     changeSorting(direction, data) {
         if (data.value) {
-            this.exampleComponent.store.sorters[0].direction = direction;
+            this.exampleComponent.store.sorters[0].direction = direction
         }
     }
 
@@ -112,7 +112,7 @@ class MainContainer extends ConfigurationViewport {
 
         list.store.on('sort', this.onStoreSort, this);
 
-        return list;
+        return list
     }
 
     /**
@@ -120,20 +120,20 @@ class MainContainer extends ConfigurationViewport {
      * @param {Object} data
      */
     onGroupNameChange(index, data) {
-        this.exampleComponent.items[index].title = data.value;
+        this.exampleComponent.items[index].title = data.value
     }
 
     /**
      * @param {Object} data
      */
     onStoreSort(data) {
-        setTimeout(() => {
+        this.timeout(10).then(() => {
             let me    = this,
                 items = me.exampleComponent.items;
 
             me.down({name: 'group1'}).value = items[0].title;
-            me.down({name: 'group2'}).value = items[1].title;
-        }, 10);
+            me.down({name: 'group2'}).value = items[1].title
+        })
     }
 }
 

package/examples/preloadingAssets/view/MainContainerController.mjs

@@ -17,7 +17,7 @@ class MainContainerController extends Component {
      * @param {Object} data
      */
     onActiveIndexChange(data) {
-        console.log('onActiveIndexChange', data);
+        console.log('onActiveIndexChange', data)
     }
 
     /**
@@ -26,13 +26,13 @@ class MainContainerController extends Component {
     onMounted(id) {
         console.log('onMounted', id);
 
-        setTimeout(() => {
+        this.timeout(3000).then(() => {
             Neo.ServiceWorker.preloadAssets({
                 files: ['https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/examples/ai_images/000074.jpg']
             }).then(data => {
-                console.log(data);
-            });
-        }, 3000)
+                console.log(data)
+            })
+        })
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.20.1",
+    "version": "6.22.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -52,15 +52,15 @@
         "envinfo": "^7.13.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^10.1.2",
-        "marked": "^13.0.2",
+        "inquirer": "^10.1.4",
+        "marked": "^13.0.3",
         "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.39",
+        "postcss": "^8.4.40",
         "sass": "^1.77.8",
         "siesta-lite": "5.5.2",
-        "url": "^0.11.3",
+        "url": "^0.11.4",
         "webpack": "^5.93.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.4",

package/resources/data/deck/learnneo/pages/GuideEvents.md

@@ -328,11 +328,9 @@ class MainView extends Container {
 Neo.setupClass(MainView);
 </pre>
 
-##
+##How are events set up?
 
-[Add content on listeners options here]
-
-How are events set up? The details don't really matter, but in case you're curious: 
+The details don't really matter, but in case you're curious: 
 Neo.mjs has a `Neo.core.Observable` class that can be mixed into any class. It maintains 
 a `listeners` object map that's a key-value pair, where the key is the event name, and 
 the value is an array of function references. The first time a listener is added, an 

package/resources/data/deck/learnneo/pages/WhyNeo-Features.md

@@ -0,0 +1,46 @@
+###Multi-Window Apps
+
+- No need for a native shell (such as Electron)
+- Sharing data across Windows
+- Sharing state across Windows
+- Moving components across windows while keeping the same JS instances
+
+###Multi-threading
+
+- Following the OMT (Off the Main-Thread) paradigm
+- Your apps & the framework live within an application worker
+- Non-blocking, no-freeze, user interaction responses, even for heavy data i/o, processing, and intensive, complex screen updating
+- Additional Workers for OffscreenCanvas, Data, Delta-Updates & Tasks
+- A ServiceWorker connected to the App Worker for predictive Caching
+
+###Modern JavaScript directly in your Browser
+
+- The Dev-Mode runs without the need for Transpilations or Compilations
+- Using the latest ECMAScript Features, as soon as the Browser Support is there
+- Simple and powerful Debugging
+- Reduced Development Costs
+
+
+###Powerful Component-Library
+
+- Declarative component-trees
+- High order components
+- Many out-of-the-box Components, including nested lazy-loaded forms
+- Multiple themes, which can get nested
+
+###Elegant State Management
+
+- Multiple communicating state-providers
+- Observable
+- Supporting different architectures like MVVM without enforcing them
+
+
+###Core Features
+
+- RPC Layer (cross-realm, including Backends)
+- Extensibility
+- Scalability
+- Class Config System
+- Drag & Drop'
+- Mixins, Plugins & Main-Thread Addons
+

package/resources/data/deck/learnneo/pages/WhyNeo-Intro.md

@@ -1,11 +1,10 @@
-Why would an organization choose Neo.mjs?
+Why do organizations choose Neo.mjs?
 
-- There are technical advantages relating to app development and debugging.
+- Neo.mjs provides a lightning fast user experience, and is unique in its ability to allow multi-window applications.
 
-- For managerial reasons, because Neo.mjs scales well, is coded in standards-based
-modular JavaSciript.
+- Neo.mjs applications scale well, from simple to extremely complex
+
+- Neo.mjs uses standards-based Javascript, without library-specific addons or special transpilation
 
-- For strategic reasons — Neo.mjs provides a lightning fast user experience,
-and is unique in its ability to allow multi-window applications.
 
 Read on to learn more about Neo.mjs key features and benefits...

package/resources/data/deck/learnneo/pages/WhyNeo-Multi-Window.md

@@ -1,4 +1,4 @@
-Neo.mjs applications can also launch as <i>shared web workers</i>, which allows you to have a single 
+Neo.mjs applications can also launch using <i>shared web workers</i>, which allows you to have a single 
 application run in multiple browser windows; those windows can be moved to multiple monitors.
 
 For example, you can have a data analysis application with a control panel on one monitor, 

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

@@ -1,12 +1,13 @@
 {"data": [
     {"name":  "Welcome!",                                   "parentId": null,                "isLeaf":  true, "id": "Welcome" },
-    {"name": "Why Neo.mjs?",                                "parentId": null,                "isLeaf": false, "id": "WhyNeo"},
+    {"name": "Benefits?",                                "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"},
         {"name": "Extreme Speed",                           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Speed"},
-        {"name": "Quick Application Development",           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Quick"},
         {"name": "Multi-Window Applications",               "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Multi-Window"},
+        {"name": "Quick Application Development",           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Quick"},
         {"name": "Complexity and Effort",                   "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Effort"},
+        {"name": "Features and Benefits Summary",           "parentId": "WhyNeo",            "isLeaf": true,  "id": "WhyNeo-Features"},
     {"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"},

package/resources/images/logo/neo_logo_favicon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 157 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <style>
+        path {
+            stroke: #3E63DD;
+        }
+        @media (prefers-color-scheme: dark) {
+            path {
+                stroke: #fff;
+            }
+        }
+    </style>
+    <path d="M8.841,127.508L33.676,144.928L33.675,105.744L33.675,94.343L43.023,100.871L112.335,149.272L135.026,135.569L8.841,46.576L8.841,127.508Z" style="fill:white;fill-opacity:0;fill-rule:nonzero;stroke-width:11.89px;"/>
+    <path d="M144.867,30.661L120.032,13.241L120.033,52.425L120.034,63.826L110.686,57.298L41.374,8.897L18.682,22.6L144.867,111.593L144.867,30.661Z" style="fill:white;fill-opacity:0;fill-rule:nonzero;stroke-width:11.89px;"/>
+</svg>

package/resources/scss/src/apps/colors/HeaderToolbar.scss

@@ -1,4 +1,4 @@
-.portal-header-toolbar, .neo-toolbar {
+.colors-header-toolbar.neo-toolbar {
     > * {
         &:not(:last-child) {
             margin-right: .5em;
@@ -8,4 +8,26 @@
     .neo-checkboxfield {
         margin-left: 1em;
     }
+
+    @media (max-width: 600px) {
+        .header-spacer {
+            display: none;
+        }
+
+        .neo-checkboxfield {
+            display: none;
+        }
+
+        .neo-button {
+            .neo-button-glyph {
+                margin-right: 0;
+            }
+
+            .neo-button-text {
+                &:nth-child(2) {
+                    display: none;
+                }
+            }
+        }
+    }
 }

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

@@ -6,4 +6,14 @@
             margin-top: 2em;
         }
     }
+
+    @media (max-width: 600px) {
+        padding: .1em;
+
+        > * {
+            &:not(:first-child) {
+                margin-top: .2em;
+            }
+        }
+    }
 }

package/resources/scss/src/apps/portal/HeaderToolbar.scss

@@ -1,5 +1,6 @@
-.learnneo-header-toolbar {
-    border-bottom: 1px solid #f2f2f2;
+.portal-header-toolbar {
+    box-shadow: 0 5px 10px rgba(0,0,0,.3);
+    z-index   : 8;
 
     .logo {
         margin-left: 1em;
@@ -37,11 +38,10 @@
 
     .separate-bar {
         animation: fade-in-animation 200ms linear;
+        box-shadow: 0 5px 10px rgba(0,0,0,.3);
         position: absolute;
-        right   : 20px;
-        top     : 60px;
-        transform: rotate(0);
-        width   : 40px;
+        right   : 0;
+        top     : 58px;
         z-index  : 9;
     }
 
@@ -51,7 +51,7 @@
     }
 }
 
-.vector {
+.logo-container {
     animation: fade-and-scale-animation auto linear;
     animation-timeline: --page-scroll;
 }

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

@@ -1,4 +1,14 @@
 .neo-viewport {
+    // sometimes when transitioning between card & cube layouts, the flex value does get lost
+    // see: https://github.com/neomjs/neo/issues/5637
+    .portal-main-content {
+        flex: 1 1 auto;
+
+        > * {
+            flex: 1 0 100%;
+        }
+    }
+
     .neo-layout-cube {
         &.neo-animate {
             .neo-box {

package/resources/scss/src/apps/portal/about/Container.scss

@@ -0,0 +1,4 @@
+.portal-about-container {
+    overflow-y: auto;
+    padding   : 0 3em 3em 3em;
+}

package/resources/scss/src/apps/portal/about/MemberContainer.scss

@@ -0,0 +1,70 @@
+.portal-about-member-container {
+    border   : 1px solid var(--sem-color-border-default);
+    min-width: 600px;
+    padding  : 1em 1em 4em;
+    position : relative;
+
+    &:not(:nth-child(2)) {
+        margin-top: 1em;
+    }
+
+    .portal-profile-component {
+        display: flex;
+
+        h2.portal-profile-name {
+            margin: .3em 0;
+        }
+
+        .portal-profile-content {
+            margin-top: 2em;
+        }
+
+        .portal-profile-location {
+            color       : #777;
+            font-family : "Font Awesome 6 Free";
+            font-style  : normal;
+            font-weight : 600;
+            margin-right: .5em;
+
+            &:before {
+                content: "\f3c5";
+            }
+        }
+
+        .portal-profile-picture {
+            border-radius: 50%;
+            height       : 150px;
+            margin-right : 2em;
+            width        : 150px;
+        }
+    }
+
+    .portal-profiles {
+        padding : 0;
+        position: absolute;
+        right   : .5em;
+
+        .portal-profile {
+            font-size: 2em;
+        }
+    }
+
+    @media (max-width: 600px) {
+        min-width: 100%;
+        padding  : 1em;
+
+        .portal-profiles {
+            flex-direction: column;
+            right         : 0;
+            top           : 0;
+        }
+
+        .portal-profile-component {
+            flex-direction: column;
+
+            .portal-profile-content {
+                margin-top: 1em;
+            }
+        }
+    }
+}

package/resources/scss/src/apps/portal/home/FooterContainer.scss

@@ -28,4 +28,16 @@
         background-color: transparent;
         color           : white;
     }
+
+    @media (max-width: 600px) {
+        padding: 1em;
+
+        h2.neo-h2 {
+            font-size: 1.2rem;
+        }
+
+        .neo-button {
+            padding: 0 3px;
+        }
+    }
 }

package/resources/scss/src/apps/portal/home/parts/BaseContainer.scss

@@ -14,22 +14,22 @@
         100% {opacity: 1; transform: translateX(0);}
     }
 
-    &:not(:first-child) {
-        &:not(:last-child) {
-            animation-timeline       : view(block 100% -500%);
-            animation-fill-mode      : both;
-            animation-duration       : 1ms; /* Firefox requires this to apply the animation */
-            animation-timing-function: linear;
-
-            &:nth-child(even) {
-                animation-name: appear-right;
-            }
-
-            &:nth-child(odd) {
-                animation-name: appear-left;
-            }
-        }
-    }
+    // &:not(:first-child) {
+    //     &:not(:last-child) {
+    //         animation-timeline       : view(block 100% -500%);
+    //         animation-fill-mode      : both;
+    //         animation-duration       : 1ms; /* Firefox requires this to apply the animation */
+    //         animation-timing-function: linear;
+
+    //         &:nth-child(even) {
+    //             animation-name: appear-right;
+    //         }
+
+    //         &:nth-child(odd) {
+    //             animation-name: appear-left;
+    //         }
+    //     }
+    // }
 
     .neo-content {
         font-size: min(max(2.3vw, 16px), 30px);

package/resources/scss/src/apps/portal/home/parts/MainNeo.scss

@@ -1,35 +1,90 @@
+@font-face {
+    font-family: "GT-Planar";
+    src: url("../../../../../../../../resources/fonts/GT-Planar-Regular.otf") format("opentype");
+}
 .portal-home-main-neo.portal-home-content-view {
     padding: 3em;
 
+    .logo-container {
+        display        : flex;
+        flex-direction : row;
+        flex-wrap      : wrap;
+        gap            : 20px;
+        min-width      : 240px;
+        min-height     : 130px;
+    }
+
     .button-group {
         display       : flex;
         flex-direction: row-reverse;
         gap           : 8px;
+        margin        : 2rem 0px;
     }
 
     .neo-h1 {
-        margin: 3rem;
+        font-size  : 110px;
+        font-family: "GT-Planar";
+    }
+
+    .neo-h2 {
+        margin: 2rem;
+    }
+
+    .neo-h3 {
+        margin   : 1rem 14rem;
+        max-width: 900px;
     }
 
     .vector {
-        background-image   : url("../../../../../../../../resources/images/logo/neo_logo_text_primary.svg");
+        background-image   : url("../../../../../../../../resources/images/logo/neo_logo_primary.svg");
         background-position: center center;
         background-repeat  : no-repeat;
         background-size    : contain;
         height             : 10VW;
         max-height         : 130px;
-        width              : 100%;
+        min-height         : 120px;
+        min-width          : 140px;
     }
 
-    @media (max-width: 600px) {
-        padding: 3em 0.5em;
+    @media (max-width: 1000px) {
+        .neo-h3 {
+            margin: 1rem 10rem;
+        }
+    }
 
-        .neo-h1 {
-            margin: 2em 0;
+    @media (max-width: 900px) {
+        .neo-h3 {
+            margin: 1rem 7rem;
+        }
+    }
+
+    @media (max-width: 645px) {
+        padding: 1.5em 0.5em;
+
+        .neo-h2 {
+            margin: 0.5rem 0;
+        }
+
+        .neo-h3 {
+            margin: 1rem 2rem;
         }
 
         .vector {
             height: 17VW;
         }
+
+        .button-group {
+            margin: 0.5rem 0;
+        }
+    }
+
+    @media (max-width: 500px) {
+        .neo-h1 {
+            font-size: 100px;
+        }
+
+        .neo-h2 {
+            margin: 0.5rem 2rem;
+        }
     }
 }

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

@@ -11,6 +11,7 @@
     pre[data-javascript] {
         border       : thin solid lightgray;
         border-radius: 4px;
+        min-width    : fit-content;
         padding      : 12px;
     }