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

package/dist/npm/pager/Pager.js

@@ -30,6 +30,7 @@ var PagerNavigationButton_1 = require("./PagerNavigationButton");
 var main_1 = require("../messages/main");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -74,12 +75,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() {
@@ -107,11 +115,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(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-pager-mobile-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[this.currentSize])] = this.currentSize, _a;
       }
     },
     totalPages: {
@@ -154,11 +162,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) {
@@ -224,13 +232,15 @@ var PagerVue2 = {
     var changer = settings.type === 'numeric' ?
     // @ts-ignore
     h(PagerNumericButtons_1.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,
@@ -245,29 +255,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_1.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: kendo_svg_icons_1.caretAltToLeftIcon
         },
+        disabled: this.currentPage === 1,
+        page: 1,
         title: localizationService.toLanguageString(firstPageMessage.messageKey, firstPageMessage.defaultMessage),
         icon: 'caret-alt-to-left',
+        svgIcon: kendo_svg_icons_1.caretAltToLeftIcon,
         onPagechange: this.changePage,
         on: this.v3 ? undefined : {
           "pagechange": this.changePage
@@ -276,15 +294,20 @@ var PagerVue2 = {
       prev =
       // @ts-ignore function children
       h(PagerNavigationButton_1.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: kendo_svg_icons_1.caretAltLeftIcon
         },
+        size: this.size,
+        page: this.currentPage - 1,
         title: localizationService.toLanguageString(previousPageMessage.messageKey, previousPageMessage.defaultMessage),
         icon: 'caret-alt-left',
+        svgIcon: kendo_svg_icons_1.caretAltLeftIcon,
         onPagechange: this.changePage,
         on: this.v3 ? undefined : {
           "pagechange": this.changePage
@@ -293,15 +316,20 @@ var PagerVue2 = {
       next =
       // @ts-ignore function children
       h(PagerNavigationButton_1.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: kendo_svg_icons_1.caretAltRightIcon
         },
+        size: this.size,
+        page: this.currentPage + 1,
         title: localizationService.toLanguageString(nextPageMessage.messageKey, nextPageMessage.defaultMessage),
         icon: 'caret-alt-right',
+        svgIcon: kendo_svg_icons_1.caretAltRightIcon,
         onPagechange: this.changePage,
         on: this.v3 ? undefined : {
           "pagechange": this.changePage
@@ -310,15 +338,21 @@ var PagerVue2 = {
       last =
       // @ts-ignore function children
       h(PagerNavigationButton_1.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: kendo_svg_icons_1.caretAltToRightIcon
         },
+        size: this.size,
+        page: this.totalPages,
         title: localizationService.toLanguageString(lastPageMessage.messageKey, lastPageMessage.defaultMessage),
         icon: 'caret-alt-to-right',
+        svgIcon: kendo_svg_icons_1.caretAltToRightIcon,
         onPagechange: this.changePage,
         on: this.v3 ? undefined : {
           "pagechange": this.changePage
@@ -337,11 +371,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
@@ -386,7 +422,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]);
   }
 };
 exports.PagerVue2 = PagerVue2;

package/dist/npm/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/npm/pager/PagerInput.js

@@ -12,6 +12,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
 var main_1 = require("../messages/main");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 /**
  * @hidden
  */
@@ -20,7 +21,8 @@ var PagerInputVue2 = {
   props: {
     totalPages: Number,
     currentPage: Number,
-    messagesMap: Function
+    messagesMap: Function,
+    size: String
   },
   inject: {
     kendoIntlService: {
@@ -33,6 +35,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(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a;
+    }
+  },
   methods: {
     changeHangler: function changeHangler(e) {
       var text = this._text = e.target.value.replace(/\D/g, '');
@@ -81,7 +95,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/npm/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 {
     /**

package/dist/npm/pager/PagerNavigationButton.js

@@ -9,7 +9,7 @@ var Vue = require("vue");
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 /**
  * @hidden
  */
@@ -17,8 +17,11 @@ var PagerNavigationButtonVue2 = {
   name: 'KendoPagerNavigationButton',
   props: {
     title: String,
+    disabled: Boolean,
     icon: String,
-    page: Number
+    svgIcon: Object,
+    page: Number,
+    size: String
   },
   inject: {
     kendoLocalizationService: {
@@ -44,28 +47,35 @@ var PagerNavigationButtonVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
-    return h("a", {
-      "class": 'k-link k-pager-nav',
-      onClick: this.changePage,
-      on: this.v3 ? undefined : {
-        "click": this.changePage
-      },
-      href: "#",
+    return h(kendo_vue_buttons_1.Button, {
+      fillMode: 'flat',
       attrs: this.v3 ? undefined : {
-        href: "#",
-        role: "button",
-        title: this.$props.title,
-        "aria-label": this.$props.title
+        fillMode: 'flat',
+        themeColor: 'base',
+        size: this.$props.size,
+        rounded: null,
+        ariaLabel: this.title,
+        icon: this.icon,
+        svgIcon: this.svgIcon,
+        title: this.title,
+        disabled: this.disabled,
+        role: "button"
       },
+      themeColor: 'base',
+      size: this.$props.size,
+      rounded: null,
+      "class": 'k-pager-nav',
+      ariaLabel: this.title,
+      icon: this.icon,
+      svgIcon: this.svgIcon,
+      title: this.title,
+      disabled: this.disabled,
       role: "button",
-      title: this.$props.title,
-      "aria-label": this.$props.title
-    }, [h(kendo_vue_common_1.Icon, {
-      name: this.icon,
-      attrs: this.v3 ? undefined : {
-        name: this.icon
+      onClick: this.changePage,
+      on: this.v3 ? undefined : {
+        "click": this.changePage
       }
-    })]);
+    });
   }
 };
 exports.PagerNavigationButtonVue2 = PagerNavigationButtonVue2;

package/dist/npm/pager/PagerNumericButtons.d.ts

@@ -14,9 +14,13 @@ export interface PagerNumericButtonsProps {
      */
     currentPage: number;
     /**
-     * The size type of the buttons. When set to 'small' the buttons are shown as dropdownlist component.
+     * The sizing type of the buttons.
      */
     size?: string;
+    /**
+     * The responsive type of the buttons. When set to 'small' the buttons are shown as dropdownlist component.
+     */
+    responsiveSize?: string;
 }
 /**
  * @hidden

package/dist/npm/pager/PagerNumericButtons.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PagerNumericButtonsVue2 = exports.PagerNumericButtons = void 0;
+// @ts-ignore
 var Vue = require("vue");
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 /**
  * @hidden
  */
@@ -17,7 +20,8 @@ var PagerNumericButtonsVue2 = {
     buttonCount: Number,
     totalPages: Number,
     currentPage: Number,
-    size: String
+    size: String,
+    responsiveSize: String
   },
   computed: {
     start: {
@@ -35,6 +39,16 @@ var PagerNumericButtonsVue2 = {
       get: function get() {
         return Math.min(this.start + this.$props.buttonCount - 1, this.$props.totalPages);
       }
+    },
+    dropdownClass: function dropdownClass() {
+      var _a;
+      var size = this.$props.size;
+      return _a = {
+        'k-picker': true,
+        'k-dropdown-list': true,
+        'k-dropdown': true,
+        'k-rounded-md': true
+      }, _a["k-picker-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a;
     }
   },
   methods: {
@@ -57,8 +71,17 @@ var PagerNumericButtonsVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var prevDots = this.start > 1 ? h("li", [h("a", {
-      "class": "k-link",
+    var prevDots = this.start > 1 && h(kendo_vue_buttons_1.Button, {
+      fillMode: 'flat',
+      attrs: this.v3 ? undefined : {
+        fillMode: 'flat',
+        themeColor: 'primary',
+        size: this.$props.size,
+        rounded: null
+      },
+      themeColor: 'primary',
+      size: this.$props.size,
+      rounded: null,
       onClick: function onClick(e) {
         return _this.click(e, _this.start - 1);
       },
@@ -66,14 +89,19 @@ var PagerNumericButtonsVue2 = {
         "click": function onClick(e) {
           return _this.click(e, _this.start - 1);
         }
-      },
-      href: "#",
-      attrs: this.v3 ? undefined : {
-        href: "#"
       }
-    }, ["..."])]) : '';
-    var postDots = this.end < this.$props.totalPages ? h("li", [h("a", {
-      "class": "k-link",
+    }, ["..."]);
+    var postDots = this.end < this.$props.totalPages && h(kendo_vue_buttons_1.Button, {
+      fillMode: 'flat',
+      attrs: this.v3 ? undefined : {
+        fillMode: 'flat',
+        themeColor: 'primary',
+        size: this.$props.size,
+        rounded: null
+      },
+      themeColor: 'primary',
+      size: this.$props.size,
+      rounded: null,
       onClick: function onClick(e) {
         return _this.click(e, _this.end + 1);
       },
@@ -81,25 +109,16 @@ var PagerNumericButtonsVue2 = {
         "click": function onClick(e) {
           return _this.click(e, _this.end + 1);
         }
-      },
-      href: "#",
-      attrs: this.v3 ? undefined : {
-        href: "#"
       }
-    }, ["..."])]) : '';
+    }, ["..."]);
     var buttons = [];
     for (var idx = this.start; idx <= this.end; idx++) {
       buttons.push(idx);
     }
     var numerics = buttons.map(function (page) {
       var _this = this;
-      return h("li", {
-        key: page
-      }, [h("a", {
-        href: "#",
-        attrs: this.v3 ? undefined : {
-          href: "#"
-        },
+      return h(kendo_vue_buttons_1.Button, {
+        key: page,
         onClick: function onClick(e) {
           return _this.click(e, page);
         },
@@ -108,12 +127,27 @@ var PagerNumericButtonsVue2 = {
             return _this.click(e, page);
           }
         },
-        "class": this.$props.currentPage === page ? 'k-link k-selected' : 'k-link'
-      }, [page])]);
+        selected: this.$props.currentPage === page,
+        attrs: this.v3 ? undefined : {
+          selected: this.$props.currentPage === page,
+          fillMode: 'flat',
+          themeColor: 'primary',
+          size: this.$props.size,
+          rounded: null,
+          role: "button",
+          "aria-current": this.$props.currentPage === page ? true : undefined
+        },
+        fillMode: 'flat',
+        themeColor: 'primary',
+        size: this.$props.size,
+        rounded: null,
+        role: "button",
+        "aria-current": this.$props.currentPage === page ? true : undefined
+      }, [page]);
     }, this);
     var dropdown = function dropdown(currentButtons) {
       return h("select", {
-        "class": "k-dropdownlist k-picker k-picker-md k-rounded-md k-picker-solid",
+        "class": this.dropdownClass,
         onChange: this.ddlChange,
         on: this.v3 ? undefined : {
           "change": this.ddlChange
@@ -131,9 +165,9 @@ var PagerNumericButtonsVue2 = {
     };
     return h("div", {
       "class": "k-pager-numbers-wrap"
-    }, [this.$props.size !== 'small' ? h("ul", {
+    }, [h("div", {
       "class": "k-pager-numbers"
-    }, [prevDots, numerics, postDots]) : dropdown.call(this, buttons)]);
+    }, [prevDots, numerics, postDots]), dropdown.call(this, buttons)]);
   }
 };
 exports.PagerNumericButtonsVue2 = PagerNumericButtonsVue2;

package/dist/npm/pager/PagerPageSizes.d.ts

@@ -17,6 +17,7 @@ export interface PagerPageSizesProps {
      * The page sizes.
      */
     pageSizes: number[];
+    size?: null | 'small' | 'medium' | 'large' | string;
     /**
      * A map with the messages.
      */

package/dist/npm/pager/PagerPageSizes.js

@@ -22,6 +22,7 @@ var PagerPageSizesVue2 = {
     value: [String, Number],
     pageSize: Number,
     pageSizes: Array,
+    size: String,
     messagesMap: Function
   },
   inject: {
@@ -77,9 +78,11 @@ var PagerPageSizesVue2 = {
       attrs: this.v3 ? undefined : {
         value: value !== undefined ? value : pageSize,
         dataItems: sizes,
+        size: this.$props.size,
         ariaLabel: ls.toLanguageString(pageSelectionMessage.messageKey, pageSelectionMessage.defaultMessage)
       },
       dataItems: sizes,
+      size: this.$props.size,
       ariaLabel: ls.toLanguageString(pageSelectionMessage.messageKey, pageSelectionMessage.defaultMessage),
       onChange: this.pageSizeChange,
       on: this.v3 ? undefined : {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-data-tools",
   "description": "Kendo UI for Vue Data Tools package",
-  "version": "3.7.4-dev.202212300853",
+  "version": "3.7.4-dev.202301120847",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -45,21 +45,22 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-common": "3.7.4-dev.202212300853"
+    "@progress/kendo-vue-common": "3.7.4-dev.202301120847"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-date-math": "^1.4.1",
     "@progress/kendo-drawing": "^1.8.0",
-    "@progress/kendo-licensing": "^1.1.1",
-    "@progress/kendo-vue-animation": "3.7.4-dev.202212300853",
-    "@progress/kendo-vue-buttons": "3.7.4-dev.202212300853",
-    "@progress/kendo-vue-dateinputs": "3.7.4-dev.202212300853",
-    "@progress/kendo-vue-dropdowns": "3.7.4-dev.202212300853",
-    "@progress/kendo-vue-grid": "3.7.4-dev.202212300853",
-    "@progress/kendo-vue-inputs": "3.7.4-dev.202212300853",
-    "@progress/kendo-vue-intl": "3.7.4-dev.202212300853",
-    "@progress/kendo-vue-popup": "3.7.4-dev.202212300853"
+    "@progress/kendo-licensing": "^1.3.0",
+    "@progress/kendo-svg-icons": "^1.0.0",
+    "@progress/kendo-vue-animation": "3.7.4-dev.202301120847",
+    "@progress/kendo-vue-buttons": "3.7.4-dev.202301120847",
+    "@progress/kendo-vue-dateinputs": "3.7.4-dev.202301120847",
+    "@progress/kendo-vue-dropdowns": "3.7.4-dev.202301120847",
+    "@progress/kendo-vue-grid": "3.7.4-dev.202301120847",
+    "@progress/kendo-vue-inputs": "3.7.4-dev.202301120847",
+    "@progress/kendo-vue-intl": "3.7.4-dev.202301120847",
+    "@progress/kendo-vue-popup": "3.7.4-dev.202301120847"
   },
   "@progress": {
     "friendlyName": "Data Tools",