neo.mjs 8.42.0 → 8.43.1

package/resources/scss/src/apps/colors/GridContainer.scss

@@ -0,0 +1,68 @@
+@use "sass:color";
+
+$base-color: #1c60a0;
+
+.colors-grid-container.neo-grid-container {
+    width: 100%;
+
+    .neo-grid-header-toolbar {
+        .neo-grid-header-button {
+            &:not(:first-child) {
+                width: 10%;
+            }
+        }
+    }
+
+    .neo-grid-row .neo-grid-cell {
+        &.color-1 {
+            background-color: $base-color;
+        }
+
+        &.color-2 {
+            background-color: color.adjust($base-color, $lightness: 5%);
+        }
+
+        &.color-3 {
+            background-color: color.adjust($base-color, $lightness: 10%);
+        }
+
+        &.color-4 {
+            background-color: color.adjust($base-color, $lightness: 15%);
+        }
+
+        &.color-5 {
+            background-color: color.adjust($base-color, $lightness: 20%);
+        }
+
+        &.color-6 {
+            background-color: color.adjust($base-color, $lightness: 25%);
+        }
+
+        &.color-7 {
+            background-color: color.adjust($base-color, $lightness: 30%);
+        }
+
+        &.color-8 {
+            background-color: color.adjust($base-color, $lightness: 35%);
+        }
+
+        &.color-9 {
+            background-color: color.adjust($base-color, $lightness: 40%);
+        }
+
+        &.color-10 {
+            background-color: color.adjust($base-color, $lightness: 45%);
+        }
+    }
+
+    .neo-grid-view {
+        .neo-grid-row {
+            &:hover {
+                .neo-grid-cell {
+                    background-color: #d0aa72;
+                    color           : #2b2b2b;
+                }
+            }
+        }
+    }
+}

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

@@ -1,5 +1,6 @@
 .neo-grid-header-toolbar {
     border-bottom: 1px solid var(--grid-container-border-color);
     padding      : 0;
-    width        : max-content;
+    min-width    : fit-content;
+    width        : 100%;
 }

package/src/DefaultConfig.mjs

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

package/src/component/Toast.mjs

@@ -11,6 +11,7 @@ import ToastManager from '../manager/Toast.mjs';
             // mandatory
             appName         : this.component.appName,
             msg             : 'Alarm was set to 11:30 for journey into Neo development',
+            windowId        : this.component.windowId
             // optional                        defaults
             closable        : true,         // false
             iconCls         : 'fa fa-bell', // null
@@ -102,16 +103,16 @@ class Toast extends Component {
          * @member {String|null} title=null
          */
         vdom:
-        {cn: [{
-            cls: 'neo-toast-inner', cn: [
+        {cn: [
+            {cls: 'neo-toast-inner', cn: [
                 {cls: ['neo-toast-icon'], removeDom: true},
                 {cls: 'neo-toast-text', cn: [
                     {cls: ['neo-toast-title'], removeDom: true},
                     {cls: 'neo-toast-msg'}
                 ]},
                 {cls: ['neo-toast-close', 'fa', 'fa-close'], removeDom: true}
-            ]
-        }]}
+            ]}
+        ]}
     }
 
     /**

package/src/component/wrapper/AmChart.mjs

@@ -54,7 +54,7 @@ class AmChart extends Component {
          * @member {Object} _vdom
          */
         _vdom:
