neo.mjs 8.7.0 → 8.8.0

package/examples/table/nestedRecordFields/{MainContainerStateProvider.mjs → ViewportStateProvider.mjs}

@@ -5,16 +5,16 @@ import Store         from '../../../src/data/Store.mjs';
 const dataSymbol = Symbol.for('data');
 
 /**
- * @class Neo.examples.table.nestedRecordFields.MainContainerStateProvider
+ * @class Neo.examples.table.nestedRecordFields.ViewportStateProvider
  * @extends Neo.state.Provider
  */
-class MainContainerStateProvider extends StateProvider {
+class ViewportStateProvider extends StateProvider {
     static config = {
         /**
-         * @member {String} className='Neo.examples.table.nestedRecordFields.MainContainerStateProvider'
+         * @member {String} className='Neo.examples.table.nestedRecordFields.ViewportStateProvider'
          * @protected
          */
-        className: 'Neo.examples.table.nestedRecordFields.MainContainerStateProvider',
+        className: 'Neo.examples.table.nestedRecordFields.ViewportStateProvider',
         /**
          * @member {Object} stores
          */
@@ -59,4 +59,4 @@ class MainContainerStateProvider extends StateProvider {
     }
 }
 
-export default Neo.setupClass(MainContainerStateProvider);
+export default Neo.setupClass(ViewportStateProvider);

package/examples/table/nestedRecordFields/app.mjs

@@ -1,6 +1,6 @@
-import MainContainer from './MainContainer.mjs';
+import Viewport from './Viewport.mjs';
 
 export const onStart = () => Neo.app({
-    mainView: MainContainer,
+    mainView: Viewport,
     name    : 'Neo.examples.table.nestedRecordFields'
-});
+})

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "8.7.0",
+    "version": "8.8.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/dialog/Base.scss

@@ -77,6 +77,10 @@
                 margin-right: 0.3em;
                 padding     : 0;
 
+                &:active {
+                    border: none !important;
+                }
+
                 &:last-child {
                     margin-right: 0;
                 }

package/resources/scss/src/grid/View.scss

@@ -22,6 +22,22 @@
     height    : 100%;
     overflow-x: visible;
 
+    .neo-grid-cell {
+        &.neo-is-modified {
+            &:after {
+                border-color: transparent var(--grid-cell-ismodified-color) transparent transparent;
+                border-style: solid;
+                border-width: 0 var(--grid-cell-ismodified-size) var(--grid-cell-ismodified-size) 0;
+                content     : '';
+                height      : 0;
+                position    : absolute;
+                right       : 0;
+                top         : 0;
+                width       : 0;
+            }
+        }
+    }
+
     &.neo-is-scrolling * {
         pointer-events: none !important;
     }

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

@@ -2,6 +2,7 @@
     align-items     : center;
     background-color: var(--grid-header-button-background-color);
     background-image: var(--grid-header-button-background-image);
+    border-radius   : 0;
     border-width    : 0;
     color           : var(--grid-header-button-color);
     cursor          : pointer;
@@ -13,7 +14,6 @@
     height          : 29px; // Webkit => Safari can not handle 100%
     justify-content : flex-end;
     margin          : 0;
-    padding         : 7px 10px 6px;
     white-space     : nowrap;
 
     &:not(:last-child) {
@@ -69,6 +69,8 @@
     }
 
     .neo-button-text {
+        color         : var(--grid-header-button-color);
         pointer-events: none;
+        text-transform: none;
     }
 }

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

