@easyquery/ui 7.4.2-rc01 → 7.4.2-rc02

package/dist/easyquery.ui.cjs.js

@@ -1352,6 +1352,18 @@ class MenuLevel {
         this.activeItem = menuItem;
         const rowElement = menuItem.itemDiv;
         rowElement.classList.add('active');
+        if (this.scrollDiv && rowElement) {
+            const rowTop = rowElement.offsetTop;
+            const rowBottom = rowTop + rowElement.offsetHeight;
+            const scrollTop = this.scrollDiv.scrollTop;
+            const scrollBottom = scrollTop + this.scrollDiv.clientHeight;
+            if (rowTop < scrollTop) {
+                this.scrollDiv.scrollTop = rowTop;
+            }
+            else if (rowBottom > scrollBottom) {
+                this.scrollDiv.scrollTop = rowBottom - this.scrollDiv.clientHeight;
+            }
+        }
         if (this.parentMenu.options.useDefaultStyles) {
             this.parentMenu.style.colors.bgON;
             this.parentMenu.style.colors.fgON;
@@ -2124,6 +2136,11 @@ class ColumnRendererCP {
         if (this.panel.options.accentActiveColumn || ui.browserUtils.isMobileMode()) {
             builder
                 .on('click', this.onMouseClick.bind(this)); //touchstart
+            builder.on('focusin', ev => {
+                if (!this.isColumnActive()) {
+                    this.activate();
+                }
+            });
         }
         if (this.panel.options.alwaysShowButtons) {
             this.showButtons();
@@ -2219,7 +2236,9 @@ class ColumnRendererCP {
         else {
             builder.addChild('span', b => {
                 b.text(this.column.caption)
-                    .title(this.column.caption);
+                    .title(this.column.caption)
+                    .attr('tabindex', '0')
+                    .attr('aria-disabled', 'true');
             });
         }
         return builder.toDOM();
@@ -2838,6 +2857,8 @@ class AttrColumnRendererCP extends ColumnRendererCP {
             return ui.domel('span')
                 .text(attrCaption)
                 .title(attrCaption)
+                .attr('tabindex', '0')
+                .attr('aria-disabled', 'true')
                 .toDOM();
         }
     }
@@ -3026,7 +3047,9 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
                         .addClass(getMobileCssClass())
                         .addChild('span', b => b
                         .text(item.text)
-                        .title(item.text)));
+                        .title(item.text)
+                        .attr('tabindex', '0')
+                        .attr('aria-disabled', 'true')));
                 }
             }
             else if (item.type === 2) {
@@ -3190,7 +3213,9 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
             builder
                 .addChild('span', b => {
                 b.text(this.column.caption)
-                    .title(this.column.caption);
+                    .title(this.column.caption)
+                    .attr('tabindex', '0')
+                    .attr('aria-disabled', 'true');
             });
         }
         // Colon element
@@ -3228,7 +3253,9 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
             builder
                 .addChild('span', b => {
                 b.text(core$1.DataType[this.column.expr.dataType])
-                    .title(core$1.DataType[this.column.expr.dataType]);
+                    .title(core$1.DataType[this.column.expr.dataType])
+                    .attr('tabindex', '0')
+                    .attr('aria-disabled', 'true');
             });
         }
         return exprBlock;
@@ -4114,6 +4141,11 @@ class ColumnRendererCB {
         if (this.bar.options.accentActiveColumn || ui.browserUtils.isMobileMode()) {
             builder
                 .on('touchstart click', this.onMouseClick.bind(this));
+            builder.on('focusin', ev => {
+                if (!this.isColumnActive()) {
+                    this.onMouseClick(ev);
+                }
+            });
         }
         return this.element;
     }
@@ -4148,7 +4180,8 @@ class ColumnRendererCB {
                 .addChild('div', b => b
                 .title(caption)
                 .text(caption)
-                .attr('tabIndex', '0'))
+                .attr('tabIndex', '0')
+                .attr('aria-disabled', 'true'))
                 .toDOM();
         }
         const tapHandler = (ev) => {
@@ -6066,6 +6099,12 @@ class SimpleConditionRenderer extends ConditionRenderer {
                 }
                 return false;
             });
