neo.mjs 4.6.0 → 4.6.2

package/README.md

@@ -36,7 +36,6 @@ No need to take care of a workers setup, and the cross channel communication on
 11. <a href="#story--vision">Story & Vision</a>
 12. <a href="#contributors">neo.mjs is in need of more contributors!</a>
 13. <a href="#sponsors">neo.mjs is in need of more sponsors!</a>
-14. <a href="#jobs">Jobs</a>
 
 </br></br>
 <h2 id="slack-channel">1. Slack Channel for questions, ideas & feedback</h2>
@@ -234,13 +233,6 @@ The benefit of doing so is getting results delivered faster.
 
 More infos: <a href="./BACKERS.md">Sponsors & Backers</a>
 
-</br></br>
-<h2 id="jobs">14. Jobs</h2>
-Accenture is hiring multiple neo.mjs developers for the new Cloud Technology Studio in Kaiserslauern (Germany):
-<a href="https://www.accenture.com/de-de/careers/jobdetails?id=R00057924_de">Senior neo.mjs Frontend Developer /Architect (all genders)</a></br></br>
-
-These full-time roles are based on German contracts, so they require living in (or relocating to) Germany.
-Ping us on LinkedIn or Slack for details.
 
 </br></br>
 Logo contributed by <a href="https://www.linkedin.com/in/torsten-dinkheller-614516231/">Torsten Dinkheller</a>.

package/docs/app/view/MainContainerController.mjs

@@ -69,9 +69,9 @@ class MainContainerController extends Component {
                 /* webpackIgnore: true */
                 record.path).then((module) => {
                     contentTabContainer.add({
-                        module         : module.default,
-                        id             : name,
-                        tabButtonConfig: tabButtonConfig
+                        module: module.default,
+                        id    : name,
+                        tabButtonConfig
                     });
                 }
             );
@@ -86,15 +86,15 @@ class MainContainerController extends Component {
                 modules.forEach(module => {
                     items.push({
                         module: module.default
-                    });
+                    })
                 });
 
                 contentTabContainer.add({
-                    ntype          : 'container',
-                    id             : name,
-                    items          : items,
-                    style          : {padding: '10px'},
-                    tabButtonConfig: tabButtonConfig
+                    ntype: 'container',
+                    id   : name,
+                    items,
+                    style: {padding: '10px'},
+                    tabButtonConfig
                 });
             })
         }
@@ -164,8 +164,9 @@ class MainContainerController extends Component {
         }
 
         Neo.main.addon.Stylesheet.swapStyleSheet({
-            href: href,
-            id  : 'hljs-theme'
+            appName: me.component.appName,
+            href,
+            id     : 'hljs-theme'
         }).then(data => {
             button.text = buttonText;
         });

package/docs/app/view/classdetails/SourceViewComponent.mjs

