@progress/kendo-vue-buttons 2.7.3 → 3.0.0-dev.202201141128

package/dist/es/ListButton/SplitButton.js

@@ -20,17 +20,15 @@ var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
 import { Button as KendoButton } from '../Button';
-import { classNames, guid, Keys } from '@progress/kendo-vue-common';
+import { classNames, guid, Keys, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { ButtonItem } from './ButtonItem';
 import navigation from './utils/navigation';
 import { Popup } from '@progress/kendo-vue-popup';
 import { getAnchorAlign, getPopupAlign } from './utils/popup';
 import { validatePackage, templateRendering, getListeners, canUseDOM } from '@progress/kendo-vue-common';
-import { packageMetadata } from '../package-metadata';
-import util from '../util';
-var styles = util.styles; // tslint:enable:max-line-length
+import { packageMetadata } from '../package-metadata'; // tslint:enable:max-line-length
 
-var SplitButton = {
+var SplitButtonVue2 = {
   name: 'KendoSplitButton',
   // @ts-ignore
   emits: {
@@ -54,6 +52,29 @@ var SplitButton = {
     tabIndex: Number,
     disabled: Boolean,
     icon: String,
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    rounded: {
+      type: String,
+      default: 'medium'
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'flat', 'link', 'outline', 'solid'].includes(value);
+      }
+    },
+    // eslint-disable-next-line max-len
+    themeColor: {
+      type: String,
+      default: 'base',
+      validator: function validator(value) {
+        return [null, 'base', 'dark', 'error', 'info', 'inverse', 'inverse', 'light', 'primary', 'secondary', 'success', 'tertiary', 'warning'].includes(value);
+      }
+    },
     opened: {
       type: Boolean,
       default: undefined
@@ -101,13 +122,11 @@ var SplitButton = {
       return this.$props.opened === undefined ? this.currentOpened : this.$props.opened;
     },
     wrapperClass: function wrapperClass() {
-      var _a;
-
-      return _a = {
-        'k-widget': true,
+      return {
         'k-split-button': true,
-        'k-button-group': true
-      }, _a[styles["" + this.$props.look]] = true, _a['k-state-focused'] = this.focused, _a;
+        'k-button-group': true,
+        'k-focus': this.focused
+      };
     }
   },
   // @ts-ignore
@@ -143,6 +162,7 @@ var SplitButton = {
         }) : dataItem;
         return (// @ts-ignore
           h(ButtonItem, {
+            "class": "k-menu-item",
             dataItem: currentDataItem,
             attrs: this.v3 ? undefined : {
               dataItem: currentDataItem,
@@ -174,8 +194,10 @@ var SplitButton = {
     var renderPopup = function renderPopup() {
       var _this2 = this;
 
-      var _a = this.$props.popupSettings,
-          popupSettings = _a === void 0 ? {} : _a;
+      var _a = this.$props,
+          _b = _a.popupSettings,
+          popupSettings = _b === void 0 ? {} : _b,
+          size = _a.size;
       return (// @ts-ignore function children
         h(Popup, {
           anchor: this._anchor,
@@ -183,13 +205,13 @@ var SplitButton = {
             anchor: this._anchor,
             show: this.computedOpened,
             animate: popupSettings.animate,
-            popupClass: classNames('k-list-container k-reset k-group', popupSettings.popupClass),
+            popupClass: classNames('k-menu-popup', popupSettings.popupClass),
             anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl),
             popupAlign: popupSettings.popupAlign || getPopupAlign(rtl)
           },
           show: this.computedOpened,
           animate: popupSettings.animate,
-          popupClass: classNames('k-list-container k-reset k-group', popupSettings.popupClass),
+          popupClass: classNames('k-menu-popup', popupSettings.popupClass),
           anchorAlign: popupSettings.anchorAlign || getAnchorAlign(rtl),
           popupAlign: popupSettings.popupAlign || getPopupAlign(rtl),
           style: rtl ? {
@@ -197,7 +219,7 @@ var SplitButton = {
           } : undefined
         }, this.v3 ? function () {
           return [h("ul", {
-            "class": "k-list k-reset",
+            "class": "k-group k-menu-group k-reset k-menu-group-" + (kendoThemeMaps.sizeMap[size] || size),
             role: "menu",
             attrs: _this2.v3 ? undefined : {
               role: "menu",
@@ -206,7 +228,7 @@ var SplitButton = {
             id: _this2.guid
           }, [renderChildItems.call(_this2)])];
         } : [h("ul", {
-          "class": "k-list k-reset",
+          "class": "k-group k-menu-group k-reset k-menu-group-" + (kendoThemeMaps.sizeMap[size] || size),
           role: "menu",
           attrs: _this2.v3 ? undefined : {
             role: "menu",
@@ -233,16 +255,12 @@ var SplitButton = {
       }
     }, [// @ts-ignore function children
     h(KendoButton, {
-      onClick: function onClick(event) {
-        return _this.onItemClick(event, -1);
-      },
-      on: this.v3 ? undefined : {
-        "click": function onClick(event) {
-          return _this.onItemClick(event, -1);
-        }
-      },
-      disabled: disabled || undefined,
+      size: this.$props.size,
       attrs: this.v3 ? undefined : {
+        size: this.$props.size,
+        rounded: this.$props.rounded,
+        fillMode: this.$props.fillMode,
+        themeColor: this.$props.themeColor,
         disabled: disabled || undefined,
         tabIndex: tabIndex,
         accessKey: this.$props.accessKey,
@@ -259,6 +277,18 @@ var SplitButton = {
         "aria-owns": this.guid,
         "aria-activedescendant": this.focusedIndex !== undefined && this.focusedIndex >= 0 ? this.guid + "-" + this.focusedIndex : undefined
       },
+      rounded: this.$props.rounded,
+      fillMode: this.$props.fillMode,
+      themeColor: this.$props.themeColor,
+      onClick: function onClick(event) {
+        return _this.onItemClick(event, -1);
+      },
+      on: this.v3 ? undefined : {
+        "click": function onClick(event) {
+          return _this.onItemClick(event, -1);
+        }
+      },
+      disabled: disabled || undefined,
       tabIndex: tabIndex,
       accessKey: this.$props.accessKey,
       "class": this.$props.buttonClass,
@@ -279,8 +309,12 @@ var SplitButton = {
       return [_this3.$props.text];
     } : [_this3.$props.text]), // @ts-ignore
     h(KendoButton, {
-      icon: "arrow-s",
+      size: this.$props.size,
       attrs: this.v3 ? undefined : {
+        size: this.$props.size,
+        rounded: this.$props.rounded,
+        fillMode: this.$props.fillMode,
+        themeColor: this.$props.themeColor,
         icon: "arrow-s",
         disabled: disabled || undefined,
         tabIndex: -1,
@@ -288,6 +322,10 @@ var SplitButton = {
         dir: dir,
         "aria-label": "menu toggling button"
       },
+      rounded: this.$props.rounded,
+      fillMode: this.$props.fillMode,
+      themeColor: this.$props.themeColor,
+      icon: "arrow-s",
       disabled: disabled || undefined,
       tabIndex: -1,
       look: this.$props.look,
@@ -463,5 +501,5 @@ var SplitButton = {
     }
   }
 };
-var SplitButtonVue3 = SplitButton;
-export { SplitButton, SplitButtonVue3 };
+var SplitButton = SplitButtonVue2;
+export { SplitButton, SplitButtonVue2 };

package/dist/es/ListButton/models/ListButtonProps.d.ts

@@ -68,6 +68,75 @@ export interface DropDownButtonProps {
      * Sets the direction of the component.
      */
     dir?: string;
+    /**
+     * Configures the `size` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `shape` of the Button.
+     *
+     * The available options are:
+     * - rectangle
+     * - square
+     * - null—Does not set a shape `className`.
+     *
+     * @default `rectangle`
+     */
+    shape?: null | 'rectangle' | 'square' | string;
+    /**
+     * Configures the `roundness` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the Button.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | string;
+    /**
+     * Configures the `themeColor` of the Button.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     * - null—Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse' | string;
     /**
      * Adds visual weight to the button and makes it primary ([see example]({% slug overview_dropdownbutton %}#toc-basic-usage)).
      */
@@ -163,6 +232,75 @@ export interface SplitButtonProps {
      * Sets the direction of the component.
      */
     dir?: string;
+    /**
+     * Configures the `size` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `shape` of the Button.
+     *
+     * The available options are:
+     * - rectangle
+     * - square
+     * - null—Does not set a shape `className`.
+     *
+     * @default `rectangle`
+     */
+    shape?: null | 'rectangle' | 'square' | string;
+    /**
+     * Configures the `roundness` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the Button.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | string;
+    /**
+     * Configures the `themeColor` of the Button.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - warning
+     * - dark
+     * - light
+     * - inverse
+     * - null—Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'dark' | 'light' | 'inverse' | string;
     /**
      * Fires when the main button is clicked ([see example]({% slug overview_splitbutton %}#toc-events)).
      */

package/dist/es/additionalTypes.ts

@@ -1,3 +1,9 @@
 // @ts-ignore
 import { DefineComponent } from 'vue';
-export { DefineComponent };
+// @ts-ignore
+import * as Vue from 'vue';
+// @ts-ignore
+type Vue2type = Vue.default;
+// @ts-ignore
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

package/dist/es/buttonLook.d.ts

@@ -8,7 +8,6 @@
  *
  * @example
  * ```ts-no-run
- * <k-button :look="'flat'"></k-button>
  * ```
  */
 export declare type ButtonLook = 'default' | 'flat' | 'outline';

package/dist/es/main.d.ts

@@ -1,13 +1,13 @@
-import { Button, ButtonProps } from './Button';
-import { ButtonGroup, ButtonGroupVue3, ButtonGroupProps } from './ButtonGroup';
+import { Button, ButtonVue2, ButtonProps } from './Button';
+import { ButtonGroup, ButtonGroupVue2, ButtonGroupProps } from './ButtonGroup';
 import { ButtonLook } from './buttonLook';
-import { Chip, ChipVue3, ChipProps, ChipHandle } from './Chip/Chip';
-import { ChipList, ChipListVue3, ChipListProps, ChipListHandle } from './Chip/ChipList';
+import { Chip, ChipVue2, ChipProps, ChipHandle } from './Chip/Chip';
+import { ChipList, ChipListVue2, ChipListProps, ChipListHandle } from './Chip/ChipList';
 import { ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipListChangeEvent, ChipListDataChangeEvent } from './models/index';
-import { FloatingActionButton, FloatingActionButtonVue3 } from './FloatingActionButton/FloatingActionButton';
+import { FloatingActionButton, FloatingActionButtonVue2 } from './FloatingActionButton/FloatingActionButton';
 import { FloatingActionButtonHandle } from './FloatingActionButton/interfaces/FloatingActionButtonHandle';
 import { FloatingActionButtonProps } from './FloatingActionButton/interfaces/FloatingActionButtonProps';
-import { FloatingActionButtonItem, FloatingActionButtonItemVue3, FloatingActionButtonItemHandle, FloatingActionButtonItemProps } from './FloatingActionButton/FloatingActionButtonItem';
+import { FloatingActionButtonItem, FloatingActionButtonItemVue2, FloatingActionButtonItemHandle, FloatingActionButtonItemProps } from './FloatingActionButton/FloatingActionButtonItem';
 import { FloatingActionButtonPopupSettings } from './FloatingActionButton/interfaces/FloatingActionButtonPopupSettings';
 export * from './FloatingActionButton/models/events';
 import { FloatingActionButtonAlign } from './FloatingActionButton/models/align';
@@ -16,15 +16,15 @@ import { FloatingActionButtonPositionMode } from './FloatingActionButton/models/
 import { FloatingActionButtonShape } from './FloatingActionButton/models/shape';
 import { FloatingActionButtonSize } from './FloatingActionButton/models/size';
 import { FloatingActionButtonThemeColor } from './FloatingActionButton/models/theme-color';
-import { SplitButton, SplitButtonVue3 } from './ListButton/SplitButton';
-import { DropDownButton, DropDownButtonVue3 } from './ListButton/DropDownButton';
+import { SplitButton, SplitButtonVue2 } from './ListButton/SplitButton';
+import { DropDownButton, DropDownButtonVue2 } from './ListButton/DropDownButton';
 import { DropDownButtonProps } from './ListButton/models/ListButtonProps';
 import { SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent } from './ListButton/models/events';
 import { ButtonItem } from './ListButton/models/ButtonItem';
 import { ButtonItemProps } from './ListButton/ButtonItem';
 import { ButtonsPopupSettings } from './ListButton/models/PopupSettings';
-import { Toolbar, ToolbarVue3, ToolbarProps, ToolbarResizeEvent } from './toolbar/Toolbar';
-import { ToolbarItem, ToolbarItemVue3 } from './toolbar/tools/ToolbarItem';
-import { ToolbarSeparator, ToolbarSeparatorVue3 } from './toolbar/tools/ToolbarSeparator';
-import { ToolbarSpacer, ToolbarSpacerVue3 } from './toolbar/tools/ToolbarSpacer';
-export { Toolbar, ToolbarVue3, ToolbarProps, ToolbarItem, ToolbarItemVue3, ToolbarSeparator, ToolbarSeparatorVue3, ToolbarResizeEvent, ToolbarSpacer, ToolbarSpacerVue3, Button, ButtonProps, ButtonLook, ButtonGroup, ButtonGroupVue3, ButtonGroupProps, SplitButton, SplitButtonVue3, DropDownButton, DropDownButtonVue3, DropDownButtonProps, ButtonItem, ButtonItemProps, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent, ButtonsPopupSettings, Chip, ChipVue3, ChipProps, ChipHandle, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipList, ChipListVue3, ChipListProps, ChipListHandle, ChipListDataChangeEvent, ChipListChangeEvent, FloatingActionButton, FloatingActionButtonVue3, FloatingActionButtonProps, FloatingActionButtonHandle, FloatingActionButtonItem, FloatingActionButtonItemVue3, FloatingActionButtonItemHandle, FloatingActionButtonItemProps, FloatingActionButtonPopupSettings, FloatingActionButtonAlign, FloatingActionButtonAlignOffset, FloatingActionButtonPositionMode, FloatingActionButtonSize, FloatingActionButtonShape, FloatingActionButtonThemeColor };
+import { Toolbar, ToolbarVue2, ToolbarProps, ToolbarResizeEvent } from './toolbar/Toolbar';
+import { ToolbarItem, ToolbarItemVue2 } from './toolbar/tools/ToolbarItem';
+import { ToolbarSeparator, ToolbarSeparatorVue2 } from './toolbar/tools/ToolbarSeparator';
+import { ToolbarSpacer, ToolbarSpacerVue2 } from './toolbar/tools/ToolbarSpacer';
+export { Toolbar, ToolbarVue2, ToolbarProps, ToolbarItem, ToolbarItemVue2, ToolbarSeparator, ToolbarSeparatorVue2, ToolbarResizeEvent, ToolbarSpacer, ToolbarSpacerVue2, Button, ButtonVue2, ButtonProps, ButtonLook, ButtonGroup, ButtonGroupVue2, ButtonGroupProps, SplitButton, SplitButtonVue2, DropDownButton, DropDownButtonVue2, DropDownButtonProps, ButtonItem, ButtonItemProps, SplitButtonFocusEvent, SplitButtonBlurEvent, SplitButtonClickEvent, SplitButtonOpenEvent, SplitButtonCloseEvent, SplitButtonItemClickEvent, DropDownButtonFocusEvent, DropDownButtonBlurEvent, DropDownButtonOpenEvent, DropDownButtonCloseEvent, DropDownButtonItemClickEvent, ButtonsPopupSettings, Chip, ChipVue2, ChipProps, ChipHandle, ChipRemoveEvent, ChipMouseEvent, ChipKeyboardEvent, ChipFocusEvent, ChipList, ChipListVue2, ChipListProps, ChipListHandle, ChipListDataChangeEvent, ChipListChangeEvent, FloatingActionButton, FloatingActionButtonVue2, FloatingActionButtonProps, FloatingActionButtonHandle, FloatingActionButtonItem, FloatingActionButtonItemVue2, FloatingActionButtonItemHandle, FloatingActionButtonItemProps, FloatingActionButtonPopupSettings, FloatingActionButtonAlign, FloatingActionButtonAlignOffset, FloatingActionButtonPositionMode, FloatingActionButtonSize, FloatingActionButtonShape, FloatingActionButtonThemeColor };

package/dist/es/main.js

@@ -1,14 +1,14 @@
-import { Button } from './Button';
-import { ButtonGroup, ButtonGroupVue3 } from './ButtonGroup';
-import { Chip, ChipVue3 } from './Chip/Chip';
-import { ChipList, ChipListVue3 } from './Chip/ChipList';
-import { FloatingActionButton, FloatingActionButtonVue3 } from './FloatingActionButton/FloatingActionButton';
-import { FloatingActionButtonItem, FloatingActionButtonItemVue3 } from './FloatingActionButton/FloatingActionButtonItem';
+import { Button, ButtonVue2 } from './Button';
+import { ButtonGroup, ButtonGroupVue2 } from './ButtonGroup';
+import { Chip, ChipVue2 } from './Chip/Chip';
+import { ChipList, ChipListVue2 } from './Chip/ChipList';
+import { FloatingActionButton, FloatingActionButtonVue2 } from './FloatingActionButton/FloatingActionButton';
+import { FloatingActionButtonItem, FloatingActionButtonItemVue2 } from './FloatingActionButton/FloatingActionButtonItem';
 export * from './FloatingActionButton/models/events';
-import { SplitButton, SplitButtonVue3 } from './ListButton/SplitButton';
-import { DropDownButton, DropDownButtonVue3 } from './ListButton/DropDownButton';
-import { Toolbar, ToolbarVue3 } from './toolbar/Toolbar';
-import { ToolbarItem, ToolbarItemVue3 } from './toolbar/tools/ToolbarItem';
-import { ToolbarSeparator, ToolbarSeparatorVue3 } from './toolbar/tools/ToolbarSeparator';
-import { ToolbarSpacer, ToolbarSpacerVue3 } from './toolbar/tools/ToolbarSpacer';
-export { Toolbar, ToolbarVue3, ToolbarItem, ToolbarItemVue3, ToolbarSeparator, ToolbarSeparatorVue3, ToolbarSpacer, ToolbarSpacerVue3, Button, ButtonGroup, ButtonGroupVue3, SplitButton, SplitButtonVue3, DropDownButton, DropDownButtonVue3, Chip, ChipVue3, ChipList, ChipListVue3, FloatingActionButton, FloatingActionButtonVue3, FloatingActionButtonItem, FloatingActionButtonItemVue3 };
+import { SplitButton, SplitButtonVue2 } from './ListButton/SplitButton';
+import { DropDownButton, DropDownButtonVue2 } from './ListButton/DropDownButton';
+import { Toolbar, ToolbarVue2 } from './toolbar/Toolbar';
+import { ToolbarItem, ToolbarItemVue2 } from './toolbar/tools/ToolbarItem';
+import { ToolbarSeparator, ToolbarSeparatorVue2 } from './toolbar/tools/ToolbarSeparator';
+import { ToolbarSpacer, ToolbarSpacerVue2 } from './toolbar/tools/ToolbarSpacer';
+export { Toolbar, ToolbarVue2, ToolbarItem, ToolbarItemVue2, ToolbarSeparator, ToolbarSeparatorVue2, ToolbarSpacer, ToolbarSpacerVue2, Button, ButtonVue2, ButtonGroup, ButtonGroupVue2, SplitButton, SplitButtonVue2, DropDownButton, DropDownButtonVue2, Chip, ChipVue2, ChipList, ChipListVue2, FloatingActionButton, FloatingActionButtonVue2, FloatingActionButtonItem, FloatingActionButtonItemVue2 };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-buttons',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1641561106,
+    publishDate: 1642158855,
     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/toolbar/Toolbar.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+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;
@@ -100,8 +99,8 @@ export interface ToolbarData {
 /**
  * @hidden
  */
-export interface ToolbarAll extends Vue, ToolbarMethods, ToolbarData, ToolbarComputed, ToolbarState {
+export interface ToolbarAll extends Vue2type, ToolbarMethods, ToolbarData, ToolbarComputed, ToolbarState {
 }
-declare let Toolbar: ComponentOptions<ToolbarAll, DefaultData<ToolbarData>, DefaultMethods<ToolbarAll>, ToolbarComputed, RecordPropsDefinition<ToolbarProps>>;
-declare const ToolbarVue3: DefineComponent<ToolbarProps, any, ToolbarData, ToolbarComputed, ToolbarMethods, {}, {}, {}, string, ToolbarProps, ToolbarProps, {}>;
-export { Toolbar, ToolbarVue3 };
+declare let ToolbarVue2: ComponentOptions<ToolbarAll, DefaultData<ToolbarData>, DefaultMethods<ToolbarAll>, ToolbarComputed, RecordPropsDefinition<ToolbarProps>>;
+declare const Toolbar: DefineComponent<ToolbarProps, any, ToolbarData, ToolbarComputed, ToolbarMethods, {}, {}, {}, string, ToolbarProps, ToolbarProps, {}>;
+export { Toolbar, ToolbarVue2 };

package/dist/es/toolbar/Toolbar.js

@@ -22,7 +22,7 @@ import { Keys, validatePackage, getDefaultSlots } from '@progress/kendo-vue-comm
 import { toolbarButtons } from './../util';
 import { packageMetadata } from '../package-metadata'; // tslint:enable:max-line-length
 
-var Toolbar = {
+var ToolbarVue2 = {
   name: 'KendoToolbar',
   props: {
     tabIndex: {
@@ -30,11 +30,18 @@ var Toolbar = {
       default: 0
     },
     dir: String,
-    keyboardNavigation: Boolean,
-    buttons: Array
+    keyboardNavigation: {
+      type: Boolean,
+      default: true
+    },
+    buttons: {
+      type: Array,
+      default: function _default() {
+        return undefined;
+      }
+    }
   },
   created: function created() {
-    this.element = null;
     this.offsetHeight = 0;
     this.offsetWidth = 0;
     this.currentButtons = [];
@@ -50,7 +57,7 @@ var Toolbar = {
   },
   mounted: function mounted() {
     window.addEventListener('resize', this.onWindowResize);
-    var element = this.element;
+    var element = this.$el;
 
     if (element) {
       this.offsetWidth = element.offsetWidth;
@@ -63,7 +70,7 @@ var Toolbar = {
     }
   },
   updated: function updated() {
-    var element = this.element;
+    var element = this.$el;
 
     if (!element || this.$props.keyboardNavigation === false) {
       return;
@@ -110,7 +117,7 @@ var Toolbar = {
       return this.$el ? Array.from(this.$el.querySelectorAll(this.selectors.join(','))) : [];
     },
     focusedIndex: function focusedIndex() {
-      var focused = this.element && this.element.querySelector(this.focusedSelector);
+      var focused = this.$el && this.$el.querySelector(this.focusedSelector);
       return Math.max(0, this.currentButtons.findIndex(function (e) {
         return e === focused;
       }));
@@ -183,5 +190,5 @@ var Toolbar = {
     }
   }
 };
-var ToolbarVue3 = Toolbar;
-export { Toolbar, ToolbarVue3 };
+var Toolbar = ToolbarVue2;
+export { Toolbar, ToolbarVue2 };

package/dist/es/toolbar/tools/ToolbarItem.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+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;
@@ -30,8 +29,8 @@ export interface ToolbarItemData {
 /**
  * @hidden
  */
-export interface ToolbarItemAll extends Vue, ToolbarItemMethods, ToolbarItemData, ToolbarItemComputed, ToolbarItemState {
+export interface ToolbarItemAll extends Vue2type, ToolbarItemMethods, ToolbarItemData, ToolbarItemComputed, ToolbarItemState {
 }
-declare let ToolbarItem: ComponentOptions<ToolbarItemAll, DefaultData<ToolbarItemData>, DefaultMethods<ToolbarItemAll>, ToolbarItemComputed, RecordPropsDefinition<{}>>;
-declare const ToolbarItemVue3: DefineComponent<{}, any, ToolbarItemData, ToolbarItemComputed, ToolbarItemMethods, {}, {}, {}, string, {}, {}, {}>;
-export { ToolbarItem, ToolbarItemVue3 };
+declare let ToolbarItemVue2: ComponentOptions<ToolbarItemAll, DefaultData<ToolbarItemData>, DefaultMethods<ToolbarItemAll>, ToolbarItemComputed, RecordPropsDefinition<{}>>;
+declare const ToolbarItem: DefineComponent<{}, any, ToolbarItemData, ToolbarItemComputed, ToolbarItemMethods, {}, {}, {}, string, {}, {}, {}>;
+export { ToolbarItem, ToolbarItemVue2 };

package/dist/es/toolbar/tools/ToolbarItem.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 import { getDefaultSlots } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
 
-var ToolbarItem = {
+var ToolbarItemVue2 = {
   name: 'KendoToolbarItem',
   methods: {
     element: function element() {
@@ -24,5 +24,5 @@ var ToolbarItem = {
     return h("span", [defaultSlot]);
   }
 };
-var ToolbarItemVue3 = ToolbarItem;
-export { ToolbarItem, ToolbarItemVue3 };
+var ToolbarItem = ToolbarItemVue2;
+export { ToolbarItem, ToolbarItemVue2 };

package/dist/es/toolbar/tools/ToolbarSeparator.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+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;
@@ -7,6 +6,6 @@ declare type DefaultMethods<V> = {
 /**
  * Represents the Kendo UI for Vue Toolbar Separator component.
  */
-declare let ToolbarSeparator: ComponentOptions<Vue, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<{}>>;
-declare const ToolbarSeparatorVue3: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
-export { ToolbarSeparator, ToolbarSeparatorVue3 };
+declare let ToolbarSeparatorVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<{}>>;
+declare const ToolbarSeparator: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
+export { ToolbarSeparator, ToolbarSeparatorVue2 };

package/dist/es/toolbar/tools/ToolbarSeparator.js

@@ -7,7 +7,7 @@ import { ToolbarItem } from './ToolbarItem';
  * Represents the Kendo UI for Vue Toolbar Separator component.
  */
 
-var ToolbarSeparator = {
+var ToolbarSeparatorVue2 = {
   name: 'KendoToolbarItem',
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -25,5 +25,5 @@ var ToolbarSeparator = {
     );
   }
 };
-var ToolbarSeparatorVue3 = ToolbarSeparator;
-export { ToolbarSeparator, ToolbarSeparatorVue3 };
+var ToolbarSeparator = ToolbarSeparatorVue2;
+export { ToolbarSeparator, ToolbarSeparatorVue2 };

package/dist/es/toolbar/tools/ToolbarSpacer.d.ts

@@ -1,5 +1,4 @@
-import { DefineComponent } from '../../additionalTypes';
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+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;
@@ -7,6 +6,6 @@ declare type DefaultMethods<V> = {
 /**
  * Represents the Kendo UI for Vue Toolbar Separator component.
  */
-declare let ToolbarSpacer: ComponentOptions<Vue, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<{}>>;
-declare const ToolbarSpacerVue3: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
-export { ToolbarSpacer, ToolbarSpacerVue3 };
+declare let ToolbarSpacerVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<{}>>;
+declare const ToolbarSpacer: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
+export { ToolbarSpacer, ToolbarSpacerVue2 };

package/dist/es/toolbar/tools/ToolbarSpacer.js

@@ -6,7 +6,7 @@ var gh = allVue.h;
  * Represents the Kendo UI for Vue Toolbar Separator component.
  */
 
-var ToolbarSpacer = {
+var ToolbarSpacerVue2 = {
   name: 'KendoToolbarItem',
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -22,5 +22,5 @@ var ToolbarSpacer = {
     });
   }
 };
-var ToolbarSpacerVue3 = ToolbarSpacer;
-export { ToolbarSpacer, ToolbarSpacerVue3 };
+var ToolbarSpacer = ToolbarSpacerVue2;
+export { ToolbarSpacer, ToolbarSpacerVue2 };