@progress/kendo-vue-data-tools 3.12.0 → 3.12.1-dev.202308170413

package/dist/esm/pager/PagerInfo.js

@@ -45,8 +45,8 @@ var PagerInfoVue2 = {
       messageKey: pagerInfo,
       defaultMessage: messages[pagerInfo]
     };
-    return h("div", {
-      "class": "k-pager-info k-label"
+    return h("span", {
+      "class": "k-pager-info"
     }, [intlService.format(localizationService.toLanguageString(infoMessage.messageKey, infoMessage.defaultMessage), [Math.min(this.$props.skip + 1, this.$props.totalPages), Math.min(this.$props.skip + this.$props.currentPage, this.$props.totalPages), this.$props.totalPages])]);
   }
 };

package/dist/esm/pager/PagerInput.js

@@ -6,7 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var inject = allVue.inject;
 import { messages, pagerOf, pagerPage, pagerTotalPages, pagerPageInputAriaLabel } from '../messages/main.js';
 import { provideIntlService, provideLocalizationService } from '@progress/kendo-vue-intl';
-import { kendoThemeMaps } from '@progress/kendo-vue-common';
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
 /**
  * @hidden
  */
@@ -26,36 +26,22 @@ var PagerInputVue2 = {
       default: null
     }
   },
-  created: function created() {
-    this._text = undefined;
+  data: function data() {
+    return {
+      currentText: 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;
+    computedValue: function computedValue() {
+      return this.$props.currentPage !== undefined ? this.$props.currentPage : this.currentText;
     }
   },
   methods: {
     changeHangler: function changeHangler(e) {
-      var text = this._text = e.target.value.replace(/\D/g, '');
-      this.$forceUpdate();
-      if (text) {
-        this.$emit('pagechange', parseInt(text, 10), e);
+      this.currentText = e.target.value;
+      if (this.currentText) {
+        this.$emit('pagechange', this.currentText, e);
       }
-    },
-    blurHandler: function blurHandler() {
-      this.$forceUpdate();
-    },
-    value: function value() {
-      var value = this._text === undefined ? this.$props.currentPage.toString() : this._text;
-      this._text = undefined;
-      return value;
     }
   },
   // @ts-ignore
@@ -91,26 +77,25 @@ var PagerInputVue2 = {
       defaultMessage: messages[pagerPageInputAriaLabel]
     };
     return h("span", {
-      "class": "k-pager-input k-label"
-    }, [localizationService.toLanguageString(pageMessage.messageKey, pageMessage.defaultMessage), h("span", {
-      "class": this.inputClass
-    }, [h("input", {
-      "class": "k-input-inner",
-      value: this.v3 ? this.value() : null,
-      domProps: this.v3 ? undefined : {
-        "value": this.value()
-      },
-      ariaLabel: localizationService.toLanguageString(pageInputAriaLabel.messageKey, pageInputAriaLabel.defaultMessage),
+      "class": "k-pager-input"
+    }, [h("span", [localizationService.toLanguageString(pageMessage.messageKey, pageMessage.defaultMessage)]), h(NumericTextBox, {
+      min: 1,
       attrs: this.v3 ? undefined : {
+        min: 1,
+        value: this.computedValue,
+        spinners: false,
+        size: this.$props.size,
         ariaLabel: localizationService.toLanguageString(pageInputAriaLabel.messageKey, pageInputAriaLabel.defaultMessage)
       },
-      onBlur: this.blurHandler,
+      value: this.computedValue,
+      onChange: this.changeHangler,
       on: this.v3 ? undefined : {
-        "blur": this.blurHandler,
         "change": this.changeHangler
       },
-      onChange: this.changeHangler
-    })]), " ", "".concat(localizationService.toLanguageString(ofMessage.messageKey, ofMessage.defaultMessage), " ").concat(intlService.format(localizationService.toLanguageString(totalPagesMessage.messageKey, totalPagesMessage.defaultMessage), [this.$props.totalPages]))]);
+      spinners: false,
+      size: this.$props.size,
+      ariaLabel: localizationService.toLanguageString(pageInputAriaLabel.messageKey, pageInputAriaLabel.defaultMessage)
+    }), h("span", ["".concat(localizationService.toLanguageString(ofMessage.messageKey, ofMessage.defaultMessage), " ").concat(intlService.format(localizationService.toLanguageString(totalPagesMessage.messageKey, totalPagesMessage.defaultMessage), [this.$props.totalPages]))])]);
   }
 };
 /**

package/dist/npm/filter/Expression.js

@@ -274,46 +274,26 @@ var ExpressionVue2 = {
       }, _this.v3 ? function () {
         return [field && filterEditors.call(_this, field.filter, field.filterRender)];
       } : [field && filterEditors.call(_this, field.filter, field.filterRender)]),
-      // @ts-ignore function children 
-      h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-        return [
-        // @ts-ignore
-        h(kendo_vue_buttons_1.Button, {
-          title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-          attrs: _this.v3 ? undefined : {
-            title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-            icon: "x",
-            svgIcon: kendo_svg_icons_1.xIcon,
-            look: "flat",
-            type: "button"
-          },
-          icon: "x",
-          svgIcon: kendo_svg_icons_1.xIcon,
-          look: "flat",
-          type: "button",
-          onClick: _this.onFilterRemove,
-          on: _this.v3 ? undefined : {
-            "click": _this.onFilterRemove
-          }
-        })];
-      } : [h(kendo_vue_buttons_1.Button, {
+      // @ts-ignore
+      h(kendo_vue_buttons_1.Button, {
         title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
           icon: "x",
           svgIcon: kendo_svg_icons_1.xIcon,
-          look: "flat",
+          fillMode: "flat",
           type: "button"
         },
         icon: "x",
         svgIcon: kendo_svg_icons_1.xIcon,
-        look: "flat",
+        fillMode: "flat",
         type: "button",
+        "class": "k-toolbar-button",
         onClick: _this.onFilterRemove,
         on: _this.v3 ? undefined : {
           "click": _this.onFilterRemove
         }
-      })])];
+      })];
     } : [h(kendo_vue_buttons_1.ToolbarItem, {
       "class": "k-filter-field"
     }, _this.v3 ? function () {
@@ -404,43 +384,25 @@ var ExpressionVue2 = {
       "class": "k-filter-value"
     }, _this.v3 ? function () {
       return [field && filterEditors.call(_this, field.filter, field.filterRender)];
-    } : [field && filterEditors.call(_this, field.filter, field.filterRender)]), h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-      return [h(kendo_vue_buttons_1.Button, {
-        title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-        attrs: _this.v3 ? undefined : {
-          title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-          icon: "x",
-          svgIcon: kendo_svg_icons_1.xIcon,
-          look: "flat",
-          type: "button"
-        },
-        icon: "x",
-        svgIcon: kendo_svg_icons_1.xIcon,
-        look: "flat",
-        type: "button",
-        onClick: _this.onFilterRemove,
-        on: _this.v3 ? undefined : {
-          "click": _this.onFilterRemove
-        }
-      })];
-    } : [h(kendo_vue_buttons_1.Button, {
+    } : [field && filterEditors.call(_this, field.filter, field.filterRender)]), h(kendo_vue_buttons_1.Button, {
       title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
         icon: "x",
         svgIcon: kendo_svg_icons_1.xIcon,
-        look: "flat",
+        fillMode: "flat",
         type: "button"
       },
       icon: "x",
       svgIcon: kendo_svg_icons_1.xIcon,
-      look: "flat",
+      fillMode: "flat",
       type: "button",
+      "class": "k-toolbar-button",
       onClick: _this.onFilterRemove,
       on: _this.v3 ? undefined : {
         "click": _this.onFilterRemove
       }
-    })])])]);
+    })])]);
   },
   methods: {
     onFieldChange: function onFieldChange(event) {

package/dist/npm/filter/Filter.js

@@ -92,7 +92,7 @@ var FilterVue2 = {
       });
     }, this);
     return h("div", {
-      "class": 'k-widget k-filter'
+      "class": 'k-filter'
     }, [h("ul", {
       "class": "k-filter-container",
       role: "tree",

package/dist/npm/filter/GroupToolbar.js

@@ -78,9 +78,7 @@ var GroupToolbarVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var _a = this.$props,
-      fields = _a.fields,
-      filter = _a.filter;
+    var filter = this.$props.filter;
     var locService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
     return h("div", {
       "class": "k-filter-toolbar"
@@ -98,78 +96,12 @@ var GroupToolbarVue2 = {
     }, this.v3 ? function () {
       return [
       // @ts-ignore function children 
-      h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
+      h(kendo_vue_buttons_1.ButtonGroup, {
+        "class": "k-toolbar-button-group"
+      }, _this.v3 ? function () {
         return [
         // @ts-ignore function children 
-        h(kendo_vue_buttons_1.ButtonGroup, _this.v3 ? function () {
-          return [
-          // @ts-ignore function children 
-          h(kendo_vue_buttons_1.Button, {
-            togglable: true,
-            attrs: _this.v3 ? undefined : {
-              togglable: true,
-              selected: filter.logic === 'and',
-              type: "button"
-            },
-            onClick: _this.onLogicAnd,
-            on: _this.v3 ? undefined : {
-              "click": _this.onLogicAnd
-            },
-            selected: filter.logic === 'and',
-            type: "button"
-          }, _this.v3 ? function () {
-            return [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])];
-          } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]),
-          // @ts-ignore function children 
-          h(kendo_vue_buttons_1.Button, {
-            togglable: true,
-            attrs: _this.v3 ? undefined : {
-              togglable: true,
-              selected: filter.logic === 'or',
-              type: "button"
-            },
-            onClick: _this.onLogicOr,
-            on: _this.v3 ? undefined : {
-              "click": _this.onLogicOr
-            },
-            selected: filter.logic === 'or',
-            type: "button"
-          }, _this.v3 ? function () {
-            return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-          } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])];
-        } : [h(kendo_vue_buttons_1.Button, {
-          togglable: true,
-          attrs: _this.v3 ? undefined : {
-            togglable: true,
-            selected: filter.logic === 'and',
-            type: "button"
-          },
-          onClick: _this.onLogicAnd,
-          on: _this.v3 ? undefined : {
-            "click": _this.onLogicAnd
-          },
-          selected: filter.logic === 'and',
-          type: "button"
-        }, _this.v3 ? function () {
-          return [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])];
-        } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]), h(kendo_vue_buttons_1.Button, {
-          togglable: true,
-          attrs: _this.v3 ? undefined : {
-            togglable: true,
-            selected: filter.logic === 'or',
-            type: "button"
-          },
-          onClick: _this.onLogicOr,
-          on: _this.v3 ? undefined : {
-            "click": _this.onLogicOr
-          },
-          selected: filter.logic === 'or',
-          type: "button"
-        }, _this.v3 ? function () {
-          return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-        } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])])];
-      } : [h(kendo_vue_buttons_1.ButtonGroup, _this.v3 ? function () {
-        return [h(kendo_vue_buttons_1.Button, {
+        h(kendo_vue_buttons_1.Button, {
           togglable: true,
           attrs: _this.v3 ? undefined : {
             togglable: true,
@@ -180,11 +112,14 @@ var GroupToolbarVue2 = {
           on: _this.v3 ? undefined : {
             "click": _this.onLogicAnd
           },
+          "class": "k-toolbar-button",
           selected: filter.logic === 'and',
           type: "button"
         }, _this.v3 ? function () {
           return [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])];
-        } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]), h(kendo_vue_buttons_1.Button, {
+        } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]),
+        // @ts-ignore function children 
+        h(kendo_vue_buttons_1.Button, {
           togglable: true,
           attrs: _this.v3 ? undefined : {
             togglable: true,
@@ -195,6 +130,7 @@ var GroupToolbarVue2 = {
           on: _this.v3 ? undefined : {
             "click": _this.onLogicOr
           },
+          "class": "k-toolbar-button",
           selected: filter.logic === 'or',
           type: "button"
         }, _this.v3 ? function () {
@@ -211,6 +147,7 @@ var GroupToolbarVue2 = {
         on: _this.v3 ? undefined : {
           "click": _this.onLogicAnd
         },
+        "class": "k-toolbar-button",
         selected: filter.logic === 'and',
         type: "button"
       }, _this.v3 ? function () {
@@ -226,32 +163,14 @@ var GroupToolbarVue2 = {
         on: _this.v3 ? undefined : {
           "click": _this.onLogicOr
         },
+        "class": "k-toolbar-button",
         selected: filter.logic === 'or',
         type: "button"
       }, _this.v3 ? function () {
         return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-      } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])])]),
+      } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])]),
       // @ts-ignore function children 
-      h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-        return [
-        // @ts-ignore function children 
-        h(kendo_vue_buttons_1.Button, {
-          title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
-          attrs: _this.v3 ? undefined : {
-            title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
-            icon: "filter-add-expression",
-            svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
-            type: "button"
-          },
-          icon: "filter-add-expression",
-          svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
-          type: "button",
-          onClick: _this.onAddExpression,
-          on: _this.v3 ? undefined : {
-            "click": _this.onAddExpression
-          }
-        })];
-      } : [h(kendo_vue_buttons_1.Button, {
+      h(kendo_vue_buttons_1.Button, {
         title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
@@ -262,32 +181,14 @@ var GroupToolbarVue2 = {
         icon: "filter-add-expression",
         svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
         type: "button",
+        "class": "k-toolbar-button",
         onClick: _this.onAddExpression,
         on: _this.v3 ? undefined : {
           "click": _this.onAddExpression
         }
-      })]),
+      }),
       // @ts-ignore function children 
-      h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-        return [
-        // @ts-ignore function children 
-        h(kendo_vue_buttons_1.Button, {
-          title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
-          attrs: _this.v3 ? undefined : {
-            title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
-            icon: "filter-add-group",
-            svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
-            type: "button"
-          },
-          icon: "filter-add-group",
-          svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
-          type: "button",
-          onClick: _this.onAddGroup,
-          on: _this.v3 ? undefined : {
-            "click": _this.onAddGroup
-          }
-        })];
-      } : [h(kendo_vue_buttons_1.Button, {
+      h(kendo_vue_buttons_1.Button, {
         title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
@@ -298,116 +199,35 @@ var GroupToolbarVue2 = {
         icon: "filter-add-group",
         svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
         type: "button",
+        "class": "k-toolbar-button",
         onClick: _this.onAddGroup,
         on: _this.v3 ? undefined : {
           "click": _this.onAddGroup
         }
-      })]),
+      }),
       // @ts-ignore function children 
-      h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-        return [
-        // @ts-ignore function children 
-        h(kendo_vue_buttons_1.Button, {
-          title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-          attrs: _this.v3 ? undefined : {
-            title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-            icon: "x",
-            svgIcon: kendo_svg_icons_1.xIcon,
-            look: "flat",
-            type: "button"
-          },
-          icon: "x",
-          svgIcon: kendo_svg_icons_1.xIcon,
-          look: "flat",
-          type: "button",
-          onClick: _this.onGroupRemove,
-          on: _this.v3 ? undefined : {
-            "click": _this.onGroupRemove
-          }
-        })];
-      } : [h(kendo_vue_buttons_1.Button, {
+      h(kendo_vue_buttons_1.Button, {
         title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
           icon: "x",
           svgIcon: kendo_svg_icons_1.xIcon,
-          look: "flat",
+          fillMode: "flat",
           type: "button"
         },
         icon: "x",
         svgIcon: kendo_svg_icons_1.xIcon,
-        look: "flat",
+        fillMode: "flat",
         type: "button",
+        "class": "k-toolbar-button",
         onClick: _this.onGroupRemove,
         on: _this.v3 ? undefined : {
           "click": _this.onGroupRemove
         }
-      })])];
-    } : [h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-      return [h(kendo_vue_buttons_1.ButtonGroup, _this.v3 ? function () {
-        return [h(kendo_vue_buttons_1.Button, {
-          togglable: true,
-          attrs: _this.v3 ? undefined : {
-            togglable: true,
-            selected: filter.logic === 'and',
-            type: "button"
-          },
-          onClick: _this.onLogicAnd,
-          on: _this.v3 ? undefined : {
-            "click": _this.onLogicAnd
-          },
-          selected: filter.logic === 'and',
-          type: "button"
-        }, _this.v3 ? function () {
-          return [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])];
-        } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]), h(kendo_vue_buttons_1.Button, {
-          togglable: true,
-          attrs: _this.v3 ? undefined : {
-            togglable: true,
-            selected: filter.logic === 'or',
-            type: "button"
-          },
-          onClick: _this.onLogicOr,
-          on: _this.v3 ? undefined : {
-            "click": _this.onLogicOr
-          },
-          selected: filter.logic === 'or',
-          type: "button"
-        }, _this.v3 ? function () {
-          return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-        } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])];
-      } : [h(kendo_vue_buttons_1.Button, {
-        togglable: true,
-        attrs: _this.v3 ? undefined : {
-          togglable: true,
-          selected: filter.logic === 'and',
-          type: "button"
-        },
-        onClick: _this.onLogicAnd,
-        on: _this.v3 ? undefined : {
-          "click": _this.onLogicAnd
-        },
-        selected: filter.logic === 'and',
-        type: "button"
-      }, _this.v3 ? function () {
-        return [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])];
-      } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]), h(kendo_vue_buttons_1.Button, {
-        togglable: true,
-        attrs: _this.v3 ? undefined : {
-          togglable: true,
-          selected: filter.logic === 'or',
-          type: "button"
-        },
-        onClick: _this.onLogicOr,
-        on: _this.v3 ? undefined : {
-          "click": _this.onLogicOr
-        },
-        selected: filter.logic === 'or',
-        type: "button"
-      }, _this.v3 ? function () {
-        return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-      } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])])];
-    } : [h(kendo_vue_buttons_1.ButtonGroup, _this.v3 ? function () {
+      })];
+    } : [h(kendo_vue_buttons_1.ButtonGroup, {
+      "class": "k-toolbar-button-group"
+    }, _this.v3 ? function () {
       return [h(kendo_vue_buttons_1.Button, {
         togglable: true,
         attrs: _this.v3 ? undefined : {
@@ -419,6 +239,7 @@ var GroupToolbarVue2 = {
         on: _this.v3 ? undefined : {
           "click": _this.onLogicAnd
         },
+        "class": "k-toolbar-button",
         selected: filter.logic === 'and',
         type: "button"
       }, _this.v3 ? function () {
@@ -434,6 +255,7 @@ var GroupToolbarVue2 = {
         on: _this.v3 ? undefined : {
           "click": _this.onLogicOr
         },
+        "class": "k-toolbar-button",
         selected: filter.logic === 'or',
         type: "button"
       }, _this.v3 ? function () {
@@ -450,6 +272,7 @@ var GroupToolbarVue2 = {
       on: _this.v3 ? undefined : {
         "click": _this.onLogicAnd
       },
+      "class": "k-toolbar-button",
       selected: filter.logic === 'and',
       type: "button"
     }, _this.v3 ? function () {
@@ -465,28 +288,12 @@ var GroupToolbarVue2 = {
       on: _this.v3 ? undefined : {
         "click": _this.onLogicOr
       },
+      "class": "k-toolbar-button",
       selected: filter.logic === 'or',
       type: "button"
     }, _this.v3 ? function () {
       return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-    } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])])]), h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-      return [h(kendo_vue_buttons_1.Button, {
-        title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
-        attrs: _this.v3 ? undefined : {
-          title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
-          icon: "filter-add-expression",
-          svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
-          type: "button"
-        },
-        icon: "filter-add-expression",
-        svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
-        type: "button",
-        onClick: _this.onAddExpression,
-        on: _this.v3 ? undefined : {
-          "click": _this.onAddExpression
-        }
-      })];
-    } : [h(kendo_vue_buttons_1.Button, {
+    } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])]), h(kendo_vue_buttons_1.Button, {
       title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
@@ -497,28 +304,12 @@ var GroupToolbarVue2 = {
       icon: "filter-add-expression",
       svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
       type: "button",
+      "class": "k-toolbar-button",
       onClick: _this.onAddExpression,
       on: _this.v3 ? undefined : {
         "click": _this.onAddExpression
       }
-    })]), h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-      return [h(kendo_vue_buttons_1.Button, {
-        title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
-        attrs: _this.v3 ? undefined : {
-          title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
-          icon: "filter-add-group",
-          svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
-          type: "button"
-        },
-        icon: "filter-add-group",
-        svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
-        type: "button",
-        onClick: _this.onAddGroup,
-        on: _this.v3 ? undefined : {
-          "click": _this.onAddGroup
-        }
-      })];
-    } : [h(kendo_vue_buttons_1.Button, {
+    }), h(kendo_vue_buttons_1.Button, {
       title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
@@ -529,47 +320,30 @@ var GroupToolbarVue2 = {
       icon: "filter-add-group",
       svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
       type: "button",
+      "class": "k-toolbar-button",
       onClick: _this.onAddGroup,
       on: _this.v3 ? undefined : {
         "click": _this.onAddGroup
       }
-    })]), h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-      return [h(kendo_vue_buttons_1.Button, {
-        title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-        attrs: _this.v3 ? undefined : {
-          title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-          icon: "x",
-          svgIcon: kendo_svg_icons_1.xIcon,
-          look: "flat",
-          type: "button"
-        },
-        icon: "x",
-        svgIcon: kendo_svg_icons_1.xIcon,
-        look: "flat",
-        type: "button",
-        onClick: _this.onGroupRemove,
-        on: _this.v3 ? undefined : {
-          "click": _this.onGroupRemove
-        }
-      })];
-    } : [h(kendo_vue_buttons_1.Button, {
+    }), h(kendo_vue_buttons_1.Button, {
       title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
         icon: "x",
         svgIcon: kendo_svg_icons_1.xIcon,
-        look: "flat",
+        fillMode: "flat",
         type: "button"
       },
       icon: "x",
       svgIcon: kendo_svg_icons_1.xIcon,
-      look: "flat",
+      fillMode: "flat",
       type: "button",
+      "class": "k-toolbar-button",
       onClick: _this.onGroupRemove,
       on: _this.v3 ? undefined : {
         "click": _this.onGroupRemove
       }
-    })])])]);
+    })])]);
   },
   methods: {
     onGroupRemove: function onGroupRemove() {