neo.mjs 6.15.4 → 6.15.6

package/apps/ServiceWorker.mjs

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

package/apps/form/view/FormContainerController.mjs

@@ -45,7 +45,7 @@ class FormContainerController extends Component {
      */
     async onSaveButtonClick(data) {
         let form       = this.getReference('main-form'),
-            formValues = await form.getValues();
+            formValues = await form.getSubmitValues();
 
         Neo.main.addon.LocalStorage.updateLocalStorageItem({
             appName: this.component.appName,

package/apps/form/view/ViewportController.mjs

@@ -20,7 +20,7 @@ class ViewportController extends Component {
         let me         = this,
             form       = me.getReference('main-form'),
             formState  = await form.getFormState(),
-            formValues = await form.getValues();
+            formValues = await form.getSubmitValues();
 
         console.log('All pages', {formState, formValues});
 
@@ -34,7 +34,7 @@ class ViewportController extends Component {
         let me          = this,
             activeIndex = me.getModel().data.activeIndex,
             activeCard  = me.getReference('pages-container').items[activeIndex],
-            formValues  = await activeCard.getValues();
+            formValues  = await activeCard.getSubmitValues();
 
         await me.updateRecordValidityState(activeIndex)
 

package/apps/portal/view/home/MainContainer.mjs

@@ -70,8 +70,8 @@ class Viewport extends Container {
                 route : '#/learn/WhyNeo-Speed',
 
                 content: [
-                    'Item 1',
-                    'Item 2',
+                    'Multi-threaded',
+                    'Over 40,000 delta updates per second',
                     'Item 3'
                 ]
             }, {

package/apps/portal/view/learn/ContentView.mjs

@@ -134,7 +134,7 @@ class ContentView extends Component {
             Neo.main.addon.IntersectionObserver.observe({
                 disconnect: true,
                 id        : me.id,
-                observe   : '.neo-h2',
+                observe   : ['.neo-h2', '.neo-h3'],
                 windowId  : me.windowId
             })
         }

package/apps/portal/view/learn/LivePreview.mjs

@@ -207,33 +207,6 @@ class LivePreview extends Container {
         return lastClassName
     }
 
-    /**
-     * @param {String} reference
-     * @param {Object[]} items=this.items
-     * @returns {Object|Neo.component.Base|null}
-     */
-    getItem(reference, items=this.items) {
-        let i   = 0,
-            len = items.length,
-            item,
-            childItem;
-
-        for (; i < len; i++) {
-            item = items[i];
-            if (item.reference === reference) {
-                return item
-            } else if (item.items) {
-                childItem = this.getItem(reference, item.items);
-
-                if (childItem) {
-                    return childItem
-                }
-            }
-        }
-
-        return null
-    }
-
     /**
      * @returns {Neo.component.Base|null}
      */

package/apps/realworld2/view/user/LoginFormContainer.mjs

@@ -70,7 +70,7 @@ class LoginFormContainer extends Container {
      *
      */
     onLoginButtonClick() {
-        let values = this.getValues();
+        let values = this.getSubmitValues();
 
         console.log(values);
         console.log(this.isValid());

package/docs/app/view/MainContainer.mjs

@@ -8,7 +8,6 @@ import MainContainerController from './MainContainerController.mjs';
 import SourceViewComponent     from './classdetails/SourceViewComponent.mjs';
 import Splitter                from '../../../src/component/Splitter.mjs';
 import TutorialComponent       from './classdetails/TutorialComponent.mjs';
-import TutorialsTreeList       from './TutorialsTreeList.mjs';
 import Viewport                from '../../../src/container/Viewport.mjs';
 
 /**
@@ -71,15 +70,6 @@ class MainContainer extends Viewport {
                         iconCls: 'fa fa-code',
                         text   : 'API'
                     }
-                }, {
-                    module   : TutorialsTreeList,
-                    listeners: {leafItemClick: 'onTutorialListLeafClick'},
-                    reference: 'tutorials-treelist',
-
-                    tabButtonConfig: {
-                        iconCls: 'fa fa-hands-helping',
-                        text   : 'Tutorials'
-                    }
                 }, {
                     module   : ExamplesTreeList,
                     listeners: {leafItemClick: 'onExamplesListLeafClick'},
@@ -123,7 +113,7 @@ class MainContainer extends Viewport {
         }
 
         // Disable the examples Tab for dist versions until the webpack builds can handle this (see: #140)
-        me.items[1].items[0].items[2].tabButtonConfig.disabled = Neo.config.environment !== 'development';
+        me.items[1].items[0].items[1].tabButtonConfig.disabled = Neo.config.environment !== 'development';
     }
 
     /**

package/examples/ServiceWorker.mjs

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

package/examples/component/timer/MainContainerController.mjs

@@ -40,7 +40,7 @@ class MainContainerController extends ComponentController {
             me.getReference('closable').value = data.value;
         }
 
-        values = await form.getValues();
+        values = await form.getSubmitValues();
 
         values.appName = me.component.appName;
         button.disabled = !isValid;
@@ -61,7 +61,7 @@ class MainContainerController extends ComponentController {
     async createToast() {
         let me     = this,
             form   = me.getReference('form'),
-            values = await form.getValues(),
+            values = await form.getSubmitValues(),
             clear  = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable', 'timeout'];
 
         // use the defaults from toast if not set

package/examples/component/toast/MainContainerController.mjs

@@ -41,7 +41,7 @@ class MainContainerController extends ComponentController {
             me.getReference('closable').value = data.value;
         }
 
-        values = await form.getValues();
+        values = await form.getSubmitValues();
 
         values.appName = me.component.appName;
         button.disabled = !isValid;
@@ -62,7 +62,7 @@ class MainContainerController extends ComponentController {
     async createToast() {
         let me     = this,
             form   = me.getReference('form'),
-            values = await form.getValues(),
+            values = await form.getSubmitValues(),
             clear  = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable', 'timeout'];
 
         // use the defaults from toast if not set

package/examples/date/selectorContainer/MainContainer.mjs

@@ -0,0 +1,215 @@
+import CheckBox              from '../../../src/form/field/CheckBox.mjs';
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import DateField             from '../../../src/form/field/Date.mjs';
+import DateSelector          from '../../../src/date/SelectorContainer.mjs';
+import Radio                 from '../../../src/form/field/Radio.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+
+/**
+ * @class Neo.examples.date.selectorContainer.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className: 'Neo.examples.date.selectorContainer.MainContainer'
+    }
+
+    createConfigurationComponents() {
+        let me               = this,
+            exampleComponent = me.exampleComponent;
+
+        return [{
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getMonth() === 0,
+            hideValueLabel: false,
+            labelText     : 'currentDate (month)',
+            listeners     : {change: me.onMonthRadioChange.bind(me, 0)},
+            name          : 'month',
+            valueLabelText: 'Jan'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getMonth() === 1,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onMonthRadioChange.bind(me, 1)},
+            name          : 'month',
+            valueLabelText: 'Feb'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getMonth() === 2,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onMonthRadioChange.bind(me, 2)},
+            name          : 'month',
+            valueLabelText: 'Mar'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getMonth() === 3,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onMonthRadioChange.bind(me, 3)},
+            name          : 'month',
+            valueLabelText: 'Apr'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getFullYear() === 2025,
+            hideValueLabel: false,
+            labelText     : 'currentDate (year)',
+            listeners     : {change: me.onYearRadioChange.bind(me, 2025)},
+            name          : 'year',
+            style         : {marginTop: '10px'},
+            valueLabelText: '2025'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getFullYear() === 2024,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onYearRadioChange.bind(me, 2024)},
+            name          : 'year',
+            valueLabelText: '2024'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getFullYear() === 2023,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onYearRadioChange.bind(me, 2023)},
+            name          : 'year',
+            valueLabelText: '2023'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.currentDate.getFullYear() === 2022,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onYearRadioChange.bind(me, 2022)},
+            name          : 'year',
+            valueLabelText: '2022'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.dayNameFormat === 'narrow',
+            hideValueLabel: false,
+            labelText     : 'dayNameFormat',
+            listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'narrow')},
+            name          : 'dayNameFormat',
+            style         : {marginTop: '10px'},
+            valueLabelText: 'narrow'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.dayNameFormat === 'short',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'short')},
+            name          : 'dayNameFormat',
+            valueLabelText: 'short'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.dayNameFormat === 'long',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'dayNameFormat', 'long')},
+            name          : 'dayNameFormat',
+            valueLabelText: 'long'
+        }, {
+            module    : NumberField,
+            clearable : true,
+            labelText : 'height',
+            listeners : {change: me.onConfigChange.bind(me, 'height')},
+            maxValue  : 800,
+            minValue  : 230,
+            stepSize  : 10,
+            style     : {marginTop: '10px'},
+            value     : exampleComponent.height
+        }, {
+            module          : DateField,
+            labelText       : 'maxValue',
+            listeners       : {change: me.onConfigChange.bind(me, 'maxValue')},
+            matchPickerWidth: false,
+            value           : exampleComponent.maxValue
+        }, {
+            module          : DateField,
+            labelText       : 'minValue',
+            listeners       : {change: me.onConfigChange.bind(me, 'minValue')},
+            matchPickerWidth: false,
+            value           : exampleComponent.minValue
+        }, {
+            module   : CheckBox,
+            checked  : exampleComponent.showCellBorders,
+            labelText: 'showCellBorders',
+            listeners: {change: me.onConfigChange.bind(me, 'showCellBorders')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : exampleComponent.showDisabledDays,
+            labelText: 'showDisabledDays',
+            listeners: {change: me.onConfigChange.bind(me, 'showDisabledDays')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : exampleComponent.useAnimations,
+            labelText: 'useAnimations',
+            listeners: {change: me.onConfigChange.bind(me, 'useAnimations')},
+            style    : {marginTop: '10px'}
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.weekStartDay === 6,
+            hideValueLabel: false,
+            labelText     : 'weekStartDay',
+            listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 6)},
+            name          : 'weekStartDay',
+            style         : {marginTop: '10px'},
+            valueLabelText: '6 (Saturday)'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.weekStartDay === 0,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 0)},
+            name          : 'weekStartDay',
+            valueLabelText: '0 (Sunday)'
+        }, {
+            module        : Radio,
+            checked       : exampleComponent.weekStartDay === 1,
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'weekStartDay', 1)},
+            name          : 'weekStartDay',
+            valueLabelText: '1 (Monday)'
+        }, {
+            module    :  NumberField,
+            clearable : true,
+            labelText : 'width',
+            listeners : {change: me.onConfigChange.bind(me, 'width')},
+            maxValue  : 800,
+            minValue  : 240,
+            stepSize  : 10,
+            style     : {marginTop: '10px'},
+            value     : exampleComponent.width
+        }];
+    }
+
+    createExampleComponent() {
+        return Neo.create(DateSelector, {
+            height: 300,
+            width : 300
+        })
+    }
+
+    onMonthRadioChange(value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            let date = this.exampleComponent.currentDate;
+            date?.setMonth(value);
+            this.exampleComponent.currentDate = date;
+        }
+    }
+
+    onYearRadioChange(value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            let date = this.exampleComponent.currentDate;
+            date?.setFullYear(value);
+            this.exampleComponent.currentDate = date;
+        }
+    }
+}
+
+Neo.setupClass(MainContainer);
+
+export default MainContainer;

package/examples/date/selectorContainer/app.mjs

@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: MainContainer,
+    name    : 'Neo.examples.date.selectorContainer'
+});

package/examples/date/selectorContainer/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo DateSelector</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/date/selectorContainer/neo-config.json

@@ -0,0 +1,6 @@
+{
+    "appPath"    : "examples/date/selectorContainer/app.mjs",
+    "basePath"   : "../../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs"
+}

package/package.json

@@ -1,7 +1,7 @@
 
 {
     "name": "neo.mjs",
-    "version": "6.15.4",
+    "version": "6.15.6",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -44,22 +44,22 @@
     },
     "homepage": "https://neomjs.github.io/pages/",
     "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.5.1",
+        "@fortawesome/fontawesome-free": "^6.5.2",
         "autoprefixer": "^10.4.19",
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^12.0.0",
         "cssnano": "^6.1.2",
-        "envinfo": "^7.11.1",
+        "envinfo": "^7.12.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.16",
+        "inquirer": "^9.2.17",
         "marked": "^12.0.1",
         "monaco-editor": "^0.47.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.38",
-        "sass": "^1.72.0",
+        "sass": "^1.75.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.3",
         "webpack": "^5.91.0",

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

@@ -1,7 +1,6 @@
 To code a live preview, enclose the code in a `pre` tag with the `data-neo` attribute.
 
-<pre>&lt;pre data-neo> 
-&lt;/pre> 
+<code>&lt;pre data-neo>...&lt;/pre&gt; &lt;</code> 
 
 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`

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

@@ -0,0 +1,68 @@
+Welcome to Neo.mjs! This set of topics contains information to help you use Neo.mjs. 
+
+
+## Topics
+
+### Why Neo?
+
+Describes technical and business reasons for using Neo.mjs
+
+### Getting Started
+
+Install instructions, along with fundamental concepts that are good to understand before diving into Neo.mjs.
+
+### Tutorials
+
+Hands-on tutorials where you'll code a few simple Neo.mjs applications.
+
+### Guides
+
+These are in-depth discussions of various topics.
+
+### Appendix
+
+You can ignore this! It just holds a site style sheet and other miscellanea.
+
+## Using these topics
+
+### Layout 
+
+As you can see, the topics table of contents is on the left. Topic sections and sub-sections are shown on the right.
+And content is here in the middle. There are "next" and "previous" buttons at the bottom of each page, to make it
+easier to read several topics in sequence. 
+
+### Disclosure widgets
+
+Topics sometimes contain "disclosure" widgets, which are just <details> tags. These are used in cases 
+where we want to present high-level points and reveal details when the disclosure is expanded.
+
+<details>
+<summary>This is a disclosure widget</summary>
+<p style="background-color:lightgreen;padding:8px">This is a fascinating piece of information which is revealed when the widget is expanded.</p>
+</details>
+
+### Runnable examples
+
+Topics also sometimes contain runnable examples. These are shown as tab panels with Source and Preview tabs.
+
+You can also launch the preview in a window by going to the Preview tab, then clicking on the little window
+icon on the right  <span class="far fa-xs fa-window-maximize"></span>. This web site is a Neo.mjs application,
+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';
+
+class MainView extends Container {
+    static config = {
+        className: 'Example.view.MainView',
+        layout   : {ntype:'vbox', align:'start'},
+        items    : [{
+            module : Button,
+            text   : 'Button'
+        }]
+    }
+}
+
+Neo.setupClass(MainView);
+</pre>

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

@@ -6,6 +6,8 @@ to the main browser thread, resulting in:
 3. A <b>data</b> web-worker were HTTP and socket calls are run
 4. A <b>view</b> web-worker that manages delta updates
 
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/why/IndexHtmlFlow.png" width="120%"></img>
+
 The benefits of using web workers is that each runs in parallel its own thread. In a typical framework
 all code is run in the main thread, so processes compete for CPU cycles.
 

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

@@ -8,11 +8,11 @@ across windows, running seamlessly as a single application.
 
 <details>
 <summary><h3>Example</h3></summary>
-An easy way to show this is by looking at a code preview example. Below, click Preview, 
+An easy way to show this is by looking at a code preview example. In the example below, click Preview, 
 then click on the new window icon on the right side of the toolbar. This launches a new window 
 running the code. Even though it's running in a new window, it's still part of the app. 
-(In this case, the app is the Neo.mjs portal.) That means both the code in both windows seamlessly 
-share events, bound data, etc. &mdash; the code doesn't care that some code is running in a
+(In this case, the app is the web site you're looking at now.) That means both the code in both windows 
+seamlessly share events, data, etc. &mdash; the code doesn't care that some code is running in a
 separate window.
 <pre data-neo>
 import Button    from '../../../../src/button/Base.mjs';

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

@@ -1,4 +1,4 @@
-Web-worker processes are automatically run in parallel, on separate CPU cores.
+The Neo.mjs web-worker processes are automatically run in parallel, on separate CPU cores.
 
 By contrast, other JavaScript frameworks run in a single thread, so all business logic, 
 data handling, and DOM rendering compete for CPU resources.
@@ -12,16 +12,40 @@ If the default four threads aren't enough, you're free to launch additional web-
 to run other specialized logic. 
 
 
-<details>
-<summary>Example</summary>
-Look at this example. It's complex. As you pan left and right, and zoom in and out, the upper-right
-shows you the number of delta updates being applied. If you move really 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 &mdash;
-but we've never actually hit the limit.
+<details><summary>Example</summary>
 
-<a href="https://neomjs.com/node_modules/neo.mjs/examples/component/helix/index.html" target="_example">Helix Example</a>
+Take a look at this example. It's the `Neo.component.Helix` component. Besides looking cool, it illustrates how quickly Neo.mjs can update a complex user interface. 
 
-<a href="https://neomjs.com/node_modules/neo.mjs/examples/component/helix/index.html" target="_example">
-<img width="75%" src="https://s3.amazonaws.com/mjs.neo.learning.images/Helix.png"></img>
-</a>
-</details>
+Click on Preview, then use your mouse or trackpad to pan and zoom &mdash; the helix zooms and spirals accordingly, very very rapidly. 
+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 &mdash; 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';
+class Foo extends Base {
+    static config = {
+        className: 'Foo',
+        layout: 'fit',
+        items: [{
+            module: Helix,
+            imageField : 'image',
+            imageSource: '../../../../resources/examples/',
+            store: {
+                autoLoad: true,
+                model: {
+                    fields: [ { name: 'image' , type: 'String'   } ],
+                },
+                url: '../../../../resources/examples/data/ai_contacts.json'
+            }
+        }]
+    }
+}
+Neo.setupClass(Foo);
+</pre>
+
+
+If you're interested, there's <a href="../../examples/component/helix/index.html" target="_blank">a more full-featured helix example</a> that includes showing delta updates, 
+along with some other control. Look at the upper-right corner to see delta updates.
+
+</details>