neo.mjs 8.43.0 → 9.0.0

package/src/controller/Component.mjs

@@ -1,6 +1,5 @@
 import Base              from './Base.mjs';
 import {resolveCallback} from '../util/Function.mjs';
-import Logger            from '../util/Logger.mjs';
 
 /**
  * @class Neo.controller.Component
@@ -70,17 +69,18 @@ class Component extends Base {
 
     /**
      * @param {String} handlerName
-     * @param {Neo.component.Base} [component]
+     * @param {Neo.component.Base|null} [component]
      * @returns {Neo.controller.Component|Boolean|null}
      */
     getHandlerScope(handlerName, component) {
         let me       = this,
-            {parent} = me;
+            {parent} = me,
+            handlerCb;
 
         if (component) {
             // Look for ths function *name* first in the Component itself.
             // If we find it, return true so calling code knows not to continue to search.
-            const handlerCb = resolveCallback(handlerName, component);
+            handlerCb = resolveCallback(handlerName, component);
 
             // Handler fn is resolved in the Component or its own parent chain.
             // Return a status indicating that we do not need an early binding
@@ -162,108 +162,6 @@ class Component extends Base {
      */
     onComponentConstructed() {}
 
-    /**
-     * @param {Neo.component.Base} component=this.component
-     */
-    parseConfig(component=this.component) {
-        let me = this,
-            {handler, listeners, reference, renderer, validator} = component,
-            eventHandler, handlerScope;
-
-        if (handler && Neo.isString(handler)) {
-            handlerScope = me.getHandlerScope(handler, component);
-
-            // If the handler name was not resolved in the Component itself, bind it
-            if (handlerScope !== true) {
-                component.handler = handlerScope[handler].bind(component.handlerScope || handlerScope);
-            }
-        }
-
-        listeners && Object.entries(listeners).forEach(([key, value]) => {
-            if (key !== 'scope' && key !== 'delegate') {
-                if (Neo.isString(value)) {
-                    eventHandler = value;
-                    handlerScope = me.getHandlerScope(eventHandler, component);
-
-                    if (!handlerScope) {
-                        Logger.logError('Unknown event handler for', eventHandler, component)
-                    } else if (handlerScope !== true) {
-                        listeners[key] = {};
-                        listeners[key].fn = handlerScope[eventHandler].bind(handlerScope)
-                    }
-                } else {
-                    value?.forEach?.(listener => {
-                        if (Neo.isObject(listener) && listener.hasOwnProperty('fn') && Neo.isString(listener.fn)) {
-                            eventHandler = listener.fn;
-                            handlerScope = me.getHandlerScope(eventHandler, component);
-
-                            if (!handlerScope) {
-                                console.error('Unknown event handler for', eventHandler, component)
-                            } else if (handlerScope !== true) {
-                                listener.fn = handlerScope[eventHandler].bind(handlerScope)
-                            }
-                        }
-                    })
-                }
-            }
-        });
-
-        if (renderer && Neo.isString(renderer)) {
-            handlerScope = me.getHandlerScope(renderer);
-
-            if (handlerScope) {
-                component.renderer = handlerScope[renderer].bind(handlerScope)
-            }
-        }
-
-        if (validator && Neo.isString(validator)) {
-            handlerScope = me.getHandlerScope(validator);
-
-            if (!handlerScope) {
-                Logger.logError('Unknown validator for', component.id, component)
-            } else {
-                component.validator = handlerScope[validator].bind(handlerScope)
-            }
-        }
-
-        if (reference) {
-            me.references[reference] = component
-        }
-    }
-
-    /**
-     * @param {Neo.component.Base} component=this.component
-     */
-    parseDomListeners(component=this.component) {
-        let me             = this,
-            {domListeners} = component,
-            eventHandler, scope;
-
-        domListeners?.forEach(domListener => {
-            Object.entries(domListener).forEach(([key, value]) => {
-                eventHandler = null;
-
-                if (key !== 'scope' && key !== 'delegate') {
-                    if (Neo.isString(value)) {
-                        eventHandler = value;
-                    } else if (Neo.isObject(value) && value.hasOwnProperty('fn') && Neo.isString(value.fn)) {
-                        eventHandler = value.fn;
-                    }
-
-                    if (eventHandler) {
-                        scope = me.getHandlerScope(eventHandler);
-
-                        // There can be string based listeners like 'up.onClick', which will resolved inside manager.DomEvents
-                        // => Do nothing in case there is no match inside the controller hierarchy.
-                        if (scope) {
-                            domListener[key] = scope[eventHandler].bind(scope)
-                        }
-                    }
-                }
-            })
-        })
-    }
-
     /**
      * Will get called by component.Base: destroy() in case the component has a reference config
      * @param {Neo.component.Base} component

package/src/core/Base.mjs

@@ -1,5 +1,5 @@
-import {buffer, debounce, intercept, throttle} from '../util/Function.mjs';
-import IdGenerator                             from './IdGenerator.mjs'
+import {buffer, debounce, intercept, resolveCallback, throttle} from '../util/Function.mjs';
+import IdGenerator                                              from './IdGenerator.mjs'
 
 const configSymbol       = Symbol.for('configSymbol'),
       forceAssignConfigs = Symbol('forceAssignConfigs'),
@@ -255,6 +255,19 @@ class Base {
         return value
     }
 
+    /**
+     * @param {String} fn               The name of a function to find in the passed scope object.
+     * @param {Object} originName       The name of the method inside the originScope.
+     * @param {Object} scope            The scope to find the function in if it is specified as a string.
+     * @param {Object} originScope=this The scope where the function is located.
+     */
+    bindCallback(fn, originName, scope=this, originScope=this) {
+        if (fn && Neo.isString(fn)) {
+            const handler = resolveCallback(fn, scope);
+            originScope[originName] = handler.fn.bind(handler.scope)
+        }
+    }
+
     /**
      * From within an overwrite, a method can call a parent method, by using callOverwritten.
      *

package/src/core/Observable.mjs

@@ -101,14 +101,12 @@ class Observable extends Base {
         }
 
         if (!nameObject) {
-            eventConfig = {
-                data,
-                delay,
-                fn: listener,
-                id: eventId || Neo.getId('event'),
-                once,
-                scope
-            };
+            eventConfig = {fn: listener, id: eventId || Neo.getId('event')};
+
+            if (data)      {eventConfig.data   = data}
+            if (delay > 0) {eventConfig.delay  = delay}
+            if (once)      {eventConfig.once   = once}
+            if (scope)     {eventConfig.scope  = scope}
 
             if (existing = me.listeners?.[name]) {
                 existing.forEach(cfg => {
@@ -137,9 +135,9 @@ class Observable extends Base {
     /**
      * Call the passed function, or a function by *name* which exists in the passed scope's
      * or this component's ownership chain.
-     * @param {Function|String} fn A function, or the name of a function to find in the passed scope object/
-     * @param {Object} scope The scope to find the function in if it is specified as a string.
-     * @param {Array} args Arguments to pass to the callback.
+     * @param {Function|String} fn A function, or the name of a function to find in the passed scope object.
+     * @param {Object} scope       The scope to find the function in if it is specified as a string.
+     * @param {Array} args         Arguments to pass to the callback.
      */
     callback(fn, scope=this, args) {
         if (fn) {

package/src/data/Model.mjs

@@ -86,6 +86,15 @@ class Model extends Base {
         return this.fieldsMap.get(name) || null
     }
 
+    /**
+     * Finds a field type by a given field name
+     * @param {String} name
+     * @returns {String|null} The lowercase field type or null if no match was found
+     */
+    getFieldType(name) {
+        return this.getField(name)?.type?.toLowerCase() || null
+    }
+
     /**
      * @param {Object[]} fields
      * @param {Boolean} isRoot=true

package/src/data/RecordFactory.mjs

@@ -233,7 +233,7 @@ class RecordFactory extends Base {
                      * @returns {Object}
                      */
                     toJSON() {
-                        return this[dataSymbol]
+                        return structuredClone(this[dataSymbol])
                     }
                 };
 

package/src/form/field/Text.mjs

@@ -1600,7 +1600,9 @@ class Text extends Field {
             } else if (inputPattern && !inputPattern.test(value)) {
                 me._error   = me.errorTextInputPattern(errorParam);
                 returnValue = false
-            } else if (Neo.isFunction(me.validator)) {
+            } else if (me.validator) {
+                me.bindCallback(me.validator, 'validator');
+
                 errorText = me.validator(me);
 
                 if (errorText !== true) {

package/src/grid/Container.mjs

@@ -459,9 +459,7 @@ class GridContainer extends BaseContainer {
                 parent  : me,
                 windowId: me.windowId,
                 ...column
-            });
-
-            me.getController()?.parseConfig(columns[index])
+            })
         });
 
         me.items[0].items = headerButtons;
@@ -563,7 +561,7 @@ class GridContainer extends BaseContainer {
 
         me.store.sort(opts);
         me.removeSortingCss(opts.property);
-        me.view.onStoreLoad()
+        opts.direction && me.view.onStoreLoad()
     }
 
     /**

package/src/grid/VerticalScrollbar.mjs

@@ -95,8 +95,9 @@ class VerticalScrollbar extends Component {
             let me = this;
 
             value.on({
-                load : me.updateScrollHeight,
-                scope: me
+                filter: me.updateScrollHeight,
+                load  : me.updateScrollHeight,
+                scope : me
             });
 
             value.getCount() > 0 && me.updateScrollHeight()

package/src/grid/View.mjs

@@ -181,10 +181,6 @@ class GridView extends Component {
     get selectedRows() {
         let {selectionModel} = this;
 
-        if (selectionModel.ntype === 'selection-grid-rowmodel') {
-            return selectionModel.items
-        }
-
         if (selectionModel.ntype?.includes('row')) {
             return selectionModel.selectedRows
         }
@@ -450,6 +446,8 @@ class GridView extends Component {
             column.rendererScope = column;
         }
 
+        me.bindCallback(column.renderer, 'renderer', column.rendererScope || me, column);
+
         rendererOutput = column.renderer.call(column.rendererScope || me, {
             column,
             columnIndex,
@@ -496,7 +494,7 @@ class GridView extends Component {
         }
 
         if (!cellId) {
-            cellId = me.getCellId(record, column.dataField)
+            cellId = me.getCellId(rowIndex, column.dataField)
         }
 
         if (selectedCells.includes(cellId)) {
@@ -575,7 +573,8 @@ class GridView extends Component {
             {mountedColumns, selectedRows} = me,
             gridContainer = me.parent,
             {columns}     = gridContainer,
-            id            = me.getRowId(record, rowIndex),
+            id            = me.getRowId(rowIndex),
+            recordId      = record[me.store.getKeyProperty()],
             rowCls        = me.getRowClass(record, rowIndex),
             config, column, columnPosition,  gridRow, i;
 
@@ -584,12 +583,7 @@ class GridView extends Component {
         }
 
         if (selectedRows && record[me.selectedRecordField]) {
-            NeoArray.add(selectedRows, id)
-        }
-
-        if (selectedRows?.includes(id)) {
-            rowCls.push('neo-selected');
-            gridContainer.fire('select', {record})
+            NeoArray.add(selectedRows, recordId)
         }
 
         gridRow = {
@@ -597,6 +591,7 @@ class GridView extends Component {
             'aria-rowindex': rowIndex + 2, // header row => 1, first body row => 2
             cls            : rowCls,
             cn             : [],
+            data           : {recordId},
             role           : 'row',
 
             style: {
@@ -605,6 +600,12 @@ class GridView extends Component {
             }
         };
 
+        if (selectedRows?.includes(recordId)) {
+            rowCls.push('neo-selected');
+            gridRow['aria-selected'] = true;
+            gridContainer.fire('select', {record})
+        }
+
         for (i=mountedColumns[0]; i <= mountedColumns[1]; i++) {
             column = columns.getAt(i);
             config = me.applyRendererOutput({column, columnIndex: i, record, rowIndex});
@@ -709,12 +710,12 @@ class GridView extends Component {
     }
 
     /**
-     * @param {Object} record
+     * @param {Number} rowIndex
      * @param {String} dataField
      * @returns {String}
      */
-    getCellId(record, dataField) {
-        return this.id + '__' + record[this.store.getKeyProperty()] + '__' + dataField
+    getCellId(rowIndex, dataField) {
+        return this.getRowId(rowIndex) + '__' + dataField
     }
 
     /**
@@ -803,36 +804,23 @@ class GridView extends Component {
         return null
     }
 
-    /**
-     * @param {String} cellId
-     * @returns {Record}
-     */
-    getRecordByCellId(cellId) {
-        let recordId = cellId.split('__')[1],
-            {store}  = this,
-            keyType  = store.getKeyType();
-
-        if (keyType === 'int' || keyType === 'integer') {
-            recordId = parseInt(recordId)
-        }
-
-        return store.get(recordId)
-    }
-
     /**
      * @param {String} rowId
-     * @returns {Record}
+     * @returns {Record|null}
      */
     getRecordByRowId(rowId) {
-        let recordId = rowId.split('__')[2],
-            {store}  = this,
-            keyType  = store.getKeyType();
+        let me       = this,
+            node     = me.getVdomChild(rowId),
+            rowIndex = node['aria-rowindex'];
+
+        if (Neo.isNumber(rowIndex)) {
+            // aria-rowindex is 1 based & also includes the header
+            rowIndex -= 2;
 
-        if (keyType === 'int' || keyType === 'integer') {
-            recordId = parseInt(recordId)
+            return me.store.getAt(rowIndex)
         }
 
-        return store.get(recordId)
+        return null
     }
 
     /**
@@ -846,11 +834,13 @@ class GridView extends Component {
     }
 
     /**
-     * @param {Object} record
+     * @param {Number} rowIndex
      * @returns {String}
      */
-    getRowId(record) {
-        return `${this.id}__tr__${record[this.store.getKeyProperty()]}`
+    getRowId(rowIndex) {
+        let me = this;
+
+        return `${me.id}__row-${rowIndex % (me.availableRows + 2 * me.bufferRowRange)}`
     }
 
     /**
@@ -951,7 +941,7 @@ class GridView extends Component {
             needsUpdate      = false,
             rowIndex         = me.store.indexOf(record),
             {selectionModel} = me,
-            column, needsCellUpdate;
+            column, needsCellUpdate, recordId;
 
         if (fieldNames.includes(me.colspanField)) {
             me.vdom.cn[rowIndex] = me.createRow({record, rowIndex});
@@ -971,7 +961,9 @@ class GridView extends Component {
             fields.forEach(field => {
                 if (field.name === me.selectedRecordField) {
                     if (selectionModel.ntype === 'selection-grid-rowmodel') {
-                        selectionModel[field.value ? 'select' : 'deselect'](me.getRowId(record))
+                        recordId = record[me.store.getKeyProperty()];
+
+                        selectionModel[field.value ? 'selectRow' : 'deselectRow'](recordId)
                     }
                 } else {
                     needsCellUpdate = me.updateCellNode(record, field.name);
@@ -1040,10 +1032,10 @@ class GridView extends Component {
      */
     updateCellNode(record, dataField) {
         let me          = this,
-            cellId      = me.getCellId(record, dataField),
+            rowIndex    = me.store.indexOf(record),
+            cellId      = me.getCellId(rowIndex, dataField),
             cellNode    = VDomUtil.find(me.vdom, cellId),
             needsUpdate = false,
-            rowIndex    = me.store.indexOf(record),
             cellStyle, cellVdom, column, columnIndex;
 
         // The vdom might not exist yet => nothing to do in this case

package/src/grid/column/AnimatedChange.mjs

@@ -63,7 +63,7 @@ class AnimatedChange extends Column {
                 // Wait for the next animation frame
                 await me.timeout(20);
 
-                cellId = view.getCellId(record, me.dataField);
+                cellId = view.getCellId(me.parent.store.indexOf(record), me.dataField);
                 node   = VdomUtil.find(view.vdom, cellId)?.vdom;
 
                 if (node) {

package/src/grid/column/Component.mjs

@@ -38,7 +38,12 @@ class Component extends Column {
          * @member {String} type='component'
          * @protected
          */
-        type: 'component'
+        type: 'component',
+        /**
+         * Set this config to true, in case you want to use 'bind' inside your cell based component.
+         * @member {Boolean} useBindings=false
+         */
+        useBindings: false
     }
 
     /**
@@ -104,13 +109,17 @@ class Component extends Column {
                 windowId
             });
 
+            // We need to ensure that wrapped components always get the same index-based id.
+            if (!component.vdom.id) {
+                component.vdom.id = id + '__wrapper'
+            }
+
             me.map.set(id, component)
         }
 
-        // The componentConfig can contain bindings into a view controller, e.g. a button handler = 'editButtonHandler'
-        // componentConfig.set(component) can revert these, so we need a parseConfig() for each change.
-        view.getController()   ?.parseConfig(component);
-        view.getStateProvider()?.parseConfig(component);
+        if (me.useBindings) {
+            view.getStateProvider()?.parseConfig(component)
+        }
 
         view.updateDepth = -1;
 

package/src/grid/header/Button.mjs

@@ -176,21 +176,7 @@ class Button extends BaseButton {
         let me    = this,
             {cls} = me;
 
-        if (value) {
-            NeoArray.remove(cls, 'neo-sort-hidden');
-
-            me.addDomListeners({
-                click: me.onButtonClick,
-                scope: me
-            })
-        } else {
-            NeoArray.add(cls, 'neo-sort-hidden');
-
-            me.removeDomListeners({
-                click: me.onButtonClick,
-                scope: me
-            })
-        }
+        NeoArray.toggle(cls, 'neo-sort-hidden', !value);
 
         me.cls = cls;
         me.update()
@@ -215,9 +201,10 @@ class Button extends BaseButton {
     }
 
     /**
+     * @param {Object} data
      * @protected
      */
-    onButtonClick() {
+    onClick(data) {
         let me = this,
             map;
 
@@ -235,7 +222,9 @@ class Button extends BaseButton {
             }
         }
 
-        me.isSorted = map[me.isSorted + '']
+        me.isSorted = map[me.isSorted + ''];
+
+        super.onClick(data)
     }
 
     /**

package/src/main/DomEvents.mjs

@@ -223,6 +223,29 @@ class DomEvents extends Base {
         Neo.worker.Manager.sendMessage('app', config)
     }
 
+    /**
+     *
+     * @param {HTMLElement} node
+     * @returns {Object}
+     */
+    geAriaAttributes(node) {
+        let ariaAttributes = {},
+            {attributes}   = node,
+            i              = 0,
+            len            = attributes?.length || 0,
+            attribute;
+
+        for (; i < len; i++) {
+            attribute = attributes[i];
+
+            if (attribute.name.startsWith('aria-')) {
+                ariaAttributes[attribute.name.substring(5)] = attribute.value
+            }
+        }
+
+        return ariaAttributes
+    }
+
     /**
      * Returns the distance between two points
      * @param  {Number} x1 The X position of the first point
@@ -349,6 +372,7 @@ class DomEvents extends Base {
             rect = r && this.parseDomRect(r) || {};
 
         return {
+            aria             : this.geAriaAttributes(node),
             checked          : node.checked,
             childElementCount: node.childElementCount,
             clientHeight     : node.clientHeight,
@@ -369,12 +393,13 @@ class DomEvents extends Base {
             offsetTop        : node.offsetTop,
             offsetWidth      : node.offsetWidth,
             rect,
+            role             : node.role,
             scrollHeight     : node.scrollHeight,
             scrollLeft       : node.scrollLeft,
             scrollTop        : node.scrollTop,
             scrollWidth      : node.scrollWidth,
             style            : node.style?.cssText,
-            tabIndex         : node.tabIndex,
+            tabIndex         : node.getAttribute?.('tabindex') ? node.tabIndex : null,
             tagName          : node.tagName?.toLowerCase()
         }
     }

package/src/manager/DomEvent.mjs

@@ -1,10 +1,9 @@
-import Base              from '../core/Base.mjs';
-import ComponentManager  from './Component.mjs';
-import FocusManager      from './Focus.mjs';
-import Logger            from '../util/Logger.mjs';
-import NeoArray          from '../util/Array.mjs';
-import {resolveCallback} from '../util/Function.mjs';
-import VDomUtil          from '../util/VDom.mjs';
+import Base             from '../core/Base.mjs';
+import ComponentManager from './Component.mjs';
+import FocusManager     from './Focus.mjs';
+import Logger           from '../util/Logger.mjs';
+import NeoArray         from '../util/Array.mjs';
+import VDomUtil         from '../util/VDom.mjs';
 
 const eventConfigKeys = [
     'bubble',
@@ -110,8 +109,6 @@ class DomEvent extends Base {
             listeners = me.items[id]?.[eventName];
 
             if (listeners) {
-                // console.log('fire', eventName, data, listeners, path);
-
                 if (Array.isArray(listeners)) {
                     // Stop iteration if a handler returns false
                     listeners.every(listener => {
@@ -142,6 +139,10 @@ class DomEvent extends Base {
                                     // Handler needs to know which actual target matched the delegate
                                     data.currentTarget = delegationTargetId;
 
+                                    if (Neo.isString(listener.fn)) {
+                                        me.bindCallback(listener.fn, 'fn', listener.scope, listener)
+                                    }
+
                                     result = listener.fn.apply(listener.scope || globalThis, [data]);
 
                                     if (!listener.bubble) {
@@ -284,18 +285,18 @@ class DomEvent extends Base {
     }
 
     /**
-     * @param {Object} config
+     * @param {Object}  config
      * @param {Boolean} config.bubble
-     * @param {String} config.delegate
-     * @param {String} config.eventName
-     * @param {String} config.id
+     * @param {String}  config.delegate
+     * @param {String}  config.eventName
+     * @param {String}  config.id
      * @param {Boolean} config.local
-     * @param {Number} config.opts
-     * @param {Number} config.originalConfig
-     * @param {String} config.ownerId
-     * @param {Number} config.priority=1
-     * @param {Object} config.scope
-     * @param {String} config.vnodeId
+     * @param {Number}  config.opts
+     * @param {Number}  config.originalConfig
+     * @param {String}  config.ownerId
+     * @param {Number}  config.priority=1
+     * @param {Object}  config.scope
+     * @param {String}  config.vnodeId
      * @returns {Boolean} true if the listener got registered successfully (false in case it was already there)
      */
     register(config) {
@@ -306,10 +307,8 @@ class DomEvent extends Base {
             fnType                       = typeof opts,
             fn, listener, listenerConfig, listenerId;
 
-        if (fnType === 'function') {
+        if (fnType === 'function' || fnType === 'string') {
             fn = opts
-        } else if (fnType === 'string') {
-            fn = resolveCallback(opts, scope).fn
         } else {
             fn    = opts.fn;
             scope = opts.scope || scope