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

package/dist/es/Chip/ChipList.js

@@ -19,7 +19,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
-import { getTabIndex, classNames, getListeners, templateRendering, getTemplate, validatePackage } from '@progress/kendo-vue-common';
+import { getTabIndex, classNames, getListeners, templateRendering, getTemplate, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { selectionReducer } from './selection-reducer';
 import { focusReducer } from './focus-reducer';
 import { dataReducer } from './data-reducer';
@@ -33,7 +33,7 @@ import { packageMetadata } from '../package-metadata';
  * Represents the default `ChipList` component.
  */
 
-var ChipList = {
+var ChipListVue2 = {
   name: 'KendoVueChipList',
   props: {
     id: String,
@@ -52,6 +52,21 @@ var ChipList = {
         return null;
       }
     },
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    rounded: {
+      type: String,
+      default: 'medium'
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'flat', 'outline', 'solid'].includes(value);
+      }
+    },
     selection: {
       type: String,
       default: function _default() {
@@ -184,9 +199,12 @@ var ChipList = {
     };
   },
   render: function render(createElement) {
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
+    var size = this.$props.size;
     return h("div", {
       ref: this.v3 ? function (el) {
         _this.chipListRef = el;
@@ -204,12 +222,7 @@ var ChipList = {
       dir: this.currentDir,
       style: this.$props.style,
       tabIndex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
-      "class": classNames('k-chip-list', {
-        'k-rtl': this.currentDir === 'rtl',
-        'k-selection-single': this.$props.selection === 'single',
-        'k-selection-multiple': this.$props.selection === 'multiple',
-        'k-state-disabled': this.$props.disabled
-      }, this.$props.className),
+      "class": classNames('k-chip-list', (_a = {}, _a["k-chip-list-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-rtl'] = this.currentDir === 'rtl', _a['k-selection-single'] = this.$props.selection === 'single', _a['k-selection-multiple'] = this.$props.selection === 'multiple', _a['k-disabled'] = this.$props.disabled, _a)),
       "aria-labelledby": this.$props.ariaLabelledBy,
       "aria-describedby": this.$props.ariaDescribedBy
     }, [this.computedDataItems.map(function (item) {
@@ -221,20 +234,33 @@ var ChipList = {
           role: 'option',
           dataItem: item,
           text: item[this.$props.textField],
-          value: item[this.$props.valueField]
+          value: item[this.$props.valueField],
+          size: this.$props.size,
+          rounded: this.$props.rounded,
+          fillMode: this.$props.fillMode
         },
         dataItem: item,
         key: item[this.$props.valueField],
         text: item[this.$props.textField],
-        value: item[this.$props.valueField]
+        value: item[this.$props.valueField],
+        size: this.$props.size,
+        rounded: this.$props.rounded,
+        fillMode: this.$props.fillMode
       });
       return getTemplate.call(this, {
         h: h,
         template: chipTemplate,
-        defaultRendering: chipDefaultRendering
+        defaultRendering: chipDefaultRendering,
+        additionalProps: {
+          dataItem: item,
+          key: item[this.$props.valueField],
+          text: item[this.$props.textField],
+          value: item[this.$props.valueField],
+          size: this.$props.size
+        }
       });
     }, this)]);
   }
 };
-var ChipListVue3 = ChipList;
-export { ChipList, ChipListVue3 };
+var ChipList = ChipListVue2;
+export { ChipList, ChipListVue2 };

package/dist/es/FloatingActionButton/FloatingActionButton.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;
@@ -37,7 +36,7 @@ export interface FloatingActionButtonComputed {
 /**
  * @hidden
  */
-export interface FloatingActionButtonAll extends FloatingActionButtonMethods, FloatingActionButtonState, FloatingActionButtonData, FloatingActionButtonComputed, Vue {
+export interface FloatingActionButtonAll extends FloatingActionButtonMethods, FloatingActionButtonState, FloatingActionButtonData, FloatingActionButtonComputed, Vue2type {
 }
 /**
  * @hidden
@@ -45,6 +44,6 @@ export interface FloatingActionButtonAll extends FloatingActionButtonMethods, Fl
 /**
  * Represents the default `FloatingActionButton` component.
  */
-declare let FloatingActionButton: ComponentOptions<Vue, DefaultData<FloatingActionButtonData>, DefaultMethods<FloatingActionButtonAll>, FloatingActionButtonComputed, RecordPropsDefinition<FloatingActionButtonProps>>;
-declare const FloatingActionButtonVue3: DefineComponent<FloatingActionButtonProps, any, FloatingActionButtonData, FloatingActionButtonComputed, FloatingActionButtonMethods, {}, {}, {}, string, FloatingActionButtonProps, FloatingActionButtonProps, {}>;
-export { FloatingActionButton, FloatingActionButtonVue3 };
+declare let FloatingActionButtonVue2: ComponentOptions<Vue2type, DefaultData<FloatingActionButtonData>, DefaultMethods<FloatingActionButtonAll>, FloatingActionButtonComputed, RecordPropsDefinition<FloatingActionButtonProps>>;
+declare const FloatingActionButton: DefineComponent<FloatingActionButtonProps, any, FloatingActionButtonData, FloatingActionButtonComputed, FloatingActionButtonMethods, {}, {}, {}, string, FloatingActionButtonProps, FloatingActionButtonProps, {}>;
+export { FloatingActionButton, FloatingActionButtonVue2 };

package/dist/es/FloatingActionButton/FloatingActionButton.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
-import { classNames, guid, Keys, getTabIndex, templateRendering, getListeners, validatePackage, canUseDOM } from '@progress/kendo-vue-common';
+import { classNames, guid, Keys, getTabIndex, templateRendering, getListeners, validatePackage, canUseDOM, kendoThemeMaps } from '@progress/kendo-vue-common';
 import { FloatingActionButtonItem } from './FloatingActionButtonItem';
 import { packageMetadata } from '../package-metadata';
 import { position, getAnchorAlign, getPopupAlign, getTextDirectionClass } from './utils';
@@ -16,7 +16,7 @@ import { Popup } from '@progress/kendo-vue-popup';
  * Represents the default `FloatingActionButton` component.
  */
 
-var FloatingActionButton = {
+var FloatingActionButtonVue2 = {
   name: 'KendoVueFloatingActionButton',
   props: {
     id: String,
@@ -61,6 +61,17 @@ var FloatingActionButton = {
         return 'pill';
       }
     },
+    rounded: {
+      type: String,
+      default: 'full'
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'flat', 'link', 'outline', 'solid'].includes(value);
+      }
+    },
     size: {
       type: String,
       default: function _default() {
@@ -122,13 +133,17 @@ var FloatingActionButton = {
   },
   computed: {
     buttonClassNames: function buttonClassNames() {
-      return classNames('k-fab', "k-fab-" + this.$props.themeColor, "k-fab-" + this.$props.shape, {
-        'k-fab-sm': this.$props.size === 'small',
-        'k-fab-md': this.$props.size === 'medium',
-        'k-fab-lg': this.$props.size === 'large',
-        'k-state-disabled': this.$props.disabled,
-        'k-state-focus': this.currentFocused
-      }, "k-" + this.$props.align.vertical + "-" + this.$props.align.horizontal);
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          icon = _b.icon,
+          themeColor = _b.themeColor,
+          fillMode = _b.fillMode,
+          rounded = _b.rounded;
+      return _a = {
+        'k-fab': true
+      }, _a["k-fab-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a["k-fab-" + fillMode] = fillMode, _a["k-fab-" + fillMode + "-" + themeColor] = fillMode && themeColor, _a['k-icon-button'] = icon, _a['k-disabled'] = this.$props.disabled, _a['k-focus'] = this.currentFocused, _a["k-" + this.$props.align.vertical + "-" + this.$props.align.horizontal] = true, _a;
     },
     computedOpened: function computedOpened() {
       return this.$props.opened === undefined ? this.currentOpened : this.$props.opened;
@@ -479,5 +494,5 @@ var FloatingActionButton = {
     }, [fabItems.call(_this2)])])]);
   }
 };
-var FloatingActionButtonVue3 = FloatingActionButton;
-export { FloatingActionButton, FloatingActionButtonVue3 };
+var FloatingActionButton = FloatingActionButtonVue2;
+export { FloatingActionButton, FloatingActionButtonVue2 };

package/dist/es/FloatingActionButton/FloatingActionButtonItem.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;
@@ -106,12 +105,12 @@ export interface FloatingActionButtonItemComputed {
 /**
  * @hidden
  */
-export interface FloatingActionButtonItemAll extends FloatingActionButtonItemMethods, FloatingActionButtonItemState, FloatingActionButtonItemData, FloatingActionButtonItemComputed, Vue {
+export interface FloatingActionButtonItemAll extends FloatingActionButtonItemMethods, FloatingActionButtonItemState, FloatingActionButtonItemData, FloatingActionButtonItemComputed, Vue2type {
 }
 /**
  * Represents the [Kendo UI for Vue FloatingActionButtonItem component]({% slug overview_floatingactionbutton %}).
  *
  */
-declare let FloatingActionButtonItem: ComponentOptions<Vue, DefaultData<FloatingActionButtonItemData>, DefaultMethods<FloatingActionButtonItemAll>, FloatingActionButtonItemComputed, RecordPropsDefinition<FloatingActionButtonItemProps>>;
-declare const FloatingActionButtonItemVue3: DefineComponent<FloatingActionButtonItemProps, any, FloatingActionButtonItemData, FloatingActionButtonItemComputed, FloatingActionButtonItemMethods, {}, {}, {}, string, FloatingActionButtonItemProps, FloatingActionButtonItemProps, {}>;
-export { FloatingActionButtonItem, FloatingActionButtonItemVue3 };
+declare let FloatingActionButtonItemVue2: ComponentOptions<Vue2type, DefaultData<FloatingActionButtonItemData>, DefaultMethods<FloatingActionButtonItemAll>, FloatingActionButtonItemComputed, RecordPropsDefinition<FloatingActionButtonItemProps>>;
+declare const FloatingActionButtonItem: DefineComponent<FloatingActionButtonItemProps, any, FloatingActionButtonItemData, FloatingActionButtonItemComputed, FloatingActionButtonItemMethods, {}, {}, {}, string, FloatingActionButtonItemProps, FloatingActionButtonItemProps, {}>;
+export { FloatingActionButtonItem, FloatingActionButtonItemVue2 };

package/dist/es/FloatingActionButton/FloatingActionButtonItem.js

@@ -9,7 +9,7 @@ import { classNames, getTabIndex, getTemplate } from '@progress/kendo-vue-common
  *
  */
 
-var FloatingActionButtonItem = {
+var FloatingActionButtonItemVue2 = {
   name: 'KendoVueFloatingActionButtonItem',
   props: {
     disabled: Boolean,
@@ -119,5 +119,5 @@ var FloatingActionButtonItem = {
     return item;
   }
 };
-var FloatingActionButtonItemVue3 = FloatingActionButtonItem;
-export { FloatingActionButtonItem, FloatingActionButtonItemVue3 };
+var FloatingActionButtonItem = FloatingActionButtonItemVue2;
+export { FloatingActionButtonItem, FloatingActionButtonItemVue2 };

package/dist/es/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts

@@ -3,7 +3,6 @@ import { FloatingActionButtonAlign } from '../models/align';
 import { FloatingActionButtonAlignOffset } from '../models/align-offset';
 import { FloatingActionButtonEvent, FloatingActionButtonItemEvent } from '../models/events';
 import { FloatingActionButtonPositionMode } from '../models/position-mode';
-import { FloatingActionButtonShape } from '../models/shape';
 import { FloatingActionButtonSize } from '../models/size';
 import { FloatingActionButtonThemeColor } from '../models/theme-color';
 /**
@@ -114,7 +113,34 @@ export interface FloatingActionButtonProps extends Omit<any, 'onBlur' | 'onFocus
      * * `square`&mdash;Applies square shape on the FloatingActionButton.
      *
      */
-    shape?: FloatingActionButtonShape;
+    shape?: null | 'rectangle' | 'square' | string;
+    /**
+     * Configures the `roundness` of the Floating Action Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the Floating Action Button.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | string;
     /**
      * Specifies the size of the Floating Action Button
      * [see example]({% slug appearance_floatingactionbutton %}).

package/dist/es/FloatingActionButton/models/shape.d.ts

@@ -2,7 +2,7 @@
  * Specifies the shape of the Floating Action Button.
  *
  * The possible values are:
- * * `pill`(Default)—Applies border radius equal to half of the height of the FloatingActionButton.
+ * * `full`(Default)—Applies border radius equal to half of the height of the FloatingActionButton.
  * If the Floating Action Button contains only icon, the shape will be circle.
  * * `circle`—Applies circle shape on the FloatingActionButton.
  * * `rectangle`—Applies no border radius on the FloatingActionButton.

package/dist/es/ListButton/ButtonItem.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;
@@ -46,8 +45,8 @@ export interface ButtonItemData {
 /**
  * @hidden
  */
-export interface ButtonItemAll extends Vue, ButtonItemMethods, ButtonItemData, ButtonItemComputed, ButtonItemState {
+export interface ButtonItemAll extends Vue2type, ButtonItemMethods, ButtonItemData, ButtonItemComputed, ButtonItemState {
 }
-declare let ButtonItem: ComponentOptions<ButtonItemAll, DefaultData<ButtonItemData>, DefaultMethods<ButtonItemAll>, ButtonItemComputed, RecordPropsDefinition<ButtonItemProps>>;
-declare const ButtonItemVue3: DefineComponent<ButtonItemProps, any, ButtonItemData, ButtonItemComputed, ButtonItemMethods, {}, {}, {}, string, ButtonItemProps, ButtonItemProps, {}>;
-export { ButtonItem, ButtonItemVue3 };
+declare let ButtonItemVue2: ComponentOptions<ButtonItemAll, DefaultData<ButtonItemData>, DefaultMethods<ButtonItemAll>, ButtonItemComputed, RecordPropsDefinition<ButtonItemProps>>;
+declare const ButtonItem: DefineComponent<ButtonItemProps, any, ButtonItemData, ButtonItemComputed, ButtonItemMethods, {}, {}, {}, string, ButtonItemProps, ButtonItemProps, {}>;
+export { ButtonItem, ButtonItemVue2 };

package/dist/es/ListButton/ButtonItem.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 import { getTemplate } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
 
-var ButtonItem = {
+var ButtonItemVue2 = {
   name: 'KendoButtonItem',
   // @ts-ignore
   emits: {
@@ -22,14 +22,19 @@ var ButtonItem = {
   },
   computed: {
     wrapperClass: function wrapperClass() {
+      return {
+        'k-item': true
+      };
+    },
+    innerClass: function innerClass() {
       var _a = this.$props,
           dataItem = _a.dataItem,
           focused = _a.focused;
       return {
-        'k-item': true,
-        'k-state-focused': focused,
-        'k-state-selected': dataItem.selected,
-        'k-state-disabled': dataItem.disabled
+        'k-link k-menu-link': true,
+        'k-focus': focused,
+        'k-selected': dataItem.selected,
+        'k-disabled': dataItem.disabled
       };
     }
   },
@@ -61,15 +66,21 @@ var ButtonItem = {
           index = _a.index;
       var text = dataItem.text !== undefined ? dataItem.text : textField ? dataItem[textField] : dataItem;
       var iconClass = dataItem.icon ? "k-icon k-i-" + dataItem.icon : dataItem.iconClass;
-      var itemContent = [iconClass && h("span", {
+      var itemContent = h("span", {
+        tabIndex: -1,
+        attrs: this.v3 ? undefined : {
+          tabIndex: -1
+        },
+        "class": this.innerClass,
+        key: "icon"
+      }, [iconClass && h("span", {
         "class": iconClass,
         role: "presentation",
         attrs: this.v3 ? undefined : {
           role: "presentation"
-        },
-        key: "icon"
+        }
       }), dataItem.imageUrl && h("img", {
-        "class": "k-image",
+        "class": "k-icon",
         alt: "",
         attrs: this.v3 ? undefined : {
           alt: "",
@@ -79,7 +90,9 @@ var ButtonItem = {
         src: dataItem.imageUrl,
         role: "presentation",
         key: "image"
-      }), text];
+      }), text && h("span", {
+        "class": "k-menu-link-text"
+      }, [text])]);
       return getTemplate.call(this, {
         h: h,
         template: this.$props.dataItem.render || render,
@@ -113,5 +126,5 @@ var ButtonItem = {
     return item;
   }
 };
-var ButtonItemVue3 = ButtonItem;
-export { ButtonItem, ButtonItemVue3 };
+var ButtonItem = ButtonItemVue2;
+export { ButtonItem, ButtonItemVue2 };

package/dist/es/ListButton/DropDownButton.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;
@@ -54,8 +53,8 @@ export interface DropDownButtonState {
 /**
  * @hidden
  */
-export interface DropDownButtonAll extends Vue, DropDownButtonMethods, DropDownButtonData, DropDownButtonComputed, DropDownButtonState {
+export interface DropDownButtonAll extends Vue2type, DropDownButtonMethods, DropDownButtonData, DropDownButtonComputed, DropDownButtonState {
 }
-declare let DropDownButton: ComponentOptions<DropDownButtonAll, DefaultData<DropDownButtonData>, DefaultMethods<DropDownButtonAll>, DropDownButtonComputed, RecordPropsDefinition<DropDownButtonProps>>;
-declare const DropDownButtonVue3: DefineComponent<DropDownButtonProps, any, DropDownButtonData, DropDownButtonComputed, DropDownButtonMethods, {}, {}, {}, string, DropDownButtonProps, DropDownButtonProps, {}>;
-export { DropDownButton, DropDownButtonVue3 };
+declare let DropDownButtonVue2: ComponentOptions<DropDownButtonAll, DefaultData<DropDownButtonData>, DefaultMethods<DropDownButtonAll>, DropDownButtonComputed, RecordPropsDefinition<DropDownButtonProps>>;
+declare const DropDownButton: DefineComponent<DropDownButtonProps, any, DropDownButtonData, DropDownButtonComputed, DropDownButtonMethods, {}, {}, {}, string, DropDownButtonProps, DropDownButtonProps, {}>;
+export { DropDownButton, DropDownButtonVue2 };

package/dist/es/ListButton/DropDownButton.js

@@ -20,7 +20,7 @@ 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 navigation from './utils/navigation';
 import { ButtonItem } from './ButtonItem';
 import { Popup } from '@progress/kendo-vue-popup';
@@ -28,7 +28,7 @@ import { getAnchorAlign, getPopupAlign } from './utils/popup';
 import { validatePackage, templateRendering, getListeners, canUseDOM } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata'; // tslint:enable:max-line-length
 
-var DropDownButton = {
+var DropDownButtonVue2 = {
   name: 'KendoDropDownButton',
   // @ts-ignore
   emits: {
@@ -57,6 +57,36 @@ var DropDownButton = {
     popupSettings: Object,
     itemRender: [String, Object, Function],
     item: Function,
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    shape: {
+      type: String,
+      default: 'rectangle',
+      validator: function validator(value) {
+        return [null, 'rectangle', 'square'].includes(value);
+      }
+    },
+    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
@@ -105,9 +135,8 @@ var DropDownButton = {
     },
     wrapperClass: function wrapperClass() {
       return {
-        'k-widget': true,
         'k-dropdown-button': true,
-        'k-state-focused': this.focused
+        'k-focus': this.focused
       };
     }
   },
@@ -142,6 +171,7 @@ var DropDownButton = {
         }) : dataItem;
         return (// @ts-ignore
           h(ButtonItem, {
+            "class": "k-menu-item",
             dataItem: currentDataItem,
             attrs: this.v3 ? undefined : {
               dataItem: currentDataItem,
@@ -173,8 +203,10 @@ var DropDownButton = {
     var renderPopup = function renderPopup() {
       var _this = 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,
@@ -182,13 +214,13 @@ var DropDownButton = {
             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 ? {
@@ -196,7 +228,7 @@ var DropDownButton = {
           } : 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: _this.v3 ? undefined : {
               role: "menu",
@@ -205,7 +237,7 @@ var DropDownButton = {
             id: _this.guid
           }, [renderChildItems.call(_this)])];
         } : [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: _this.v3 ? undefined : {
             role: "menu",
@@ -232,14 +264,13 @@ var DropDownButton = {
       }
     }, [// @ts-ignore function children
     h(KendoButton, {
-      onClick: this.onClickMainButton,
-      on: this.v3 ? undefined : {
-        "click": this.onClickMainButton,
-        "mousedown": this.mouseDown
-      },
-      onMousedown: this.mouseDown,
-      disabled: disabled || undefined,
+      size: this.$props.size,
       attrs: this.v3 ? undefined : {
+        size: this.$props.size,
+        shape: this.$props.shape,
+        rounded: this.$props.rounded,
+        fillMode: this.$props.fillMode,
+        themeColor: this.$props.themeColor,
         disabled: disabled || undefined,
         tabIndex: tabIndex,
         accessKey: this.$props.accessKey,
@@ -257,6 +288,17 @@ var DropDownButton = {
         "aria-owns": this.guid,
         "aria-activedescendant": this.focusedIndex !== undefined && this.focusedIndex >= 0 ? this.guid + "-" + this.focusedIndex : undefined
       },
+      shape: this.$props.shape,
+      rounded: this.$props.rounded,
+      fillMode: this.$props.fillMode,
+      themeColor: this.$props.themeColor,
+      onClick: this.onClickMainButton,
+      on: this.v3 ? undefined : {
+        "click": this.onClickMainButton,
+        "mousedown": this.mouseDown
+      },
+      onMousedown: this.mouseDown,
+      disabled: disabled || undefined,
       tabIndex: tabIndex,
       accessKey: this.$props.accessKey,
       icon: this.$props.icon,
@@ -398,5 +440,5 @@ var DropDownButton = {
     }
   }
 };
-var DropDownButtonVue3 = DropDownButton;
-export { DropDownButton, DropDownButtonVue3 };
+var DropDownButton = DropDownButtonVue2;
+export { DropDownButton, DropDownButtonVue2 };

package/dist/es/ListButton/SplitButton.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;
@@ -55,8 +54,8 @@ export interface SplitButtonState {
 /**
  * @hidden
  */
-export interface SplitButtonAll extends Vue, SplitButtonMethods, SplitButtonData, SplitButtonComputed, SplitButtonState {
+export interface SplitButtonAll extends Vue2type, SplitButtonMethods, SplitButtonData, SplitButtonComputed, SplitButtonState {
 }
-declare let SplitButton: ComponentOptions<SplitButtonAll, DefaultData<SplitButtonData>, DefaultMethods<SplitButtonAll>, SplitButtonComputed, RecordPropsDefinition<SplitButtonProps>>;
-declare const SplitButtonVue3: DefineComponent<SplitButtonProps, any, SplitButtonData, SplitButtonComputed, SplitButtonMethods, {}, {}, {}, string, SplitButtonProps, SplitButtonProps, {}>;
-export { SplitButton, SplitButtonVue3 };
+declare let SplitButtonVue2: ComponentOptions<SplitButtonAll, DefaultData<SplitButtonData>, DefaultMethods<SplitButtonAll>, SplitButtonComputed, RecordPropsDefinition<SplitButtonProps>>;
+declare const SplitButton: DefineComponent<SplitButtonProps, any, SplitButtonData, SplitButtonComputed, SplitButtonMethods, {}, {}, {}, string, SplitButtonProps, SplitButtonProps, {}>;
+export { SplitButton, SplitButtonVue2 };