-        {style: {position: 'relative', height: '100%', width: '100%'}, cn: [
+        {style: {position: 'relative'}, cn: [
             {style: {position: 'absolute', height: '100%', width: '100%'}, cn: [
                 {style: {color:'red',height: '100%'}}
             ]}

package/src/controller/Component.mjs

@@ -167,10 +167,10 @@ class Component extends Base {
      */
     parseConfig(component=this.component) {
         let me = this,
-            {handler, listeners, reference, validator} = component,
+            {handler, listeners, reference, renderer, validator} = component,
             eventHandler, handlerScope;
 
-        if (handler && typeof handler === 'string') {
+        if (handler && Neo.isString(handler)) {
             handlerScope = me.getHandlerScope(handler, component);
 
             // If the handler name was not resolved in the Component itself, bind it
@@ -192,7 +192,7 @@ class Component extends Base {
                         listeners[key].fn = handlerScope[eventHandler].bind(handlerScope)
                     }
                 } else {
-                    value.forEach(listener => {
+                    value?.forEach?.(listener => {
                         if (Neo.isObject(listener) && listener.hasOwnProperty('fn') && Neo.isString(listener.fn)) {
                             eventHandler = listener.fn;
                             handlerScope = me.getHandlerScope(eventHandler, component);
@@ -208,7 +208,15 @@ class Component extends Base {
             }
         });
 
-        if (Neo.isString(validator)) {
+        if (renderer && Neo.isString(renderer)) {
+            handlerScope = me.getHandlerScope(renderer);
+
+            if (handlerScope) {
+                component.renderer = handlerScope[renderer].bind(handlerScope)
+            }
+        }
+
+        if (validator && Neo.isString(validator)) {
             handlerScope = me.getHandlerScope(validator);
 
             if (!handlerScope) {

package/src/draggable/toolbar/SortZone.mjs

@@ -115,8 +115,9 @@ class SortZone extends DragZone {
         await me.timeout(10);
 
         if (owner.sortable) {
-            ownerStyle.height = me.ownerStyle.height || null;
-            ownerStyle.width  = me.ownerStyle.width  || null;
+            ownerStyle.height   = me.ownerStyle.height    || null;
+            ownerStyle.minWidth = me.ownerStyle.minWidth  || null;
+            ownerStyle.width    = me.ownerStyle.width     || null;
 
             owner.style = ownerStyle;
 
@@ -254,7 +255,7 @@ class SortZone extends DragZone {
                 dragElement            : VDomUtil.find(owner.vdom, button.id).vdom,
                 dragProxyConfig        : {...me.dragProxyConfig, cls: [...owner.cls]},
                 indexMap               : indexMap,
-                ownerStyle             : {height: ownerStyle.height, width: ownerStyle.width},
+                ownerStyle             : {height: ownerStyle.height, minWidth: ownerStyle.minWidth, width: ownerStyle.width},
                 reversedLayoutDirection: layout.direction === 'column-reverse' || layout.direction === 'row-reverse',
                 sortDirection          : layout.direction?.includes('column') ? 'vertical' : 'horizontal',
                 startIndex             : index
@@ -274,12 +275,14 @@ class SortZone extends DragZone {
             owner.getDomRect([owner.id].concat(owner.items.map(e => e.id))).then(itemRects => {
                 me.ownerRect = itemRects[0];
 
-                ownerStyle.height = `${itemRects[0].height}px`;
-                ownerStyle.width  = `${itemRects[0].width}px`;
-
-                // The only reason we are adjusting the toolbar style is that there is no min height or width present.
-                // removing items from the layout could trigger a change in size.
-                owner.style = ownerStyle;
+                // The only reason we are adjusting the toolbar style is that there might be no min-height or min-width present.
+                // => Removing items from the layout could trigger a change in size otherwise
+                owner.style = {
+                    ...ownerStyle,
+                    height  : `${itemRects[0].height}px`,
+                    minWidth: `${itemRects[0].width}px`,
+                    width   : `${itemRects[0].width}px`
+                };
 
                 itemRects.shift();
 

package/src/grid/Container.mjs

@@ -459,7 +459,9 @@ class GridContainer extends BaseContainer {
                 parent  : me,
                 windowId: me.windowId,
                 ...column
-            })
+            });
+
+            me.getController()?.parseConfig(columns[index])
         });
 
         me.items[0].items = headerButtons;
@@ -610,7 +612,7 @@ class GridContainer extends BaseContainer {
      * @protected
      */
     removeSortingCss(dataField) {
-        this.headerToolbar.items.forEach(column => {
+        this.headerToolbar?.items.forEach(column => {
             if (column.dataField !== dataField) {
                 column.removeSortingCss()
             }

package/src/grid/VerticalScrollbar.mjs

@@ -95,8 +95,9 @@ class VerticalScrollbar extends Component {
             let me = this;
 
             value.on({
-                load : me.updateScrollHeight,
-                scope: me
+                filter: me.updateScrollHeight,
+                load  : me.updateScrollHeight,
+                scope : me
             });
 
             value.getCount() > 0 && me.updateScrollHeight()

package/src/grid/column/Base.mjs

@@ -59,7 +59,8 @@ class Column extends Base {
      * @protected
      */
     beforeSetRenderer(value, oldValue) {
-        return resolveCallback(value, this).fn
+        // If no fn is found inside the parent tree, return the plain value for view controllers to match
+        return resolveCallback(value, this).fn || value
     }
 
     /**

package/src/grid/column/Component.mjs

@@ -104,12 +104,14 @@ class Component extends Column {
                 windowId
             });
 
-            view.getController()   ?.parseConfig(component);
-            view.getStateProvider()?.parseConfig(component);
-
             me.map.set(id, component)
         }
 
+        // The componentConfig can contain bindings into a view controller, e.g. a button handler = 'editButtonHandler'
+        // componentConfig.set(component) can revert these, so we need a parseConfig() for each change.
+        view.getController()   ?.parseConfig(component);
+        view.getStateProvider()?.parseConfig(component);
+
         view.updateDepth = -1;
 
         return component.createVdomReference()

package/src/selection/Model.mjs

@@ -112,6 +112,9 @@ class Model extends Base {
             if (!silent) {
                 view.update();
 
+                view.parent?.onDeselect?.(); // grid.Container & table.Container
+                view.onDeselect?.();
+
                 me.fire('selectionChange', {
                     selection: itemCollection
                 })
@@ -249,6 +252,7 @@ class Model extends Base {
                 view.update()
             }
 
+            view.parent?.onSelect?.(items); // grid.Container & table.Container
             view.onSelect?.(items);
 
             me.fire('selectionChange', {

package/src/table/Container.mjs

@@ -311,8 +311,7 @@ class Container extends BaseContainer {
             };
 
             if (value instanceof Store) {
-                value.on(listeners);
-                value.getCount() > 0 && me.onStoreLoad(value.items)
+                value.on(listeners)
             } else {
                 value = ClassSystemUtil.beforeSetInstance(value, Store, {
                     listeners

package/resources/scss/src/apps/colors/TableContainer.scss

@@ -1,66 +0,0 @@
-@use "sass:color";
-
-$base-color: #1c60a0;
-
-.colors-table-container.neo-table-container {
-    width: 100%;
-
-    .color-1 {
-        background-color: $base-color;
-    }
-
-    .color-2 {
-        background-color: color.adjust($base-color, $lightness: 5%);
-    }
-
-    .color-3 {
-        background-color: color.adjust($base-color, $lightness: 10%);
-    }
-
-    .color-4 {
-        background-color: color.adjust($base-color, $lightness: 15%);
-    }
-
-    .color-5 {
-        background-color: color.adjust($base-color, $lightness: 20%);
-    }
-
-    .color-6 {
-        background-color: color.adjust($base-color, $lightness: 25%);
-    }
-
-    .color-7 {
-        background-color: color.adjust($base-color, $lightness: 30%);
-    }
-
-    .color-8 {
-        background-color: color.adjust($base-color, $lightness: 35%);
-    }
-
-    .color-9 {
-        background-color: color.adjust($base-color, $lightness: 40%);
-    }
-
-    .color-10 {
-        background-color: color.adjust($base-color, $lightness: 45%);
-    }
-
-    .neo-index-column {
-        max-width: 40px;
-        min-width: 40px;
-        width    : 40px;
-    }
-
-    .neo-table-view {
-        .neo-table-row {
-            &:hover .neo-table-cell {
-                background-color: #d0aa72;
-                color           : #2b2b2b;
-            }
-        }
-    }
-
-    td, th {
-        min-width: 10%;
-    }
-}