neo.mjs 4.1.0 → 4.1.1

package/src/grid/header/Button.mjs

@@ -1,10 +1,21 @@
 import BaseButton from '../../button/Base.mjs';
+import NeoArray   from '../../util/Array.mjs';
 
 /**
  * @class Neo.grid.header.Button
  * @extends Neo.button.Base
  */
 class Button extends BaseButton {
+    /**
+     * Sort direction when clicking on an unsorted button
+     * @member {String} defaultSortDirection='ASC'
+     */
+    defaultSortDirection = 'ASC'
+    /**
+     * @member {String|null} field=null
+     */
+    field = null
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.grid.header.Button'
@@ -17,10 +28,124 @@ class Button extends BaseButton {
          */
         ntype: 'grid-header-button',
         /**
-         * @member {Array} cls=['neo-grid-header-button']
+         * @member {String[]} cls=['neo-grid-header-button']
+         */
+        cls: ['neo-grid-header-button'],
+        /**
+         * @member {String} iconCls='fa fa-arrow-circle-up'
+         */
+        iconCls: 'fa fa-arrow-circle-up',
+        /**
+         * @member {String} iconPosition='right'
+         */
+        iconPosition: 'right',
+        /**
+         * 'ASC', 'DESC' or null
+         * @member {String|null} isSorted_=null
+         * @protected
          */
-        cls: ['neo-grid-header-button']
+        isSorted_: null
     }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me           = this,
+            domListeners = me.domListeners;
+
+        domListeners.push({
+            click: me.onButtonClick,
+            scope: me
+        })
+
+        me.domListeners = domListeners;
+    }
+
+    /**
+     * Triggered after the isSorted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetIsSorted(value, oldValue) {
+        let me  = this,
+            cls = me.cls;
+
+        switch(value) {
+            case null:
+                NeoArray.add(cls, 'neo-sort-hidden');
+                break;
+            case 'ASC':
+                NeoArray.remove(cls, 'neo-sort-desc');
+                NeoArray.remove(cls, 'neo-sort-hidden');
+                NeoArray.add(cls, 'neo-sort-asc');
+                break;
+            case 'DESC':
+                NeoArray.remove(cls, 'neo-sort-asc');
+                NeoArray.remove(cls, 'neo-sort-hidden');
+                NeoArray.add(cls, 'neo-sort-desc');
+                break;
+        }
+
+        me.cls = cls;
+
+        me.mounted && me.fire('sort', {
+            direction: value,
+            property : me.field
+        });
+    }
+
+    /**
+     * @protected
+     */
+    onButtonClick() {
+        let me = this,
+            map;
+
+        if (me.defaultSortDirection === 'DESC') {
+            map = {
+                ASC : null,
+                DESC: 'ASC',
+                null: 'DESC'
+            };
+        } else {
+            map = {
+                ASC : 'DESC',
+                DESC: null,
+                null: 'ASC'
+            };
+        }
+
+        me.isSorted = map[me.isSorted + ''];
+    }
+
+    /**
+     * @protected
+     */
+    removeSortingCss() {
+        let me  = this,
+            cls = me.cls;
+
+        NeoArray.add(cls, 'neo-sort-hidden');
+
+        me.cls       = cls;
+        me._isSorted = null;
+    }
+
+    /**
+     * @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;
+    }
 }
 
 Neo.applyClassConfig(Button);

package/src/grid/header/Toolbar.mjs

@@ -17,81 +17,69 @@ class Toolbar extends BaseToolbar {
          */
         ntype: 'grid-header-toolbar',
         /**
-         * @member {Array} cls=['neo-grid-header-toolbar']
+         * @member {Array} cls=['neo-grid-header-toolbar','neo-toolbar']
          */
