neo.mjs 7.14.0 → 7.16.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2024-10-12",
+      "datePublished": "2024-10-18",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

package/apps/portal/view/about/Container.mjs

@@ -47,7 +47,7 @@ class Container extends Base {
             picture        : 'torsten.png',
             profileGitHub  : 'https://github.com/Dinkh',
             profileLinkedIn: 'https://www.linkedin.com/in/dinkheller/',
-            teamRole       : 'Co-Founder & Core Team Member'
+            teamRole       : 'Contributor'
         },{
             module         : MemberContainer,
             location       : 'Madison, Wisconsin',
@@ -55,7 +55,7 @@ class Container extends Base {
             picture        : 'Max.jpeg',
             profileGitHub  : 'https://github.com/maxrahder/',
             profileLinkedIn: 'https://www.linkedin.com/in/maxrahder/',
-            teamRole       : 'Training'
+            teamRole       : 'Contributor'
         }],
         /**
          * @member {Object} layout={ntype:'vbox',align:'center'}

package/apps/portal/view/home/FooterContainer.mjs

@@ -111,7 +111,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v7.14.0'
+                html  : 'v7.16.0'
             }]
         }],
         /**

package/buildScripts/createApp.mjs

@@ -7,18 +7,19 @@ import inquirer      from 'inquirer';
 import os            from 'os';
 import path          from 'path';
 
-const __dirname    = path.resolve(),
-      cwd          = process.cwd(),
-      requireJson  = path => JSON.parse(fs.readFileSync((path))),
-      packageJson  = requireJson(path.join(__dirname, 'package.json')),
-      insideNeo    = packageJson.name === 'neo.mjs',
-      neoPath      = insideNeo ? './' : './node_modules/neo.mjs/',
-      addonChoices = fs.readdirSync(path.join(neoPath, '/src/main/addon')).map(item => item.slice(0, -4)),
-      program      = new Command(),
-      programName  = `${packageJson.name} create-app`,
-      questions    = [],
-      scssFolders  = fs.readdirSync(path.join(neoPath, '/resources/scss')),
-      themeFolders = [];
+const
+    __dirname    = path.resolve(),
+    cwd          = process.cwd(),
+    requireJson  = path => JSON.parse(fs.readFileSync((path))),
+    packageJson  = requireJson(path.join(__dirname, 'package.json')),
+    insideNeo    = packageJson.name === 'neo.mjs',
+    neoPath      = insideNeo ? './' : './node_modules/neo.mjs/',
+    addonChoices = fs.readdirSync(path.join(neoPath, '/src/main/addon')).map(item => item.slice(0, -4)),
+    program      = new Command(),
+    programName  = `${packageJson.name} create-app`,
+    questions    = [],
+    scssFolders  = fs.readdirSync(path.join(neoPath, '/resources/scss')),
+    themeFolders = [];
 
 scssFolders.forEach(folder => {
     if (folder.includes('theme')) {
@@ -86,16 +87,6 @@ if (programOpts.info) {
         });
     }
 
-    if (!programOpts.mainThreadAddons) {
-        questions.push({
-            type   : 'checkbox',
-            name   : 'mainThreadAddons',
-            message: 'Please choose your main thread addons:',
-            choices: addonChoices,
-            default: ['DragDrop', 'Stylesheet']
-        });
-    }
-
     if (!programOpts.useSharedWorkers) {
         questions.push({
             type   : 'list',
@@ -106,22 +97,12 @@ if (programOpts.info) {
         });
     }
 
-    if (!programOpts.useServiceWorker) {
-        questions.push({
-            type   : 'list',
-            name   : 'useServiceWorker',
-            message: 'Do you want to use a ServiceWorker for caching assets?',
-            choices: ['yes', 'no'],
-            default: 'no'
-        });
-    }
-
     inquirer.prompt(questions).then(answers => {
         let appName          = programOpts.appName          || answers.appName,
-            mainThreadAddons = programOpts.mainThreadAddons || answers.mainThreadAddons,
+            mainThreadAddons = programOpts.mainThreadAddons || ['DragDrop', 'Navigator', 'Stylesheet'],
             themes           = programOpts.themes           || answers.themes,
             useSharedWorkers = programOpts.useSharedWorkers || answers.useSharedWorkers,
-            useServiceWorker = programOpts.useServiceWorker || answers.useServiceWorker,
+            useServiceWorker = programOpts.useServiceWorker || 'no',
             lAppName         = appName.toLowerCase(),
             appPath          = 'apps/' + lAppName + '/',
             dir              = 'apps/' + lAppName,
@@ -177,7 +158,12 @@ if (programOpts.info) {
                 mainPath   : `${insideNeo ? './' : '../node_modules/neo.mjs/src/'}Main.mjs`
             };
 
-            if (!(mainThreadAddons.includes('DragDrop') && mainThreadAddons.includes('Stylesheet') && mainThreadAddons.length === 2)) {
+            if (!(
+                mainThreadAddons.includes('DragDrop')   &&
+                mainThreadAddons.includes('Navigator')  &&
+                mainThreadAddons.includes('Stylesheet') &&
+                mainThreadAddons.length === 3)
+            ) {
                 neoConfig.mainThreadAddons = mainThreadAddons;
             }
 

package/examples/ServiceWorker.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "7.14.0",
+    "version": "7.16.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -53,14 +53,14 @@
         "cssnano": "^7.0.6",
         "envinfo": "^7.14.0",
         "fs-extra": "^11.2.0",
-        "highlightjs-line-numbers.js": "^2.8.0",
-        "inquirer": "^11.1.0",
-        "marked": "^14.1.2",
+        "highlightjs-line-numbers.js": "^2.9.0",
+        "inquirer": "^12.0.0",
+        "marked": "^14.1.3",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
         "postcss": "^8.4.47",
-        "sass": "^1.79.5",
+        "sass": "^1.80.2",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",
         "webpack": "^5.95.0",

package/resources/scss/src/Global.scss

@@ -1,4 +1,4 @@
-@import "global/all";
+@use "global/all";
 
 html, .neo-body-viewport {
     align-items    : center;

package/resources/scss/src/apps/portal/home/parts/MainNeo.scss

@@ -8,6 +8,14 @@
     background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23504e54' fill-opacity='0.18' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
     padding         : 3em;
 
+    .button-group {
+        background-color: transparent;
+        display         : flex;
+        flex-direction  : row-reverse;
+        gap             : 8px;
+        margin          : 2rem 0;
+    }
+
     .logo-container {
         align-items     : center;
         background-color: transparent;
@@ -19,11 +27,8 @@
         min-width       : 240px;
     }
 
-    .button-group {
-        display       : flex;
-        flex-direction: row-reverse;
-        gap           : 8px;
-        margin        : 2rem 0;
+    .neo-github {
+        background-color: #fff;
     }
 
     .neo-h1 {

package/resources/scss/src/global/_all.scss

@@ -1 +1 @@
-@import "MouseCursor";
+@use "MouseCursor";

package/resources/scss/theme-neo-light/Global.scss

@@ -1,4 +1,4 @@
-@import "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
+@use "../../../resources/scss/theme-neo-light/design-tokens/_all.scss";
 
 :root .neo-theme-neo-light {
     --neo-background-color: #fafafa;

package/resources/scss/theme-neo-light/design-tokens/_all.scss

@@ -1,4 +1,4 @@
 // the import order matters
-@import "Core";
-@import "Semantic";
-@import "Component";
+@use "Core";
+@use "Semantic";
+@use "Component";

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -122,16 +122,28 @@ class Base extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-        {tag: 'button', type: 'button', cn: [
-            {tag: 'span', cls: ['neo-button-glyph']},
-            {tag: 'span', cls: ['neo-button-text']},
-            {cls: ['neo-button-badge']},
-            {cls: ['neo-button-ripple-wrapper'], cn: [
-                {cls: ['neo-button-ripple']}
-            ]}
-        ]}
+            {tag: 'button', type: 'button', cn: [
+                    {tag: 'span', cls: ['neo-button-glyph']},
+                    {tag: 'span', cls: ['neo-button-text']},
+                    {cls: ['neo-button-badge']},
+                    {cls: ['neo-button-ripple-wrapper'], cn: [
+                            {cls: ['neo-button-ripple']}
+                        ]}
+                ]}
     }
 
+    /**
+     * @member {Object} rippleWrapper
+     */
+    get badgeNode() {
+        return this.getVdomRoot().cn[2]
+    }
+    /**
+     * @member {Object} rippleWrapper
+     */
+    get iconNode() {
+        return this.getVdomRoot().cn[0]
+    }
     /**
      * Time in ms for the ripple effect when clicking on the button.
      * Only active if useRippleEffect is set to true.
@@ -144,6 +156,12 @@ class Base extends Component {
      * @private
      */
     #rippleTimeoutId = null
