@easyquery/ui 7.4.0-rc02 → 7.4.0-rc04

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

@@ -613,6 +613,13 @@ class EntitiesPanel 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 MenuLevel {
     get applyItem() {
         return this._applyItem;
@@ -2009,15 +2016,22 @@ class ColumnRendererCP {
             this.createFormatsMenu();
         }
         this.createButtonMenu();
+        const isFullMode = this.panel.options.editMode === exports.ColumnsEditMode.Full;
+        const isReadOnlyMode = this.panel.options.editMode === exports.ColumnsEditMode.ReadOnly;
+        const showCheckboxes = this.panel.options.showCheckboxes !== false;
         builder
             .addClass(this.getClassesToAdd())
-            .addClass(getMobileCssClass())
-            .addChildElement(this.renderCheckbox())
+            .addClass(getMobileCssClass());
+        if (showCheckboxes && !isReadOnlyMode && !this.column.isReadOnly()) {
+            builder.addChildElement(this.renderCheckbox());
+        }
+        if (!isReadOnlyMode) {
             //start sort button
-            .addChild('div', builder => builder
-            .addClass(`${eqCssPrefix}-button-placeholder`, `${this.cssPrefix}-button-placeholder`, `${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortbutton-placeholder`)
-            .addChildElement(this.sortingButton));
-        // end sort button
+            builder.addChild('div', builder => builder
+                .addClass(`${eqCssPrefix}-button-placeholder`, `${this.cssPrefix}-button-placeholder`, `${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortbutton-placeholder`)
+                .addChildElement(this.sortingButton));
+            // end sort button
+        }
         builder.addChildElement(this.renderExpressionBlock());
         if (this.panel.options.showColumnTitles !== false && !ui.browserUtils.isMobileMode()) {
             builder
@@ -2031,36 +2045,37 @@ class ColumnRendererCP {
             builder
                 .addClass(`${eqCssPrefix}-column-buttonsBlock`, `${this.cssPrefix}-buttonsBlock`)
                 .addClass(getMobileCssClass());
+            const buttonsToShow = this.getButtonsToShow();
             //start enable button
-            if (this.getButtonsToShow().indexOf("enable") >= 0 && !this.column.isReadOnly()) {
+            if (buttonsToShow.indexOf("enable") >= 0 && isFullMode && !showCheckboxes && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderEnabledButton());
                 buttonsIndex++;
                 buttonsList += 'Enable';
             }
             //end enable button
             //start aggr func button
-            if (this.getButtonsToShow().indexOf("type") >= 0 && this.columnEnabled) {
+            if (buttonsToShow.indexOf("type") >= 0 && this.columnEnabled && isFullMode) {
                 builder.addChildElement(this.renderColumnTypeButton());
                 buttonsIndex++;
                 buttonsList += 'Type';
             }
             //end aggr func button
             //start format selector button
-            if (this.getButtonsToShow().indexOf("format") >= 0 && this.columnEnabled) {
+            if (buttonsToShow.indexOf("format") >= 0 && this.columnEnabled && !isReadOnlyMode) {
                 builder.addChildElement(this.renderColumnFormatButton());
                 buttonsIndex++;
                 buttonsList += 'Format';
             }
             //end format selector button
             //start delete button
-            if (this.getButtonsToShow().indexOf("delete") >= 0 && !this.column.isReadOnly()) {
+            if (buttonsToShow.indexOf("delete") >= 0 && isFullMode && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderDeleteButton());
                 buttonsIndex++;
                 buttonsList += 'Delete';
             }
             //end delete button
             //start menu button
-            if (this.getButtonsToShow().indexOf("menu") >= 0 && !this.column.isReadOnly()) {
+            if (buttonsToShow.indexOf("menu") >= 0 && !(this.column.isReadOnly() || isReadOnlyMode)) {
                 builder.addChildElement(this.renderMenuButton());
                 buttonsIndex++;
                 buttonsList += 'Menu';
@@ -2084,7 +2099,7 @@ class ColumnRendererCP {
         if (this.panel.options.alwaysShowButtons) {
             this.showButtons();
         }
-        if (this.panel.options.showCheckboxes === false) {
+        if (!showCheckboxes) {
             builder.addClass("eqjs-no-checkbox");
         }
         return this.element;
@@ -2260,25 +2275,20 @@ class ColumnRendererCP {
             .toDOM();
     }
     renderCheckbox() {
-        if (this.panel.options.showCheckboxes && !this.column.isReadOnly()) {
-            return ui.domel("div")
-                .title(core.i18n.getText('CmdToggleEnable'))
-                .attr('tabIndex', '0')
-                .addClass(`${this.cssPrefix}-colelement ${this.cssPrefix}-column-checkbox`)
-                .addClass(`${this.columnEnabled ? 'enabled' : ''}`)
-                .on('click', () => {
-                this.columnEnabled = !this.columnEnabled;
-                this.column.fireChangedEvent();
-                return false;
-            })
-                .on('keypress', evt => { if ([13, 32].includes(evt.keyCode)) {
-                evt.target.click();
-            } })
-                .toDOM();
-        }
-        else {
-            return null;
-        }
+        return ui.domel("div")
+            .title(core.i18n.getText('CmdToggleEnable'))
+            .attr('tabIndex', '0')
+            .addClass(`${this.cssPrefix}-colelement ${this.cssPrefix}-column-checkbox`)
+            .addClass(`${this.columnEnabled ? 'enabled' : ''}`)
+            .on('click', () => {
+            this.columnEnabled = !this.columnEnabled;
+            this.column.fireChangedEvent();
+            return false;
+        })
+            .on('keypress', evt => { if ([13, 32].includes(evt.keyCode)) {
+            evt.target.click();
+        } })
+            .toDOM();
     }
     renderDeleteButton() {
         return ui.domel('div')
@@ -2374,7 +2384,13 @@ class ColumnRendererCP {
         } })).toDOM();
     }
     isEditable() {
-        return this.columnEnabled && !this.column.isReadOnly();
+        // Allow editing (title/sort/order) in Full or FixedList mode only
+        switch (this.panel.options.editMode) {
+            case exports.ColumnsEditMode.ReadOnly:
+                return false;
+            default:
+                return this.column.enabled && !this.column.isReadOnly();
+        }
     }
     changeFormatHandler(ev) {
         const formats = this.panel
@@ -2527,7 +2543,18 @@ class ColumnRendererCP {
             .concat(formats.map(format => ({ id: format.format, text: core.i18n.getText("DisplayFormats", format.name) || format.name })));
     }
     getButtonsToShow() {
-        return this.panel.options.buttons && Array.isArray(this.panel.options.buttons) ? this.panel.options.buttons : ["enable", "delete", "type", "sorting", "format"];
+        // In ReadOnly mode, no buttons
+        if (this.panel.options.editMode === exports.ColumnsEditMode.ReadOnly) {
+            return [];
+        }
+        // In FixedList mode, only allow sorting and caption editing
+        if (this.panel.options.editMode === exports.ColumnsEditMode.FixedList) {
+            return ["sorting", "format"];
+        }
+        // Default (Full)
+        return this.panel.options.buttons && Array.isArray(this.panel.options.buttons)
+            ? this.panel.options.buttons
+            : ["enable", "delete", "type", "sorting", "format"];
     }
     buttonMenuHandler(action, evt) {
         switch (action) {
@@ -2760,7 +2787,7 @@ class AttrColumnRendererCP extends ColumnRendererCP {
     renderBaseExpression() {
         const baseAttr = this.getAttribute();
         const attrCaption = this.panel.getContext().getAttributeTitle(baseAttr);
-        if (this.isEditable()) {
+        if (this.isEditable() && this.panel.options.editMode === exports.ColumnsEditMode.Full) {
             return ui.domel('a')
                 .attr('href', 'javascript:void(0)')
                 .title(attrCaption)
@@ -2779,10 +2806,12 @@ class AttrColumnRendererCP extends ColumnRendererCP {
             })
                 .toDOM();
         }
-        return ui.domel('span')
-            .text(attrCaption)
-            .title(attrCaption)
-            .toDOM();
+        else {
+            return ui.domel('span')
+                .text(attrCaption)
+                .title(attrCaption)
+                .toDOM();
+        }
     }
     baseExpressionItemSelectedCallback(data, item) {
         const attrid = data.id;
@@ -2933,7 +2962,8 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
         for (let idx = 0; idx < arrLength; idx++) {
             item = arrFormat[idx];
             if (item.type === 1) {
-                if (this.isEditable()) {
+                // Only allow function/type change in Full mode
+                if (this.panel.options.editMode === exports.ColumnsEditMode.Full && this.isEditable()) {
                     const functionLink = ui.domel('a')
                         .attr('href', 'javascript:void(0)')
                         .text(item.text)
@@ -3070,7 +3100,7 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
         let builder = ui.domel('div', exprBlock)
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
             .addClass(getMobileCssClass());
-        if (this.isEditable()) {
+        if (this.isEditable() && this.panel.options.editMode === exports.ColumnsEditMode.Full) {
             builder
                 .addChild('a', b => b
                 .attr('href', 'javascript:void(0)')
@@ -3146,7 +3176,8 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
         builder = ui.domel('div', exprBlock)
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
             .addClass(getMobileCssClass());
-        if (this.isEditable()) {
+        // Only allow data type change in Full mode
+        if (this.panel.options.editMode === exports.ColumnsEditMode.Full && this.isEditable()) {
             this.createDataTypeMenu();
             builder
                 .addChild('a', dataTypeLink => dataTypeLink
@@ -3166,7 +3197,6 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
             }));
         }
         else {
-            this.column.expr.dataType;
             builder
                 .addChild('span', b => {
                 b.text(core$1.DataType[this.column.expr.dataType])
@@ -3317,7 +3347,8 @@ class ColumnsPanel extends core.Widget {
             customExpressionText: 0,
             allowHiddenColumns: false,
             showAddAllForEntity: false,
-            showIndicatorOnLoad: true
+            showIndicatorOnLoad: true,
+            editMode: exports.ColumnsEditMode.Full
         };
         this.landingSlot = ui.domel('div')
             .addClass(`${this.cssPrefix}-col-landing-slot`)
@@ -3423,7 +3454,8 @@ class ColumnsPanel extends core.Widget {
                 .addClass(`${this.cssPrefix}-columns`)
                 .addClass(getMobileCssClass())
                 .toDOM();
-        if (this.options.showAddRow) {
+        // Only show add row in Full edit mode
+        if (this.options.showAddRow && this.options.editMode === exports.ColumnsEditMode.Full) {
             this.addRowElement =
                 ui.domel('div', this.slot)
                     .addClass(`${eqCssPrefix}-addrow`, `${this.cssPrefix}-addrow`, `${eqCssPrefix}-addrow-empty`)
@@ -3611,7 +3643,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;
         }
@@ -3706,6 +3740,10 @@ class ColumnsPanel extends core.Widget {
         }
     }
     addNewColumn(attrs, index) {
+        // Only allow adding columns in Full edit mode
+        if (this.options.editMode !== exports.ColumnsEditMode.Full) {
+            return null;
+        }
         this.getContext().getModel();
         const query = this.getQuery();
         if (Array.isArray(attrs)) {
@@ -3904,6 +3942,10 @@ class ColumnsPanel extends core.Widget {
         this.entitiesMenu.showMenu(menuOptions);
     }
     moveColumn(column, direction) {
+        // Only allow moving columns in Full or FixedList edit mode
+        if (this.options.editMode !== exports.ColumnsEditMode.Full && this.options.editMode !== exports.ColumnsEditMode.FixedList) {
+            return;
+        }
         const query = this.getQuery();
         const columns = query.getColumns();
         const index = columns.indexOf(column);
@@ -3996,7 +4038,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",
@@ -4043,15 +4085,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() {
@@ -4236,7 +4282,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')
@@ -4309,7 +4356,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')
@@ -4520,6 +4568,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,
@@ -4564,10 +4615,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();
@@ -4594,6 +4653,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();
     }
 }
@@ -4661,7 +4723,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`)
@@ -4688,6 +4751,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);
@@ -4700,7 +4767,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"],
@@ -4826,7 +4894,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]`);
@@ -4937,7 +5007,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();
@@ -5000,16 +5071,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', () => {
@@ -5038,7 +5111,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()) {
@@ -5053,7 +5126,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

@@ -611,6 +611,13 @@ class EntitiesPanel extends Widget {
     }
 }
 
+var ColumnsEditMode;
+(function (ColumnsEditMode) {
+    ColumnsEditMode[ColumnsEditMode["ReadOnly"] = 0] = "ReadOnly";
+    ColumnsEditMode[ColumnsEditMode["FixedList"] = 16] = "FixedList";
+    ColumnsEditMode[ColumnsEditMode["Full"] = 255] = "Full";
+})(ColumnsEditMode || (ColumnsEditMode = {}));
+
 class MenuLevel {
     get applyItem() {
         return this._applyItem;
@@ -2007,15 +2014,22 @@ class ColumnRendererCP {
             this.createFormatsMenu();
         }
         this.createButtonMenu();
+        const isFullMode = this.panel.options.editMode === ColumnsEditMode.Full;
+        const isReadOnlyMode = this.panel.options.editMode === ColumnsEditMode.ReadOnly;
+        const showCheckboxes = this.panel.options.showCheckboxes !== false;
         builder
             .addClass(this.getClassesToAdd())
-            .addClass(getMobileCssClass())
-            .addChildElement(this.renderCheckbox())
+            .addClass(getMobileCssClass());
+        if (showCheckboxes && !isReadOnlyMode && !this.column.isReadOnly()) {
+            builder.addChildElement(this.renderCheckbox());
+        }
+        if (!isReadOnlyMode) {
             //start sort button
-            .addChild('div', builder => builder
-            .addClass(`${eqCssPrefix}-button-placeholder`, `${this.cssPrefix}-button-placeholder`, `${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortbutton-placeholder`)
-            .addChildElement(this.sortingButton));
-        // end sort button
+            builder.addChild('div', builder => builder
+                .addClass(`${eqCssPrefix}-button-placeholder`, `${this.cssPrefix}-button-placeholder`, `${this.cssPrefix}-colelement`, `${this.cssPrefix}-sortbutton-placeholder`)
+                .addChildElement(this.sortingButton));
+            // end sort button
+        }
         builder.addChildElement(this.renderExpressionBlock());
         if (this.panel.options.showColumnTitles !== false && !browserUtils.isMobileMode()) {
             builder
@@ -2029,36 +2043,37 @@ class ColumnRendererCP {
             builder
                 .addClass(`${eqCssPrefix}-column-buttonsBlock`, `${this.cssPrefix}-buttonsBlock`)
                 .addClass(getMobileCssClass());
+            const buttonsToShow = this.getButtonsToShow();
             //start enable button
-            if (this.getButtonsToShow().indexOf("enable") >= 0 && !this.column.isReadOnly()) {
+            if (buttonsToShow.indexOf("enable") >= 0 && isFullMode && !showCheckboxes && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderEnabledButton());
                 buttonsIndex++;
                 buttonsList += 'Enable';
             }
             //end enable button
             //start aggr func button
-            if (this.getButtonsToShow().indexOf("type") >= 0 && this.columnEnabled) {
+            if (buttonsToShow.indexOf("type") >= 0 && this.columnEnabled && isFullMode) {
                 builder.addChildElement(this.renderColumnTypeButton());
                 buttonsIndex++;
                 buttonsList += 'Type';
             }
             //end aggr func button
             //start format selector button
-            if (this.getButtonsToShow().indexOf("format") >= 0 && this.columnEnabled) {
+            if (buttonsToShow.indexOf("format") >= 0 && this.columnEnabled && !isReadOnlyMode) {
                 builder.addChildElement(this.renderColumnFormatButton());
                 buttonsIndex++;
                 buttonsList += 'Format';
             }
             //end format selector button
             //start delete button
-            if (this.getButtonsToShow().indexOf("delete") >= 0 && !this.column.isReadOnly()) {
+            if (buttonsToShow.indexOf("delete") >= 0 && isFullMode && !this.column.isReadOnly()) {
                 builder.addChildElement(this.renderDeleteButton());
                 buttonsIndex++;
                 buttonsList += 'Delete';
             }
             //end delete button
             //start menu button
-            if (this.getButtonsToShow().indexOf("menu") >= 0 && !this.column.isReadOnly()) {
+            if (buttonsToShow.indexOf("menu") >= 0 && !(this.column.isReadOnly() || isReadOnlyMode)) {
                 builder.addChildElement(this.renderMenuButton());
                 buttonsIndex++;
                 buttonsList += 'Menu';
@@ -2082,7 +2097,7 @@ class ColumnRendererCP {
         if (this.panel.options.alwaysShowButtons) {
             this.showButtons();
         }
-        if (this.panel.options.showCheckboxes === false) {
+        if (!showCheckboxes) {
             builder.addClass("eqjs-no-checkbox");
         }
         return this.element;
@@ -2258,25 +2273,20 @@ class ColumnRendererCP {
             .toDOM();
     }
     renderCheckbox() {
-        if (this.panel.options.showCheckboxes && !this.column.isReadOnly()) {
-            return domel("div")
-                .title(i18n$1.getText('CmdToggleEnable'))
-                .attr('tabIndex', '0')
-                .addClass(`${this.cssPrefix}-colelement ${this.cssPrefix}-column-checkbox`)
-                .addClass(`${this.columnEnabled ? 'enabled' : ''}`)
-                .on('click', () => {
-                this.columnEnabled = !this.columnEnabled;
-                this.column.fireChangedEvent();
-                return false;
-            })
-                .on('keypress', evt => { if ([13, 32].includes(evt.keyCode)) {
-                evt.target.click();
-            } })
-                .toDOM();
-        }
-        else {
-            return null;
-        }
+        return domel("div")
+            .title(i18n$1.getText('CmdToggleEnable'))
+            .attr('tabIndex', '0')
+            .addClass(`${this.cssPrefix}-colelement ${this.cssPrefix}-column-checkbox`)
+            .addClass(`${this.columnEnabled ? 'enabled' : ''}`)
+            .on('click', () => {
+            this.columnEnabled = !this.columnEnabled;
+            this.column.fireChangedEvent();
+            return false;
+        })
+            .on('keypress', evt => { if ([13, 32].includes(evt.keyCode)) {
+            evt.target.click();
+        } })
+            .toDOM();
     }
     renderDeleteButton() {
         return domel('div')
@@ -2372,7 +2382,13 @@ class ColumnRendererCP {
         } })).toDOM();
     }
     isEditable() {
-        return this.columnEnabled && !this.column.isReadOnly();
+        // Allow editing (title/sort/order) in Full or FixedList mode only
+        switch (this.panel.options.editMode) {
+            case ColumnsEditMode.ReadOnly:
+                return false;
+            default:
+                return this.column.enabled && !this.column.isReadOnly();
+        }
     }
     changeFormatHandler(ev) {
         const formats = this.panel
@@ -2525,7 +2541,18 @@ class ColumnRendererCP {
             .concat(formats.map(format => ({ id: format.format, text: i18n$1.getText("DisplayFormats", format.name) || format.name })));
     }
     getButtonsToShow() {
-        return this.panel.options.buttons && Array.isArray(this.panel.options.buttons) ? this.panel.options.buttons : ["enable", "delete", "type", "sorting", "format"];
+        // In ReadOnly mode, no buttons
+        if (this.panel.options.editMode === ColumnsEditMode.ReadOnly) {
+            return [];
+        }
+        // In FixedList mode, only allow sorting and caption editing
+        if (this.panel.options.editMode === ColumnsEditMode.FixedList) {
+            return ["sorting", "format"];
+        }
+        // Default (Full)
+        return this.panel.options.buttons && Array.isArray(this.panel.options.buttons)
+            ? this.panel.options.buttons
+            : ["enable", "delete", "type", "sorting", "format"];
     }
     buttonMenuHandler(action, evt) {
         switch (action) {
@@ -2758,7 +2785,7 @@ class AttrColumnRendererCP extends ColumnRendererCP {
     renderBaseExpression() {
         const baseAttr = this.getAttribute();
         const attrCaption = this.panel.getContext().getAttributeTitle(baseAttr);
-        if (this.isEditable()) {
+        if (this.isEditable() && this.panel.options.editMode === ColumnsEditMode.Full) {
             return domel('a')
                 .attr('href', 'javascript:void(0)')
                 .title(attrCaption)
@@ -2777,10 +2804,12 @@ class AttrColumnRendererCP extends ColumnRendererCP {
             })
                 .toDOM();
         }
-        return domel('span')
-            .text(attrCaption)
-            .title(attrCaption)
-            .toDOM();
+        else {
+            return domel('span')
+                .text(attrCaption)
+                .title(attrCaption)
+                .toDOM();
+        }
     }
     baseExpressionItemSelectedCallback(data, item) {
         const attrid = data.id;
@@ -2931,7 +2960,8 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
         for (let idx = 0; idx < arrLength; idx++) {
             item = arrFormat[idx];
             if (item.type === 1) {
-                if (this.isEditable()) {
+                // Only allow function/type change in Full mode
+                if (this.panel.options.editMode === ColumnsEditMode.Full && this.isEditable()) {
                     const functionLink = domel('a')
                         .attr('href', 'javascript:void(0)')
                         .text(item.text)
@@ -3068,7 +3098,7 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
         let builder = domel('div', exprBlock)
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
             .addClass(getMobileCssClass());
-        if (this.isEditable()) {
+        if (this.isEditable() && this.panel.options.editMode === ColumnsEditMode.Full) {
             builder
                 .addChild('a', b => b
                 .attr('href', 'javascript:void(0)')
@@ -3144,7 +3174,8 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
         builder = domel('div', exprBlock)
             .addClass(`${this.cssPrefix}-colelement`, `${this.cssPrefix}-attrelement`)
             .addClass(getMobileCssClass());
-        if (this.isEditable()) {
+        // Only allow data type change in Full mode
+        if (this.panel.options.editMode === ColumnsEditMode.Full && this.isEditable()) {
             this.createDataTypeMenu();
             builder
                 .addChild('a', dataTypeLink => dataTypeLink
@@ -3164,7 +3195,6 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
             }));
         }
         else {
-            this.column.expr.dataType;
             builder
                 .addChild('span', b => {
                 b.text(DataType[this.column.expr.dataType])
@@ -3315,7 +3345,8 @@ class ColumnsPanel extends Widget {
             customExpressionText: 0,
             allowHiddenColumns: false,
             showAddAllForEntity: false,
-            showIndicatorOnLoad: true
+            showIndicatorOnLoad: true,
+            editMode: ColumnsEditMode.Full
         };
         this.landingSlot = domel('div')
             .addClass(`${this.cssPrefix}-col-landing-slot`)
@@ -3421,7 +3452,8 @@ class ColumnsPanel extends Widget {
                 .addClass(`${this.cssPrefix}-columns`)
                 .addClass(getMobileCssClass())
                 .toDOM();
-        if (this.options.showAddRow) {
+        // Only show add row in Full edit mode
+        if (this.options.showAddRow && this.options.editMode === ColumnsEditMode.Full) {
             this.addRowElement =
                 domel('div', this.slot)
                     .addClass(`${eqCssPrefix}-addrow`, `${this.cssPrefix}-addrow`, `${eqCssPrefix}-addrow-empty`)
@@ -3609,7 +3641,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;
         }
@@ -3704,6 +3738,10 @@ class ColumnsPanel extends Widget {
         }
     }
     addNewColumn(attrs, index) {
+        // Only allow adding columns in Full edit mode
+        if (this.options.editMode !== ColumnsEditMode.Full) {
+            return null;
+        }
         this.getContext().getModel();
         const query = this.getQuery();
         if (Array.isArray(attrs)) {
@@ -3902,6 +3940,10 @@ class ColumnsPanel extends Widget {
         this.entitiesMenu.showMenu(menuOptions);
     }
     moveColumn(column, direction) {
+        // Only allow moving columns in Full or FixedList edit mode
+        if (this.options.editMode !== ColumnsEditMode.Full && this.options.editMode !== ColumnsEditMode.FixedList) {
+            return;
+        }
         const query = this.getQuery();
         const columns = query.getColumns();
         const index = columns.indexOf(column);
@@ -3994,7 +4036,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",
@@ -4041,15 +4083,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() {
@@ -4234,7 +4280,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')
@@ -4307,7 +4354,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')
@@ -4518,6 +4566,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,
@@ -4562,10 +4613,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();
@@ -4592,6 +4651,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();
     }
 }
@@ -4659,7 +4721,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`)
@@ -4686,6 +4749,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);
@@ -4698,7 +4765,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"],
@@ -4824,7 +4892,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]`);
@@ -4935,7 +5005,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();
@@ -4998,16 +5069,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', () => {
@@ -5036,7 +5109,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()) {
@@ -5051,7 +5124,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 {
@@ -14459,4 +14532,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/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-rc02",
+    "version": "7.4.0-rc04",
     "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-rc02"
+        "@easyquery/core": "^7.4.0-rc04"
     },
     "files": [
         "dist",