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

package/dist/es/header/HeaderRow.js

@@ -10,6 +10,7 @@ import { HeaderCell } from './HeaderCell';
 import { ColumnMenu } from '../columnmenu/ColumnMenu';
 import { HeaderSelectionCell } from './HeaderSelectionCell';
 import { templateRendering, hasListener, getListeners, Keys, noop, Icon } from '@progress/kendo-vue-common';
+import { sortDescSmallIcon, sortAscSmallIcon } from '@progress/kendo-svg-icons';
 import { HeaderThElement } from './HeaderThElement';
 /**
  * @hidden
@@ -64,6 +65,7 @@ var HeaderRowVue2 = {
         return true;
       }
     },
+    size: String,
     isRtl: Boolean
   },
   inject: {
@@ -129,7 +131,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) {
@@ -169,6 +171,7 @@ var HeaderRowVue2 = {
     theadClasses: {
       get: function get() {
         return {
+          'k-table-thead': true,
           'k-grid-header': true
         };
       }
@@ -200,20 +203,23 @@ var HeaderRowVue2 = {
           if (!this.$props.sort) {
             return null;
           }
+          var currentDir = this.$props.sort[iconSortIndex].dir;
           return iconSortIndex >= 0 && [h(Icon, {
             key: 1,
-            name: "sort-".concat(this.$props.sort[iconSortIndex].dir, "-small"),
+            name: "sort-".concat(currentDir, "-small"),
             attrs: this.v3 ? undefined : {
-              name: "sort-".concat(this.$props.sort[iconSortIndex].dir, "-small")
-            }
+              name: "sort-".concat(currentDir, "-small"),
+              icon: currentDir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon
+            },
+            icon: currentDir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon
           }), this.$props.sort.length > 1 && h("span", {
             key: 2,
             "class": "k-sort-order"
           }, [iconSortIndex + 1])];
         };
         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 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',
@@ -560,6 +566,7 @@ 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'

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

@@ -0,0 +1,46 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+export interface HeaderTdElementProps {
+    ariaColumnIndex?: number;
+    colSpan?: number;
+    rowSpan?: number;
+    role?: string;
+    columnId: string;
+    navigatable?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface HeaderTdElementMethods extends Vue2type {
+    onKeydown: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface HeaderTdElementComputed {
+    [key: string]: any;
+    tdClass: object;
+}
+/**
+ * @hidden
+ */
+export interface HeaderTdElementState {
+    _text: string | undefined;
+}
+/**
+ * @hidden
+ */
+export interface HeaderTdElementAll extends HeaderTdElementMethods, HeaderTdElementState, HeaderTdElementComputed {
+}
+/**
+ * @hidden
+ */
+declare let HeaderTdElementVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<HeaderTdElementAll>, {}, RecordPropsDefinition<HeaderTdElementProps>>;
+/**
+ * @hidden
+ */
+declare const HeaderTdElement: DefineComponent<HeaderTdElementProps, any, {}, {}, HeaderTdElementMethods, {}, {}, {}, string, HeaderTdElementProps, HeaderTdElementProps, {}>;
+export { HeaderTdElement, HeaderTdElementVue2 };

package/dist/es/header/HeaderTdElement.js

