@easyquery/ui 7.3.4 → 7.3.5-rc02

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

@@ -427,6 +427,7 @@
     justify-content: flex-start;
     padding: 20px;
     position: relative;
+    width: 100%;
 }
 
 .kdlg-footer.align-right {
@@ -531,6 +532,7 @@
     padding: 20px;
     font-size: 1em;
     color: #4a4a4a;
+    width: 100%;
 }
 
 
@@ -5124,7 +5126,8 @@ input.eqjs-invalid {
 
 .eqjs-cb-addrow.eqjs-mobile a, .eqjs-sb-addrow.eqjs-mobile a {
     background: none!important;
-}
+}
+
 /*setting to all page */
 #eqv-main{
     width:1174px;

package/dist/assets/css/upgrade.css

@@ -452,4 +452,4 @@
 
 .eqjs-cb-addrow.eqjs-mobile a, .eqjs-sb-addrow.eqjs-mobile a {
     background: none!important;
-}
+}

package/dist/easyquery.ui.cjs.js

@@ -1417,7 +1417,7 @@ class MenuLevel {
         }
         return res;
     }
-    showAt(x, y, adjustTopPos, hidden) {
+    showAt(x, y, adjustTopPos, hidden, anchor) {
         if (!this.items) {
             return;
         }
@@ -1425,6 +1425,7 @@ class MenuLevel {
         //crocodile
         this.turnCheckboxes(this.items);
         this.renderItems();
+        ui.getWinSize();
         const levelStyle = this.levelDiv.style;
         if (hidden) {
             this.levelDiv.style.visibility = 'hidden';
@@ -1434,20 +1435,65 @@ 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;
+        const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+        const top = y - scrollY;
+        const bottom = viewportHeight - top;
+        const anchorRect = anchor ? anchor.getBoundingClientRect() : null;
+        const anchorHeight = anchorRect ? anchorRect.height : 0;
+        const magic = 24;
+        if (this.levelIndex === 0 && useMaxSpace) {
+            let maxHeight = viewportHeight;
+            if (this.searchDiv) {
+                maxHeight -= this.searchDiv.scrollHeight;
+            }
+            if (this.closeDiv) {
+                maxHeight -= this.closeDiv.offsetHeight;
+            }
+            this.scrollDiv.style.maxHeight = maxHeight + 'px';
+            const levelDivRect = this.levelDiv.getBoundingClientRect();
+            const levelDivHeight = levelDivRect.height;
+            if (levelDivHeight < bottom - anchorHeight) {
+                levelStyle.top = y + anchorHeight + 'px';
             }
-            else if (this.scrollDiv.scrollHeight > winSize / 2) {
-                this.scrollDiv.style.height = (winSize - y - 56) + 'px';
+            else {
+                if (top < bottom) {
+                    levelStyle.top = y - top + 'px';
+                }
+                else {
+                    levelStyle.top = Math.max(0, viewportHeight - levelDivHeight) + 'px';
+                }
             }
         }
-        //adjusting level top position
-        if (adjustTopPos) {
-            y = this.adjustTopPos(y);
-            levelStyle.top = y + 'px';
+        else {
+            let maxHeight = Math.max(top, bottom) - magic;
+            if (this.searchDiv) {
+                maxHeight -= this.searchDiv.scrollHeight;
+            }
+            if (this.closeDiv) {
+                maxHeight -= this.closeDiv.offsetHeight;
+            }
+            // Рахуємо початковий контейнер
+            let levelDivRect = this.levelDiv.getBoundingClientRect();
+            if (levelDivRect.height < bottom - anchorHeight) {
+                // Контейнер може впасти вниз
+                this.scrollDiv.style.maxHeight = maxHeight - magic + 'px';
+                levelStyle.top = y + anchorHeight + 'px';
+            }
+            else {
+                // Визначаємо більший простір зверху чи знизу від анкора
+                if (top > bottom) {
+                    // Падаємо вверх
+                    this.scrollDiv.style.maxHeight = maxHeight + 'px';
+                    levelDivRect = this.levelDiv.getBoundingClientRect();
+                    levelStyle.top = y - levelDivRect.height + 'px';
+                }
+                else {
+                    // Падаємо вниз
+                    this.scrollDiv.style.maxHeight = maxHeight - magic + 'px';
+                    levelStyle.top = y + anchorHeight + 'px';
+                }
+            }
         }
         //setting minimal level width if it is defined
         let minItemWidth = this.parentMenu.minItemWidth;
@@ -1463,30 +1509,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() {
@@ -1779,11 +1801,11 @@ class PopupMenu {
         else {
             const anchor = options.anchor || document.documentElement;
             const srcPos = ui.getElementAbsolutePos(anchor);
-            const anchorHeight = anchor.offsetHeight;
+            anchor.offsetHeight;
             const anchorWidth = anchor.offsetWidth;
             const pos = {
                 x: srcPos.x,
-                y: srcPos.y + anchorHeight + 2
+                y: srcPos.y // + anchorHeight + 2
             };
             const scroll = ui.getScrollPos();
             const winSize = ui.getWinSize();
@@ -1791,16 +1813,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, anchor);
             this.rootLevel.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
             if (!this.rootLevel.levelDiv.style.zIndex) {
@@ -8718,8 +8731,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;
@@ -1415,7 +1415,7 @@ class MenuLevel {
         }
         return res;
     }
-    showAt(x, y, adjustTopPos, hidden) {
+    showAt(x, y, adjustTopPos, hidden, anchor) {
         if (!this.items) {
             return;
         }
@@ -1423,6 +1423,7 @@ class MenuLevel {
         //crocodile
         this.turnCheckboxes(this.items);
         this.renderItems();
+        getWinSize();
         const levelStyle = this.levelDiv.style;
         if (hidden) {
             this.levelDiv.style.visibility = 'hidden';
@@ -1432,20 +1433,65 @@ 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;
+        const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+        const top = y - scrollY;
+        const bottom = viewportHeight - top;
+        const anchorRect = anchor ? anchor.getBoundingClientRect() : null;
+        const anchorHeight = anchorRect ? anchorRect.height : 0;
+        const magic = 24;
+        if (this.levelIndex === 0 && useMaxSpace) {
+            let maxHeight = viewportHeight;
+            if (this.searchDiv) {
+                maxHeight -= this.searchDiv.scrollHeight;
+            }
+            if (this.closeDiv) {
+                maxHeight -= this.closeDiv.offsetHeight;
+            }
+            this.scrollDiv.style.maxHeight = maxHeight + 'px';
+            const levelDivRect = this.levelDiv.getBoundingClientRect();
+            const levelDivHeight = levelDivRect.height;
+            if (levelDivHeight < bottom - anchorHeight) {
+                levelStyle.top = y + anchorHeight + 'px';
             }
-            else if (this.scrollDiv.scrollHeight > winSize / 2) {
-                this.scrollDiv.style.height = (winSize - y - 56) + 'px';
+            else {
+                if (top < bottom) {
+                    levelStyle.top = y - top + 'px';
+                }
+                else {
+                    levelStyle.top = Math.max(0, viewportHeight - levelDivHeight) + 'px';
+                }
             }
         }
-        //adjusting level top position
-        if (adjustTopPos) {
-            y = this.adjustTopPos(y);
-            levelStyle.top = y + 'px';
+        else {
+            let maxHeight = Math.max(top, bottom) - magic;
+            if (this.searchDiv) {
+                maxHeight -= this.searchDiv.scrollHeight;
+            }
+            if (this.closeDiv) {
+                maxHeight -= this.closeDiv.offsetHeight;
+            }
+            // Рахуємо початковий контейнер
+            let levelDivRect = this.levelDiv.getBoundingClientRect();
+            if (levelDivRect.height < bottom - anchorHeight) {
+                // Контейнер може впасти вниз
+                this.scrollDiv.style.maxHeight = maxHeight - magic + 'px';
+                levelStyle.top = y + anchorHeight + 'px';
+            }
+            else {
+                // Визначаємо більший простір зверху чи знизу від анкора
+                if (top > bottom) {
+                    // Падаємо вверх
+                    this.scrollDiv.style.maxHeight = maxHeight + 'px';
+                    levelDivRect = this.levelDiv.getBoundingClientRect();
+                    levelStyle.top = y - levelDivRect.height + 'px';
+                }
+                else {
+                    // Падаємо вниз
+                    this.scrollDiv.style.maxHeight = maxHeight - magic + 'px';
+                    levelStyle.top = y + anchorHeight + 'px';
+                }
+            }
         }
         //setting minimal level width if it is defined
         let minItemWidth = this.parentMenu.minItemWidth;
@@ -1461,30 +1507,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() {
@@ -1777,11 +1799,11 @@ class PopupMenu {
         else {
             const anchor = options.anchor || document.documentElement;
             const srcPos = getElementAbsolutePos(anchor);
-            const anchorHeight = anchor.offsetHeight;
+            anchor.offsetHeight;
             const anchorWidth = anchor.offsetWidth;
             const pos = {
                 x: srcPos.x,
-                y: srcPos.y + anchorHeight + 2
+                y: srcPos.y // + anchorHeight + 2
             };
             const scroll = getScrollPos();
             const winSize = getWinSize();
@@ -1789,16 +1811,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, anchor);
             this.rootLevel.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
             if (!this.rootLevel.levelDiv.style.zIndex) {
@@ -8716,8 +8729,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/dist/types/utils/popup_menu.d.ts

@@ -62,7 +62,7 @@ declare class MenuLevel {
     deactivateItem(menuItem: any): void;
     showSubLevel(menuItem: MenuItem): void;
     adjustTopPos(top: number): number;
-    showAt(x: number, y: number, adjustTopPos: boolean, hidden: boolean): void;
+    showAt(x: number, y: number, adjustTopPos: boolean, hidden: boolean, anchor?: HTMLElement): void;
     focus(): void;
     hide(): void;
     initLevelDiv(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@easyquery/ui",
-    "version": "7.3.4",
+    "version": "7.3.5-rc02",
     "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-rc02"
     },
     "files": [
         "dist",