-        cls: ['grid-header-toolbar'],
-        /**
-         * @member {String} _layout='base'
-         * @protected
-         */
-        _layout  : 'base',
+        cls: ['neo-grid-header-toolbar', 'neo-toolbar'],
         /**
          * @member {Object} itemDefaults={ntype:'grid-header-button'}
          * @protected
          */
         itemDefaults: {
             ntype: 'grid-header-button'
-        },
-        /**
-         * @member {Object} _vdom
-         * @protected
-         */
-        _vdom:
-        {cn: [
-            {cls: ['neo-grid-row'], cn: []}
-        ]}
+        }
     }}
 
     /**
-     * @param {Array} items
+     *
      */
-    createItems(items) {
-        let me = this,
-            cn = [],
-            i  = 0,
-            len, vdom;
+    createItems() {
+        let me = this;
+
+        me.itemDefaults.showHeaderFilter = me.showHeaderFilters;
 
         super.createItems();
 
-        items = me.items;
-        len   = items.length;
-        vdom  = me.vdom;
+        let dockLeftWidth  = 0,
+            dockRightWidth = 0,
+            items          = me.items,
+            len            = items.length,
+            vdom           = me.vdom,
+            style;
 
-        for (; i < len; i++) {
-            cn.push(items[i]._vdom = {
-                cls: ['neo-grid-header-cell'],
-                cn : items[i].vdom
-            });
+        items.forEach((item, index) => {
+            style = item.wrapperStyle;
 
-            //items[i].vdom.cls = []; // remove the button cls from the th tag
-        }
+            // todo: only add px if number
+            if (item.maxWidth) {style.maxWidth = item.maxWidth + 'px'}
+            if (item.minWidth) {style.minWidth = item.minWidth + 'px'}
+            if (item.width)    {style.width    = item.width    + 'px'}
 
-        vdom.cn[0].cn = cn;
+            if (item.dock) {
+                item.vdom.cls.push('neo-locked');
 
-        me.vdom = vdom;
-    }
+                if (item.dock === 'left') {
+                    style.left = dockLeftWidth + 'px';
+                }
 
-    /**
-     * @param dock
-     * @returns {String} layoutConfig
-     * @override
-     */
-    getLayoutConfig(dock) {
-        return 'base';
-    }
+                dockLeftWidth += (item.width + 1); // todo: borders fix
+            }
 
-    /**
-     * @returns {Object}
-     */
-    getVdomRoot() {
-        return this.vdom.cn[0];
-    }
+            item.wrapperStyle = style;
 
-    /**
-     * @returns {Object}
-     */
-    getVnodeRoot() {
-        return this.vnode.childNodes[0];
+            // inverse loop direction
+            item = items[len - index -1];
+
+            if (item.dock === 'right') {
+                style = item.wrapperStyle;
+                style.right = dockRightWidth + 'px';
+
+                item.wrapperStyle = style;
+
+                dockRightWidth += (item.width + 1); // todo: borders fix
+            }
+        });
+
+        me.vdom = vdom;
     }
 }
 

package/src/selection/grid/CellColumnModel.mjs

