@easyquery/ui 7.4.0-rc01 → 7.4.0-rc03

package/dist/assets/css/easyquery.css

@@ -1051,6 +1051,7 @@ body {
     position: relative;
     font: normal 14px Trebuchet MS, Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
     padding: 0.5rem;
+    user-select: none;
 }
 
 .eqjs-cb-header, .eqjs-sb-header {

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

@@ -3295,6 +3295,9 @@ body {
     position: relative;
     font: normal 14px Trebuchet MS, Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
     padding: 0.5rem;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
 }
 
 .eqjs-cb-header, .eqjs-sb-header {

package/dist/easyquery.ui.cjs.js

@@ -682,20 +682,20 @@ class MenuLevel {
         const applyItem = this._applyItem;
         //if multiselect option is on - then we should add special "apply" item
         if (multiselect && this.levelIndex === 0 && this.parentMenu.options.hideButtons !== true) {
-            const applyDiv = document.createElement("div");
-            applyDiv.classList.add(`${this.cssPrefix}-applyDiv`);
-            applyDiv['menuItem'] = applyItem;
+            this.applyDiv = document.createElement("div");
+            this.applyDiv.classList.add(`${this.cssPrefix}-applyDiv`);
+            this.applyDiv['menuItem'] = applyItem;
             this.applyBtn = document.createElement('button');
             if (this.parentMenu.options.useDefaultStyles) {
-                applyDiv.style.borderBottom = '1px solid';
-                applyDiv.style.padding = '5px';
-                applyDiv.style.marginBottom = '5px';
+                this.applyDiv.style.borderBottom = '1px solid';
+                this.applyDiv.style.padding = '5px';
+                this.applyDiv.style.marginBottom = '5px';
                 this.applyBtn.style.padding = '0 5px';
                 this.applyBtn.style.cursor = "pointer";
             }
             const applyTextNode = document.createTextNode(this.parentMenu.options.buttons.submit);
             this.applyBtn.appendChild(applyTextNode);
-            applyDiv.appendChild(this.applyBtn);
+            this.applyDiv.appendChild(this.applyBtn);
             //cancel btn
             const cancelBtn = document.createElement('button');
             cancelBtn.classList.add(`${this.cssPrefix}-cancel`);
@@ -706,9 +706,9 @@ class MenuLevel {
             }
             const cancelText = document.createTextNode(this.parentMenu.options.buttons.cancel);
             cancelBtn.appendChild(cancelText);
-            applyDiv.appendChild(cancelBtn);
-            baseDiv.appendChild(applyDiv);
-            applyItem.itemDiv = applyDiv;
+            this.applyDiv.appendChild(cancelBtn);
+            baseDiv.appendChild(this.applyDiv);
+            applyItem.itemDiv = this.applyDiv;
             this.applyBtn.addEventListener('click', () => {
                 this.submit(this._applyItem);
             });
@@ -1436,78 +1436,52 @@ class MenuLevel {
         levelStyle.top = y + 'px';
         this.scrollDiv.style.width = "auto";
         this.scrollDiv.style.height = "auto";
+        this.scrollDiv.style.maxHeight = null;
         const useMaxSpace = this.parentMenu.options.useMaxSpace;
         const viewportHeight = ui.getViewportSize().height;
-        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) {
-            let maxHeight = viewportHeight - 30;
-            if (this.searchDiv) {
-                maxHeight -= this.searchDiv.scrollHeight;
-                y -= this.searchDiv.scrollHeight;
-            }
-            if (this.closeDiv) {
-                maxHeight -= this.closeDiv.offsetHeight;
-                y -= this.closeDiv.offsetHeight;
-            }
-            this.scrollDiv.style.maxHeight = maxHeight + 'px';
-            levelStyle.top = this.adjustTopPos(y) + 'px';
-        }
-        else if (useMaxSpace) {
-            let maxHeight = viewportHeight - 30;
-            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 (top < bottom) {
-                    levelStyle.top = y - top + 5 + 'px';
-                }
-                else {
-                    levelStyle.top = Math.max(5, viewportHeight - levelDivHeight - 30) + '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'; // - anchorHeight
-                }
-                else {
-                    // Падаємо вниз
-                    this.scrollDiv.style.maxHeight = maxHeight - magic - anchorHeight + 'px';
-                    levelStyle.top = y + anchorHeight + 'px';
-                }
-            }
+        const upperSpace = y - scrollY;
+        const lowerSpace = viewportHeight - upperSpace - anchorHeight;
+        const minOffset = 15;
+        // Рахуємо початковий контейнер
+        let levelDivRect = this.levelDiv.getBoundingClientRect();
+        if (this.levelIndex == 0 && levelDivRect.height < lowerSpace - minOffset) { //root level. Have enough space to drop down without scroll
+            levelStyle.top = (y + anchorHeight) + 'px';
+        }
+        else if (this.levelIndex == 0 && levelDivRect.height < upperSpace - minOffset) { //root level. Have enough space to drop up without scroll
+            levelStyle.top = (y - levelDivRect.height) + 'px';
+        }
+        else if (useMaxSpace || this.levelIndex > 0) { //sub-level or useMaxSpace option set. Use all the space
+            const outsideBottom = levelDivRect.bottom + minOffset - scrollY - viewportHeight;
+            if (outsideBottom > 0) {
+                levelStyle.top = levelDivRect.top - outsideBottom + 'px';
+            }
+            levelDivRect = this.levelDiv.getBoundingClientRect();
+            const outsideTop = scrollY + minOffset - levelDivRect.top;
+            if (outsideTop > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideTop + 'px';
+                levelStyle.top = levelDivRect.top + outsideTop + 'px';
+            }
+        }
+        else if (upperSpace <= lowerSpace) { //root level. Drop down with scroll
+            levelStyle.top = (y + anchorHeight) + 'px';
+            const outsideBottom = levelDivRect.height + minOffset - lowerSpace;
+            if (outsideBottom > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideBottom + 'px';
+            }
+        }
+        else { //root level. Drop up with scroll
+            y -= levelDivRect.height;
+            const outsideTop = scrollY + minOffset - y;
+            if (outsideTop > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideTop + 'px';
+                y += outsideTop;
+            }
+            levelStyle.top = y + 'px';
         }
         //setting minimal level width if it is defined
         let minItemWidth = this.parentMenu.minItemWidth;
@@ -1805,12 +1779,13 @@ class PopupMenu {
         this.active = true;
         this.setSelectedItems(this.options.items, selectedIds);
         if (ui.browserUtils.isMobileMode()) {
-            this.rootLevel.showAt(0, 0, true, true);
+            this.rootLevel.initLevelDiv();
             this.rootLevel.levelDiv.style.top = '0px';
             this.rootLevel.levelDiv.style.bottom = '0px';
             this.rootLevel.levelDiv.style.right = '0px';
             this.rootLevel.levelDiv.style.position = 'fixed';
             this.rootLevel.levelDiv.style.fontSize = '20px';
+            this.rootLevel.showAt(0, 0, true, true);
         }
         else {
             const anchor = options.anchor || document.documentElement;
@@ -1827,9 +1802,13 @@ 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, anchor);
+            this.rootLevel.initLevelDiv();
             this.rootLevel.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
+            this.rootLevel.levelDiv.style.bottom = '';
+            this.rootLevel.levelDiv.style.position = 'absolute';
+            this.rootLevel.levelDiv.style.fontSize = '14px';
+            this.rootLevel.showAt(pos.x, pos.y, true, true, anchor);
             if (!this.rootLevel.levelDiv.style.zIndex) {
                 // z-index is at least 10000 and more if anchor has bigger
                 this.rootLevel.levelDiv.style.zIndex = `${Math.max(10000, findHighestZIndex(anchor) + 1)}`;
@@ -1850,7 +1829,6 @@ class PopupMenu {
                 }
                 this.rootLevel.levelDiv.style.right = ui.getViewportSize().width - pos.x - anchorWidth + 'px';
             }
-            this.rootLevel.levelDiv.style.fontSize = '14px';
         }
         this.rootLevel.levelDiv.style.visibility = 'visible';
         this.rootLevel.focus();
@@ -3633,7 +3611,9 @@ class ColumnsPanel extends core.Widget {
     }
     setOptions(options) {
         core$1.utils.assignDeep(this.options, options);
-        this.context.options.allowCustomExpressions = options.allowCustomExpressions;
+        if (typeof options.allowCustomExpressions !== 'undefined') {
+            this.context.options.allowCustomExpressions = options.allowCustomExpressions;
+        }
         if (options.attrElementFormat) {
             this.context.options.attributeFormat = options.attrElementFormat;
         }
@@ -3995,6 +3975,13 @@ class ColumnsPanel extends core.Widget {
     }
 }
 
+exports.ColumnsEditMode = void 0;
+(function (ColumnsEditMode) {
+    ColumnsEditMode[ColumnsEditMode["ReadOnly"] = 0] = "ReadOnly";
+    ColumnsEditMode[ColumnsEditMode["FixedList"] = 16] = "FixedList";
+    ColumnsEditMode[ColumnsEditMode["Full"] = 255] = "Full";
+})(exports.ColumnsEditMode || (exports.ColumnsEditMode = {}));
+
 class ColumnRendererCB {
     constructor(panel, column, slot) {
         this.functionMenu = null;
@@ -4018,7 +4005,7 @@ class ColumnRendererCB {
                 .replaceChild(builder.toDOM(), this.element);
         }
         this.element = builder.toDOM();
-        if (this.bar.options.allowDragDrop) {
+        if (this.bar.isDraggable()) {
             ui.eqDragManager.registerDraggableItem({
                 element: this.element,
                 scope: "entityAttrSort",
@@ -4065,15 +4052,19 @@ class ColumnRendererCB {
         this.render();
     }
     isEditable() {
-        return this.column.enabled && !this.column.isReadOnly();
+        // Editable if enabled, not read-only, and editMode is All or FixedList (for title/sort/order)
+        return this.column.enabled && !this.column.isReadOnly() && (this.bar.options.editMode === exports.ColumnsEditMode.Full || this.bar.options.editMode === exports.ColumnsEditMode.FixedList);
     }
     renderButtonsBlock() {
+        // Only show delete/type buttons in All mode
+        const showDelete = this.bar.options.editMode === exports.ColumnsEditMode.Full;
+        const showType = this.bar.options.editMode === exports.ColumnsEditMode.Full;
         return ui.domel('div', this.element)
             .addClass(`${eqCssPrefix}-column-buttonsBlock`, `${this.cssPrefix}-buttonsBlock`)
             .addChildElement(this.renderSortingButton())
-            .addChildElement(this.renderColumnTypeButton())
+            .addChildElement(showType ? this.renderColumnTypeButton() : null)
             .addChildElement(this.renderColumnFormatButton())
-            .addChildElement(this.renderDeleteButton())
+            .addChildElement(showDelete ? this.renderDeleteButton() : null)
             .toDOM();
     }
     renderCaptionBlock() {
@@ -4258,7 +4249,8 @@ class ColumnRendererCB {
         return false;
     }
     renderDeleteButton() {
-        if (this.column.isReadOnly()) {
+        // Only show delete in All mode
+        if (this.column.isReadOnly() || this.bar.options.editMode !== exports.ColumnsEditMode.Full) {
             return null;
         }
         return ui.domel('div')
@@ -4331,7 +4323,8 @@ class ColumnRendererCB {
         });
     }
     renderColumnTypeButton() {
-        if (!this.isEditable() || this.bar.options.allowAggrColumns === false) {
+        // Only show type button in All mode
+        if (!this.isEditable() || this.bar.options.allowAggrColumns === false || this.bar.options.editMode !== exports.ColumnsEditMode.Full) {
             return null;
         }
         return ui.domel('div')
@@ -4542,6 +4535,9 @@ class AttrColumnRendererCB extends ColumnRendererCB {
         this.fireColumnChanged();
     }
     changeColumnTypeHandler(ev) {
+        // Only allow type change in All mode
+        if (this.bar.options.editMode !== exports.ColumnsEditMode.Full)
+            return;
         this.functionMenu.showMenu({
             anchor: ev.target,
             selectedIds: null,
@@ -4586,10 +4582,18 @@ class AggrFuncColumnRendererCB extends AttrColumnRendererCB {
         this.fireColumnChanged();
     }
     changeColumnTypeHandler(ev) {
+        // Only allow type change in All mode
+        if (this.bar.options.editMode !== exports.ColumnsEditMode.Full)
+            return;
         this.changeTypeToSimple();
     }
 }
 
+/**
+ * Base class for editable column renderers for the ColumnsBar widgets.
+ * It provides common functionality for rendering editable columns,
+ * including handling column type changes and rendering buttons.
+ */
 class EditableColumnRendererCB extends ColumnRendererCB {
     getClassesToAdd() {
         return `${this.cssPrefix}-row ${this.cssPrefix}-row-column-entattr` + super.getClassesToAdd();
@@ -4616,6 +4620,9 @@ class EditableColumnRendererCB extends ColumnRendererCB {
         return true;
     }
     changeColumnTypeHandler(ev) {
+        // Only allow type change in All mode
+        if (this.bar.options.editMode !== exports.ColumnsEditMode.Full)
+            return;
         this.changeTypeToSimple();
     }
 }
@@ -4683,7 +4690,8 @@ class ColumnsBar extends core.Widget {
             sortEntities: false,
             columnRenderedCallback: null,
             customExpressionText: 0,
-            showAddAllForEntity: false
+            showAddAllForEntity: false,
+            editMode: exports.ColumnsEditMode.Full
         };
         this.landingSlot = ui.domel('div')
             .addClass(`${eqCssPrefix}-highlight`)
@@ -4710,6 +4718,10 @@ class ColumnsBar extends core.Widget {
     getWidgetType() {
         return 'columnsBar';
     }
+    isDraggable() {
+        // Only allow drag-drop in All and FixedList modes
+        return this.options.allowDragDrop && this.options.editMode > exports.ColumnsEditMode.ReadOnly;
+    }
     init(context, options) {
         super.init(context, options);
         this.setOptions(options);
@@ -4722,7 +4734,8 @@ class ColumnsBar extends core.Widget {
         this.detachQueryObserver();
         this.attachQueryObserver();
         ui.eqDragManager.removeDropContainer(this.slot);
-        if (this.options.allowDragDrop) {
+        // Only allow drag-drop in All and FixedList modes
+        if (this.isDraggable()) {
             ui.eqDragManager.registerDropContainer({
                 element: this.slot,
                 scopes: ["entityAttrSort"],
@@ -4848,7 +4861,9 @@ class ColumnsBar extends core.Widget {
     }
     setOptions(options) {
         this.options = core$1.utils.assignDeep(this.options, options);
-        this.getContext().options.allowCustomExpressions = options.allowCustomExpressions;
+        if (typeof options.allowCustomExpressions !== 'undefined') {
+            this.context.options.allowCustomExpressions = options.allowCustomExpressions;
+        }
     }
     showLandingSlot(pageX, pageY) {
         const elements = this.columnsBlock.querySelectorAll(`[class*=${this.cssPrefix}-row]`);
@@ -4959,7 +4974,8 @@ class ColumnsBar extends core.Widget {
                 .addClass(`${this.cssPrefix}-columns`)
                 .addClass(getMobileCssClass())
                 .toDOM();
-        if (this.options.showAddRow) {
+        // Only show add row in All mode
+        if (this.options.showAddRow && this.options.editMode === exports.ColumnsEditMode.Full) {
             this.addRowButton =
                 ui.domel('div')
                     .toDOM();
@@ -5022,16 +5038,18 @@ class ColumnsBar extends core.Widget {
             return false;
         })
             .toDOM();
-        this.buttonsBlockDeleteButton = ui.domel('div', this.columnButtonsBlockMobile)
-            .addClass(`${this.cssPrefix}-column-button`, `${this.cssPrefix}-column-button-delete`)
-            .on('touchstart click', (ev) => {
-            ev.stopPropagation();
-            this.currentColumnRenderer.buttonDeleteClickHandler.call(this.currentColumnRenderer, ev);
-            this.toggleColumnPicked(null);
-            this.hideColumnButtonsMobile();
-            return false;
-        })
-            .toDOM();
+        if (this.options.editMode == exports.ColumnsEditMode.Full) {
+            this.buttonsBlockDeleteButton = ui.domel('div', this.columnButtonsBlockMobile)
+                .addClass(`${this.cssPrefix}-column-button`, `${this.cssPrefix}-column-button-delete`)
+                .on('touchstart click', (ev) => {
+                ev.stopPropagation();
+                this.currentColumnRenderer.buttonDeleteClickHandler.call(this.currentColumnRenderer, ev);
+                this.toggleColumnPicked(null);
+                this.hideColumnButtonsMobile();
+                return false;
+            })
+                .toDOM();
+        }
         ui.domel('div', this.columnButtonsBlockMobile)
             .addClass(`${this.cssPrefix}-column-button-close-block`)
             .on('touchstart click', () => {
@@ -5060,7 +5078,7 @@ class ColumnsBar extends core.Widget {
                 .setStyle('top', (top + rect.height).toString() + 'px');
         }
         //show/hide separate buttons
-        if (column.enabled && !column.isReadOnly()) {
+        if (column.enabled && !column.isReadOnly() && this.options.editMode > exports.ColumnsEditMode.ReadOnly) {
             ui.domel(this.buttonsBlockSortingButton).show();
             ui.domel(this.buttonsBlockTypeButton).show();
             if (columnRenderer.formatButtonIsShown()) {
@@ -5075,7 +5093,7 @@ class ColumnsBar extends core.Widget {
             ui.domel(this.buttonsBlockTypeButton).hide();
         }
         //show
-        if (column.isReadOnly()) {
+        if (column.isReadOnly() || this.options.editMode == exports.ColumnsEditMode.ReadOnly) {
             ui.domel(this.columnButtonsBlockMobile).hide();
         }
         else {

package/dist/easyquery.ui.esm.js

@@ -680,20 +680,20 @@ class MenuLevel {
         const applyItem = this._applyItem;
         //if multiselect option is on - then we should add special "apply" item
         if (multiselect && this.levelIndex === 0 && this.parentMenu.options.hideButtons !== true) {
-            const applyDiv = document.createElement("div");
-            applyDiv.classList.add(`${this.cssPrefix}-applyDiv`);
-            applyDiv['menuItem'] = applyItem;
+            this.applyDiv = document.createElement("div");
+            this.applyDiv.classList.add(`${this.cssPrefix}-applyDiv`);
+            this.applyDiv['menuItem'] = applyItem;
             this.applyBtn = document.createElement('button');
             if (this.parentMenu.options.useDefaultStyles) {
-                applyDiv.style.borderBottom = '1px solid';
-                applyDiv.style.padding = '5px';
-                applyDiv.style.marginBottom = '5px';
+                this.applyDiv.style.borderBottom = '1px solid';
+                this.applyDiv.style.padding = '5px';
+                this.applyDiv.style.marginBottom = '5px';
                 this.applyBtn.style.padding = '0 5px';
                 this.applyBtn.style.cursor = "pointer";
             }
             const applyTextNode = document.createTextNode(this.parentMenu.options.buttons.submit);
             this.applyBtn.appendChild(applyTextNode);
-            applyDiv.appendChild(this.applyBtn);
+            this.applyDiv.appendChild(this.applyBtn);
             //cancel btn
             const cancelBtn = document.createElement('button');
             cancelBtn.classList.add(`${this.cssPrefix}-cancel`);
@@ -704,9 +704,9 @@ class MenuLevel {
             }
             const cancelText = document.createTextNode(this.parentMenu.options.buttons.cancel);
             cancelBtn.appendChild(cancelText);
-            applyDiv.appendChild(cancelBtn);
-            baseDiv.appendChild(applyDiv);
-            applyItem.itemDiv = applyDiv;
+            this.applyDiv.appendChild(cancelBtn);
+            baseDiv.appendChild(this.applyDiv);
+            applyItem.itemDiv = this.applyDiv;
             this.applyBtn.addEventListener('click', () => {
                 this.submit(this._applyItem);
             });
@@ -1434,78 +1434,52 @@ class MenuLevel {
         levelStyle.top = y + 'px';
         this.scrollDiv.style.width = "auto";
         this.scrollDiv.style.height = "auto";
+        this.scrollDiv.style.maxHeight = null;
         const useMaxSpace = this.parentMenu.options.useMaxSpace;
         const viewportHeight = getViewportSize().height;
-        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) {
-            let maxHeight = viewportHeight - 30;
-            if (this.searchDiv) {
-                maxHeight -= this.searchDiv.scrollHeight;
-                y -= this.searchDiv.scrollHeight;
-            }
-            if (this.closeDiv) {
-                maxHeight -= this.closeDiv.offsetHeight;
-                y -= this.closeDiv.offsetHeight;
-            }
-            this.scrollDiv.style.maxHeight = maxHeight + 'px';
-            levelStyle.top = this.adjustTopPos(y) + 'px';
-        }
-        else if (useMaxSpace) {
-            let maxHeight = viewportHeight - 30;
-            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 (top < bottom) {
-                    levelStyle.top = y - top + 5 + 'px';
-                }
-                else {
-                    levelStyle.top = Math.max(5, viewportHeight - levelDivHeight - 30) + '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'; // - anchorHeight
-                }
-                else {
-                    // Падаємо вниз
-                    this.scrollDiv.style.maxHeight = maxHeight - magic - anchorHeight + 'px';
-                    levelStyle.top = y + anchorHeight + 'px';
-                }
-            }
+        const upperSpace = y - scrollY;
+        const lowerSpace = viewportHeight - upperSpace - anchorHeight;
+        const minOffset = 15;
+        // Рахуємо початковий контейнер
+        let levelDivRect = this.levelDiv.getBoundingClientRect();
+        if (this.levelIndex == 0 && levelDivRect.height < lowerSpace - minOffset) { //root level. Have enough space to drop down without scroll
+            levelStyle.top = (y + anchorHeight) + 'px';
+        }
+        else if (this.levelIndex == 0 && levelDivRect.height < upperSpace - minOffset) { //root level. Have enough space to drop up without scroll
+            levelStyle.top = (y - levelDivRect.height) + 'px';
+        }
+        else if (useMaxSpace || this.levelIndex > 0) { //sub-level or useMaxSpace option set. Use all the space
+            const outsideBottom = levelDivRect.bottom + minOffset - scrollY - viewportHeight;
+            if (outsideBottom > 0) {
+                levelStyle.top = levelDivRect.top - outsideBottom + 'px';
+            }
+            levelDivRect = this.levelDiv.getBoundingClientRect();
+            const outsideTop = scrollY + minOffset - levelDivRect.top;
+            if (outsideTop > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideTop + 'px';
+                levelStyle.top = levelDivRect.top + outsideTop + 'px';
+            }
+        }
+        else if (upperSpace <= lowerSpace) { //root level. Drop down with scroll
+            levelStyle.top = (y + anchorHeight) + 'px';
+            const outsideBottom = levelDivRect.height + minOffset - lowerSpace;
+            if (outsideBottom > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideBottom + 'px';
+            }
+        }
+        else { //root level. Drop up with scroll
+            y -= levelDivRect.height;
+            const outsideTop = scrollY + minOffset - y;
+            if (outsideTop > 0) {
+                const scrollDivRect = this.scrollDiv.getBoundingClientRect();
+                this.scrollDiv.style.maxHeight = scrollDivRect.height - outsideTop + 'px';
+                y += outsideTop;
+            }
+            levelStyle.top = y + 'px';
         }
         //setting minimal level width if it is defined
         let minItemWidth = this.parentMenu.minItemWidth;
@@ -1803,12 +1777,13 @@ class PopupMenu {
         this.active = true;
         this.setSelectedItems(this.options.items, selectedIds);
         if (browserUtils.isMobileMode()) {
-            this.rootLevel.showAt(0, 0, true, true);
+            this.rootLevel.initLevelDiv();
             this.rootLevel.levelDiv.style.top = '0px';
             this.rootLevel.levelDiv.style.bottom = '0px';
             this.rootLevel.levelDiv.style.right = '0px';
             this.rootLevel.levelDiv.style.position = 'fixed';
             this.rootLevel.levelDiv.style.fontSize = '20px';
+            this.rootLevel.showAt(0, 0, true, true);
         }
         else {
             const anchor = options.anchor || document.documentElement;
@@ -1825,9 +1800,13 @@ 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, anchor);
+            this.rootLevel.initLevelDiv();
             this.rootLevel.levelDiv.style.width = '';
             this.rootLevel.levelDiv.style.right = '';
+            this.rootLevel.levelDiv.style.bottom = '';
+            this.rootLevel.levelDiv.style.position = 'absolute';
+            this.rootLevel.levelDiv.style.fontSize = '14px';
+            this.rootLevel.showAt(pos.x, pos.y, true, true, anchor);
             if (!this.rootLevel.levelDiv.style.zIndex) {
                 // z-index is at least 10000 and more if anchor has bigger
                 this.rootLevel.levelDiv.style.zIndex = `${Math.max(10000, findHighestZIndex(anchor) + 1)}`;
@@ -1848,7 +1827,6 @@ class PopupMenu {
                 }
                 this.rootLevel.levelDiv.style.right = getViewportSize().width - pos.x - anchorWidth + 'px';
             }
-            this.rootLevel.levelDiv.style.fontSize = '14px';
         }
         this.rootLevel.levelDiv.style.visibility = 'visible';
         this.rootLevel.focus();
@@ -3631,7 +3609,9 @@ class ColumnsPanel extends Widget {
     }
     setOptions(options) {
         utils.assignDeep(this.options, options);
-        this.context.options.allowCustomExpressions = options.allowCustomExpressions;
+        if (typeof options.allowCustomExpressions !== 'undefined') {
+            this.context.options.allowCustomExpressions = options.allowCustomExpressions;
+        }
         if (options.attrElementFormat) {
             this.context.options.attributeFormat = options.attrElementFormat;
         }
@@ -3993,6 +3973,13 @@ class ColumnsPanel extends Widget {
     }
 }
 
+var ColumnsEditMode;
+(function (ColumnsEditMode) {
+    ColumnsEditMode[ColumnsEditMode["ReadOnly"] = 0] = "ReadOnly";
+    ColumnsEditMode[ColumnsEditMode["FixedList"] = 16] = "FixedList";
+    ColumnsEditMode[ColumnsEditMode["Full"] = 255] = "Full";
+})(ColumnsEditMode || (ColumnsEditMode = {}));
+
 class ColumnRendererCB {
     constructor(panel, column, slot) {
         this.functionMenu = null;
@@ -4016,7 +4003,7 @@ class ColumnRendererCB {
                 .replaceChild(builder.toDOM(), this.element);
         }
         this.element = builder.toDOM();
-        if (this.bar.options.allowDragDrop) {
+        if (this.bar.isDraggable()) {
             eqDragManager.registerDraggableItem({
                 element: this.element,
                 scope: "entityAttrSort",
@@ -4063,15 +4050,19 @@ class ColumnRendererCB {
         this.render();
     }
     isEditable() {
-        return this.column.enabled && !this.column.isReadOnly();
+        // Editable if enabled, not read-only, and editMode is All or FixedList (for title/sort/order)
+        return this.column.enabled && !this.column.isReadOnly() && (this.bar.options.editMode === ColumnsEditMode.Full || this.bar.options.editMode === ColumnsEditMode.FixedList);
     }
     renderButtonsBlock() {
+        // Only show delete/type buttons in All mode
+        const showDelete = this.bar.options.editMode === ColumnsEditMode.Full;
+        const showType = this.bar.options.editMode === ColumnsEditMode.Full;
         return domel('div', this.element)
             .addClass(`${eqCssPrefix}-column-buttonsBlock`, `${this.cssPrefix}-buttonsBlock`)
             .addChildElement(this.renderSortingButton())
-            .addChildElement(this.renderColumnTypeButton())
+            .addChildElement(showType ? this.renderColumnTypeButton() : null)
             .addChildElement(this.renderColumnFormatButton())
-            .addChildElement(this.renderDeleteButton())
+            .addChildElement(showDelete ? this.renderDeleteButton() : null)
             .toDOM();
     }
     renderCaptionBlock() {
@@ -4256,7 +4247,8 @@ class ColumnRendererCB {
         return false;
     }
     renderDeleteButton() {
-        if (this.column.isReadOnly()) {
+        // Only show delete in All mode
+        if (this.column.isReadOnly() || this.bar.options.editMode !== ColumnsEditMode.Full) {
             return null;
         }
         return domel('div')
@@ -4329,7 +4321,8 @@ class ColumnRendererCB {
         });
     }
     renderColumnTypeButton() {
-        if (!this.isEditable() || this.bar.options.allowAggrColumns === false) {
+        // Only show type button in All mode
+        if (!this.isEditable() || this.bar.options.allowAggrColumns === false || this.bar.options.editMode !== ColumnsEditMode.Full) {
             return null;
         }
         return domel('div')
@@ -4540,6 +4533,9 @@ class AttrColumnRendererCB extends ColumnRendererCB {
         this.fireColumnChanged();
     }
     changeColumnTypeHandler(ev) {
+        // Only allow type change in All mode
+        if (this.bar.options.editMode !== ColumnsEditMode.Full)
+            return;
         this.functionMenu.showMenu({
             anchor: ev.target,
             selectedIds: null,
@@ -4584,10 +4580,18 @@ class AggrFuncColumnRendererCB extends AttrColumnRendererCB {
         this.fireColumnChanged();
     }
     changeColumnTypeHandler(ev) {
+        // Only allow type change in All mode
+        if (this.bar.options.editMode !== ColumnsEditMode.Full)
+            return;
         this.changeTypeToSimple();
     }
 }
 
+/**
+ * Base class for editable column renderers for the ColumnsBar widgets.
+ * It provides common functionality for rendering editable columns,
+ * including handling column type changes and rendering buttons.
+ */
 class EditableColumnRendererCB extends ColumnRendererCB {
     getClassesToAdd() {
         return `${this.cssPrefix}-row ${this.cssPrefix}-row-column-entattr` + super.getClassesToAdd();
@@ -4614,6 +4618,9 @@ class EditableColumnRendererCB extends ColumnRendererCB {
         return true;
     }
     changeColumnTypeHandler(ev) {
+        // Only allow type change in All mode
+        if (this.bar.options.editMode !== ColumnsEditMode.Full)
+            return;
         this.changeTypeToSimple();
     }
 }
@@ -4681,7 +4688,8 @@ class ColumnsBar extends Widget {
             sortEntities: false,
             columnRenderedCallback: null,
             customExpressionText: 0,
-            showAddAllForEntity: false
+            showAddAllForEntity: false,
+            editMode: ColumnsEditMode.Full
         };
         this.landingSlot = domel('div')
             .addClass(`${eqCssPrefix}-highlight`)
@@ -4708,6 +4716,10 @@ class ColumnsBar extends Widget {
     getWidgetType() {
         return 'columnsBar';
     }
+    isDraggable() {
+        // Only allow drag-drop in All and FixedList modes
+        return this.options.allowDragDrop && this.options.editMode > ColumnsEditMode.ReadOnly;
+    }
     init(context, options) {
         super.init(context, options);
         this.setOptions(options);
@@ -4720,7 +4732,8 @@ class ColumnsBar extends Widget {
         this.detachQueryObserver();
         this.attachQueryObserver();
         eqDragManager.removeDropContainer(this.slot);
-        if (this.options.allowDragDrop) {
+        // Only allow drag-drop in All and FixedList modes
+        if (this.isDraggable()) {
             eqDragManager.registerDropContainer({
                 element: this.slot,
                 scopes: ["entityAttrSort"],
@@ -4846,7 +4859,9 @@ class ColumnsBar extends Widget {
     }
     setOptions(options) {
         this.options = utils.assignDeep(this.options, options);
-        this.getContext().options.allowCustomExpressions = options.allowCustomExpressions;
+        if (typeof options.allowCustomExpressions !== 'undefined') {
+            this.context.options.allowCustomExpressions = options.allowCustomExpressions;
+        }
     }
     showLandingSlot(pageX, pageY) {
         const elements = this.columnsBlock.querySelectorAll(`[class*=${this.cssPrefix}-row]`);
@@ -4957,7 +4972,8 @@ class ColumnsBar extends Widget {
                 .addClass(`${this.cssPrefix}-columns`)
                 .addClass(getMobileCssClass())
                 .toDOM();
-        if (this.options.showAddRow) {
+        // Only show add row in All mode
+        if (this.options.showAddRow && this.options.editMode === ColumnsEditMode.Full) {
             this.addRowButton =
                 domel('div')
                     .toDOM();
@@ -5020,16 +5036,18 @@ class ColumnsBar extends Widget {
             return false;
         })
             .toDOM();
-        this.buttonsBlockDeleteButton = domel('div', this.columnButtonsBlockMobile)
-            .addClass(`${this.cssPrefix}-column-button`, `${this.cssPrefix}-column-button-delete`)
-            .on('touchstart click', (ev) => {
-            ev.stopPropagation();
-            this.currentColumnRenderer.buttonDeleteClickHandler.call(this.currentColumnRenderer, ev);
-            this.toggleColumnPicked(null);
-            this.hideColumnButtonsMobile();
-            return false;
-        })
-            .toDOM();
+        if (this.options.editMode == ColumnsEditMode.Full) {
+            this.buttonsBlockDeleteButton = domel('div', this.columnButtonsBlockMobile)
+                .addClass(`${this.cssPrefix}-column-button`, `${this.cssPrefix}-column-button-delete`)
+                .on('touchstart click', (ev) => {
+                ev.stopPropagation();
+                this.currentColumnRenderer.buttonDeleteClickHandler.call(this.currentColumnRenderer, ev);
+                this.toggleColumnPicked(null);
+                this.hideColumnButtonsMobile();
+                return false;
+            })
+                .toDOM();
+        }
         domel('div', this.columnButtonsBlockMobile)
             .addClass(`${this.cssPrefix}-column-button-close-block`)
             .on('touchstart click', () => {
@@ -5058,7 +5076,7 @@ class ColumnsBar extends Widget {
                 .setStyle('top', (top + rect.height).toString() + 'px');
         }
         //show/hide separate buttons
-        if (column.enabled && !column.isReadOnly()) {
+        if (column.enabled && !column.isReadOnly() && this.options.editMode > ColumnsEditMode.ReadOnly) {
             domel(this.buttonsBlockSortingButton).show();
             domel(this.buttonsBlockTypeButton).show();
             if (columnRenderer.formatButtonIsShown()) {
@@ -5073,7 +5091,7 @@ class ColumnsBar extends Widget {
             domel(this.buttonsBlockTypeButton).hide();
         }
         //show
-        if (column.isReadOnly()) {
+        if (column.isReadOnly() || this.options.editMode == ColumnsEditMode.ReadOnly) {
             domel(this.columnButtonsBlockMobile).hide();
         }
         else {
@@ -14481,4 +14499,4 @@ if (!Array.prototype.findIndex) {
     };
 }
 
-export { AddRowRenderer, AdvancedSearchView, AggrFuncColumnRendererCB, AggrFuncColumnRendererCP, AggrSettingsDialog, AggrSettingsRenderer, AggregationBar, AttrColumnRendererCB, AttrColumnRendererCP, AttributeExpressionRenderer, BaseElementRenderer, ChartFacet, ChartJsWidget, ChartType, ChartWidget, ColumnAction, ColumnRendererCB, ColumnRendererCP, ColumnsBar, ColumnsPanel, ConditionAction, ConditionGroupRenderer, ConditionGroupRowRenderer, ConditionRenderer, ConstColumnRendererCP, CustomListExpressionRenderer, CustomSqlColumnRendererCP, DataFilterView, DataTableFacet, DateTimeExpressionRenderer, DomDropDownElementBuilder, DropDownRenderer, EasyGridWidget, EntitiesPanel, EqHtmlGrid, ExportDialog, ExportWidget, ExpressionRenderer, FacetContainer, FacetType, FilterBar, GoogleChartWidget, Grid, HtmlContentWidget, HtmlDataFilterView, InputExpressionRenderer, ListExpressionRenderer, ManageDrillDownWidget, OperatorRenderer, PivotTableFacet, PopupMenu, ProcessWidget, QPEditablePart, QueryPanel, ReportView, ResultFacet, ResultFacetsPanel, SimpleConditionRenderer, SortingBar, SqlListExpressionRenderer, StatementPanel, SubQueryExpressionRenderer, TextRenderer, View, dropdown };
+export { AddRowRenderer, AdvancedSearchView, AggrFuncColumnRendererCB, AggrFuncColumnRendererCP, AggrSettingsDialog, AggrSettingsRenderer, AggregationBar, AttrColumnRendererCB, AttrColumnRendererCP, AttributeExpressionRenderer, BaseElementRenderer, ChartFacet, ChartJsWidget, ChartType, ChartWidget, ColumnAction, ColumnRendererCB, ColumnRendererCP, ColumnsBar, ColumnsEditMode, ColumnsPanel, ConditionAction, ConditionGroupRenderer, ConditionGroupRowRenderer, ConditionRenderer, ConstColumnRendererCP, CustomListExpressionRenderer, CustomSqlColumnRendererCP, DataFilterView, DataTableFacet, DateTimeExpressionRenderer, DomDropDownElementBuilder, DropDownRenderer, EasyGridWidget, EntitiesPanel, EqHtmlGrid, ExportDialog, ExportWidget, ExpressionRenderer, FacetContainer, FacetType, FilterBar, GoogleChartWidget, Grid, HtmlContentWidget, HtmlDataFilterView, InputExpressionRenderer, ListExpressionRenderer, ManageDrillDownWidget, OperatorRenderer, PivotTableFacet, PopupMenu, ProcessWidget, QPEditablePart, QueryPanel, ReportView, ResultFacet, ResultFacetsPanel, SimpleConditionRenderer, SortingBar, SqlListExpressionRenderer, StatementPanel, SubQueryExpressionRenderer, TextRenderer, View, dropdown };

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

@@ -17,6 +17,7 @@ declare class MenuLevel {
     private levelIndex;
     private searchDiv;
     private searchBox;
+    private applyDiv;
     private closeDiv;
     private scrollDiv;
     private domWriteItemsId;

package/dist/types/widgets/columns_bar.d.ts

@@ -20,6 +20,7 @@ export declare class ColumnsBar extends Widget {
     private customQuery?;
     constructor(slot: HTMLElement, customQuery?: Query);
     getWidgetType(): string;
+    isDraggable(): boolean;
     init(context: EqContext, options?: ColumnsBarOptions): void;
     private attachQueryObserver;
     getQuery(): Query;

package/dist/types/widgets/renderers/columnsbar/editable_column_renderer_cb.d.ts

@@ -1,4 +1,9 @@
 import { ColumnRendererCB } from './column_renderer_cb';
+/**
+ * Base class for editable column renderers for the ColumnsBar widgets.
+ * It provides common functionality for rendering editable columns,
+ * including handling column type changes and rendering buttons.
+ */
 export declare class EditableColumnRendererCB extends ColumnRendererCB {
     protected getClassesToAdd(): string;
     protected renderColumnTypeButton(): HTMLDivElement;

package/dist/types/widgets/widget_options.d.ts

@@ -15,6 +15,11 @@ export interface UseInOptions {
     useInResult: boolean;
     useInSorting: boolean;
 }
+export declare enum ColumnsEditMode {
+    ReadOnly = 0,
+    FixedList = 16,
+    Full = 255
+}
 /** EntitiesPanel options */
 export interface EntitiesPanelOptions {
     showToolbar?: boolean;
@@ -168,6 +173,8 @@ export interface ColumnsPanelOptions {
     showAddAllForEntity?: boolean;
     /** Gets or sets a value indicating whether a progress indicator should appear while the model is loading */
     showIndicatorOnLoad?: boolean;
+    /** Gets or sets the edit mode option: All, FixedList or ReadOnly */
+    editMode?: ColumnsEditMode;
     [name: string]: any;
 }
 /** Columns bar options */

package/package.json

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