neo.mjs 8.43.1 → 9.0.1

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

package/src/selection/Model.mjs

@@ -94,17 +94,19 @@ class Model extends Base {
      * @param {String} [selectedCls]
      */
     deselect(item, silent, itemCollection=this.items, selectedCls) {
+        let me     = this,
+            {view} = me,
+            node;
+
         // We hold vdom ids for now, so all incoming selections must be converted.
         item = item.isRecord ? view.getItemId(item) : Neo.isObject(item) ? item.id : item;
 
         if (itemCollection.includes(item)) {
-            let me     = this,
-                {view} = me,
-                node   = view.getVdomChild(item);
+            node = view.getVdomChild(item);
 
             if (node) {
                 node.cls = NeoArray.remove(node.cls || [], selectedCls || me.selectedCls);
-                node['aria-selected'] = false
+                delete node['aria-selected']
             }
 
             NeoArray.remove(itemCollection, item);
@@ -119,9 +121,8 @@ class Model extends Base {
                     selection: itemCollection
                 })
             }
-        }
-        else if (!silent) {
-            this.fire('noChange')
+        } else if (!silent) {
+            me.fire('noChange')
         }
     }
 
@@ -146,8 +147,7 @@ class Model extends Base {
             me.fire('selectionChange', {
                 selection: this.items
             })
-        }
-        else if (!silent) {
+        } else if (!silent) {
             me.fire('noChange')
         }
     }
