neo.mjs 6.4.2 → 6.5.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.4.2'
+         * @member {String} version='6.5.0'
          */
-        version: '6.4.2'
+        version: '6.5.0'
     }
 
     /**

package/apps/form/view/pages/Page4.mjs

@@ -20,7 +20,7 @@ class Page4 extends FormPageContainer {
             groupRequired : true,
             labelText     : null,
             labelWidth    : 70,
-            name          : 'fruits',
+            name          : 'my.fruits[0].basket',
             showErrorTexts: false
         },
         /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.4.2'
+         * @member {String} version='6.5.0'
          */
-        version: '6.4.2'
+        version: '6.5.0'
     }
 
     /**

package/examples/table/container/MainContainer.mjs

@@ -83,6 +83,27 @@ class MainContainer extends ConfigurationViewport {
             labelText: 'sortable',
             listeners: {change: me.onConfigChange.bind(me, 'sortable')},
             style    : {marginTop: '10px'}
+        }, {
+            module   : Checkbox,
+            checked  : false,
+            labelText: 'Fit width',
+            listeners: {
+                change({ value }) {
+                    const { style } = me.exampleComponent;
+
+                    if (value) {
+                        style.width = '100%';
+                        style.tableLayout = 'fixed';
+                    } else {
+                        style.width = '';
+                        style.tableLayout = '';
+                    }
+
+                    me.exampleComponent.style = style;
+                    me.exampleComponent.update();
+                }
+            },
+            style    : {marginTop: '10px'}
         }];
     }
 
@@ -102,16 +123,43 @@ class MainContainer extends ConfigurationViewport {
                 {dataField: 'country',   text: 'Country'},
                 {
                     text: 'Edit Action',
-                    renderer: data => {
-                        let button = Neo.create({
-                            module  : Button,
-                            appName : this.appName,
-                            handler : this.editButtonHandler,
-                            parentId: 'myTableStoreContainer',
-                            text    : 'Edit'
-                        });
+                    renderer: ({ column, index }) => {
+                        const
+                            widgetId = `${column.id}-widget-${index}`,
+                            button = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create({
+                                module  : Button,
+                                appName : this.appName,
+                                handler : this.editButtonHandler,
+                                parentId: 'myTableStoreContainer',
+                                text    : 'Edit'
+                            }));
+
+                        return button.vdom;
+                    }
+                },
+                {
+                    text : 'Menu',
+                    renderer({ column, record, index }) {
+                        const
+                            widgetId = `${column.id}-widget-${index}`,
+                            button = (column.widgetMap || (column.widgetMap = {}))[widgetId] || (column.widgetMap[widgetId] = Neo.create('Neo.button.Base', {
+                                ntype   : 'button',
+                                appName : this.appName,
+                                text    : '\u22ee',
+                                menu    : {
+                                    items : [{
+                                        text : 'Menu option 1'
+                                    }, {
+                                        text : 'Menu option 2'
+                                    }, {
+                                        text : 'Menu option 3'
+                                    }, {
+                                        text : 'Menu option 4'
+                                    }]
+                                }
+                            }));
 
-                        return button.vdom
+                            return button.vdom;
                     }
                 }
             ]

package/package.json

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

package/resources/scss/src/component/Base.scss

@@ -1,8 +1,9 @@
 .neo-floating {
-    top      : -10000px;
-    left     : -10000px;
-    position : fixed;
-    z-index  : 1000;
+    top              : -10000px;
+    left             : -10000px;
+    position         : fixed;
+    z-index          : 1000;
+    background-color : var(--neo-background-color);
 }
 
 // Shadow at the top

package/src/DefaultConfig.mjs

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

package/src/calendar/view/EditEventContainer.mjs

@@ -81,7 +81,7 @@ class EditEventContainer extends FormContainer {
         super.construct(config);
 
         // focus trap, see: https://github.com/neomjs/neo/issues/2306
-        this.vdom.tabIndex = -1;
+        this.vdom.tabIndex = -1
     }
 
     /**
@@ -92,7 +92,7 @@ class EditEventContainer extends FormContainer {
      */
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
-        value && this.getField('title').focus();
+        value && this.getField('title').then(field => field.focus())
     }
 
     /**
@@ -106,17 +106,17 @@ class EditEventContainer extends FormContainer {
             let me         = this,
                 timeFormat = me.intlFormat_time;
 
-            me.getField('endTime')  .minValue = me.getEndTimeMinValue(value);
-            me.getField('startTime').maxValue = me.getStartTimeMaxValue(value);
+            me.getField('endTime')  .then(field => field.minValue = me.getEndTimeMinValue(value));
+            me.getField('startTime').then(field => field.maxValue = me.getStartTimeMaxValue(value));
 
             me.reset({
                 calendarId: value.calendarId,
                 endTime   : timeFormat.format(value.endDate),
                 startTime : timeFormat.format(value.startDate),
                 title     : value.title
-            });
+            })
         } else if (value) {
-            this.createItems();
+            this.createItems()
         }
     }
 
@@ -205,7 +205,7 @@ class EditEventContainer extends FormContainer {
                 text   : 'Delete'
             }];
 
-            super.createItems();
+            super.createItems()
         }
     }
 
@@ -256,13 +256,13 @@ class EditEventContainer extends FormContainer {
     /**
      * @param {Object} data
      */
