neo.mjs 6.7.2 → 6.7.3

package/apps/ServiceWorker.mjs

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

package/examples/ServiceWorker.mjs

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

package/package.json

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

package/src/DefaultConfig.mjs

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

package/src/component/Base.mjs

@@ -1362,31 +1362,13 @@ class Base extends CoreBase {
      * @returns {Promise<Neo.util.Rectangle>}
      */
     async getDomRect(id=this.id, appName=this.appName) {
-        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;
-            }
+        const result = await Neo.main.DomAccess.getBoundingClientRect({appName, id});
 
-            if (minHeight) {
-                result.minHeight = minHeight;
-            }
-
-            return result;
+        if (Array.isArray(result)) {
+            return result.map(rect => Rectangle.clone(rect))
         }
+
+        return Rectangle.clone(result)
     }
 
     /**

package/src/draggable/toolbar/SortZone.mjs

@@ -263,17 +263,17 @@ class SortZone extends DragZone {
             map       = me.indexMap,
             rect1     = itemRects[index1],
             rect2     = itemRects[index2],
-            rect1Copy = {...rect1},
-            rect2Copy = {...rect2};
+            rect1Copy = rect1.clone(),
+            rect2Copy = rect2.clone();
 
         if (me.sortDirection === 'horizontal') {
             rect1.width = rect2Copy.width;
-            rect2.left  = rect1Copy.left + rect2Copy.width;
+            rect2.x     = rect1Copy.x + rect2Copy.width;
             rect2.width = rect1Copy.width;
         } else {
             rect1.height = rect2Copy.height;
             rect2.height = rect1Copy.height;
-            rect2.top    = rect1Copy.top + rect2Copy.height;
+            rect2.y      = rect1Copy.y + rect2Copy.height;
         }
 
         tmp         = map[index1];

package/src/form/field/Text.mjs

@@ -75,6 +75,11 @@ class Text extends Base {
          * @member {String[]|null} disabledChars_=null
          */
         disabledChars_: null,
+        /**
+         * Configure the value of empty fields. null or an empty string is recommended.
+         * @member {String|null} emptyValue=null
+         */
+        emptyValue: null,
         /**
          * @member {String|null} error_=null
          */
@@ -950,6 +955,21 @@ class Text extends Base {
         return value
     }
 
+    /**
+     * Triggered before the value config gets changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @returns {String|null}
+     * @protected
+     */
+    beforeSetValue(value, oldValue) {
+        if (value === null || value === '') {
+            return this.emptyValue
+        }
+
+        return value
+    }
+
     /**
      * Resets the field to its original value or null depending on the clearToOriginalValue config
      */

package/src/main/DomAccess.mjs

@@ -351,16 +351,18 @@ class DomAccess extends Base {
      * Returns node.getBoundingClientRect() for a given dom node id
      * @param {Object} data
      * @param {Array|String} data.id either an id or an array of ids
-     * @returns {Array|Object} In case id is an array, an array of DomRects is returned, otherwise an DomRect object
+     * @returns {DOMRect|DOMRect[]} In case id is an array, an array of DomRects is returned, otherwise an DomRect object
      */
     getBoundingClientRect(data) {
-        let returnData;
+        let me = this,
+            returnData;
 
         if (Array.isArray(data.id)) {
-            return data.id.map(id => this.getBoundingClientRect({ id }));
+            return data.id.map(id => me.getBoundingClientRect({ id }));
         } else {
-            let node = this.getElementOrBody(data.nodeType ? data : data.id),
-                rect = {}, style, minWidth, minHeight;
+            let node = me.getElementOrBody(data.nodeType ? data : data.id),
+                rect = {},
+                minWidth, minHeight, style;
 
             returnData = {};
 
@@ -377,15 +379,15 @@ class DomAccess extends Base {
                 // Note that 0px is what the DOM reports if no minWidth is specified
                 // so we do not report a minimum in these cases.
                 if (lengthRE.test(minWidth) && minWidth !== '0px') {
-                    returnData.minWidth = this.measure({ value : minWidth, id : node});
+                    returnData.minWidth = me.measure({ value : minWidth, id : node})
                 }
                 if (lengthRE.test(minHeight) && minHeight !== '0px') {
-                    returnData.minHeight = this.measure({ value : minHeight, id : node });
+                    returnData.minHeight = me.measure({ value : minHeight, id : node })
                 }
             }
         }
 
-        return returnData;
+        return returnData
     }
 
     getClippedRect(data) {
@@ -395,11 +397,11 @@ class DomAccess extends Base {
 
         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));
+                rect = rect.intersects(this.getBoundingClientRect(parentElement))
             }
         }
 
-        return rect;
+        return rect
     }
 
     onDocumentMutation(mutations) {

package/src/table/Container.mjs

@@ -114,6 +114,22 @@ class Container extends BaseContainer {
         ]}
     }
 
