neo.mjs 10.0.0-alpha.3 → 10.0.0-alpha.5

package/src/grid/ScrollManager.mjs

@@ -24,15 +24,15 @@ class ScrollManager extends Base {
     }
 
     /**
-     * @member {Neo.grid.Container|null} gridContainer=null
+     * @member {Neo.grid.Body|null} gridBody=null
      * @protected
      */
-    gridContainer = null
+    gridBody = null
     /**
-     * @member {Neo.grid.View|null} gridView=null
+     * @member {Neo.grid.Container|null} gridContainer=null
      * @protected
      */
-    gridView = null
+    gridContainer = null
     /**
      * Storing touchmove position for mobile envs
      * @member {Number} lastTouchX=0
@@ -52,7 +52,7 @@ class ScrollManager extends Base {
     scrollTimeoutId = null
     /**
      * Flag for identifying the ownership of a touchmove operation
-     * @member {'container'|'view'|null} touchMoveOwner=null
+     * @member {'body'|'container'|null} touchMoveOwner=null
      * @protected
      */
     touchMoveOwner = null
@@ -65,19 +65,59 @@ class ScrollManager extends Base {
 
         let me = this;
 
-        me.gridContainer.addDomListeners({
-            scroll: me.onContainerScroll,
-            scope : me
-        });
-
-        me.gridView.addDomListeners({
-            scroll     : me.onViewScroll,
+        me.gridBody.addDomListeners({
+            scroll     : me.onBodyScroll,
             touchcancel: me.onTouchCancel,
             touchend   : me.onTouchEnd,
             scope      : me
+        });
+
+        me.gridContainer.addDomListeners({
+            scroll: me.onContainerScroll,
+            scope : me
         })
     }
 
+    /**
+     * Only triggers for vertical scrolling
+     * @param {Object} data
+     * @protected
+     */
+    onBodyScroll({scrollTop, touches}) {
+        let me   = this,
+            body = me.gridBody,
+            deltaX, lastTouchX;
+
+        me.scrollTop = scrollTop;
+
+        me.scrollTimeoutId && clearTimeout(me.scrollTimeoutId);
+
+        me.scrollTimeoutId = setTimeout(() => {
+            body.isScrolling = false
+        }, 100);
+
+        body.set({isScrolling: true, scrollTop});
+
+        if (touches) {
+            if (me.touchMoveOwner !== 'container') {
+                me.touchMoveOwner = 'body'
+            }
+
+            if (me.touchMoveOwner === 'body') {
+                lastTouchX = touches.lastTouch.clientX - touches.firstTouch.clientX;
+                deltaX     = me.lastTouchX - lastTouchX;
+
+                deltaX !== 0 && Neo.main.DomAccess.scrollTo({
+                    direction: 'left',
+                    id       : me.gridContainer.id,
+                    value    : me.scrollLeft + deltaX
+                })
+
+                me.lastTouchX = lastTouchX
+            }
+        }
+    }
+
     /**
      * @param {Object} data
      * @param {Number} data.scrollLeft
@@ -86,18 +126,18 @@ class ScrollManager extends Base {
      */
     onContainerScroll({scrollLeft, target, touches}) {
         let me    = this,
-            view = me.gridView,
+            body = me.gridBody,
             deltaY, lastTouchY;
 
         // We must ignore events for grid-scrollbar
         if (target.id.includes('grid-container')) {
             me  .scrollLeft = scrollLeft;
-            view.scrollLeft = scrollLeft;
+            body.scrollLeft = scrollLeft;
 
             me.gridContainer.headerToolbar.scrollLeft = scrollLeft;
 
             if (touches && !me.gridContainer.headerToolbar.cls.includes('neo-is-dragging')) {
-                if (me.touchMoveOwner !== 'view') {
+                if (me.touchMoveOwner !== 'body') {
                     me.touchMoveOwner = 'container'
                 }
 
@@ -107,7 +147,7 @@ class ScrollManager extends Base {
 
                     deltaY !== 0 && Neo.main.DomAccess.scrollTo({
                         direction: 'top',
-                        id       : view.vdom.id,
+                        id       : body.vdom.id,
                         value    : me.scrollTop + deltaY
                     })
 
@@ -134,46 +174,6 @@ class ScrollManager extends Base {
         me.lastTouchX     = 0;
         me.lastTouchY     = 0
     }
-
-    /**
-     * Only triggers for vertical scrolling
-     * @param {Object} data
-     * @protected
-     */
-    onViewScroll({scrollTop, touches}) {
-        let me   = this,
-            view = me.gridView,
-            deltaX, lastTouchX;
-
-        me.scrollTop = scrollTop;
-
-        me.scrollTimeoutId && clearTimeout(me.scrollTimeoutId);
-
-        me.scrollTimeoutId = setTimeout(() => {
-            view.isScrolling = false
-        }, 100);
-
-        view.set({isScrolling: true, scrollTop});
-
-        if (touches) {
-            if (me.touchMoveOwner !== 'container') {
-                me.touchMoveOwner = 'view'
-            }
-
-            if (me.touchMoveOwner === 'view') {
-                lastTouchX = touches.lastTouch.clientX - touches.firstTouch.clientX;
-                deltaX     = me.lastTouchX - lastTouchX;
-
-                deltaX !== 0 && Neo.main.DomAccess.scrollTo({
-                    direction: 'left',
-                    id       : me.gridContainer.id,
-                    value    : me.scrollLeft + deltaX
-                })
-
-                me.lastTouchX = lastTouchX
-            }
-        }
-    }
 }
 
 export default Neo.setupClass(ScrollManager);

package/src/grid/VerticalScrollbar.mjs

@@ -53,9 +53,9 @@ class VerticalScrollbar extends Component {
 
         if (mounted) {
             ScrollSync.register({
-                fromId: me.parent.view.vdom.id,
+                fromId: me.parent.body.vdom.id,
                 toId  : me.id,
-                twoWay: !Neo.config.hasTouchEvents, // Syncing the scroller back to the view affects mobile scrolling
+                twoWay: !Neo.config.hasTouchEvents, // Syncing the scroller back to the body affects mobile scrolling
                 ...params
             })
         } else {

package/src/grid/_export.mjs

@@ -1,5 +1,5 @@
 import * as header from './header/_export.mjs';
+import Body        from './Body.mjs';
 import Container   from './Container.mjs';
-import View        from './View.mjs';
 
-export {header, Container, View};
+export {Body, header, Container};

package/src/grid/column/AnimatedChange.mjs

@@ -55,7 +55,7 @@ class AnimatedChange extends Column {
      */
     async onRecordChange({fields, record}) {
         let me     = this,
-            {view} = me.parent,
+            {body} = me.parent,
             cellId, field, node;
 
         for (field of fields) {
@@ -63,16 +63,16 @@ class AnimatedChange extends Column {
                 // Wait for the next animation frame
                 await me.timeout(20);
 
-                cellId = view.getCellId(me.parent.store.indexOf(record), me.dataField);
-                node   = VdomUtil.find(view.vdom, cellId)?.vdom;
+                cellId = body.getCellId(me.parent.store.indexOf(record), me.dataField);
+                node   = VdomUtil.find(body.vdom, cellId)?.vdom;
 
                 if (node) {
                     NeoArray.add(node.cls, me.getAnimationCls(record));
 
-                    // This will trigger a 2nd view update, after grid.View: onStoreRecordChange()
+                    // This will trigger a 2nd body update, after grid.Body: onStoreRecordChange()
                     // It is crucial to restart the keyframe based animation
                     // => The previous update call will remove the last animationCls
-                    view.update()
+                    body.update()
                 }
 
                 break

package/src/grid/column/Base.mjs

@@ -26,7 +26,7 @@ class Column extends Base {
         renderer_: 'cellRenderer',
         /**
          * Scope to execute the column renderer.
-         * Defaults to the grid.View.
+         * Defaults to the grid.Body.
          * You can pass the strings 'this' or 'me'
          * @member {Neo.core.Base|String|null} rendererScope=null
          */

package/src/grid/column/Component.mjs

@@ -76,7 +76,7 @@ class Component extends Column {
      */
     cellRenderer(data) {
         let {gridContainer, record, rowIndex} = data,
-            {appName, view, windowId}         = gridContainer,
+            {appName, body, windowId}         = gridContainer,
             me               = this,
             {recordProperty} = me,
             id               = me.getComponentId(rowIndex),
@@ -104,7 +104,7 @@ class Component extends Column {
                 ...componentConfig,
                 appName,
                 id,
-                parentComponent : view,
+                parentComponent : body,
                 [recordProperty]: record,
                 windowId
             });
@@ -118,10 +118,10 @@ class Component extends Column {
         }
 
         if (me.useBindings) {
-            view.getStateProvider()?.parseConfig(component)
+            body.getStateProvider()?.parseConfig(component)
         }
 
-        view.updateDepth = -1;
+        body.updateDepth = -1;
 
         return component.createVdomReference()
     }
@@ -132,9 +132,9 @@ class Component extends Column {
      */
     getComponentId(rowIndex) {
         let me     = this,
-            {view} = me.parent;
+            {body} = me.parent;
 
-        return `${me.id}-component-${rowIndex % (view.availableRows + 2 * view.bufferRowRange)}`
+        return `${me.id}-component-${rowIndex % (body.availableRows + 2 * body.bufferRowRange)}`
     }
 }
 

package/src/grid/header/Button.mjs

@@ -96,7 +96,7 @@ class Button extends BaseButton {
             {cls}     = me,
             container = me.up('grid-container');
 
-        switch(value) {
+        switch (value) {
             case null:
                 NeoArray.add(cls, 'neo-sort-hidden');
                 break

package/src/grid/header/Toolbar.mjs

@@ -89,7 +89,7 @@ class Toolbar extends BaseToolbar {
      */
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
-        value && this.passSizeToView()
+        value && this.passSizeToBody()
     }
 
     /**
@@ -181,7 +181,7 @@ class Toolbar extends BaseToolbar {
 
         me.promiseUpdate().then(() => {
             // To prevent duplicate calls, we need to check the mounted state before the update call
-            mounted && me.passSizeToView()
+            mounted && me.passSizeToBody()
         })
     }
 
@@ -203,10 +203,10 @@ class Toolbar extends BaseToolbar {
      * @param {Boolean} silent=false
      * @returns {Promise<void>}
      */
-    async passSizeToView(silent=false) {
+    async passSizeToBody(silent=false) {
         let me              = this,
             {items}         = me,
-            {view}          = me.parent,
+            {body}          = me.parent,
             rects           = await me.getDomRect(items.map(item => item.id)),
             lastItem        = rects[rects.length - 1],
             columnPositions = rects.map((item, index) => ({dataField: items[index].dataField, width: item.width, x: item.x - rects[0].x})),
@@ -225,16 +225,16 @@ class Toolbar extends BaseToolbar {
         // Delay for slow connections, where the container-sizing is not done yet
         if (!layoutFinished) {
             await me.timeout(100);
-            await me.passSizeToView(silent)
+            await me.passSizeToBody(silent)
         } else {
-            view.columnPositions.clear();
-            view.columnPositions.add(columnPositions);
+            body.columnPositions.clear();
+            body.columnPositions.add(columnPositions);
 
-            view[silent ? 'setSilent' : 'set']({
+            body[silent ? 'setSilent' : 'set']({
                 availableWidth: lastItem.x + lastItem.width - rects[0].x
             });
 
-            !silent && view.updateMountedAndVisibleColumns()
+            !silent && body.updateMountedAndVisibleColumns()
         }
     }
 

package/src/grid/plugin/AnimateRows.mjs

@@ -1,5 +1,4 @@
 import Base     from '../../plugin/Base.mjs';
-import CssUtil  from '../../util/Css.mjs';
 import NeoArray from '../../util/Array.mjs';
 
 /**
@@ -151,7 +150,7 @@ class AnimateRows extends Base {
 
         for (rowIndex=mountedRows[0]; rowIndex < mountedRows[1]; rowIndex++) {
             record  = owner.store.getAt(rowIndex);
-            id      = owner.getRowId(record, rowIndex)
+            id      = owner.getRowId(rowIndex)
             mapItem = map[id];
 
             if (mapItem) {

package/src/layout/Cube.mjs

@@ -258,7 +258,7 @@ class Cube extends Card {
         if (index < 6) {
             wrapperCls = NeoArray.union(wrapperCls, 'neo-face', Object.keys(Cube.faces)[index]);
 
-            switch(index) {
+            switch (index) {
                 case 0:
                 case 1:
                     wrapperCls = NeoArray.union(wrapperCls, 'neo-face-z');
@@ -341,7 +341,7 @@ class Cube extends Card {
         if (index < 6) {
             NeoArray.remove(wrapperCls, ['neo-face', Object.keys(Cube.faces)[index]]);
 
-            switch(index) {
+            switch (index) {
                 case 0:
                 case 1:
                     NeoArray.remove(wrapperCls, 'neo-face-z');

package/src/main/DeltaUpdates.mjs

@@ -54,7 +54,6 @@ class DeltaUpdates extends Base {
      * @private
      */
     #renderer = null
-
     /**
      * Private property to signal that the renderer module has been loaded.
      * This will be a Promise that resolves when the module is ready.
@@ -87,10 +86,10 @@ class DeltaUpdates extends Base {
             try {
                 let module;
 
-                if (NeoConfig.useStringBasedMounting) {
-                    module = await import('./render/StringBasedRenderer.mjs')
-                } else {
+                if (NeoConfig.useDomApiRenderer) {
                     module = await import('./render/DomApiRenderer.mjs')
+                } else {
+                    module = await import('./render/StringBasedRenderer.mjs')
                 }
 
                 me.#renderer = module.default
@@ -175,7 +174,7 @@ class DeltaUpdates extends Base {
      * - `insertAdjacentHTML()` is generally faster than creating a node via template,
      *   but it's only available for manipulating children (elements), not `childNodes` (all nodes).
      * - For performance, in cases where there are no comment nodes (i.e., no wrapped text nodes),
-     *   the method prioritizes `insertAdjacentHTML()` when `useStringBasedMounting` is true.
+     *   the method prioritizes `insertAdjacentHTML()` when `useDomApiRenderer` is false.
      *
      * @param {Object}         delta
      * @param {Boolean}        delta.hasLeadingTextChildren Flag to honor leading comments, which require special treatment.
@@ -185,8 +184,10 @@ class DeltaUpdates extends Base {
      * @param {Neo.vdom.VNode} [delta.vnode]                The VNode representation of the new node (for direct DOM API mounting).
      */
     insertNode({hasLeadingTextChildren, index, outerHTML, parentId, vnode}) {
+        let me = this;
+
         // This method is synchronous and *expects* the renderer to be loaded
-        if (!this.#renderer) {
+        if (!me.#renderer) {
             console.error('DeltaUpdates renderer not ready during insertNode!');
             return
         }
@@ -194,10 +195,10 @@ class DeltaUpdates extends Base {
         const parentNode = DomAccess.getElementOrBody(parentId);
 
         if (parentNode) {
-            if (!NeoConfig.useStringBasedMounting) {
-                this.#renderer.createDomTree({index, isRoot: true, parentNode, vnode})
+            if (NeoConfig.useDomApiRenderer) {
+                me.#renderer.createDomTree({index, isRoot: true, parentNode, vnode})
             } else {
-                this.#renderer.insertNodeAsString({hasLeadingTextChildren, index, outerHTML, parentNode})
+                me.#renderer.insertNodeAsString({hasLeadingTextChildren, index, outerHTML, parentNode})
             }
         }
     }
@@ -331,7 +332,7 @@ class DeltaUpdates extends Base {
 
         if (node) {
             Object.entries(delta).forEach(([prop, value]) => {
-                switch(prop) {
+                switch (prop) {
                     case 'attributes':
                         Object.entries(value).forEach(([key, val]) => {
                             if (voidAttributes.has(key)) {

package/src/main/addon/Navigator.mjs

@@ -212,7 +212,7 @@ class Navigator extends Base {
         let {key, target} = keyEvent,
             newActiveElement;
 
-        switch(key) {
+        switch (key) {
             // Move to the previous navigable item
             case data.previousKey:
                 newActiveElement = me.navigateGetAdjacent(-1, data);

package/src/main/addon/WindowPosition.mjs

@@ -156,7 +156,7 @@ class WindowPosition extends Base {
             {screenLeft, screenTop} = win,
             left, top;
 
-        switch(data.dock) {
+        switch (data.dock) {
             case 'bottom':
                 left = screenLeft;
                 top  = win.outerHeight + screenTop - 62;

package/src/main/render/StringBasedRenderer.mjs

@@ -11,7 +11,7 @@ const StringBasedRenderer = {
 
     /**
      * Handles string-based insertion of a new node into the DOM.
-     * This method is called by `insertNode()` when `NeoConfig.useStringBasedMounting` is true.
+     * This method is called by `insertNode()` when `NeoConfig.useDomApiRenderer` is false.
      *
      * @param {Object}      data
      * @param {Boolean}     data.hasLeadingTextChildren Flag to honor leading comments.

package/src/tab/header/Toolbar.mjs

@@ -92,7 +92,7 @@ class Toolbar extends BaseToolbar {
     getLayoutConfig() {
         let layoutConfig;
 
-        switch(this.dock) {
+        switch (this.dock) {
             case 'bottom':
             case 'top':
                 layoutConfig = {

package/src/table/header/Button.mjs

@@ -121,7 +121,7 @@ class Button extends BaseButton {
             {cls}     = me,
             container = me.up('table-container');
 
-        switch(value) {
+        switch (value) {
             case null:
                 NeoArray.add(cls, 'neo-sort-hidden');
                 break

package/src/toolbar/Base.mjs

@@ -177,7 +177,7 @@ class Toolbar extends Container {
             layoutConfig;
 
         if (me.dock) {
-            switch(me.dock) {
+            switch (me.dock) {
                 case 'bottom':
                 case 'top':
                     layoutConfig = {

package/src/util/Style.mjs

@@ -36,19 +36,15 @@ class Style extends Base {
             return null
         } else if (!oldStyle) {
             return Neo.clone(newStyle)
-        } else if (!newStyle) {
-            Object.keys(oldStyle).forEach(function(style) {
-                styles[style] = null
-            });
         } else {
-            Object.keys(newStyle).forEach(style => {
+            newStyle && Object.keys(newStyle).forEach(style => {
                 if (!oldStyle.hasOwnProperty(style) || oldStyle[style] !== newStyle[style]) {
                     styles[style] = newStyle[style]
                 }
             });
 
             Object.keys(oldStyle).forEach(style => {
-                if (!newStyle.hasOwnProperty(style)) {
+                if (!newStyle  || !newStyle.hasOwnProperty(style)) {
                     styles[style] = null
                 }
             });

package/src/util/VDom.mjs

@@ -66,7 +66,7 @@ class VDom extends Base {
 
         optsArray.forEach(([key, value]) => {
             if (vdom.hasOwnProperty(key)) {
-                switch(key) {
+                switch (key) {
                     case 'cls':
                         if (typeof value === 'string' && Neo.isArray(vdom[key])) {
                             if (vdom[key].includes(value)) {

package/src/util/VNode.mjs

@@ -43,7 +43,7 @@ class VNode extends Base {
 
         optsArray.forEach(([key, value]) => {
             if (vnode.hasOwnProperty(key)) {
-                switch(key) {
+                switch (key) {
                     case 'attributes':
                         if (Neo.isObject(value) && Neo.isObject(vnode[key])) {
                             Object.entries(value).forEach(([attrKey, attrValue]) => {