neo.mjs 4.0.94 → 4.1.2

package/resources/scss/src/grid/header/Button.scss

@@ -1,16 +1,76 @@
 .neo-grid-header-button {
-    background-color: #323232;
+    align-items     : center;
+    background-color: v(grid-header-button-background-color);
+    background-image: v(grid-header-button-background-image);
     border-width    : 0;
-    box-sizing      : border-box;
-    color           : #bbb;
+    color           : v(grid-header-button-color);
     cursor          : pointer;
+    display         : flex;
+    flex-direction  : row;
+    flex-shrink     : 0;
     font-size       : 13px;
     font-weight     : 600;
+    height          : 29px; // Webkit => Safari can not handle 100%
+    justify-content : flex-end;
     margin          : 0;
     padding         : 7px 10px 6px;
-    text-align      : left;
     white-space     : nowrap;
-    width           : 100%;
 
-    background-image: linear-gradient(#3c3f41, #323232);
-}
+    &:not(:last-child) {
+        border-right: 1px solid v(grid-container-border-color);
+    }
+
+    &.neo-locked { // todo: for testing, will get removed once the header toolbar is outside of the scroll region
+        position: sticky;
+        top     : 0;
+        z-index : 5001;
+    }
+
+    &.neo-drag-over {
+        background-image: linear-gradient(green, darkgreen);;
+    }
+
+    &.neo-sort-asc, &.neo-sort-desc {
+        .neo-button-glyph {
+            opacity: 1;
+        }
+    }
+
+    &.neo-sort-hidden {
+        .neo-button-glyph {
+            opacity: 0;
+        }
+    }
+
+    &.neo-sort-desc {
+        .neo-button-glyph {
+            transform: rotate(180deg);
+        }
+    }
+
+    &:focus {
+        outline : 0;
+    }
+
+    &.icon-right {
+        flex-direction: row-reverse;
+
+        .neo-button-glyph {
+            margin: 0 0 0 6px;
+        }
+    }
+
+    .neo-button-glyph {
+        color         : v(grid-header-button-glyph-color);
+        font-size     : 12px;
+        margin        : 0 6px 0 0;
+        opacity       : 0;
+        pointer-events: none;
+        transition    : opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
+        will-change   : opacity, transform;
+    }
+
+    .neo-button-text {
+        pointer-events: none;
+    }
+}

package/resources/scss/src/grid/header/Toolbar.scss

@@ -1,3 +1,7 @@
 .neo-grid-header-toolbar {
-
-}
+    border-bottom: 2px solid v(grid-container-border-color);
+    border-top   : 1px solid v(grid-container-border-color);
+    padding      : 0;
+    position     : sticky;
+    top          : 0;
+}

package/resources/scss/src/table/View.scss

@@ -59,8 +59,8 @@
 .neo-selection-cellcolumnmodel,
 .neo-selection-cellcolumnrowmodel,
 .neo-selection-cellmodel,
-.neo-selection-columnmodel,
 .neo-selection-cellrowmodel,
+.neo-selection-columnmodel,
 .neo-selection-rowmodel {
     .neo-table-row {
         &:focus {
@@ -72,4 +72,4 @@
             }
         }
     }
-}
+}

package/resources/scss/theme-dark/grid/Container.scss

