@progress/kendo-vue-dropdowns 3.10.2-dev.202305221316 → 3.11.0-dev.202305230623

package/dist/es/DropDownTree/DropDownTreeProps.d.ts

@@ -81,7 +81,7 @@ export interface DropDownTreeProps extends FormComponentProps {
     /**
      * Sets the data of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
      */
-    data?: any[];
+    dataItems?: any[];
     /**
      * Sets the opened state of the DropDownTree.
      */
@@ -91,6 +91,7 @@ export interface DropDownTreeProps extends FormComponentProps {
      * It can be an object from the data-tree.
      */
     value?: any;
+    modelValue?: any;
     /**
      * The hint that is displayed when the DropDownTree is empty.
      */
@@ -224,17 +225,27 @@ export interface DropDownTreeProps extends FormComponentProps {
      */
     onExpandChange?: (event: any) => void;
     /**
-     * Defines the component that will be used for rendering each of the DropDownTree items
+     * Defines the slot that will be used for rendering each of the DropDownTree items
      * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
      */
     item?: any;
     /**
-     * Defines the component that will be used for rendering the selected value
+     * Defines the slot that will be used for rendering the selected value
      * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
      */
-    valueHolder?: any;
+    valueRender?: any;
     /**
-     * Defines the component that will be rendered in the DropDownTree popup when no data is available
+     * Defines the slot that will be used for header
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     */
+    header?: any;
+    /**
+     * Defines the slot that will be used for footer
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     */
+    footer?: any;
+    /**
+     * Defines the slot that will be rendered in the DropDownTree popup when no data is available
      * ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
      */
     listNoData?: any;
@@ -249,7 +260,7 @@ export interface DropDownTreeProps extends FormComponentProps {
      *
      * @default `medium`
      */
-    size?: null | 'small' | 'medium' | 'large';
+    size?: null | 'small' | 'medium' | 'large' | string;
     /**
      * Configures the `roundness` of the DropDownTree.
      *
@@ -262,7 +273,7 @@ export interface DropDownTreeProps extends FormComponentProps {
      *
      * @default `medium`
      */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
     /**
      * Configures the `fillMode` of the DropDownTree.
      *
@@ -274,5 +285,5 @@ export interface DropDownTreeProps extends FormComponentProps {
      *
      * @default `solid`
      */
-    fillMode?: null | 'solid' | 'flat' | 'outline';
+    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
 }

package/dist/es/MultiSelect/MultiSelect.js

@@ -1114,8 +1114,12 @@ var MultiSelectVue2 = {
       on: this.v3 ? undefined : {
         "clearclick": this.clearButtonClick
       }
-    }), h("span", {
-      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
+    }), h(Icon, {
+      name: loading ? 'loading' : '',
+      attrs: this.v3 ? undefined : {
+        name: loading ? 'loading' : ''
+      },
+      "class": 'k-input-loading-icon'
     }), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -70,8 +70,8 @@ var MultiSelectTreeVue2 = {
     focus: null,
     blur: null,
     change: null,
-    filterChange: null,
-    expandChange: null,
+    filterchange: null,
+    expandchange: null,
     'changemodel': null,
     'update:modelValue': null
   },
@@ -298,7 +298,7 @@ var MultiSelectTreeVue2 = {
       fillMode = _e.fillMode;
     var multiselecttree = h("span", {
       ref: setRef(this, 'kendoAnchor', this.anchor),
-      "class": classNames('k-multiselect k-input', this.$props.className, (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-focus'] = this.focusedState && !disabled, _a['k-invalid'] = !isValid, _a['k-disabled'] = disabled, _a['k-loading'] = this.$props.loading, _a['k-required'] = required, _a)),
+      "class": classNames('k-multiselecttree k-input', this.$props.className, (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-focus'] = this.focusedState && !disabled, _a['k-invalid'] = !isValid, _a['k-disabled'] = disabled, _a['k-loading'] = this.$props.loading, _a['k-required'] = required, _a)),
       tabIndex: tabIndex,
       attrs: this.v3 ? undefined : {
         tabIndex: tabIndex,
@@ -306,12 +306,12 @@ var MultiSelectTreeVue2 = {
         id: id,
         dir: dir,
         role: "combobox",
-        "aria-haspopup": "true",
+        "aria-haspopup": "tree",
         "aria-expanded": this.isOpen,
         "aria-disabled": disabled,
         "aria-label": label,
         "aria-labelledby": this.$props.ariaLabelledBy,
-        "aria-describedby": this.$props.ariaDescribedBy,
+        "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : 'tagslist-' + id,
         "aria-required": this.$props.required
       },
       accessKey: this.$props.accessKey,
@@ -329,12 +329,12 @@ var MultiSelectTreeVue2 = {
       onFocusin: this.onFocus,
       onFocusout: this.onBlur,
       role: "combobox",
-      "aria-haspopup": "true",
+      "aria-haspopup": "tree",
       "aria-expanded": this.isOpen,
       "aria-disabled": disabled,
       "aria-label": label,
       "aria-labelledby": this.$props.ariaLabelledBy,
-      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-describedby": this.$props.ariaLabelledBy ? this.$props.ariaLabelledBy : 'tagslist-' + id,
       "aria-required": this.$props.required,
       onClick: this.onWrapperClick
     }, [h("div", {
@@ -350,7 +350,7 @@ var MultiSelectTreeVue2 = {
         dataItems: this.tagsToRenderRef,
         guid: id,
         focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
-          return matchTags(t, _this.focusedTagState, dataItemKey);
+          return _this.focusedTagState && matchTags(t, _this.focusedTagState, dataItemKey);
         }) : undefined,
         tagsRounded: rounded,
         size: size,
@@ -363,7 +363,7 @@ var MultiSelectTreeVue2 = {
       dataItems: this.tagsToRenderRef,
       guid: id,
       focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
-        return matchTags(t, _this.focusedTagState, dataItemKey);
+        return _this.focusedTagState && matchTags(t, _this.focusedTagState, dataItemKey);
       }) : undefined,
       tagsRounded: rounded,
       size: size,
@@ -429,9 +429,9 @@ var MultiSelectTreeVue2 = {
         width: this.popupWidth,
         direction: dir
       },
-      popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
+      popupClass: classNames(popupSettings.popupClass, 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
       attrs: this.v3 ? undefined : {
-        popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
+        popupClass: classNames(popupSettings.popupClass, 'k-multiselecttree-popup', 'popup-' + this.componentGuid),
         animate: popupSettings.animate,
         anchor: this.anchor,
         show: this.isOpen,
@@ -726,7 +726,7 @@ var MultiSelectTreeVue2 = {
     onPopupClosed: function onPopupClosed() {
       if (this.focusedState) {
         // Move the focus from treeview to dropdown without triggering Focus or Blur events.
-        this.focusElement(this.$el);
+        this.focusElement(this.elementRef);
       }
     },
     onFocus: function onFocus(event) {

package/dist/es/common/ListFilter.js

@@ -1,3 +1,15 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
 // @ts-ignore
 import * as Vue from 'vue';
 var allVue = Vue;
@@ -6,6 +18,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 import { getRef, Icon, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
 import { searchIcon } from '@progress/kendo-svg-icons';
+import { TextBox } from '@progress/kendo-vue-inputs';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 /**
@@ -77,48 +90,57 @@ var ListFilterVue2 = {
     },
     handleBlur: function handleBlur(e) {
       this.$emit('blur', e);
+    },
+    prefixRender: function prefixRender(h) {
+      var iconProps = {
+        class: 'k-input-icon',
+        name: 'search',
+        icon: searchIcon
+      };
+      return h(Icon, __assign({
+        props: this.v3 ? undefined : iconProps
+      }, iconProps));
     }
   },
   mounted: function mounted() {
-    this.input = getRef(this, 'input');
+    this.input = getRef(this, 'input')._input;
   },
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
-    return h("span", {
+    var _a = this.$props,
+      size = _a.size,
+      rounded = _a.rounded,
+      fillMode = _a.fillMode;
+    return h("div", {
       "class": "k-list-filter"
-    }, [h("span", {
-      "class": this.spanClass
-    }, [h(Icon, {
-      name: "search",
-      attrs: this.v3 ? undefined : {
-        name: "search",
-        icon: searchIcon
-      },
-      icon: searchIcon,
-      "class": "k-input-icon"
-    }), h("input", {
+    }, [
+    // @ts-ignore
+    h(TextBox, {
       ref: setRef(this, 'input'),
-      type: "text",
+      value: this.$props.value,
       attrs: this.v3 ? undefined : {
-        type: "text"
-      },
-      value: this.v3 ? this.$props.value || '' : null,
-      domProps: this.v3 ? undefined : {
-        "value": this.$props.value || ''
+        value: this.$props.value,
+        size: size,
+        fillMode: fillMode,
+        rounded: rounded,
+        inputPrefix: this.prefixRender
       },
-      "class": "k-input-inner",
       onInput: this.onChange,
       on: this.v3 ? undefined : {
         "input": this.onChange,
         "keydown": this.onKeyDown,
-        "focusin": this.handleFocus,
-        "focusout": this.handleBlur
+        "focus": this.handleFocus,
+        "blur": this.handleBlur
       },
       onKeydown: this.onKeyDown,
-      onFocusin: this.handleFocus,
-      onFocusout: this.handleBlur
-    })])]);
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      size: size,
+      fillMode: fillMode,
+      rounded: rounded,
+      inputPrefix: this.prefixRender
+    })]);
   }
 };
 /**

package/dist/es/main.d.ts

@@ -10,8 +10,9 @@ import { AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, Auto
 import { MultiSelect, MultiSelectVue2 } from './MultiSelect/MultiSelect';
 import { MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent } from './MultiSelect/MultiSelectProps';
 import { TagData as MultiSelectTagData } from './MultiSelect/TagList';
+import { DropDownTree } from './DropDownTree/DropDownTree';
 export * from './DropDownTree/DropDownTreeProps';
 import { MultiSelectTree } from './MultiSelectTree/MultiSelectTree';
 export * from './MultiSelectTree/MultiSelectTreeProps';
 export * from './MultiSelectTree/utils';
-export { AutoComplete, AutoCompleteVue2, AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListVue2, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxVue2, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectVue2, MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity, MultiSelectTree };
+export { AutoComplete, AutoCompleteVue2, AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListVue2, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxVue2, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectVue2, MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity, MultiSelectTree, DropDownTree };

package/dist/es/main.js

@@ -2,8 +2,9 @@ import { DropDownList, DropDownListVue2 } from './DropDownList/DropDownList';
 import { ComboBox, ComboBoxVue2 } from './ComboBox/ComboBox';
 import { AutoComplete, AutoCompleteVue2 } from './AutoComplete/AutoComplete';
 import { MultiSelect, MultiSelectVue2 } from './MultiSelect/MultiSelect';
+import { DropDownTree } from './DropDownTree/DropDownTree';
 export * from './DropDownTree/DropDownTreeProps';
 import { MultiSelectTree } from './MultiSelectTree/MultiSelectTree';
 export * from './MultiSelectTree/MultiSelectTreeProps';
 export * from './MultiSelectTree/utils';
-export { AutoComplete, AutoCompleteVue2, DropDownList, DropDownListVue2, ComboBox, ComboBoxVue2, MultiSelect, MultiSelectVue2, MultiSelectTree };
+export { AutoComplete, AutoCompleteVue2, DropDownList, DropDownListVue2, ComboBox, ComboBoxVue2, MultiSelect, MultiSelectVue2, MultiSelectTree, DropDownTree };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dropdowns',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1684760747,
+    publishDate: 1684822401,
     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/esm/AutoComplete/AutoComplete.js

@@ -22,7 +22,7 @@ import { List } from './../common/List.js';
 import DropDownBase from '../common/DropDownBase.js';
 import { ClearButton } from '../common/ClearButton.js';
 import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils.js';
-import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { guid, Keys, classNames, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
@@ -695,8 +695,12 @@ var AutoCompleteVue2 = {
       on: this.v3 ? undefined : {
         "clearclick": this.clearButtonClick
       }
-    }), h("span", {
-      "class": loading ? 'k-input-loading-icon k-icon k-i-loading' : undefined
+    }), h(Icon, {
+      name: loading ? 'loading' : '',
+      attrs: this.v3 ? undefined : {
+        name: loading ? 'loading' : ''
+      },
+      "class": 'k-input-loading-icon'
     }), renderListContainer.call(this)]);
     return label ? h("span", {
       "class": this.spanClassNames,

package/dist/esm/DropDownTree/DropDownTree.d.ts

@@ -1 +1,49 @@
-
+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;
+};
+import { DropDownTreeProps } from './DropDownTreeProps';
+/**
+ * @hidden
+ */
+export interface DropDownTreeState {
+    calculatedId: string;
+    anchor: string;
+}
+/**
+ * @hidden
+ */
+export interface DropDownTreeComputed {
+    [key: string]: any;
+    isOpen: boolean;
+    computedValue: any;
+    hasValue: boolean;
+    currentValueText: string;
+    wrapperClass: object;
+}
+/**
+ * @hidden
+ */
+export interface DropDownTreeMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface DropDownTreeData {
+}
+/**
+ * @hidden
+ */
+export interface DropDownTreeAll extends Vue2type, DropDownTreeMethods, DropDownTreeData, DropDownTreeComputed, DropDownTreeState {
+}
+/**
+ * @hidden
+ */
+declare let DropDownTreeVue2: ComponentOptions<DropDownTreeAll, DefaultData<DropDownTreeData>, DefaultMethods<DropDownTreeAll>, DropDownTreeComputed, RecordPropsDefinition<DropDownTreeProps>>;
+/**
+ * @hidden
+ */
+declare const DropDownTree: DefineComponent<DropDownTreeProps, any, DropDownTreeData, DropDownTreeComputed, DropDownTreeMethods, {}, {}, {}, string, DropDownTreeProps, DropDownTreeProps, {}>;
+export { DropDownTree, DropDownTreeVue2 };