@@ -13,9 +13,9 @@
 
             &.neo-is-modified {
                 &:after {
-                    border-color: transparent orange transparent transparent;
+                    border-color: transparent var(--table-cell-ismodified-color) transparent transparent;
                     border-style: solid;
-                    border-width: 0 10px 10px 0;
+                    border-width: 0 var(--table-cell-ismodified-size) var(--table-cell-ismodified-size) 0;
                     content     : '';
                     height      : 0;
                     position    : absolute;

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

@@ -1,6 +1,7 @@
 .neo-table-header-button {
     align-items     : center;
     background-color: var(--table-header-button-background-color);
+    background-image: var(--table-header-button-background-image);
     border-width    : 0;
     color           : var(--table-header-button-color);
     cursor          : pointer;
@@ -15,8 +16,6 @@
     white-space     : nowrap;
     width           : 100% !important;
 
-    background-image: var(--table-header-button-background-image);
-
     &.neo-drag-over {
         background-image: linear-gradient(green, darkgreen);;
     }

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

@@ -1,5 +1,7 @@
 :root .neo-theme-dark { // .neo-grid-view
     --grid-cell-background-color-hover                    : #54595c;
+    --grid-cell-ismodified-color                          : orange;
+    --grid-cell-ismodified-size                           : 10px;
     --grid-cellmodel-selected-cell-background-color       : #64B5F6;
     --grid-cellmodel-selected-cell-color                  : #2b2b2b;
     --grid-cellmodel-selected-column-cell-background-color: #4f558a;

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

@@ -1,5 +1,7 @@
 :root .neo-theme-dark { // .neo-table-view
     --table-cell-background-color-hover                    : #54595c;
+    --table-cell-ismodified-color                          : orange;
+    --table-cell-ismodified-size                           : 10px;
     --table-cellmodel-selected-cell-background-color       : #64B5F6;
     --table-cellmodel-selected-cell-color                  : #2b2b2b;
     --table-cellmodel-selected-column-cell-background-color: #4f558a;

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

@@ -2,6 +2,8 @@
 
 :root .neo-theme-light { // .neo-grid-view
     --grid-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --grid-cell-ismodified-color                          : orange;
+    --grid-cell-ismodified-size                           : 10px;
     --grid-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --grid-cellmodel-selected-cell-color                  : #2b2b2b;
     --grid-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};

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

@@ -2,6 +2,8 @@
 
 :root .neo-theme-light { // .neo-table-view
     --table-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --table-cell-ismodified-color                          : orange;
+    --table-cell-ismodified-size                           : 10px;
     --table-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --table-cellmodel-selected-cell-color                  : #2b2b2b;
     --table-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};

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

@@ -2,6 +2,8 @@
 
 :root .neo-theme-neo-light { // .neo-grid-view
     --grid-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --grid-cell-ismodified-color                          : orange;
+    --grid-cell-ismodified-size                           : 10px;
     --grid-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --grid-cellmodel-selected-cell-color                  : #2b2b2b;
     --grid-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};

package/resources/scss/theme-neo-light/table/View.scss

@@ -2,6 +2,8 @@
 
 :root .neo-theme-neo-light { // .neo-table-view
     --table-cell-background-color-hover                    : #{color.adjust(#33343d, $lightness: 70%)};
+    --table-cell-ismodified-color                          : orange;
+    --table-cell-ismodified-size                           : 10px;
     --table-cellmodel-selected-cell-background-color       : #{color.adjust(#64B5F6, $lightness: 22%)};
     --table-cellmodel-selected-cell-color                  : #2b2b2b;
     --table-cellmodel-selected-column-cell-background-color: #{color.adjust(#4f558a, $lightness: 52%)};

package/src/DefaultConfig.mjs

@@ -262,12 +262,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '8.7.0'
+     * @default '8.8.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.7.0'
+    version: '8.8.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/Neo.mjs

@@ -66,10 +66,10 @@ Neo = globalThis.Neo = Object.assign({
      *
      * // e.g. Neo.core.Util.isObject => Neo.isObject
      * @memberOf module:Neo
-     * @param {Neo|Neo.core.Base} target The target class or singleton Instance or Neo
-     * @param {Neo.core.Base} namespace The class containing the methods
-     * @param {Object} config
-     * @param {Boolean} [bind] set this to true in case you want to bind methods to the "from" namespace
+     * @param {Neo|Neo.core.Base} target    The target class or singleton Instance or Neo
+     * @param {Neo.core.Base}     namespace The class containing the methods
+     * @param {Object}            config
+     * @param {Boolean}           [bind]    set this to true in case you want to bind methods to the "from" namespace
      * @returns {Object} target
      */
     applyFromNs(target, namespace, config, bind) {
@@ -104,7 +104,7 @@ Neo = globalThis.Neo = Object.assign({
     /**
      * Copies all keys of defaults into target, in case they don't already exist
      * @memberOf module:Neo
-     * @param {Object} target The target object
+     * @param {Object} target   The target object
      * @param {Object} defaults The object containing the keys you want to copy
      * @returns {Object} target
      */
@@ -120,6 +120,35 @@ Neo = globalThis.Neo = Object.assign({
         return target
     },
 
+    /**
+     * Assigns a new value to a given nested objects path.
+     * It will create the path structure or parts of it, in case it does not exist.
+     * @example
+     * Neo.assignToNs('annotations.selected', false, record)
+     *
+     * @memberOf module:Neo
+     * @param {String[]|String} path             The path string containing dots or an Array of the string parts
+     * @param {*}               value            The new value to assign to the leaf node
+     * @param {Object}          scope=globalThis Set a different starting point as globalThis
+     * @param {Boolean}         force=true       false will only assign default values (assign if old value === undefined)
+     */
+    assignToNs(path, value, scope=globalThis, force=true) {
+        path = Array.isArray(path) ? path : path.split('.');
+
+        let key;
+
+        if (path.length > 1) {
+            key   = path.pop();
+            scope = Neo.ns(path, true, scope)
+        } else {
+            key = path
+        }
+
+        if (force || scope[key] === undefined) {
+            scope[key] = value
+        }
+    },
+
     /**
      * Converts kebab-case strings into camel-case
      * @memberOf module:Neo
@@ -143,7 +172,7 @@ Neo = globalThis.Neo = Object.assign({
     /**
      * @memberOf module:Neo
      * @param {Object|Array|*} obj
-     * @param {Boolean} deep=false Set this to true in case you want to clone nested objects as well
+     * @param {Boolean} deep=false               Set this to true in case you want to clone nested objects as well
      * @param {Boolean} ignoreNeoInstances=false returns existing instances if set to true
      * @returns {Object|Array|*} the cloned input
      */
@@ -214,7 +243,7 @@ Neo = globalThis.Neo = Object.assign({
      * });
      * @memberOf module:Neo
      * @param {String|Object|Neo.core.Base} className
-     * @param {Object} [config]
+     * @param {Object}                      [config]
      * @returns {Neo.core.Base|null} The new class instance
      * @tutorial 02_ClassSystem
      */
@@ -263,7 +292,7 @@ Neo = globalThis.Neo = Object.assign({
      * Checks if there is a set method for a given property key inside the prototype chain
      * @memberOf module:Neo
      * @param {Neo.core.Base} proto The top level prototype of a class
-     * @param {String} key the property key to test
+     * @param {String}        key   The property key to test
      * @returns {Boolean}
      */
     hasPropertySetter(proto, key) {
@@ -319,9 +348,9 @@ Neo = globalThis.Neo = Object.assign({
      * // return globalThis.Neo.button.Base;
      *
      * @memberOf module:Neo
-     * @param {Array|String} names The class name string containing dots or an Array of the string parts
-     * @param {Boolean} create=false Set create to true to create empty objects for non-existing parts
-     * @param {Object} [scope] Set a different starting point as globalThis
+     * @param {String[]|String} names        The class name string containing dots or an Array of the string parts
+     * @param {Boolean}         create=false Set create to true to create empty objects for non-existing parts
+     * @param {Object}          [scope]      Set a different starting point as globalThis
      * @returns {Object} reference to the toplevel namespace
      */
     ns(names, create=false, scope) {
@@ -341,9 +370,9 @@ Neo = globalThis.Neo = Object.assign({
     /**
      * Extended version of Neo.ns() which supports mapping into arrays.
      * @memberOf module:Neo
-     * @param {Array|String} names The class name string containing dots or an Array of the string parts
-     * @param {Boolean} create=false Set create to true to create empty objects for non-existing parts
-     * @param {Object} [scope] Set a different starting point as globalThis
+     * @param {Array|String} names        The class name string containing dots or an Array of the string parts
+     * @param {Boolean}      create=false Set create to true to create empty objects for non-existing parts
+     * @param {Object}       [scope]      Set a different starting point as globalThis
      * @returns {Object} reference to the toplevel namespace
      */
     nsWithArrays(names, create=false, scope) {
@@ -383,7 +412,7 @@ Neo = globalThis.Neo = Object.assign({
      * });
      * @memberOf module:Neo
      * @param {String|Object} ntype
-     * @param {Object} [config]
+     * @param {Object}        [config]
      * @returns {Neo.core.Base}
      * @see {@link module:Neo.create create}
      */
@@ -575,7 +604,7 @@ const ignoreMixin = [
 
 /**
  * @param {Neo.core.Base} cls
- * @param {Array} mixins
+ * @param {Array}         mixins
  * @private
  */
 function applyMixins(cls, mixins) {
@@ -614,7 +643,7 @@ function applyMixins(cls, mixins) {
 /**
  * Creates get / set methods for class configs ending with an underscore
  * @param {Neo.core.Base} proto
- * @param {String} key
+ * @param {String}        key
  * @private
  * @tutorial 02_ClassSystem
  */
@@ -708,8 +737,8 @@ function autoGenerateGetSet(proto, key) {
 
 /**
  * @param {Boolean} create
- * @param {Object} current
- * @param {Object} prev
+ * @param {Object}  current
+ * @param {Object}  prev
  * @returns {Object|undefined}
  */
 function createArrayNs(create, current, prev) {

package/src/data/RecordFactory.mjs

@@ -4,6 +4,7 @@ import Model  from './Model.mjs';
 
 const
     dataSymbol         = Symbol.for('data'),
+    isModifiedSymbol   = Symbol.for('isModified'),
     originalDataSymbol = Symbol.for('originalData');
 
 let instance;
@@ -31,21 +32,42 @@ class RecordFactory extends Base {
         singleton: true
     }
 
+    /**
+     * Assigns model based default values to a data object
+     * @param {Object}         data
+     * @param {Neo.data.Model} model
+     * @returns {Object}
+     */
+    assignDefaultValues(data, model) {
+        model.fieldsMap.forEach((field, fieldName) => {
+            if (Object.hasOwn(field, 'defaultValue')) {
+                // We could always use Neo.assignToNs() => the check is just for improving the performance
+                if (model.hasNestedFields) {
+                    Neo.assignToNs(fieldName, field.defaultValue, data, false)
+                } else if (data[fieldName] === undefined) {
+                    data[fieldName] = field.defaultValue
+                }
+            }
+        });
+
+        return data
+    }
+
     /**
      * @param {Object} data
      * @param {Object} data.field
-     * @param {Neo.data.RecordFactory} data.me
      * @param {Neo.data.Model} data.model
      * @param {String} data.path=''
+     * @param {Object} data.proto
      */
-    createField({field, me, model, path=''}) {
+    createField({field, model, path='', proto}) {
         let fieldName = field.name,
             fieldPath = path === '' ? fieldName : `${path}.${fieldName}`,
             properties;
 
         if (field.fields) {
             field.fields.forEach(childField => {
-                this.createField({field: childField, me, model, path: fieldPath})
+                this.createField({field: childField, model, path: fieldPath, proto})
             })
         } else {
             properties = {
@@ -68,7 +90,9 @@ class RecordFactory extends Base {
                         if (!Neo.isEqual(value, oldValue)) {
                             instance.setRecordData({fieldName: fieldPath, model, record: me, value});
 
-                            me._isModified = me.isModified;
+                            if (!model.trackModifiedFields) {
+                                me[isModifiedSymbol] = true
+                            }
 
                             instance.onRecordChange({
                                 fields: [{name: fieldPath, oldValue, value}],
@@ -80,7 +104,7 @@ class RecordFactory extends Base {
                 }
             };
 
-            Object.defineProperties(me, properties)
+            Object.defineProperties(proto, properties)
         }
     }
 
@@ -124,10 +148,10 @@ class RecordFactory extends Base {
                         let me = this;
 
                         if (model.trackModifiedFields) {
-                            return Neo.isEqual(me[dataSymbol], me[originalDataSymbol])
+                            return !Neo.isEqual(me[dataSymbol], me[originalDataSymbol])
                         }
 
-                        return me._isModified
+                        return me[isModifiedSymbol]
                     }
 
                     /**
@@ -136,13 +160,15 @@ class RecordFactory extends Base {
                     constructor(config) {
                         let me = this;
 
+                        config = instance.assignDefaultValues(config, model);
+
                         if (model.trackModifiedFields) {
                             me[originalDataSymbol] = {};
                             me.setOriginal(config)
                         }
 
                         me.setSilent(config); // We do not want to fire change events when constructing
-                        me._isModified = false
+                        me[isModifiedSymbol] = false
                     }
 
                     /**
@@ -153,7 +179,7 @@ class RecordFactory extends Base {
                         let me = this;
 
                         // Check if the field getter does exist
-                        if (!me.__proto__.hasOwnProperty(fieldName)) {
+                        if (!Object.hasOwn(me.__proto__, fieldName)) {
                             Logger.logError('The record does not contain the field', fieldName, me)
                         }
 
@@ -177,6 +203,15 @@ class RecordFactory extends Base {
                         return null
                     }
 
+                    /**
+                     * Bulk-update multiple record fields at once
+                     * @param {Object} fields
+                     */
+                    reset(fields) {
+                        this.setOriginal(fields);
+                        this.set(fields)
+                    }
+
                     /**
                      * Bulk-update multiple record fields at once
                      * @param {Object} fields
@@ -214,7 +249,7 @@ class RecordFactory extends Base {
 
                 if (Array.isArray(model.fields)) {
                     model.fields.forEach(field => {
-                        instance.createField({field, me: cls.prototype, model})
+                        instance.createField({field, model, proto: cls.prototype})
                     })
                 }
 
@@ -228,23 +263,6 @@ class RecordFactory extends Base {
         }
     }
 
-    /**
-     * @param {Object} record
-     * @returns {Boolean} true in case a change was found
-     */
-    isModified(record) {
-        return record.isModified
-    }
-
-    /**
-     * @param {Object} record
-     * @param {String} fieldName
-     * @returns {Boolean|null} null in case the model does not use trackModifiedFields, true in case a change was found
-     */
-    isModifiedField(record, fieldName) {
-        return record.isModifiedField(fieldName)
-    }
-
     /**
      * Tests if a given object is an instance of a class created by this factory
      * @param {Object} record
@@ -353,6 +371,10 @@ class RecordFactory extends Base {
      * @protected
      */
     setRecordData({fieldName, model, record, useOriginalData=false, value}) {
+        if (useOriginalData && !model.trackModifiedFields) {
+            return
+        }
+
         let scope = useOriginalData ? originalDataSymbol : dataSymbol;
 
         if (model.hasNestedFields && fieldName.includes('.')) {
@@ -378,9 +400,13 @@ class RecordFactory extends Base {
      * @param {Boolean}        data.useOriginalData=false true will apply changes to the originalData symbol
      */
     setRecordFields({changedFields=[], fields, model, record, silent=false, useOriginalData=false}) {
-        let {fieldsMap} = model,
+        let {fieldsMap, trackModifiedFields} = model,
             fieldExists, oldValue;
 
+        if (!trackModifiedFields && useOriginalData) {
+            return
+        }
+
         Object.entries(fields).forEach(([key, value]) => {
             fieldExists = fieldsMap.has(key);
 
@@ -402,8 +428,8 @@ class RecordFactory extends Base {
                 if (!Neo.isEqual(oldValue, value)) {
                     instance.setRecordData({fieldName: key, model, record, useOriginalData, value});
 
-                    if (!useOriginalData) {
-                        record._isModified = true
+                    if (!trackModifiedFields && !useOriginalData) {
+                        record[isModifiedSymbol] = true
                     }
 
                     changedFields.push({name: key, oldValue, value})
@@ -411,7 +437,7 @@ class RecordFactory extends Base {
             }
         });
 
-        if (!silent && Object.keys(changedFields).length > 0) {
+        if (!silent && !useOriginalData && Object.keys(changedFields).length > 0) {
             Neo.get(model.storeId)?.onRecordChange({fields: changedFields, model, record})
         }
     }

package/src/dialog/Base.mjs

@@ -413,8 +413,7 @@ class Dialog extends Panel {
 
         // rendered outside the visible area
         await me.render(true);
-
-        await me.timeout(30);
+        await me.timeout(150);
 
         let [dialogRect, bodyRect] = await me.getDomRect([me.id, 'document.body']);
 

package/src/grid/View.mjs

@@ -72,6 +72,10 @@ class GridView extends Component {
          * @protected
          */
         columnPositions_: [],
+        /**
+         * @member {Boolean} highlightModifiedCells_=false
+         */
+        highlightModifiedCells_: false,
         /**
          * @member {Boolean} isScrolling_=false
          */
@@ -432,6 +436,12 @@ class GridView extends Component {
             cellCls.push('neo-' + column.cellAlign)
         }
 
+        if (me.highlightModifiedCells) {
+            if (record.isModifiedField(dataField)) {
+                cellCls.push('neo-is-modified')
+            }
+        }
+
         if (!cellId) {
             cellId = me.getCellId(record, column.dataField)
         }
@@ -803,9 +813,9 @@ class GridView extends Component {
             fieldNames       = fields.map(field => field.name),
             needsUpdate      = false,
             {gridContainer}  = me,
-            {selectionModel} = gridContainer,
+            {selectionModel} = gridContainer.view,
             {vdom}           = me,
-            cellId, cellNode, column, index, scope;
+            cellId, cellNode, cellStyle, cellVdom, column, index;
 
         if (fieldNames.includes(me.colspanField)) {
             index = me.store.indexOf(record);
@@ -821,14 +831,22 @@ class GridView extends Component {
                     cellId   = me.getCellId(record, field.name);
                     cellNode = VDomUtil.find(vdom, cellId);
 
-                    // the vdom might not exist yet => nothing to do in this case
+                    // The vdom might not exist yet => nothing to do in this case
                     if (cellNode?.vdom) {
+                        cellStyle   = cellNode.vdom.style;
                         column      = me.getColumn(field.name);
                         index       = cellNode.index;
+                        cellVdom    = me.applyRendererOutput({cellId, column, gridContainer, index, record});
                         needsUpdate = true;
-                        scope       = column.rendererScope || gridContainer;
 
-                        cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, gridContainer, index, record})
+                        // The cell-positioning logic happens outside applyRendererOutput()
+                        // We need to preserve these styles
+                        Object.assign(cellVdom.style, {
+                            left : cellStyle.left,
+                            width: cellStyle.width
+                        });
+
+                        cellNode.parentNode.cn[index] = cellVdom
                     }
                 }
             })

package/src/table/View.mjs

@@ -154,7 +154,7 @@ class View extends Component {
             cellCls.push('neo-' + column.cellAlign)
         }
 
-        if (me.highlightModifiedCells && me.store.model.trackModifiedFields) {
+        if (me.highlightModifiedCells) {
             if (record.isModifiedField(dataField)) {
                 cellCls.push('neo-is-modified')
             }