neo.mjs 6.18.2 → 6.19.0

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

@@ -2,8 +2,8 @@ As you read in the <a href="#/learn/Events">Getting Started > Events</a> topic,
 
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -36,8 +36,8 @@ The event listener function can be coded in-line. Normally you want event handle
 controller, but for very simple situation it can be convenient to use this syntax.
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -63,8 +63,8 @@ in-line syntax you saw above, using the `up.` syntax might be convenient for sim
 or when you simply haven't gotten around to defining a view's controller.
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -93,7 +93,7 @@ Any view class can specify a controller &mdash; wWhen the view is created a cont
 also created. 
 
 <pre data-neo>
-import Controller from '../../../../src/controller/Component.mjs';
+import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -106,8 +106,8 @@ class MainViewController extends Controller {
 Neo.setupClass(MainViewController);
 
 
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -132,12 +132,12 @@ Neo.setupClass(MainView);
 ## Adding listeners procedurally
 
 Event listeners are normally specified declaratively, via the `listeners: {}` config. But occasionally you need to add
-a listener proccedurally.
+a listener procedurally.
 
-Any obversable class has an `addListener` method, along with an easier-to-type version called `on`.
+Any observable class has an `addListener` method, along with an easier-to-type version called `on`.
 
 <pre data-neo>
-import Controller from '../../../../src/controller/Component.mjs';
+import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -153,8 +153,8 @@ class MainViewController extends Controller {
 Neo.setupClass(MainViewController);
 
 
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -179,7 +179,7 @@ Neo.setupClass(MainView);
 The method specified in `on()` doesn't have to be an arrow function; you can use a controller function.
 
 <pre data-neo>
-import Controller from '../../../../src/controller/Component.mjs';
+import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -198,8 +198,8 @@ class MainViewController extends Controller {
 Neo.setupClass(MainViewController);
 
 
-import Container from '../../../../src/container/Base.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -220,7 +220,6 @@ Neo.setupClass(MainView);
 </pre>
 
 
-
 ## Events versus binding
 
 Events and binding are similar concepts &mdash; both are a way to detect, and react to, some kind of action or change.
@@ -232,6 +231,7 @@ relating to changes to the store. The event handler if a function run when the e
 A binding detects a changed view model value, and assigns it to a property. 
 
 
+
 ### When to use an event
 
 Events and event handlers are used when you need to run non-trivial logic in response to the event. For example, you 
@@ -246,9 +246,87 @@ like a button click or component focus.
 A binding is a way to keep properties in sync with values in the view model hierarchy. For example, button text, 
 field values, or store properties, can simultaneously reflect the same view model property. That's pretty handy, 
 but keep in mind that a class can define a property as a _lifecycle property_. That means that updating a property
-can may result in complex logic being triggered. Furthermore, a _two way binding_ meansx 
+can may result in complex logic being triggered. Furthermore, a _two way binding_ means a change to a property 
+will automatically be reflected in the view model.
+
+### A simple comparison
+
+To contrast syntax, and to illustrate the simplicity of a binding, let's look at two exmaples of updating a component
+to reflect the value of a text field. THe first example uses events; the second uses bindings.
+
+<pre data-neo>
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
+import Component from '../component/Base.mjs';
+
+class MainView extends Container {    
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            labelText: 'Text',
+            reference: 'textFieldOne',
+            value: 'Hello',
+            listeners: {
+                change    : 'up.onTextChange'
+            }
+        }, {
+            module   : TextField,
+            labelText: 'Text',
+            reference: 'textFieldTwo',
+            value: 'world!',
+            listeners: {
+                change    : 'up.onTextChange'
+            }
+        }, {
+            module: Component,
+            reference: 'foo',
+        }]        
+    }
+    onTextChange(data){
+        this.getReference('foo').html = `${this.getReference('textFieldOne').value} ${this.getReference('textFieldTwo').value}`
+    }
+}
+Neo.setupClass(MainView);
+</pre>
 
+<pre data-neo>
+import Container from '../container/Base.mjs';
+import TextField from '../form/field/Text.mjs';
+import Component from '../component/Base.mjs';
 