@@ -0,0 +1,92 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { getDefaultSlots, noop } from '@progress/kendo-vue-common';
+import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '../navigation/constants';
+/**
+ * @hidden
+ */
+var HeaderTdElementVue2 = {
+  name: 'KendoHeaderTdElement',
+  // @ts-ignore
+  emits: {
+    keydown: null
+  },
+  props: {
+    ariaColumnIndex: Number,
+    role: String,
+    columnId: String,
+    navigatable: Boolean
+  },
+  computed: {
+    tdClass: function tdClass() {
+      var _a;
+      var className = this.$props.className;
+      return _a = {
+        'k-table-td': true
+      }, _a[className] = className, _a;
+    }
+  },
+  inject: {
+    getKeyboardNavigationAttributes: {
+      default: noop
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+      columnId = _a.columnId,
+      navigatable = _a.navigatable,
+      ariaColumnIndex = _a.ariaColumnIndex,
+      role = _a.role;
+    var navAttrs = this.getKeyboardNavigationAttributes(columnId, navigatable);
+    var defaultSlot = getDefaultSlots(this);
+    return h("td", {
+      style: {
+        top: '0px'
+      },
+      "aria-colindex": ariaColumnIndex,
+      attrs: this.v3 ? undefined : {
+        "aria-colindex": ariaColumnIndex,
+        role: role,
+        tabindex: navAttrs.tabIndex,
+        "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+        "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+      },
+      "class": this.tdClass,
+      onKeydown: this.onKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.onKeyDown
+      },
+      role: role,
+      tabindex: navAttrs.tabIndex,
+      "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+      "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+    }, [defaultSlot]);
+  },
+  methods: {
+    onKeyDown: function onKeyDown(e) {
+      this.$emit('keydown', e);
+    }
+  }
+};
+/**
+ * @hidden
+ */
+var HeaderTdElement = HeaderTdElementVue2;
+export { HeaderTdElement, HeaderTdElementVue2 };

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

