@progress/kendo-vue-dropdowns 2.7.2 → 2.8.0-dev.202201121019

package/dist/es/DropDownList/DropDownList.js

@@ -19,7 +19,10 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
-import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate } from '@progress/kendo-vue-common';
+import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate, kendoThemeMaps, getTabIndex } from '@progress/kendo-vue-common';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
+var sizeMap = kendoThemeMaps.sizeMap,
+    roundedMap = kendoThemeMaps.roundedMap;
 import { ListContainer } from '../common/ListContainer';
 import { ListFilter } from '../common/ListFilter';
 import { ListDefaultItem } from '../common/ListDefaultItem';
@@ -31,13 +34,14 @@ var VALIDATION_MESSAGE = 'Please select a value from the list!';
  * Represents the default `DropDownList` component.
  */
 
-var DropDownList = {
+var DropDownListVue2 = {
   name: 'KendoDropDownList',
   model: {
     event: 'changemodel'
   },
   props: {
     id: String,
+    title: String,
     dataItemKey: {
       type: [Object, String]
     },
@@ -135,7 +139,28 @@ var DropDownList = {
       default: undefined
     },
     ariaLabelledBy: String,
-    ariaDescribedBy: String
+    ariaDescribedBy: String,
+    rounded: {
+      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);
+      }
+    }
   },
   data: function data() {
     return {
@@ -207,7 +232,7 @@ var DropDownList = {
   mounted: function mounted() {
     this.hasMounted = true;
     this.select = this.v3 ? this.selectRef : this.$refs.select;
-    this.base.wrapper = this.v3 ? this.baseWrapperRef : this.$refs.baseWrapper;
+    this.base.wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this.anchor];
     this.base.didMount();
     this.setValidity();
   },
@@ -304,10 +329,10 @@ var DropDownList = {
       get: function get() {
         var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
         return {
-          'k-textbox-container': true,
-          'k-state-focused': this.currentFocused,
-          'k-state-empty': !this.computedValue(),
-          'k-state-invalid': !isValid && isValid !== undefined,
+          'k-floating-label-container': true,
+          'k-focus': this.currentFocused,
+          'k-empty': !this.computedValue(),
+          'k-invalid': !isValid && isValid !== undefined,
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
@@ -685,18 +710,23 @@ var DropDownList = {
     }
   },
   render: function render(createElement) {
+    var _a;
+
     var _this = this;
 
     var h = gh || createElement;
-    var _a = this.$props,
-        style = _a.style,
-        className = _a.className,
-        label = _a.label,
-        dir = _a.dir,
-        _b = _a.virtual,
-        virtual = _b === void 0 ? {
+    var _b = this.$props,
+        style = _b.style,
+        className = _b.className,
+        label = _b.label,
+        dir = _b.dir,
+        _c = _b.virtual,
+        virtual = _c === void 0 ? {
       skip: 0
-    } : _b;
+    } : _c,
+        size = _b.size,
+        rounded = _b.rounded,
+        fillMode = _b.fillMode;
     var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
     var text = getItemValue(this.computedValue(), this.$props.textField);
     var isValid = !this.$props.validityStyles || this.validity().valid;
@@ -708,8 +738,35 @@ var DropDownList = {
       animate: true,
       height: '200px'
     }, this.$props.popupSettings);
-
-    var dummySelect = function dummySelect(value) {
+    var _d = this.$props,
+        dataItemKey = _d.dataItemKey,
+        _e = _d.dataItems,
+        dataItems = _e === void 0 ? [] : _e,
+        disabled = _d.disabled,
+        tabIndex = _d.tabIndex,
+        loading = _d.loading,
+        iconClassName = _d.iconClassName;
+    var valueRender = templateRendering.call(this, this.$props.valueRender, getListeners.call(this));
+    var focused = this.currentFocused;
+    var value = this.computedValue();
+    var selectedIndex = dataItems.findIndex(function (i) {
+      return areSame(i, value, dataItemKey);
+    });
+    var valueDefaultRendering = h("span", {
+      "class": "k-input-inner"
+    }, [h("span", {
+      "class": "k-input-value-text"
+    }, [text])]);
+    var valueElement = getTemplate.call(this, {
+      h: h,
+      template: valueRender,
+      defaultRendering: valueDefaultRendering,
+      additionalProps: __assign({
+        value: this.computedValue()
+      }, this.$data)
+    });
+
+    var dummySelect = function dummySelect(cvalue) {
       var _this = this;
       /* Dummy component to support forms */
 
@@ -739,97 +796,17 @@ var DropDownList = {
           left: '50%'
         }
       }, [h("option", {
-        value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined, value) : value : null,
+        value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined, cvalue) : cvalue : null,
         domProps: this.v3 ? undefined : {
-          "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, value) : value
+          "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, cvalue) : cvalue
         }
       })]);
     };
 
-    var renderDropDownWrapper = function renderDropDownWrapper() {
-      var _this = this;
-
-      var _a = this.$props,
-          dataItemKey = _a.dataItemKey,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b,
-          disabled = _a.disabled,
-          tabIndex = _a.tabIndex,
-          loading = _a.loading,
-          iconClassName = _a.iconClassName;
-      var valueRender = templateRendering.call(this, this.$props.valueRender, getListeners.call(this));
-      var focused = this.currentFocused;
-      var value = this.computedValue();
-      var selectedIndex = dataItems.findIndex(function (i) {
-        return areSame(i, value, dataItemKey);
-      });
-      var valueDefaultRendering = h("span", {
-        "class": "k-input"
-      }, [text]);
-      var valueElement = getTemplate.call(this, {
-        h: h,
-        template: valueRender,
-        defaultRendering: valueDefaultRendering,
-        additionalProps: __assign({
-          value: this.computedValue()
-        }, this.$data)
-      });
-      return h("span", {
-        ref: this.v3 ? function (el) {
-          _this.baseWrapperRef = el;
-        } : 'baseWrapper',
-        role: 'listbox',
-        attrs: this.v3 ? undefined : {
-          role: 'listbox',
-          tabIndex: disabled ? undefined : tabIndex,
-          accessKey: this.$props.accessKey,
-          "aria-disabled": disabled || undefined,
-          "aria-haspopup": true,
-          "aria-expanded": opened || false,
-          "aria-owns": this.base.listBoxId,
-          "aria-activedescendant": 'option-' + this.base.guid + '-' + (selectedIndex + virtual.skip),
-          "aria-label": this.$props.label,
-          "aria-labelledby": this.$props.ariaLabelledBy,
-          "aria-describedby": this.$props.ariaDescribedBy
-        },
-        tabIndex: disabled ? undefined : tabIndex,
-        accessKey: this.$props.accessKey,
-        "class": classNames('k-dropdown-wrap', {
-          'k-state-focused': focused,
-          'k-state-disabled': disabled
-        }),
-        style: this.$props.style,
-        onKeydown: this.handleKeyDown,
-        on: this.v3 ? undefined : {
-          "keydown": this.handleKeyDown,
-          "keypress": this.handleKeyPress,
-          "click": disabled ? noop : this.handleWrapperClick
-        },
-        onKeypress: this.handleKeyPress,
-        onClick: disabled ? noop : this.handleWrapperClick,
-        "aria-disabled": disabled || undefined,
-        "aria-haspopup": true,
-        "aria-expanded": opened || false,
-        "aria-owns": this.base.listBoxId,
-        "aria-activedescendant": 'option-' + this.base.guid + '-' + (selectedIndex + virtual.skip),
-        "aria-label": this.$props.label,
-        "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaDescribedBy
-      }, [valueElement, h("span", {
-        "class": "k-select"
-      }, [h("span", {
-        "class": classNames('k-icon', iconClassName, {
-          'k-i-arrow-s': !loading && !iconClassName,
-          'k-i-loading': loading && !iconClassName
-        })
-      })]), dummySelect.call(this, value)]);
-    };
-
     var renderDefaultItem = function renderDefaultItem() {
       var _a = this.$props,
           textField = _a.textField,
-          defaultItem = _a.defaultItem,
-          dataItemKey = _a.dataItemKey;
+          defaultItem = _a.defaultItem;
       return defaultItem !== undefined && // @ts-ignore
       h(ListDefaultItem, {
         defaultItem: defaultItem,
@@ -849,11 +826,7 @@ var DropDownList = {
     };
 
     var renderList = function renderList() {
-      var _a = this.$props,
-          _b = _a.dataItems,
-          dataItems = _b === void 0 ? [] : _b,
-          textField = _a.textField,
-          dataItemKey = _a.dataItemKey;
+      var textField = this.$props.textField;
       var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
       var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
       var skip = virtual.skip;
@@ -871,12 +844,13 @@ var DropDownList = {
             valueField: dataItemKey,
             optionsGuid: this.base.guid,
             wrapperStyle: !vs.enabled ? {
-              maxHeight: popupSettings.height
+              maxHeight: popupSettings.height,
+              overflowY: 'scroll'
             } : {
               float: 'left',
               width: '100%'
             },
-            wrapperCssClass: !vs.enabled ? 'k-list-scroller' : undefined,
+            wrapperCssClass: 'k-list-content',
             listStyle: vs.enabled ? {
               transform: translate
             } : undefined,
@@ -893,12 +867,13 @@ var DropDownList = {
           optionsGuid: this.base.guid,
           ref: 'list',
           wrapperStyle: !vs.enabled ? {
-            maxHeight: popupSettings.height
+            maxHeight: popupSettings.height,
+            overflowY: 'scroll'
           } : {
             float: 'left',
             width: '100%'
           },
-          wrapperCssClass: !vs.enabled ? 'k-list-scroller' : undefined,
+          wrapperCssClass: 'k-list-content',
           listStyle: vs.enabled ? {
             transform: translate
           } : undefined,
@@ -957,6 +932,8 @@ var DropDownList = {
     var renderListContainer = function renderListContainer() {
       var _this2 = this;
 
+      var _a;
+
       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, {
@@ -983,7 +960,8 @@ var DropDownList = {
             width: popupWidth // @ts-ignore
             ,
             popupSettings: {
-              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,
               animate: popupSettings.animate,
               anchor: this.anchor,
               show: opened
@@ -991,7 +969,8 @@ var DropDownList = {
           },
           width: popupWidth,
           popupSettings: {
-            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,
             animate: popupSettings.animate,
             anchor: this.anchor,
             show: opened
@@ -1017,25 +996,77 @@ var DropDownList = {
       ref: this.v3 ? function (el) {
         _this.kendoAnchorRef = el;
       } : this.anchor,
-      "class": classNames('k-widget k-dropdown', {
-        'k-state-invalid': !isValid
-      }, className),
+      "class": classNames('k-dropdownlist k-picker', className, (_a = {}, _a["k-picker-" + (sizeMap[size] || size)] = size, _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded, _a["k-picker-" + fillMode] = fillMode, _a['k-focus'] = focused, _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
       }),
       dir: dir,
       attrs: this.v3 ? undefined : {
-        dir: dir
+        dir: dir,
+        tabIndex: getTabIndex(tabIndex, disabled),
+        accessKey: this.$props.accessKey,
+        role: 'listbox',
+        "aria-disabled": disabled || undefined,
+        "aria-haspopup": true,
+        "aria-expanded": opened || false,
+        "aria-owns": this.base.listBoxId,
+        "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
+        "aria-label": this.$props.label,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        id: this.$props.id,
+        title: this.$props.title
       },
       onMousedown: opened ? preventDefaultNonInputs : noop,
       on: this.v3 ? undefined : {
         "mousedown": opened ? preventDefaultNonInputs : noop,
         "focusin": this.handleFocus,
-        "focusout": this.handleBlur
+        "focusout": this.handleBlur,
+        "keydown": this.handleKeyDown,
+        "keypress": this.handleKeyPress,
+        "click": disabled ? noop : this.handleWrapperClick
       },
       onFocusin: this.handleFocus,
-      onFocusout: this.handleBlur
-    }, [renderDropDownWrapper.call(this), renderListContainer.call(this)]);
+      onFocusout: this.handleBlur,
+      tabIndex: getTabIndex(tabIndex, disabled),
+      accessKey: this.$props.accessKey,
+      onKeydown: this.handleKeyDown,
+      onKeypress: this.handleKeyPress,
+      role: 'listbox',
+      onClick: disabled ? noop : this.handleWrapperClick,
+      "aria-disabled": disabled || undefined,
+      "aria-haspopup": true,
+      "aria-expanded": opened || false,
+      "aria-owns": this.base.listBoxId,
+      "aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
+      "aria-label": this.$props.label,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      id: this.$props.id,
+      title: this.$props.title
+    }, [valueElement, loading && h("span", {
+      "class": "k-icon k-i-loading",
+      key: "loading"
+    }), // @ts-ignore
+    h(KButton, {
+      size: size,
+      attrs: this.v3 ? undefined : {
+        size: size,
+        fillMode: fillMode,
+        iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
+      },
+      fillMode: fillMode,
+      "class": 'k-input-button',
+      iconClass: classNames('k-icon k-i-arrow-s', iconClassName),
+      onMousedown: function onMousedown(e) {
+        return e.preventDefault();
+      },
+      on: this.v3 ? undefined : {
+        "mousedown": function onMousedown(e) {
+          return e.preventDefault();
+        }
+      }
+    }), dummySelect.call(this, value), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,
       onFocusin: this.handleFocus,
@@ -1059,5 +1090,5 @@ var DropDownList = {
     }, [this.$props.label]) : null]) : dropdownlist;
   }
 };
-var DropDownListVue3 = DropDownList;
-export { DropDownList, DropDownListVue3 };
+var DropDownList = DropDownListVue2;
+export { DropDownList, DropDownListVue2 };

package/dist/es/DropDownList/DropDownListProps.d.ts

@@ -44,6 +44,10 @@ export interface DropDownListProps extends FormComponentProps {
      * Specifies the id of the component.
      */
     id?: string;
+    /**
+     * Specifies the title of the component.
+     */
+    title?: string;
     /**
      * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
      * For example these elements could contain error or hint message.
@@ -221,4 +225,43 @@ export interface DropDownListProps extends FormComponentProps {
      * Useful when the DropDownList is placed inside a toolbar which needs to handle left and right keys.
      */
     leftRightKeysNavigation?: boolean;
+    /**
+     * Configures the `size` of the DropDownList.
+     *
+     * 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 DropDownList.
+     *
+     * 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 `fillMode` of the DropDownList.
+     *
+     * 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/MultiSelect.d.ts

@@ -1,10 +1,9 @@
-import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
 declare type DefaultData<V> = object | ((this: V) => MultiSelectData);
 declare type DefaultMethods<V> = {
     [key: string]: (this: V, ...args: any[]) => any;
 };
 import { FormComponentValidity } from '@progress/kendo-vue-common';
-import { DefineComponent } from '../additionalTypes';
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
 import { TagData } from './TagList';
 import { MultiSelectProps } from './MultiSelectProps';
 import { DropDownStateBase, InternalState, ActiveDescendant } from './../common/settings';
@@ -103,11 +102,11 @@ export interface MultiSelectComputed {
 /**
  * @hidden
  */
-export interface MultiSelectAll extends MultiSelectMethods, MultiSelectState, MultiSelectData, MultiSelectComputed, Vue {
+export interface MultiSelectAll extends MultiSelectMethods, MultiSelectState, MultiSelectData, MultiSelectComputed, Vue2type {
 }
 /**
  * Represents the default `MultiSelect` component.
  */
-declare let MultiSelect: ComponentOptions<Vue, DefaultData<MultiSelectData>, DefaultMethods<MultiSelectAll>, MultiSelectComputed, RecordPropsDefinition<MultiSelectProps>>;
-declare const MultiSelectVue3: DefineComponent<MultiSelectProps, any, MultiSelectData, MultiSelectComputed, MultiSelectMethods, {}, {}, {}, string, MultiSelectProps, MultiSelectProps, {}>;
-export { MultiSelect, MultiSelectVue3 };
+declare let MultiSelectVue2: ComponentOptions<Vue2type, DefaultData<MultiSelectData>, DefaultMethods<MultiSelectAll>, MultiSelectComputed, RecordPropsDefinition<MultiSelectProps>>;
+declare const MultiSelect: DefineComponent<MultiSelectProps, any, MultiSelectData, MultiSelectComputed, MultiSelectMethods, {}, {}, {}, string, MultiSelectProps, MultiSelectProps, {}>;
+export { MultiSelect, MultiSelectVue2 };