neo.mjs 6.13.0 → 6.15.0

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

@@ -1,3 +1,5 @@
+## Introduction
+
 All components fire events. For example, form fields fire a `change` event, various 
 focus events, and others. Some other types fire events too, such as `Neo.data.Store`, 
 which fires a `load` event after the store is loaded with data.
@@ -5,34 +7,35 @@ which fires a `load` event after the store is loaded with data.
 Some terminology related to events is that events are _fired_, and as a result, some 
 event _handler_ — or _listener_ — is run.
 
+## Listeners
+
 To specify an event handler, use `listeners: {}`, specifying in as many event/handler
 pairs as you need. 
 
 The code below shows two text fields, with `listeners` for `change` and `focusEnter`.
-(The events for any component are documened in the API docs.)
+(The events for any component are documented in the API docs.)
 
 <pre data-neo>
-import Base from '../../../../src/container/Base.mjs';
+import Container from '../../../../src/container/Base.mjs';
 import TextField from '../../../../src/form/field/Text.mjs';
-class MainView extends Base {
+
+class MainView extends Container {
     static config = {
-        className : 'Example.view.MainView',
-        layout: {ntype:'vbox', align:'start'},
-        items : [{
-            module: TextField,
-            labelText  : 'First name',
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+
+        itemDefaults: {
+            module   : TextField,
             listeners: {
-                change: data => Neo.Main.log({value:data.value}),
+                change    : data => Neo.Main.log({value:data.value}),
                 focusEnter: data => Neo.Main.log({value: `Entering ${data.component.labelText}`}) 
             }
         },
-        {
-            module: TextField,
-            labelText  : 'Last name',
-            listeners: {
-                change: data => Neo.Main.log({value: data.value}),
-                focusEnter: data => Neo.Main.log({value: `Entering ${data.component.labelText}`}) 
-            }
+
+        items: [{
+            labelText: 'First name'
+        }, {
+            labelText: 'Last name'
         }]
     }
 }
@@ -42,37 +45,39 @@ Neo.setupClass(MainView);
 If you run the example, and open the browser's debugger, you'll see the console being logged as you type or give
 focus to either field.
 
+## In-line or separated into a controller
+
 Note that the handlers specify an in-line function. For trivial cases, that might be ok. But normally
 you'd want better separation of concerns by placing those event handlers in a separate class. Neo.mjs provides
 that with a _component controller_. 
 
 A `Neo.controller.Component` is a simple class associated with a component class. As a view is created, an 
-instance of its associated contoller is automatically created. 
+instance of its associated controller is automatically created. 
 
 <pre data-neo>
-import Base        from  '../../../../src/container/Base.mjs';
-import Controller  from  '../../../../src/controller/Component.mjs';
-import TextField  from   '../../../../src/form/field/Text.mjs';
+import Container  from '../../../../src/container/Base.mjs';
+import Controller from '../../../../src/controller/Component.mjs';
+import TextField  from  '../../../../src/form/field/Text.mjs';
 
 class MainViewController extends Controller {
     static config = {
         className: 'Example.view.MainViewController'
     }
-    onChange(data){
-        console.log(data.value);
+    onChange(data) {
+        Neo.Main.log({value: data.value})
     }
 }
 Neo.setupClass(MainViewController);
 
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
         className : 'Example.view.MainView',
         controller: MainViewController,
-        layout: {ntype:'vbox', align:'start'},
-        items : [{
-            module: TextField,
-            labelText  : 'Name',
+        layout    : {ntype:'vbox', align:'start'},
+        items     : [{
+            module   : TextField,
+            labelText: 'Name',
             listeners: {
                 change: 'onChange'
             }
@@ -88,12 +93,16 @@ to make it easier to see the source code for every class being used. But in an
 actual applications the controller class would be coded in its own source file &mdash; named something
 like `MainViewController.mjs` &mdash; and that would be imported into the view.)
 
+## Neo.core.Observable
+
 The ability to fire events and add listeners is provided by `Neo.core.Observable`, which is mixed into 
 classes that need that ability. All components are observable, `Neo.data.Store` is observable, and some
 others. `Neo.core.Observable` introduces a few methods and properties, such as `listeners`, which
 is used in the examples above, `on()` for procedurally adding an event listener, and `fire()`, which is 
 how you fire events in the custom classes you create.
 
+## Firing an event when a value changes
+
 Here's example illustrating how `fire()` is used. The code defines a `ToggleButton`
 class, which is just a button with a `checked` property: the button shows a checked or unchecked
 checkbox depending on the value of `checked`. 
@@ -103,37 +112,40 @@ We'll discuss that at length later, but in a nutshell, config properties ending
 automatically get lifecycle methods run before the value is assigned, after the value is assigned, and 
 before the value is accessed. We're using the _after_ method to fire a `change` event.
 
+
 <pre data-neo>
-import Base        from  '../../../../src/container/Base.mjs';
-import Button  from  '../../../../src/button/Base.mjs';
-import TextField  from   '../../../../src/form/field/Text.mjs';
+import Button    from '../../../../src/button/Base.mjs';
+import Container from '../../../../src/container/Base.mjs';
 
 class ToggleButton extends Button {
     static config = {
         className: 'Example.view.ToggleButton',
-        checked_: false
+        checked_ : false
     }
-    afterSetChecked(checked){
-        this.iconCls = checked?'fa fa-square-check':'fa fa-square';
-        this.fire('change', {component: this, checked}); // This is where our custom event is being fired
+    afterSetChecked(checked) {
+        this.iconCls = checked ? 'fa fa-square-check' : 'fa fa-square';
+        
+        // This is where our custom event is being fired
+        this.fire('change', {component: this, checked})
     }
-    onClick(data){
+    onClick(data) {
         super.onClick(data); 
-        this.checked = !this.checked;      
+        this.checked = !this.checked
     }
 }
 Neo.setupClass(ToggleButton);
 
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
-        className : 'Example.view.MainView',
-        layout: {ntype:'vbox', align:'start'},
-        items : [{
-            module: ToggleButton,
-            text: 'Toggle',
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module   : ToggleButton,
+            text     : 'Toggle',
             listeners: {
-                change: data => console.log(data.checked) // Here, we're listening to the custom event
+                // Here, we're listening to the custom event
+                change: data => Neo.Main.log({value: data.checked})
             }
         }]
     }

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

@@ -1,12 +1,13 @@
 [Add content on listeners options here]
 
-How are events set up? We don't really care, 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 entry is added to the map using the event name as the key, and the event handler added as the first
-item in the associated array. If another listener is added for the same event, a second item is added to the
-array. If a new event is added, a new entry is added. Etc. When the event is fired, Neo.mjs looks up the map
-entry for the event name, then runs each function in the array, passing whatever data is specified in the
-call to `fire()`.
+How are events set up? 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 
+entry is added to the map using the event name as the key, and the event handler added 
+as the first item in the associated array. If another listener is added for the same 
+event, a second item is added to the array. If a new event is added, a new entry is 
+added. Etc. When the event is fired, Neo.mjs looks up the map entry for the event name, 
+then runs each function in the array, passing whatever data is specified in the call to `fire()`.
 
 <img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/events/ObservableInMemory.png"></img>

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

@@ -1,3 +1,5 @@
+## Introduction
+
 Controllers often need to get references to components in order to update 
 the UI or access component properties. 
 There are two common ways of doing that:
@@ -5,11 +7,13 @@ There are two common ways of doing that:
 - Using the component references passed to the event handler
 - Tagging a component with a `reference` and using `this.getReference()` in the controller
 
+## References are usually passed to event handlers
+
 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 Button     from '../../../../src/button/Base.mjs';
 import Container  from '../../../../src/container/Base.mjs';
 import Controller from '../../../../src/controller/Component.mjs';
 
@@ -39,12 +43,14 @@ class MainView extends Container {
 Neo.setupClass(MainView);
 </pre>
 
+## Using getReference() 
+
 But what if we need to get a reference to another component in the view? In that case
 you tag the component you need with a `reference` config, then use `getReference()` in
 the controller.
 
 <pre data-neo>
-import Button     from '../../../../src/Button/Base.mjs';
+import Button     from '../../../../src/button/Base.mjs';
 import Container  from '../../../../src/container/Base.mjs';
 import Controller from '../../../../src/controller/Component.mjs';
 
@@ -53,10 +59,10 @@ class MainViewController extends Controller {
         className: 'Example.view.MainViewController'
     }
     onDisableButtonClick(data){
-        data.component.disabled = true;
+        data.component.disabled = true
     }
     onEnableButtonClick(data){
-        this.getReference('myButton').disabled = false;
+        this.getReference('myButton').disabled = false
     }
 }
 Neo.setupClass(MainViewController);
@@ -82,6 +88,7 @@ class MainView extends Container {
 Neo.setupClass(MainView);
 </pre>
 
+## Getting a reference when debugging
 
 There are other ways of getting references, but these are either non-standard or for debugging.
 For example, components have an `up()` method, and containers have a `down()` method. These look 
@@ -98,7 +105,7 @@ 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 Button    from '../../../../src/button/Base.mjs';
 import Container from '../../../../src/container/Base.mjs';
 
 class MainView extends Container {
@@ -110,14 +117,14 @@ class MainView extends Container {
             text   : 'Change Learn caption',
             handler: data=>{
                 const component = Neo.findFirst({text:'Learn'});
-                component?.set({text: 'Yikes!', ui: 'primary'});
+                component?.set({text: 'Yikes!', ui: 'primary'})
             }
         }, {
             module : Button,
             text   : 'Restore Learn caption',
             handler: data=>{
                 const component = Neo.findFirst({text:'Yikes!'});
-                component?.set({text: 'Learn', ui: 'ghost'});
+                component?.set({text: 'Learn', ui: 'ghost'})
             }
         }]
     }

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

@@ -0,0 +1,241 @@
+## HTML Style
+
+In case you did not work with neo yet, but come from a more HTML driven ecosystem,
+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';
+
+class MainComponent extends Component {
+    static config = {
+        className: 'Neo.examples.todoList.version1.MainComponent',
+        autoMount: true,
+        height   : 200,
+        margin   : 10,
+        maxWidth : 300,
+        style    : {border: '1px solid #000', margin: '20px', overflow: 'scroll'},
+        width    : 300,
+
+        items: [
+            {id: 1, done: true,  text: 'Todo Item 1'},
+            {id: 2, done: false, text: 'Todo Item 2'},
+            {id: 3, done: false, text: 'Todo Item 3'}
+        ],
+
+        inputValue: null,
+
+        vdom:
+        {cn: [
+            {tag: 'ol', cn: []},
+            {cn: [
+                {tag: 'input', cls: ['todo-input'], required: true, style: {marginLeft: '20px'}},
+                {tag: 'button', cls: ['todo-add-button'], html : 'Add Item', style: {marginLeft: '1em'}}
+            ]}
+        ]}
+    }
+
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners([
+            {click: me.onAddButtonClick,   delegate: 'todo-add-button'},
+            {click: me.onCheckIconClick,   delegate: 'todo-item'},
+            {input: me.onInputFieldChange, delegate: 'todo-input'}
+        ]);
+
+        me.createItems(me.items || [])
+    }
+
+    createItems(items) {
+        let me = this,
+            cls;
+
+        items.forEach(item => {
+            cls = ['todo-item'];
+
+            if (item.done) {
+                cls.push('fa', 'fa-check')
+            } else {
+                cls.push('far', 'fa-square')
+            }
+
+            me.vdom.cn[0].cn.push({
+                tag: 'li',
+                cn : [
+                    {tag: 'span', cls, style: {cursor: 'pointer', width: '20px'}},
+                    {vtype: 'text', html: item.text}
+                ]
+            });
+        });
+
+        me.update()
+    }
+
+    onAddButtonClick() {
+        let me = this;
+
+        if (me.inputValue) {
+            me.createItems([{
+                id  : null,
+                done: false,
+                text: me.inputValue
+            }])
+        }
+    }
+
+    onCheckIconClick(data) {
+        let me     = this,
+            cls    = ['far', 'fa-square'],
+            oldCls = ['fa',  'fa-check'],
+            node   = VdomUtil.findVdomChild(me.vdom, data.path[0].id).vdom;
+
+        if (data.path[0].cls.includes('fa-square')) {
+            cls    = ['fa',  'fa-check'];
+            oldCls = ['far', 'fa-square']
+        }
+
+        NeoArray.remove(node.cls, oldCls);
+        NeoArray.add(node.cls, cls);
+
+        me.update()
+    }
+
+    onInputFieldChange(data) {
+        this.inputValue = data.value
+    }
+}
+
+Neo.setupClass(MainComponent);
+</pre>
+
+## Neo Style
+
+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';
+
+class TodoListModel extends Model {
+    static config = {
+        className  : 'Neo.examples.todoList.version2.MainModel',
+        keyProperty: 'id',
+
+        fields: [{
+            name: 'id',
+            type: 'Int'
+        }, {
+            name: 'done',
+            type: 'Boolean'
+        }, {
+            name: 'text',
+            type: 'String'
+        }]
+    }
+}
+
+Neo.setupClass(TodoListModel);
+
+
+class TodoListStore extends Store {
+    static config = {
+        className  : 'Neo.examples.todoList.version2.TodoListStore',
+        keyProperty: 'id',
+        model      : TodoListModel,
+
+        data: [
+            {id: 1, done: true,  text: 'Todo Item 1'},
+            {id: 2, done: false, text: 'Todo Item 2'},
+            {id: 3, done: false, text: 'Todo Item 3'}
+        ],
+
+        sorters: [{
+            property : 'done',
+            direction: 'DESC'
+        }, {
+            property : 'id',
+            direction: 'ASC'
+        }]
+    }
+}
+
+Neo.setupClass(TodoListStore);
+
+
+class MainContainer extends Container {
+    static config = {
+        className: 'Neo.examples.todoList.version2.MainContainer',
+        style    : {padding: '20px'},
+
+        // custom configs
+        idCounter: 3,
+        store    : null
+    }
+
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.store = Neo.create({
+            module: TodoListStore
+        });
+
+        me.items = [{
+            module       : List,
+            displayField : 'text',
+            flex         : 1,
+            store        : me.store,
+            style        : {padding: '5px'},
+            useCheckBoxes: true
+        }, {
+            module: Toolbar,
+            flex  : 'none',
+            dock  : 'bottom',
+            items : [{
+                module       : TextField,
+                flex         : 1,
+                labelPosition: 'inline',
+                labelText    : 'Item Text',
+                reference    : 'addItemField'
+            }, '->', {
+                handler     : me.onAddButtonClick,
+                handlerScope: me,
+                scope       : me,
+                style       : {height: '27px', marginLeft: '1em'},
+                text        : 'Add Item'
+            }]
+        }];
+    }
+
+    onAddButtonClick() {
+        let me    = this,
+            field = me.down({reference: 'addItemField'}),
+            data;
+
+        if (field.value) {
+            me.idCounter++;
+
+            data = me.store.data;
+
+            data.push({
+                id  : me.idCounter,
+                done: false,
+                text: field.value
+            });
+
+            me.store.data = data
+        }
+    }
+}
+
+Neo.setupClass(MainContainer);
+</pre>

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

@@ -1,21 +1,16 @@
 Neo.mjs applications can be written quickly thanks to its syntax, features, and debugging convenience.
 
+## Property lifecycle hooks
+Neo.mjs classes let you specify properties in a way that allows code to detect "before" and "after" changes,
+which makes it easy to handle value validation and transformation, and react to changes.
 
-<details>
-<summary><h3>Property lifecycle hooks</h3></summary>
-Neo.mjs classes let you specify properties in a way that allows code to detect "before" and "after" changes, which makes it easy to handle value validation and transformation, and react to changes.
-</details>
-
-<details>
-<summary><h3>Elegant state management</h3></summary>
+## Elegant state management
 Neo.mjs has elegant yet powerful state management features that make it easy to create shared, bindable data.
 For example, if two components are bound to the same property, a change to the property will automatically be
 applied to both components.
-</details>
 
-<details>
-<summary><h3>Simple and powerful debugging</h3></summary>
+## Simple and powerful debugging
 Debugging is easy because Neo.mjs uses standard JavaScript, the Neo.mjs class config system, and built-in 
 debugging tools. For example, while developing an application you can click on a component, and in the debugger
 easily inspect the component and update its properties &mdash; these updates are immediately reflected in the running application.
-</details>
+

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

@@ -18,10 +18,12 @@
     {"name": "Tutorials",                                   "parentId": null,                "isLeaf": false, "expanded": false, "id": "Tutorials"},
         {"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": "Todo List",                               "parentId": "Tutorials",         "isLeaf": true,  "expanded": false, "id": "TodoList"},
     {"name": "Guides",                                      "parentId": null,                "isLeaf": false, "expanded": false, "id": "InDepth"},
         {"name": "Config",                                  "parentId": "InDepth",           "isLeaf": false, "id": "Config"},
         {"name": "Instance Lifecycle",                      "parentId": "InDepth",           "isLeaf": false, "id": "InstanceLifecycle"},
         {"name": "User Input (Forms)",                      "parentId": "InDepth",           "isLeaf": false, "id": "Forms"},
+        {"name": "Components and Containers",               "parentId": "InDepth",           "isLeaf": true,  "id": "ComponentsAndContainers"},
         {"name": "Layouts",                                 "parentId": "InDepth",           "isLeaf": false, "id": "Layouts"},
         {"name": "Custom Components",                       "parentId": "InDepth",           "isLeaf": false, "id": "CustomComponents"},
         {"name": "Events",                                  "parentId": "InDepth",           "isLeaf": true,  "expanded": false, "id": "GuideEvents"},

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

@@ -0,0 +1,26 @@
+.portal-content-box {
+    border         : 1px solid darkgray;
+    cursor         : pointer;
+    color          : #000;
+    height         : 200px;
+    margin-top     : 2em;
+    padding        : 0 1em 1em 1em;
+    text-decoration: none;
+    width          : 300px;
+
+    &:hover {
+        background-color: lightblue;
+    }
+
+    &:not(:last-child) {
+        margin-right: 3em;
+    }
+
+    .portal-content-box-content {
+
+    }
+
+    .portal-content-box-header {
+
+    }
+}

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

@@ -1,15 +1,11 @@
 .newwebsite-viewport {
-    align-items    : center !important;
-    display        : flex !important;
-    gap            : 48px;
-    justify-content: center !important;
-    padding        : 10% 15% 15% 15%;
+    gap       : 48px;
+    overflow-y: scroll;
+    padding   : 5%;
 }
 
 .button-group {
-    display       : flex !important;
-    flex-direction: row-reverse !important;
-    gap           : 8px !important;
+    gap: 8px !important;
 }
 
 .neo-h1 {
@@ -26,7 +22,3 @@
     height             : 150px;
     width              : 100%;
 }
-
-.get-started-button {
-    cursor: not-allowed !important;
-}

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

@@ -4,13 +4,6 @@
     .main-content-splitter {
         margin: 0;
     }
-
-    .learn-content-container {
-        // align-items: center !important;
-        // padding: 0 3rem;
-        overflow: scroll;
-    }
-    
 }