neo.mjs 6.17.2 → 6.18.1

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

@@ -1,3 +1,257 @@
+As you read in the <a href="#/learn/Events">Getting Started > Events</a> topic, components, stores, and many other objects fire events.
+
+
+<pre data-neo>
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        itemDefaults: {
+            module   : TextField,
+            listeners: {
+                change    : data => Neo.Main.log({value:data.value}), // Neo.Main.log logs to the main thread console
+                focusEnter: data => Neo.Main.log({value: `Entering ${data.component.labelText}`}) 
+            }
+        },
+
+        items: [{
+            labelText: 'First name'
+        }, {
+            labelText: 'Last name'
+        }]
+    }
+}
+Neo.setupClass(MainView);
+</pre>
+
+## Event listeners
+
+### In-line
+
+The event listener function can be coded in-line. Normally you want event handlers to be in a view's 
+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';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            labelText: 'Name',
+            listeners: {
+                change: data => Neo.Main.log({value:data.value})
+            }
+        }]
+    }
+}
+Neo.setupClass(MainView);
+</pre>
+
+### As a view method
+
+You can also use the `up.` qualifier to specify a method in the component's parent view. Like the
+in-line syntax you saw above, using the `up.` syntax might be convenient for simple classees, 
+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';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            labelText: 'Name',
+            listeners: { 
+                change: 'up.foo'
+            }
+        }]
+    }
+    foo(data){
+        Neo.Main.log({value:data.value})
+    }
+}
+Neo.setupClass(MainView);
+</pre>
+
+### As a controller method
+
+Despite the examples above, the most correct way of setting up event handlers is to use a controller.
+Any view class can specify a controller &mdash; wWhen the view is created a controller instance is
+also created. 
+
+<pre data-neo>
+import Controller from '../../../../src/controller/Component.mjs';
+
+class MainViewController extends Controller {
+    static config = {
+        className: 'Example.view.MainViewController'
+    }
+    foo(data){
+        Neo.Main.log({value:data.value})
+    }
+}
+Neo.setupClass(MainViewController);
+
+
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+class MainView extends Container {
+    static config = {
+        controller: {
+            module: MainViewController
+        },
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            labelText: 'Name',
+            listeners: { 
+                change: 'foo'
+            }
+        }]
+    }
+}
+Neo.setupClass(MainView);
+</pre>
+
+## Adding listeners procedurally
+
+Event listeners are normally specified declaratively, via the `listeners: {}` config. But occasionally you need to add
+a listener proccedurally.
+
+Any obversable class has an `addListener` method, along with an easier-to-type version called `on`.
+
+<pre data-neo>
+import Controller from '../../../../src/controller/Component.mjs';
+
+class MainViewController extends Controller {
+    static config = {
+        className: 'Example.view.MainViewController'
+    }
+    foo(data){
+        Neo.Main.log({value:data.value})
+    }
+    onComponentConstructed(){
+        debugger
+    }
+}
+Neo.setupClass(MainViewController);
+
+
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+class MainView extends Container {
+    static config = {
+        controller: {
+            module: MainViewController
+        },
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            labelText: 'Name',
+            listeners: { 
+                change: 'foo'
+            }
+        }]
+    }
+}
+Neo.setupClass(MainView);
+</pre>
+
+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';
+
+class MainViewController extends Controller {
+    static config = {
+        className: 'Example.view.MainViewController'
+    }
+    foo(data){
+        Neo.Main.log('foo' + {value:data.value}
+    }
+
+    // This is a controller lifecycle method run after the controller's view has been constructed
+    onComponentConstructed(){
+        // Note the use of this.getReference() -- that's used to get a component reference with the specified name
+        this.getReference('nameTextfield').on('change', this.foo, this)
+    }
+}
+Neo.setupClass(MainViewController);
+
+
+import Container from '../../../../src/container/Base.mjs';
+import TextField from '../../../../src/form/field/Text.mjs';
+
+class MainView extends Container {
+    static config = {
+        controller: {
+            module: MainViewController
+        },
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        items: [{
+            module   : TextField,
+            reference: 'nameTextfield', // This component can be fetched using this.getReference('nameTextfield')
+            labelText: 'Name'
+        }]
+    }
+}
+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.
+
+Events are fired for user actions, such as a button click event, a component receiving focus, or a field value changing. 
+Non-visual classes can also fire an event; for example, a `Neo.data.Store` fires a `load` event, and other events
+relating to changes to the store. The event handler if a function run when the event fires.
+
+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 
+might have a Save button, and in its click event handler you'd write logic to make a backend call. 
+
+Events can be fired for a state change, such as an input field's value changing, or something like a user event,
+like a button click or component focus.
+
+
+### When to use a binding
+
+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 
+
+
+
+##
+
 [Add content on listeners options here]
 
 How are events set up? The details don't really matter, but in case you're curious: 

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

@@ -20,7 +20,7 @@ Click on Preview, then use your mouse or trackpad to pan and zoom — the he
 If you move quickly, you might reach 20,000 or 30,000 delta updates per second. We've seen some examples that go over 40,000 updates per 
 second — but we've never actually hit the limit.
 
-<pre data-neo data-read-only>
+<pre data-neo>
 import Base from '../../../../src/container/Base.mjs';
 import Helix from '../../../../src/component/Helix.mjs';
 class Foo extends Base {

package/resources/images/logo/neo_logo_primary.svg

@@ -0,0 +1,6 @@
+<?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;">
+    <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-rule:nonzero;stroke:#3E63DD;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-rule:nonzero;stroke:#3E63DD;stroke-width:11.89px;"/>
+</svg>

package/resources/images/logo/neo_logo_text_primary.svg

@@ -0,0 +1,5 @@
+<svg width="696" height="157" viewBox="0 0 696 157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M210.202 131.678V34.1934H230.813L271.199 104.661V34.1934H288.329V131.678H267.718L227.331 61.3498V131.678H210.202ZM335.196 133.767C314.585 133.767 301.077 119.283 301.077 97.2797C301.077 75.5546 314.725 61.6283 334.361 61.6283C354.972 61.6283 367.505 74.9976 367.505 96.3048C367.505 98.3938 367.505 100.622 367.227 103.407H317.371C318.206 113.713 324.752 119.84 335.336 119.84C342.438 119.84 347.173 116.777 349.401 111.902H366.391C362.213 125.132 351.769 133.767 335.196 133.767ZM317.371 90.595H350.794V90.1773C350.794 81.2644 344.945 74.9976 334.361 74.9976C324.334 74.9976 317.928 81.2644 317.371 90.595ZM409.655 133.767C388.766 133.767 374.283 119.283 374.283 97.6975C374.283 76.1117 388.766 61.6283 409.655 61.6283C430.684 61.6283 445.168 76.1117 445.168 97.6975C445.168 119.283 430.684 133.767 409.655 133.767ZM391.412 97.6975C391.412 110.231 398.654 118.726 409.655 118.726C420.657 118.726 428.038 110.231 428.038 97.6975C428.038 85.1638 420.657 76.6687 409.655 76.6687C398.654 76.6687 391.412 85.1638 391.412 97.6975ZM456.426 131.678V110.51H476.062V131.678H456.426ZM491.419 131.678V63.7172H506.042V71.2374C509.941 64.5528 515.93 61.6283 523.868 61.6283C532.781 61.6283 539.326 65.8062 542.668 72.9086C547.403 65.2491 554.227 61.6283 562.444 61.6283C578.18 61.6283 587.233 71.516 587.233 88.6454V131.678H570.521V89.7595C570.521 81.2644 566.761 76.6687 559.38 76.6687C552.277 76.6687 547.542 82.1 547.542 90.1773V131.678H530.97V89.7595C530.97 81.2644 527.21 76.6687 519.829 76.6687C512.866 76.6687 507.992 82.2392 507.992 90.1773V131.678H491.419ZM588.801 156.745V141.844H598.271C601.753 141.844 602.867 140.312 602.867 135.856V63.7172H619.439V137.945C619.439 151.035 611.919 156.745 600.082 156.745H588.801ZM602.171 51.8798V34.8897H619.996V51.8798H602.171ZM660.026 133.767C641.504 133.767 630.363 126.246 629.666 111.902H646.796C647.353 117.612 652.227 120.397 660.583 120.397C668.103 120.397 672.699 117.194 672.699 112.181C672.699 107.864 669.357 105.635 663.368 105.078L652.506 103.964C639.833 102.572 631.895 95.0515 631.895 83.4926C631.895 69.9841 642.757 61.6283 660.026 61.6283C677.155 61.6283 688.018 68.87 688.853 83.0748H672.281C672.003 77.6436 667.268 75.1368 659.747 75.1368C652.645 75.1368 648.189 77.9221 648.189 82.657C648.189 86.6957 651.392 88.9239 658.215 89.7595L669.217 91.0128C682.03 92.5447 689.41 100.065 689.41 111.345C689.41 124.993 678.13 133.767 660.026 133.767Z" fill="black"/>
+<path d="M8.8412 127.508L33.6763 144.928L33.6753 105.744L33.675 94.3431L43.0227 100.871L112.335 149.272L135.026 135.569L8.8412 46.5755L8.8412 127.508Z" stroke="#3E63DD" stroke-width="11.8883"/>
+<path d="M144.867 30.6613L120.032 13.2409L120.033 52.4246L120.034 63.8259L110.686 57.2982L41.3738 8.89651L18.6823 22.6004L144.867 111.593L144.867 30.6613Z" stroke="#3E63DD" stroke-width="11.8883"/>
+</svg>

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

@@ -0,0 +1,3 @@
+.colors-bar-chart {
+    border: 1px solid #555;
+}

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

@@ -0,0 +1,11 @@
+.portal-header-toolbar, .neo-toolbar {
+    > * {
+        &:not(:last-child) {
+            margin-right: .5em;
+        }
+    }
+
+    .neo-checkboxfield {
+        margin-left: 1em;
+    }
+}

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

@@ -0,0 +1,3 @@
+.colors-pie-chart {
+    border: 1px solid #555;
+}

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

@@ -0,0 +1,64 @@
+$base-color: #1c60a0;
+
+.colors-table-container.neo-table-container {
+    width: 100%;
+
+    .color-1 {
+        background-color: $base-color;
+    }
+
+    .color-2 {
+        background-color: lighten($base-color, 5%);
+    }
+
+    .color-3 {
+        background-color: lighten($base-color, 10%);
+    }
+
+    .color-4 {
+        background-color: lighten($base-color, 15%);
+    }
+
+    .color-5 {
+        background-color: lighten($base-color, 20%);
+    }
+
+    .color-6 {
+        background-color: lighten($base-color, 25%);
+    }
+
+    .color-7 {
+        background-color: lighten($base-color, 30%);
+    }
+
+    .color-8 {
+        background-color: lighten($base-color, 35%);
+    }
+
+    .color-9 {
+        background-color: lighten($base-color, 40%);
+    }
+
+    .color-10 {
+        background-color: lighten($base-color, 45%);
+    }
+
+    .neo-index-column {
+        max-width: 40px;
+        min-width: 40px;
+        width    : 40px;
+    }
+
+    .neo-table-view {
+        .neo-table-row {
+            &:hover .neo-table-cell {
+                background-color: #d0aa72;
+                color           : #2b2b2b;
+            }
+        }
+    }
+
+    td, th {
+        min-width: 10%;
+    }
+}

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

@@ -0,0 +1,9 @@
+.colors-viewport {
+    padding: 2em;
+
+    > * {
+        &:not(:first-child) {
+            margin-top: 2em;
+        }
+    }
+}