@@ -225,12 +225,15 @@ class Model extends Base {
      * @param {String} [selectedCls]
      */
     select(items, itemCollection=this.items, selectedCls) {
+        if (!Array.isArray(items)) {
+            items = [items]
+        }
+
         let me     = this,
             {view} = me;
 
         // We hold vdom ids for now, so all incoming selections must be converted.
-        items = (items = Array.isArray(items) ?
-            items: [items]).map(item => item.isRecord ? view.getItemId(item) : Neo.isObject(item) ? item.id : item);
+        items = items.map(item => item.isRecord ? view.getItemId(item) : Neo.isObject(item) ? item.id : item);
 
         if (!Neo.isEqual(itemCollection, items)) {
             if (me.singleSelect && itemCollection === me.items) {

package/src/selection/grid/BaseModel.mjs

@@ -1,4 +1,5 @@
-import Model from '../Model.mjs';
+import Model    from '../Model.mjs';
+import NeoArray from '../../util/Array.mjs';
 
 /**
  * Abstract base class for all grid related selection models
@@ -12,7 +13,18 @@ class BaseModel extends Model {
          * @member {String} className='Neo.selection.grid.BaseModel'
          * @protected
          */
-        className: 'Neo.selection.grid.BaseModel'
+        className: 'Neo.selection.grid.BaseModel',
+        /**
+         * Storing the column dataFields
+         * @member {String[]} selectedColumns=[]
+         */
+        selectedColumns: [],
+        /**
+         * Storing the record ids
+         * @member {Number[]|String[]} selectedRows=[]
+         * @protected
+         */
+        selectedRows: []
     }
 
     /**
@@ -23,6 +35,83 @@ class BaseModel extends Model {
         return this.view.parent.columns.items.map(column => column.dataField)
     }
 
+    /**
+     * @param {Boolean} [silent=false] true to prevent a vdom update
+     */
+    deselectAllRows(silent=false) {
+        let me     = this,
+            items  = [...me.selectedRows],
+            {view} = me;
+
+        if (items.length) {
+            items.forEach(item => {
+                me.deselectRow(item, true)
+            });
+
+            if (!silent && items.length > 0) {
+                view.update()
+            }
+
+            me.fire('selectionChange', {
+                selection: me.selectedRows
+            })
+        } else if (!silent) {
+            me.fire('noChange')
+        }
+    }
+
+    /**
+     * @param {Number|String} recordId
+     * @param {Boolean}       [silent=false]
+     */
+    deselectRow(recordId, silent=false) {
+        let me      = this,
+            {view}  = me,
+            {store} = view,
+            record  = store.get(recordId),
+            rowId   = view.getRowId(store.indexOf(record)),
+            node    = view.getVdomChild(rowId);
+
+        if (node) {
+            node.cls = NeoArray.remove(node.cls || [], me.selectedCls);
+            delete node['aria-selected']
+        }
+
+        me.selectedRows = [recordId];
+
+        !silent && view.update()
+    }
+
+    /**
+     * Get the record for a given event path
+     * @param {Object[]} path
+     * @returns {Number|String|null}
+     */
+    getRecord(path) {
+        let node, rowIndex;
+
+        for (node of path) {
+            if (node.aria.rowindex) {
+                rowIndex = parseInt(node.aria.rowindex);
+
+                // aria-rowindex is 1 based & also includes the header
+                rowIndex -= 2;
+
+                return this.view.store.getAt(rowIndex)
+            }
+        }
+
+        return null
+    }
+
+    /**
+     * @param {Record} record
+     * @returns {Boolean}
+     */
+    hasAnnotations(record) {
+        return !!Object.getOwnPropertyDescriptor(record.__proto__, this.view.selectedRecordField)
+    }
+
     /**
      * Checks if an event path contains a grid cell editor
      * @param {Object}   data
@@ -38,6 +127,70 @@ class BaseModel extends Model {
 
         return false
     }
+
+    /**
+     * @param {String} dataField
+     * @returns {Boolean} true in case the column is selected
+     */
+    isSelectedColumn(dataField) {
+        return this.selectedColumns.includes(dataField)
+    }
+
+    /**
+     * @param {Number|String} recordId
+     * @returns {Boolean} true in case the row is selected
+     */
+    isSelectedRow(recordId) {
+        return this.selectedRows.includes(recordId)
+    }
+
+    /**
+     * @param {Number|String} recordId
+     * @param {Boolean}       [silent=false]
+     */
+    selectRow(recordId, silent=false) {
+        let me      = this,
+            {view}  = me,
+            {store} = view,
+            record  = store.get(recordId),
+            rowId   = view.getRowId(store.indexOf(record)),
+            node    = view.getVdomChild(rowId);
+
+        if (me.singleSelect) {
+            me.deselectAllRows(true)
+        }
+
+        if (node) {
+            node.cls = NeoArray.add(node.cls || [], me.selectedCls);
+            node['aria-selected'] = true
+        }
+
+        me.selectedRows = [recordId];
+
+        !silent && view.update()
+    }
+
+    /**
+     * @param {Number|String} recordId
+     * @param {Boolean}       [silent=false]
+     */
+    toggleRowSelection(recordId, silent=false) {
+        this[this.isSelectedRow(recordId) ? 'deselectRow' : 'selectRow'](recordId, silent)
+    }
+
+    /**
+     *
+     */
+    unregister() {
+        let me        = this,
+            countRows = me.selectedRows.length;
+
+        me.selectedRows = [];
+
+        countRows > 0 && me.view.createViewData();
+
+        super.unregister()
+    }
 }
 
 export default Neo.setupClass(BaseModel);

package/src/selection/grid/CellColumnModel.mjs

@@ -25,24 +25,20 @@ class CellColumnModel extends CellModel {
          * @member {String} selectedColumnCellCls='selected-column-cell'
          * @protected
          */
-        selectedColumnCellCls: 'selected-column-cell',
-        /**
-         * Storing the column dataFields
-         * @member {String[]} selectedColumns=[]
-         */
-        selectedColumns: []
+        selectedColumnCellCls: 'selected-column-cell'
     }
 
     /**
      * @param {Object} data
      */
     onCellClick(data) {
-        let me     = this,
-            {view} = me,
-            cellId = data.data.currentTarget;
+        let me        = this,
+            {view}    = me,
+            cellId    = data.data.currentTarget,
+            dataField = cellId && view.getDataField(cellId);
 
-        if (cellId) {
-            me.selectedColumns = [view.getDataField(cellId)];
+        if (dataField) {
+            me.selectedColumns = me.isSelected(cellId) ? [] : [dataField];
             view.createViewData(true)
         }
 

package/src/selection/grid/CellColumnRowModel.mjs

@@ -25,24 +25,20 @@ class CellColumnRowModel extends CellRowModel {
          * @member {String} selectedColumnCellCls='selected-column-cell'
          * @protected
          */
-        selectedColumnCellCls: 'selected-column-cell',
-        /**
-         * Storing the column dataFields
-         * @member {String[]} selectedColumns=[]
-         */
-        selectedColumns: []
+        selectedColumnCellCls: 'selected-column-cell'
     }
 
     /**
      * @param {Object} data
      */
     onCellClick(data) {
-        let me     = this,
-            {view} = me,
-            cellId = data.data.currentTarget;
+        let me        = this,
+            {view}    = me,
+            cellId    = data.data.currentTarget,
+            dataField = cellId && view.getDataField(cellId);
 
-        if (cellId) {
-            me.selectedColumns = [view.getDataField(cellId)];
+        if (dataField) {
+            me.selectedColumns = me.isSelected(cellId) ? [] : [dataField];
             view.createViewData(true)
         }
 

package/src/selection/grid/CellModel.mjs

@@ -102,7 +102,7 @@ class CellModel extends BaseModel {
             newIndex += dataFields.length
         }
 
-        me.select(view.getCellId(record, dataFields[newIndex]));
+        me.select(view.getCellId(store.indexOf(record), dataFields[newIndex]));
 
         view.parent.scrollByColumns(currentIndex, step)
     }
@@ -114,6 +114,7 @@ class CellModel extends BaseModel {
         let me           = this,
             {view}       = me,
             {store}      = view,
+            countRecords = store.getCount(),
             currentIndex = 0,
             dataField, newIndex;
 
@@ -124,13 +125,13 @@ class CellModel extends BaseModel {
             dataField = me.dataFields[0]
         }
 
-        newIndex = (currentIndex + step) % store.getCount();
+        newIndex = (currentIndex + step) % countRecords;
 
         while (newIndex < 0) {
-            newIndex += store.getCount()
+            newIndex += countRecords
         }
 
-        me.select(view.getCellId(store.getAt(newIndex), dataField));
+        me.select(view.getCellId(newIndex, dataField));
         view.scrollByRows(currentIndex, step)
     }
 

package/src/selection/grid/CellRowModel.mjs

@@ -20,13 +20,7 @@ class CellRowModel extends CellModel {
          * @member {String} cls='neo-selection-cellrowmodel'
          * @protected
          */
-        cls: 'neo-selection-cellrowmodel',
-        /**
-         * Storing the node ids
-         * @member {String[]} selectedRows=[]
-         * @protected
-         */
-        selectedRows: []
+        cls: 'neo-selection-cellrowmodel'
     }
 
     /**
@@ -35,12 +29,15 @@ class CellRowModel extends CellModel {
     onCellClick(data) {
         let me     = this,
             {view} = me,
-            record = view.getRecord(data.data.currentTarget),
-            rowId  = view.getRowId(record);
+            cellId = data.data.currentTarget,
+            record = me.getRecord(data.data.path);
 
-        if (rowId) {
-            me.selectedRows = [rowId];
-            view.createViewData(true)
+        if (record) {
+            if (me.hasAnnotations(record)) {
+                me.updateAnnotations(record)
+            } else {
+                me[me.isSelected(cellId) ? 'deselectRow' : 'selectRow'](record[view.store.getKeyProperty()], true)
+            }
         }
 
         super.onCellClick(data)
@@ -54,35 +51,30 @@ class CellRowModel extends CellModel {
             {view}       = me,
             {store}      = view,
             countRecords = store.getCount(),
-            rowId        = me.selectedRows[0] || view.getRowId(store.getAt(0)),
-            record       = view.getRecord(rowId),
+            keyProperty  = store.getKeyProperty(),
+            recordId     = me.selectedRows[0] || store.getAt(0)[keyProperty],
+            record       = store.get(recordId),
             index        = store.indexOf(record),
-            newIndex     = (index + step) % countRecords,
-            id;
+            newIndex     = (index + step) % countRecords;
 
         while (newIndex < 0) {
             newIndex += countRecords
         }
 
-        id = view.getRowId(store.getAt(newIndex));
+        record = store.getAt(newIndex);
 
-        if (id) {
-            me.selectedRows = [id];
-            view.createViewData(true)
+        if (me.hasAnnotations(record)) {
+            me.updateAnnotations(record)
+        } else {
+            recordId = record[keyProperty];
+
+            if (recordId) {
+                me.selectRow(recordId, true) // silent
+            }
         }
 
         super.onNavKeyRow(step)
     }
-
-    /**
-     *
-     */
-    unregister() {
-        this.selectedRows = [];
-        this.view.createViewData();
-
-        super.unregister()
-    }
 }
 
 export default Neo.setupClass(CellRowModel);

package/src/selection/grid/ColumnModel.mjs

@@ -20,12 +20,7 @@ class ColumnModel extends BaseModel {
          * @member {String} cls='neo-selection-columnmodel'
          * @protected
          */
-        cls: 'neo-selection-columnmodel',
-        /**
-         * Storing the column dataFields
-         * @member {String[]} selectedColumns=[]
-         */
-        selectedColumns: []
+        cls: 'neo-selection-columnmodel'
     }
 
     /**
@@ -59,12 +54,13 @@ class ColumnModel extends BaseModel {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me     = this,
-            {view} = me,
-            cellId = data.data.currentTarget;
+        let me        = this,
+            {view}    = me,
+            cellId    = data.data.currentTarget,
+            dataField = cellId && view.getDataField(cellId);
 
-        if (cellId) {
-            me.selectedColumns = [view.getDataField(cellId)];
+        if (dataField) {
+            me.selectedColumns = me.isSelectedColumn(dataField) ? [] : [dataField];
             view.createViewData()
         }
     }