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

package/dist/npm/header/HeaderRow.js

@@ -16,6 +16,9 @@ var GridHeaderCell_1 = require("./GridHeaderCell");
 var ColumnMenu_1 = require("../columnMenu/ColumnMenu");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_data_tools_1 = require("@progress/kendo-vue-data-tools"); // from '../../../datatools/src/main';
+var main_1 = require("../messages/main");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -68,11 +71,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: kendo_vue_common_1.noop
+    },
+    kendoLocalizationService: {
+      default: null
     }
   },
   data: function data() {
@@ -133,7 +143,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) {
@@ -173,6 +183,7 @@ var HeaderRowVue2 = {
     theadClasses: {
       get: function get() {
         return {
+          'k-table-thead': true,
           'k-grid-header': true
         };
       }
@@ -188,6 +199,10 @@ var HeaderRowVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
+    var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    var ariaLabelSortableColumn = localizationService.toLanguageString(main_1.sortableColumnAriaLabel, main_1.messages[main_1.sortableColumnAriaLabel]);
+    var ariaLabelAscendingSort = localizationService.toLanguageString(main_1.sortableColumnAscendingAriaLabel, main_1.messages[main_1.sortableColumnAscendingAriaLabel]);
+    var ariaLabelDescendingSort = localizationService.toLanguageString(main_1.sortableColumnDescendingAriaLabel, main_1.messages[main_1.sortableColumnDescendingAriaLabel]);
     this.serviceIndex = 0;
     this.index = -1;
     var cells = function cells(rowIndexes) {
@@ -201,24 +216,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(kendo_vue_common_1.Icon, {
+            name: 'sort-' + currentDir + '-small',
+            attrs: this.v3 ? undefined : {
+              name: 'sort-' + currentDir + '-small',
+              icon: currentDir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon
+            },
+            icon: currentDir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.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',
@@ -227,32 +248,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(kendo_vue_data_tools_1.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,
@@ -483,9 +513,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,
@@ -507,10 +537,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/npm/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/npm/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/npm/messages/main.js

@@ -1,7 +1,7 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pagerMessagesMap = exports.messages = exports.filterAriaLabel = exports.sortAriaLabel = exports.filterSelectedItems = exports.filterChooseOperator = exports.filterCheckAll = exports.searchPlaceholder = exports.sortDescending = exports.sortAscending = exports.filterTitle = exports.filterSubmitButton = exports.filterClearButton = exports.columnMenu = exports.groupPanelEmpty = exports.pagerTotalPages = exports.pagerOf = exports.pagerPage = exports.pagerPageSelection = exports.pagerItemPerPage = exports.pagerLastPage = exports.pagerNextPage = exports.pagerPreviousPage = exports.pagerFirstPage = exports.pagerInfo = exports.selectAllRows = exports.noRecords = void 0;
+exports.pagerMessagesMap = exports.messages = exports.collapseDetailAriaLabel = exports.expandDetailAriaLabel = exports.groupCaretAriaLabelExpand = exports.groupCaretAriaLabelCollapse = exports.groupHeaderAriaLabel = exports.booleanFilterAriaLabel = exports.textFilterAriaLabel = exports.dateFilterAriaLabel = exports.numericFilterAriaLabel = exports.filterAriaLabel = exports.sortableColumnDescendingAriaLabel = exports.sortableColumnAscendingAriaLabel = exports.sortableColumnAriaLabel = exports.sortAriaLabel = exports.filterSelectedItems = exports.filterChooseOperator = exports.filterCheckAll = exports.searchPlaceholder = exports.sortDescending = exports.sortAscending = exports.filterTitle = exports.filterSubmitButton = exports.filterClearButton = exports.columnMenu = exports.groupPanelEmpty = exports.pagerTotalPages = exports.pagerOf = exports.pagerPage = exports.pagerPageSelection = exports.pagerItemPerPage = exports.pagerLastPage = exports.pagerNextPage = exports.pagerPreviousPage = exports.pagerFirstPage = exports.pagerInfo = exports.selectAllRows = exports.noRecords = void 0;
 /**
  * @hidden
  */
@@ -98,10 +98,58 @@ exports.filterSelectedItems = 'grid.filterSelectedItems';
  * @hidden
  */
 exports.sortAriaLabel = 'grid.sortAriaLabel';
+/**
+ * @hidden
+ */
+exports.sortableColumnAriaLabel = 'grid.sortableColumnAriaLabel';
+/**
+ * @hidden
+ */
+exports.sortableColumnAscendingAriaLabel = 'grid.sortableColumnAscendingAriaLabel';
+/**
+ * @hidden
+ */
+exports.sortableColumnDescendingAriaLabel = 'grid.sortableColumnDescendingAriaLabel';
 /**
  * @hidden
  */
 exports.filterAriaLabel = 'grid.filterAriaLabel';
+/**
+ * @hidden
+ */
+exports.numericFilterAriaLabel = 'grid.numericFilterAriaLabel';
+/**
+ * @hidden
+ */
+exports.dateFilterAriaLabel = 'grid.dateFilterAriaLabel';
+/**
+ * @hidden
+ */
+exports.textFilterAriaLabel = 'grid.textFilterAriaLabel';
+/**
+ * @hidden
+ */
+exports.booleanFilterAriaLabel = 'grid.booleanFilterAriaLabel';
+/**
+ * @hidden
+ */
+exports.groupHeaderAriaLabel = 'grid.groupHeaderAriaLabel';
+/**
+ * @hidden
+ */
+exports.groupCaretAriaLabelCollapse = 'grid.groupCaretAriaLabelCollapse';
+/**
+ * @hidden
+ */
+exports.groupCaretAriaLabelExpand = 'grid.groupCaretAriaLabelExpand';
+/**
+ * @hidden
+ */
+exports.expandDetailAriaLabel = 'grid.expandDetailTemplateAriaLabel';
+/**
+ * @hidden
+ */
+exports.collapseDetailAriaLabel = 'grid.collapseDetailTemplateAriaLabel';
 /**
  * @hidden
  */
@@ -130,7 +178,19 @@ exports.messages = (_a = {},
     _a[exports.filterChooseOperator] = 'Choose Operator',
     _a[exports.filterSelectedItems] = 'selected items',
     _a[exports.sortAriaLabel] = 'Sortable',
+    _a[exports.sortableColumnAriaLabel] = 'Sortable Column',
+    _a[exports.sortableColumnAscendingAriaLabel] = 'Sorted in ascending order',
+    _a[exports.sortableColumnDescendingAriaLabel] = 'Sorted in descending order',
     _a[exports.filterAriaLabel] = 'Filter',
+    _a[exports.numericFilterAriaLabel] = 'Numeric Filter',
+    _a[exports.dateFilterAriaLabel] = 'Date Filter',
+    _a[exports.textFilterAriaLabel] = 'Text Filter',
+    _a[exports.booleanFilterAriaLabel] = 'Boolean Filter',
+    _a[exports.groupHeaderAriaLabel] = 'Group Header',
+    _a[exports.groupCaretAriaLabelCollapse] = 'Collapse Group',
+    _a[exports.groupCaretAriaLabelExpand] = 'Expand Group',
+    _a[exports.expandDetailAriaLabel] = 'Expand Details',
+    _a[exports.collapseDetailAriaLabel] = 'Collapse Details',
     _a['grid.filterEqOperator'] = 'Is equal to',
     _a['grid.filterNotEqOperator'] = 'Is not equal to',
     _a['grid.filterIsNullOperator'] = 'Is null',

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.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/npm/rows/GridRow.js

@@ -47,7 +47,7 @@ var GridRowVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = (0, kendo_vue_common_1.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 && (0, main_1.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 && (0, main_1.getNestedValue)(this.$props.selectedField, this.$props.dataItem) ? ' k-selected' : '');
     var defaultRendering = h("tr", {
       onClick: this.handleClick,
       on: this.v3 ? undefined : {
@@ -55,7 +55,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/npm/utils/main.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-grid",
-  "version": "3.7.4-dev.202212020747",
+  "version": "3.7.4-dev.202301091431",
   "description": "Kendo UI for Vue Grid package",
   "repository": {
     "type": "git",
@@ -29,7 +29,8 @@
   ],
   "peerDependencies": {
     "@progress/kendo-data-query": "^1.5.4",
-    "@progress/kendo-licensing": "^1.1.0",
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-svg-icons": "^1.0.0",
     "@progress/kendo-vue-animation": "^3.6.0",
     "@progress/kendo-vue-data-tools": "^3.6.0",
     "@progress/kendo-vue-dateinputs": "^3.6.0",
@@ -41,24 +42,25 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-common": "3.7.4-dev.202212020747"
+    "@progress/kendo-vue-common": "3.7.4-dev.202301091431"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.4",
     "@progress/kendo-drawing": "^1.9.3",
-    "@progress/kendo-licensing": "^1.1.0",
-    "@progress/kendo-vue-animation": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-buttons": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-charts": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-data-tools": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-dateinputs": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-dropdowns": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-excel-export": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-indicators": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-inputs": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-intl": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-pdf": "3.7.4-dev.202212020747",
-    "@progress/kendo-vue-popup": "3.7.4-dev.202212020747",
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-svg-icons": "^1.0.0",
+    "@progress/kendo-vue-animation": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-buttons": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-charts": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-data-tools": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-dateinputs": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-dropdowns": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-excel-export": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-indicators": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-inputs": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-intl": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-pdf": "3.7.4-dev.202301091431",
+    "@progress/kendo-vue-popup": "3.7.4-dev.202301091431",
     "cldr-core": "^41.0.0",
     "cldr-dates-full": "^41.0.0",
     "cldr-numbers-full": "^41.0.0",