@progress/kendo-vue-data-tools 3.7.4-dev.202211301436 → 3.7.4-dev.202212300853

package/dist/es/columnmenu/ColumnMenu.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
-import { guid, setRef } from '@progress/kendo-vue-common';
+import { guid, Icon, setRef } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { ColumnMenuContent } from './ColumnMenuContent';
 import { tableKeyboardNavigationTools } from '../navigation/utils';
@@ -133,8 +133,11 @@ var ColumnMenuVue2 = {
       on: this.v3 ? undefined : {
         "click": this.anchorClick
       }
-    }, [h("span", {
-      "class": 'k-icon k-i-more-vertical'
+    }, [h(Icon, {
+      name: 'more-vertical',
+      attrs: this.v3 ? undefined : {
+        name: 'more-vertical'
+      }
     })]),
     // @ts-ignore function children
     h(Popup, {

package/dist/es/columnmenu/ColumnMenuCheckboxFilter.js

@@ -33,7 +33,7 @@ import { Checkbox } from '@progress/kendo-vue-inputs';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, columnMenuFilterClearButton as filterClearButton, columnMenuFilterSubmitButton as filterSubmitButton, columnMenuFilterTitle as filterTitle, searchPlaceholder, filterCheckAll } from '../messages/main';
 import { filterBy } from '@progress/kendo-data-query';
-import { clone, getListeners, getTemplate, templateRendering, getNestedValue } from '@progress/kendo-vue-common';
+import { clone, getListeners, getTemplate, templateRendering, getNestedValue, Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -144,8 +144,12 @@ var ColumnMenuCheckboxFilterVue2 = {
         "class": "k-list-filter"
       }, [h("span", {
         "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
-      }, [h("span", {
-        "class": "k-input-icon k-icon k-i-search"
+      }, [h(Icon, {
+        name: 'search',
+        attrs: this.v3 ? undefined : {
+          name: 'search'
+        },
+        "class": "k-input-icon"
       }), h("input", {
         ref: 'searchBox',
         placeholder: localizationService.toLanguageString(searchPlaceholder, messages[searchPlaceholder]),

package/dist/es/columnmenu/ColumnMenuItem.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { Keys } from '@progress/kendo-vue-common';
+import { Icon, Keys } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -49,8 +49,8 @@ var ColumnMenuItemVue2 = {
       },
       onClick: this.onClick,
       "class": "k-columnmenu-item ".concat(selected ? 'k-selected' : '')
-    }, [iconClass && h("span", {
-      "class": "k-icon ".concat(iconClass)
+    }, [iconClass && h(Icon, {
+      "class": iconClass
     }), title]);
   }
 };

package/dist/es/drag/DragClue.js

@@ -3,6 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+import { Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -38,8 +39,11 @@ var DragClueVue2 = {
       }
     }, [h("span", {
       "class": 'k-icon k-drag-status ' + this.status + ' k-icon-with-modifier'
-    }, [h("span", {
-      "class": "k-icon k-icon-modifier"
+    }, [h(Icon, {
+      name: "modifier",
+      attrs: this.v3 ? undefined : {
+        name: "modifier"
+      }
     })]), this.innerText]);
   }
 };

package/dist/es/filter/Filter.js

@@ -19,6 +19,8 @@ import { GroupFilter } from './GroupFilters';
 import { GroupToolbar } from './GroupToolbar';
 import { validatePackage, templateRendering, getListeners } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { filterAriaLabel, messages } from '../messages/main';
 /**
  * @hidden
  */
@@ -45,6 +47,11 @@ var FilterVue2 = {
     value: Object,
     defaultGroupFilter: Object
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   created: function created() {
     validatePackage(packageMetadata);
   },
@@ -67,6 +74,7 @@ var FilterVue2 = {
     }
   },
   render: function render(createElement) {
+    var locService = provideLocalizationService(this);
     var h = gh || createElement;
     var fields = this.$props.fields.map(function (field) {
       return __assign(__assign({}, field), {
@@ -76,13 +84,22 @@ var FilterVue2 = {
     return h("div", {
       "class": 'k-widget k-filter'
     }, [h("ul", {
-      "class": "k-filter-container"
+      "class": "k-filter-container",
+      role: "tree",
+      attrs: this.v3 ? undefined : {
+        role: "tree",
+        ariaLabel: locService.toLanguageString(filterAriaLabel, messages[filterAriaLabel])
+      },
+      ariaLabel: locService.toLanguageString(filterAriaLabel, messages[filterAriaLabel])
     }, [h("li", {
-      "class": "k-filter-group-main"
+      "class": "k-filter-group-main",
+      role: "treeitem",
+      attrs: this.v3 ? undefined : {
+        role: "treeitem"
+      }
     }, [
     // @ts-ignore function children
     h(GroupToolbar, {
-      "class": "k-filter-group-main",
       filter: this.computedValue,
       attrs: this.v3 ? undefined : {
         filter: this.computedValue,
@@ -106,7 +123,6 @@ var FilterVue2 = {
     }),
     // @ts-ignore function children
     h(GroupFilter, {
-      "class": "k-filter-group-main",
       filter: this.computedValue,
       attrs: this.v3 ? undefined : {
         filter: this.computedValue,

package/dist/es/filter/GroupFilters.js

@@ -61,11 +61,19 @@ var GroupFilterVue2 = {
       filter = _a.filter,
       filterRender = _a.filterRender;
     return filter.filters.length > 0 ? h("ul", {
-      "class": "k-filter-lines"
+      "class": "k-filter-lines",
+      role: "group",
+      attrs: this.v3 ? undefined : {
+        role: "group"
+      }
     }, [filter.filters.map(function (f, idx) {
       return h("li", {
         key: idx,
-        "class": "k-filter-item"
+        "class": "k-filter-item",
+        role: "treeitem",
+        attrs: this.v3 ? undefined : {
+          role: "treeitem"
+        }
       }, [isCompositeFilterDescriptor(f) ? [
       // @ts-ignore
       h(GroupToolbar, {

package/dist/es/header/HeaderRow.d.ts

@@ -21,6 +21,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
     reorderable?: boolean;
     onSortChange?: (descriptors: SortDescriptor[], e: any) => void;
     sort?: any;
+    selectedField?: string;
     filter?: CompositeFilterDescriptor;
     filterOperators: FilterOperators;
     filterable?: boolean | undefined;

package/dist/es/header/HeaderRow.js

@@ -8,7 +8,8 @@ import { ColumnResizer } from '../drag/ColumnResizer';
 import { ColumnDraggable } from '../drag/ColumnDraggable';
 import { HeaderCell } from './HeaderCell';
 import { ColumnMenu } from '../columnmenu/ColumnMenu';
-import { templateRendering, hasListener, getListeners, Keys, noop } from '@progress/kendo-vue-common';
+import { HeaderSelectionCell } from './HeaderSelectionCell';
+import { templateRendering, hasListener, getListeners, Keys, noop, Icon } from '@progress/kendo-vue-common';
 import { HeaderThElement } from './HeaderThElement';
 /**
  * @hidden
@@ -47,6 +48,7 @@ var HeaderRowVue2 = {
     sort: {
       type: Array
     },
+    selectedField: String,
     filter: Object,
     filterable: Boolean,
     filterOperators: Object,
@@ -195,18 +197,21 @@ 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;
           }
-          return iconSortIndex >= 0 && [h("span", {
+          return iconSortIndex >= 0 && [h(Icon, {
             key: 1,
-            "class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-sm'
-          }), _this.$props.sort.length > 1 && h("span", {
+            name: "sort-".concat(this.$props.sort[iconSortIndex].dir, "-small"),
+            attrs: this.v3 ? undefined : {
+              name: "sort-".concat(this.$props.sort[iconSortIndex].dir, "-small")
+            }
+          }), this.$props.sort.length > 1 && h("span", {
             key: 2,
             "class": "k-sort-order"
           }, [iconSortIndex + 1])];
         };
-        var sortIcon = sortIconRenderer(sortIndex);
+        var sortIcon = sortIconRenderer.call(this, sortIndex);
         var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked);
         var columnMenu = column.columnMenu || column.columnMenu === false ? column.columnMenu : this.$props.columnMenu;
         var columnMenuRender = !columnMenu || typeof columnMenu === 'boolean' ? !!columnMenu : this.getTemplate(columnMenu);
@@ -327,6 +332,36 @@ var HeaderRowVue2 = {
               render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
             }, _this2.v3 ? function () {
               return [sortIcon];
+            } : [sortIcon])]) || column.field === _this2.$props.selectedField && h("span", {
+              "class": 'k-cell-inner'
+            }, [
+            // @ts-ignore function children
+            h(HeaderSelectionCell, {
+              key: 1,
+              field: column.field,
+              attrs: _this2.v3 ? undefined : {
+                field: column.field,
+                sortable: sortable,
+                selectionValue: column.headerSelectionValue,
+                title: column.title,
+                render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+              },
+              sortable: sortable,
+              onHeadercellclick: function onHeadercellclick(e) {
+                return _this.cellClick(e, column);
+              },
+              on: _this2.v3 ? undefined : {
+                "headercellclick": function onHeadercellclick(e) {
+                  return _this.cellClick(e, column);
+                },
+                "selectionchange": _this2.selectionChangeHandler
+              },
+              onSelectionchange: _this2.selectionChangeHandler,
+              selectionValue: column.headerSelectionValue,
+              title: column.title,
+              render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+            }, _this2.v3 ? function () {
+              return [sortIcon];
             } : [sortIcon])]) || h("span", {
               "class": 'k-cell-inner'
             }, [
@@ -432,6 +467,34 @@ var HeaderRowVue2 = {
             render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
           }, _this2.v3 ? function () {
             return [sortIcon];
+          } : [sortIcon])]) || column.field === _this2.$props.selectedField && h("span", {
+            "class": 'k-cell-inner'
+          }, [h(HeaderSelectionCell, {
+            key: 1,
+            field: column.field,
+            attrs: _this2.v3 ? undefined : {
+              field: column.field,
+              sortable: sortable,
+              selectionValue: column.headerSelectionValue,
+              title: column.title,
+              render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+            },
+            sortable: sortable,
+            onHeadercellclick: function onHeadercellclick(e) {
+              return _this.cellClick(e, column);
+            },
+            on: _this2.v3 ? undefined : {
+              "headercellclick": function onHeadercellclick(e) {
+                return _this.cellClick(e, column);
+              },
+              "selectionchange": _this2.selectionChangeHandler
+            },
+            onSelectionchange: _this2.selectionChangeHandler,
+            selectionValue: column.headerSelectionValue,
+            title: column.title,
+            render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
+          }, _this2.v3 ? function () {
+            return [sortIcon];
           } : [sortIcon])]) || h("span", {
             "class": 'k-cell-inner'
           }, [h(HeaderCell, {

package/dist/es/header/HeaderSelectionCell.d.ts

@@ -9,6 +9,7 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } fr
  */
 export interface HeaderSelectionCellMethods extends Vue2type {
     changeHandle: (e: any) => void;
+    clickHandler: (e: any) => void;
 }
 /**
  * @hidden

package/dist/es/header/HeaderSelectionCell.js

@@ -3,7 +3,9 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { guid, getTemplate } from '@progress/kendo-vue-common';
+import { guid, getTemplate, getDefaultSlots } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, selectAllRows } from '../messages/main';
 /**
  * @hidden
  */
@@ -11,9 +13,20 @@ var HeaderSelectionCellVue2 = {
   props: {
     field: String,
     title: String,
+    sortable: [Boolean, Object],
     selectionValue: Boolean,
     render: [Object, Function, String]
   },
+  // @ts-ignore
+  emits: {
+    selectionchange: null,
+    headercellclick: null
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   created: function created() {
     this.inputId = guid();
   },
@@ -23,6 +36,11 @@ var HeaderSelectionCellVue2 = {
         field: this.$props.field,
         event: e
       });
+    },
+    clickHandler: function clickHandler(event) {
+      if (this.$props.sortable) {
+        this.$emit('headercellclick', event);
+      }
     }
   },
   // @ts-ignore
@@ -35,8 +53,11 @@ var HeaderSelectionCellVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
     var renderTemplate = this.$props.render;
-    var defaultRendering = h("span", [[h("input", {
+    var ls = provideLocalizationService(this);
+    var selectAllRowsMessage = ls.toLanguageString(selectAllRows, messages[selectAllRows]);
+    var input = h("input", {
       key: 0,
       checked: this.v3 ? this.$props.selectionValue : null,
       domProps: this.v3 ? undefined : {
@@ -45,31 +66,40 @@ var HeaderSelectionCellVue2 = {
       id: this.inputId,
       attrs: this.v3 ? undefined : {
         id: this.inputId,
-        type: "checkbox"
+        type: "checkbox",
+        "aria-label": selectAllRowsMessage
       },
       type: "checkbox",
       "class": "k-checkbox k-checkbox-md k-rounded-md",
+      "aria-label": selectAllRowsMessage,
       onChange: this.changeHandle,
       on: this.v3 ? undefined : {
         "change": this.changeHandle
       }
-    }), h("label", {
-      key: 1,
-      "class": "k-checkbox-label",
-      "for": this.inputId,
-      attrs: this.v3 ? undefined : {
-        "for": this.inputId
-      }
-    })]]);
-    return getTemplate.call(this, {
+    });
+    var defaultRendering = getTemplate.call(this, {
       h: h,
       template: renderTemplate,
-      defaultRendering: defaultRendering,
+      defaultRendering: input,
       additionalProps: this.$props,
       additionalListeners: {
+        click: this.clickHandler,
         selectionchange: this.changeHandle
       }
     });
+    return h("span", {
+      "class": "k-link",
+      onClick: this.clickHandler,
+      on: this.v3 ? undefined : {
+        "click": this.clickHandler
+      }
+    }, [h("span", {
+      "class": "k-column-title",
+      title: this.$props.title,
+      attrs: this.v3 ? undefined : {
+        title: this.$props.title
+      }
+    }, [defaultRendering]), defaultSlot]);
   }
 };
 /**

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

@@ -254,6 +254,10 @@ export declare const columnMenuFilterOrLogic = "columnMenu.filterOrLogic";
  * @hidden
  */
 export declare const searchPlaceholder = "grid.searchPlaceholder";
+/**
+ * @hidden
+ */
+export declare const selectAllRows = "grid.selectAllRows";
 /**
  * @hidden
  */
@@ -317,6 +321,7 @@ export declare const messages: {
     "pager.of": string;
     "pager.totalPages": string;
     "grid.searchPlaceholder": string;
+    "grid.selectAllRows": string;
     "grid.filterCheckAll": string;
     "sort.ariaLabel": string;
     "filter.ariaLabel": string;

package/dist/es/messages/main.js

@@ -255,6 +255,10 @@ export var columnMenuFilterOrLogic = 'columnMenu.filterOrLogic';
  * @hidden
  */
 export var searchPlaceholder = 'grid.searchPlaceholder';
+/**
+ * @hidden
+ */
+export var selectAllRows = 'grid.selectAllRows';
 /**
  * @hidden
  */
@@ -318,6 +322,7 @@ export var messages = (_a = {},
     _a[pagerOf] = 'Of',
     _a[pagerTotalPages] = '{0}',
     _a[searchPlaceholder] = 'Search',
+    _a[selectAllRows] = 'Select All Rows',
     _a[filterCheckAll] = 'Check All',
     _a[sortAriaLabel] = 'Sortable',
     _a[filterAriaLabel] = 'Filter',

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-data-tools',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1669818534,
+    publishDate: 1672389924,
     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/es/pager/Pager.js

@@ -102,7 +102,6 @@ var PagerVue2 = {
     wrapperClass: {
       get: function get() {
         return {
-          'k-widget': true,
           'k-pager': true,
           'k-pager-sm': this.size === 'small',
           'k-pager-md': this.size === 'medium'

package/dist/es/pager/PagerNavigationButton.js

@@ -3,6 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+import { Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -13,11 +14,6 @@ var PagerNavigationButtonVue2 = {
     icon: String,
     page: Number
   },
-  computed: {
-    iconClass: function iconClass() {
-      return 'k-icon k-i-' + this.icon;
-    }
-  },
   inject: {
     kendoLocalizationService: {
       default: null
@@ -58,8 +54,11 @@ var PagerNavigationButtonVue2 = {
       role: "button",
       title: this.$props.title,
       "aria-label": this.$props.title
-    }, [h("span", {
-      "class": this.iconClass
+    }, [h(Icon, {
+      name: this.icon,
+      attrs: this.v3 ? undefined : {
+        name: this.icon
+      }
     })]);
   }
 };

package/dist/es/selection/utils.js

@@ -18,7 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { extendDataItem, getter, Keys, mapTree, hasRelativeStackingContext } from '@progress/kendo-vue-common';
+import { extendDataItem, Keys, mapTree, hasRelativeStackingContext } from '@progress/kendo-vue-common';
 import { TABLE_COL_INDEX_ATTRIBUTE, TABLE_ROW_INDEX_ATTRIBUTE } from './constants';
 var GROUP_SUBITEMS_COLLECTION = 'items';
 var LAST_SELECTION_STATE = {};
@@ -76,11 +76,10 @@ export var getColumnIndex = function (element) {
  */
 export var setSelectedState = function (options) {
     var subItemsField = options.subItemsField || GROUP_SUBITEMS_COLLECTION;
-    var idGetter = getter(options.dataItemKey);
     return mapTree(options.data, subItemsField, function (item) {
         var _a;
         return extendDataItem(item, subItemsField, (_a = {},
-            _a[options.selectedField] = options.selectedState[idGetter(item)],
+            _a[options.selectedField] = options.selectedState[item[options.dataItemKey]],
             _a));
     });
 };
@@ -135,12 +134,11 @@ export var getSelectedStateFromKeyDown = function (options) {
 export var getSelectedState = function (options) {
     var event = options.event, dataItemKey = options.dataItemKey, prevSelectedState = options.selectedState;
     var dataItems = event.dataItems, startRowIndex = event.startRowIndex, endRowIndex = event.endRowIndex, startColIndex = event.startColIndex, endColIndex = event.endColIndex, cell = event.cell, isDrag = event.isDrag, ctrlKey = event.ctrlKey, shiftKey = event.shiftKey, metaKey = event.metaKey, componentId = event.componentId, mode = event.mode, dataItem = event.dataItem;
-    var idGetter = getter(dataItemKey);
     var selectionState = {};
     var isInputEvent = dataItem !== null;
     if (mode === 'single') {
         var currentDataItem = dataItems.slice(startRowIndex, startRowIndex + 1)[0];
-        var itemId = idGetter(currentDataItem);
+        var itemId = currentDataItem[dataItemKey];
         LAST_SELECTION_STATE[componentId] = {
             rowIndex: startRowIndex,
             colIndex: startColIndex
@@ -160,7 +158,7 @@ export var getSelectedState = function (options) {
         }
         var selectedDataItems = dataItems.slice(startRowIndex, endRowIndex + 1);
         selectedDataItems.forEach(function (currentItem) {
-            var itemId = idGetter(currentItem);
+            var itemId = currentItem[dataItemKey];
             selectionState[itemId] = cell ? __spreadArray([], selectedColumns_1, true) : true;
         });
     }
@@ -172,7 +170,7 @@ export var getSelectedState = function (options) {
             };
             var selectedDataItems = dataItems.slice(startRowIndex, endRowIndex + 1);
             var currentDataItem = selectedDataItems[0];
-            var itemId = idGetter(currentDataItem);
+            var itemId = currentDataItem[dataItemKey];
             selectionState = __assign({}, prevSelectedState);
             selectionState[itemId] = cell && !isInputEvent
                 ? getCellSelection(selectionState[itemId], startColIndex)
@@ -191,7 +189,7 @@ export var getSelectedState = function (options) {
             }
             var selectedDataItems = dataItems.slice(currentStartRowIndex, currentEndRowIndex + 1);
             selectedDataItems.forEach(function (currentItem) {
-                var itemId = idGetter(currentItem);
+                var itemId = currentItem[dataItemKey];
                 selectionState[itemId] = cell ? __spreadArray([], selectedColumns_2, true) : true;
             });
         }

package/dist/esm/columnmenu/ColumnMenu.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
-import { guid, setRef } from '@progress/kendo-vue-common';
+import { guid, Icon, setRef } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { ColumnMenuContent } from './ColumnMenuContent.js';
 import { tableKeyboardNavigationTools } from '../navigation/utils.js';
@@ -133,8 +133,11 @@ var ColumnMenuVue2 = {
       on: this.v3 ? undefined : {
         "click": this.anchorClick
       }
-    }, [h("span", {
-      "class": 'k-icon k-i-more-vertical'
+    }, [h(Icon, {
+      name: 'more-vertical',
+      attrs: this.v3 ? undefined : {
+        name: 'more-vertical'
+      }
     })]),
     // @ts-ignore function children
     h(Popup, {

package/dist/esm/columnmenu/ColumnMenuCheckboxFilter.js

@@ -33,7 +33,7 @@ import { Checkbox } from '@progress/kendo-vue-inputs';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, columnMenuFilterClearButton as filterClearButton, columnMenuFilterSubmitButton as filterSubmitButton, columnMenuFilterTitle as filterTitle, searchPlaceholder, filterCheckAll } from '../messages/main.js';
 import { filterBy } from '@progress/kendo-data-query';
-import { clone, getListeners, getTemplate, templateRendering, getNestedValue } from '@progress/kendo-vue-common';
+import { clone, getListeners, getTemplate, templateRendering, getNestedValue, Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -144,8 +144,12 @@ var ColumnMenuCheckboxFilterVue2 = {
         "class": "k-list-filter"
       }, [h("span", {
         "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
-      }, [h("span", {
-        "class": "k-input-icon k-icon k-i-search"
+      }, [h(Icon, {
+        name: 'search',
+        attrs: this.v3 ? undefined : {
+          name: 'search'
+        },
+        "class": "k-input-icon"
       }), h("input", {
         ref: 'searchBox',
         placeholder: localizationService.toLanguageString(searchPlaceholder, messages[searchPlaceholder]),

package/dist/esm/columnmenu/ColumnMenuItem.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { Keys } from '@progress/kendo-vue-common';
+import { Icon, Keys } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -49,8 +49,8 @@ var ColumnMenuItemVue2 = {
       },
       onClick: this.onClick,
       "class": "k-columnmenu-item ".concat(selected ? 'k-selected' : '')
-    }, [iconClass && h("span", {
-      "class": "k-icon ".concat(iconClass)
+    }, [iconClass && h(Icon, {
+      "class": iconClass
     }), title]);
   }
 };

package/dist/esm/drag/DragClue.js

@@ -3,6 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+import { Icon } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -38,8 +39,11 @@ var DragClueVue2 = {
       }
     }, [h("span", {
       "class": 'k-icon k-drag-status ' + this.status + ' k-icon-with-modifier'
-    }, [h("span", {
-      "class": "k-icon k-icon-modifier"
+    }, [h(Icon, {
+      name: "modifier",
+      attrs: this.v3 ? undefined : {
+        name: "modifier"
+      }
     })]), this.innerText]);
   }
 };