neo.mjs 8.0.0 → 8.1.0

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,31 @@ 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 {String} role='columnheader'
+         */
+        role: 'columnheader',
+        /**
+         * @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 +108,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 +258,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 +318,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,83 @@ class Toolbar extends BaseToolbar {
          */
         baseCls: ['neo-grid-header-toolbar', 'neo-toolbar'],
         /**
-         * @member {Object} itemDefaults={ntype:'grid-header-button'}
-         * @protected
+         * @member {Neo.grid.Container|null} gridContainer=null
+         */
+        gridContainer: null,
+        /**
+         * @member {Object} itemDefaults={ntype: 'grid-header-button'}
          */
         itemDefaults: {
             ntype: 'grid-header-button'
+        },
+        /**
+         * @member {String} role='row'
+         */
+        role: 'row',
+        /**
+         * @member {Boolean} showHeaderFilters_=false
+         */
+        showHeaderFilters_: false,
+        /**
+         * @member {Boolean} sortable=true
+         */
+        sortable: true,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {'aria-rowindex': 1, cn: [{cn: []}]}
+    }
+
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+        value && this.passSizeToView()
+    }
+
+    /**
+     * 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,11 +114,13 @@ class Toolbar extends BaseToolbar {
 
         let dockLeftWidth  = 0,
             dockRightWidth = 0,
-            items          = me.items,
+            {items}        = me,
             len            = items.length,
             style;
 
         items.forEach((item, index) => {
+            item.vdom['aria-colindex'] = index + 1; // 1 based
+
             style = item.wrapperStyle;
 
             // todo: only add px if number
@@ -54,7 +129,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 +138,7 @@ class Toolbar extends BaseToolbar {
                 dockLeftWidth += (item.width + 1) // todo: borders fix
             }
 
+            item.sortable = me.sortable;
             item.wrapperStyle = style;
 
             // inverse loop direction
@@ -80,6 +156,37 @@ 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 {Boolean} silent=false
+     * @returns {Promise<void>}
+     */
+    async passSizeToView(silent=false) {
+        let me       = this,
+            rects    = await me.getDomRect(me.items.map(item => item.id)),
+            lastItem = rects[rects.length - 1];
+
+        me.gridContainer.view[silent ? 'setSilent' : 'set']({
+            availableWidth : lastItem.x + lastItem.width - rects[0].x,
+            columnPositions: rects.map(item => ({width: item.width, x: item.x - rects[0].x}))
+        })
+    }
 }
 
 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/layout/Base.mjs

@@ -1,4 +1,4 @@
-import CoreBase from '../core/Base.mjs';
+import Base     from '../core/Base.mjs';
 import NeoArray from '../util/Array.mjs';
 
 /**
@@ -7,7 +7,7 @@ import NeoArray from '../util/Array.mjs';
  * @class Neo.layout.Base
  * @extends Neo.core.Base
  */
-class Base extends CoreBase {
+class Layout extends Base {
     static config = {
         /**
          * @member {String} className='Neo.layout.Base'
@@ -156,4 +156,4 @@ class Base extends CoreBase {
     }
 }
 
-export default Neo.setupClass(Base);
+export default Neo.setupClass(Layout);

package/src/list/Base.mjs

@@ -8,7 +8,7 @@ import Store           from '../data/Store.mjs';
  * @class Neo.list.Base
  * @extends Neo.component.Base
  */
-class Base extends Component {
+class List extends Component {
     static config = {
         /**
          * @member {String} className='Neo.list.Base'
@@ -848,4 +848,4 @@ class Base extends Component {
     }
 }
 
-export default Neo.setupClass(Base);
+export default Neo.setupClass(List);

package/src/list/Circle.mjs

@@ -1,11 +1,11 @@
 import CircleComponent from '../component/Circle.mjs';
-import Component       from './Component.mjs';
+import ComponentList   from './Component.mjs';
 
 /**
  * @class Neo.list.Circle
  * @extends Neo.list.Component
  */
-class Circle extends Component {
+class Circle extends ComponentList {
     static config = {
         /**
          * @member {String} className='Neo.list.Circle'

package/src/list/Color.mjs

@@ -1,10 +1,10 @@
-import Base from './Base.mjs';
+import List from './Base.mjs';
 
 /**
  * @class Neo.list.Color
  * @extends Neo.list.Base
  */
-class Color extends Base {
+class Color extends List {
     static config = {
         /**
          * @member {String} className='Neo.list.Color'