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

package/dist/es/MultiSelect/MultiSelect.js

@@ -33,7 +33,9 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
-import { classNames, Keys, guid, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { classNames, Keys, guid, templateRendering, getListeners, getTemplate, kendoThemeMaps } from '@progress/kendo-vue-common';
+var sizeMap = kendoThemeMaps.sizeMap,
+    roundedMap = kendoThemeMaps.roundedMap;
 import { ListContainer } from '../common/ListContainer';
 import { List } from '../common/List';
 import { TagList } from './TagList';
@@ -72,7 +74,7 @@ var FocusedItemType;
  */
 
 
-var MultiSelect = {
+var MultiSelectVue2 = {
   name: 'KendoMultiSelect',
   model: {
     event: 'changemodel'
@@ -150,7 +152,35 @@ var MultiSelect = {
       default: undefined
     },
     ariaLabelledBy: String,
-    ariaDescribedBy: String
+    ariaDescribedBy: String,
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    tagsRounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    }
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -169,10 +199,10 @@ var MultiSelect = {
         var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
         var editorValue = this.currentText || getItemValue(this.computedValue()[0], this.$props.textField);
         return {
-          'k-textbox-container': true,
-          'k-state-focused': this.currentFocused,
+          'k-floating-label-container': true,
+          'k-focus': this.currentFocused,
           'k-state-empty': !(editorValue && editorValue !== 0),
-          'k-state-invalid': !isValid && isValid !== undefined,
+          'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
@@ -230,7 +260,6 @@ var MultiSelect = {
     }, this.$props.popupSettings);
     var list = this.$refs.list;
     var scrollElement = this.$refs.scrollElement;
-    var scroller = this.$refs.scroller;
 
     if (list) {
       // @ts-ignore
@@ -243,8 +272,9 @@ var MultiSelect = {
       this.base.vs.scrollElement = scrollElement;
     }
 
-    if (scroller) {
-      this.base.vs.scrollerRef(scroller);
+    if (list && this.dataItems.length) {
+      // @ts-ignore
+      this.base.vs.scrollerRef(list.$el);
     }
 
     if (!popupSettings.animate && closing) {
@@ -279,7 +309,7 @@ var MultiSelect = {
     this.hasMounted = true; // @ts-ignore
 
     this.input = this.v3 ? this.inputRef.input : this.$refs.input.input;
-    this.base.wrapper = this.v3 ? this.baseWrapperRef : this.$refs.baseWrapper;
+    this.base.wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this.anchor];
     this.element = this.v3 ? this.kendoAnchorRef : this.$refs[this.anchor];
     this.base.didMount();
     this.searchBarRef();
@@ -823,19 +853,25 @@ var MultiSelect = {
     }
   },
   render: function render(createElement) {
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
-    var _a = this.$props,
-        style = _a.style,
-        label = _a.label,
-        dir = _a.dir,
-        disabled = _a.disabled,
-        tags = _a.tags,
-        textField = _a.textField,
-        dataItemKey = _a.dataItemKey,
-        virtual = _a.virtual,
-        loading = _a.loading;
+    var _b = this.$props,
+        style = _b.style,
+        label = _b.label,
+        dir = _b.dir,
+        disabled = _b.disabled,
+        tags = _b.tags,
+        textField = _b.textField,
+        dataItemKey = _b.dataItemKey,
+        virtual = _b.virtual,
+        loading = _b.loading,
+        size = _b.size,
+        fillMode = _b.fillMode,
+        rounded = _b.rounded,
+        tagsRounded = _b.tagsRounded;
     var focused = this.currentFocused;
     var popupSettings = Object.assign({}, {
       animate: true,
@@ -950,6 +986,8 @@ var MultiSelect = {
     };
 
     var renderList = function renderList() {
+      var _this2 = this;
+
       var _a = this.$props.dataItems,
           dataItems = _a === void 0 ? [] : _a;
       var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
@@ -958,7 +996,7 @@ var MultiSelect = {
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var focusedIndex = this.getFocusedState().focusedIndex;
       var translate = "translateY(" + vs.translate + "px)";
-      return (// @ts-ignore
+      return (// @ts-ignore  function children
         h(List, {
           id: this.base.listBoxId,
           attrs: this.v3 ? undefined : {
@@ -970,13 +1008,10 @@ var MultiSelect = {
             textField: textField,
             valueField: dataItemKey,
             optionsGuid: this.base.guid,
-            wrapperStyle: vs.enabled ? {
-              float: 'left',
-              width: '100%'
-            } : {
+            wrapperStyle: {
               maxHeight: popupSettings.height
             },
-            wrapperCssClass: vs.enabled ? undefined : 'k-list-scroller',
+            wrapperCssClass: 'k-list-content',
             listStyle: vs.enabled ? {
               transform: translate
             } : undefined,
@@ -992,13 +1027,10 @@ var MultiSelect = {
           valueField: dataItemKey,
           optionsGuid: this.base.guid,
           ref: 'list',
-          wrapperStyle: vs.enabled ? {
-            float: 'left',
-            width: '100%'
-          } : {
+          wrapperStyle: {
             maxHeight: popupSettings.height
           },
-          wrapperCssClass: vs.enabled ? undefined : 'k-list-scroller',
+          wrapperCssClass: 'k-list-content',
           listStyle: vs.enabled ? {
             transform: translate
           } : undefined,
@@ -1006,27 +1038,16 @@ var MultiSelect = {
           skip: skip,
           onListclick: this.handleItemClick,
           on: this.v3 ? undefined : {
-            "listclick": this.handleItemClick
+            "listclick": this.handleItemClick,
+            "scroll": vs.scrollHandler
           },
           itemRender: itemRender,
-          noDataRender: listNoDataRender
-        })
+          noDataRender: listNoDataRender,
+          onScroll: vs.scrollHandler
+        }, this.v3 ? function () {
+          return [renderScrollElement.call(_this2)];
+        } : [renderScrollElement.call(_this2)])
       );
-    }; // Common rendering
-
-
-    var renderScrollWrapper = function renderScrollWrapper(children) {
-      return vs.enabled ? h("div", {
-        onScroll: vs.scrollHandler,
-        on: this.v3 ? undefined : {
-          "scroll": vs.scrollHandler
-        },
-        ref: 'scroller',
-        style: {
-          height: popupSettings.height,
-          overflowY: 'scroll'
-        }
-      }, [children]) : children;
     };
 
     var renderScrollElement = function renderScrollElement() {
@@ -1037,13 +1058,15 @@ var MultiSelect = {
     };
 
     var renderListContainer = function renderListContainer() {
-      var _this2 = this;
+      var _this3 = this;
+
+      var _a;
 
       var base = this.base;
-      var _a = this.$props,
-          allowCustom = _a.allowCustom,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b;
+      var _b = this.$props,
+          allowCustom = _b.allowCustom,
+          _c = _b.dataItems,
+          dataItems = _c === void 0 ? [] : _c;
       var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
       var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
       var header = getTemplate.call(this, {
@@ -1067,7 +1090,7 @@ var MultiSelect = {
         }
       }, [h("div", {
         "class": classNames('k-item k-custom-item', {
-          'k-state-focused': isCustom(focusedType)
+          'k-focus': isCustom(focusedType)
         })
       }, [currentText, h("span", {
         "class": "k-icon k-i-plus",
@@ -1093,7 +1116,8 @@ var MultiSelect = {
               show: opened,
               onOpen: this.onPopupOpened,
               onClose: this.onPopupClosed,
-              className: classNames('k-list-container k-reset', popupSettings.className),
+              popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
+              className: popupSettings.className,
               appendTo: popupSettings.appendTo
             },
             itemsCount: dataItems.length
@@ -1106,13 +1130,22 @@ var MultiSelect = {
             show: opened,
             onOpen: this.onPopupOpened,
             onClose: this.onPopupClosed,
-            className: classNames('k-list-container k-reset', popupSettings.className),
+            popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
+            className: popupSettings.className,
             appendTo: popupSettings.appendTo
           },
           itemsCount: dataItems.length
         }, this.v3 ? function () {
-          return [virtual && header, renderScrollWrapper.call(_this2, [!virtual && header, customItem, renderList.call(_this2), !virtual && footer, renderScrollElement.call(_this2)]), virtual && footer];
-        } : [virtual && header, renderScrollWrapper.call(_this2, [!virtual && header, customItem, renderList.call(_this2), !virtual && footer, renderScrollElement.call(_this2)]), virtual && footer])
+          return [header && h("div", {
+            "class": "k-list-header"
+          }, [header]), customItem, renderList.call(_this3), footer && h("div", {
+            "class": "k-list-footer"
+          }, [footer]), virtual && header];
+        } : [header && h("div", {
+          "class": "k-list-header"
+        }, [header]), customItem, renderList.call(_this3), footer && h("div", {
+          "class": "k-list-footer"
+        }, [footer]), virtual && header])
       );
     };
 
@@ -1120,11 +1153,7 @@ var MultiSelect = {
       ref: this.v3 ? function (el) {
         _this.kendoAnchorRef = el;
       } : this.anchor,
-      "class": classNames('k-widget k-multiselect', {
-        'k-state-focused': focused && !disabled,
-        'k-state-invalid': !isValid,
-        'k-state-disabled': disabled
-      }),
+      "class": classNames('k-multiselect', 'k-input', (_a = {}, _a["k-input-" + (sizeMap[size] || size)] = size, _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded, _a["k-input-" + fillMode] = fillMode, _a['k-focus'] = focused && !disabled, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-valid'] = isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
       style: !label ? style : __assign(__assign({}, style), {
         width: undefined
       }),
@@ -1134,23 +1163,19 @@ var MultiSelect = {
       },
       onFocusin: this.handleFocus,
       on: this.v3 ? undefined : {
-        "focusin": this.handleFocus
-      }
-    }, [h("div", {
-      onClick: this.handleWrapperClick,
-      on: this.v3 ? undefined : {
+        "focusin": this.handleFocus,
         "click": this.handleWrapperClick,
         "mousedown": preventDefaultNonInputs
       },
-      ref: this.v3 ? function (el) {
-        _this.baseWrapperRef = el;
-      } : 'baseWrapper',
-      "class": "k-multiselect-wrap k-floatwrap",
+      onClick: this.handleWrapperClick,
       onMousedown: preventDefaultNonInputs
     }, [tagsToRender.length > 0 && // @ts-ignore  function children
     h(TagList, {
-      tagRender: tagRender,
+      tagsRounded: tagsRounded,
       attrs: this.v3 ? undefined : {
+        tagsRounded: tagsRounded,
+        size: size,
+        fillMode: fillMode,
         tagRender: tagRender,
         dataItems: tagsToRender,
         guid: this.base.guid,
@@ -1158,6 +1183,9 @@ var MultiSelect = {
           return matchTags(t, focusedTag, dataItemKey);
         }) : undefined
       },
+      size: size,
+      fillMode: fillMode,
+      tagRender: tagRender,
       onTagdelete: this.onTagDelete,
       on: this.v3 ? undefined : {
         "tagdelete": this.onTagDelete
@@ -1167,7 +1195,7 @@ var MultiSelect = {
       focused: focusedTag ? tagsToRender.find(function (t) {
         return matchTags(t, focusedTag, dataItemKey);
       }) : undefined
-    }), renderSearchBar.call(this, id), renderClearButton.call(this, clearButton), renderLoading.call(this, loading)]), renderListContainer.call(this)]);
+    }), renderSearchBar.call(this, id), renderClearButton.call(this, clearButton), renderLoading.call(this, loading), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,
       dir: this.$props.dir,
@@ -1185,5 +1213,5 @@ var MultiSelect = {
     }, [this.$props.label]) : null]) : component;
   }
 };
-var MultiSelectVue3 = MultiSelect;
-export { MultiSelect, MultiSelectVue3 };
+var MultiSelect = MultiSelectVue2;
+export { MultiSelect, MultiSelectVue2 };

package/dist/es/MultiSelect/MultiSelectProps.d.ts

@@ -199,4 +199,57 @@ export interface MultiSelectProps extends FormComponentProps {
      * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
      */
     footer?: any;
+    /**
+     * Configures the `size` of the MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `roundness` of the tags in MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null—Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    tagsRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the MultiSelect.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null—Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
 }

package/dist/es/MultiSelect/TagList.d.ts

@@ -1,4 +1,4 @@
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 declare type DefaultData<V> = object | ((this: V) => TagListAll);
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
@@ -24,11 +24,14 @@ export interface TagListProps {
     guid: string;
     focused?: TagData;
     tagRender?: any;
+    size?: null | 'small' | 'medium' | 'large' | string;
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    tagsRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
 }
 /**
  * @hidden
  */
-export interface TagListMethods extends Vue {
+export interface TagListMethods extends Vue2type {
     [key: string]: any;
     onTagDelete: (data: any, e: any) => void;
 }
@@ -40,5 +43,6 @@ export interface TagListAll extends TagListMethods {
 /**
  * Represents the default `TagList` component.
  */
-declare let TagList: ComponentOptions<Vue, DefaultData<TagListAll>, DefaultMethods<TagListAll>, {}, RecordPropsDefinition<TagListProps>>;
-export { TagList };
+declare let TagListVue2: ComponentOptions<Vue2type, DefaultData<TagListAll>, DefaultMethods<TagListAll>, {}, RecordPropsDefinition<TagListProps>>;
+declare const TagList: DefineComponent<{}, any, {}, {}, TagListMethods, {}, {}, {}, string, {}, {}, {}>;
+export { TagList, TagListVue2 };

package/dist/es/MultiSelect/TagList.js

@@ -15,13 +15,11 @@ var __assign = this && this.__assign || function () {
 }; // @ts-ignore
 
 
-import { getTemplate } from '@progress/kendo-vue-common';
+import { getTemplate, kendoThemeMaps } from '@progress/kendo-vue-common';
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
-var tagClassName = 'k-button';
-var focusedTagClassName = tagClassName + ' k-state-focused';
 
 var preventDefault = function preventDefault(event) {
   return event.preventDefault();
@@ -35,13 +33,59 @@ var stopPropagation = function stopPropagation(event) {
  */
 
 
-var TagList = {
+var TagListVue2 = {
   name: 'TagList',
   props: {
     dataItems: Array,
     guid: String,
     focused: Object,
-    tagRender: [String, Function, Object]
+    tagRender: [String, Function, Object],
+    tagsRounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    }
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          disabled = _b.disabled;
+      return _a = {
+        'k-chip-list': true
+      }, _a["k-chip-list-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-selection-single'] = true, _a['k-disabled'] = disabled, _a;
+    },
+    chipClass: function chipClass() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          disabled = _b.disabled,
+          tagsRounded = _b.tagsRounded,
+          fillMode = _b.fillMode;
+      return _a = {
+        'k-chip': true,
+        'k-disabled': disabled
+      }, _a["k-chip-" + (kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-" + (kendoThemeMaps.roundedMap[tagsRounded] || tagsRounded)] = tagsRounded, _a["k-chip-" + fillMode] = fillMode, _a["k-chip-" + fillMode + "-base"] = Boolean(fillMode), _a;
+    }
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -60,8 +104,8 @@ var TagList = {
     var _a = this.$props,
         dataItems = _a.dataItems,
         guid = _a.guid;
-    return h("ul", {
-      "class": "k-reset",
+    return h("div", {
+      "class": this.wrapperClass,
       role: "listbox",
       attrs: this.v3 ? undefined : {
         role: "listbox",
@@ -71,8 +115,10 @@ var TagList = {
     }, [dataItems.map(function (tagData, index) {
       var _this = this;
 
-      var defaultRendering = h("li", {
-        "class": tagData === this.$props.focused ? focusedTagClassName : tagClassName,
+      var defaultRendering = h("div", {
+        "class": __assign(__assign({}, this.chipClass), {
+          'k-focus': tagData === this.$props.focused
+        }),
         key: tagData.text + index,
         id: "tag-" + guid + "-" + tagData.text.replace(/\s+/g, '-'),
         attrs: this.v3 ? undefined : {
@@ -90,7 +136,9 @@ var TagList = {
         "aria-selected": true,
         role: "option",
         "aria-setsize": dataItems.length
-      }, [h("span", [tagData.text]), h("span", {
+      }, [h("span", {
+        "class": "k-chip-content"
+      }, [tagData.text]), h("span", {
         "aria-label": "delete",
         attrs: this.v3 ? undefined : {
           "aria-label": "delete"
@@ -122,4 +170,5 @@ var TagList = {
     }, this)]);
   }
 };
-export { TagList };
+var TagList = TagListVue2;
+export { TagList, TagListVue2 };

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/common/ClearButton.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,13 +6,13 @@ declare type DefaultMethods<V> = {
 /**
  * @hidden
  */
-export interface ClearButtonMethods extends Vue {
+export interface ClearButtonMethods extends Vue2type {
     onMouseDown: (e: any) => void;
     onClickHandler: (e: any) => void;
 }
 /**
  * Represents the default `ClearButton` component.
  */
-declare let ClearButton: ComponentOptions<Vue, DefaultData<{}>, DefaultMethods<ClearButtonMethods>, {}, RecordPropsDefinition<{}>>;
-declare const ClearButtonVue3: DefineComponent<{}, any, {}, {}, ClearButtonMethods, {}, {}, {}, string, {}, {}, {}>;
-export { ClearButton, ClearButtonVue3 };
+declare let ClearButtonVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ClearButtonMethods>, {}, RecordPropsDefinition<{}>>;
+declare const ClearButton: DefineComponent<{}, any, {}, {}, ClearButtonMethods, {}, {}, {}, string, {}, {}, {}>;
+export { ClearButton, ClearButtonVue2 };

package/dist/es/common/ClearButton.js

@@ -9,7 +9,7 @@ import { messages, clear } from '../messages';
  * Represents the default `ClearButton` component.
  */
 
-var ClearButton = {
+var ClearButtonVue2 = {
   name: 'clear-button',
   inject: {
     kendoLocalizationService: {
@@ -38,7 +38,7 @@ var ClearButton = {
     var h = gh || createElement;
     var title = provideLocalizationService(this).toLanguageString(clear, messages[clear]);
     return h("span", {
-      "class": "k-icon k-clear-value k-i-close",
+      "class": "k-clear-value",
       role: "button",
       attrs: this.v3 ? undefined : {
         role: "button",
@@ -54,8 +54,10 @@ var ClearButton = {
       tabIndex: -1,
       title: title,
       key: "clearbutton"
-    });
+    }, [h("span", {
+      "class": "k-icon k-i-x"
+    })]);
   }
 };
-var ClearButtonVue3 = ClearButton;
-export { ClearButton, ClearButtonVue3 };
+var ClearButton = ClearButtonVue2;
+export { ClearButton, ClearButtonVue2 };

package/dist/es/common/DropDownBase.d.ts

@@ -1,4 +1,3 @@
-import { VNode } from 'vue';
 import VirtualScroll from './VirtualScroll';
 import { Navigation } from './Navigation';
 import { ListItemProps } from './ListItem';
@@ -28,10 +27,10 @@ export interface DropDownComponentProps {
     onChange?: (event: any) => void;
     onFilterChange?: (event: any) => void;
     onPageChange?: (event: any) => void;
-    itemRender?: (li: Element, itemProps: ListItemProps) => VNode;
-    listNoDataRender?: (element: any) => VNode;
-    header?: VNode;
-    footer?: VNode;
+    itemRender?: (li: Element, itemProps: ListItemProps) => any;
+    listNoDataRender?: (element: any) => any;
+    header?: any;
+    footer?: any;
 }
 /**
  * @hidden

package/dist/es/common/DropDownBase.js

@@ -190,8 +190,11 @@ function () {
     if (item && itemIndex >= 0) {
       var vs = this.vs;
       var scrollElement = vs.container || list.parentNode;
-      var virtualScroll = vsEnabled !== undefined ? vsEnabled : vs.enabled;
-      scrollToItem(scrollElement, item.offsetHeight, itemIndex, vs.translate, virtualScroll);
+
+      if (scrollElement) {
+        var virtualScroll = vsEnabled !== undefined ? vsEnabled : vs.enabled;
+        scrollToItem(scrollElement, item.offsetHeight, itemIndex, vs.translate, virtualScroll);
+      }
     }
   };