@easyquery/ui 7.3.3 → 7.3.4

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,26 @@ 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;
 }
 /*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,24 @@
 .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;
 }

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';
@@ -1434,6 +1434,16 @@ 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';
+            }
+            else if (this.scrollDiv.scrollHeight > winSize / 2) {
+                this.scrollDiv.style.height = (winSize - y - 56) + 'px';
+            }
+        }
         //adjusting level top position
         if (adjustTopPos) {
             y = this.adjustTopPos(y);
@@ -1468,16 +1478,15 @@ class MenuLevel {
         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";
-        }
+        // 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 +1628,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);
@@ -1781,7 +1791,16 @@ class PopupMenu {
             const leftSpace = pos.x + anchorWidth - scroll.left;
             const rightSpace = winSize.width - leftSpace + anchorWidth;
             pos.x += 2;
-            this.rootLevel.showAt(pos.x, pos.y, true, true);
+            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.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
             if (!this.rootLevel.levelDiv.style.zIndex) {
@@ -2742,6 +2761,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 +3427,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 +8009,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 +8307,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 +8706,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) {
@@ -12389,9 +12413,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 +12426,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

@@ -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, getElementAbsolutePos, getScrollPos, getWinSize, getViewportSize, domel, DropEffect, createBrowserEvent, DomElementBuilder, DefaultDateTimePicker, slideDown, slideUp, EasyGrid, addCssClass, hideElement, showElement, isVisible, toggleVisibility, addElement, DefaultDialogService } from '@easydata/ui';
+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';
 
 function findHighestZIndex(elem) {
     let highest = 0;
@@ -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';
@@ -1432,6 +1432,16 @@ 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';
+            }
+            else if (this.scrollDiv.scrollHeight > winSize / 2) {
+                this.scrollDiv.style.height = (winSize - y - 56) + 'px';
+            }
+        }
         //adjusting level top position
         if (adjustTopPos) {
             y = this.adjustTopPos(y);
@@ -1466,16 +1476,15 @@ class MenuLevel {
         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";
-        }
+        // 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 +1626,8 @@ class PopupMenu {
             container: document.body,
             domWriteItemsId: false,
             itemRenderedCallback: null,
-            showItemIds: false
+            showItemIds: false,
+            useMaxSpace: true,
         };
         if (options) {
             utils.assign(this.options, options);
@@ -1779,7 +1789,16 @@ class PopupMenu {
             const leftSpace = pos.x + anchorWidth - scroll.left;
             const rightSpace = winSize.width - leftSpace + anchorWidth;
             pos.x += 2;
-            this.rootLevel.showAt(pos.x, pos.y, true, true);
+            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.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
             if (!this.rootLevel.levelDiv.style.zIndex) {
@@ -2740,6 +2759,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 +3425,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 +8007,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 +8305,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 +8704,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) {
@@ -12387,9 +12411,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 +12424,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.4",
     "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.4"
     },
     "files": [
         "dist",