neo.mjs 6.18.2 → 6.19.0

package/examples/layout/cube/MainContainer.mjs

@@ -0,0 +1,217 @@
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import Container             from '../../../src/container/Base.mjs';
+import CubeLayout            from '../../../src/layout/Cube.mjs';
+import NumberField           from '../../../src/form/field/Number.mjs';
+import Radio                 from '../../../src/form/field/Radio.mjs';
+import RangeField            from '../../../src/form/field/Range.mjs';
+import Toolbar               from '../../../src/toolbar/Base.mjs';
+
+/**
+ * @class Neo.examples.layout.cube.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.layout.cube.MainContainer',
+        cls                 : ['examples-layout-cube-maincontainer'],
+        configItemLabelWidth: 160,
+        configItemWidth     : 280,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me       = this,
+            {layout} = me.exampleComponent.getItem('container');
+
+        return [{
+            module        : Radio,
+            checked       : layout.ntype === 'layout-cube',
+            hideValueLabel: false,
+            labelText     : 'layout',
+            listeners     : {change: me.onRadioLayoutChange.bind(me, 'cube')},
+            name          : 'layout',
+            valueLabelText: 'Cube'
+        }, {
+            module        : Radio,
+            checked       : layout.ntype === 'layout-vbox',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioLayoutChange.bind(me, 'vbox')},
+            name          : 'layout',
+            valueLabelText: 'VBox'
+        }, {
+            module   : RangeField,
+            labelText: 'perspective',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'perspective')},
+            maxValue : 2000,
+            minValue : 400,
+            stepSize : 10,
+            style    : {marginTop: '20px'},
+            value    : layout.perspective
+        }, {
+            module   : RangeField,
+            labelText: 'rotateX',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'rotateX')},
+            maxValue : 360,
+            minValue : 0,
+            stepSize : 1,
+            style    : {marginTop: '20px'},
+            value    : layout.rotateX
+        }, {
+            module   : RangeField,
+            labelText: 'rotateY',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'rotateY')},
+            maxValue : 360,
+            minValue : 0,
+            stepSize : 1,
+            value    : layout.rotateY
+        }, {
+            module   : RangeField,
+            labelText: 'rotateZ',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'rotateZ')},
+            maxValue : 360,
+            minValue : 0,
+            stepSize : 1,
+            value    : layout.rotateZ
+        }, {
+            module   : RangeField,
+            labelText: 'sideX',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'sideX')},
+            maxValue : 400,
+            minValue : 100,
+            stepSize : 10,
+            style    : {marginTop: '20px'},
+            value    : layout.sideX
+        }, {
+            module   : RangeField,
+            labelText: 'sideY',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'sideY')},
+            maxValue : 400,
+            minValue : 100,
+            stepSize : 10,
+            value    : layout.sideY
+        }, {
+            module   : RangeField,
+            labelText: 'sideZ',
+            listeners: {change: me.onLayoutConfigChange.bind(me, 'sideZ')},
+            maxValue : 400,
+            minValue : 100,
+            stepSize : 10,
+            value    : layout.sideZ
+        }, {
+            module   : NumberField,
+            clearable: true,
+            labelText: 'height',
+            listeners: {change: me.onConfigChange.bind(me, 'height')},
+            maxValue : 1000,
+            minValue : 300,
+            stepSize : 10,
+            style    : {marginTop: '20px'},
+            value    : me.exampleComponent.height
+        }, {
+            module   : NumberField,
+            clearable: true,
+            labelText: 'width',
+            listeners: {change: me.onConfigChange.bind(me, 'width')},
+            maxValue : 1000,
+            minValue : 300,
+            stepSize : 10,
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.width
+        }];
+    }
+
+    /**
+     * @returns {Neo.component.Base}
+     */
+    createExampleComponent() {
+        return Neo.create({
+            module: Container,
+            height: 550,
+            layout: {ntype: 'vbox', align: 'center', pack: 'center'},
+            width : 550,
+
+            items: [{
+                module   : Container,
+                reference: 'container',
+                style    : {color: 'white', fontSize: '50px', margin: '50px', textAlign: 'center'},
+
+                layout: {
+                    ntype  : 'cube',
+                    rotateX: 194,
+                    rotateY: 213,
+                    rotateZ: 162
+                },
+
+                items: [
+                    {style: {backgroundColor: 'rgba(255,   0,   0, 0.5)'}, html: 'Front'},
+                    {style: {backgroundColor: 'rgba(  0, 255,   0, 0.5)'}, html: 'Back'},
+                    {style: {backgroundColor: 'rgba(  0,   0, 255, 0.5)'}, html: 'Left'},
+                    {style: {backgroundColor: 'rgba(  0, 255, 255, 0.5)'}, html: 'Right'},
+                    {style: {backgroundColor: 'rgba(255,   0, 255, 0.5)'}, html: 'Top'},
+                    {style: {backgroundColor: 'rgba(255, 255,   0, 0.5)'}, html: 'Bottom'}
+                ]
+            }, {
+                module: Toolbar,
+                flex  : 'none',
+                style : {marginTop: '1em'},
+
+                itemDefaults: {
+                    ntype  : 'button',
+                    handler: 'up.onFaceButtonClick',
+                    style  : {marginRight: '.3em'}
+                },
+
+                items: [
+                    {text: 'Front'},
+                    {text: 'Back'},
+                    {text: 'Left'},
+                    {text: 'Right'},
+                    {text: 'Top'},
+                    {text: 'Bottom'}
+                ]
+            }]
+        })
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFaceButtonClick(data) {
+        this.getItem('container').layout['activeFace'] = data.component.text.toLowerCase()
+    }
+
+
+        /**
+     * @param {String} config
+     * @param {Object} opts
+     */
+    onLayoutConfigChange(config, opts) {
+        this.getItem('container').layout[config] = opts.value
+    }
+
+    /**
+     * @param {String} name
+     * @param {Object} opts
+     */
+    onRadioLayoutChange(name, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            let layout = name;
+
+            if (name === 'cube') {
+                layout = {
+                    ntype  : 'cube',
+                    rotateX: 194,
+                    rotateY: 213,
+                    rotateZ: 162
+                }
+            }
+
+            this.getItem('container').layout = layout;
+        }
+    }
+}
+
+Neo.setupClass(MainContainer);
+
+export default MainContainer;