+    /**
+     * @member {Object} rippleWrapper
+     */
+    get rippleWrapper() {
+        return this.getVdomRoot().cn[3]
+    }
 
     /**
      * @param {Object} config
@@ -166,9 +184,9 @@ class Base extends Component {
      * @protected
      */
     afterSetBadgePosition(value, oldValue) {
-        let me        = this,
-            badgeNode = me.getBadgeNode(),
-            cls       = badgeNode.cls || [];
+        let me          = this,
+            {badgeNode} = me,
+            cls         = badgeNode.cls || [];
 
         NeoArray.remove(cls, 'neo-' + oldValue);
         NeoArray.add(cls, 'neo-' + value);
@@ -185,7 +203,7 @@ class Base extends Component {
      * @protected
      */
     afterSetBadgeText(value, oldValue) {
-        let badgeNode = this.getBadgeNode();
+        let {badgeNode} = this;
 
         badgeNode.html      = value;
         badgeNode.removeDom = !Boolean(value);
@@ -200,7 +218,7 @@ class Base extends Component {
      * @protected
      */
     afterSetIconCls(value, oldValue) {
-        let iconNode = this.getIconNode();
+        let {iconNode} = this;
 
         NeoArray.remove(iconNode.cls, oldValue);
         NeoArray.add(   iconNode.cls, value);
@@ -216,7 +234,7 @@ class Base extends Component {
      * @protected
      */
     afterSetIconColor(value, oldValue) {
-        let iconNode = this.getIconNode();
+        let {iconNode} = this;
 
         if (!iconNode.style) {
             iconNode.style = {};
@@ -261,17 +279,17 @@ class Base extends Component {
                     model      = me.getModel(),
                     {appName, theme, windowId} = me,
 
-                config = Neo.merge({
-                    module         : module.default,
-                    align          : {edgeAlign : 't0-b0', target: me.id},
-                    appName,
-                    displayField   : 'text',
-                    floating       : true,
-                    hidden         : true,
-                    parentComponent: me,
-                    theme,
-                    windowId
-                }, menuConfig);
+                    config = Neo.merge({
+                        module         : module.default,
+                        align          : {edgeAlign: 't0-b0', target: me.id},
+                        appName,
+                        displayField   : 'text',
+                        floating       : true,
+                        hidden         : true,
+                        parentComponent: me,
+                        theme,
+                        windowId
+                    }, menuConfig);
 
                 if (items) {
                     config.items = items
@@ -366,7 +384,7 @@ class Base extends Component {
      */
     afterSetUseRippleEffect(value, oldValue) {
         // setting the config to false ends running ripple animations
-        this.getRippleWrapper().removeDom = true;
+        this.rippleWrapper.removeDom = true;
         this.update()
     }
 
@@ -464,36 +482,11 @@ class Base extends Component {
     }
 
     /**
-     * @param {Boolean} updateParentVdom
-     * @param {Boolean} silent
+     * @param args
      */
-    destroy(updateParentVdom=false, silent=false) {
-        this.menuList && this.menuList.destroy(true, false);
-        super.destroy(updateParentVdom, silent)
-    }
-
-    /**
-     * Convenience shortcut
-     * @returns {Object}
-     */
-    getBadgeNode() {
-        return this.getVdomRoot().cn[2]
-    }
-
-    /**
-     * Convenience shortcut
-     * @returns {Object}
-     */
-    getIconNode() {
-        return this.getVdomRoot().cn[0]
-    }
-
-    /**
-     * Convenience shortcut
-     * @returns {Object}
-     */
-    getRippleWrapper() {
-        return this.getVdomRoot().cn[3]
+    destroy(...args) {
+        this.menuList?.destroy(true, false);
+        super.destroy(...args)
     }
 
     /**
@@ -518,7 +511,7 @@ class Base extends Component {
             diameter             = Math.max(buttonRect.height, buttonRect.width),
             radius               = diameter / 2,
             rippleEffectDuration = me.rippleEffectDuration,
-            rippleWrapper        = me.getRippleWrapper(),
+            {rippleWrapper}      = me,
             rippleEl             = rippleWrapper.cn[0],
             rippleTimeoutId;
 

package/src/component/wrapper/MonacoEditor.mjs

@@ -358,6 +358,11 @@ class MonacoEditor extends Base {
             scrollBeyondLastLine: me.scrollBeyondLastLine,
             theme               : me.editorTheme,
             value               : me.stringifyValue(me.value),
+
+            scrollbar: {
+                alwaysConsumeMouseWheel: false // enables page scrolling when over-scrolling the content box
+            },
+
             ...me.options
         }
     }

package/src/menu/List.mjs

@@ -45,7 +45,7 @@ class List extends BaseList {
         items_: null,
         /**
          * Internal flag.
-         * Sub-menus will bubble of focus changes to the top level.
+         * Sub-menus will bubble focus changes to the top level.
          * @member {Boolean} menuFocus_=false
          * @protected
          */

package/src/selection/menu/ListModel.mjs

@@ -43,11 +43,7 @@ class ListModel extends BaseListModel {
      * @param {Object} data
      */
     onKeyDownRight(data) {
-        let activeSubMenu = this.view.activeSubMenu;
-
-        if (activeSubMenu) {
-            activeSubMenu.selectionModel.selectAt(0)
-        }
+        this.view.activeSubMenu?.selectionModel.selectAt(0)
     }
 }