neo.mjs 6.18.3 → 6.19.1

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/examples/model/twoWay/MainContainer.mjs

@@ -0,0 +1,76 @@
+import ComponentModel from '../../../src/model/Component.mjs';
+import Label          from '../../../src/component/Label.mjs';
+import TextField      from '../../../src/form/field/Text.mjs';
+import Viewport       from '../../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.model.twoWay.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static config = {
+        /**
+         * @member {String} className='Neo.examples.model.twoWay.MainContainer'
+         * @protected
+         */
+        className: 'Neo.examples.model.twoWay.MainContainer',
+        /**
+         * @member {Object|Neo.model.Component} model
+         */
+        model: {
+            data: {
+                user: {
+                    details: {
+                        firstname: 'Tobias',
+                        lastname : 'Uhlig'
+                    }
+                }
+            }
+        },
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module    : Label,
+            flex      : 'none',
+            labelText : 'Firstname',
+            labelWidth: 110,
+            width     : 300,
+
+            bind: {
+                text: data => data.user.details.firstname + ' ' + data.user.details.lastname
+            },
+        }, {
+            module    : TextField,
+            flex      : 'none',
+            labelText : 'Firstname',
+            labelWidth: 110,
+            style     : {marginTop: '2em'},
+            width     : 300,
+
+            bind: {
+                value: {twoWay: true, value: data => data.user.details.firstname}
+            },
+        }, {
+            module    : TextField,
+            flex      : 'none',
+            labelText : 'Lastname',
+            labelWidth: 110,
+            width     : 300,
+
+            bind: {
+                value: {twoWay: true, value: data => data.user.details.lastname}
+            },
+        }],
+        /**
+         * @member {Object} style
+         */
+        style: {
+            padding: '5em'
+        }
+    }
+}
+
+Neo.setupClass(MainContainer);
+
+export default MainContainer;

package/examples/model/twoWay/app.mjs

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

package/examples/model/twoWay/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>model.Component: 2 way binding</title>
+</head>
+<body>
+    <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/model/twoWay/neo-config.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.18.3",
+    "version": "6.19.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -43,25 +43,25 @@
     },
     "homepage": "https://neomjs.com/",
     "devDependencies": {
-        "@fortawesome/fontawesome-free": "^6.5.2",
+        "@fortawesome/fontawesome-free": "^6.6.0",
         "autoprefixer": "^10.4.19",
         "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.3.2",
-        "marked": "^13.0.1",
+        "inquirer": "^10.0.4",
+        "marked": "^13.0.2",
         "monaco-editor": "^0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.39",
-        "sass": "^1.77.6",
+        "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/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>

package/resources/data/deck/learnneo/pages/Earthquakes-Lab-02-generate-the-starter-app.md

@@ -0,0 +1,150 @@
+In this lab you'll create a starter app and add a single component.
+
+<details>
+
+<summary>Use the command-line to create a starter app</summary>
+
+Use a terminal window to navigate to the workspace and run the following script. Use "Earthquakes"
+as the app name, and defaults for everything else.
+
+    npm run create-app-minimal
+
+After the script runs yous should see these files in the `app/earthquakes` directory.
+
+`view/MainContainer.mjs`
+- `app.mjs`
+- `index.html`
+- `neo-config.json`
+
+If you look in `neo-config.json` you should see this content. Note the `mainThreadAddons` block 
+&mdash; it reflects the add-ons you chose when you followed the instructions in the script.
+<pre>
+{
+    "appPath": "../../apps/earthquakes/app.mjs",
+    "basePath": "../../",
+    "environment": "development",
+    "mainPath": "../node_modules/neo.mjs/src/Main.mjs",
+    "mainThreadAddons": [
+        "DragDrop",
+        "Stylesheet"
+    ],
+    "workerBasePath": "../../node_modules/neo.mjs/src/worker/"
+}</pre>
+
+You're free to edit `neo-config.json` if you were to change your mind later about the theme or need for other add-ons.
+
+If you refresh browser at <a href="http://localhost:8080/apps/" target="apps">http://localhost:8080/apps/</a>
+you'll see the new _earthquakes_ app listed, and if you run it you'll see... nothing! That's because the 
+minimal starter app is the shell of an application without any view content. We'll add a little content
+later in the lab.
+
+<img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EmptyEarthquakes.png"></img>
+
+</details>
+
+<details>
+<summary>Look at the main view source</summary>
+
+Use a code editor and look at `workspace/apps/earthquakes/src/view/MainView.mjs`. You'll see the 
+following class definition: 
+
+<pre data-javascript>
+
+import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel  from './MainViewModel.mjs';
+
+class MainView extends Base {
+    static config = {
+        className: 'Earthquakes.view.MainView',
+        ntype: 'earthquakes-main',
+        
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [],
+    }
+}
+
+Neo.setupClass(MainView);
+
+export default MainView;
+</pre>
+
+As you can see, `MainView extends Base`, and `Base` is a _container_ (`Neo.container.Base`). 
+A container is a component &mdash; it holds other components, specified in `items:[]`. There 
+are no items in the starter app. The `layout` config specifies how the items are arranged.
+
+</details>
+
+<details>
+<summary>Add a component</summary>
+
+Let's add a button. To do that, add an import for the button base class, then configure it
+in the container's `items:[]`. If you were to read the API docs for buttons, you'd see 
+that buttons have various configs, such as `text`, which is the button text, `iconCls`, which
+is typically a FontAwesome CSS class used to show an icon, and `handler`, which specifies
+which method to run when the button is clicked. We'll use `text`.
+
+<pre data-javascript>
+
+import Base       from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Button     from '../../../node_modules/neo.mjs/src/button/Base.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel  from './MainViewModel.mjs';
+
+class MainView extends Base {
+    static config = {
+        className: 'Earthquakes.view.MainView',
+        ntype: 'earthquakes-main',
+
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [{
+            module: Button,
+            text: 'Button!'
+        }],
+    }
+}
+
+Neo.setupClass(MainView);
+
+export default MainView;
+</pre>
+
+
+When you run the app you'll see the single button.
+
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesSingleFitButton.png" style="width:80%"/>
+
+The button takes up the full width. Buttons look different depending on the theme. We're using
+the _neo-theme-neo-light_ theme, which controls button height. Otherwise, child items a using the _fit_ layout
+take up the full window.
+</details>
+
+
+<details>
+<summary>Modify the layout</summary>
+The `layout` configures how child items are visually arranged. First, note that the config
+specifies `ntype`. We used `module` for the button config. An `ntype` is a class alias &mdash; if a class
+has already been imported, you can use the `ntype` rather than importing it again and using the `module`
+config. We haven't imported any layouts, but it turns out that `Neo.container.Base` _does_ import all the 
+layout types, which means we're always free to use `ntype` with layouts. You're free to specify an `ntype`
+for the classes you define.
+
+Let's change the layout to arrange items vertically, with items aligned horizontally at the start.
+
+<pre data-javascript>
+layout: {
+    ntype: 'vbox',
+    align: 'start'
+}
+</pre>
+
+<img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesSingleVoxStartButton.png" style="width:80%"/>
+
+
+</details>