neo.mjs 8.20.2 → 8.21.0

package/apps/ServiceWorker.mjs

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

package/apps/portal/index.html

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

package/examples/ServiceWorker.mjs

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

package/examples/grid/bigData/ControlsContainer.mjs

@@ -84,6 +84,33 @@ class ControlsContainer extends Container {
                 style         : {marginTop: '.3em'},
                 value         : 'neo-theme-light',
                 valueLabelText: 'Light'
+            }, {
+                ntype: 'label',
+                style: {marginTop: '2em'},
+                text : 'Filters'
+            }, {
+                ntype     : 'textfield',
+                clearable : true,
+                editable  : true,
+                labelText : 'Firstname',
+                labelWidth: 90,
+                listeners : {change: 'up.onFilterFieldChange'},
+                name      : 'firstname',
+                style     : {marginTop: '.3em'},
+                width     : 200
+            }, {
+                ntype     : 'textfield',
+                clearable : true,
+                editable  : true,
+                labelText : 'Lastname',
+                labelWidth: 90,
+                listeners : {change: 'up.onFilterFieldChange'},
+                name      : 'lastname',
+                width     : 200
+            }, {
+                ntype    : 'label',
+                reference: 'count-rows-label',
+                style    : {marginTop: '1em'}
             }]
         }],
         /**
@@ -154,6 +181,36 @@ class ControlsContainer extends Container {
 
         me.grid.toggleCls('neo-extend-margin-right');
     }
+
+    onConstructed() {
+        super.onConstructed();
+
+        let me      = this,
+            {store} = me.grid;
+
+        store.on({
+            filter: me.updateRowsLabel,
+            load  : me.updateRowsLabel,
+            scope : me
+        });
+
+        store.getCount() > 0 && me.updateRowsLabel()
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onFilterFieldChange(data) {
+        this.grid.store.getFilter(data.component.name).value = data.value
+    }
+
+    updateRowsLabel() {
+        let {store} = this.grid;
+
+        if (!store.isLoading) {
+            this.getItem('count-rows-label').text = 'Filtered rows: ' + store.getCount()
+        }
+    }
 }
 
 export default Neo.setupClass(ControlsContainer);

package/examples/grid/bigData/MainStore.mjs

@@ -20,6 +20,18 @@ class MainStore extends Store {
          * @member {Number} amountRows_=1000
          */
         amountRows_: 1000,
+        /**
+         * @member {Object[]} filters
+         */
+        filters: [{
+            property: 'firstname',
+            operator: 'like',
+            value   : null
+        }, {
+            property: 'lastname',
+            operator: 'like',
+            value   : null
+        }],
         /**
          * @member {Neo.data.Model} model=Model
          */

package/examples/grid/cellEditing/MainContainer.mjs

@@ -44,7 +44,8 @@ class MainContainer extends ConfigurationViewport {
      * @returns {Object[]}
      */
     createConfigurationComponents() {
-        let me = this;
+        let me               = this,
+            {selectionModel} = me.exampleComponent.view;
 
         const selectionModelRadioDefaults = {
             module        : Radio,
@@ -64,25 +65,25 @@ class MainContainer extends ConfigurationViewport {
             value    : me.exampleComponent.height
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellmodel',
+            checked       : selectionModel.ntype === 'selection-grid-cellmodel',
             labelText     : 'selectionModel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellModel)},
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellModel)},
             style         : {marginTop: '10px'},
             valueLabelText: 'Cell'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellcolumnmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnModel)},
+            checked       : selectionModel.ntype === 'selection-grid-cellcolumnmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnModel)},
             valueLabelText: 'Cell & Column'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellRowModel)},
