neo.mjs 8.0.0 → 8.1.0

package/src/list/Component.mjs

@@ -1,11 +1,11 @@
-import Base from './Base.mjs';
+import List from './Base.mjs';
 
 /**
  * A base class for lists which will use component based list items
  * @class Neo.list.Component
  * @extends Neo.list.Base
  */
-class Component extends Base {
+class Component extends List {
     static config = {
         /**
          * @member {String} className='Neo.list.Component'

package/src/main/DomEvents.mjs

@@ -541,19 +541,28 @@ class DomEvents extends Base {
      * @param {KeyboardEvent} event
      */
     onKeyDown(event) {
-        let {target}  = event,
+        let me        = this,
+            {target}  = event,
             {tagName} = target,
             isInput   = tagName === 'INPUT' || tagName === 'TEXTAREA';
 
         if (isInput && disabledInputKeys[target.id]?.includes(event.key)) {
             event.preventDefault()
         } else {
-            this.sendMessageToApp(this.getKeyboardEventData(event));
+            me.sendMessageToApp(me.getKeyboardEventData(event));
+
+            if (
+                isInput &&
+                event.key === 'Tab' &&
+                me.testPathInclusion(event, ['neo-table-editor'], true)
+            ) {
+                event.preventDefault()
+            }
 
             if (
                 !isInput &&
                 ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(event.key) &&
-                this.testPathInclusion(event, ['neo-selection'], true)
+                me.testPathInclusion(event, ['neo-selection'], true)
             ) {
                 event.preventDefault()
             }

package/src/manager/Base.mjs

@@ -1,11 +1,11 @@
-import CollectionBase from '../collection/Base.mjs';
+import Collection from '../collection/Base.mjs';
 
 /**
  * Abstract base class for the other manager classes
  * @class Neo.manager.Base
  * @extends Neo.collection.Base
  */
-class Base extends CollectionBase{
+class Manager extends Collection{
     static config = {
         /**
          * @member {String} className='Neo.manager.Base'
@@ -44,4 +44,4 @@ class Base extends CollectionBase{
     }
 }
 
-export default Neo.setupClass(Base);
+export default Neo.setupClass(Manager);

package/src/manager/Component.mjs

@@ -1,4 +1,4 @@
-import Base      from './Base.mjs';
+import Manager   from './Base.mjs';
 import VDomUtil  from '../util/VDom.mjs';
 import VNodeUtil from '../util/VNode.mjs';
 
@@ -7,7 +7,7 @@ import VNodeUtil from '../util/VNode.mjs';
  * @extends Neo.manager.Base
  * @singleton
  */
-class Component extends Base {
+class Component extends Manager {
     static config = {
         /**
          * @member {String} className='Neo.manager.Component'
@@ -177,6 +177,15 @@ class Component extends Base {
         return null
     }
 
+    /**
+     * Returns the object associated to the key, or null if there is none.
+     * @param key
+     * @returns {Neo.component.Base|null}
+     */
+    get(key) {
+        return this.wrapperNodes.get(key) || super.get(key)
+    }
+
     /**
      * Returns all child components which are recursively matched via their parentId
      * @param {Neo.component.Base} component
@@ -241,14 +250,14 @@ class Component extends Base {
      * @returns {Neo.component.Base|null|Neo.component.Base[]}
      *
      * @example
-            // as String: ntype[comma separated propterties]
-            Neo.first('toolbar button[text=Try me,icon=people]')
-            // as Object: Add properties. ntype is optional
-            Neo.first({
+     // as String: ntype[comma separated propterties]
+     Neo.first('toolbar button[text=Try me,icon=people]')
+     // as Object: Add properties. ntype is optional
+     Neo.first({
                 icon: 'people'
             })
-            // as Array: An Array of Objects. No Strings allowed
-            Neo.first([{
+     // as Array: An Array of Objects. No Strings allowed
+     Neo.first([{
                 ntype: 'toolbar'
             },{
                 ntype: 'button', text: 'Try me', icon: 'people
@@ -258,7 +267,7 @@ class Component extends Base {
      * not stop after the first result.
      *
      * @example
-            Neo.first('button', false) // => [Button, Button, Button]
+     Neo.first('button', false) // => [Button, Button, Button]
      */
     getFirst(componentDescription, returnFirstMatch = true) {
         let objects = [],
@@ -279,7 +288,7 @@ class Component extends Base {
 
                 if (pairs) {
                     const pairsRegex = /\[(.*?)\]/,
-                        pairsMatch = pairs.match(pairsRegex);
+                          pairsMatch = pairs.match(pairsRegex);
 
                     if (pairsMatch) {
                         const pairs = pairsMatch[1].split(',');
@@ -345,7 +354,7 @@ class Component extends Base {
             len           = path?.length || 0;
 
         for (; i < len; i++) {
-            if (me.has(path[i])) {
+            if (me.has(path[i]) || me.wrapperNodes.get(path[i])) {
                 componentPath.push(path[i])
             }
         }

package/src/manager/DomEvent.mjs

@@ -202,7 +202,7 @@ class DomEvent extends Base {
             opts     : config,
             priority : config.priority,
             scope    : config.scope   || scope,
-            vnodeId  : config.vnodeId || scope.id
+            vnodeId  : config.vnodeId || scope.vdom.id
         };
     }
 
@@ -427,15 +427,15 @@ class DomEvent extends Base {
                     if (!eventConfigKeys.includes(key)) {
                         me.register({
                             bubble        : domListener.bubble   || value.bubble,
-                            delegate      : domListener.delegate || value.delegate || '#' + component.id,
+                            delegate      : domListener.delegate || value.delegate || '#' + component.vdom.id,
                             eventName     : key,
-                            id            : component.id,
+                            id            : component.vdom.id, // honor wrapper nodes
                             opts          : value,
                             originalConfig: domListener,
                             ownerId       : component.id,
                             priority      : domListener.priority || value.priority || 1,
                             scope         : domListener.scope    || component,
-                            vnodeId       : domListener.vnodeId  || value.vnodeId  || component.id
+                            vnodeId       : domListener.vnodeId  || value.vnodeId  || component.vdom.id
                         })
                     }
                 })
@@ -468,8 +468,7 @@ class DomEvent extends Base {
             if (j != null) {
                 targetId = path[j].id
             }
-        }
-        else {
+        } else {
             let delegationArray = delegate.split(' '),
                 len             = delegationArray.length,
                 hasMatch, i, item, isId;

package/src/manager/Focus.mjs

@@ -35,9 +35,9 @@ class Focus extends CoreBase {
         /**
          * The amount of time for a focusIn to occur after the last focusOut
          * to get combined into a focusmove event.
-         * @member {Number} maxFocusInOutGap=10
+         * @member {Number} maxFocusInOutGap=50
          */
-        maxFocusInOutGap: 10,
+        maxFocusInOutGap: 50,
         /**
          * The maximum amount of items stored inside the history array
          * @member {Number} maxHistoryLength=20

package/src/manager/Instance.mjs

@@ -1,12 +1,12 @@
-import Base     from './Base.mjs';
-import CoreBase from '../core/Base.mjs';
+import Base    from '../core/Base.mjs';
+import Manager from './Base.mjs';
 
 /**
  * @class Neo.manager.Instance
  * @extends Neo.manager.Base
  * @singleton
  */
-class Instance extends Base {
+class Instance extends Manager {
     static config = {
         /**
          * @member {String} className='Neo.manager.Instance'
@@ -28,7 +28,7 @@ class Instance extends Base {
 
         let me = this;
 
-        CoreBase.instanceManagerAvailable = true;
+        Base.instanceManagerAvailable = true;
 
         me.consumeNeoIdMap();
 

package/src/manager/Task.mjs

@@ -1,4 +1,4 @@
-import Base from './Base.mjs';
+import Manager from './Base.mjs';
 
 /**
  * @class Neo.manager.Task
@@ -32,7 +32,7 @@ import Base from './Base.mjs';
  *     TaskManager.run(taskId);
  *     TaskManager.get(taskId).repeat = 20;
  */
-class Task extends Base {
+class Task extends Manager {
     static config = {
         /**
          * @member {String} className='Neo.manager.Task'

package/src/manager/Toast.mjs

@@ -1,5 +1,5 @@
-import Base     from './Base.mjs';
-import NeoArray from "../util/Array.mjs";
+import Manager  from './Base.mjs';
+import NeoArray from '../util/Array.mjs';
 
 /**
  * See Neo.dialog.Toast for examples
@@ -7,7 +7,7 @@ import NeoArray from "../util/Array.mjs";
  * @extends Neo.manager.Base
  * @singleton
  */
-class Toast extends Base {
+class Toast extends Manager {
     static config = {
         /**
          * @member {String} className='Neo.manager.Toast'

package/src/plugin/Base.mjs

@@ -1,4 +1,4 @@
-import CoreBase from '../core/Base.mjs';
+import Base from '../core/Base.mjs';
 
 /**
  * Abstract base class for plugin implementations.
@@ -7,7 +7,7 @@ import CoreBase from '../core/Base.mjs';
  * @class Neo.plugin.Base
  * @extends Neo.core.Base
  */
-class Base extends CoreBase {
+class Plugin extends Base {
     static config = {
         /**
          * @member {String} className='Neo.plugin.Base'
@@ -24,7 +24,11 @@ class Base extends CoreBase {
          * @member {Neo.component.Base} owner=null
          * @protected
          */
-        owner: null
+        owner: null,
+        /**
+         * @member {Number|null} windowId_=null
+         */
+        windowId_: null
     }
 
     /**
@@ -42,6 +46,16 @@ class Base extends CoreBase {
         }
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number|null} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        value && Neo.currentWorker.insertThemeFiles(value, this.__proto__)
+    }
+
     /**
      * Override this method to apply changes to the owner Component when it does get mounted
      */
@@ -50,4 +64,4 @@ class Base extends CoreBase {
     }
 }
 
-export default Neo.setupClass(Base);
+export default Neo.setupClass(Plugin);

package/src/plugin/Popover.mjs

@@ -1,6 +1,6 @@
-import Base      from './Base.mjs';
 import Container from '../container/Base.mjs'
-import NeoArray  from "../util/Array.mjs";
+import NeoArray  from '../util/Array.mjs';
+import Plugin    from './Base.mjs';
 
 /**
  * Popover usable as tooltip
@@ -26,7 +26,7 @@ import NeoArray  from "../util/Array.mjs";
  *         }]
  *     }]
  */
-class Popover extends Base {
+class Popover extends Plugin {
     /**
      * Valid values for align
      * @member {String[]} alignValues=['bc-tc','tc-bc','tl-tr','tr-tl','cl-cr','cr-cl',null]

package/src/plugin/PrefixField.mjs

@@ -1,4 +1,4 @@
-import Base from './Base.mjs';
+import Plugin from './Base.mjs';
 
 /**
  * @class Neo.plugin.PrefixField
@@ -17,7 +17,7 @@ import Base from './Base.mjs';
  *         }]
  *     }
  */
-class PrefixField extends Base {
+class PrefixField extends Plugin {
     static config = {
         /**
          * @member {String} className='Neo.plugin.PrefixField'

package/src/plugin/Resizable.mjs

@@ -1,12 +1,12 @@
-import Base     from './Base.mjs';
 import DragZone from '../draggable/DragZone.mjs';
 import NeoArray from '../util/Array.mjs';
+import Plugin   from './Base.mjs';
 
 /**
  * @class Neo.plugin.Resizable
  * @extends Neo.plugin.Base
  */
-class Resizable extends Base {
+class Resizable extends Plugin {
     /**
      * Resize cursor styles use north, south based names, so we need a mapping.
      * The order has to match the static positions array.
@@ -164,11 +164,7 @@ class Resizable extends Base {
          * @member {Object} targetNode=null
          * @protected
          */
-        targetNode: null,
-        /**
-         * @member {Number|null} windowId_=null
-         */
-        windowId_: null
+        targetNode: null
     }
 
     /**

package/src/plugin/Responsive.mjs

@@ -1,10 +1,10 @@
-import BasePlugin from './Base.mjs';
+import Plugin from './Base.mjs';
 
 /**
  * @class Neo.plugin.Responsive
  * @extends Neo.plugin.Base
  */
-class Responsive extends BasePlugin {
+class Responsive extends Plugin {
     static config = {
         /**
          * @member {String} className='Neo.plugin.Responsive'

package/src/selection/Model.mjs

@@ -110,6 +110,9 @@ class Model extends Base {
             NeoArray.remove(itemCollection, item);
 
             if (!silent) {
+                // We need a bigger depth, since grid.Container & table.Container use selection.Model as a  top-level config.
+                // In case the config would get moved to grid.View & table.View, we would not need it.
+                view.updateDepth = -1;
                 view.update();
 
                 me.fire('selectionChange', {
@@ -136,6 +139,9 @@ class Model extends Base {
             });
 
             if (!silent && items.length > 0) {
+                // We need a bigger depth, since grid.Container & table.Container use selection.Model as a  top-level config.
+                // In case the config would get moved to grid.View & table.View, we would not need it.
+                view.updateDepth = -1;
                 view.update()
             }
 
@@ -191,7 +197,11 @@ class Model extends Base {
         }
 
         me.view = component;
-        me.addDomListener()
+        me.addDomListener();
+
+        component.fire('selectionModelChange', {
+            value: me
+        })
     }
 
     /**
@@ -240,7 +250,12 @@ class Model extends Base {
 
             NeoArray.add(itemCollection, items);
 
-            !view.silentSelect && view.update();
+            if (!view.silentSelect) {
+                // We need a bigger depth, since grid.Container & table.Container use selection.Model as a  top-level config.
+                // In case the config would get moved to grid.View & table.View, we would not need it.
+                view.updateDepth = -1;
+                view.update()
+            }
 
             view.onSelect?.(items);
 

package/src/selection/grid/CellColumnModel.mjs

@@ -88,7 +88,7 @@ class CellColumnModel extends CellModel {
             idArray       = ColumnModel.getCellId(data.path).split('__'),
             currentColumn = idArray[2],
             {view}        = me,
-            fields        = view.columns.map(c => c.field),
+            fields        = view.columns.map(c => c.dataField),
             newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
             columnNodeIds, tbodyNode;
 

package/src/selection/grid/CellColumnRowModel.mjs

@@ -88,7 +88,7 @@ class CellColumnRowModel extends CellRowModel {
             idArray       = ColumnModel.getCellId(data.path).split('__'),
             currentColumn = idArray[2],
             {view}        = me,
-            fields        = view.columns.map(c => c.field),
+            fields        = view.columns.map(c => c.dataField),
             newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
             columnNodeIds, tbodyNode;
 

package/src/selection/grid/CellModel.mjs

@@ -87,7 +87,7 @@ class CellModel extends BaseModel {
             {view}        = me,
             idArray       = data.path[0].id.split('__'),
             currentColumn = idArray[2],
-            dataFields    = view.columns.map(c => c.field),
+            dataFields    = view.columns.map(c => c.dataField),
             newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
             id;
 

package/src/selection/grid/ColumnModel.mjs

@@ -72,7 +72,7 @@ class ColumnModel extends BaseModel {
     static getColumnIndex(cellId, columns) {
         let idArray       = cellId.split('__'),
             currentColumn = idArray[2],
-            dataFields    = columns.map(c => c.field);
+            dataFields    = columns.map(c => c.dataField);
 
         return dataFields.indexOf(currentColumn)
     }
@@ -117,7 +117,7 @@ class ColumnModel extends BaseModel {
             idArray       = ColumnModel.getCellId(data.path).split('__'),
             currentColumn = idArray[2],
             {view}        = me,
-            fields        = view.columns.map(c => c.field),
+            fields        = view.columns.map(c => c.dataField),
             newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
             columnNodeIds, id, tbodyNode;
 

package/src/table/Container.mjs

@@ -27,6 +27,11 @@ class Container extends BaseContainer {
          * @member {String[]} baseCls=['neo-table-container']
          */
         baseCls: ['neo-table-container'],
+        /**
+         * true uses table.plugin.CellEditing
+         * @member {Boolean} cellEditing_=false
+         */
+        cellEditing_: false,
         /**
          * Default configs for each column
          * @member {Object} columnDefaults=null
@@ -150,6 +155,30 @@ class Container extends BaseContainer {
         me.createColumns(me.columns)
     }
 
+    /**
+     * Triggered after the cellEditing config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetCellEditing(value, oldValue) {
+        if (value) {
+            import('./plugin/CellEditing.mjs').then(module => {
+                let me                  = this,
+                    {appName, windowId} = me,
+                    plugins             = me.plugins || [];
+
+                plugins.push({
+                    module : module.default,
+                    appName,
+                    windowId
+                });
+
+                me.plugins = plugins
+            })
+        }
+    }
+
     /**
      * Triggered after the columns config got changed
      * @param {Object[]|null} value
@@ -350,9 +379,9 @@ class Container extends BaseContainer {
      * @returns {*}
      */
     createColumns(columns) {
-        let me             = this,
-            columnDefaults = me.columnDefaults,
-            sorters        = me.store?.sorters,
+        let me               = this,
+            {columnDefaults} = me,
+            sorters          = me.store?.sorters,
             renderer;
 
         if (!columns || !columns.length) {

package/src/table/View.mjs

@@ -131,6 +131,7 @@ class View extends Component {
                 }
                 break
             }
+            case 'Date':
             case 'Number':
             case 'String': {
                 rendererOutput = {
@@ -182,10 +183,14 @@ class View extends Component {
     /**
      * @param {Object} opts
      * @param {Object} opts.record
-     * @param {Number} opts.rowIndex
+     * @param {Number} [opts.rowIndex]
      * @returns {Object}
      */
-    createTableRow({record, rowIndex}) {
+    createRow({record, rowIndex}) {
+        if (!Neo.isNumber(rowIndex)) {
+            rowIndex = this.store.indexOf(record)
+        }
+
         let me              = this,
             tableContainer  = me.parent,
             colspan         = record[me.colspanField],
@@ -276,7 +281,7 @@ class View extends Component {
             {selectedRows} = me;
 
         for (; i < amountRows; i++) {
-            rows.push(me.createTableRow({record: inputData[i], rowIndex: i}))
+            rows.push(me.createRow({record: inputData[i], rowIndex: i}))
         }
 
         me.vdom.cn = rows;
@@ -472,7 +477,7 @@ class View extends Component {
 
         if (fieldNames.includes(me.colspanField)) {
             index = me.store.indexOf(record);
-            me.vdom.cn[index] = me.createTableRow({record, rowIndex: index});
+            me.vdom.cn[index] = me.createRow({record, rowIndex: index});
             me.update()
         } else {
             fields.forEach(field => {

package/src/table/header/Toolbar.mjs

@@ -28,7 +28,7 @@ class Toolbar extends BaseToolbar {
          * @member {Object} itemDefaults={ntype : 'table-header-button'}
          */
         itemDefaults: {
-            ntype : 'table-header-button'
+            ntype: 'table-header-button'
         },
         /**
          * @member {Boolean} showHeaderFilters_=false
@@ -143,6 +143,20 @@ class Toolbar extends BaseToolbar {
         me.update()
     }
 
+    /**
+     * @param {String} dataField
+     * @returns {Neo.button.Base|null}
+     */
+    getColumn(dataField) {
+        for (const item of this.items) {
+            if (item.dataField === dataField) {
+                return item
+            }
+        }
+
+        return null
+    }
+
     /**
      * @param {String} dock
      * @returns {String} layoutConfig