+            builder.on('focusin', ev => {
+                if (!this.isConditionActive()) {
+                    this.panel.toggleConditionPicked(this.condition);
+                    this.adjustButtonsVisibility();
+                }
+            });
         }
         builder
             .addChildElement(this.renderButtonsBlock());
@@ -6538,6 +6577,12 @@ class ConditionGroupRowRenderer extends SimpleConditionRenderer {
                     builder.toDOM().dispatchEvent(ui.createBrowserEvent("mouseenter"));
                 }
             });
+            builder.on('focusin', ev => {
+                if (!this.isConditionActive()) {
+                    this.panel.toggleConditionPicked(this.condition);
+                    this.adjustButtonsVisibility();
+                }
+            });
         }
         builder
             .addChildElement(this.renderButtonsBlock());
@@ -6611,7 +6656,9 @@ class ConditionGroupRowRenderer extends SimpleConditionRenderer {
                 builder.addChild('span', b => {
                     b.text(core$1.i18n.getText(curType.key))
                         .title(core$1.i18n.getText(curType.key))
-                        .addClass(`${this.cssPrefix}-grelement`);
+                        .addClass(`${this.cssPrefix}-grelement`)
+                        .attr('tabindex', '0')
+                        .attr('aria-disabled', 'true');
                 });
             }
             builder.addChild('span', b => {
@@ -6687,6 +6734,8 @@ class BaseElementRenderer {
         }
         else {
             return ui.domel('span')
+                .attr('tabindex', '0')
+                .attr('aria-disabled', 'true')
                 .title(displayedText)
                 .text(displayedText)
                 .toDOM();

package/dist/easyquery.ui.esm.js

@@ -1350,6 +1350,18 @@ class MenuLevel {
         this.activeItem = menuItem;
         const rowElement = menuItem.itemDiv;
         rowElement.classList.add('active');
+        if (this.scrollDiv && rowElement) {
+            const rowTop = rowElement.offsetTop;
+            const rowBottom = rowTop + rowElement.offsetHeight;
+            const scrollTop = this.scrollDiv.scrollTop;
+            const scrollBottom = scrollTop + this.scrollDiv.clientHeight;
+            if (rowTop < scrollTop) {
+                this.scrollDiv.scrollTop = rowTop;
+            }
+            else if (rowBottom > scrollBottom) {
+                this.scrollDiv.scrollTop = rowBottom - this.scrollDiv.clientHeight;
+            }
+        }
         if (this.parentMenu.options.useDefaultStyles) {
             this.parentMenu.style.colors.bgON;
             this.parentMenu.style.colors.fgON;
@@ -2122,6 +2134,11 @@ class ColumnRendererCP {
         if (this.panel.options.accentActiveColumn || browserUtils.isMobileMode()) {
             builder
                 .on('click', this.onMouseClick.bind(this)); //touchstart
+            builder.on('focusin', ev => {
+                if (!this.isColumnActive()) {
+                    this.activate();
+                }
+            });
         }
         if (this.panel.options.alwaysShowButtons) {
             this.showButtons();
@@ -2217,7 +2234,9 @@ class ColumnRendererCP {
         else {
             builder.addChild('span', b => {
                 b.text(this.column.caption)
-                    .title(this.column.caption);
+                    .title(this.column.caption)
+                    .attr('tabindex', '0')
+                    .attr('aria-disabled', 'true');
             });
         }
         return builder.toDOM();
@@ -2836,6 +2855,8 @@ class AttrColumnRendererCP extends ColumnRendererCP {
             return domel('span')
                 .text(attrCaption)
                 .title(attrCaption)
+                .attr('tabindex', '0')
+                .attr('aria-disabled', 'true')
                 .toDOM();
         }
     }
@@ -3024,7 +3045,9 @@ class AggrFuncColumnRendererCP extends AttrColumnRendererCP {
                         .addClass(getMobileCssClass())
                         .addChild('span', b => b
                         .text(item.text)
-                        .title(item.text)));
+                        .title(item.text)
+                        .attr('tabindex', '0')
+                        .attr('aria-disabled', 'true')));
                 }
             }
             else if (item.type === 2) {
@@ -3188,7 +3211,9 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
             builder
                 .addChild('span', b => {
                 b.text(this.column.caption)
-                    .title(this.column.caption);
+                    .title(this.column.caption)
+                    .attr('tabindex', '0')
+                    .attr('aria-disabled', 'true');
             });
         }
         // Colon element
@@ -3226,7 +3251,9 @@ class EditableColumnRendererCP extends AttrColumnRendererCP {
             builder
                 .addChild('span', b => {
                 b.text(DataType[this.column.expr.dataType])
-                    .title(DataType[this.column.expr.dataType]);
+                    .title(DataType[this.column.expr.dataType])
+                    .attr('tabindex', '0')
+                    .attr('aria-disabled', 'true');
             });
         }
         return exprBlock;
@@ -4112,6 +4139,11 @@ class ColumnRendererCB {
         if (this.bar.options.accentActiveColumn || browserUtils.isMobileMode()) {
             builder
                 .on('touchstart click', this.onMouseClick.bind(this));
+            builder.on('focusin', ev => {
+                if (!this.isColumnActive()) {
+                    this.onMouseClick(ev);
+                }
+            });
         }
         return this.element;
     }
@@ -4146,7 +4178,8 @@ class ColumnRendererCB {
                 .addChild('div', b => b
                 .title(caption)
                 .text(caption)
-                .attr('tabIndex', '0'))
+                .attr('tabIndex', '0')
+                .attr('aria-disabled', 'true'))
                 .toDOM();
         }
         const tapHandler = (ev) => {
@@ -6064,6 +6097,12 @@ class SimpleConditionRenderer extends ConditionRenderer {
                 }
                 return false;
             });
+            builder.on('focusin', ev => {
+                if (!this.isConditionActive()) {
+                    this.panel.toggleConditionPicked(this.condition);
+                    this.adjustButtonsVisibility();
+                }
+            });
         }
         builder
             .addChildElement(this.renderButtonsBlock());