+            checked       : selectionModel.ntype === 'selection-grid-cellrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellRowModel)},
             valueLabelText: 'Cell & Row'
         }, {
             ...selectionModelRadioDefaults,
-            checked       : me.exampleComponent.selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
-            listeners     : {change: me.onRadioChange.bind(me, 'selectionModel', CellColumnRowModel)},
+            checked       : selectionModel.ntype === 'selection-grid-cellcolumnrowmodel',
+            listeners     : {change: me.onRadioViewChange.bind(me, 'selectionModel', CellColumnRowModel)},
             valueLabelText: 'Cell & Column & Row'
         }, {
             module        : CheckBox,
@@ -173,6 +174,17 @@ class MainContainer extends ConfigurationViewport {
     onPluginConfigChange(config, opts) {
         this.exampleComponent.getPlugin('grid-cell-editing')[config] = opts.value
     }
+
+    /**
+     * @param {String} config
+     * @param {String} value
+     * @param {Object} opts
+     */
+    onRadioViewChange(config, value, opts) {
+        if (opts.value === true) { // we only want to listen to check events, not uncheck
+            this.exampleComponent.view[config] = value
+        }
+    }
 }
 
 export default Neo.setupClass(MainContainer);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.20.2",
+    "version": "8.21.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {
@@ -55,11 +55,11 @@
         "fs-extra": "^11.3.0",
         "highlightjs-line-numbers.js": "^2.9.0",
         "inquirer": "^12.4.1",
-        "marked": "^15.0.6",
+        "marked": "^15.0.7",
         "monaco-editor": "0.50.0",
         "neo-jsdoc": "1.0.1",
         "neo-jsdoc-x": "1.0.5",
-        "postcss": "^8.5.1",
+        "postcss": "^8.5.2",
         "sass": "^1.84.0",
         "siesta-lite": "5.5.2",
         "url": "^0.11.4",

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

@@ -98,9 +98,11 @@
 
 .neo-mouse {
     .neo-grid-row {
-        &:hover {
-            .neo-grid-cell {
-                background-color: var(--grid-cell-background-color-hover);
+        &:not(.neo-selected) {
+            &:hover {
+                .neo-grid-cell {
+                    background-color: var(--grid-cell-background-color-hover);
+                }
             }
         }
     }

package/resources/scss/src/grid/plugin/CellEditing.scss

@@ -7,5 +7,6 @@
 
     .neo-grid-editor {
         margin: 0;
+        width : 100%;
     }
 }

package/src/DefaultConfig.mjs

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

package/src/collection/Base.mjs

@@ -234,7 +234,7 @@ class Collection extends Base {
         me.sortDirections = [];
         me.sortProperties = [];
 
-        me.sorters.forEach(sorter => {//console.log('forEach', sorter);
+        me.sorters.forEach(sorter => {
             me.sortDirections.push(sorter.directionMultiplier);
             me.sortProperties.push(sorter.property)
         })
@@ -1050,9 +1050,12 @@ class Collection extends Base {
     onMutate(opts) {
         let me = this;
 
-        if (opts.preventBubbleUp) {
+        // todo: inspect the bubbling chain
+        /*if (opts.preventBubbleUp) {
             me.preventBubbleUp = true
-        }
+        }*/
+
+        me.preventBubbleUp = true;
 
         me.splice(null, opts.removedItems, opts.addedItems)
     }

package/src/data/Store.mjs

@@ -132,7 +132,7 @@ class Store extends Base {
      * @returns {Number} the collection count
      */
     add(item) {
-        return super.add(this.beforeSetData(item))
+        return super.add(this.createRecord(item))
     }
 
     /**
@@ -161,6 +161,8 @@ class Store extends Base {
                     me.initialData = [...value]
                 }
 
+                me.isLoading = false;
+
                 me.add(value)
             }
         }
@@ -256,22 +258,9 @@ class Store extends Base {
      */
     beforeSetData(value, oldValue) {
         if (value) {
-            if (!Array.isArray(value)) {
-                value = [value]
-            }
-
-            let me  = this,
-                i   = 0,
-                len = value.length,
-                item;
-
-            for (; i < len; i++) {
-                item = value[i]
+            this.isLoading = true;
 
-                if (!RecordFactory.isRecord(item)) {
-                    value[i] = RecordFactory.createRecord(me.model, item)
-                }
-            }
+            value = this.createRecord(value)
         }
 
         return value
@@ -304,10 +293,34 @@ class Store extends Base {
     }
 
     /**
-     * @param {Object} config
+     * Converts an object or array of objects into records
+     * @param {Object|Object[]} config
+     * @returns {Object|Object[]} Array in case an array was passed
      */
     createRecord(config) {
-        RecordFactory.createRecord(config)
+        let isArray = true;
+
+        if (config) {
+            if (!Array.isArray(config)) {
+                isArray = false;
+                config  = [config]
+            }
+
+            let me  = this,
+                i   = 0,
+                len = config.length,
+                item;
+
+            for (; i < len; i++) {
+                item = config[i]
+
+                if (!RecordFactory.isRecord(item)) {
+                    config[i] = RecordFactory.createRecord(me.model, item)
+                }
+            }
+        }
+
+        return isArray ? config : config[0]
     }
 
     /**
@@ -375,8 +388,7 @@ class Store extends Base {
     onCollectionMutate(opts) {
         let me = this;
 
-        if (me.configsApplied) {
-            // console.log('onCollectionMutate', opts);
+        if (me.configsApplied && !me.isLoading) {
             me.fire('load', me.items)
         }
     }

package/src/form/field/Base.mjs

@@ -33,6 +33,10 @@ class Field extends Component {
          * @member {String|null} formGroup_=null
          */
         formGroup_: null,
+        /**
+         * @member {String|null} keys={}
+         */
+        keys: {},
         /**
          * True indicates that a user has interacted with the form field
          * @member {Boolean} isTouched_=false

package/src/grid/Scrollbar.mjs

@@ -93,8 +93,9 @@ class GridScrollbar 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

@@ -336,25 +336,6 @@ class GridView extends Component {
         oldValue !== undefined && this.createViewData()
     }
 
-    /**
-     * Triggered after the store config got changed
-     * @param {Neo.data.Store|null} value
-     * @param {Neo.data.Store|null} oldValue
-     * @protected
-     */
-    afterSetStore(value, oldValue) {
-        if (value) {
-            let me = this;
-
-            value.on({
-                load : me.updateScrollHeight,
-                scope: me
-            });
-
-            value.getCount() > 0 && me.updateScrollHeight()
-        }
-    }
-
     /**
      * Triggered after the visibleColumns config got changed
      * @param {Number[]} value
@@ -579,7 +560,7 @@ class GridView extends Component {
             endIndex, i;
 
         if (
-            countRecords                  < 1 ||
+            store.isLoading                   ||
             me.availableRows              < 1 ||
             me._containerWidth            < 1 || // we are not checking me.containerWidth, since we want to ignore the config symbol
             me.columnPositions.getCount() < 1 ||
@@ -599,6 +580,7 @@ class GridView extends Component {
 
         me.parent.isLoading = false;
 
+        me.updateScrollHeight(true); // silent
         me.update()
     }
 
@@ -889,7 +871,6 @@ class GridView extends Component {
         let me                     = this,
             fieldNames             = fields.map(field => field.name),
             needsUpdate            = false,
-            gridContainer          = me.parent,
             rowIndex               = me.store.indexOf(record),
             {selectionModel, vdom} = me,
             cellId, cellNode, cellStyle, cellVdom, column, columnIndex;
@@ -960,16 +941,16 @@ class GridView extends Component {
     }
 
     /**
-     *
+     * @param {Boolean} silent=false
      */
-    updateScrollHeight() {
+    updateScrollHeight(silent=false) {
         let me           = this,
             countRecords = me.store.getCount(),
             {rowHeight}  = me;
 
         if (countRecords > 0 && rowHeight > 0) {
             me.vdom.cn[0].height = `${(countRecords + 1) * rowHeight}px`;
-            me.update()
+            !silent && me.update()
         }
     }
 

package/src/grid/plugin/CellEditing.mjs

@@ -23,7 +23,11 @@ class CellEditing extends BaseCellEditing {
         /**
          * @member {String[]} editorCls=['neo-grid-editor']
          */
-        editorCls: ['neo-grid-editor']
+        editorCls: ['neo-grid-editor'],
+        /**
+         * @member {Boolean} focusCells=true
+         */
+        focusCells: true
     }
 }
 

package/src/main/DomEvents.mjs

@@ -514,7 +514,7 @@ class DomEvents extends Base {
             if (
                 isInput &&
                 event.key === 'Tab' &&
-                me.testPathInclusion(event, ['neo-table-editor'], true)
+                me.testPathInclusion(event, ['neo-grid-editor', 'neo-table-editor'], true)
             ) {
                 event.preventDefault()
             }

package/src/main/mixin/DeltaUpdates.mjs

@@ -26,14 +26,16 @@ class DeltaUpdates extends Base {
             len          = attributes.length,
             attribute;
 
-        for (; i < len; i++) {
-            attribute = attributes.item(i);
-            clone.setAttribute(attribute.nodeName, attribute.nodeValue)
-        }
+        if (node) {
+            for (; i < len; i++) {
+                attribute = attributes.item(i);
+                clone.setAttribute(attribute.nodeName, attribute.nodeValue)
+            }
 
-        clone.innerHTML= node.innerHTML;
+            clone.innerHTML= node.innerHTML;
 
-        node.parentNode.replaceChild(clone, node)
+            node.parentNode.replaceChild(clone, node)
+        }
     }
 
     /**
@@ -41,7 +43,7 @@ class DeltaUpdates extends Base {
      * @param {String} delta.id
      */
     du_focusNode(delta) {
-        this.getElement(delta.id).focus()
+        this.getElement(delta.id)?.focus()
     }
 
     /**
@@ -183,7 +185,7 @@ class DeltaUpdates extends Base {
         let me   = this,
             node = me.getElement(delta.parentId);
 
-        node.replaceChild(me.getElement(delta.toId), me.getElement(delta.fromId))
+        node?.replaceChild(me.getElement(delta.toId), me.getElement(delta.fromId))
     }
 
     /**
@@ -195,7 +197,9 @@ class DeltaUpdates extends Base {
         let me   = this,
             node = me.getElement(delta.id);
 
-        node.textContent = delta.value
+        if (node) {
+            node.textContent = delta.value
+        }
     }
 
     /**
@@ -211,11 +215,7 @@ class DeltaUpdates extends Base {
         let me   = this,
             node = me.getElementOrBody(delta.id);
 
-        if (!node) {
-            if (Neo.config.environment === 'development') {
-                console.warn('du_updateNode: node not found for id', delta.id)
-            }
-        } else {
+        if (node) {
             Object.entries(delta).forEach(([prop, value]) => {
                 switch(prop) {
                     case 'attributes':

package/src/selection/grid/BaseModel.mjs

@@ -22,6 +22,22 @@ class BaseModel extends Model {
     get dataFields() {
         return this.view.parent.columns.map(column => column.dataField)
     }
+
+    /**
+     * Checks if an event path contains a grid cell editor
+     * @param {Object}   data
+     * @param {Object[]} data.path
+     * @returns {Boolean}
+     */
+    hasEditorFocus({path}) {
+        for (const node of path) {
+            if (node.cls?.includes('neo-grid-editor')) {
+                return true
+            }
+        }
+
+        return false
+    }
 }
 
 export default Neo.setupClass(BaseModel);

package/src/selection/grid/CellModel.mjs

@@ -54,28 +54,28 @@ class CellModel extends BaseModel {
      * @param {Object} data
      */
     onKeyDownDown(data) {
-        this.onNavKeyRow(1)
+        !this.hasEditorFocus(data) && this.onNavKeyRow(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownLeft(data) {
-        this.onNavKeyColumn(-1)
+        !this.hasEditorFocus(data) && this.onNavKeyColumn(-1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownRight(data) {
-        this.onNavKeyColumn(1)
+        !this.hasEditorFocus(data) && this.onNavKeyColumn(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownUp(data) {
-        this.onNavKeyRow(-1)
+        !this.hasEditorFocus(data) && this.onNavKeyRow(-1)
     }
 
     /**

package/src/selection/grid/ColumnModel.mjs

@@ -66,14 +66,14 @@ class ColumnModel extends BaseModel {
      * @param {Object} data
      */
     onKeyDownLeft(data) {
-        this.onNavKeyColumn(-1)
+        !this.hasEditorFocus(data) && this.onNavKeyColumn(-1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownRight(data) {
-        this.onNavKeyColumn(1)
+        !this.hasEditorFocus(data) && this.onNavKeyColumn(1)
     }
 
     /**

package/src/selection/grid/RowModel.mjs

@@ -55,14 +55,14 @@ class RowModel extends BaseModel {
      * @param {Object} data
      */
     onKeyDownDown(data) {
-        this.onNavKeyRow(1)
+        !this.hasEditorFocus(data) && this.onNavKeyRow(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownUp(data) {
-        this.onNavKeyRow(-1)
+        !this.hasEditorFocus(data) && this.onNavKeyRow(-1)
     }
 
     /**

package/src/table/plugin/CellEditing.mjs

@@ -29,7 +29,11 @@ class CellEditing extends Plugin {
         /**
          * @member {String[]} editorCls=['neo-table-editor']
          */
-        editorCls: ['neo-table-editor']
+        editorCls: ['neo-table-editor'],
+        /**
+         * @member {Boolean} focusCells=true
+         */
+        focusCells: true
     }
 
     /**
@@ -110,7 +114,8 @@ class CellEditing extends Plugin {
             cellNode            = VdomUtil.find(view.vdom, cellId).vdom,
             column              = me.owner.headerToolbar.getColumn(dataField),
             editor              = me.editors[dataField],
-            value               = record[dataField];
+            value               = record[dataField],
+            keys;
 
         if (me.mountedEditor) {
             await me.unmountEditor();
@@ -133,15 +138,21 @@ class CellEditing extends Plugin {
                 value,
                 windowId,
 
-                keys: {
-                    Enter : 'onEditorKeyEnter',
-                    Escape: 'onEditorKeyEscape',
-                    Tab   : 'onEditorKeyTab',
-                    scope : me
-                },
-
                 ...column.editor
-            })
+            });
+
+            keys = {
+                Enter : 'onEditorKeyEnter',
+                Escape: 'onEditorKeyEscape',
+                Tab   : 'onEditorKeyTab',
+                scope : me
+            };
+
+            if (editor.keys) {
+                editor.keys.add(keys)
+            } else {
+                editor.keys = keys
+            }
         } else {
             editor.originalConfig.value = value;
             editor.setSilent({record, value})
@@ -249,14 +260,14 @@ class CellEditing extends Plugin {
      * @returns {Promise<void>}
      */
     async onTableKeyDown(data) {
-        let me        = this,
-            {target}  = data,
-            tableView = me.owner.view,
+        let me       = this,
+            {target} = data,
+            {view}   = me.owner,
             dataField, record;
 
         if (!me.mountedEditor && target.cls?.includes('neo-selected')) {
-            dataField = tableView.getCellDataField(target.id);
-            record    = tableView.getRecord(target.id);
+            dataField = view.getCellDataField(target.id);
+            record    = view.getRecord(target.id);
 
             await me.mountEditor(record, dataField)
         }
@@ -283,7 +294,7 @@ class CellEditing extends Plugin {
         if (cellId) {
             selectionModel?.deselect(cellId, true); // the cell might still count as selected => silent deselect first
             selectionModel?.select(cellId);
-            me.owner.focus(cellId)
+            me.focusCells && me.owner.focus(cellId)
         }
     }
 
@@ -315,15 +326,15 @@ class CellEditing extends Plugin {
             return
         }
 
-        let me        = this,
-            record    = me.mountedEditor.record,
-            tableView = me.owner.view,
-            rowIndex  = tableView.store.indexOf(record);
+        let me       = this,
+            record   = me.mountedEditor.record,
+            {view}   = me.owner,
+            rowIndex = view.store.indexOf(record);
 
         me.mountedEditor = null;
 
-        tableView.vdom.cn[rowIndex] = tableView.createRow({record, rowIndex});
-        await tableView.promiseUpdate()
+        view.getVdomRoot().cn[rowIndex] = view.createRow({record, rowIndex});
+        await view.promiseUpdate()
     }
 }