neo.mjs 5.15.5 → 5.16.1

package/apps/ServiceWorker.mjs

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

package/buildScripts/docs/jsdocx.mjs

@@ -1,9 +1,11 @@
-import fs     from 'fs-extra';
-import helper from 'neo-jsdoc-x/src/lib/helper.js';
-import jsdocx from 'neo-jsdoc-x';
-import path   from 'path';
+import fs       from 'fs-extra';
+import helper   from 'neo-jsdoc-x/src/lib/helper.js';
+import jsdocx   from 'neo-jsdoc-x';
+import path     from 'path';
+import showdown from 'showdown';
 
 const __dirname   = path.resolve(),
+      markdown    = new showdown.Converter(),
       cwd         = process.cwd(),
       requireJson = path => JSON.parse(fs.readFileSync((path))),
       packageJson = requireJson(path.resolve(cwd, 'package.json')),
@@ -324,12 +326,12 @@ jsdocx.parse(options)
             namespace.classData.push(item);
 
             if (item.description) {
-                item.description = item.description.replace(/\n/g, "<br />");
+                item.description = markdown.makeHtml(item.description)
             }
 
             item.params?.forEach(param => {
                 if (param.description) {
-                    param.description = param.description.replace(/\n/g, "<br />");
+                    param.description = markdown.makeHtml(param.description)
                 }
             });
 

package/docs/app/view/MainContainer.mjs

@@ -6,6 +6,7 @@ import ExamplesTreeList        from './ExamplesTreeList.mjs';
 import HeaderContainer         from './HeaderContainer.mjs';
 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';
@@ -85,6 +86,15 @@ class MainContainer extends Viewport {
                         text   : 'Examples'
                     }
                 }]
