@progress/kendo-vue-grid 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431

package/dist/esm/header/HeaderRow.js

@@ -8,8 +8,11 @@ import { ColumnResizer } from '../drag/ColumnResizer.js';
 import { ColumnDraggable } from '../drag/ColumnDraggable.js';
 import { GridHeaderCell } from './GridHeaderCell.js';
 import { ColumnMenu } from '../columnMenu/ColumnMenu.js';
-import { templateRendering, hasListener, getListeners, Keys, noop } from '@progress/kendo-vue-common';
+import { templateRendering, hasListener, getListeners, Keys, noop, Icon } from '@progress/kendo-vue-common';
 import { HeaderThElement } from '@progress/kendo-vue-data-tools'; // from '../../../datatools/src/main.js';
+import { messages, sortableColumnAriaLabel, sortableColumnAscendingAriaLabel, sortableColumnDescendingAriaLabel } from '../messages/main.js';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -62,11 +65,18 @@ var HeaderRowVue2 = {
         return true;
       }
     },
-    isRtl: Boolean
+    isRtl: Boolean,
+    isColCountDefined: Boolean,
+    // columnsInitial prop: 
+    // Needed for hidden column scenarios. By this value we can define correct aria-colindex attribute
+    columnsInitial: Array
   },
   inject: {
     onNavFocus: {
       default: noop
+    },
+    kendoLocalizationService: {
+      default: null
     }
   },
   data: function data() {
@@ -127,7 +137,7 @@ var HeaderRowVue2 = {
     },
     cellClass: function cellClass(field, headerClassName, locked) {
       var customClass = headerClassName ? ' ' + headerClassName : '';
-      var result = "k-header ".concat(locked ? 'k-grid-header-sticky' : '') + customClass;
+      var result = "k-header" + (locked ? ' k-grid-header-sticky' : '') + customClass;
       if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
         return descriptor.field === field;
       }).length > 0) {
@@ -167,6 +177,7 @@ var HeaderRowVue2 = {
     theadClasses: {
       get: function get() {
         return {
+          'k-table-thead': true,
           'k-grid-header': true
         };
       }
@@ -182,6 +193,10 @@ var HeaderRowVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
+    var localizationService = provideLocalizationService(this);
+    var ariaLabelSortableColumn = localizationService.toLanguageString(sortableColumnAriaLabel, messages[sortableColumnAriaLabel]);
+    var ariaLabelAscendingSort = localizationService.toLanguageString(sortableColumnAscendingAriaLabel, messages[sortableColumnAscendingAriaLabel]);
+    var ariaLabelDescendingSort = localizationService.toLanguageString(sortableColumnDescendingAriaLabel, messages[sortableColumnDescendingAriaLabel]);
     this.serviceIndex = 0;
     this.index = -1;
     var cells = function cells(rowIndexes) {
@@ -195,24 +210,30 @@ var HeaderRowVue2 = {
         }) : -1;
         var sortDir = sortIndex >= 0 ? this.$props.sort[sortIndex].dir || 'none' : 'none';
         var sortIconRenderer = function sortIconRenderer(iconSortIndex) {
-          if (!_this.$props.sort) {
+          if (!this.$props.sort) {
             return null;
           }
+          var currentDir = iconSortIndex >= 0 ? this.$props.sort[iconSortIndex].dir : '';
           return iconSortIndex >= 0 && [h("span", {
             key: 1,
             "class": 'k-sort-icon'
-          }, [h("span", {
-            "class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-small'
-          })]), _this.$props.sort.length > 1 && h("span", {
+          }, [h(Icon, {
+            name: 'sort-' + currentDir + '-small',
+            attrs: this.v3 ? undefined : {
+              name: 'sort-' + currentDir + '-small',
+              icon: currentDir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon
+            },
+            icon: currentDir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon
+          })]), this.$props.sort.length > 1 && h("span", {
             key: 2,
             "class": 'k-sort-icon'
           }, [h("span", {
             "class": "k-sort-order"
           }, [iconSortIndex + 1])])];
         };
-        var sortIcon = sortIconRenderer(sortIndex);
-        var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked);
+        var sortIcon = sortIconRenderer.call(this, sortIndex);
         var columnMenu = column.columnMenu || column.columnMenu === false ? column.columnMenu : this.$props.columnMenu;
+        var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked) + (columnMenu ? ' k-filterable' : '');
         var columnMenuRender = !columnMenu || typeof columnMenu === 'boolean' ? !!columnMenu : this.getTemplate(columnMenu);
         var style = column.left !== undefined ? !this.$props.isRtl ? {
           left: column.left + 'px',
@@ -221,32 +242,41 @@ var HeaderRowVue2 = {
           left: column.right + 'px',
           right: column.left + 'px'
         } : {};
+        var getAriaLabel = ariaSortMap[sortDir] === 'none' ? ariaLabelSortableColumn : ariaSortMap[sortDir] === 'ascending' ? ariaLabelAscendingSort : ariaLabelDescendingSort;
         var ariaAttrs = column.isAccessible ? {
           ariaSort: ariaSortMap[sortDir],
+          ariaLabel: getAriaLabel,
           role: 'columnheader',
-          ariaColumnIndex: column.ariaColumnIndex,
-          ariaSelected: false
+          ariaColumnIndex: this.$props.isColCountDefined ? this.$props.columnsInitial.findIndex(function (col) {
+            return col.field === column.field;
+          }) + 1 : undefined,
+          ariaSelected: false,
+          ariaHaspopup: columnMenu ? 'menu' : this.$props.filterable && column.filterable ? 'dialog' : undefined
         } : {
-          'role': 'presentation'
+          role: 'columnheader'
         };
         var key = column.declarationIndex >= 0 ? ++this.index : --this.serviceIndex;
         return (
           // @ts-ignore function children
           h(HeaderThElement, {
-            ariaSort: ariaAttrs.ariaSort,
+            ariaSort: sortable ? ariaAttrs.ariaSort : undefined,
             attrs: this.v3 ? undefined : {
-              ariaSort: ariaAttrs.ariaSort,
+              ariaSort: sortable ? ariaAttrs.ariaSort : undefined,
+              ariaLabel: sortable ? ariaAttrs.ariaLabel : undefined,
               role: ariaAttrs.role,
               ariaColumnIndex: ariaAttrs.ariaColumnIndex,
               ariaSelected: ariaAttrs.ariaSelected,
+              ariaHaspopup: ariaAttrs.ariaHaspopup,
               colSpan: column.colSpan,
               rowSpan: column.rowSpan,
               columnId: column.id,
               navigatable: column.navigatable
             },
+            ariaLabel: sortable ? ariaAttrs.ariaLabel : undefined,
             role: ariaAttrs.role,
             ariaColumnIndex: ariaAttrs.ariaColumnIndex,
             ariaSelected: ariaAttrs.ariaSelected,
+            ariaHaspopup: ariaAttrs.ariaHaspopup,
             key: key,
             colSpan: column.colSpan,
             rowSpan: column.rowSpan,
@@ -477,9 +507,9 @@ var HeaderRowVue2 = {
       }, this);
     };
     return h("thead", {
-      role: "presentation",
+      role: "rowgroup",
       attrs: this.v3 ? undefined : {
-        role: "presentation",
+        role: "rowgroup",
         "data-keyboardnavheader": true
       },
       "class": this.theadClasses,
@@ -501,10 +531,13 @@ var HeaderRowVue2 = {
       }, this.v3 ? function () {
         return [cells.call(_this3, rowIndexes)];
       } : [cells.call(_this3, rowIndexes)]) || h("tr", {
+        "class": 'k-table-row',
         role: 'row',
         attrs: this.v3 ? undefined : {
-          role: 'row'
-        }
+          role: 'row',
+          "aria-rowindex": this.columnsMap.length
+        },
+        "aria-rowindex": this.columnsMap.length
       }, [cells.call(this, rowIndexes)]);
     }, this), this.$props.filterRow]);
   }