@@ -60,11 +60,11 @@ class SourceViewComponent extends Component {
     construct(config) {
         super.construct(config);
 
-        let me   = this,
-            url  = '../../' + me.structureData.srcPath;
+        let me  = this,
+            url = '../../' + me.structureData.srcPath;
 
         Neo.Xhr.promiseRequest({
-            url: url
+            url
         }).then(data => {
             me.applySourceCode(data.response);
         });
@@ -79,11 +79,9 @@ class SourceViewComponent extends Component {
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
 
-        if (value) {
-            setTimeout(() => {
-                this.syntaxHighlight();
-            }, 50);
-        }
+        value && setTimeout(() => {
+            this.syntaxHighlight();
+        }, 50);
     }
 
     /**
@@ -99,10 +97,11 @@ class SourceViewComponent extends Component {
             setTimeout(() => {
                 Neo.main.addon.HighlightJS.syntaxHighlightLine({
                     addLine   : me.line,
+                    appName   : me.appName,
                     removeLine: me.previousLine,
                     vnodeId   : me.vdom.cn[0].id
                 });
-            }, 50);
+            }, 50)
         }
     }
 
@@ -120,7 +119,7 @@ class SourceViewComponent extends Component {
         }
 
         if (me.isHighlighted) {
-            me.afterSetIsHighlighted(true, false);
+            me.afterSetIsHighlighted(true, false)
         }
     }
 
@@ -135,7 +134,7 @@ class SourceViewComponent extends Component {
         node.cn[0].innerHTML = data; // code tag
         me.update();
 
-        me.mounted && me.syntaxHighlight();
+        me.mounted && me.syntaxHighlight()
     }
 
     /**
@@ -145,6 +144,7 @@ class SourceViewComponent extends Component {
         let me = this;
 
         Neo.main.addon.HighlightJS.syntaxHighlight({
+            appName: me.appName,
             vnodeId: me.vdom.cn[0].id
         }).then(() => {
             if (!me.isHighlighted) {
@@ -152,7 +152,7 @@ class SourceViewComponent extends Component {
             } else {
                 me.afterSetIsHighlighted(true, false);
             }
-        });
+        })
     }
 }
 

package/examples/form/field/text/MainContainer.mjs

@@ -132,6 +132,12 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'placeholderText',
             listeners: {change: me.onConfigChange.bind(me, 'placeholderText')},
             value    : me.exampleComponent.placeholderText
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.readOnly,
+            labelText: 'readOnly',
+            listeners: {change: me.onConfigChange.bind(me, 'readOnly')},
+            style    : {marginTop: '10px'}
         }, {
             module   : CheckBox,
             checked  : me.exampleComponent.required,

package/examples/toast/MainContainer.mjs

@@ -0,0 +1,131 @@
+import Button                  from '../../src/button/Base.mjs';
+import CheckBox                from '../../src/form/field/CheckBox.mjs';
+import Component               from '../../src/component/Base.mjs';
+import FormContainer           from '../../src/form/Container.mjs';
+import MainContainerController from './MainContainerController.mjs';
+import NumberField             from '../../src/form/field/Number.mjs';
+import SelectField             from '../../src/form/field/Select.mjs';
+import TextField               from '../../src/form/field/Text.mjs';
+import Viewport                from '../../src/container/Viewport.mjs';
+
+/**
+ * @class Neo.examples.toast.MainContainer
+ * @extends Neo.container.Viewport
+ */
+class MainContainer extends Viewport {
+    static getConfig() {return {
+        className : 'Neo.examples.toast.MainContainer',
+        autoMount : true,
+        controller: MainContainerController,
+        layout: {ntype: 'hbox', align: 'stretch'},
+
+        items: [{
+            module   : FormContainer,
+            flex     : 'none',
+            layout   : {ntype: 'vbox'},
+            style    : {margin: '20px'},
+            reference: 'form',
+
+            itemDefaults: {
+                height        : 27,
+                labelPosition : 'inline',
+                listeners     : {change: 'onChange'},
+                maxValue      : 4000,
+                style         : {marginLeft: '10px'},
+                useSpinButtons: false,
+                width         : 150
+            },
+
+            items: [{
+                module   : TextField,
+                labelText: 'msg',
+                name     : 'msg',
+                required : true,
+                style    : {paddingBottom: '40px', marginLeft: '10px'}
+            }, {
+                module   : TextField,
+                labelText: 'tile',
+                name     : 'title'
+            }, {
+                module   : TextField,
+                labelText: 'iconCls',
+                name     : 'iconCls'
+            }, {
+                module   : SelectField,
+                labelText: 'position',
+                name     : 'position',
+                store    : {data: [{name: 'tl'}, {name: 'tc'}, {name: 'tr'}, {name: 'bl'}, {name: 'bc'}, {name: 'br'}]}
+            }, {
+                module   : SelectField,
+                labelText: 'slideDirection',
+                name     : 'slideDirection',
+                store    : {data: [{name: 'down'}, {name: 'up'}, {name: 'left'}, {name: 'right'}]}
+            }, {
+                module   : SelectField,
+                labelText: 'ui',
+                name     : 'ui',
+                store    : {data: [{name: 'info'}, {name: 'danger'}, {name: 'success'}]}
+            }, {
+                module   : NumberField,
+                labelText: 'minHeight',
+                name     : 'minHeight'
+            }, {
+                module   : NumberField,
+                labelText: 'maxWidth',
+                name     : 'maxWidth'
+            }, {
+                module    : CheckBox,
+                labelText : 'Closable',
+                labelWidth: 70,
+                name      : 'closable',
+                reference : 'closable',
+                style     : {padding: '8px 0 10px 9px'}
+            }, {
+                module   : Button,
+                reference: 'creation-button',
+                disabled : true,
+                handler  : 'createToast',
+                height   : 27,
+                iconCls  : 'fa-solid fa-window-maximize',
+                style    : {marginLeft: '10px'},
+                text     : 'create toast'
+            }]
+        }, {
+            module: Component,
+            reference: 'output',
+            cls: ['output'],
+            vdom:
+            {cn: [
+                {tag: 'pre', cn: [
+                    {tag: 'code', class: 'javascript'}
+                ]}
+            ]},
+
+            itemTpl: data => {
+                return [
+                    {cls: 'import', innerHTML: 'import Toast from \'../../../../node_modules/neo.mjs/src/dialog/Toast.mjs\';'},
+                    {innerHTML: 'Neo.toast({'},
+                    {cls: 'tab', cn: [
+                        {cls: 'grey', innerHTML: '/* mandatory */'},
+                        {innerHTML: `appName: '${data.appName}',`},
+                        {innerHTML: `msg: '${data.msg}',`},
+                        {innerHTML: '/* optional */'},
+                        {innerHTML: `title: '${data.title}',`, removeDom: !data.title},
+                        {innerHTML: `iconCls: '${data.iconCls}',`, removeDom: !data.iconCls},
+                        {innerHTML: `closable: ${data.closable},`, removeDom: !data.closable},
+                        {innerHTML: `position: '${data.position}',`, removeDom: !data.position},
+                        {innerHTML: `slideDirection: '${data.slideDirection}',`, removeDom: !data.slideDirection},
+                        {innerHTML: `maxWidth: ${data.maxWidth},`, removeDom: !data.maxWidth},
+                        {innerHTML: `minHeight: ${data.minHeight},`, removeDom: !data.minHeight},
+                        {innerHTML: `ui: '${data.ui}'`, removeDom: !data.ui},
+                    ]},
+                    {innerHTML: '})'}
+                ]
+            }
+        }]
+    }}
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/toast/MainContainerController.mjs

@@ -0,0 +1,95 @@
+import ComponentController from '../../src/controller/Component.mjs';
+import Toast               from '../../src/dialog/Toast.mjs';
+
+/**
+ * @class Neo.examples.toast.MainContainerController
+ * @extends Neo.controller.Component
+ */
+class MainContainerController extends ComponentController {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.examples.toast.MainContainerController'
+         * @protected
+         */
+        className: 'Neo.examples.toast.MainContainerController'
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+        Neo.main.addon.HighlightJS.switchTheme('dark');
+    }
+
+    /**
+     * Whenever any field changes we update the output
+     * @param {Object} data
+     * @returns {Promise<void>}
+     */
+    async onChange(data) {
+        let me      = this,
+            form    = me.getReference('form'),
+            output  = me.getReference('output'),
+            button  = me.getReference('creation-button'),
+            oVdom   = output.vdom.cn[0].cn[0],
+            isValid = form.isValid(),
+            values;
+
+        if (Neo.isBoolean(data.value)) {
+            me.getReference('closable').value = data.value;
+        }
+
+        values = form.getValues();
+
+        values.appName = me.component.appName;
+        button.disabled = !isValid;
+
+        if (form.validate()) {
+            oVdom.cn = output.itemTpl(values);
+
+            output.update();
+
+            await Neo.timeout(20)
+            me.syntaxHighlight();
+        }
+    }
+
+    /**
+     * Cleanup the values and show the toast
+     */
+    createToast() {
+        let me     = this,
+            form   = me.getReference('form'),
+            values = form.getValues(),
+            clear  = ['position', 'slideDirection', 'ui', 'minHeight', 'maxWidth', 'closable'];
+
+        // use the defaults from toast if not set
+        clear.forEach(item => {
+            if (values[item] === null) {
+                delete values[item];
+            }
+        })
+
+        values.appName = me.component.appName;
+        Neo.toast(values);
+    }
+
+    /**
+     * 3rd party tool to highlight the code
+     */
+    syntaxHighlight() {
+        let me     = this,
+            output = me.getReference('output'),
+            oVdom  = output.vdom;
+
+        Neo.main.addon.HighlightJS.syntaxHighlight({
+            appName: me.component.appName,
+            vnodeId: oVdom.cn[0].id
+        });
+    }
+}
+
+Neo.applyClassConfig(MainContainerController);
+
+export default MainContainerController;

package/examples/toast/app.mjs

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

package/examples/toast/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo GoogleMaps Component</title>
+
+    <style>
+        .output {
+            background: #2b2b2b;
+            padding: 50px 40px;
+            font-weight: 700;
+            color: #2b2b2b;
+        }
+        .import {
+            padding-bottom: 40px;
+        }
+        .tab {
+            padding-left: 40px;
+        }
+    </style>
+</head>
+</head>
+<body>
+    <script src="../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/toast/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath": "examples/toast/app.mjs",
+    "basePath": "../../",
+    "environment": "development",
+    "mainPath": "./Main.mjs",
+    "mainThreadAddons": ["HighlightJS", "Stylesheet"]
+}