+            }, {
+                module      : Splitter,
+                resizeTarget: 'previous',
+                size        : 5,
+
+                style: {
+                    borderTop: 'var(--tab-strip-height) solid var(--tab-strip-background-color)',
+                    marginTop: 'var(--tab-button-height)'
+                }
             }, {
                 module   : ContentTabContainer,
                 flex     : 1,

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

@@ -38,9 +38,9 @@ class HeaderComponent extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-        {cn: [
-            {tag: 'span', cls: ['neo-docs-header-text']}
-        ]}
+            {cn: [
+                    {tag: 'span', cls: ['neo-docs-header-text']}
+                ]}
     }
 
     /**

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

@@ -5,6 +5,7 @@ import MainContainerController from './MainContainerController.mjs';
 import MembersList             from './MembersList.mjs';
 import Panel                   from '../../../../src/container/Panel.mjs';
 import SearchField             from '../../../../src/form/field/Search.mjs';
+import Splitter                from '../../../../src/component/Splitter.mjs';
 
 /**
  * @class Docs.view.classdetails.MainContainer
@@ -42,10 +43,11 @@ class MainContainer extends Container {
          * @member {Array} items=[//...]]
          */
         items: [{
-            ntype : 'container',
-            _cls  : ['neo-docs-classdetails-headercontainer'],
-            flex  : '1 0 auto',
-            layout: {ntype: 'hbox', align: 'stretch'},
+            ntype    : 'container',
+            cls      : ['neo-docs-classdetails-headercontainer'],
+            flex     : '1 1 auto',
+            layout   : {ntype: 'hbox', align: 'stretch'},
+            minHeight: 200,
 
             items: [{
                 module : Panel,
@@ -109,12 +111,20 @@ class MainContainer extends Container {
                     flex  : 1,
                     record: '@config:structureData'
                 }]
+            }, {
+                module: Splitter,
+                size  : 5
             }, {
                 module       : HierarchyTreeList,
                 flex         : '0 0 auto',
                 minWidth     : 330,
                 structureData: '@config:structureData'
             }]
+        }, {
+            module      : Splitter,
+            direction   : 'horizontal',
+            resizeTarget: 'previous',
+            size        : 5
         }, {
             module   : MembersList,
             flex     : 1,

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

@@ -50,7 +50,7 @@ class MembersList extends Base {
          * @member {Object} _vdom={cn: []}
          */
         _vdom:
-        {cn: []}
+            {cn: []}
     }
 
     /**
@@ -329,9 +329,9 @@ class MembersList extends Base {
 
         me.update();
 
-        hasExamples && setTimeout(() => {
+        setTimeout(() => {
             Neo.main.addon.HighlightJS.syntaxHighlightInit();
-        }, 100);
+        }, 100)
     }
 
     /**
@@ -412,7 +412,7 @@ class MembersList extends Base {
                         cn : [{
                             innerHTML: description.innerHTML
                         },
-                        MembersList.createParametersTable(nestedParams)]
+                            MembersList.createParametersTable(nestedParams)]
                     }
                 }
 
@@ -425,7 +425,7 @@ class MembersList extends Base {
                         tag      : 'td',
                         innerHTML: param.type ? MembersList.escapeHtml(param.type.names.join(' | ')) : ''
                     },
-                    description]
+                        description]
                 });
 
                 if (hasDefaultValues) {

package/examples/ServiceWorker.mjs

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

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

@@ -1,9 +1,7 @@
-import CheckBox              from '../../../../src/form/field/CheckBox.mjs';
 import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
 import FileUploadField       from '../../../../src/form/field/FileUpload.mjs';
 import NumberField           from '../../../../src/form/field/Number.mjs';
-import Radio                 from '../../../../src/form/field/Radio.mjs';
-import TextField             from '../../../../src/form/field/Text.mjs';
+import Panel                  from '../../../../src/container/Panel.mjs';
 
 /**
  * @class Neo.examples.form.field.text.MainContainer
@@ -24,19 +22,79 @@ class MainContainer extends ConfigurationViewport {
             module   : NumberField,
             labelText: 'width',
             listeners: {change: me.onConfigChange.bind(me, 'width')},
-            maxValue : 300,
-            minValue : 50,
+            maxValue : 350,
+            minValue : 200,
             stepSize : 5,
             style    : {marginTop: '10px'},
             value    : me.exampleComponent.width
-        }]
+        }];
     }
 
     createExampleComponent() {
-        return Neo.create(FileUploadField, {
-            height:  50,
-            width : 200
-        })
+        return Neo.create(Panel, {
+            style : 'padding:1em',
+            items : [{
+                module            : FileUploadField,
+                id                : 'my-downloadable-test',
+                uploadUrl         : 'http://127.0.0.1:3000/file-upload-test',
+                documentStatusUrl : 'http://127.0.0.1:3000/document-status-downloadable',
+                documentDeleteUrl : 'http://127.0.0.1:3000/document-delete',
+                downloadUrl       : 'http://127.0.0.1:3000/getDocument',
+                width             : 350,
+                maxSize           : '10mb',
+                types             : {
+                    png : 1,
+                    jpg : 1,
+                    xls : 1,
+                    pdf : 1
+                }
+            }, {
+                module            : FileUploadField,
+                id                : 'my-not-downloadable-test',
+                uploadUrl         : 'http://127.0.0.1:3000/file-upload-test',
+                documentStatusUrl : 'http://127.0.0.1:3000/document-status-not-downloadable',
+                documentDeleteUrl : 'http://127.0.0.1:3000/document-delete',
+                downloadUrl       : 'http://127.0.0.1:3000/getDocument',
+                width             : 350,
+                maxSize           : '10mb',
+                types             : {
+                    png : 1,
+                    jpg : 1,
+                    xls : 1,
+                    pdf : 1
+                }
+            }, {
+                module            : FileUploadField,
+                id                : 'my-upload-fail-test',
+                uploadUrl         : 'http://127.0.0.1:3000/file-upload-test-fail',
+                documentStatusUrl : 'http://127.0.0.1:3000/document-status',
+                documentDeleteUrl : 'http://127.0.0.1:3000/document-delete',
+                downloadUrl       : 'http://127.0.0.1:3000/getDocument',
+                width             : 350,
+                maxSize           : '10mb',
+                types             : {
+                    png : 1,
+                    jpg : 1,
+                    xls : 1,
+                    pdf : 1
+                }
+            }, {
+                module            : FileUploadField,
+                id                : 'my-scan-fail-test',
+                uploadUrl         : 'http://127.0.0.1:3000/file-upload-test',
+                documentStatusUrl : 'http://127.0.0.1:3000/document-status-fail',
+                documentDeleteUrl : 'http://127.0.0.1:3000/document-delete',
+                downloadUrl       : 'http://127.0.0.1:3000/getDocument',
+                width             : 350,
+                maxSize           : '10mb',
+                types             : {
+                    png : 1,
+                    jpg : 1,
+                    xls : 1,
+                    pdf : 1
+                }
+            }]
+        });
     }
 }
 

package/examples/form/field/fileupload/README.md

@@ -0,0 +1,9 @@
+# How to run this example
+You need to install the following npm packages:
+- cors
+- express
+
+To start the dummy backend, you need to use:
+```
+node ./examples/form/field/fileupload/server.mjs
+```

package/examples/form/field/fileupload/server.mjs

@@ -0,0 +1,49 @@
+import express from "express";
+import cors from "cors"
+
+const app = express();
+const port = 3000;
+
+app.use(cors());
+
+app.post('/file-upload-test', async (req, res) => {
+
+    await new Promise(resolve => setTimeout(resolve, 3000));
+
+    res.set('Content-Type', 'application/json');
+    res.send('{"success":true,"documentId":"1"}');
+  })
+
+app.post('/file-upload-test-fail', async (req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"success":false,"message":"Something went wrong"}');
+});
+
+app.get('/document-status', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"status":"scanning"}');
+});
+
+app.get('/document-delete', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('');
+});
+
+app.get('/document-status-fail', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"status":"scan-failed"}');
+});
+
+app.get('/document-status-downloadable', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"status":"downloadable"}');
+});
+
+app.get('/document-status-not-downloadable', async(req, res) => {
+    res.set('Content-Type', 'application/json');
+    res.send('{"status":"not-downloadable"}');
+});
+
+app.listen(port, () => {
+  console.log(`Example app listening on port ${port}`)
+});

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

@@ -0,0 +1,124 @@
+import CheckBox              from '../../../../src/form/field/CheckBox.mjs';
+import ConfigurationViewport from '../../../ConfigurationViewport.mjs';
+import NumberField           from '../../../../src/form/field/Number.mjs';
+import Radio                 from '../../../../src/form/field/Radio.mjs';
+import SwitchField           from '../../../../src/form/field/Switch.mjs';
+import TextField             from '../../../../src/form/field/Text.mjs';
+
+/**
+ * @class Neo.examples.form.field.switch.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+    static config = {
+        className           : 'Neo.examples.form.field.switch.MainContainer',
+        autoMount           : true,
+        configItemLabelWidth: 160,
+        layout              : {ntype: 'hbox', align: 'stretch'}
+    }
+
+    createConfigurationComponents() {
+        let me = this;
+
+        return [{
+            module   : CheckBox,
+            checked  : me.exampleComponent.checked,
+            labelText: 'checked',
+            listeners: {change: me.onConfigChange.bind(me, 'checked')}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.disabled,
+            labelText: 'disabled',
+            listeners: {change: me.onConfigChange.bind(me, 'disabled')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : TextField,
+            clearable: true,
+            labelText: 'error',
+            listeners: {change: me.onConfigChange.bind(me, 'error')},
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.error
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.hideLabel,
+            labelText: 'hideLabel',
+            listeners: {change: me.onConfigChange.bind(me, 'hideLabel')},
+            style    : {marginTop: '10px'}
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.labelPosition === 'left',
+            hideValueLabel: false,
+            labelText     : 'labelPosition',
+            listeners     : {change: me.onRadioChange.bind(me, 'labelPosition', 'left')},
+            name          : 'labelPosition',
+            style         : {marginTop: '10px'},
+            valueLabelText: 'left'
+        }, {
+            module        : Radio,
+            checked       : me.exampleComponent.labelPosition === 'top',
+            hideValueLabel: false,
+            labelText     : '',
+            listeners     : {change: me.onRadioChange.bind(me, 'labelPosition', 'top')},
+            name          : 'labelPosition',
+            valueLabelText: 'top'
+        }, {
+            module   : TextField,
+            labelText: 'labelText',
+            listeners: {change: me.onConfigChange.bind(me, 'labelText')},
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.labelText
+        }, {
+            module   : NumberField,
+            labelText: 'labelWidth',
+            listeners: {change: me.onConfigChange.bind(me, 'labelWidth')},
+            maxValue : 200,
+            minValue : 50,
+            stepSize : 5,
+            value    : me.exampleComponent.labelWidth
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.readOnly,
+            labelText: 'readOnly',
+            listeners: {change: me.onConfigChange.bind(me, 'readOnly')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : CheckBox,
+            checked  : me.exampleComponent.required,
+            labelText: 'required',
+            listeners: {change: me.onConfigChange.bind(me, 'required')},
+            style    : {marginTop: '10px'}
+        }, {
+            module   : TextField,
+            labelText: 'valueLabelText',
+            listeners: {change: me.onConfigChange.bind(me, 'valueLabelText')},
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.valueLabelText
+        }, {
+            module   : NumberField,
+            labelText: 'width',
+            listeners: {change: me.onConfigChange.bind(me, 'width')},
+            maxValue : 500,
+            minValue : 50,
+            stepSize : 5,
+            style    : {marginTop: '10px'},
+            value    : me.exampleComponent.width
+        }, {
+            ntype  : 'button',
+            handler: (() => {me.exampleComponent.reset()}),
+            style  : {marginTop: '10px', width: '50%'},
+            text   : 'reset()'
+        }]
+    }
+
+    createExampleComponent() {
+        return Neo.create(SwitchField, {
+            labelText : 'Label',
+            labelWidth: 70,
+            width     : 200
+        })
+    }
+}
+
+Neo.applyClassConfig(MainContainer);
+
+export default MainContainer;

package/examples/form/field/switch/app.mjs

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

package/examples/form/field/switch/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 SwitchField</title>
+</head>
+<body>
+    <script src="../../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/examples/form/field/switch/neo-config.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.15.5",
+    "version": "5.16.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -57,6 +57,7 @@
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.27",
         "sass": "^1.65.1",
+        "showdown": "^2.1.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "4.15.1",

package/resources/scss/src/apps/docs/HeaderContainer.scss

@@ -10,4 +10,4 @@
         padding         : v(docs-header-container-logo-padding);
         text-shadow     : v(docs-header-container-logo-text-shadow);
     }
-}
+}

package/resources/scss/src/apps/docs/MainContainer.scss

@@ -1,5 +1,9 @@
 .neo-docs-maincontainer {
     .neo-docs-navigation-tab-container {
         background-color: v(docs-navigation-tab-container-background-color);
+
+        .neo-tab-content-container {
+            border-right: none;
+        }
     }
-}
+}

package/resources/scss/src/apps/docs/classdetails/HeaderComponent.scss

@@ -3,12 +3,9 @@
     z-index   : 10;
 }
 
-.neo-docs-classdetails-headerpanel {
-    border-right: v(docs-classdetails-headerpanel-border-right) !important;
-}
-
 .neo-docs-classdetails-headercomponent {
     background-color: v(docs-classdetails-headercomponent-background-color);
+    overflow-y      : auto;
     padding         : 15px;
 
     .neo-docs-header-description {
@@ -23,4 +20,4 @@
         font-weight    : 800;
         text-shadow    : 2px 2px 3px rgba(200,200,200,0.1);
     }
-}
+}

package/resources/scss/src/apps/docs/classdetails/MainContainer.scss

@@ -2,4 +2,4 @@
     .neo-docs-classdetails-headerpanel {
         border: 0;
     }
-}
+}

package/resources/scss/src/component/Splitter.scss

@@ -1,10 +1,11 @@
 .neo-splitter {
     background-color: v(splitter-background-color);
     border          : v(splitter-border);
-    transition      : background-color 0.3s ease-in-out;
+    transition      : background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
 
     &:hover {
         background-color: v(splitter-hover-color);
+        border-color    : v(splitter-hover-color);
     }
 
     &.neo-horizontal {
@@ -23,5 +24,6 @@
 .neo-dragproxy {
     &.neo-splitter {
         background-color: v(splitter-hover-color);
+        border-color    : v(splitter-hover-color);
     }
 }