-    onFocusLeave(data) {
+    async onFocusLeave(data) {
         let me = this;
 
         // we need a short delay, since a TimeField picker could be open
-        setTimeout(() => {
-            me.mounted && me.unmount();
-        }, 100);
+        await me.timeout(100);
+
+        me.mounted && me.unmount()
     }
 
     /**
@@ -282,9 +282,9 @@ class EditEventContainer extends FormContainer {
         record[field] = date;
 
         if (name === 'endTime') {
-            me.getField('startTime').maxValue = me.getStartTimeMaxValue(record);
+            me.getField('startTime').then(field => field.maxValue = me.getStartTimeMaxValue(record))
         } else {
-            me.getField('endTime')  .minValue = me.getEndTimeMinValue(record);
+            me.getField('endTime')  .then(field => field.minValue = me.getEndTimeMinValue(record))
         }
     }
 

package/src/component/Base.mjs

@@ -349,23 +349,6 @@ class Base extends CoreBase {
         return Neo.apps[this.appName] || null
     }
 
-    /**
-     * Convenience method
-     * @returns {Boolean}
-     */
-    get isVdomUpdating() {
-        // The VDOM is being updated if we have the promise that executeVdomUpdate uses
-        return Boolean(this.vdomUpdate);
-    }
-    // Allow the Component to be set to the isVdomUpdating state
-    set isVdomUpdating(isVdomUpdating) {
-        isVdomUpdating = Boolean(isVdomUpdating);
-
-        if (isVdomUpdating !== this.isVdomUpdating) {
-            this.vdomUpdate = isVdomUpdating;
-        }
-    }
-
     /**
      * Apply component based listeners
      * @member {Object} listeners={}
@@ -967,7 +950,7 @@ class Base extends CoreBase {
         // Just a simple 't-b'
         if (typeof align === 'string') {
             align = {
-                edgeAlign : align
+                edgeAlign: align
             };
         }
         // merge the incoming alignment specification into the configured default
@@ -987,8 +970,8 @@ class Base extends CoreBase {
     /**
      * Triggered before the controller config gets changed.
      * Creates a controller.Component instance if needed.
-     * @param {Object} value
-     * @param {Object} oldValue
+     * @param {Neo.controller.Component|Object} value
+     * @param {Neo.controller.Component|null} oldValue
      * @returns {Neo.controller.Component}
      * @protected
      */
@@ -1105,7 +1088,14 @@ class Base extends CoreBase {
         return (Neo.isNumber(oldValue) && oldValue > 0) ? (oldValue - 1) : 0
     }
 
-    beforeSetStyle(value) {
+    /**
+     * Triggered before the style config gets changed.
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @returns {Object}
+     * @protected
+     */
+    beforeSetStyle(value, oldValue) {
         let me = this;
 
         if (typeof value === 'object') {
@@ -1241,26 +1231,20 @@ class Base extends CoreBase {
             opts.appName = me.appName
         }
 
-        /**
-         * If a VDOM update is in flight, this is the Promise that will resolve when
-         * the update is completed.
-         * @member {Promise|null} vdomUpdate
-         * @protected
-         */
-        me.vdomUpdate = Neo.vdom.Helper.update(opts);
+        me.isVdomUpdating = true;
 
         // we can not set the config directly => it could already be false,
         // and we still want to pass it further into subtrees
         me._needsVdomUpdate = false;
         me.afterSetNeedsVdomUpdate?.(false, true)
 
-        me.vdomUpdate.catch(err => {
-            me.vdomUpdate = null;
+        Neo.vdom.Helper.update(opts).catch(err => {
+            me.isVdomUpdating = false;
             console.log('Error attempting to update component dom', err, me);
 
             reject?.()
         }).then(data => {
-            me.vdomUpdate = null;
+            me.isVdomUpdating = false;
             // checking if the component got destroyed before the update cycle is done
             if (me.id) {
                 // console.log('Component vnode updated', data);
@@ -1276,9 +1260,7 @@ class Base extends CoreBase {
                     me.resolveVdomUpdate(resolve)
                 }
             }
-        });
-
-        return me.vdomUpdate;
+        })
     }
 
     /**
@@ -1351,26 +1333,31 @@ class Base extends CoreBase {
      * @returns {Promise<Neo.util.Rectangle>}
      */
     async getDomRect(id=this.id, appName=this.appName) {
-        const
-            {
-                x,
-                y,
-                width,
-                height,
-                minWidth,
-                minHeight
-            }      = await Neo.main.DomAccess.getBoundingClientRect({appName, id}),
-            result = new Rectangle(x, y, width, height);
-
-        if (minWidth) {
-            result.minWidth = minWidth;
+        if (Array.isArray(id)) {
+            return await Neo.main.DomAccess.getBoundingClientRect({appName, id});
         }
+        else {
+            const
+                {
+                    x,
+                    y,
+                    width,
+                    height,
+                    minWidth,
+                    minHeight
+                }      = await Neo.main.DomAccess.getBoundingClientRect({appName, id}),
+                result = new Rectangle(x, y, width, height);
+
+            if (minWidth) {
+                result.minWidth = minWidth;
+            }
 
-        if (minHeight) {
-            result.minHeight = minHeight;
-        }
+            if (minHeight) {
+                result.minHeight = minHeight;
+            }
 
-        return result;
+            return result;
+        }
     }
 
     /**
@@ -2284,10 +2271,10 @@ class Base extends CoreBase {
                 }
 
                 if (
-                    mounted
-                    && vnode
-                    && !me.needsParentUpdate(me.parentId, resolve)
+                    !me.needsParentUpdate(me.parentId, resolve)
                     && !me.isParentVdomUpdating(me.parentId, resolve)
+                    && mounted
+                    && vnode
                 ) {
                     me.#executeVdomUpdate(vdom, vnode, resolve, reject)
                 }

package/src/form/Container.mjs

@@ -1,6 +1,7 @@
 import BaseContainer    from '../container/Base.mjs';
 import BaseField        from '../form/field/Base.mjs';
 import ComponentManager from '../manager/Component.mjs';
+import NeoArray         from '../util/Array.mjs';
 
 /**
  * @class Neo.form.Container
@@ -35,25 +36,29 @@ class Container extends BaseContainer {
      * The logic assumes that field config values must not be objects (separation between the key & value realm).
      * @param {Object} values
      * @param {String} configName
+     * @param {String[]} fieldPaths
+     * @param {String} currentPath=''
      */
-    static adjustTreeLeaves(values={}, configName) {
-        let assign,type;
+    static adjustTreeLeaves(values={}, configName, fieldPaths, currentPath='') {
+        let assign, newPath, type;
 
         Object.entries(values).forEach(([key, value]) => {
-            assign = true;
-            type   = Neo.typeOf(value);
+            assign  = true;
+            newPath = currentPath === '' ? key : `${currentPath}.${key}`;
+            type    = Neo.typeOf(value);
 
-            if (type === 'Array') {
-                assign = false;
+            if (type === 'Array' || type === 'Object') {
+                assign = fieldPaths.includes(newPath);
 
-                value.forEach(item => {
-                    if (Neo.typeOf(item) === 'Object') {
-                        this.adjustTreeLeaves(item, configName)
-                    }
-                })
-            } else if (type === 'Object') {
-                assign = false;
-                this.adjustTreeLeaves(value, configName)
+                if (type === 'Array') {
+                    value.forEach((item, index) => {
+                        if (Neo.typeOf(item) === 'Object') {
+                            this.adjustTreeLeaves(item, configName, fieldPaths, `${newPath}[${index}]`)
+                        }
+                    })
+                } else if (type === 'Object') {
+                    this.adjustTreeLeaves(value, configName, fieldPaths, newPath)
+                }
             }
 
             if (assign) {
@@ -307,7 +312,16 @@ class Container extends BaseContainer {
      * @param {Boolean} suspendEvents=false
      */
     async setValues(values={}, suspendEvents=false) {
-        Container.adjustTreeLeaves(values, 'value');
+        let fields     = await this.getFields(),
+            fieldPaths = [];
+
+        // Grouped CheckBoxes & Radios can have the same path
+        // => using NeoArray to ensure they only get added once
+        fields.map(field => NeoArray.add(fieldPaths, field.getPath()));
+
+        values = Neo.clone(values, true);
+
+        Container.adjustTreeLeaves(values, 'value', fieldPaths);
 
         await this.setConfigs(values, suspendEvents)
     }

package/src/grid/View.mjs

@@ -83,6 +83,7 @@ class View extends Component {
                 }
 
                 rendererOutput = column.renderer.call(column.rendererScope || container, {
+                    column,
                     field: column.field,
                     index: i,
                     record,

package/src/main/DomAccess.mjs

@@ -102,9 +102,7 @@ class DomAccess extends Base {
     construct(config) {
         super.construct(config);
 
-        const
-            me              = this,
-            syncAligns      = me.syncAligns.bind(me);
+        const me = this;
 
         if (Neo.config.renderCountDeltas) {
             let node;
@@ -122,7 +120,7 @@ class DomAccess extends Base {
 
         // Set up our aligning callback which is called when things change which may
         // mean that alignments need to be updated.
-        me.syncAligns = () => requestAnimationFrame(syncAligns);
+        me.syncAligns = me.syncAligns.bind(me);
     }
 
     /**
@@ -211,8 +209,14 @@ class DomAccess extends Base {
         me.resetDimensions(align);
 
         // The Rectangle's align spec target and constrainTo must be Rectangles
-        align.target = me.getBoundingClientRect({ id : data.targetElement = me.getElementOrBody(data.target) });
-        data.offsetParent = data.targetElement.offsetParent
+        align.target = me.getClippedRect({ id : data.targetElement = me.getElementOrBody(data.target) });
+
+        if (!align.target) {
+            // Set the Component with id data.id to hidden : true
+            return Neo.worker.App.setConfigs({ id : data.id, hidden : true });
+        }
+
+        data.offsetParent = data.targetElement.offsetParent;
         if (constrainTo) {
             align.constrainTo = me.getBoundingClientRect({ id : data.constrainToElement = me.getElementOrBody(constrainTo) });
         }
@@ -338,13 +342,9 @@ class DomAccess extends Base {
         let returnData;
 
         if (Array.isArray(data.id)) {
-            returnData = [];
-
-            data.id.forEach(id => {
-                returnData.push(this.getBoundingClientRect({id: id}));
-            });
+            return data.id.map(id => this.getBoundingClientRect({ id }));
         } else {
-            let node = this.getElementOrBody(data.id),
+            let node = this.getElementOrBody(data.nodeType ? data : data.id),
                 rect = {}, style, minWidth, minHeight;
 
             returnData = {};
@@ -352,7 +352,7 @@ class DomAccess extends Base {
             if (node) {
                 rect      = node.getBoundingClientRect();
                 style     = node.ownerDocument.defaultView.getComputedStyle(node);
-                minWidth  = style.getPropertyValue('min-width'),
+                minWidth  = style.getPropertyValue('min-width');
                 minHeight = style.getPropertyValue('min-height');
 
                 // DomRect does not support spreading => {...DomRect} => {}
@@ -373,6 +373,20 @@ class DomAccess extends Base {
         return returnData;
     }
 
+    getClippedRect(data) {
+        let node            = this.getElement(typeof data === 'object' ? data.id : data),
+            { defaultView } = node.ownerDocument,
+            rect            = this.getBoundingClientRect(node);
+
+        for (let parentElement = node.offsetParent; rect && parentElement !== document.documentElement; parentElement = parentElement.parentElement) {
+            if (defaultView.getComputedStyle(parentElement).getPropertyValue('overflow') !== 'visible') {
+                rect = rect.intersects(this.getBoundingClientRect(parentElement));
+            }
+        }
+
+        return rect;
+    }
+
     onDocumentMutation(mutations) {
         const me = this;
 

package/src/table/View.mjs

@@ -67,6 +67,7 @@ class View extends Component {
         }
 
         rendererOutput = column.renderer.call(column.rendererScope || tableContainer, {
+            column,
             dataField,
             index,
             record,

package/src/util/Rectangle.mjs

@@ -273,11 +273,11 @@ export default class Rectangle extends DOMRect {
                 top    = Math.max(me.y, other.y),
                 right  = Math.min(me.x + me.width, other.x + other.width),
                 bottom = Math.min(me.y + me.height, other.y + other.height);
-        
+
             if (left >= right || top >= bottom) {
                 return false;
             }
-        
+
             return new Rectangle(left, top, right - left, bottom - top);
         }
         // We're dealing with a point here - zero dimensions
@@ -300,8 +300,8 @@ export default class Rectangle extends DOMRect {
 
     /**
      * Returns a clone of this Rectangle expanded according to the edges array.
-     * @param {Number}Number[]} edges 
-     * @returns 
+     * @param {Number}Number[]} edges
+     * @returns {Rectangle}
      */
     expand(edges) {
         edges = parseEdgeValue(edges);
@@ -323,7 +323,7 @@ export default class Rectangle extends DOMRect {
 
     /**
      * Returns `true` if this Rectangle completely contains the other Rectangle
-     * @param {Rectangle} other 
+     * @param {Rectangle} other
      */
     contains(other) {
         return this.constructor.includes(this, other);
@@ -362,10 +362,6 @@ export default class Rectangle extends DOMRect {
     alignTo(align) {
         const
             me             = this,
-            {
-                minWidth,
-                minHeight
-            }              = me,
             {
                 constrainTo,    // Element or Rectangle result must fit into
                 target,         // Element or Rectangle to align to
@@ -391,7 +387,7 @@ export default class Rectangle extends DOMRect {
             myPoint     = result.getAnchorPoint(edges.ourEdgeZone, edges.ourEdgeOffset, edges.ourEdgeUnit),
             targetPoint = targetRect.getAnchorPoint(edges.theirEdgeZone, edges.theirEdgeOffset, edges.theirEdgeUnit, targetMargin),
             vector      = [targetPoint[0] - myPoint[0], targetPoint[1] - myPoint[1]];
- 
+
         result = result.moveBy(vector);
 
         // A useful property in the resulting rectangle which specifies which zone of the target
@@ -453,17 +449,15 @@ export default class Rectangle extends DOMRect {
                     edgeAlign : createReversedEdgeAlign(edges)
                 }
 
-                // Fall back to the other two zones if we are allowed to
-                if (axisLock === 'flexible') {
-                    zonesToTry.push({
-                        zone      : zone = (alignSpec.startZone + 1) % 4,
-                        edgeAlign : `${oppositeEdge[zoneEdges[zone]]}-${zoneEdges[zone]}`
-                    });
-                    zonesToTry.push({
-                        zone      : zone = (zone + 2) % 4,
-                        edgeAlign : `${oppositeEdge[zoneEdges[zone]]}-${zoneEdges[zone]}`
-                    });
-                }
+                // Fall back to the other two zones.
+                zonesToTry.push({
+                    zone      : zone = (alignSpec.startZone + 1) % 4,
+                    edgeAlign : `${oppositeEdge[zoneEdges[zone]]}-${zoneEdges[zone]}`
+                });
+                zonesToTry.push({
+                    zone      : zone = (zone + 2) % 4,
+                    edgeAlign : `${oppositeEdge[zoneEdges[zone]]}-${zoneEdges[zone]}`
+                });
             }
             else {
                 // go through the other zones in order
@@ -536,6 +530,11 @@ export default class Rectangle extends DOMRect {
             }
         }
 
+        // Add the configurable finishing touch.
+        if (offset) {
+            result.moveBy(offset);
+        }
+
         return result;
     }
 
@@ -566,7 +565,7 @@ export default class Rectangle extends DOMRect {
     }
 
     equals(other) {
-        return other instanceof DOMRect && 
+        return other instanceof DOMRect &&
             other.x === this.x &&
             other.y === this.y &&
             other.height === this.height &&

package/src/worker/App.mjs

@@ -28,7 +28,8 @@ class App extends Base {
         remote: {
             main: [
                 'createNeoInstance',
-                'destroyNeoInstance'
+                'destroyNeoInstance',
+                'setConfigs'
             ]
         },
         /**
@@ -386,6 +387,24 @@ class App extends Base {
         me.themeFilesCache = []
     }
 
+    /**
+     * Set configs of any app realm based Neo instance from main
+     * @param {Object} data
+     * @param {String} data.id
+     */
+    setConfigs(data) {
+        let instance = Neo.get(data.id);
+
+        if (instance) {
+            delete data.id;
+            instance.set(data);
+
+            return true
+        }
+
+        return false
+    }
+
     /**
      * @param {Object} data
      * @param {String} data.key