neo.mjs 6.7.8 → 6.8.1

package/apps/ServiceWorker.mjs

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

package/apps/form/view/pages/Page2.mjs

@@ -19,7 +19,7 @@ class Page2 extends FormPageContainer {
             module   : DateField,
             labelText: 'Birthday',
             name     : 'birthday',
-            style    : {marginBottom: '800px', marginTop: '800px'}
+            style    : {marginBottom: '2000px', marginTop: '800px'}
         }]
     }
 }

package/buildScripts/webpack/development/webpack.config.appworker.mjs

@@ -3,7 +3,6 @@ import path    from 'path';
 import webpack from 'webpack';
 
 const cwd                   = process.cwd(),
-      configPath            = path.resolve(cwd, 'buildScripts/myApps.json'),
       requireJson           = path => JSON.parse(fs.readFileSync((path))),
       packageJson           = requireJson(path.resolve(cwd, 'package.json')),
       neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
@@ -13,26 +12,16 @@ const cwd                   = process.cwd(),
       regexIndexNodeModules = /node_modules/g,
       regexTopLevel         = /\.\.\//g;
 
-let config, examplesPath;
-
-if (fs.existsSync(configPath)) {
-    config = requireJson(configPath);
-} else {
-    const myAppsPath = path.resolve(neoPath, 'buildScripts/webpack/json/myApps.json');
-
-    if (fs.existsSync(myAppsPath)) {
-        config = requireJson(myAppsPath);
-    } else {
-        config = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
-    }
-}
+let contextAdjusted = false,
+    examplesPath;
 
 if (!buildTarget.folder) {
     buildTarget.folder = 'dist/development';
 }
 
 export default env => {
-    let examples  = [],
+    let apps      = [],
+        examples  = [],
         insideNeo = env.insideNeo == 'true',
         content, inputPath, outputPath;
 
@@ -88,7 +77,7 @@ export default env => {
 
     const isFile = fileName => fs.lstatSync(fileName).isFile();
 
-    const parseFolder = (folderPath, index, relativePath) => {
+    const parseFolder = (apps, folderPath, index, relativePath) => {
         let itemPath;
 
         fs.readdirSync(folderPath).forEach(itemName => {
@@ -96,22 +85,26 @@ export default env => {
 
             if (isFile(itemPath)) {
                 if (itemName === 'app.mjs') {
-                    examples.push(relativePath);
+                    apps.push(relativePath);
                 }
             } else {
-                parseFolder(itemPath, index + 1, relativePath + `/${itemName}`);
+                parseFolder(apps, itemPath, index + 1, relativePath + `/${itemName}`);
             }
         });
     };
 
-    config.apps?.forEach(key => {
-        createStartingPoint(key, key === 'Docs' ? '' : 'apps');
+    parseFolder(apps, path.join(cwd, 'apps'), 0, '');
+
+    apps.forEach(key => {
+        createStartingPoint(key.substr(1), 'apps');
     });
 
+    createStartingPoint('Docs', '');
+
     examplesPath = path.join(cwd, 'examples');
 
     if (fs.existsSync(examplesPath)) {
-        parseFolder(examplesPath, 0, '');
+        parseFolder(examples, examplesPath, 0, '');
 
         examples.forEach(key => {
             createStartingPoint(key.substr(1), 'examples');
@@ -130,8 +123,11 @@ export default env => {
 
         plugins: [
             new webpack.ContextReplacementPlugin(/.*/, context => {
-                if (!insideNeo && context.context.includes('/src/worker')) {
-                    context.request = '../../' + context.request;
+                let con = context.context;
+
+                if (!insideNeo && !contextAdjusted && (con.includes('/src/worker') || con.includes('\\src\\worker'))) {
+                    context.request = path.join('../../', context.request);
+                    contextAdjusted = true;
                 }
             }),
             ...plugins

package/buildScripts/webpack/json/myApps.template.json

@@ -7,12 +7,7 @@
         "RealWorld",
         "RealWorld2",
         "SharedCovid",
-        "SharedCovidChart",
-        "SharedCovidGallery",
-        "SharedCovidHelix",
-        "SharedCovidMap",
         "SharedDialog",
-        "SharedDialog2",
         "Website"
     ]
 }

package/buildScripts/webpack/production/webpack.config.appworker.mjs

@@ -3,7 +3,6 @@ import path    from 'path';
 import webpack from 'webpack';
 
 const cwd                   = process.cwd(),
-      configPath            = path.resolve(cwd, 'buildScripts/myApps.json'),
       requireJson           = path => JSON.parse(fs.readFileSync((path))),
       packageJson           = requireJson(path.resolve(cwd, 'package.json')),
       neoPath               = packageJson.name === 'neo.mjs' ? './' : './node_modules/neo.mjs/',
@@ -17,26 +16,15 @@ const cwd                   = process.cwd(),
       regexTrimStart        = /^\s+/gm;
 
 let contextAdjusted = false,
-    config, examplesPath;
-
-if (fs.existsSync(configPath)) {
-    config = requireJson(configPath);
-} else {
-    const myAppsPath = path.resolve(neoPath, 'buildScripts/webpack/json/myApps.json');
-
-    if (fs.existsSync(myAppsPath)) {
-        config = requireJson(myAppsPath);
-    } else {
-        config = requireJson(path.resolve(neoPath, 'buildScripts/webpack/json/myApps.template.json'));
-    }
-}
+    examplesPath;
 
 if (!buildTarget.folder) {
     buildTarget.folder = 'dist/production';
 }
 
 export default env => {
-    let examples  = [],
+    let apps      = [],
+        examples  = [],
         insideNeo = env.insideNeo == 'true',
         content, inputPath, outputPath;
 
@@ -98,7 +86,7 @@ export default env => {
 
     const isFile = fileName => fs.lstatSync(fileName).isFile();
 
-    const parseFolder = (folderPath, index, relativePath) => {
+    const parseFolder = (apps, folderPath, index, relativePath) => {
         let itemPath;
 
         fs.readdirSync(folderPath).forEach(itemName => {
@@ -106,22 +94,26 @@ export default env => {
 
             if (isFile(itemPath)) {
                 if (itemName === 'app.mjs') {
-                    examples.push(relativePath);
+                    apps.push(relativePath);
                 }
             } else {
-                parseFolder(itemPath, index + 1, relativePath + `/${itemName}`);
+                parseFolder(apps, itemPath, index + 1, relativePath + `/${itemName}`);
             }
         });
     };
 
-    config.apps?.forEach(key => {
-        createStartingPoint(key, key === 'Docs' ? '' : 'apps');
+    parseFolder(apps, path.join(cwd, 'apps'), 0, '');
+
+    apps.forEach(key => {
+        createStartingPoint(key.substr(1), 'apps');
     });
 
+    createStartingPoint('Docs', '');
+
     examplesPath = path.join(cwd, 'examples');
 
     if (fs.existsSync(examplesPath)) {
-        parseFolder(examplesPath, 0, '');
+        parseFolder(examples, examplesPath, 0, '');
 
         examples.forEach(key => {
             createStartingPoint(key.substr(1), 'examples');

package/examples/ServiceWorker.mjs

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

package/examples/dialog/DemoDialog.mjs

@@ -132,6 +132,7 @@ class DemoDialog extends Dialog {
             index                  : nextIndex,
             listeners              : {close: me.onWindowClose, scope: me},
             modal                  : me.app.mainView.down({valueLabelText: 'Modal'}).checked,
+            trapFocus              : true,
             optionalAnimateTargetId: button.id,
             style                  : {left: me.getOffset(), top: me.getOffset()},
             title                  : 'Dialog ' + nextIndex

package/examples/dialog/MainContainer.mjs

@@ -90,6 +90,7 @@ class MainContainer extends Viewport {
             boundaryContainerId    : me.boundaryContainerId,
             listeners              : {close: me.onWindowClose, scope: me},
             modal                  : me.down({valueLabelText: 'Modal'}).checked,
+            trapFocus              : true,
             optionalAnimateTargetId: data.component.id,
             title                  : 'Dialog 1'
         })

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.7.8",
+    "version": "6.8.1",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -14,7 +14,6 @@
         "add-config": "node ./buildScripts/addConfig.mjs",
         "build-all": "node ./buildScripts/buildAll.mjs -f -n",
         "build-all-questions": "node ./buildScripts/buildAll.mjs -f",
-        "build-my-apps": "node ./buildScripts/webpack/buildMyApps.mjs -f",
         "build-themes": "node ./buildScripts/buildThemes.mjs -f",
         "build-threads": "node ./buildScripts/webpack/buildThreads.mjs -f",
         "create-app": "node ./buildScripts/createApp.mjs",

package/resources/scss/src/dialog/Base.scss

@@ -61,6 +61,12 @@
         }
     }
 
+    &.neo-centered {
+        left      : 50%;
+        top       : 50%;
+        transform : translate(-50%, -50%);
+    }
+
     &.neo-panel {
         .neo-footer-toolbar {
             border    : none;
@@ -103,3 +109,9 @@
         }
     }
 }
+
+// A focusable, but zero-sized element used to grab and redirect focus in focus-trapped modals
+.neo-focus-trap {
+    position : absolute;
+    clip     : rect(0, 0, 0, 0);
+}

package/resources/scss/src/form/field/Switch.scss

@@ -1,6 +1,6 @@
 .neo-switchfield {
     .neo-switchfield-input {
-        background-color: var(--switchfield-color-off-idle);
+        background-color: var(--switchfield-color-off);
         border-radius   : 999px;
         height          : var(--switchfield-height);
         margin          : 0;
@@ -20,32 +20,33 @@
             background-color: var(--switchfield-color-knob);
             border-radius   : 50%;
             height          : var(--switchfield-knobsize);
-            left            : 0;
-            top             : 1.5px;
+            left            : 2px;
+            top             : 2px;
             transition      : transform 150ms ease-out;
             width           : var(--switchfield-knobsize);
         }
 
         &:after {
-            border       : 1px solid var(--switchfield-color-knob);
+            border       : 1px solid var(--switchfield-color-icon-off);
             border-radius: 50%;
-            bottom       : 7px;
-            height       : 8px;
-            right        : 7px;
-            width        : 8px;
+            bottom       : 8px;
+            height       : 6px;
+            right        : 5px;
+            width        : 6px;
         }
 
         &:checked {
-            background-color: var(--switchfield-color-on-idle);
+            background-color: var(--switchfield-color-on);
 
             &:before {
-                transform: translateX(100%);
+                transform: translateX(80%);
             }
 
             &:after {
-                background-color: var(--switchfield-color-knob);
+                background-color: var(--switchfield-color-icon-on);
                 border          : 0;
-                bottom          : 8px;
+                border-radius   : 0;
+                height          : 8px;
                 left            : 9px;
                 right           : auto;
                 width           : 1px;

package/resources/scss/theme-dark/form/field/Switch.scss

@@ -2,12 +2,14 @@
     --switchfield-bordercolor-focused: #57B2EF;
     --switchfield-borderwidth-focused: 4px;
     --switchfield-color-knob         : #fff;
+    --switchfield-color-icon-on      : #fff;
+    --switchfield-color-icon-off     : #767676;
+    --switchfield-color-off          : #BDBDBD;
     --switchfield-color-off-disabled : #BDBDBD;
     --switchfield-color-off-hovered  : #9E9E9E;
-    --switchfield-color-off-idle     : #BDBDBD;
+    --switchfield-color-on           : #005A96;
     --switchfield-color-on-disabled  : #005A96;
     --switchfield-color-on-hovered   : #004C7E;
-    --switchfield-color-on-idle      : #005A96;
     --switchfield-height             : 24px;
     --switchfield-knobsize           : 20px;
     --switchfield-opacity-disabled   : .5;

package/resources/scss/theme-light/form/field/Switch.scss

@@ -2,12 +2,14 @@
     --switchfield-bordercolor-focused: #57B2EF;
     --switchfield-borderwidth-focused: 4px;
     --switchfield-color-knob         : #fff;
+    --switchfield-color-icon-on      : #fff;
+    --switchfield-color-icon-off     : #767676;
+    --switchfield-color-off          : #BDBDBD;
     --switchfield-color-off-disabled : #BDBDBD;
     --switchfield-color-off-hovered  : #9E9E9E;
-    --switchfield-color-off-idle     : #BDBDBD;
+    --switchfield-color-on           : #005A96;
     --switchfield-color-on-disabled  : #005A96;
     --switchfield-color-on-hovered   : #004C7E;
-    --switchfield-color-on-idle      : #005A96;
     --switchfield-height             : 24px;
     --switchfield-knobsize           : 20px;
     --switchfield-opacity-disabled   : .5;

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.7.8'
+     * @default '6.8.1'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.7.8'
+    version: '6.8.1'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -610,13 +610,16 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetHidden(value, oldValue) {
-        let me = this;
+        let me    = this,
+            state = value ? 'hide' : 'show';
 
         if (value && oldValue === undefined && me.hideMode === 'removeDom') {
             me.vdom.removeDom = true
         } else if (value || oldValue !== undefined) {
-            me[value ? 'hide' : 'show']()
+            me[state]()
         }
+
+        me.fire(state, {id: me.id})
     }
 
     /**

package/src/dialog/Base.mjs

@@ -127,7 +127,20 @@ class Base extends Panel {
         /**
          * @member {String|null} title_=null
          */
-        title_: null
+        title_: null,
+        /**
+         * Set to `true` to have tabbing wrap within this Dialog.
+         *
+         * Should be used with `modal`.
+         * @member {Boolean} trapFocus_=false
+         */
+        trapFocus_: false,
+        /**
+         * Set to `true` to have this Dialog centered in the viewport.
+         *
+         * @member {Boolean} centered_=false
+         */
+        centered_: false
     }
 
     /**
@@ -141,7 +154,7 @@ class Base extends Panel {
 
         me.createHeader();
 
-        if (!me.animateTargetId) {
+        if (!me.animateTargetId && !me.centered) {
             Neo.assignDefaults(style, {
                 left     : '50%',
                 top      : '50%',
@@ -185,6 +198,17 @@ class Base extends Panel {
         super.afterSetAppName(value, oldValue)
     }
 
+    /**
+     * Triggered after the centered config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetCentered(value, oldValue) {
+        NeoArray.toggle(this.vdom.cls, 'neo-centered', value);
+        this.update();
+    }
+
     /**
      * Triggered after the draggable config got changed
      * @param {Boolean} value
@@ -252,6 +276,19 @@ class Base extends Panel {
         me.rendered && me.syncModalMask()
     }
 
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        // Ensure focus trapping is up-to-date, enabled or disabled.
+        this.syncTrapFocus()
+    }
+
     /**
      * Triggered after the resizable config got changed
      * @param {Boolean} value
@@ -289,6 +326,16 @@ class Base extends Panel {
         }
     }
 
+    /**
+     * Triggered after the trapFocus config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetTrapFocus(value, oldValue) {
+        this.syncTrapFocus()
+    }
+
     /**
      *
      */
@@ -676,6 +723,15 @@ class Base extends Panel {
         // This should sync the visibility and position of the modal mask element.
         Neo.main.DomAccess.syncModalMask({ id, modal: this.modal })
     }
+
+    /**
+     *
+     */
+    syncTrapFocus() {
+        if (this.mounted) {
+            Neo.main.DomAccess.trapFocus({ id: this.id, trap: this.trapFocus })
+        }
+    }
 }
 
 Neo.applyClassConfig(Base);

package/src/dialog/header/Toolbar.mjs

@@ -11,35 +11,34 @@ class Toolbar extends Base {
          * @protected
          */
         className: 'Neo.dialog.header.Toolbar',
+        /**
+         * @member {Object} actionMap
+         */
+        actionMap: {
+            close   : () => ({action: 'close',    iconCls: 'far fa-window-close'}),
+            maximize: () => ({action: 'maximize', iconCls: 'far fa-window-maximize'})
+        },
+        /**
+         * You can define the action order and directly add custom actions.
+         * @example
+         * {
+         *     actions: [
+         *         'close',
+         *         'maximize',
+         *         {action: 'help', iconCls: 'far fa-circle-question'}
+         *     ]
+         * }
+         *
+         * You can also extend the actionMap if needed.
+         * @member {Object[]|String[]|null} actions=['maximize','close']
+         */
+        actions: ['maximize', 'close'],
         /**
          * @member {String|null} title=null
          */
         title_: null
     }
 
-    /**
-     * @member {Object} actionMap
-     */
-    actionMap = {
-        close   : () => ({action: 'close',    iconCls: 'far fa-window-close'}),
-        maximize: () => ({action: 'maximize', iconCls: 'far fa-window-maximize'})
-    }
-    /**
-     * You can define the action order and directly add custom actions.
-     * @example
-     * {
-     *     actions: [
-     *         'close',
-     *         'maximize',
-     *         {action: 'help', iconCls: 'far fa-circle-question'}
-     *     ]
-     * }
-     *
-     * You can also extend the actionMap if needed.
-     * @member {Object[]|String[]|null} actions=['maximize','close']
-     */
-    actions = ['maximize', 'close']
-
     /**
      * Triggered after the title config got changed
      * @param {String} value
@@ -83,7 +82,7 @@ class Toolbar extends Base {
 
         me.items = items;
 
-        super.createItems();
+        super.createItems()
     }
 
     /**

package/src/form/field/Date.mjs

@@ -109,7 +109,7 @@ class DateField extends Picker {
         me.dateSelector.on({
             change: me.onDatePickerChange,
             scope : me
-        });
+        })
     }
 
     /**
@@ -162,7 +162,7 @@ class DateField extends Picker {
      * @returns {Neo.component.DateSelector}
      */
     createPickerComponent() {
-        return this.dateSelector;
+        return this.dateSelector
     }
 
     /**
@@ -193,7 +193,7 @@ class DateField extends Picker {
         let me = this;
 
         me.hidePicker();
-        me.focus(me.getInputElId());
+        me.focus(me.getInputElId())
     }
 
     /**
@@ -204,15 +204,15 @@ class DateField extends Picker {
             vdom = me.vdom;
 
         me.clean = false;
-            
+
         if (me.hidePickerOnSelect) {
             VDomUtil.removeVdomChild(vdom, me.getPickerId());
 
             me.promiseUpdate().then(data => {
-                me.value = opts.value;
-            });
+                me.value = opts.value
+            })
         } else {
-            me.value = opts.value;
+            me.value = opts.value
         }
     }
 
@@ -239,9 +239,9 @@ class DateField extends Picker {
 
         if (me.pickerIsMounted) {
             me.dateSelector.focusCurrentItem();
-            super.onKeyDownEnter(data);
+            super.onKeyDownEnter(data)
         } else {
-            super.onKeyDownEnter(data, me.dateSelector.focusCurrentItem, me.dateSelector);
+            super.onKeyDownEnter(data, me.dateSelector.focusCurrentItem, me.dateSelector)
         }
     }
 

package/src/form/field/FileUpload.mjs

@@ -2,12 +2,16 @@ import Base from '../../form/field/Base.mjs';
 import NeoArray from '../../util/Array.mjs';
 
 const
-    sizeRE         = /^(\d+)(kb|mb|gb)?$/i,
-    sizeMultiplier = {
+    sizeRE           = /^(\d+)(kb|mb|gb)?$/i,
+    sizeMultiplier   = {
         unit : 1,
         kb   : 1000,
         mb   : 1000000,
         gb   : 1000000000
+    },
+    httpSuccessCodes = {
+        2 : 1,
+        4 : 1
     };
 
 /**
@@ -509,7 +513,7 @@ class FileUpload extends Base {
 
         // Successful network request.
         // Check the resulting JSON packet for details and any error.
-        if (String(xhr.status).startsWith('2')) {
+        if (httpSuccessCodes[String(xhr.status)[0]]) {
             if (loaded !== 0) {
                 const response = JSON.parse(xhr.response);
 
@@ -600,7 +604,7 @@ class FileUpload extends Base {
         });
 
         // Success
-        if (String(statusResponse.status).slice(0, 1) === '2') {
+        if (httpSuccessCodes[String(statusResponse.status)[0]]) {
             me.clear();
             me.state = 'ready';
         }
@@ -624,7 +628,7 @@ class FileUpload extends Base {
             });
 
             // Success
-            if (String(statusResponse.status).slice(0, 1) === '2') {
+            if (httpSuccessCodes[String(statusResponse.status)[0]]) {
                 const
                     serverJson   = await statusResponse.json(),
                     serverStatus = serverJson.status,