neo.mjs 8.1.0 → 8.1.2

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-01-11",
+      "datePublished": "2025-01-12",
       "publisher": {
         "@type": "Organization",
         "name": "Neo.mjs"

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

@@ -107,7 +107,7 @@ class FooterContainer extends Container {
             }, {
                 module: Component,
                 cls   : ['neo-version'],
-                html  : 'v8.1.0'
+                html  : 'v8.1.2'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/examples/component/toast/MainContainerController.mjs

@@ -20,7 +20,7 @@ class MainContainerController extends ComponentController {
     construct(config) {
         super.construct(config);
         Neo.main.addon.HighlightJS.switchTheme('dark');
-        Neo.main.addon.HighlightJS.loadLibrary({})
+        Neo.main.addon.HighlightJS.loadFiles({})
     }
 
     /**
@@ -72,7 +72,9 @@ class MainContainerController extends ComponentController {
             }
         })
 
-        values.appName = me.component.appName;
+        values.appName  = me.component.appName;
+        values.windowId = me.component.windowId;
+
         Neo.toast(values)
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.1.0",
+    "version": "8.1.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/grid/Container.scss

@@ -1,7 +1,9 @@
 .neo-grid-wrapper {
-    overflow-x: auto;
-    overflow-y: hidden;
-    position  : relative;
+    overflow-anchor    : none;
+    overflow-x         : auto;
+    overflow-y         : hidden;
+    overscroll-behavior: none;
+    position           : relative;
 }
 
 .neo-grid-container {

package/resources/scss/src/grid/View.scss

@@ -1,8 +1,9 @@
 .neo-grid-view-wrapper {
-    height    : 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    position  : relative;
+    height         : 100%;
+    overflow-anchor: none;
+    overflow-x     : hidden;
+    overflow-y     : auto;
+    position       : relative;
 
     .neo-grid-scrollbar {
         height        : 1px;

package/resources/scss/src/grid/header/Toolbar.scss

@@ -1,5 +1,5 @@
 .neo-grid-header-toolbar {
-    border-bottom: 2px solid var(--grid-container-border-color);
+    border-bottom: 1px solid var(--grid-container-border-color);
     border-top   : 1px solid var(--grid-container-border-color);
     padding      : 0;
     width        : max-content;

package/src/DefaultConfig.mjs

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

package/src/component/Toast.mjs

@@ -1,4 +1,4 @@
-import Base         from '../component/Base.mjs';
+import Component    from '../component/Base.mjs';
 import NeoArray     from "../util/Array.mjs";
 import ToastManager from '../manager/Toast.mjs';
 
@@ -20,7 +20,7 @@ import ToastManager from '../manager/Toast.mjs';
             title           : 'Alarm Clock' // null
         })
  */
-class Toast extends Base {
+class Toast extends Component {
     /**
      * Valid values for positions
      * @member {String[]} positions = ['tl','tc','tr','bl','bc','br']

package/src/grid/Container.mjs

@@ -614,10 +614,16 @@ class GridContainer extends BaseContainer {
         let me                          = this,
             [containerRect, headerRect] = await me.getDomRect([me.id, me.headerToolbarId]);
 
-        me.view[silent ? 'setSilent' : 'set']({
-            availableHeight: containerRect.height - headerRect.height,
-            containerWidth : containerRect.width
-        })
+        // delay for slow connections, where the container-sizing is not done yet
+        if (containerRect.height === headerRect.height) {
+            await me.timeout(100);
+            await me.passSizeToView(silent)
+        } else {
+            me.view[silent ? 'setSilent' : 'set']({
+                availableHeight: containerRect.height - headerRect.height,
+                containerWidth : containerRect.width
+            })
+        }
     }
 
     /**

package/src/grid/header/Button.mjs

@@ -28,9 +28,9 @@ class Button extends BaseButton {
          */
         ntype: 'grid-header-button',
         /**
-         * @member {String[]} baseCls=['neo-grid-header-button']
+         * @member {String[]} baseCls=['neo-grid-header-button','neo-button']
          */
-        baseCls: ['neo-grid-header-button'],
+        baseCls: ['neo-grid-header-button', 'neo-button'],
         /**
          * Alignment of the matching grid cells. Valid values are left, center, right
          * @member {String} cellAlign_='left'

package/src/grid/header/Toolbar.mjs

@@ -131,11 +131,12 @@ class Toolbar extends BaseToolbar {
             if (item.dock) {
                 NeoArray.add(item.vdom.cls, 'neo-locked');
 
-                if (item.dock === 'left') {
+                /*if (item.dock === 'left') {
                     style.left = dockLeftWidth + 'px'
                 }
 
                 dockLeftWidth += (item.width + 1) // todo: borders fix
+                 */
             }
 
             item.sortable = me.sortable;
@@ -144,14 +145,14 @@ class Toolbar extends BaseToolbar {
             // inverse loop direction
             item = items[len - index -1];
 
-            if (item.dock === 'right') {
+            /*if (item.dock === 'right') {
                 style = item.wrapperStyle;
                 style.right = dockRightWidth + 'px';
 
                 item.wrapperStyle = style;
 
                 dockRightWidth += (item.width + 1) // todo: borders fix
-            }
+            }*/
         });
 
         me.update()
@@ -178,14 +179,32 @@ class Toolbar extends BaseToolbar {
      * @returns {Promise<void>}
      */
     async passSizeToView(silent=false) {
-        let me       = this,
-            rects    = await me.getDomRect(me.items.map(item => item.id)),
-            lastItem = rects[rects.length - 1];
-
-        me.gridContainer.view[silent ? 'setSilent' : 'set']({
-            availableWidth : lastItem.x + lastItem.width - rects[0].x,
-            columnPositions: rects.map(item => ({width: item.width, x: item.x - rects[0].x}))
-        })
+        let me              = this,
+            rects           = await me.getDomRect(me.items.map(item => item.id)),
+            lastItem        = rects[rects.length - 1],
+            columnPositions = rects.map(item => ({width: item.width, x: item.x - rects[0].x})),
+            i               = 1,
+            len             = columnPositions.length,
+            layoutFinished  = true;
+
+        // If the css sizing is not done, columns after the first one can get x = 0
+        for (; i < len; i++) {
+            if (columnPositions[i].x === 0) {
+                layoutFinished = false;
+                break;
+            }
+        }
+
+        // Delay for slow connections, where the container-sizing is not done yet
+        if (!layoutFinished) {
+            await me.timeout(100);
+            await me.passSizeToView(silent)
+        } else {
+            me.gridContainer.view[silent ? 'setSilent' : 'set']({
+                availableWidth: lastItem.x + lastItem.width - rects[0].x,
+                columnPositions
+            })
+        }
     }
 }
 

package/src/main/addon/HighlightJS.mjs

@@ -126,8 +126,8 @@ class HighlightJS extends Base {
      */
     switchTheme(theme) {
         let definedThemes = {
-                dark : './resources/highlightjs-custom-dark-theme.css',
-                light: './resources/highlightjs-custom-github-theme.css'
+                dark : './resources/lib/highlightjs-custom-dark-theme.css',
+                light: './resources/lib/highlightjs-custom-github-theme.css'
             },
             switchToTheme = definedThemes[theme];
 

package/src/manager/DomEvent.mjs

@@ -427,9 +427,9 @@ class DomEvent extends Base {
                     if (!eventConfigKeys.includes(key)) {
                         me.register({
                             bubble        : domListener.bubble   || value.bubble,
-                            delegate      : domListener.delegate || value.delegate || '#' + component.vdom.id,
+                            delegate      : domListener.delegate || value.delegate || '#' + (component.vdom.id || component.id),
                             eventName     : key,
-                            id            : component.vdom.id, // honor wrapper nodes
+                            id            : component.vdom.id || component.id, // honor wrapper nodes
                             opts          : value,
                             originalConfig: domListener,
                             ownerId       : component.id,