neo.mjs 8.14.0 → 8.14.2

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

@@ -16,7 +16,7 @@
         "@type": "Organization",
         "name": "Neo.mjs"
       },
-      "datePublished": "2025-02-03",
+      "datePublished": "2025-02-04",
       "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.14.0'
+                html  : 'v8.14.2'
             }]
         }],
         /**

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/resources/data/deck/learnneo/pages/gettingstarted/ComponentModels.md

@@ -1,6 +1,6 @@
 Neo has a feature that allows shared, bindable, data.
 
-A _view model_ — `Neo.model.Component` — instance holds properties that 
+A _state provider_ — `Neo.state.Provider` — instance holds properties that 
 can be bound to component properties.
 
 <pre data-neo>
@@ -12,7 +12,7 @@ class MainView extends Container {
     static config = {
         className: 'GS.data1.MainView',
 
-        model: {
+        stateProvider: {
             data: {
                 foo: 'Hi there!'
             }
@@ -83,7 +83,7 @@ class MainView extends Container {
     static config = {
         className: 'GS.data2.MainView',
 
-        model: {
+        stateProvider: {
             data: {
                 foo: 'parent'
             }
@@ -95,8 +95,9 @@ class MainView extends Container {
             module: MyPanel
         }, {
             module: MyPanel,
-            // You wouldn't normally configure a view model. We're doing it here to illustrate view model scope.
-            model: {
+            // You wouldn't normally configure a state provider.
+            // We're doing it here to illustrate state provider scope.
+            stateProvider: {
                 data: {
                     foo: 'child'
                 }
@@ -109,7 +110,7 @@ MainView = Neo.setupClass(MainView);
 </pre>
 
 In this case, the main view has three child items of type `MyPanel`, each containing a label. 
-The main view has a view model with a `foo` property, and the third child has its own view model with a `foo` property.
+The main view has a state provider with a `foo` property, and the third child has its own state provider with a `foo` property.
 
 <img width="75%" src="https://s3.amazonaws.com/mjs.neo.learning.images/gettingStarted/vm/VisualHierarchyFooShadowed.png"></img>
 
@@ -124,5 +125,5 @@ because the third copy of `MyPanel` has its own view model with the `foo` proper
 
 ## Conclusion
 
-The Neo.mjs view model and binding approach is simple and powerful. It gives you easy control 
+The Neo.mjs state provider and binding approach is simple and powerful. It gives you easy control 
 over the scope of a value, which means you can share properties as globally or narrowly as needed.

package/resources/scss/src/draggable/grid/header/toolbar/SortZone.scss

@@ -14,6 +14,10 @@
 .neo-dragproxy {
     .neo-grid-container {
         border: none;
+
+        * {
+            scrollbar-width: none;
+        }
     }
 
     .neo-grid-header-toolbar {
@@ -23,10 +27,6 @@
             border-right: 1px solid var(--grid-container-border-color);
         }
     }
-
-    .neo-grid-row {
-        position: unset;
-    }
 }
 
 .neo-grid-header-toolbar {

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -2300,7 +2300,7 @@ class Component extends Base {
         // Verify that the critical rendering path => CSS files for the new tree is in place
         if (currentWorker.countLoadingThemeFiles !== 0) {
             currentWorker.on('themeFilesLoaded', function() {
-                me.render(mount)
+                !me.mounted && me.render(mount)
             }, me, {once: true});
 
             return

package/src/draggable/grid/header/toolbar/SortZone.mjs

@@ -19,7 +19,7 @@ class SortZone extends BaseSortZone {
          */
         ntype: 'grid-header-toolbar-sortzone',
         /**
-         * @member {String|null} itemMargin=null
+         * @member {String|null} itemMargin='1px'
          * @protected
          */
         itemMargin: '1px',
@@ -52,28 +52,29 @@ class SortZone extends BaseSortZone {
             return await super.createDragProxy(data, createComponent)
         }
 