@@ -6536,6 +6575,12 @@ class ConditionGroupRowRenderer extends SimpleConditionRenderer {
                     builder.toDOM().dispatchEvent(createBrowserEvent("mouseenter"));
                 }
             });
+            builder.on('focusin', ev => {
+                if (!this.isConditionActive()) {
+                    this.panel.toggleConditionPicked(this.condition);
+                    this.adjustButtonsVisibility();
+                }
+            });
         }
         builder
             .addChildElement(this.renderButtonsBlock());
@@ -6609,7 +6654,9 @@ class ConditionGroupRowRenderer extends SimpleConditionRenderer {
                 builder.addChild('span', b => {
                     b.text(i18n.getText(curType.key))
                         .title(i18n.getText(curType.key))
-                        .addClass(`${this.cssPrefix}-grelement`);
+                        .addClass(`${this.cssPrefix}-grelement`)
+                        .attr('tabindex', '0')
+                        .attr('aria-disabled', 'true');
                 });
             }
             builder.addChild('span', b => {
@@ -6685,6 +6732,8 @@ class BaseElementRenderer {
         }
         else {
             return domel('span')
+                .attr('tabindex', '0')
+                .attr('aria-disabled', 'true')
                 .title(displayedText)
                 .text(displayedText)
                 .toDOM();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@easyquery/ui",
-    "version": "7.4.2-rc01",
+    "version": "7.4.2-rc02",
     "description": "EasyQuery.JS Community UI widgets",
     "types": "./dist/types/public_api.d.ts",
     "main": "./dist/easyquery.ui.cjs.js",
@@ -30,7 +30,7 @@
     "bugs": "https://korzh.com/support",
     "license": "LGPL-3.0",
     "peerDependencies": {
-        "@easyquery/core": "^7.4.2-rc01"
+        "@easyquery/core": "^7.4.2-rc02"
     },
     "files": [
         "dist",