package/examples/layout/cube/app.mjs

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

package/examples/layout/cube/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 Cube Layout</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/layout/cube/neo-config.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.18.2",
+    "version": "6.19.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -48,20 +48,20 @@
         "chalk": "^5.3.0",
         "clean-webpack-plugin": "^4.0.0",
         "commander": "^12.1.0",
-        "cssnano": "^7.0.3",
+        "cssnano": "^7.0.4",
         "envinfo": "^7.13.0",
         "fs-extra": "^11.2.0",
         "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^9.2.23",
-        "marked": "^13.0.0",
+        "inquirer": "^10.0.1",
+        "marked": "^13.0.2",
         "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.4.38",
-        "sass": "^1.77.6",
+        "postcss": "^8.4.39",
+        "sass": "^1.77.8",
         "siesta-lite": "5.5.2",
         "url": "^0.11.3",
-        "webpack": "^5.92.1",
+        "webpack": "^5.93.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.4",
         "webpack-hook-plugin": "^1.0.7",

package/resources/data/deck/learnneo/pages/2023-10-14T19-25-08-153Z.md

@@ -121,8 +121,8 @@ actually used in the example, and the import root path is different to reflect t
 Neo.mjs library relative to the examples.
 
 <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/ComponentModels.md

@@ -4,9 +4,9 @@ A _view model_ — `Neo.model.Component` — instance holds properties t
 can be bound to component properties.
 
 <pre data-neo>
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
-import TextField from  '../../../../src/form/field/Text.mjs';
+import Container from  '../container/Base.mjs';
+import Label     from  '../component/Label.mjs';
+import TextField from  '../form/field/Text.mjs';
 
 class MainView extends Container {
     static config = {
@@ -56,9 +56,9 @@ usually coded as separate classes.)
 Below is another example.
 
 <pre data-neo>
-import Container from  '../../../../src/container/Base.mjs';
-import Label     from  '../../../../src/component/Label.mjs';
-import Panel     from  '../../../../src/container/Panel.mjs';
+import Container from  '../container/Base.mjs';
+import Label     from  '../component/Label.mjs';
+import Panel     from  '../container/Panel.mjs';
 
 class MyPanel extends Panel {
     static config = {

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

@@ -26,7 +26,7 @@ primitive. Components introduce various properties, such as `width`, `height`, `
 Here's a container, with one child item.
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {
@@ -48,7 +48,7 @@ Components also have an `html`. The `html` property is rarely used, and goes aga
 sometimes it's handy as a placeholder as you stub out views.
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {
@@ -78,7 +78,7 @@ some commonly-used layouts.
 Fix is used when there's a single child. The component is sized to fit the container.
 
 <pre data-neo>
-import Container from '../../../../src/container/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {
@@ -99,8 +99,8 @@ Neo.setupClass(MainView);
 With `vbox` and `hbox`, items are arranged vertically or horizontally.
 
 <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 = {
@@ -126,10 +126,10 @@ Neo.setupClass(MainView);
 A card container has multiple child items, one of which is visible. 
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
-import Base from '../../../../src/container/Base.mjs';
+import Button    from '../button/Base.mjs';
+import Container from '../container/Base.mjs';
 
-class MainView extends Base {
+class MainView extends Container {
     static config = {
         className: 'Example.view.MainView',
         layout   : 'vbox',
@@ -178,7 +178,7 @@ Neo.mjs is class-based, and thus, any component or container can be defined as i
 other component in the framework.
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
+import Button from '../button/Base.mjs';
 // In practice this would be some handy reusable component
 class MySpecialButton extends Button {
     static config = {
@@ -191,7 +191,7 @@ class MySpecialButton extends Button {
 Neo.setupClass(MySpecialButton);
 
 
-import Container from '../../../../src/container/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {

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

@@ -18,8 +18,8 @@ The `Simple` class introduces syntax. It doesn't have any content, so if you run
 see anything. We'll change that in the next example.
 
 <pre data-neo>
-import Component  from '../../../../src/component/Base.mjs';
-import Container  from '../../../../src/container/Base.mjs';
+import Component from '../component/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class Simple extends Component {
     static config = {
@@ -59,8 +59,8 @@ updated or accessed. You're free to implment these methods to provide business r
 values, or have side-effects, such as updating a view or firing an event.
 
 <pre data-neo>
-import Component  from '../../../../src/component/Base.mjs';
-import Container  from '../../../../src/container/Base.mjs';
+import Component from '../component/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class Simple extends Component {
     static config = {
@@ -113,8 +113,8 @@ Typically, the _afterSet_ method is used to update a view or to fire an event.
 Look at this code: `afterSetBar()` fires an event, and the config in the `items[]` is listening to it.
 
 <pre data-neo>
-import Component  from '../../../../src/component/Base.mjs';
-import Container  from '../../../../src/container/Base.mjs';
+import Component from '../component/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class Simple extends Component {
     static config = {

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

@@ -10,20 +10,20 @@ Neo.mjs is class-based, which means you're free to extend any component (or any
 ## Lifecycle config properties
 
 <pre data-neo>
-import Button    from '../../../../src/button/Base.mjs';
+import Button from '../button/Base.mjs';
 // In practice this would be some handy reusable component
 class MySpecialButton extends Button {
     static config = {
         className: 'Example.view.MySpecialButton',
-        iconCls: 'far fa-face-grin-wide',
-        ui: 'ghost'
+        iconCls  : 'far fa-face-grin-wide',
+        ui       : 'ghost'
     }
 }
 
 Neo.setupClass(MySpecialButton);
 
 
-import Container from '../../../../src/container/Base.mjs';
+import Container from '../container/Base.mjs';
 
 class MainView extends Container {
     static config = {

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

@@ -11,8 +11,8 @@ use to describe the component you're creating> You can also access or set the pr
 ## A view with one component
 
 <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 = {
@@ -47,8 +47,8 @@ Let's put a second button in the container.
 ## A view with two components
 
 <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/Earthquakes-01-goals.md

@@ -0,0 +1,32 @@
+In this topic you'll create an application that fetches data on earthquakes in Iceland,
+and show the information in two views: a table, and a map.
+You'll do this in a series of simple labs. 
+
+What are the goals of this lengthy topic?
+
+- To give you hands-on coding a simple app
+- To introduce fundamental Neo concepts
+
+Most of these labs are copy-and-paste because we're focusing on _what_ the code is doing on rather than _how_.
+
+For this tutorial don't worry about syntax details. Other tutorials and guides will spend more and 
+more time on syntax.e
+
+## Key concepts
+
+A few key concepts we'll be discussing:
+
+- Creating a starter app
+- Configuring components
+- Debugging
+- Class-based coding
+- View models
+- Events
+- Controllers
+
+## Advice
+
+A word of advice: Keep a high-level perspective, especially early on. We'll have plenty of time to get 
+into the code, and we'll do most things multiple times. In other words, focus on what you're accomplishing,
+and don't worry about syntax details. 
+

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-01-generate-a-workspace.md

@@ -0,0 +1,47 @@
+In this lab, you'll generate a Neo.mjs workspace and run the starter app.
+
+<details>
+<summary>Wait!</summary>
+You may already have a workspace! If so, you can skip this lab. For example, if you followed the <a href="#/learn/Setup">Getting Started > Setup</a> topic, above, you should already have a workspace.
+
+If you don't have a workspace, then continue on to the next step.
+</details>
+
+<details>
+<summary>Use the command-line to generate the workspace</summary>
+
+Use a terminal window to navigate to some parent folder, 
+then run 
+
+    npx neo-app@latest
+
+You'll be prompted for a workspace name, starter app name, etc &mdash; accept the default for everything.
+As the command finishes it starts a server and opens a browser window.
+</details>
+
+<details>
+<summary>Inspect the workspace</summary>
+
+The workspace contains a local copy of the API docs, an `apps` directory (where your apps are found), 
+and some other directories.
+</details>
+
+<details>
+<summary>Start the server</summary>
+From the root of the `workspace` start the server via `npm run server-start`. That starts a server
+at port 8080 and opens a new browser window.
+
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/StartServer.png" style="width:80%"/>
+
+</details>
+
+
+<details>
+<summary>Run the starter app</summary>
+
+By default, an app named `myapp` was created. You can run it by entering the `apps` directory and 
+clicking `myapp`. It's a folder containing an `index.html` along with the source code for the app.
+
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/RunTheStarterApp.png" style="width:80%"/>
+
+</details>