-        let me          = this,
-            grid        = me.owner.parent,
-            {view}      = grid,
-            gridRows    = view.getVdomRoot().cn,
-            columnIndex = me.dragElement['aria-colindex'] - 1,
-            {dataField} = view.columnPositions[columnIndex],
-            cells       = view.getColumnCells(dataField),
-            rows        = [],
-            config      = await super.createDragProxy(data, false),
-            rect        = await grid.getDomRect(),
+        let me            = this,
+            grid          = me.owner.parent,
+            {view}        = grid,
+            gridRows      = view.getVdomRoot().cn,
+            columnIndex   = me.dragElement['aria-colindex'] - 1,
+            {dataField}   = view.columnPositions[columnIndex],
+            cells         = view.getColumnCells(dataField),
+            rows          = [],
+            config        = await super.createDragProxy(data, false),
+            rect          = await grid.getDomRect(),
+            viewWrapperId = Neo.getId('grid-view-wrapper'),
             row;
 
         config.cls = ['neo-grid-wrapper', me.owner.getTheme()];
 
-        config.style.height = rect.height + 'px';
+        config.style.height = `${rect.height - 2}px`; // minus border-bottom & border-top
 
         cells.forEach((cell, index) => {
-            row = VdomUtil.clone({cls: gridRows[index].cls, cn: [cell]}); // clone to remove ids
-
-            row.style = {
-                height: view.rowHeight + 'px'
-            };
+            row = VdomUtil.clone({ // clone to remove ids
+                cls  : gridRows[index].cls,
+                cn   : [cell],
+                style: gridRows[index].style
+            });
 
             delete row.cn[0].style.left;
 
@@ -84,10 +85,24 @@ class SortZone extends BaseSortZone {
         {cn: [
             {cls: ['neo-grid-container'], cn: [
                 {...config.vdom, cls: ['neo-grid-header-toolbar', 'neo-toolbar']},
-                {cls: ['neo-grid-view'], cn: rows}
+                {cls: ['neo-grid-view-wrapper'], id: viewWrapperId, cn: [
+                    {cls: ['neo-grid-view'], cn: rows},
+                    {cls: ['neo-grid-scrollbar'], style: {height: view.vdom.cn[1].height}}
+                ]}
             ]}
         ]};
 
+        config.listeners = {
+            mounted() {
+                Neo.main.DomAccess.scrollTo({
+                    direction: 'top',
+                    id       : viewWrapperId,
+                    value    : view.scrollPosition.y,
+                    windowId : this.windowId
+                })
+            }
+        };
+
         if (createComponent) {
             return me.dragProxy = Neo.create(config)
         }
@@ -154,31 +169,40 @@ class SortZone extends BaseSortZone {
      * @param {Number} index2
      */
     switchItems(index1, index2) {
+        super.switchItems(index1, index2);
+
         if (this.moveColumnContent) {
-            let {view}          = this.owner.parent,
+            let me              = this,
+                {itemRects}     = me,
+                {view}          = me.owner.parent,
                 columnPositions = view._columnPositions, // no clone
                 column1Cells    = view.getColumnCells(columnPositions[index1].dataField),
-                column2Cells    = view.getColumnCells(columnPositions[index2].dataField),
-                x;
+                column2Cells    = view.getColumnCells(columnPositions[index2].dataField);
 
-            x = columnPositions[index1].x;
-            columnPositions[index1].x = columnPositions[index2].x;
-            columnPositions[index2].x = x;
+            Object.assign(columnPositions[index1], {
+                width: itemRects[index2].width,
+                x    : itemRects[index2].x + 1
+            });
+
+            Object.assign(columnPositions[index2], {
+                width: itemRects[index1].width,
+                x    : itemRects[index1].x + 1
+            });
 
             NeoArray.move(columnPositions, index1, index2);
 
             column1Cells.forEach(node => {
-                node.style.left = columnPositions[index2].x + 'px'
+                node.style.left  = columnPositions[index2].x     + 'px';
+                node.style.width = columnPositions[index2].width + 'px'
             });
 
             column2Cells.forEach(node => {
-                node.style.left = columnPositions[index1].x + 'px'
+                node.style.left  = columnPositions[index1].x + 'px';
+                node.style.width = columnPositions[index1].width + 'px'
             });
 
             view.update()
         }
-
-        super.switchItems(index1, index2);
     }
 }