neo.mjs 8.0.0-beta.2 → 8.0.1

package/src/form/field/Base.mjs

@@ -78,10 +78,7 @@ class Base extends Component {
      * @returns {Boolean}
      */
     get isDirty() {
-        let originalValue = this.originalConfig.value,
-            value         = this.value;
-
-        return value !== originalValue && Neo.isEmpty(value) !== Neo.isEmpty(originalValue)
+        return !Neo.isEqual(this.getSubmitValue(), this.originalConfig.value)
     }
     /**
      * An internal cache for formGroup(s) and the field name

package/src/form/field/ComboBox.mjs

@@ -165,7 +165,7 @@ class ComboBox extends Picker {
      */
     afterSetStore(value, oldValue) {
         let me = this,
-            filters;
+            filters, val;
 
         if (value) {
             if (me.useFilter) {
@@ -185,7 +185,14 @@ class ComboBox extends Picker {
                 me.list.store = value
             }
 
-            value.on('load', me.onStoreLoad, me)
+            value.on('load', me.onStoreLoad, me);
+
+            if (me.value) {
+                val = me.value;
+
+                me._value = null; // silent reset to trigger a change event
+                me.value  = val
+            }
         }
     }
 
@@ -248,6 +255,11 @@ class ComboBox extends Picker {
         let me                         = this,
             {displayField, valueField} = me;
 
+        // Do not create a default store instance, in case there is a bound store to be created
+        if (!value && me.bind?.store) {
+            return null
+        }
+
         oldValue?.destroy();
 
         // Promote an array of items to be a Store
@@ -312,6 +324,10 @@ class ComboBox extends Picker {
             return null
         }
 
+        if (!store) { // We will (re)set the value once the store is created
+            return value
+        }
+
         // we can only match record ids or display values in case the store is loaded
         if (store.getCount() > 0) {
             record = store.isFiltered() ? store.allItems.get(value) : store.get(value);

package/src/form/field/Date.mjs

@@ -142,7 +142,7 @@ class DateField extends Picker {
     afterSetMinValue(value, oldValue) {
         let me = this;
 
-        me.changeInputElKey('max', value);
+        me.changeInputElKey('min', value);
 
         if (me.dateSelector) {
             me.dateSelector.minValue = value
@@ -170,8 +170,14 @@ class DateField extends Picker {
      * @protected
      */
     beforeSetValue(value, oldValue) {
-        const val = super.beforeSetValue(value, oldValue);
-        return (this.isoDate && val) ? val.substring(0, 10) : val;
+        if (Neo.typeOf(value) === 'Date') {
+            value = DateUtil.convertToyyyymmdd(value);
+            this.originalConfig.value = value
+        }
+
+        value = super.beforeSetValue(value, oldValue);
+
+        return (this.isoDate && value) ? value.substring(0, 10) : value
     }
 
     /**
@@ -244,7 +250,7 @@ class DateField extends Picker {
     onInputValueChange(data) {
         this.invalidInput = !data.valid;
 
-        if (data.valid === true) {
+        if (data.valid) {
             super.onInputValueChange(data)
         } else {
             this.validate(false)

package/src/grid/Container.mjs

@@ -1,5 +1,7 @@
 import BaseContainer   from '../container/Base.mjs';
 import ClassSystemUtil from '../util/ClassSystem.mjs';
+import CssUtil         from '../util/Css.mjs';
+import NeoArray        from '../util/Array.mjs';
 import RowModel        from '../selection/grid/RowModel.mjs';
 import Store           from '../data/Store.mjs';
 import View            from './View.mjs';
@@ -25,27 +27,79 @@ class Container extends BaseContainer {
          * @member {String[]} baseCls=['neo-grid-container']
          */
         baseCls: ['neo-grid-container'],
+        /**
+         * true uses table.plugin.CellEditing
+         * @member {Boolean} cellEditing_=false
+         */
+        cellEditing_: false,
+        /**
+         * Default configs for each column
+         * @member {Object} columnDefaults=null
+         */
+        columnDefaults: null,
         /**
          * @member {Object[]} columns_=[]
          */
         columns_: [],
+        /**
+         * Configs for Neo.table.header.Toolbar
+         * @member {Object|null} [headerToolbarConfig=null]
+         */
+        headerToolbarConfig: null,
+        /**
+         * @member {String|null} headerToolbarId_=null
+         */
+        headerToolbarId_: null,
         /**
          * Additional used keys for the selection model
-         * @member {Object} keys={}
+         * @member {Object} keys
          */
         keys: {},
         /**
          * @member {String} layout='base'
          */
         layout: 'base',
+        /**
+         * @member {Boolean} scrollbarsCssApplied=false
+         * @protected
+         */
+        scrollbarsCssApplied: false,
         /**
          * @member {Neo.selection.Model} selectionModel_=null
          */
         selectionModel_: null,
+        /**
+         * @member {Boolean} showHeaderFilters_=false
+         */
+        showHeaderFilters_: false,
+        /**
+         * @member {Boolean} sortable_=true
+         */
+        sortable_: true,
         /**
          * @member {Neo.data.Store} store_=null
          */
         store_: null,
+        /**
+         * todo: only works for chrome & safari -> add a check
+         * @member {Boolean} useCustomScrollbars_=true
+         */
+        useCustomScrollbars_: true,
+        /**
+         * Configs for Neo.table.View
+         * @member {Object|null} [viewConfig=null]
+         */
+        viewConfig: null,
+        /**
+         * @member {String|null} viewId_=null
+         * @protected
+         */
+        viewId_: null,
+        /**
+         * @member {Array|null} items=null
+         * @protected
+         */
+        items: null,
         /**
          * @member {Object} _vdom={cls:['neo-grid-wrapper'],cn:[{cn:[]}]}
          */
@@ -56,24 +110,20 @@ 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]
+     * Convenience method to access the Neo.grid.header.Toolbar
+     * @returns {Neo.table.header.Toolbar|null}
      */
-    viewConfig = null
+    get headerToolbar() {
+        return Neo.getComponent(this.headerToolbarId) || Neo.get(this.headerToolbarId)
+    }
+
     /**
-     * @member {String|null} viewId_=null
-     * @protected
+     * Convenience method to access the Neo.grid.View
+     * @returns {Neo.table.View|null}
      */
-    viewId = null
+    get view() {
+        return Neo.getComponent(this.viewId) || Neo.get(this.viewId)
+    }
 
     /**
      * @param {Object} config
@@ -90,6 +140,7 @@ class Container extends BaseContainer {
             module           : header.Toolbar,
             id               : me.headerToolbarId,
             showHeaderFilters: me.showHeaderFilters,
+            sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
             module     : View,
@@ -99,11 +150,55 @@ class Container extends BaseContainer {
             ...me.viewConfig
         }];
 
-        me.vdom.id = me.id + 'wrapper';
+        me.vdom.id = me.getWrapperId();
 
         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
+     * @param {Object[]|null} oldValue
+     * @protected
+     */
+    afterSetColumns(value, oldValue) {
+        if (Array.isArray(oldValue) && oldValue.length > 0) {
+            let me              = this,
+                {headerToolbar} = me;
+
+            if (headerToolbar) {
+                headerToolbar.items = value;
+                headerToolbar.createItems()
+            }
+
+            me.view?.createViewData(me.store.items)
+        }
+    }
+
     /**
      * Triggered after the selectionModel config got changed
      * @param {Neo.selection.Model} value
@@ -114,6 +209,65 @@ class Container extends BaseContainer {
         this.rendered && value.register(this)
     }
 
+    /**
+     * Triggered after the showHeaderFilters config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetShowHeaderFilters(value, oldValue) {
+        if (oldValue !== undefined) {
+            this.headerToolbar.showHeaderFilters = value
+        }
+    }
+
+    /**
+     * Triggered after the sortable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetSortable(value, oldValue) {
+        if (oldValue !== undefined) {
+            this.headerToolbar.sortable = value
+        }
+    }
+
+    /**
+     * Triggered after the useCustomScrollbars config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetUseCustomScrollbars(value, oldValue) {
+        if (value === true) {
+            this.vdom.cls = NeoArray.union(this.vdom.cls, ['neo-use-custom-scrollbar'])
+        }
+    }
+
+    /**
+     * @protected
+     */
+    applyCustomScrollbarsCss() {
+        let me       = this,
+            id       = me.getWrapperId(),
+            cssRules = [];
+
+        if (me.dockLeftMargin) {
+            cssRules.push('#' + id + '::-webkit-scrollbar-track:horizontal {margin-left: ' + me.dockLeftMargin + 'px;}')
+        }
+
+        if (me.dockRightMargin) {
+            cssRules.push('#' + id + '::-webkit-scrollbar-track:horizontal {margin-right: ' + me.dockRightMargin + 'px;}')
+        }
+
+        if (cssRules.length > 0) {
+            CssUtil.insertRules(me.appName, cssRules)
+        }
+
+        me.scrollbarsCssApplied = true
+    }
+
     /**
      * Triggered before the columns config gets changed.
      * @param {Object[]} value
@@ -128,6 +282,16 @@ class Container extends BaseContainer {
         return value
     }
 
+    /**
+     * Triggered before the headerToolbarId config gets changed.
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetHeaderToolbarId(value, oldValue) {
+        return value || oldValue
+    }
+
     /**
      * Triggered before the selectionModel config gets changed.
      * @param {Neo.selection.Model} value
@@ -177,6 +341,39 @@ class Container extends BaseContainer {
         return value
     }
 
+    /**
+     * Triggered before the viewId config gets changed.
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetViewId(value, oldValue) {
+        return value || oldValue
+    }
+
+    /**
+     * In case you want to update multiple existing records in parallel,
+     * using this method is faster than updating each record one by one.
+     * At least until we introduce row based vdom updates.
+     * @param {Object[]} records
+     */
+    bulkUpdateRecords(records) {
+        let {store, view} = this,
+            {keyProperty} = store;
+
+        if (view) {
+            view.silentVdomUpdate = true;
+
+            records.forEach(item => {
+                store.get(item[keyProperty])?.set(item)
+            });
+
+            view.silentVdomUpdate = false;
+
+            view.update()
+        }
+    }
+
     /**
      * @param {Object[]} columns
      * @returns {*}
@@ -188,7 +385,7 @@ class Container extends BaseContainer {
             renderer;
 
         if (!columns || !columns.length) {
-            Neo.logError('Attempting to create a grid.Container without defined columns', me.id)
+            Neo.logError('Attempting to create a table.Container without defined columns', me.id);
         }
 
         columns.forEach(column => {
@@ -197,7 +394,7 @@ class Container extends BaseContainer {
             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)
+                Neo.logError('Attempting to create a docked column without a defined width', column, me.id);
             }
 
             if (renderer && Neo.isString(renderer) && me[renderer]) {
@@ -205,7 +402,7 @@ class Container extends BaseContainer {
             }
 
             if (sorters?.[0]) {
-                if (column.field === sorters[0].property) {
+                if (column.dataField === sorters[0].property) {
                     column.isSorted = sorters[0].direction
                 }
             }
@@ -222,10 +419,16 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @param {Object[]} inputData
+     * @param {Array} inputData
      */
     createViewData(inputData) {
-        this.getView().createViewData(inputData)
+        let me = this;
+
+        me.view.createViewData(inputData);
+
+        if (me.useCustomScrollbars && me.scrollbarsCssApplied === false) {
+            me.applyCustomScrollbarsCss()
+        }
     }
 
     /**
@@ -243,13 +446,6 @@ class Container extends BaseContainer {
         return this.vdom.cn[0]
     }
 
-    /**
-     * @returns {Neo.grid.View}
-     */
-    getView() {
-        return Neo.getComponent(this.viewId) || Neo.get(this.viewId)
-    }
-
     /**
      * @override
      * @returns {Neo.vdom.VNode}
@@ -258,6 +454,13 @@ class Container extends BaseContainer {
         return this.vnode.childNodes[0]
     }
 
+    /**
+     * @returns {String}
+     */
+    getWrapperId() {
+        return `${this.id}__wrapper`
+    }
+
     /**
      *
      */
@@ -292,8 +495,7 @@ class Container extends BaseContainer {
      * @protected
      */
     onStoreLoad(data) {
-        let me = this,
-            listenerId;
+        let me = this;
 
         if (me.rendered) {
             me.createViewData(data);
@@ -302,12 +504,11 @@ class Container extends BaseContainer {
                 me.removeSortingCss()
             }
         } else {
-            listenerId = me.on('rendered', () => {
-                me.un('rendered', listenerId);
+            me.on('rendered', () => {
                 me.timeout(50).then(() => {
                     me.createViewData(data)
                 })
-            })
+            }, me, {once: true})
         }
     }
 
@@ -322,16 +523,18 @@ class Container extends BaseContainer {
      * @param {*} opts.value
      */
     onStoreRecordChange(opts) {
-        this.getView().onStoreRecordChange(opts)
+        this.view.onStoreRecordChange(opts)
     }
 
     /**
-     * @param {String} field
+     * @param {String} dataField
      * @protected
      */
-    removeSortingCss(field) {
-        this.items[0].items.forEach(column => {
-            column.field !== field && column.removeSortingCss()
+    removeSortingCss(dataField) {
+        this.headerToolbar.items.forEach(column => {
+            if (column.dataField !== dataField) {
+                column.removeSortingCss()
+            }
         })
     }
 }

package/src/grid/README.md

@@ -1,3 +1,3 @@
 The grid implementation using div tags is currently on hold in favor for the table implementation using a table tag.
 
-The BufferedGrid implementation is currently scoped for neo v5.
+The BufferedGrid implementation is currently scoped for neo v9.