@@ -0,0 +1,17 @@
+$neoMap: map-merge($neoMap, (
+    'grid-container-border-color'              : #2b2b2b,
+    'grid-container-cell-background-color'     : #3c3f41,
+    'grid-container-cell-background-color-even': #323232,
+    'grid-container-color'                     : #bbb,
+    'grid-container-header-cell-border-bottom' : 2px solid #2b2b2b
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark { // .neo-grid-container
+        --grid-container-border-color              : #{neo(grid-container-border-color)};
+        --grid-container-cell-background-color     : #{neo(grid-container-cell-background-color)};
+        --grid-container-cell-background-color-even: #{neo(grid-container-cell-background-color-even)};
+        --grid-container-color                     : #{neo(grid-container-color)};
+        --grid-container-header-cell-border-bottom : #{neo(grid-container-header-cell-border-bottom)};
+    }
+}

package/resources/scss/theme-dark/grid/View.scss

@@ -0,0 +1,29 @@
+$neoMap: map-merge($neoMap, (
+    'grid-cell-background-color-hover'                    : #54595c,
+    'grid-cellmodel-selected-cell-background-color'       : #64B5F6,
+    'grid-cellmodel-selected-cell-color'                  : #2b2b2b,
+    'grid-cellmodel-selected-column-cell-background-color': #4f558a,
+    'grid-cellmodel-selected-column-cell-color'           : #bbb,
+    'grid-cellrowmodel-selected-cell-background-color'    : #64B5F6,
+    'grid-cellrowmodel-selected-cell-color'               : #2b2b2b,
+    'grid-cellrowmodel-selected-row-cell-background-color': #4f558a,
+    'grid-cellrowmodel-selected-row-cell-color'           : #bbb,
+    'grid-rowmodel-selected-cell-background-color'        : #64B5F6,
+    'grid-rowmodel-selected-cell-color'                   : #2b2b2b
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark { // .neo-grid-view
+        --grid-cell-background-color-hover                    : #{neo(grid-cell-background-color-hover)};
+        --grid-cellmodel-selected-cell-background-color       : #{neo(grid-cellmodel-selected-cell-background-color)};
+        --grid-cellmodel-selected-cell-color                  : #{neo(grid-cellmodel-selected-cell-color)};
+        --grid-cellmodel-selected-column-cell-background-color: #{neo(grid-cellmodel-selected-column-cell-background-color)};
+        --grid-cellmodel-selected-column-cell-color           : #{neo(grid-cellmodel-selected-column-cell-color)};
+        --grid-cellrowmodel-selected-cell-background-color    : #{neo(grid-cellrowmodel-selected-cell-background-color)};
+        --grid-cellrowmodel-selected-cell-color               : #{neo(grid-cellrowmodel-selected-cell-color)};
+        --grid-cellrowmodel-selected-row-cell-background-color: #{neo(grid-cellrowmodel-selected-row-cell-background-color)};
+        --grid-cellrowmodel-selected-row-cell-color           : #{neo(grid-cellrowmodel-selected-row-cell-color)};
+        --grid-rowmodel-selected-cell-background-color        : #{neo(grid-rowmodel-selected-cell-background-color)};
+        --grid-rowmodel-selected-cell-color                   : #{neo(grid-rowmodel-selected-cell-color)};
+    }
+}

package/resources/scss/theme-dark/grid/_all.scss

@@ -0,0 +1,3 @@
+@import "header/all";
+@import "Container";
+@import "View";

package/resources/scss/theme-dark/grid/header/Button.scss

@@ -0,0 +1,15 @@
+$neoMap: map-merge($neoMap, (
+    'grid-header-button-background-color': #323232,
+    'grid-header-button-background-image': linear-gradient(#3c3f41, #323232),
+    'grid-header-button-color'           : #bbb,
+    'grid-header-button-glyph-color'     : #bbb
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-dark { // .neo-grid-header
+        --grid-header-button-background-color: #{neo(grid-header-button-background-color)};
+        --grid-header-button-background-image: #{neo(grid-header-button-background-image)};
+        --grid-header-button-color           : #{neo(grid-header-button-color)};
+        --grid-header-button-glyph-color     : #{neo(grid-header-button-glyph-color)};
+    }
+}

package/resources/scss/theme-dark/grid/header/_all.scss

@@ -0,0 +1,2 @@
+@import "Button";
+@import "Toolbar";

package/resources/scss/theme-light/grid/Container.scss

@@ -0,0 +1,17 @@
+$neoMap: map-merge($neoMap, (
+    'grid-container-border-color'              : #ddd,
+    'grid-container-cell-background-color'     : #fff,
+    'grid-container-cell-background-color-even': #f2f2f2,
+    'grid-container-color'                     : #666,
+    'grid-container-header-cell-border-bottom' : 1px solid #ddd
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-light { // .neo-grid-container
+        --grid-container-border-color              : #{neo(grid-container-border-color)};
+        --grid-container-cell-background-color     : #{neo(grid-container-cell-background-color)};
+        --grid-container-cell-background-color-even: #{neo(grid-container-cell-background-color-even)};
+        --grid-container-color                     : #{neo(grid-container-color)};
+        --grid-container-header-cell-border-bottom : #{neo(grid-container-header-cell-border-bottom)};
+    }
+}

package/resources/scss/theme-light/grid/View.scss

@@ -0,0 +1,29 @@
+$neoMap: map-merge($neoMap, (
+        'grid-cell-background-color-hover'                    : lighten(#33343d, 70%),
+        'grid-cellmodel-selected-cell-background-color'       : lighten(#64B5F6, 22%),
+        'grid-cellmodel-selected-cell-color'                  : #2b2b2b,
+        'grid-cellmodel-selected-column-cell-background-color': lighten(#4f558a, 52%),
+        'grid-cellmodel-selected-column-cell-color'           : #2b2b2b,
+        'grid-cellrowmodel-selected-cell-background-color'    : lighten(#64B5F6, 22%),
+        'grid-cellrowmodel-selected-cell-color'               : #2b2b2b,
+        'grid-cellrowmodel-selected-row-cell-background-color': lighten(#4f558a, 52%),
+        'grid-cellrowmodel-selected-row-cell-color'           : #2b2b2b,
+        'grid-rowmodel-selected-cell-background-color'        : lighten(#64B5F6, 22%),
+        'grid-rowmodel-selected-cell-color'                   : #2b2b2b
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-light { // .neo-grid-view
+        --grid-cell-background-color-hover                    : #{neo(grid-cell-background-color-hover)};
+        --grid-cellmodel-selected-cell-background-color       : #{neo(grid-cellmodel-selected-cell-background-color)};
+        --grid-cellmodel-selected-cell-color                  : #{neo(grid-cellmodel-selected-cell-color)};
+        --grid-cellmodel-selected-column-cell-background-color: #{neo(grid-cellmodel-selected-column-cell-background-color)};
+        --grid-cellmodel-selected-column-cell-color           : #{neo(grid-cellmodel-selected-column-cell-color)};
+        --grid-cellrowmodel-selected-cell-background-color    : #{neo(grid-cellrowmodel-selected-cell-background-color)};
+        --grid-cellrowmodel-selected-cell-color               : #{neo(grid-cellrowmodel-selected-cell-color)};
+        --grid-cellrowmodel-selected-row-cell-background-color: #{neo(grid-cellrowmodel-selected-row-cell-background-color)};
+        --grid-cellrowmodel-selected-row-cell-color           : #{neo(grid-cellrowmodel-selected-row-cell-color)};
+        --grid-rowmodel-selected-cell-background-color        : #{neo(grid-rowmodel-selected-cell-background-color)};
+        --grid-rowmodel-selected-cell-color                   : #{neo(grid-rowmodel-selected-cell-color)};
+    }
+}

package/resources/scss/theme-light/grid/_all.scss

@@ -0,0 +1,3 @@
+@import "header/all";
+@import "Container";
+@import "View";

package/resources/scss/theme-light/grid/header/Button.scss

@@ -0,0 +1,15 @@
+$neoMap: map-merge($neoMap, (
+    'grid-header-button-background-color': #5d83a7,
+    'grid-header-button-background-image': none,
+    'grid-header-button-color'           : #fff,
+    'grid-header-button-glyph-color'     : #fff
+));
+
+@if $useCssVars == true {
+    :root .neo-theme-light { // .neo-grid-header-button
+        --grid-header-button-background-color: #{neo(grid-header-button-background-color)};
+        --grid-header-button-background-image: #{neo(grid-header-button-background-image)};
+        --grid-header-button-color           : #{neo(grid-header-button-color)};
+        --grid-header-button-glyph-color     : #{neo(grid-header-button-glyph-color)};
+    }
+}

package/resources/scss/theme-light/grid/header/_all.scss

@@ -0,0 +1,2 @@
+@import "Button";
+@import "Toolbar";

package/src/grid/Container.mjs

@@ -1,10 +1,35 @@
-import BaseContainer from '../container/Base.mjs';
+import BaseContainer   from '../container/Base.mjs';
+import ClassSystemUtil from '../util/ClassSystem.mjs';
+import RowModel        from '../selection/grid/RowModel.mjs';
+import Store           from '../data/Store.mjs';
+import View            from './View.mjs';
+import * as header     from './header/_export.mjs';
 
 /**
  * @class Neo.grid.Container
  * @extends Neo.container.Base
  */
 class Container extends BaseContainer {
+    /**
+     * Configs for Neo.grid.header.Toolbar
+     * @member {Object|null} [headerToolbarConfig=null]
+     */
+    headerToolbarConfig = null
+    /**
+     * @member {String|null} headerToolbarId_=null
+     */
+    headerToolbarId = null
+    /**
+     * Configs for Neo.grid.View
+     * @member {Object|null} [viewConfig=null]
+     */
+    viewConfig = null
+    /**
+     * @member {String|null} viewId_=null
+     * @protected
+     */
+    viewId = null
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.grid.Container'
@@ -17,130 +42,183 @@ class Container extends BaseContainer {
          */
         ntype: 'grid-container',
         /**
-         * todo: testing config, remove when Stores are ready
-         * @member {Number} amountRows=20
+         * @member {String[]} cls=['neo-grid-container']
          */
-        amountRows: 20,
+        cls: ['neo-grid-container'],
         /**
-         * @member {Array} cls=['neo-grid-container']
+         * @member {Object[]} columns_=[]
          */
-        cls: ['neo-grid-container'],
+        columns_: [],
         /**
-         * @member {Array} columns=[]
+         * Additional used keys for the selection model
+         * @member {Object} keys={}
          */
-        columns: [],
+        keys: {},
         /**
-         * @member {String} _layout='base'
+         * @member {String} layout='base'
          */
-        _layout: 'base',
+        layout: 'base',
         /**
-         * @member {Array} _items
+         * @member {Neo.selection.Model} selectionModel_=null
          */
-        _items: [
-            {
-                ntype: 'grid-header-toolbar'
-            },
-            {
-                ntype: 'grid-view'
-            }/*,
-            {
-                ntype: 'component',
-                cls  : ['neo-grid-y-scroller'],
-                style: {
-                    height: 'calc(100% - 32px)',
-                    top   : '32px'
-                },
-                vdom: {
-                    cn: [{
-                        height: 800
-                    }]
-                }
-            }*/
-        ],
+        selectionModel_: null,
+        /**
+         * @member {Neo.data.Store} store_=null
+         */
+        store_: null,
         /**
-         * @member {Object} _vdom
+         * @member {Object} _vdom={cls:['neo-grid-wrapper'],cn:[{cn:[]}]}
          */
         _vdom:
-        {style: {height: '300px', width: '100%'}, cn: [
-            {cls: ['neo-grid-container'], cn: []}
+        {cls: ['neo-grid-wrapper'], cn: [
+            {cn: []}
         ]}
     }}
 
-    get columns() {
-        return this._columns;
-    }
-    set columns(value) {
-        this._columns = this.createColumns(value); // todo: beforeSetColumns
-    }
-
     /**
      * @param {Object} config
      */
     construct(config) {
         super.construct(config);
 
-        this.createRandomViewData(this.amountRows);
+        let me = this;
+
+        me.headerToolbarId = Neo.getId('grid-header-toolbar');
+        me.viewId          = Neo.getId('grid-view');
+
+        me.items = [{
+            module           : header.Toolbar,
+            id               : me.headerToolbarId,
+            showHeaderFilters: me.showHeaderFilters,
+            ...me.headerToolbarConfig
+        }, {
+            module     : View,
+            containerId: me.id,
+            id         : me.viewId,
+            store      : me.store,
+            ...me.viewConfig
+        }];
+
+        me.vdom.id = me.id + 'wrapper';
+
+        me.createColumns(me.columns);
     }
 
     /**
-     * @param columns
-     * @returns {*}
+     * Triggered after the selectionModel config got changed
+     * @param {Neo.selection.Model} value
+     * @param {Neo.selection.Model} oldValue
+     * @protected
      */
-    createColumns(columns) {
-        let me = this;
+    afterSetSelectionModel(value, oldValue) {
+        this.rendered && value.register(this);
+    }
 
-        if (!columns || !columns.length) {
-            Neo.logError('Attempting to create a grid.Container without defined columns', me.id);
+    /**
+     * Triggered before the columns config gets changed.
+     * @param {Object[]} value
+     * @param {Object[]} oldValue
+     * @protected
+     */
+    beforeSetColumns(value, oldValue) {
+        if (this.configsApplied) {
+            return this.createColumns(value);
         }
 
-        columns.forEach(function(column) {
-            if (column.locked && !column.width) {
-                Neo.logError('Attempting to create a locked column without a defined width', column, me.id);
-            }
-        });
-
-        me.items[0].items = columns;
+        return value;
+    }
 
-        return columns;
+    /**
+     * Triggered before the selectionModel config gets changed.
+     * @param {Neo.selection.Model} value
+     * @param {Neo.selection.Model} oldValue
+     * @protected
+     */
+    beforeSetSelectionModel(value, oldValue) {
+        oldValue?.destroy();
 
+        return ClassSystemUtil.beforeSetInstance(value, RowModel);
     }
 
     /**
-     * Dummy method until we have a data package in place
-     * @param {Number} amountRows
+     * Triggered before the store config gets changed.
+     * @param {Neo.data.Store} value
+     * @param {Neo.data.Store} oldValue
+     * @protected
      */
-    createRandomViewData(amountRows) {
-        let me      = this,
-            columns = me.items[0].items,
-            i      = 0,
-            data   = [],
-            vdom   = me.items[1].vdom;
+    beforeSetStore(value, oldValue) {
+        oldValue?.destroy();
 
-        for (; i < amountRows; i++) {
-            data.push({
-                cls: ['neo-grid-row'],
-                cn : []
-            });
+        if (value) {
+            let me = this,
+
+                listeners = {
+                    filter      : me.onStoreFilter,
+                    load        : me.onStoreLoad,
+                    recordChange: me.onStoreRecordChange,
+                    scope       : me
+                };
 
-            columns.forEach(function(column, index) {
-                data[i].cn.push({
-                    cls      : ['neo-grid-cell'],
-                    innerHTML: 'Column' + (index + 1) + ' - ' + Math.round(Math.random() / 1.5),
-                    style: {
-                        backgroundColor: Math.round(Math.random() / 1.7) > 0 ? 'brown' : '#3c3f41'
-                    }
+            if (value instanceof Store) {
+                value.on(listeners);
+                value.getCount() > 0 && me.onStoreLoad(value.items);
+            } else {
+                value = ClassSystemUtil.beforeSetInstance(value, Store, {
+                    listeners
                 });
-            });
+            }
+
+            // in case we dynamically change the store, the view needs to get the new reference
+            if (me.view) {
+                me.view.store = value;
+            }
         }
 
-        vdom.cn = data;
+        return value;
+    }
 
-        // we want to ignore id checks inside of the vdom helper
-        if (me.items[1].vnode) {
-            me.syncVdomIds(me.items[1].vnode, vdom);
+    /**
+     * @param {Object[]} columns
+     * @returns {*}
+     */
+    createColumns(columns) {
+        let me             = this,
+            columnDefaults = me.columnDefaults,
+            sorters        = me.store?.sorters;
+
+        if (!columns || !columns.length) {
+            Neo.logError('Attempting to create a grid.Container without defined columns', me.id);
         }
 
-        me.items[1].vdom = vdom;
+        columns.forEach(column => {
+            columnDefaults && Neo.assignDefaults(column, columnDefaults);
+
+            if (column.dock && !column.width) {
+                Neo.logError('Attempting to create a docked column without a defined width', column, me.id);
+            }
+
+            if (sorters?.[0]) {
+                if (column.field === sorters[0].property) {
+                    column.isSorted = sorters[0].direction;
+                }
+            }
+
+            column.listeners = {
+                sort : me.onSortColumn,
+                scope: me
+            };
+        });
+
+        me.items[0].items = columns;
+
+        return columns;
+    }
+
+    /**
+     * @param {Object[]} inputData
+     */
+    createViewData(inputData) {
+        this.getView().createViewData(inputData);
     }
 
     /**
@@ -151,6 +229,20 @@ class Container extends BaseContainer {
         return this.vdom.cn[0];
     }
 
+    /**
+     * @returns {Object[]} The new vdom items root
+     */
+    getVdomItemsRoot() {
+        return this.vdom.cn[0];
+    }
+
+    /**
+     * @returns {Neo.grid.View}
+     */
+    getView() {
+        return Neo.getComponent(this.viewId) || Neo.get(this.viewId);
+    }
+
     /**
      * @override
      * @returns {Neo.vdom.VNode}
@@ -158,6 +250,83 @@ class Container extends BaseContainer {
     getVnodeRoot() {
         return this.vnode.childNodes[0];
     }
+
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+        this.selectionModel?.register(this);
+    }
+
+    /**
+     * @param {Object} opts
+     * @param {String} opts.direction
+     * @param {String} opts.property
+     * @protected
+     */
+    onSortColumn(opts) {
+        let me = this;
+
+        me.store.sort(opts);
+        me.removeSortingCss(opts.property);
+        me.onStoreLoad(me.store.items);
+    }
+
+    /**
+     *
+     */
+    onStoreFilter() {
+        this.onStoreLoad(this.store.items);
+    }
+
+    /**
+     * @param {Object[]} data
+     * @protected
+     */
+    onStoreLoad(data) {
+        let me = this,
+            listenerId;
+
+        if (me.rendered) {
+            me.createViewData(data);
+
+            if (me.store.sorters.length < 1) {
+                me.removeSortingCss();
+            }
+        } else {
+            listenerId = me.on('rendered', () => {
+                me.un('rendered', listenerId);
+                setTimeout(() => {
+                    me.createViewData(data);
+                }, 50);
+            });
+        }
+    }
+
+    /**
+     * Gets triggered after changing the value of a record field.
+     * E.g. myRecord.foo = 'bar';
+     * @param {Object} opts
+     * @param {String} opts.field The name of the field which got changed
+     * @param {Neo.data.Model} opts.model The model instance of the changed record
+     * @param {*} opts.oldValue
+     * @param {Object} opts.record
+     * @param {*} opts.value
+     */
+    onStoreRecordChange(opts) {
+        this.getView().onStoreRecordChange(opts);
+    }
+
+    /**
+     * @param {String} field
+     * @protected
+     */
+    removeSortingCss(field) {
+        this.items[0].items.forEach(column => {
+            column.field !== field && column.removeSortingCss();
+        });
+    }
 }
 
 Neo.applyClassConfig(Container);

package/src/grid/README.md

@@ -1,2 +1,3 @@
 The grid implementation using div tags is currently on hold in favor for the table implementation using a table tag.
-Depending on how buffering works out for a real table, this one might get continued.
+
+The BufferedGrid implementation is currently scoped for neo v5.