+    /**
+     * Convenience method to access the Neo.table.header.Toolbar
+     * @returns {Neo.table.header.Toolbar|null}
+     */
+    get headerToolbar() {
+        return Neo.getComponent(this.headerToolbarId) || Neo.get(this.headerToolbarId)
+    }
+
+    /**
+     * Convenience method to access the Neo.table.View
+     * @returns {Neo.table.View|null}
+     */
+    get view() {
+        return Neo.getComponent(this.viewId) || Neo.get(this.viewId)
+    }
+
     /**
      * @param {Object} config
      */
@@ -163,7 +179,7 @@ class Container extends BaseContainer {
      */
     afterSetShowHeaderFilters(value, oldValue) {
         if (oldValue !== undefined) {
-            Neo.getComponent(this.headerToolbarId).showHeaderFilters = value
+            this.headerToolbar.showHeaderFilters = value
         }
     }
 
@@ -175,7 +191,7 @@ class Container extends BaseContainer {
      */
     afterSetSortable(value, oldValue) {
         if (oldValue !== undefined) {
-            Neo.getComponent(this.headerToolbarId).sortable = value
+            this.headerToolbar.sortable = value
         }
     }
 
@@ -378,13 +394,6 @@ class Container extends BaseContainer {
         return this.vdom.cn[0]
     }
 
-    /**
-     * @returns {Neo.table.View}
-     */
-    getView() {
-        return Neo.getComponent(this.viewId) || Neo.get(this.viewId)
-    }
-
     /**
      * @override
      * @returns {Neo.vdom.VNode}
@@ -487,7 +496,7 @@ class Container extends BaseContainer {
      * @param {*} opts.value
      */
     onStoreRecordChange(opts) {
-        Neo.getComponent(this.viewId).onStoreRecordChange(opts)
+        this.view.onStoreRecordChange(opts)
     }
 
     /**

package/src/table/header/Button.mjs

@@ -134,12 +134,12 @@ class Button extends BaseButton {
         let me = this;
 
         if (value === true) {
-            me.getVdomRoot().draggable = true;
+            me.getVdomRoot().draggable = true
         } else {
-            delete me.getVdomRoot().draggable;
+            delete me.getVdomRoot().draggable
         }
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -173,13 +173,13 @@ class Button extends BaseButton {
 
         // testing check until all example tables have a store
         if (!container || !container.store) {
-            return;
+            return
         }
 
         me.mounted && me.fire('sort', {
             direction: value,
             property : me.dataField
-        });
+        })
     }
 
     /**
@@ -213,15 +213,15 @@ class Button extends BaseButton {
                     ...me.editorConfig
                 });
 
-                me.vdom.cn.push(me.filterField.vdom);
+                me.vdom.cn.push(me.filterField.vdom)
             } else {
-                delete me.filterField.vdom.removeDom;
+                delete me.filterField.vdom.removeDom
             }
         } else if (me.filterField) {
-            me.filterField.vdom.removeDom = true;
+            me.filterField.vdom.removeDom = true
         }
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -236,20 +236,22 @@ class Button extends BaseButton {
 
         if (value === true) {
             NeoArray.remove(cls, 'neo-sort-hidden');
+
             me.addDomListeners({
                 click: me.onButtonClick,
                 scope: me
-            });
+            })
         } else {
             NeoArray.add(cls, 'neo-sort-hidden');
+
             me.removeDomListeners({
                 click: me.onButtonClick,
                 scope: me
-            });
+            })
         }
 
         me.cls = cls;
-        me.update();
+        me.update()
     }
 
     /**
@@ -268,7 +270,7 @@ class Button extends BaseButton {
     destroy(...args) {
         this.filterField?.destroy();
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**
@@ -277,7 +279,7 @@ class Button extends BaseButton {
      * @returns {Object} The new vdom root
      */
     getVdomRoot() {
-        return this.vdom.cn[0];
+        return this.vdom.cn[0]
     }
 
     /**
@@ -286,7 +288,7 @@ class Button extends BaseButton {
      * @returns {Object} The new vnode root
      */
     getVnodeRoot() {
-        return this.vnode.childNodes[0];
+        return this.vnode.childNodes[0]
     }
 
     /**
@@ -301,16 +303,16 @@ class Button extends BaseButton {
                 ASC : null,
                 DESC: 'ASC',
                 null: 'DESC'
-            };
+            }
         } else {
             map = {
                 ASC : 'DESC',
                 DESC: null,
                 null: 'ASC'
-            };
+            }
         }
 
-        me.isSorted = map[me.isSorted + ''];
+        me.isSorted = map[me.isSorted + '']
     }
 
     /**
@@ -321,7 +323,7 @@ class Button extends BaseButton {
             style = me.style;
 
         delete style.opacity;
-        me.style = style;
+        me.style = style
     }
 
     /**
@@ -332,7 +334,7 @@ class Button extends BaseButton {
             cls = me.cls;
 
         NeoArray.add(cls, 'neo-drag-over');
-        me.cls = cls;
+        me.cls = cls
     }
 
     /**
@@ -343,7 +345,7 @@ class Button extends BaseButton {
             cls = me.cls;
 
         NeoArray.remove(cls, 'neo-drag-over');
-        me.cls = cls;
+        me.cls = cls
     }
 
     /**
@@ -361,7 +363,7 @@ class Button extends BaseButton {
             style = me.style;
 
         style.opacity = 0.4;
-        me.style = style;
+        me.style = style
     }
 
     /**
@@ -378,7 +380,7 @@ class Button extends BaseButton {
         tableContainer.createViewData(tableContainer.store.data);
 
         style.opacity = 1;
-        me.style = style;
+        me.style = style
     }
 
     /**
@@ -404,9 +406,9 @@ class Button extends BaseButton {
                     ...me.filterConfig
                 });
 
-                store.filters = filters;
+                store.filters = filters
             } else {
-                filter.operator = operator;
+                filter.operator = operator
             }
         }
     }
@@ -427,7 +429,7 @@ class Button extends BaseButton {
             field  = model && model.getField(me.dataField);
 
             if (value && field.type.toLowerCase() === 'date') {
-                value = new Date(value);
+                value = new Date(value)
             }
 
             if (!filter) {
@@ -440,9 +442,9 @@ class Button extends BaseButton {
                     ...me.filterConfig
                 });
 
-                store.filters = filters;
+                store.filters = filters
             } else {
-                filter.value = value;
+                filter.value = value
             }
         }
     }
@@ -457,7 +459,7 @@ class Button extends BaseButton {
         NeoArray.add(cls, 'neo-sort-hidden');
 
         me.cls       = cls;
-        me._isSorted = null;
+        me._isSorted = null
     }
 
     /**
@@ -469,7 +471,7 @@ class Button extends BaseButton {
      * @returns {*}
      */
     renderer(data) {
-        return data.value;
+        return data.value
     }
 }
 

package/src/table/header/Toolbar.mjs

@@ -60,10 +60,10 @@ class Toolbar extends BaseToolbar {
             me.items.forEach(item => {
                 item.setSilent({
                     showHeaderFilter: value
-                });
+                })
             });
 
