neo.mjs 8.0.0-beta.2 → 8.0.1

package/src/grid/header/Button.mjs

@@ -1,5 +1,7 @@
-import BaseButton from '../../button/Base.mjs';
-import NeoArray   from '../../util/Array.mjs';
+import BaseButton        from '../../button/Base.mjs';
+import NeoArray          from '../../util/Array.mjs';
+import TextField         from '../../form/field/Text.mjs';
+import {resolveCallback} from '../../util/Function.mjs';
 
 /**
  * @class Neo.grid.header.Button
@@ -8,7 +10,7 @@ import NeoArray   from '../../util/Array.mjs';
 class Button extends BaseButton {
     /**
      * Valid values for align
-     * @member {String[]} cellAlignValues: ['left', 'center', 'right']
+     * @member {String[]} cellAlignValues: ['left','center','right']
      * @protected
      * @static
      */
@@ -30,10 +32,36 @@ class Button extends BaseButton {
          */
         baseCls: ['neo-grid-header-button'],
         /**
-         * Alignment of the matching table cells. Valid values are left, center, right
+         * Alignment of the matching grid cells. Valid values are left, center, right
          * @member {String} cellAlign_='left'
          */
         cellAlign_: 'left',
+        /**
+         * @member {String|null} dataField=null
+         */
+        dataField: null,
+        /**
+         * Sort direction when clicking on an unsorted button
+         * @member {String} defaultSortDirection='ASC'
+         */
+        defaultSortDirection: 'ASC',
+        /**
+         * @member {Boolean} draggable_=true
+         */
+        draggable_: true,
+        /**
+         * @member {Object} editorConfig=null
+         */
+        editorConfig: null,
+        /**
+         * @member {Object} filterConfig=null
+         */
+        filterConfig: null,
+        /**
+         * @member {Neo.form.field.Base|null} filterField=null
+         * @protected
+         */
+        filterField: null,
         /**
          * @member {String} iconCls='fa fa-arrow-circle-up'
          */
@@ -47,19 +75,27 @@ class Button extends BaseButton {
          * @member {String|null} isSorted_=null
          * @protected
          */
-        isSorted_: null
+        isSorted_: null,
+        /**
+         * @member {Function|String|null} renderer_='cellRenderer'
+         */
+        renderer_: 'cellRenderer',
+        /**
+         * Scope to execute the column renderer.
+         * Defaults to the matching grid.Container
+         * @member {Neo.core.Base|null} rendererScope=null
+         */
+        rendererScope: null,
+        /**
+         * @member {Boolean} showHeaderFilter_=false
+         */
+        showHeaderFilter_: false,
+        /**
+         * @member {Boolean} sortable_=true
+         */
+        sortable_: true
     }
 
-    /**
-     * Sort direction when clicking on an unsorted button
-     * @member {String} defaultSortDirection='ASC'
-     */
-    defaultSortDirection = 'ASC'
-    /**
-     * @member {String|null} field=null
-     */
-    field = null
-
     /**
      * @param {Object} config
      */
@@ -68,46 +104,146 @@ class Button extends BaseButton {
 
         let me = this;
 
-        me.addDomListeners({
-            click: me.onButtonClick,
-            scope: me
+        me.draggable && me.addDomListeners({
+            dragend  : me.onDragEnd,
+            dragenter: me.onDragEnter,
+            dragleave: me.onDragLeave,
+            dragover : me.onDragOver,
+            dragstart: me.onDragStart,
+            drop     : me.onDrop,
+            scope    : me
         })
     }
 
     /**
-     * Triggered after the isSorted config got changed
+     * Triggered after the draggable config got changed
      * @param {Boolean} value
      * @param {Boolean} oldValue
      * @protected
      */
+    afterSetDraggable(value, oldValue) {
+        let me = this;
+
+        if (value === true) {
+            me.getVdomRoot().draggable = true
+        } else {
+            delete me.getVdomRoot().draggable
+        }
+
+        me.update()
+    }
+
+    /**
+     * Triggered after the isSorted config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
     afterSetIsSorted(value, oldValue) {
-        let me    = this,
-            {cls} = me;
+        let me        = this,
+            {cls}     = me,
+            container = me.up('grid-container');
 
         switch(value) {
             case null:
                 NeoArray.add(cls, 'neo-sort-hidden');
-                break;
+                break
             case 'ASC':
                 NeoArray.remove(cls, 'neo-sort-desc');
                 NeoArray.remove(cls, 'neo-sort-hidden');
                 NeoArray.add(cls, 'neo-sort-asc');
-                break;
+                break
             case 'DESC':
                 NeoArray.remove(cls, 'neo-sort-asc');
                 NeoArray.remove(cls, 'neo-sort-hidden');
                 NeoArray.add(cls, 'neo-sort-desc');
-                break;
+                break
         }
 
         me.cls = cls;
 
+        // testing check until all example grids have a store
+        if (!container || !container.store) {
+            return
+        }
+
         me.mounted && me.fire('sort', {
             direction: value,
-            property : me.field
+            property : me.dataField
         })
     }
 
+    /**
+     * Triggered after the showHeaderFilter config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowHeaderFilter(value, oldValue) {
+        let me = this;
+
+        if (value) {
+            if (!me.filterField) {
+                me.filterField = Neo.create({
+                    module   : TextField,
+                    appName  : me.appName,
+                    flag     : 'filter-field',
+                    hideLabel: true,
+                    parentId : me.id,
+                    style    : {marginLeft: '.5em', marginRight: '.5em'},
+                    windowId : me.windowId,
+
+                    listeners: {
+                        change        : me.changeFilterValue,
+                        operatorChange: me.changeFilterOperator,
+                        scope         : me
+                    },
+
+                    ...me.editorConfig
+                });
+
+                me.vdom.cn.push(me.filterField.createVdomReference())
+            } else {
+                delete me.filterField.vdom.removeDom
+            }
+        } else if (me.filterField) {
+            me.filterField.vdom.removeDom = true
+        }
+
+        me.updateDepth = 2;
+        me.update()
+    }
+
+    /**
+     * Triggered after the sortable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetSortable(value, oldValue) {
+        let me    = this,
+            {cls} = me;
+
+        if (value === true) {
+            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
+            })
+        }
+
+        me.cls = cls;
+        me.update()
+    }
+
     /**
      * Triggered before the cellAlign config gets changed
      * @param {String} value
@@ -118,6 +254,39 @@ class Button extends BaseButton {
         return this.beforeSetEnumValue(value, oldValue, 'cellAlign', 'cellAlignValues')
     }
 
+    /**
+     * Triggered before the renderer config gets changed
+     * @param {Function|String|null} value
+     * @param {Function|String|null} oldValue
+     * @protected
+     */
+    beforeSetRenderer(value, oldValue) {
+        return resolveCallback(value, this).fn
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Neo.button.Base} data.column
+     * @param {String} data.dataField
+     * @param {Neo.grid.Container} data.gridContainer
+     * @param {Number} data.index
+     * @param {Object} data.record
+     * @param {Number|String} data.value
+     * @returns {*}
+     */
+    cellRenderer(data) {
+        return data.value
+    }
+
+    /**
+     *
+     */
+    destroy(...args) {
+        this.filterField?.destroy();
+
+        super.destroy(...args)
+    }
+
     /**
      * @protected
      */
@@ -145,26 +314,148 @@ class Button extends BaseButton {
     /**
      * @protected
      */
-    removeSortingCss() {
+    onDragEnd() {
+        let me      = this,
+            {style} = me;
+
+        delete style.opacity;
+        me.style = style
+    }
+
+    /**
+     * @protected
+     */
+    onDragEnter() {
         let me    = this,
             {cls} = me;
 
-        NeoArray.add(cls, 'neo-sort-hidden');
+        NeoArray.add(cls, 'neo-drag-over');
+        me.cls = cls
+    }
 
-        me.cls       = cls;
-        me._isSorted = null
+    /**
+     * @protected
+     */
+    onDragLeave() {
+        let me    = this,
+            {cls} = me;
+
+        NeoArray.remove(cls, 'neo-drag-over');
+        me.cls = cls
+    }
+
+    /**
+     * @param {Object} event
+     */
+    onDragOver(event) {
+        //console.log('onDragOver', event);
+    }
+
+    /**
+     * @protected
+     */
+    onDragStart() {
+        let me      = this,
+            {style} = me;
+
+        style.opacity = 0.4;
+        me.style = style
     }
 
     /**
      * @param {Object} data
-     * @param {String} data.field
-     * @param {Number} data.index
-     * @param {Object} data.record
-     * @param {Number|String} data.value
-     * @returns {*}
      */
-    renderer(data) {
-        return data.value
+    onDrop(data) {
+        let me             = this,
+            headerToolbar  = me.parent,
+            {style}        = me,
+            gridContainer  = headerToolbar.parent;
+
+        me.onDragLeave();
+        headerToolbar.switchItems(me.id, data.srcId);
+        gridContainer.createViewData(gridContainer.store.data);
+
+        style.opacity = 1;
+        me.style = style
+    }
+
+    /**
+     * @param {Object} data
+     */
+    changeFilterOperator(data) {
+        let me            = this,
+            gridContainer = me.up('grid-container'),
+            store         = gridContainer?.store,
+            operator      = data.value,
+            filter, filters;
+
+        if (store) {
+            filter = store.getFilter(me.dataField);
+
+            if (!filter) {
+                filters = store.filters;
+
+                filters.push({
+                    property: me.dataField,
+                    operator,
+                    value   : null,
+                    ...me.filterConfig
+                });
+
+                store.filters = filters
+            } else {
+                filter.operator = operator
+            }
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    changeFilterValue(data) {
+        let me            = this,
+            gridContainer = me.up('grid-container'),
+            store         = gridContainer?.store,
+            {value}       = data,
+            field, filter, filters, model;
+
+        if (store) {
+            filter = store.getFilter(me.dataField);
+            model  = store.model;
+            field  = model && model.getField(me.dataField);
+
+            if (value && field.type.toLowerCase() === 'date') {
+                value = new Date(value)
+            }
+
+            if (!filter) {
+                filters = store.filters;
+
+                filters.push({
+                    property: me.dataField,
+                    operator: 'like',
+                    value,
+                    ...me.filterConfig
+                });
+
+                store.filters = filters
+            } else {
+                filter.value = value
+            }
+        }
+    }
+
+    /**
+     * @protected
+     */
+    removeSortingCss() {
+        let me    = this,
+            {cls} = me;
+
+        NeoArray.add(cls, 'neo-sort-hidden');
+
+        me.cls       = cls;
+        me._isSorted = null
     }
 }
 

package/src/grid/header/Toolbar.mjs

@@ -1,4 +1,5 @@
 import BaseToolbar from '../../toolbar/Base.mjs';
+import NeoArray    from '../../util/Array.mjs';
 
 /**
  * @class Neo.grid.header.Toolbar
@@ -21,11 +22,59 @@ class Toolbar extends BaseToolbar {
          */
         baseCls: ['neo-grid-header-toolbar', 'neo-toolbar'],
         /**
-         * @member {Object} itemDefaults={ntype:'grid-header-button'}
-         * @protected
+         * @member {Object} itemDefaults={ntype: 'grid-header-button'}
          */
         itemDefaults: {
             ntype: 'grid-header-button'
+        },
+        /**
+         * @member {Boolean} showHeaderFilters_=false
+         */
+        showHeaderFilters_: false,
+        /**
+         * @member {Boolean} sortable=true
+         */
+        sortable: true
+    }
+
+    /**
+     * Triggered after the showHeaderFilters config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowHeaderFilters(value, oldValue) {
+        if (oldValue !== undefined) {
+            let me = this;
+
+            me.items.forEach(item => {
+                item.setSilent({
+                    showHeaderFilter: value
+                })
+            });
+
+            me.updateDepth = -1; // filters can be deeply nested
+            me.update()
+        }
+    }
+
+    /**
+     * Triggered after the sortable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetSortable(value, oldValue) {
+        if (oldValue !== undefined) {
+            let me = this;
+
+            me.items.forEach(item => {
+                item.setSilent({
+                    sortable: value
+                })
+            });
+
+            me.update()
         }
     }
 
@@ -41,7 +90,7 @@ class Toolbar extends BaseToolbar {
 
         let dockLeftWidth  = 0,
             dockRightWidth = 0,
-            items          = me.items,
+            {items}        = me,
             len            = items.length,
             style;
 
@@ -54,7 +103,7 @@ class Toolbar extends BaseToolbar {
             if (item.width)    {style.width    = item.width    + 'px'}
 
             if (item.dock) {
-                item.vdom.cls.push('neo-locked');
+                NeoArray.add(item.vdom.cls, 'neo-locked');
 
                 if (item.dock === 'left') {
                     style.left = dockLeftWidth + 'px'
@@ -63,6 +112,7 @@ class Toolbar extends BaseToolbar {
                 dockLeftWidth += (item.width + 1) // todo: borders fix
             }
 
+            item.sortable = me.sortable;
             item.wrapperStyle = style;
 
             // inverse loop direction
@@ -80,6 +130,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
+    }
 }
 
 export default Neo.setupClass(Toolbar);

package/src/grid/plugin/CellEditing.mjs

@@ -0,0 +1,30 @@
+import BaseCellEditing from '../../table/plugin/CellEditing.mjs';
+
+/**
+ * @class Neo.grid.plugin.CellEditing
+ * @extends Neo.table.plugin.CellEditing
+ */
+class CellEditing extends BaseCellEditing {
+    static config = {
+        /**
+         * @member {String} className='Neo.grid.plugin.CellEditing'
+         * @protected
+         */
+        className: 'Neo.grid.plugin.CellEditing',
+        /**
+         * @member {String} ntype='plugin-grid-cell-editing'
+         * @protected
+         */
+        ntype: 'plugin-grid-cell-editing',
+        /**
+         * @member {String} cellCls='neo-grid-cell'
+         */
+        cellCls: 'neo-grid-cell',
+        /**
+         * @member {String[]} editorCls=['neo-grid-editor']
+         */
+        editorCls: ['neo-grid-editor']
+    }
+}
+
+export default Neo.setupClass(CellEditing);

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/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/plugin/Base.mjs

@@ -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
      */

package/src/plugin/Resizable.mjs

@@ -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/selection/Model.mjs

@@ -191,7 +191,11 @@ class Model extends Base {
         }
 
         me.view = component;
-        me.addDomListener()
+        me.addDomListener();
+
+        component.fire('selectionModelChange', {
+            value: me
+        })
     }
 
     /**

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;