@easyquery/ui 7.3.4 → 7.3.5-rc01

package/dist/assets/css/easyquery.ui.css

@@ -5124,6 +5124,10 @@ input.eqjs-invalid {
 
 .eqjs-cb-addrow.eqjs-mobile a, .eqjs-sb-addrow.eqjs-mobile a {
     background: none!important;
+}
+
+.eqjs-menu-levelDiv {
+    max-height: 96vh;
 }
 /*setting to all page */
 #eqv-main{

package/dist/assets/css/upgrade.css

@@ -452,4 +452,8 @@
 
 .eqjs-cb-addrow.eqjs-mobile a, .eqjs-sb-addrow.eqjs-mobile a {
     background: none!important;
+}
+
+.eqjs-menu-levelDiv {
+    max-height: 96vh;
 }

package/dist/easyquery.ui.cjs.js

@@ -1425,6 +1425,7 @@ class MenuLevel {
         //crocodile
         this.turnCheckboxes(this.items);
         this.renderItems();
+        const winSize = ui.getWinSize();
         const levelStyle = this.levelDiv.style;
         if (hidden) {
             this.levelDiv.style.visibility = 'hidden';
@@ -1434,20 +1435,60 @@ class MenuLevel {
         levelStyle.top = y + 'px';
         this.scrollDiv.style.width = "auto";
         this.scrollDiv.style.height = "auto";
-        if (this.parentMenu.options.useMaxSpace === false) {
-            const winSize = ui.getWinSize().height;
-            if (y > winSize / 2 && this.scrollDiv.scrollHeight > winSize / 2) {
-                this.scrollDiv.style.height = (y - 16 - 56) + 'px';
-                levelStyle.top = 0 + 'px';
+        const useMaxSpace = this.parentMenu.options.useMaxSpace;
+        if (useMaxSpace === false) {
+            const levelDivRect = this.levelDiv.getBoundingClientRect();
+            const ldHeight = levelDivRect.height;
+            const vpHeight = winSize.height;
+            const top = y - 16 - scrollY;
+            const bottom = vpHeight - top;
+            if (top > bottom) {
+                // console.log("top > bottom");
+                if (ldHeight > bottom) {
+                    let maxHeight = top;
+                    if (this.searchDiv != null) {
+                        maxHeight -= this.searchDiv.offsetHeight;
+                    }
+                    if (this.closeDiv != null) {
+                        maxHeight -= this.closeDiv.offsetHeight;
+                    }
+                    this.scrollDiv.style.maxHeight = (maxHeight - 24) + 'px';
+                    this.levelDiv.style.top = Math.max(6, y - ldHeight - 24) + 'px';
+                }
             }
-            else if (this.scrollDiv.scrollHeight > winSize / 2) {
-                this.scrollDiv.style.height = (winSize - y - 56) + 'px';
+            else {
+                // console.log("bottom > top");
+                this.scrollDiv.style.maxHeight = (bottom - 80) + 'px';
             }
         }
         //adjusting level top position
-        if (adjustTopPos) {
+        if (useMaxSpace) {
             y = this.adjustTopPos(y);
             levelStyle.top = y + 'px';
+            //adjustinng maximum height of the menu level if it does not fit to browser window
+            let maxHeight = winSize.height - (y - ui.getScrollPos().top) - 15; //document.documentElement.scrollTop
+            if (this.parentMenu.maxHeight > 0 && maxHeight > this.parentMenu.maxHeight) {
+                maxHeight = this.parentMenu.maxHeight;
+            }
+            if (this._applyItem != null && this._applyItem.itemDiv != null) {
+                maxHeight -= this._applyItem.itemDiv.offsetHeight + 5;
+            }
+            if (this.searchDiv != null) {
+                maxHeight -= this.searchDiv.offsetHeight;
+            }
+            if (this.closeDiv != null) {
+                maxHeight -= this.closeDiv.offsetHeight;
+            }
+            if (this.levelDiv.offsetHeight > maxHeight) {
+                let newHeight = maxHeight;
+                if (newHeight < 50) {
+                    newHeight = 50;
+                }
+                this.scrollDiv.style.height = newHeight + "px";
+            }
+            else {
+                this.scrollDiv.style.height = "auto";
+            }
         }
         //setting minimal level width if it is defined
         let minItemWidth = this.parentMenu.minItemWidth;
@@ -1463,30 +1504,6 @@ class MenuLevel {
                 this.items[i].itemDiv.style.overflowX = "hidden";
             }
         }
-        const winSize = ui.getWinSize();
-        //adjustinng maximum height of the menu level if it does not fit to browser window
-        let maxHeight = winSize.height - (y - ui.getScrollPos().top) - 15; //document.documentElement.scrollTop
-        if (this.parentMenu.maxHeight > 0 && maxHeight > this.parentMenu.maxHeight) {
-            maxHeight = this.parentMenu.maxHeight;
-        }
-        if (this._applyItem != null && this._applyItem.itemDiv != null) {
-            maxHeight -= this._applyItem.itemDiv.offsetHeight + 5;
-        }
-        if (this.searchDiv != null) {
-            maxHeight -= this.searchDiv.offsetHeight;
-        }
-        if (this.closeDiv != null) {
-            maxHeight -= this.closeDiv.offsetHeight;
-        }
-        // if (this.levelDiv.offsetHeight > maxHeight) {
-        //     let newHeight = maxHeight;
-        //     if (newHeight < 50) { newHeight = 50; }
-        //
-        //     this.scrollDiv.style.height = newHeight + "px";
-        // }
-        // else {
-        //     this.scrollDiv.style.height = "auto";
-        // }
         this.activeItem = null;
     }
     focus() {
@@ -1791,16 +1808,7 @@ class PopupMenu {
             const leftSpace = pos.x + anchorWidth - scroll.left;
             const rightSpace = winSize.width - leftSpace + anchorWidth;
             pos.x += 2;
-            if (this.options.useMaxSpace === true) {
-                this.rootLevel.showAt(pos.x, pos.y, true, true);
-            }
-            else {
-                // console.log(this.rootLevel.levelDiv)
-                // if (this.rootLevel.levelDiv.scrollHeight > 500 && pos.y > winSize.height / 2) {
-                //     pos.y = 0
-                // }
-                this.rootLevel.showAt(pos.x, pos.y, false, true);
-            }
+            this.rootLevel.showAt(pos.x, pos.y, true, true);
             this.rootLevel.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
             if (!this.rootLevel.levelDiv.style.zIndex) {
@@ -8718,8 +8726,7 @@ class EasyGridWidget extends Grid {
         else {
             gridOptions.aggregates = { settings: context.getQuery().getAggregationSettings(), calculatorRef: null };
         }
-        gridOptions.aggregates.calculatorRef = this.context.getServices()
-            .getAggregatesCalculator(this.context);
+        gridOptions.aggregates.calculatorRef = this.context.getAggregatesCalculator();
         this.destroy();
         this.grid = new ui.EasyGrid(gridOptions);
         if (this.options.autoRefresh) {

package/dist/easyquery.ui.esm.js

@@ -1,6 +1,6 @@
 import { utils, i18n, DataType, EasyDataTable, AggregationSettings } from '@easydata/core';
 import { Widget, WidgetGroup, QueryChangePart, QueryChangeAction, ExprTag, SortDirection, i18n as i18n$1, equtils, eqconsts, ConditionPart, DataKind, Query, Expression, CondTag, EqEditorTag, EqValueEditor, EqServiceProvider, createEqContext } from '@easyquery/core';
-import { browserUtils, eqDragManager, domel, getElementAbsolutePos, getScrollPos, getWinSize, getViewportSize, DropEffect, createBrowserEvent, DomElementBuilder, DefaultDateTimePicker, slideDown, slideUp, EasyGrid, addCssClass, hideElement, showElement, isVisible, toggleVisibility, addElement, DefaultDialogService } from '@easydata/ui';
+import { browserUtils, eqDragManager, getElementAbsolutePos, getScrollPos, getWinSize, getViewportSize, domel, DropEffect, createBrowserEvent, DomElementBuilder, DefaultDateTimePicker, slideDown, slideUp, EasyGrid, addCssClass, hideElement, showElement, isVisible, toggleVisibility, addElement, DefaultDialogService } from '@easydata/ui';
 
 function findHighestZIndex(elem) {
     let highest = 0;
@@ -1423,6 +1423,7 @@ class MenuLevel {
         //crocodile
         this.turnCheckboxes(this.items);
         this.renderItems();
+        const winSize = getWinSize();
         const levelStyle = this.levelDiv.style;
         if (hidden) {
             this.levelDiv.style.visibility = 'hidden';
@@ -1432,20 +1433,60 @@ class MenuLevel {
         levelStyle.top = y + 'px';
         this.scrollDiv.style.width = "auto";
         this.scrollDiv.style.height = "auto";
-        if (this.parentMenu.options.useMaxSpace === false) {
-            const winSize = getWinSize().height;
-            if (y > winSize / 2 && this.scrollDiv.scrollHeight > winSize / 2) {
-                this.scrollDiv.style.height = (y - 16 - 56) + 'px';
-                levelStyle.top = 0 + 'px';
+        const useMaxSpace = this.parentMenu.options.useMaxSpace;
+        if (useMaxSpace === false) {
+            const levelDivRect = this.levelDiv.getBoundingClientRect();
+            const ldHeight = levelDivRect.height;
+            const vpHeight = winSize.height;
+            const top = y - 16 - scrollY;
+            const bottom = vpHeight - top;
+            if (top > bottom) {
+                // console.log("top > bottom");
+                if (ldHeight > bottom) {
+                    let maxHeight = top;
+                    if (this.searchDiv != null) {
+                        maxHeight -= this.searchDiv.offsetHeight;
+                    }
+                    if (this.closeDiv != null) {
+                        maxHeight -= this.closeDiv.offsetHeight;
+                    }
+                    this.scrollDiv.style.maxHeight = (maxHeight - 24) + 'px';
+                    this.levelDiv.style.top = Math.max(6, y - ldHeight - 24) + 'px';
+                }
             }
-            else if (this.scrollDiv.scrollHeight > winSize / 2) {
-                this.scrollDiv.style.height = (winSize - y - 56) + 'px';
+            else {
+                // console.log("bottom > top");
+                this.scrollDiv.style.maxHeight = (bottom - 80) + 'px';
             }
         }
         //adjusting level top position
-        if (adjustTopPos) {
+        if (useMaxSpace) {
             y = this.adjustTopPos(y);
             levelStyle.top = y + 'px';
+            //adjustinng maximum height of the menu level if it does not fit to browser window
+            let maxHeight = winSize.height - (y - getScrollPos().top) - 15; //document.documentElement.scrollTop
+            if (this.parentMenu.maxHeight > 0 && maxHeight > this.parentMenu.maxHeight) {
+                maxHeight = this.parentMenu.maxHeight;
+            }
+            if (this._applyItem != null && this._applyItem.itemDiv != null) {
+                maxHeight -= this._applyItem.itemDiv.offsetHeight + 5;
+            }
+            if (this.searchDiv != null) {
+                maxHeight -= this.searchDiv.offsetHeight;
+            }
+            if (this.closeDiv != null) {
+                maxHeight -= this.closeDiv.offsetHeight;
+            }
+            if (this.levelDiv.offsetHeight > maxHeight) {
+                let newHeight = maxHeight;
+                if (newHeight < 50) {
+                    newHeight = 50;
+                }
+                this.scrollDiv.style.height = newHeight + "px";
+            }
+            else {
+                this.scrollDiv.style.height = "auto";
+            }
         }
         //setting minimal level width if it is defined
         let minItemWidth = this.parentMenu.minItemWidth;
@@ -1461,30 +1502,6 @@ class MenuLevel {
                 this.items[i].itemDiv.style.overflowX = "hidden";
             }
         }
-        const winSize = getWinSize();
-        //adjustinng maximum height of the menu level if it does not fit to browser window
-        let maxHeight = winSize.height - (y - getScrollPos().top) - 15; //document.documentElement.scrollTop
-        if (this.parentMenu.maxHeight > 0 && maxHeight > this.parentMenu.maxHeight) {
-            maxHeight = this.parentMenu.maxHeight;
-        }
-        if (this._applyItem != null && this._applyItem.itemDiv != null) {
-            maxHeight -= this._applyItem.itemDiv.offsetHeight + 5;
-        }
-        if (this.searchDiv != null) {
-            maxHeight -= this.searchDiv.offsetHeight;
-        }
-        if (this.closeDiv != null) {
-            maxHeight -= this.closeDiv.offsetHeight;
-        }
-        // if (this.levelDiv.offsetHeight > maxHeight) {
-        //     let newHeight = maxHeight;
-        //     if (newHeight < 50) { newHeight = 50; }
-        //
-        //     this.scrollDiv.style.height = newHeight + "px";
-        // }
-        // else {
-        //     this.scrollDiv.style.height = "auto";
-        // }
         this.activeItem = null;
     }
     focus() {
@@ -1789,16 +1806,7 @@ class PopupMenu {
             const leftSpace = pos.x + anchorWidth - scroll.left;
             const rightSpace = winSize.width - leftSpace + anchorWidth;
             pos.x += 2;
-            if (this.options.useMaxSpace === true) {
-                this.rootLevel.showAt(pos.x, pos.y, true, true);
-            }
-            else {
-                // console.log(this.rootLevel.levelDiv)
-                // if (this.rootLevel.levelDiv.scrollHeight > 500 && pos.y > winSize.height / 2) {
-                //     pos.y = 0
-                // }
-                this.rootLevel.showAt(pos.x, pos.y, false, true);
-            }
+            this.rootLevel.showAt(pos.x, pos.y, true, true);
             this.rootLevel.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
             if (!this.rootLevel.levelDiv.style.zIndex) {
@@ -8716,8 +8724,7 @@ class EasyGridWidget extends Grid {
         else {
             gridOptions.aggregates = { settings: context.getQuery().getAggregationSettings(), calculatorRef: null };
         }
-        gridOptions.aggregates.calculatorRef = this.context.getServices()
-            .getAggregatesCalculator(this.context);
+        gridOptions.aggregates.calculatorRef = this.context.getAggregatesCalculator();
         this.destroy();
         this.grid = new EasyGrid(gridOptions);
         if (this.options.autoRefresh) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@easyquery/ui",
-    "version": "7.3.4",
+    "version": "7.3.5-rc01",
     "description": "EasyQuery.JS Community UI widgets",
     "types": "./dist/types/public_api.d.ts",
     "main": "./dist/easyquery.ui.cjs.js",
@@ -30,7 +30,7 @@
     "bugs": "https://korzh.com/support",
     "license": "LGPL-3.0",
     "peerDependencies": {
-        "@easyquery/core": "^7.3.4"
+        "@easyquery/core": "^7.3.5-rc01"
     },
     "files": [
         "dist",