@@ -0,0 +1,122 @@
+import CellModel   from './CellModel.mjs';
+import ColumnModel from './ColumnModel.mjs';
+import VDomUtil    from '../../util/VDom.mjs';
+
+/**
+ * @class Neo.selection.grid.CellColumnModel
+ * @extends Neo.selection.grid.CellModel
+ */
+class CellColumnModel extends CellModel {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.selection.grid.CellColumnModel'
+         * @protected
+         */
+        className: 'Neo.selection.grid.CellColumnModel',
+        /**
+         * @member {String} ntype='selection-grid-cellcolumnmodel'
+         * @protected
+         */
+        ntype: 'selection-grid-cellcolumnmodel',
+        /**
+         * @member {String} cls='neo-selection-cellcolumnmodel'
+         * @protected
+         */
+        cls: 'neo-selection-cellcolumnmodel',
+        /**
+         * @member {String} selectedColumnCellCls='selected-column-cell'
+         * @protected
+         */
+        selectedColumnCellCls: 'selected-column-cell',
+        /**
+         * @member {Array|null} selectedColumnCellIds=null
+         * @protected
+         */
+        selectedColumnCellIds: null
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        this.selectedColumnCellIds = [];
+    }
+
+    /**
+     * @param {Boolean} [silent] true to prevent a vdom update
+     */
+    deselectAllCells(silent) {
+        let me      = this,
+            cellIds = [...me.selectedColumnCellIds],
+            view    = me.view,
+            vdom    = view.vdom;
+
+        cellIds.forEach(cellId => {
+            me.deselect(cellId, true, me.selectedColumnCellIds, me.selectedColumnCellCls);
+        });
+
+        if (!silent) {
+            view.vdom = vdom;
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCellClick(data) {
+        let me   = this,
+            id   = ColumnModel.getCellId(data.path),
+            columnNodeIds, index, tbodyNode;
+
+        if (id) {
+            index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
+            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
+
+            me.deselectAllCells(true);
+            me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
+        }
+
+        super.onCellClick(data);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKeyColumn(data, step) {
+        let me            = this,
+            idArray       = ColumnModel.getCellId(data.path).split('__'),
+            currentColumn = idArray[2],
+            view          = me.view,
+            dataFields    = view.columns.map(c => c.dataField),
+            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
+            columnNodeIds, tbodyNode;
+
+        while (newIndex < 0) {
+            newIndex += dataFields.length;
+        }
+
+        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+
+        me.deselectAllCells(true);
+        me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
+
+        super.onNavKeyColumn(data, step);
+    }
+
+    /**
+     *
+     */
+    unregister() {
+        this.deselectAllCells();
+        super.unregister();
+    }
+}
+
+Neo.applyClassConfig(CellColumnModel);
+
+export default CellColumnModel;

package/src/selection/grid/CellColumnRowModel.mjs

@@ -0,0 +1,122 @@
+import CellRowModel from './CellRowModel.mjs';
+import ColumnModel  from './ColumnModel.mjs';
+import VDomUtil     from '../../util/VDom.mjs';
+
+/**
+ * @class Neo.selection.grid.CellColumnRowModel
+ * @extends Neo.selection.grid.CellRowModel
+ */
+class CellColumnRowModel extends CellRowModel {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.selection.grid.CellColumnRowModel'
+         * @protected
+         */
+        className: 'Neo.selection.grid.CellColumnRowModel',
+        /**
+         * @member {String} ntype='selection-grid-cellcolumnrowmodel'
+         * @protected
+         */
+        ntype: 'selection-grid-cellcolumnrowmodel',
+        /**
+         * @member {String} cls='neo-selection-cellcolumnrowmodel'
+         * @protected
+         */
+        cls: 'neo-selection-cellcolumnrowmodel',
+        /**
+         * @member {String} selectedColumnCellCls='selected-column-cell'
+         * @protected
+         */
+        selectedColumnCellCls: 'selected-column-cell',
+        /**
+         * @member {Array|null} selectedColumnCellIds=null
+         * @protected
+         */
+        selectedColumnCellIds: null
+    }}
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        this.selectedColumnCellIds = [];
+    }
+
+    /**
+     * @param {Boolean} [silent] true to prevent a vdom update
+     */
+    deselectAllCells(silent) {
+        let me      = this,
+            cellIds = [...me.selectedColumnCellIds],
+            view    = me.view,
+            vdom    = view.vdom;
+
+        cellIds.forEach(cellId => {
+            me.deselect(cellId, true, me.selectedColumnCellIds, me.selectedColumnCellCls);
+        });
+
+        if (!silent) {
+            view.vdom = vdom;
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCellClick(data) {
+        let me   = this,
+            id   = ColumnModel.getCellId(data.path),
+            columnNodeIds, index, tbodyNode;
+
+        if (id) {
+            index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
+            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
+
+            me.deselectAllCells(true);
+            me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
+        }
+
+        super.onCellClick(data);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKeyColumn(data, step) {
+        let me            = this,
+            idArray       = ColumnModel.getCellId(data.path).split('__'),
+            currentColumn = idArray[2],
+            view          = me.view,
+            dataFields    = view.columns.map(c => c.dataField),
+            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
+            columnNodeIds, tbodyNode;
+
+        while (newIndex < 0) {
+            newIndex += dataFields.length;
+        }
+
+        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+
+        me.deselectAllCells(true);
+        me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
+
+        super.onNavKeyColumn(data, step);
+    }
+
+    /**
+     *
+     */
+    unregister() {
+        this.deselectAllCells();
+        super.unregister();
+    }
+}
+
+Neo.applyClassConfig(CellColumnRowModel);
+
+export default CellColumnRowModel;

package/src/selection/grid/CellModel.mjs

@@ -0,0 +1,184 @@
+import Model from '../Model.mjs';
+
+/**
+ * @class Neo.selection.grid.CellModel
+ * @extends Neo.selection.Model
+ */
+class CellModel extends Model {
+    static getConfig() {return {
+        /**
+         * @member {String} className='Neo.selection.grid.CellModel'
+         * @protected
+         */
+        className: 'Neo.selection.grid.CellModel',
+        /**
+         * @member {String} ntype='selection-grid-cellmodel'
+         * @protected
+         */
+        ntype: 'selection-grid-cellmodel',
+        /**
+         * @member {String} cls='selection-cellmodel'
+         * @protected
+         */
+        cls: 'neo-selection-cellmodel'
+    }}
+
+    /**
+     *
+     */
+    addDomListener() {
+        let me           = this,
+            view         = me.view,
+            domListeners = view.domListeners;
+
+        domListeners.push({
+            click   : me.onCellClick,
+            delegate: '.neo-grid-cell',
+            scope   : me
+        });
+
+        view.domListeners = domListeners;
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onCellClick(data) {
+        let me   = this,
+            id   = null,
+            path = data.path,
+            i    = 0,
+            len  = path.length;
+
+        for (; i < len; i++) {
+            if (path[i].tagName === 'td') {
+                id = path[i].id;
+                break;
+            }
+        }
+
+        if (id) {
+            me.toggleSelection(id);
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownDown(data) {
+        this.onNavKeyRow(data, 1);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownLeft(data) {
+        this.onNavKeyColumn(data, -1);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownRight(data) {
+        this.onNavKeyColumn(data, 1);
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onKeyDownUp(data) {
+        this.onNavKeyRow(data, -1);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKeyColumn(data, step) {
+        let me            = this,
+            view          = me.view,
+            idArray       = data.path[0].id.split('__'),
+            currentColumn = idArray[2],
+            dataFields    = view.columns.map(c => c.dataField),
+            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
+            id;
+
+        while (newIndex < 0) {
+            newIndex += dataFields.length;
+        }
+
+        idArray[2] = dataFields[newIndex];
+        id = idArray.join('__');
+
+        me.select(id);
+        view.focus(id);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKeyRow(data, step) {
+        let me       = this,
+            view     = me.view,
+            store    = view.store,
+            idArray  = data.path[0].id.split('__'),
+            recordId = idArray[1],
+            newIndex = (store.indexOf(recordId) + step) % store.getCount(),
+            id;
+
+        while (newIndex < 0) {
+            newIndex += store.getCount();
+        }
+
+        idArray[1] = store.getKeyAt(newIndex);
+        id = idArray.join('__');
+
+        me.select(id);
+        view.focus(id);
+    }
+
+    /**
+     * @param {Neo.component.Base} component
+     */
+    register(component) {
+        super.register(component);
+
+        let me   = this,
+            id   = me.id,
+            view = me.view;
+
+        if (view.keys) {
+            view.keys._keys.push(
+                {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
+                {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
+                {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
+                {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            );
+        }
+    }
+
+    /**
+     *
+     */
+    unregister() {
+        let me   = this,
+            id   = me.id,
+            view = me.view;
+
+        if (view.keys) {
+            view.keys.removeKeys([
+                {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
+                {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
+                {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
+                {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            ]);
+        }
+
+        super.unregister();
+    }
+}
+
+Neo.applyClassConfig(CellModel);
+
+export default CellModel;