@easyquery/ui 7.3.3 → 7.3.5-rc01

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

@@ -4714,10 +4714,10 @@ input.eqjs-invalid {
     font-weight: normal;
     font-variant: normal;
     text-transform: none !important;
-    line-height: 1!important;
+    line-height: 1 !important;
     font-size: var(--icon-size);
     color: var(--button-text-color);
-    text-decoration: none;
+    text-decoration: none !important;
     padding: 0;
     outline: none;
 
@@ -4858,6 +4858,11 @@ input.eqjs-invalid {
     flex-wrap: nowrap;
 }
 
+.eqjs-qp-valueelement {
+    width: auto;
+    flex-grow: 0;
+}
+
 .eqjs-qc-attrelement, .eqjs-qp-attrelement, .eqjs-qp-operelement {
     margin-left: 0;
     flex-shrink: 1;
@@ -4961,7 +4966,7 @@ input.eqjs-invalid {
 }
 
 .eqjs-menu-scrollDiv:not(.eqjs-mobile) {
-    max-height: 500px;
+    /*max-height: 500px;*/
 }
 
 .eqjs-qc-colelement {
@@ -5099,6 +5104,30 @@ input.eqjs-invalid {
 .eqjs-qc-captionelement input {
     min-width: var(--column-panel-caption-size);
     width: auto;
+}
+
+.eqjs-qp-row {
+    padding: 0 10px!important;
+}
+.eqjs-qp-condition-buttonsBlock, .eqjs-facets-total-buttons {
+    margin-right: 10px;
+}
+
+.eqjs-qp-row.eqjs-mobile {
+    border-style: solid!important;
+    margin: 0 4px;
+}
+
+.eqjs-qp-condition-buttonsBlock.eqjs-mobile {
+    top: 0!important;
+}
+
+.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

@@ -44,10 +44,10 @@
     font-weight: normal;
     font-variant: normal;
     text-transform: none !important;
-    line-height: 1!important;
+    line-height: 1 !important;
     font-size: var(--icon-size);
     color: var(--button-text-color);
-    text-decoration: none;
+    text-decoration: none !important;
     padding: 0;
     outline: none;
 
@@ -188,6 +188,11 @@
     flex-wrap: nowrap;
 }
 
+.eqjs-qp-valueelement {
+    width: auto;
+    flex-grow: 0;
+}
+
 .eqjs-qc-attrelement, .eqjs-qp-attrelement, .eqjs-qp-operelement {
     margin-left: 0;
     flex-shrink: 1;
@@ -291,7 +296,7 @@
 }
 
 .eqjs-menu-scrollDiv:not(.eqjs-mobile) {
-    max-height: 500px;
+    /*max-height: 500px;*/
 }
 
 .eqjs-qc-colelement {
@@ -427,4 +432,28 @@
 .eqjs-qc-captionelement input {
     min-width: var(--column-panel-caption-size);
     width: auto;
+}
+
+.eqjs-qp-row {
+    padding: 0 10px!important;
+}
+.eqjs-qp-condition-buttonsBlock, .eqjs-facets-total-buttons {
+    margin-right: 10px;
+}
+
+.eqjs-qp-row.eqjs-mobile {
+    border-style: solid!important;
+    margin: 0 4px;
+}
+
+.eqjs-qp-condition-buttonsBlock.eqjs-mobile {
+    top: 0!important;
+}
+
+.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

@@ -21,11 +21,11 @@ function findHighestZIndex(elem) {
 }
 // simetimes setting focus in the main thread doesn't work correctly (in Firefox). So we need to 'hack' it.
 function safeFocus(element) {
-    setTimeout(_ => {
-        if (element) {
-            element.focus();
+    setTimeout((el) => {
+        if (el && el.focus) {
+            el.focus();
         }
-    }, 100);
+    }, 100, element);
 }
 const eqCssPrefix = 'eqjs';
 const eqCssMobile = 'eqjs-mobile';
@@ -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,10 +1435,60 @@ class MenuLevel {
         levelStyle.top = y + 'px';
         this.scrollDiv.style.width = "auto";
         this.scrollDiv.style.height = "auto";
+        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 {
+                // 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;
@@ -1453,31 +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() {
@@ -1619,7 +1645,8 @@ class PopupMenu {
             container: document.body,
             domWriteItemsId: false,
             itemRenderedCallback: null,
-            showItemIds: false
+            showItemIds: false,
+            useMaxSpace: true,
         };
         if (options) {
             core$1.utils.assign(this.options, options);
@@ -2742,6 +2769,7 @@ class AttrColumnRendererCP extends ColumnRendererCP {
                 .title(attrCaption)
                 .text(attrCaption) //TO DO:add localization
                 .on('click', (ev) => {
+                console.log("columns expression click");
                 ev.stopPropagation();
                 this.activate();
                 this.panel.showEntitiesMenu({
@@ -3407,6 +3435,7 @@ class ColumnsPanel extends core.Widget {
                     .attr('href', 'javascript:void(0)')
                     .text(core$1.i18n.getText('CmdClickToAddColumn'))
                     .on('click', (e) => {
+                    console.log("Add new column");
                     e.preventDefault();
                     this.showEntitiesMenu({
                         anchor: e.target,
@@ -7988,7 +8017,8 @@ class QueryPanel extends core.Widget {
         return new PopupMenu(options);
     }
     showEntitiesMenu(options) {
-        this.entitiesMenu.showMenu(options);
+        this.entitiesMenu.showMenu(Object.assign({}, this.options.menuOptions, options));
+        // this.entitiesMenu.showMenu(options);
     }
     createConditionMenus() {
         //ConditionMenu
@@ -8285,6 +8315,7 @@ class FilterBar extends core.Widget {
             .text(core$1.i18n.getText('StrNoFilterClickToAdd'))
             .hide()
             .on('click', () => {
+            console.log("condition filter click");
             this.queryPanel.showEntitiesMenu({
                 anchor: this.headerLinkElement,
                 selectedIds: null,
@@ -8683,9 +8714,10 @@ class EasyGridWidget extends Grid {
      * @param options The options.
      */
     init(context, options) {
+        var _a, _b;
         super.init(context, options);
-        const gridOptions = Object.assign(Object.assign({}, options), { slot: this.slot, dataTable: context.resultTable });
-        this.options = core$1.utils.assign(this.options, options);
+        const gridOptions = Object.assign(Object.assign(Object.assign(Object.assign({}, (_a = context.options.widgets) === null || _a === void 0 ? void 0 : _a.resultGrid), (_b = context.options.widgets) === null || _b === void 0 ? void 0 : _b.easyGrid), options), { slot: this.slot, dataTable: context.resultTable });
+        this.options = core$1.utils.assign(this.options, gridOptions);
         gridOptions.onPlusButtonClick = (ev) => this.addColumnClickHandler(ev);
         gridOptions.onColumnMoved = (ev) => this.columnMovedHandler(ev);
         if (gridOptions.aggregates) {
@@ -8694,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) {
@@ -12389,9 +12420,7 @@ class View {
         if (this.context.getQuery().isEmpty() && !this.resultOptions.fetchEmptyQueries)
             return;
         this.showResultSpinner();
-        this.context.fetchData({
-            elasticPaging: options.elasticPaging,
-            success: (result) => {
+        this.context.fetchData(Object.assign(Object.assign({}, options), { elasticPaging: options.elasticPaging, success: (result) => {
                 this.hideResultSpinner();
                 this.toggleExportButtons();
                 this.displayRecordsCount(this.context.resultTable.getTotal());
@@ -12404,11 +12433,9 @@ class View {
                 if (options.success) {
                     options.success(result);
                 }
-            },
-            error: () => {
+            }, error: () => {
                 this.hideResultSpinner();
-            }
-        });
+            } }));
     }
     toggleExportButtons() {
         if (this.enableExport && this.context.resultTable

package/dist/easyquery.ui.esm.js

@@ -19,11 +19,11 @@ function findHighestZIndex(elem) {
 }
 // simetimes setting focus in the main thread doesn't work correctly (in Firefox). So we need to 'hack' it.
 function safeFocus(element) {
-    setTimeout(_ => {
-        if (element) {
-            element.focus();
+    setTimeout((el) => {
+        if (el && el.focus) {
+            el.focus();
         }
-    }, 100);
+    }, 100, element);
 }
 const eqCssPrefix = 'eqjs';
 const eqCssMobile = 'eqjs-mobile';
@@ -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,10 +1433,60 @@ class MenuLevel {
         levelStyle.top = y + 'px';
         this.scrollDiv.style.width = "auto";
         this.scrollDiv.style.height = "auto";
+        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 {
+                // 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;
@@ -1451,31 +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() {
@@ -1617,7 +1643,8 @@ class PopupMenu {
             container: document.body,
             domWriteItemsId: false,
             itemRenderedCallback: null,
-            showItemIds: false
+            showItemIds: false,
+            useMaxSpace: true,
         };
         if (options) {
             utils.assign(this.options, options);
@@ -2740,6 +2767,7 @@ class AttrColumnRendererCP extends ColumnRendererCP {
                 .title(attrCaption)
                 .text(attrCaption) //TO DO:add localization
                 .on('click', (ev) => {
+                console.log("columns expression click");
                 ev.stopPropagation();
                 this.activate();
                 this.panel.showEntitiesMenu({
@@ -3405,6 +3433,7 @@ class ColumnsPanel extends Widget {
                     .attr('href', 'javascript:void(0)')
                     .text(i18n.getText('CmdClickToAddColumn'))
                     .on('click', (e) => {
+                    console.log("Add new column");
                     e.preventDefault();
                     this.showEntitiesMenu({
                         anchor: e.target,
@@ -7986,7 +8015,8 @@ class QueryPanel extends Widget {
         return new PopupMenu(options);
     }
     showEntitiesMenu(options) {
-        this.entitiesMenu.showMenu(options);
+        this.entitiesMenu.showMenu(Object.assign({}, this.options.menuOptions, options));
+        // this.entitiesMenu.showMenu(options);
     }
     createConditionMenus() {
         //ConditionMenu
@@ -8283,6 +8313,7 @@ class FilterBar extends Widget {
             .text(i18n.getText('StrNoFilterClickToAdd'))
             .hide()
             .on('click', () => {
+            console.log("condition filter click");
             this.queryPanel.showEntitiesMenu({
                 anchor: this.headerLinkElement,
                 selectedIds: null,
@@ -8681,9 +8712,10 @@ class EasyGridWidget extends Grid {
      * @param options The options.
      */
     init(context, options) {
+        var _a, _b;
         super.init(context, options);
-        const gridOptions = Object.assign(Object.assign({}, options), { slot: this.slot, dataTable: context.resultTable });
-        this.options = utils.assign(this.options, options);
+        const gridOptions = Object.assign(Object.assign(Object.assign(Object.assign({}, (_a = context.options.widgets) === null || _a === void 0 ? void 0 : _a.resultGrid), (_b = context.options.widgets) === null || _b === void 0 ? void 0 : _b.easyGrid), options), { slot: this.slot, dataTable: context.resultTable });
+        this.options = utils.assign(this.options, gridOptions);
         gridOptions.onPlusButtonClick = (ev) => this.addColumnClickHandler(ev);
         gridOptions.onColumnMoved = (ev) => this.columnMovedHandler(ev);
         if (gridOptions.aggregates) {
@@ -8692,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) {
@@ -12387,9 +12418,7 @@ class View {
         if (this.context.getQuery().isEmpty() && !this.resultOptions.fetchEmptyQueries)
             return;
         this.showResultSpinner();
-        this.context.fetchData({
-            elasticPaging: options.elasticPaging,
-            success: (result) => {
+        this.context.fetchData(Object.assign(Object.assign({}, options), { elasticPaging: options.elasticPaging, success: (result) => {
                 this.hideResultSpinner();
                 this.toggleExportButtons();
                 this.displayRecordsCount(this.context.resultTable.getTotal());
@@ -12402,11 +12431,9 @@ class View {
                 if (options.success) {
                     options.success(result);
                 }
-            },
-            error: () => {
+            }, error: () => {
                 this.hideResultSpinner();
-            }
-        });
+            } }));
     }
     toggleExportButtons() {
         if (this.enableExport && this.context.resultTable

package/dist/types/utils/popup_menu.d.ts

@@ -119,6 +119,10 @@ export interface PopupMenuOptions {
     showSelected?: boolean;
     /** If true - the menu will show the ID for each item (e.g. {itemId}:{itemText}) */
     showItemIds?: boolean;
+    /**
+     * If true, popup use max available space
+     */
+    useMaxSpace?: boolean;
 }
 export declare class PopupMenu {
     private static lastMenuID;

package/dist/types/views/view.d.ts

@@ -1,4 +1,4 @@
-import { Widget, EqContext, WidgetGroup, EqServiceProvider } from '@easyquery/core';
+import { Widget, EqContext, WidgetGroup, EqServiceProvider, ContextFetchDataOptions } from '@easyquery/core';
 import { DialogService } from '@easydata/ui';
 import { EqViewOptions, EqResultOptions } from './view_options';
 export declare abstract class View {
@@ -52,7 +52,7 @@ export declare abstract class View {
     * Fetches the data according to the query and other options defined in the context.
     * @param options The options.
     */
-    fetchData(options?: any): void;
+    fetchData(options?: ContextFetchDataOptions): void;
     protected enableExport: boolean;
     protected toggleExportButtons(): void;
     protected enableExportButtons(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@easyquery/ui",
-    "version": "7.3.3",
+    "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.3"
+        "@easyquery/core": "^7.3.5-rc01"
     },
     "files": [
         "dist",