-            me.update();
+            me.update()
         }
     }
 
@@ -80,10 +80,10 @@ class Toolbar extends BaseToolbar {
             me.items.forEach(item => {
                 item.setSilent({
                     sortable: value
-                });
+                })
             });
 
-            me.update();
+            me.update()
         }
     }
 
@@ -118,11 +118,11 @@ class Toolbar extends BaseToolbar {
                     style.left = dockLeftWidth + 'px';
                 }
 
-                dockLeftWidth += (item.width + 1); // todo: borders fix
+                dockLeftWidth += (item.width + 1) // todo: borders fix
             } else {
-                item.vdom.cls = []; // remove the button cls from the th tag
+                item.vdom.cls = [] // remove the button cls from the th tag
             }
-            
+
             item.sortable = me.sortable;
             item.wrapperStyle = style;
 
@@ -135,11 +135,11 @@ class Toolbar extends BaseToolbar {
 
                 item.wrapperStyle = style;
 
-                dockRightWidth += (item.width + 1); // todo: borders fix
+                dockRightWidth += (item.width + 1) // todo: borders fix
             }
         });
 
-        me.update();
+        me.update()
     }
 
     /**
@@ -148,7 +148,7 @@ class Toolbar extends BaseToolbar {
      * @override
      */
     getLayoutConfig(dock) {
-        return 'base';
+        return 'base'
     }
 
     /**
@@ -157,7 +157,7 @@ class Toolbar extends BaseToolbar {
      * @returns {Object} The new vdom root
      */
     getVdomRoot() {
-        return this.vdom.cn[0];
+        return this.vdom.cn[0]
     }
 
     /**
@@ -166,7 +166,7 @@ class Toolbar extends BaseToolbar {
      * @returns {Object} The new vnode root
      */
     getVnodeRoot() {
-        return this.vnode.childNodes[0];
+        return this.vnode.childNodes[0]
     }
 }
 

package/src/util/Rectangle.mjs

@@ -87,6 +87,15 @@ export default class Rectangle extends DOMRect {
         className: 'Neo.util.Rectangle'
     }
 
+    /**
+     * @member {Number|null} minHeight=null
+     */
+    minHeight = null
+    /**
+     * @member {Number|null} minWidth=null
+     */
+    minWidth = null
+
     /**
      * Checks if rect1 does not have an intersection with rect2
      * !includes() is true for intersections as well
@@ -587,4 +596,13 @@ export default class Rectangle extends DOMRect {
         setTimeout(() => div.remove(), 30000);
         return div;
     }
+
+    /**
+     * When using JSON.stringify(this), we want to add minHeight & minWidth to the output.
+     * @returns {Object}
+     */
+    toJSON() {
+        const {bottom, height, left, minHeight, minWidth, right, top, width, x, y} = this;
+        return {bottom, height, left, minHeight, minWidth, right, top, width, x, y}
+    }
 }