@@ -20,6 +20,13 @@ export interface HeaderThElementProps {
 export interface HeaderThElementMethods extends Vue2type {
     onKeydown: (event: any) => void;
 }
+/**
+ * @hidden
+ */
+export interface HeaderThElementComputed {
+    [key: string]: any;
+    thClass: object;
+}
 /**
  * @hidden
  */
@@ -29,7 +36,7 @@ export interface HeaderThElementState {
 /**
  * @hidden
  */
-export interface HeaderThElementAll extends HeaderThElementMethods, HeaderThElementState {
+export interface HeaderThElementAll extends HeaderThElementMethods, HeaderThElementState, HeaderThElementComputed {
 }
 /**
  * @hidden

package/dist/es/header/HeaderThElement.js

@@ -31,6 +31,15 @@ var HeaderThElementVue2 = {
     columnId: String,
     navigatable: Boolean
   },
+  computed: {
+    thClass: function thClass() {
+      var _a;
+      var className = this.$props.className;
+      return _a = {
+        'k-table-th': true
+      }, _a[className] = className, _a;
+    }
+  },
   inject: {
     getKeyboardNavigationAttributes: {
       default: noop
@@ -54,7 +63,6 @@ var HeaderThElementVue2 = {
       ariaSort = _a.ariaSort,
       colSpan = _a.colSpan,
       rowSpan = _a.rowSpan,
-      className = _a.className,
       columnId = _a.columnId,
       navigatable = _a.navigatable,
       ariaColumnIndex = _a.ariaColumnIndex,
@@ -85,7 +93,7 @@ var HeaderThElementVue2 = {
       "aria-selected": ariaSelected,
       colspan: colSpan,
       rowspan: rowSpan,
-      "class": className,
+      "class": this.thClass,
       onKeydown: this.onKeyDown,
       on: this.v3 ? undefined : {
         "keydown": this.onKeyDown

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

@@ -8,3 +8,4 @@ export * from './HeaderSelectionCell';
 export * from '../interfaces/SortSettings';
 export * from './utils/main';
 export * from './HeaderThElement';
+export * from './HeaderTdElement';

package/dist/es/header/main.js

@@ -8,3 +8,4 @@ export * from './HeaderSelectionCell';
 export * from '../interfaces/SortSettings';
 export * from './utils/main';
 export * from './HeaderThElement';
+export * from './HeaderTdElement';

package/dist/es/interfaces/FilterCellProps.d.ts

@@ -69,4 +69,16 @@ export interface FilterCellProps {
      * 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/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: 1672389924,
+    publishDate: 1673273869,
     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.d.ts

@@ -34,6 +34,18 @@ export interface PagerProps extends GridPagerSettings {
     responsive?: boolean;
     pagerRender?: any;
     width?: number | string;
+    /**
+     * Configures the `size` of the Pager.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
     /**
      * A map with the messages.
      */
@@ -80,7 +92,7 @@ export interface PagerComputed {
  * @hidden
  */
 export interface PagerData {
-    size: string;
+    currentSize: string;
 }
 /**
  * @hidden

package/dist/es/pager/Pager.js

@@ -23,7 +23,8 @@ import { PagerInfo } from './PagerInfo';
 import { PagerNavigationButton } from './PagerNavigationButton';
 import { messages, pagerFirstPage, pagerLastPage, pagerNextPage, pagerPreviousPage } from '../messages/main';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { getListeners, getTemplate, hasListener, templateRendering } from '@progress/kendo-vue-common';
+import { getListeners, getTemplate, hasListener, kendoThemeMaps, templateRendering } from '@progress/kendo-vue-common';
+import { caretAltLeftIcon, caretAltRightIcon, caretAltToLeftIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -68,12 +69,19 @@ var PagerVue2 = {
       type: Boolean,
       default: true
     },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
     pagerRender: [String, Function, Object],
     width: [Number, String]
   },
   data: function data() {
     return {
-      size: 'normal'
+      currentSize: 'medium'
     };
   },
   mounted: function mounted() {
@@ -101,11 +109,11 @@ var PagerVue2 = {
   computed: {
     wrapperClass: {
       get: function get() {
-        return {
-          'k-pager': true,
-          'k-pager-sm': this.size === 'small',
-          'k-pager-md': this.size === 'medium'
-        };
+        var _a;
+        var size = this.$props.size;
+        return _a = {
+          'k-pager': true
+        }, _a["k-pager-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-pager-mobile-".concat(kendoThemeMaps.sizeMap[this.currentSize])] = this.currentSize, _a;
       }
     },
     totalPages: {
@@ -148,11 +156,11 @@ var PagerVue2 = {
       }
       var width = element.offsetWidth;
       if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-        this.size = 'small';
+        this.currentSize = 'small';
       } else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-        this.size = 'medium';
+        this.currentSize = 'medium';
       } else {
-        this.size = 'large';
+        this.currentSize = 'large';
       }
     },
     transformDimesion: function transformDimesion(initialValue) {
@@ -218,13 +226,15 @@ var PagerVue2 = {
     var changer = settings.type === 'numeric' ?
     // @ts-ignore
     h(PagerNumericButtons, {
-      size: this.size,
+      responsiveSize: this.currentSize,
       attrs: this.v3 ? undefined : {
+        responsiveSize: this.currentSize,
         size: this.size,
         buttonCount: settings.buttonCount || 0,
         totalPages: this.totalPages,
         currentPage: this.currentPage
       },
+      size: this.size,
       buttonCount: settings.buttonCount || 0,
       totalPages: this.totalPages,
       currentPage: this.currentPage,
@@ -239,29 +249,37 @@ var PagerVue2 = {
       attrs: this.v3 ? undefined : {
         currentPage: this.currentPage,
         totalPages: this.totalPages,
-        messagesMap: messagesMap
+        messagesMap: messagesMap,
+        size: this.size
       },
       totalPages: this.totalPages,
       onPagechange: this.changePage,
       on: this.v3 ? undefined : {
         "pagechange": this.changePage
       },
-      messagesMap: messagesMap
+      messagesMap: messagesMap,
+      size: this.size
     });
     var first, prev, next, last;
     if (settings.previousNext) {
       first =
       // @ts-ignore function children
       h(PagerNavigationButton, {
-        "class": 'k-pager-first' + (this.currentPage === 1 ? ' k-disabled' : ''),
-        page: 1,
+        "class": 'k-pager-first',
+        size: this.size,
         attrs: this.v3 ? undefined : {
+          size: this.size,
+          disabled: this.currentPage === 1,
           page: 1,
           title: localizationService.toLanguageString(firstPageMessage.messageKey, firstPageMessage.defaultMessage),
-          icon: 'caret-alt-to-left'
+          icon: 'caret-alt-to-left',
+          svgIcon: caretAltToLeftIcon
         },
+        disabled: this.currentPage === 1,
+        page: 1,
         title: localizationService.toLanguageString(firstPageMessage.messageKey, firstPageMessage.defaultMessage),
         icon: 'caret-alt-to-left',
+        svgIcon: caretAltToLeftIcon,
         onPagechange: this.changePage,
         on: this.v3 ? undefined : {
           "pagechange": this.changePage
@@ -270,15 +288,20 @@ var PagerVue2 = {
       prev =
       // @ts-ignore function children
       h(PagerNavigationButton, {
-        "class": this.currentPage === 1 ? ' k-disabled' : '',
-        page: this.currentPage - 1,
+        disabled: this.currentPage === 1,
         attrs: this.v3 ? undefined : {
+          disabled: this.currentPage === 1,
+          size: this.size,
           page: this.currentPage - 1,
           title: localizationService.toLanguageString(previousPageMessage.messageKey, previousPageMessage.defaultMessage),
-          icon: 'caret-alt-left'
+          icon: 'caret-alt-left',
+          svgIcon: caretAltLeftIcon
         },
+        size: this.size,
+        page: this.currentPage - 1,
         title: localizationService.toLanguageString(previousPageMessage.messageKey, previousPageMessage.defaultMessage),
         icon: 'caret-alt-left',
+        svgIcon: caretAltLeftIcon,
         onPagechange: this.changePage,
         on: this.v3 ? undefined : {
           "pagechange": this.changePage
@@ -287,15 +310,20 @@ var PagerVue2 = {
       next =
       // @ts-ignore function children
       h(PagerNavigationButton, {
-        "class": this.currentPage === this.totalPages ? ' k-disabled' : '',
-        page: this.currentPage + 1,
+        disabled: this.currentPage === this.totalPages,
         attrs: this.v3 ? undefined : {
+          disabled: this.currentPage === this.totalPages,
+          size: this.size,
           page: this.currentPage + 1,
           title: localizationService.toLanguageString(nextPageMessage.messageKey, nextPageMessage.defaultMessage),
-          icon: 'caret-alt-right'
+          icon: 'caret-alt-right',
+          svgIcon: caretAltRightIcon
         },
+        size: this.size,
+        page: this.currentPage + 1,
         title: localizationService.toLanguageString(nextPageMessage.messageKey, nextPageMessage.defaultMessage),
         icon: 'caret-alt-right',
+        svgIcon: caretAltRightIcon,
         onPagechange: this.changePage,
         on: this.v3 ? undefined : {
           "pagechange": this.changePage
@@ -304,15 +332,21 @@ var PagerVue2 = {
       last =
       // @ts-ignore function children
       h(PagerNavigationButton, {
-        "class": 'k-pager-last' + (this.currentPage === this.totalPages ? ' k-disabled' : ''),
-        page: this.totalPages,
+        "class": 'k-pager-last',
+        disabled: this.currentPage === this.totalPages,
         attrs: this.v3 ? undefined : {
+          disabled: this.currentPage === this.totalPages,
+          size: this.size,
           page: this.totalPages,
           title: localizationService.toLanguageString(lastPageMessage.messageKey, lastPageMessage.defaultMessage),
-          icon: 'caret-alt-to-right'
+          icon: 'caret-alt-to-right',
+          svgIcon: caretAltToRightIcon
         },
+        size: this.size,
+        page: this.totalPages,
         title: localizationService.toLanguageString(lastPageMessage.messageKey, lastPageMessage.defaultMessage),
         icon: 'caret-alt-to-right',
+        svgIcon: caretAltToRightIcon,
         onPagechange: this.changePage,
         on: this.v3 ? undefined : {
           "pagechange": this.changePage
@@ -331,11 +365,13 @@ var PagerVue2 = {
         pageSize: this.currentTake,
         pageSizes: settings.pageSizes,
         value: settings.pageSizeValue,
-        messagesMap: messagesMap
+        messagesMap: messagesMap,
+        size: this.size
       },
       pageSizes: settings.pageSizes,
       value: settings.pageSizeValue,
-      messagesMap: messagesMap
+      messagesMap: messagesMap,
+      size: this.size
     });
     var infoElement = !settings.info ? '' :
     // @ts-ignore function children
@@ -380,7 +416,9 @@ var PagerVue2 = {
       attrs: this.v3 ? undefined : {
         role: "navigation"
       }
-    }, [first, prev, changer, next, last, renderPageSizes, infoElement]);
+    }, [h("div", {
+      "class": 'k-pager-numbers-wrap'
+    }, [first, prev, changer, next, last]), renderPageSizes, infoElement]);
   }
 };
 /**

package/dist/es/pager/PagerInput.d.ts

@@ -12,6 +12,7 @@ export interface PagerInputProps {
      * The current page.
      */
     currentPage: number;
+    size?: null | 'small' | 'medium' | 'large' | string;
     /**
      * @hidden
      */
@@ -37,7 +38,14 @@ export interface PagerInputState {
 /**
  * @hidden
  */
-export interface PagerInputAll extends PagerInputMethods, PagerInputState {
+export interface PagerInputComputed {
+    [key: string]: any;
+    inputClass: object;
+}
+/**
+ * @hidden
+ */
+export interface PagerInputAll extends PagerInputMethods, PagerInputState, PagerInputComputed {
 }
 /**
  * @hidden

package/dist/es/pager/PagerInput.js

@@ -6,6 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
 import { messages, pagerOf, pagerPage, pagerTotalPages } from '../messages/main';
 import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
+import { kendoThemeMaps } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -14,7 +15,8 @@ var PagerInputVue2 = {
   props: {
     totalPages: Number,
     currentPage: Number,
-    messagesMap: Function
+    messagesMap: Function,
+    size: String
   },
   inject: {
     kendoIntlService: {
@@ -27,6 +29,18 @@ var PagerInputVue2 = {
   created: function created() {
     this._text = undefined;
   },
+  computed: {
+    inputClass: function inputClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-textbox': true,
+        'k-input': true,
+        'k-rounded-md': true,
+        'k-input-solid': true
+      }, _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
+    }
+  },
   methods: {
     changeHangler: function changeHangler(e) {
       var text = this._text = e.target.value.replace(/\D/g, '');
@@ -75,7 +89,7 @@ var PagerInputVue2 = {
     return h("span", {
       "class": "k-pager-input k-label"
     }, [localizationService.toLanguageString(pageMessage.messageKey, pageMessage.defaultMessage), h("span", {
-      "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+      "class": this.inputClass
     }, [h("input", {
       "class": "k-input-inner",
       value: this.v3 ? this.value() : null,

package/dist/es/pager/PagerNavigationButton.d.ts

@@ -1,4 +1,5 @@
 import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 declare type DefaultData<V> = object | ((this: V) => {});
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -12,10 +13,22 @@ export interface PagerNavigationButtonProps {
      * The class responsible for the icon of the button.
      */
     icon: string;
+    /**
+     * The svg icon responsible for the icon of the button.
+     */
+    svgIcon: SVGIcon;
     /**
      * The page number returned when the button is clicked.
      */
     page: number;
+    /**
+     * The disabled state of the button.
+     */
+    disabled: boolean;
+    /**
+     * The size of the button.
+     */
+    size: string;
 }
 export interface PagerNavigationButtonEmits {
     /**