neo.mjs 8.41.2 → 8.43.0

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.41.2'
+     * @default '8.43.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '8.41.2'
+    version: '8.43.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/collection/Base.mjs

@@ -811,7 +811,7 @@ class Collection extends Base {
     /**
      * Returns the first item which matches the property and value
      * @param {Object|String} property
-     * @param {String|Number} [value] Only required in case the first param is a string
+     * @param {Number|String} [value] Only required in case the first param is a string
      * @returns {Object} Returns the first found item or null
      */
     findFirst(property, value) {
@@ -828,7 +828,7 @@ class Collection extends Base {
 
     /**
      * Returns the object associated to the key, or null if there is none.
-     * @param key
+     * @param {Number|String} key
      * @returns {Object|null}
      */
     get(key) {

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/container/Base.mjs

@@ -303,7 +303,7 @@ class Container extends Component {
     createItem(item, index) {
         let me       = this,
             config   = {appName: me.appName, parentId: me.id, parentIndex: index, windowId: me.windowId},
-            defaults = {theme: me.theme, ...me.itemDefaults},
+            defaults = {...me.itemDefaults},
             lazyLoadItem, module;
 
         if (defaults) {
@@ -319,6 +319,7 @@ class Container extends Component {
         switch (Neo.typeOf(item)) {
             case 'NeoClass': {
                 item = Neo.create({
+                    theme: item.config.theme || me.theme,
                     ...defaults,
                     module: item,
                     ...config
@@ -350,7 +351,8 @@ class Container extends Component {
                 lazyLoadItem = module && !module.isClass && Neo.isFunction(module);
 
                 if (module && !lazyLoadItem) {
-                    item.className = module.prototype.className
+                    item.className = module.prototype.className;
+                    item.theme     = defaults.theme || module.config.theme || me.theme
                 }
 
                 if (item.handlerScope === 'this') {

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/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/manager/Component.mjs

@@ -35,7 +35,7 @@ class Component extends Manager {
         let me = this;
 
         Neo.first        = me.getFirst.bind(me); // alias
-        Neo.getComponent = me.getById.bind(me)   // alias
+        Neo.getComponent = me.get     .bind(me)  // alias
     }
 
     /**
@@ -157,7 +157,7 @@ class Component extends Manager {
     }
 
     /**
-     * @param {Array} path
+     * @param {Object[]} path
      * @returns {String|null} the component id in case there is a match
      */
     findParentComponent(path) {
@@ -179,11 +179,20 @@ class Component extends Manager {
 
     /**
      * Returns the object associated to the key, or null if there is none.
-     * @param key
+     * @param {Number|String} key
+     * @param {Boolean}       [includeWrapperNodes=true]
      * @returns {Neo.component.Base|null}
      */
-    get(key) {
-        return this.wrapperNodes.get(key) || super.get(key)
+    get(key, includeWrapperNodes=true) {
+        if (includeWrapperNodes) {
+            let wrapperNode = this.wrapperNodes.get(key);
+
+            if (wrapperNode) {
+                return wrapperNode
+            }
+        }
+
+        return super.get(key)
     }
 
     /**
@@ -333,7 +342,7 @@ class Component extends Manager {
         let parentIds = [];
 
         while (component?.parentId) {
-            component = this.getById(component.parentId);
+            component = this.get(component.parentId);
 
             if (component) {
                 parentIds.push(component.id)
@@ -369,13 +378,13 @@ class Component extends Manager {
      */
     getParents(component) {
         if (Neo.isString(component)) {
-            component = this.getById(component)
+            component = this.get(component)
         }
 
         let parents = [];
 
         while (component?.parentId) {
-            component = this.getById(component.parentId);
+            component = this.get(component.parentId);
 
             if (component) {
                 parents.push(component)
@@ -509,7 +518,7 @@ class Component extends Manager {
      * @returns {Neo.component.Base|Neo.component.Base[]|null}
      */
     up(componentId, config, returnFirstMatch=true) {
-        let component   = this.getById(componentId),
+        let component   = this.get(componentId),
             returnArray = [],
             configArray, configLength, matchArray;
 
@@ -525,7 +534,7 @@ class Component extends Manager {
         configLength = configArray.length;
 
         while (component?.parentId) {
-            component = this.getById(component.parentId);
+            component = this.get(component.parentId);
 
             if (!component) {
                 return returnFirstMatch ? null : returnArray

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/util/Logger.mjs

@@ -163,7 +163,7 @@ class Logger extends Base {
                 component;
 
             data.path.forEach(item => {
-                component = Neo.getComponent(item.id);
+                component = Neo.getComponent(item.id, false);
 
                 if (component) {
                     if (!isGroupSet) {

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%;
-    }
-}