package/dist/esm/interfaces/GridFilterCellProps.d.ts

@@ -65,4 +65,16 @@ export interface GridFilterCellProps {
      * The ariaLabel of the filter editor.
      */
     ariaLabel?: string;
+    /**
+     * Configures the `size` of the cell.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
 }

package/dist/esm/messages/main.d.ts

@@ -94,10 +94,58 @@ export declare const filterSelectedItems = "grid.filterSelectedItems";
  * @hidden
  */
 export declare const sortAriaLabel = "grid.sortAriaLabel";
+/**
+ * @hidden
+ */
+export declare const sortableColumnAriaLabel = "grid.sortableColumnAriaLabel";
+/**
+ * @hidden
+ */
+export declare const sortableColumnAscendingAriaLabel = "grid.sortableColumnAscendingAriaLabel";
+/**
+ * @hidden
+ */
+export declare const sortableColumnDescendingAriaLabel = "grid.sortableColumnDescendingAriaLabel";
 /**
  * @hidden
  */
 export declare const filterAriaLabel = "grid.filterAriaLabel";
+/**
+ * @hidden
+ */
+export declare const numericFilterAriaLabel = "grid.numericFilterAriaLabel";
+/**
+ * @hidden
+ */
+export declare const dateFilterAriaLabel = "grid.dateFilterAriaLabel";
+/**
+ * @hidden
+ */
+export declare const textFilterAriaLabel = "grid.textFilterAriaLabel";
+/**
+ * @hidden
+ */
+export declare const booleanFilterAriaLabel = "grid.booleanFilterAriaLabel";
+/**
+ * @hidden
+ */
+export declare const groupHeaderAriaLabel = "grid.groupHeaderAriaLabel";
+/**
+ * @hidden
+ */
+export declare const groupCaretAriaLabelCollapse = "grid.groupCaretAriaLabelCollapse";
+/**
+ * @hidden
+ */
+export declare const groupCaretAriaLabelExpand = "grid.groupCaretAriaLabelExpand";
+/**
+ * @hidden
+ */
+export declare const expandDetailAriaLabel = "grid.expandDetailTemplateAriaLabel";
+/**
+ * @hidden
+ */
+export declare const collapseDetailAriaLabel = "grid.collapseDetailTemplateAriaLabel";
 /**
  * @hidden
  */
@@ -126,7 +174,19 @@ export declare const messages: {
     "grid.filterChooseOperator": string;
     "grid.filterSelectedItems": string;
     "grid.sortAriaLabel": string;
+    "grid.sortableColumnAriaLabel": string;
+    "grid.sortableColumnAscendingAriaLabel": string;
+    "grid.sortableColumnDescendingAriaLabel": string;
     "grid.filterAriaLabel": string;
+    "grid.numericFilterAriaLabel": string;
+    "grid.dateFilterAriaLabel": string;
+    "grid.textFilterAriaLabel": string;
+    "grid.booleanFilterAriaLabel": string;
+    "grid.groupHeaderAriaLabel": string;
+    "grid.groupCaretAriaLabelCollapse": string;
+    "grid.groupCaretAriaLabelExpand": string;
+    "grid.expandDetailTemplateAriaLabel": string;
+    "grid.collapseDetailTemplateAriaLabel": string;
     'grid.filterEqOperator': string;
     'grid.filterNotEqOperator': string;
     'grid.filterIsNullOperator': string;

package/dist/esm/messages/main.js

@@ -95,10 +95,58 @@ export var filterSelectedItems = 'grid.filterSelectedItems';
  * @hidden
  */
 export var sortAriaLabel = 'grid.sortAriaLabel';
+/**
+ * @hidden
+ */
+export var sortableColumnAriaLabel = 'grid.sortableColumnAriaLabel';
+/**
+ * @hidden
+ */
+export var sortableColumnAscendingAriaLabel = 'grid.sortableColumnAscendingAriaLabel';
+/**
+ * @hidden
+ */
+export var sortableColumnDescendingAriaLabel = 'grid.sortableColumnDescendingAriaLabel';
 /**
  * @hidden
  */
 export var filterAriaLabel = 'grid.filterAriaLabel';
+/**
+ * @hidden
+ */
+export var numericFilterAriaLabel = 'grid.numericFilterAriaLabel';
+/**
+ * @hidden
+ */
+export var dateFilterAriaLabel = 'grid.dateFilterAriaLabel';
+/**
+ * @hidden
+ */
+export var textFilterAriaLabel = 'grid.textFilterAriaLabel';
+/**
+ * @hidden
+ */
+export var booleanFilterAriaLabel = 'grid.booleanFilterAriaLabel';
+/**
+ * @hidden
+ */
+export var groupHeaderAriaLabel = 'grid.groupHeaderAriaLabel';
+/**
+ * @hidden
+ */
+export var groupCaretAriaLabelCollapse = 'grid.groupCaretAriaLabelCollapse';
+/**
+ * @hidden
+ */
+export var groupCaretAriaLabelExpand = 'grid.groupCaretAriaLabelExpand';
+/**
+ * @hidden
+ */
+export var expandDetailAriaLabel = 'grid.expandDetailTemplateAriaLabel';
+/**
+ * @hidden
+ */
+export var collapseDetailAriaLabel = 'grid.collapseDetailTemplateAriaLabel';
 /**
  * @hidden
  */
@@ -127,7 +175,19 @@ export var messages = (_a = {},
     _a[filterChooseOperator] = 'Choose Operator',
     _a[filterSelectedItems] = 'selected items',
     _a[sortAriaLabel] = 'Sortable',
+    _a[sortableColumnAriaLabel] = 'Sortable Column',
+    _a[sortableColumnAscendingAriaLabel] = 'Sorted in ascending order',
+    _a[sortableColumnDescendingAriaLabel] = 'Sorted in descending order',
     _a[filterAriaLabel] = 'Filter',
+    _a[numericFilterAriaLabel] = 'Numeric Filter',
+    _a[dateFilterAriaLabel] = 'Date Filter',
+    _a[textFilterAriaLabel] = 'Text Filter',
+    _a[booleanFilterAriaLabel] = 'Boolean Filter',
+    _a[groupHeaderAriaLabel] = 'Group Header',
+    _a[groupCaretAriaLabelCollapse] = 'Collapse Group',
+    _a[groupCaretAriaLabelExpand] = 'Expand Group',
+    _a[expandDetailAriaLabel] = 'Expand Details',
+    _a[collapseDetailAriaLabel] = 'Collapse Details',
     _a['grid.filterEqOperator'] = 'Is equal to',
     _a['grid.filterNotEqOperator'] = 'Is not equal to',
     _a['grid.filterIsNullOperator'] = 'Is null',

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-grid',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1669966840,
+    publishDate: 1673273952,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/rows/GridRow.js

@@ -41,7 +41,7 @@ var GridRowVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
-    var className = this.$props.rowType === 'groupFooter' || this.$props.rowType === 'groupHeader' ? this.$props.rowType === 'groupFooter' && 'k-group-footer' || 'k-grouping-row' : (this.$props.isAltRow ? 'k-master-row k-alt' : 'k-master-row') + (this.$props.selectedField !== undefined && getNestedValue(this.$props.selectedField, this.$props.dataItem) ? ' k-selected' : '');
+    var className = this.$props.rowType === 'groupFooter' || this.$props.rowType === 'groupHeader' ? this.$props.rowType === 'groupFooter' && 'k-group-footer' || 'k-table-group-row k-grouping-row' : (this.$props.isAltRow ? 'k-table-alt-row k-master-row k-alt' : 'k-master-row') + (this.$props.selectedField !== undefined && getNestedValue(this.$props.selectedField, this.$props.dataItem) ? ' k-selected' : '');
     var defaultRendering = h("tr", {
       onClick: this.handleClick,
       on: this.v3 ? undefined : {
@@ -49,7 +49,7 @@ var GridRowVue2 = {
         "dblclick": this.handleDoubleClick
       },
       onDblclick: this.handleDoubleClick,
-      "class": className,
+      "class": 'k-table-row ' + className,
       style: {
         height: this.$props.rowHeight ? this.$props.rowHeight + 'px' : '',
         visibility: this.$props.isHidden ? 'hidden' : ''

package/dist/esm/utils/main.js

@@ -287,7 +287,7 @@ export function autoGenerateColumns(data, group, expandField, idInfo) {
                     right: 0,
                     children: [],
                     rightBorder: false,
-                    ariaColumnIndex: 0,
+                    ariaColumnIndex: 1,
                     isAccessible: true
                 }, GridColumnDefaults, { field: field }));
             }