+class MainView extends Container {    
+    static config = {
+        className: 'Example.view.MainView',
+        model: {
+            data: {
+                foo: 'Hello',
+                bar: 'world!'
+            }
+        },
+        layout   : {ntype:'vbox', align:'start'},
+        
+        items: [{
+            module   : TextField,
+            labelText: 'Text',
+            bind: {value: {twoWay: true, value: data => data.foo}}
+        }, {
+            module   : TextField,
+            labelText: 'Text',
+            bind: {value: {twoWay: true, value: data => data.bar}}
+        }, {
+            module: Component,
+            bind: {html: data => `${data.foo} ${data.bar}`}
+        }]
+    }
+    onTextChange(data){
+        this.getReference('foo').html = data.value;
+    }
+}
+Neo.setupClass(MainView);
+</pre>
 
 ##
 

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

@@ -16,9 +16,9 @@ Since we also have Data Stores (tabular data), we chose to use the name VM to av
 ## Inline Models
 ### Direct Bindings
 <pre data-neo>
-import Button    from  '../../../../src/button/Base.mjs';
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+import Label     from '../component/Label.mjs';
 
 class MainView extends Container {
     static config = {
@@ -64,9 +64,9 @@ We can easily bind 1:1 to specific data props using the following syntax:</br>
 
 ### Bindings with multiple data props
 <pre data-neo>
-import Button    from  '../../../../src/button/Base.mjs';
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+import Label     from '../component/Label.mjs';
 
 class MainView extends Container {
     static config = {
@@ -131,9 +131,9 @@ data.component equals to the Button instance itself. Since the Button instance d
 
 ### Nested Inline Models
 <pre data-neo>
-import Button    from  '../../../../src/button/Base.mjs';
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+import Label     from '../component/Label.mjs';
 
 class MainView extends Container {
     static config = {
@@ -206,9 +206,9 @@ Hint: Modify the example code (Button handler) to try it out right away!
 
 ### Nested Data Properties
 <pre data-neo>
-import Button    from  '../../../../src/button/Base.mjs';
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+import Label     from '../component/Label.mjs';
 
 class MainView extends Container {
     static config = {
@@ -265,11 +265,11 @@ Hint: This will not override left out nested data props (lastname in this case).
 
 ### Dialog connecting to a Container
 <pre data-neo>
-import Controller from '../../../../src/controller/Component.mjs';
-import Dialog     from '../../../../src/dialog/Base.mjs';
-import Panel      from '../../../../src/container/Panel.mjs';
-import TextField  from '../../../../src/form/field/Text.mjs';
-import Viewport   from '../../../../src/container/Viewport.mjs';
+import Controller from '../controller/Component.mjs';
+import Dialog     from '../dialog/Base.mjs';
+import Panel      from '../container/Panel.mjs';
+import TextField  from '../form/field/Text.mjs';
+import Viewport   from '../container/Viewport.mjs';
 
 class EditUserDialogController extends Controller {
     static config = {
@@ -391,10 +391,10 @@ When your models contain many data props or need custom logic, you can easily mo
 
 ### Direct Bindings
 <pre data-neo>
-import Button    from  '../../../../src/button/Base.mjs';
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
-import ViewModel from  '../../../../src/model/Component.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
+import Label     from '../component/Label.mjs';
+import ViewModel from '../model/Component.mjs';
 
 class MainViewModel extends ViewModel {
     static config = {

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

@@ -11,9 +11,9 @@ Here's an example with one button. Clicking on the button will disable it.
 As you can see, the handler uses the component reference pass in via `data.component`.
 
 <pre data-neo>
-import Button     from '../../../../src/button/Base.mjs';
-import Container  from '../../../../src/container/Base.mjs';
-import Controller from '../../../../src/controller/Component.mjs';
+import Button     from '../button/Base.mjs';
+import Container  from '../container/Base.mjs';
+import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -48,9 +48,9 @@ you tag the component you need with a `reference` config, then use `getReference
 the controller.
 
 <pre data-neo>
-import Button     from '../../../../src/button/Base.mjs';
-import Container  from '../../../../src/container/Base.mjs';
-import Controller from '../../../../src/controller/Component.mjs';
+import Button     from '../button/Base.mjs';
+import Container  from '../container/Base.mjs';
+import Controller from '../controller/Component.mjs';
 
 class MainViewController extends Controller {
     static config = {
@@ -103,8 +103,8 @@ The following example gets a reference to the _Learn_ button at the top of this
 Again &mdash; that use of `Neo.findFirst()` might be handy when debugging, but it should never be used in app logic.
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {

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

@@ -4,15 +4,16 @@ To code a live preview, enclose the code in a `pre` tag with the `data-neo` attr
 
 Imports are relative to the portal app running within the framework. That means
 Neo.mjs imports should be coded to go up four levels, then look into the `src`
-directory. For example, to import _container_, use `import Base from '../../../../src/container/Base.mjs`
+directory. For example, to import _container_, use `import Base from '../container/Base.mjs`
 
 You can define as many classes you need, such as component models and controllers, but the the _last_
 class being defined is assumed to be the view being rendered. In other words, if the final class definition is a component, it's rendered.
 
 <pre data-neo>
-import Base from '../../../../src/container/Base.mjs';
-import Button from '../../../../src/button/Base.mjs';
-import Split from '../../../../src/button/Split.mjs';
+import Base   from '../container/Base.mjs';
+import Button from '../button/Base.mjs';
+import Split  from '../button/Split.mjs';
+
 class Bar extends Base {
     static config = {
         ntype: 'demoFoo',

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

@@ -4,9 +4,9 @@ In case you did not work with neo yet, but come from a more HTML driven ecosyste
 you could achieve the task in a similar way.
 
 <pre data-neo>
-import Component from '../../../../src/component/Base.mjs';
-import NeoArray  from '../../../../src/util/Array.mjs';
-import VdomUtil  from '../../../../src/util/VDom.mjs';
+import Component from '../component/Base.mjs';
+import NeoArray  from '../util/Array.mjs';
+import VdomUtil  from '../util/VDom.mjs';
 
 class MainComponent extends Component {
     static config = {
@@ -117,12 +117,12 @@ Neo.setupClass(MainComponent);
 content
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
-import List      from '../../../../src/list/Base.mjs';
-import Model     from '../../../../src/data/Model.mjs';
-import Store     from '../../../../src/data/Store.mjs';
-import TextField from '../../../../src/form/field/Text.mjs';
-import Toolbar   from '../../../../src/toolbar/Base.mjs';
+import Container from '../container/Base.mjs';
+import List      from '../list/Base.mjs';
+import Model     from '../data/Model.mjs';
+import Store     from '../data/Store.mjs';
+import TextField from '../form/field/Text.mjs';
+import Toolbar   from '../toolbar/Base.mjs';
 
 class TodoListModel extends Model {
     static config = {

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

@@ -50,8 +50,8 @@ icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web
 and the ability to launch browser windows &mdash; all integrated within a single app &mdash; is a unique feature of Neo.mjs!
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {
@@ -65,4 +65,4 @@ class MainView extends Container {
 }
 
 Neo.setupClass(MainView);
-</pre>
+</pre>

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

@@ -15,8 +15,8 @@ running the code. Even though it's running in a new window, it's still part of t
 seamlessly share events, data, etc. — the code doesn't care that some code is running in a
 separate window.
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Container from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {

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

@@ -21,8 +21,8 @@ If you move quickly, you might reach 20,000 or 30,000 delta updates per second.
 second — but we've never actually hit the limit.
 
 <pre data-neo>
-import Base from '../../../../src/container/Base.mjs';
-import Helix from '../../../../src/component/Helix.mjs';
+import Base from '../container/Base.mjs';
+import Helix from '../component/Helix.mjs';
 class Foo extends Base {
     static config = {
         className: 'Foo',

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

@@ -18,7 +18,8 @@
         {"name": "Shared Bindable Data",                    "parentId": "GettingStarted",    "isLeaf": true,  "id": "ComponentModels"},
     {"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": "Earthquakes",                             "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "Earthquakes", "collapsed":  true},
+
         {"name": "Todo List",                               "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "TodoList"},
     {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth",  "collapsed":  true},
         {"name": "Config",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Config"},

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

@@ -82,52 +82,6 @@
     }
 }
 
-.hello-world {
-    animation-timeline: view(block 100% -500%);
-
-    animation-name: appear-animation;
-    animation-fill-mode: both;
-    animation-duration: 1ms; /* Firefox requires this to apply the animation */
-    animation-timing-function: linear;
-}
-
-@keyframes appear-animation {
-    0% {
-        transform: translateX(-400%);
-        opacity  : 0;
-    }
-    90% {
-        opacity: .3;
-    }
-    100% {
-        transform: translateX(0);
-        opacity  : 1;
-    }
-}
-
-.cool-stuff {
-    animation-timeline       : view(block 100% -500%);
-    animation-name           : appear-cool-stuff;
-    animation-fill-mode      : both;
-    animation-duration       : 1ms; /* Firefox requires this to apply the animation */
-    animation-timing-function: linear;
-}
-
-@keyframes appear-cool-stuff {
-    0% {
-        transform: translateX(400%);
-        opacity  : 0;
-    }
-    90% {
-        opacity: .3;
-    }
-    100% {
-        transform: translateX(0);
-        opacity  : 1;
-    }
-}
-
-
 //.page {
 //  scroll-timeline: --page block;
 //}

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

@@ -1,3 +1,18 @@
-.learnneo-viewport {
+.neo-viewport {
+    .neo-layout-cube {
+        &.neo-animate {
+            .neo-box {
+                transition: transform 800ms ease-in-out;
+            }
+        }
 
+        .neo-face {
+            opacity: 0.8;
+            transition: opacity 50ms ease-out;
+        }
+
+        .neo-plane {
+            transform: translateZ(0px);
+        }
+    }
 }

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

@@ -1,18 +1,18 @@
-.website-blog-container {
-    .website-blog-searchfield {
-        transition: margin var(--website-transition-duration) ease-out;
+.portal-blog-container {
+    .portal-blog-searchfield {
+        transition: margin var(--portal-transition-duration) ease-out;
         width     : 240px;
 
         @media (max-height: 400px), (max-width: 600px) {
-            margin: 5px;
+            margin: 5px auto;
         }
 
         @media (min-height: 401px) and (min-width: 601px) {
-            margin: 10px;
+            margin: 10px auto;
         }
     }
 
-    .website-blog-toolbar {
-        background-color: var(--website-blog-toolbar-background-color);
+    .portal-blog-toolbar {
+        background-color: var(--portal-blog-toolbar-background-color);
     }
 }

package/resources/scss/src/apps/portal/blog/List.scss

@@ -1,15 +1,17 @@
-.website-blog-list.neo-list {
-    transition: padding var(--website-transition-duration) ease-out;
+.portal-blog-list.neo-list {
+    transition: padding var(--portal-transition-duration) ease-out;
 
     .neo-list-item {
-        cursor     : default;
-        display    : flex;
-        max-width  : 800px;
-        overflow   : hidden;
-        padding    : 0;
-        transition : height var(--website-transition-duration) ease-out, margin-bottom var(--website-transition-duration) ease-out;
-        white-space: normal;
-        width      : 100%;
+        cursor      : default;
+        display     : flex;
+        margin-left : auto;
+        margin-right: auto;
+        max-width   : 800px;
+        overflow    : hidden;
+        padding     : 0;
+        transition  : height var(--portal-transition-duration) ease-out, margin-bottom var(--portal-transition-duration) ease-out;
+        white-space : normal;
+        width       : 100%;
 
         .content {
             flex: 1;
@@ -32,7 +34,7 @@
             display    : inline-block;
             margin-left: 10px;
             text-shadow: 1px 1px 1px #000, 1px 1px 1px #fff;
-            transition : font-size var(--website-transition-duration) ease-out;
+            transition : font-size var(--portal-transition-duration) ease-out;
         }
 
         .neo-full-size {
@@ -41,13 +43,13 @@
         }
 
         .neo-inner-details {
-            transition: line-height var(--website-transition-duration) ease-out;
+            transition: line-height var(--portal-transition-duration) ease-out;
         }
 
         .neo-item-bottom-position {
             bottom    : 0;
             left      : 0;
-            transition: margin var(--website-transition-duration) ease-out;
+            transition: margin var(--portal-transition-duration) ease-out;
         }
 
         .neo-item-top-position {
@@ -55,11 +57,13 @@
             right      : 0;
             text-align : end;
             text-shadow: 1px 1px 1px #000, 1px 1px 1px #fff;
-            transition : font-size var(--website-transition-duration) ease-out, margin var(--website-transition-duration) ease-out;
+            transition : font-size var(--portal-transition-duration) ease-out, margin var(--portal-transition-duration) ease-out;
         }
 
         .neo-relative {
+            height  : 100%;
             position: relative;
+            width   : 100%;
         }
 
         .neo-title {
@@ -78,13 +82,13 @@
         .neo-top-20 {
             align-items: center;
             display    : flex;
-            transition : margin var(--website-transition-duration) ease-out;
+            transition : margin var(--portal-transition-duration) ease-out;
         }
 
         .neo-user-image {
             border-radius: 50%;
             display      : inline-block;
-            transition   : height var(--website-transition-duration) ease-out, width var(--website-transition-duration) ease-out;
+            transition   : height var(--portal-transition-duration) ease-out, width var(--portal-transition-duration) ease-out;
         }
 
         .preview-image {