@progress/kendo-vue-dropdowns 3.9.4-dev.202304190945 → 3.9.4-dev.202304241333

package/dist/esm/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -17,6 +17,10 @@ export interface MultiSelectTreeChangeEvent extends DropdownEvent {
      * The items related to current operation.
      */
     items: any[];
+    /**
+     * The new value.
+     */
+    value: any[];
     /**
      * Describes the current operation:
      * * `clear` - clear button is clicked and value is cleared. Null value is returned.
@@ -85,9 +89,13 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      */
     opened?: boolean;
     /**
-     * Sets the value of the MultiSelectTree. It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     * Sets the value of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.
      */
     value?: Array<any>;
+    /**
+     * Sets the modelValue of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    modelValue?: Array<any>;
     /**
      * The hint that is displayed when the MultiSelectTree is empty.
      */
@@ -161,7 +169,7 @@ export interface MultiSelectTreeProps extends FormComponentProps {
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     * Useful for making the filtering input a controlled component.
      */
     filter?: string;
     /**
@@ -202,7 +210,7 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      */
     popupSettings?: DropDownsPopupSettings;
     /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select` element.
      *
      * @example
      * ```jsx-no-run

package/dist/esm/common/ListFilter.js

@@ -16,7 +16,9 @@ var ListFilterVue2 = {
   // @ts-ignore
   emits: {
     keydown: null,
-    change: null
+    change: null,
+    focus: null,
+    blur: null
   },
   props: {
     value: String,
@@ -69,6 +71,12 @@ var ListFilterVue2 = {
     },
     onChange: function onChange(e) {
       this.$emit('change', e);
+    },
+    handleFocus: function handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    handleBlur: function handleBlur(e) {
+      this.$emit('blur', e);
     }
   },
   mounted: function mounted() {
@@ -103,9 +111,13 @@ var ListFilterVue2 = {
       onInput: this.onChange,
       on: this.v3 ? undefined : {
         "input": this.onChange,
-        "keydown": this.onKeyDown
+        "keydown": this.onKeyDown,
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur
       },
-      onKeydown: this.onKeyDown
+      onKeydown: this.onKeyDown,
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur
     })])]);
   }
 };

package/dist/esm/package-metadata.js

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

@@ -275,10 +275,12 @@ var ComboBoxVue2 = {
         this.base.scrollToVirtualItem(virtual, selectedItemIndex);
         this.prevCurrentOpened = true;
       } else if (opening && !virtual) {
-        this.base.scrollToItem(selectedItemIndex);
+        this.base.scrollToItem(selectedItem ? selectedItemIndex : this.getFocusedIndex());
         this.prevCurrentOpened = true;
       } else if (opened && prevOpened && selectedItem && selectedItemChanged) {
         this.base.scrollToItem(selectedItemIndex);
+      } else if (opened && !selectedItem) {
+        this.base.scrollToItem(this.getFocusedIndex());
       }
     }
     if (opening && this.input) {

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

@@ -135,7 +135,7 @@ export interface DropDownTreeProps extends FormComponentProps {
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     * Useful for making the filtering input a controlled component.
      */
     filter?: string;
     /**
@@ -172,7 +172,7 @@ export interface DropDownTreeProps extends FormComponentProps {
      */
     popupSettings?: DropDownsPopupSettings;
     /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select`.
      *
      * @example
      * ```jsx-no-run

package/dist/npm/MultiSelectTree/MultiSelectTree.js

@@ -42,6 +42,7 @@ var kendo_vue_labels_1 = require("@progress/kendo-vue-labels");
 var TagList_1 = require("../MultiSelect/TagList");
 var ClearButton_1 = require("../common/ClearButton");
 var ListFilter_1 = require("../common/ListFilter");
+var utils_2 = require("./utils");
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
   roundedMap = kendo_vue_common_1.kendoThemeMaps.roundedMap;
@@ -65,6 +66,9 @@ var getValidity = function getValidity(parameters, hasValue) {
  */
 var MultiSelectTreeVue2 = {
   name: 'KendoMultiSelectTree',
+  model: {
+    event: 'changemodel'
+  },
   // @ts-ignore
   emits: {
     open: null,
@@ -73,7 +77,9 @@ var MultiSelectTreeVue2 = {
     blur: null,
     change: null,
     filterChange: null,
-    expandChange: null
+    expandChange: null,
+    'changemodel': null,
+    'update:modelValue': null
   },
   props: {
     opened: {
@@ -91,6 +97,7 @@ var MultiSelectTreeVue2 = {
       }
     },
     value: Array,
+    modelValue: Array,
     valueMap: Function,
     placeholder: String,
     dataItemKey: {
@@ -123,7 +130,7 @@ var MultiSelectTreeVue2 = {
     },
     valid: {
       type: Boolean,
-      default: true
+      default: undefined
     },
     required: Boolean,
     name: String,
@@ -195,7 +202,7 @@ var MultiSelectTreeVue2 = {
       return this.opened !== undefined ? this.opened : this.openState;
     },
     computedValue: function computedValue() {
-      return this.value !== undefined ? this.value : this.currentValue;
+      return this.value !== undefined ? this.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
     },
     hasValue: function hasValue() {
       return !!this.computedValue.length;
@@ -320,13 +327,13 @@ var MultiSelectTreeVue2 = {
       on: this.v3 ? undefined : {
         "keydown": this.onWrapperKeyDown,
         "mousedown": this.onWrapperMouseDown,
-        "focus": this.onFocus,
-        "blur": this.onBlur,
+        "focusin": this.onFocus,
+        "focusout": this.onBlur,
         "click": this.onWrapperClick
       },
       onMousedown: this.onWrapperMouseDown,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
+      onFocusin: this.onFocus,
+      onFocusout: this.onBlur,
       role: "combobox",
       "aria-haspopup": "true",
       "aria-expanded": this.isOpen,
@@ -351,7 +358,9 @@ var MultiSelectTreeVue2 = {
         focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
           return (0, utils_1.matchTags)(t, _this.focusedTagState, dataItemKey);
         }) : undefined,
-        size: size
+        tagsRounded: rounded,
+        size: size,
+        fillMode: fillMode
       },
       onTagdelete: this.onTagDelete,
       on: this.v3 ? undefined : {
@@ -362,8 +371,10 @@ var MultiSelectTreeVue2 = {
       focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
         return (0, utils_1.matchTags)(t, _this.focusedTagState, dataItemKey);
       }) : undefined,
-      size: size
-    }) : !this.hasValue && placeholder]), !this.hasValue && h("span", {
+      tagsRounded: rounded,
+      size: size,
+      fillMode: fillMode
+    }) : !this.hasValue && h("span", {
       "class": "k-input-inner",
       role: 'combobox',
       attrs: this.v3 ? undefined : {
@@ -379,7 +390,7 @@ var MultiSelectTreeVue2 = {
       "aria-label": this.$props.ariaLabelledBy
     }, [h("span", {
       "class": "k-input-value-text"
-    }, ["\xA0"])]), this.$props.loading && h(kendo_vue_common_1.Icon, {
+    }, [placeholder])])]), this.$props.loading && h(kendo_vue_common_1.Icon, {
       "class": "k-input-loading-icon",
       name: "loading",
       attrs: this.v3 ? undefined : {
@@ -396,11 +407,13 @@ var MultiSelectTreeVue2 = {
         name: name,
         tabIndex: -1,
         "aria-hidden": true,
+        required: required,
         title: label
       },
       ref: (0, kendo_vue_common_1.setRef)(this, 'select'),
       tabIndex: -1,
       "aria-hidden": true,
+      required: required,
       title: label,
       style: {
         opacity: 0,
@@ -459,12 +472,16 @@ var MultiSelectTreeVue2 = {
         onChange: _this2.onFilterChange,
         on: _this2.v3 ? undefined : {
           "change": _this2.onFilterChange,
-          "keydown": _this2.onInputKeyDown
+          "keydown": _this2.onInputKeyDown,
+          "focus": _this2.onFocus,
+          "blur": _this2.onBlur
         },
         onKeydown: _this2.onInputKeyDown,
         size: size,
         rounded: rounded,
-        fillMode: fillMode
+        fillMode: fillMode,
+        onFocus: _this2.onFocus,
+        onBlur: _this2.onBlur
       }), header && h("div", {
         "class": "k-list-header"
       }, [header]), dataItems.length > 0 ?
@@ -499,11 +516,13 @@ var MultiSelectTreeVue2 = {
           "itemclick": _this2.onChange,
           "checkchange": _this2.onChange,
           "expandchange": _this2.onExpand,
+          "focus": _this2.onFocus,
           "blur": _this2.onBlur,
           "keydown": _this2.onWrapperKeyDown
         },
         onCheckchange: _this2.onChange,
         onExpandchange: _this2.onExpand,
+        onFocus: _this2.onFocus,
         onBlur: _this2.onBlur,
         onKeydown: _this2.onWrapperKeyDown,
         checkboxes: true,
@@ -524,12 +543,16 @@ var MultiSelectTreeVue2 = {
       onChange: _this2.onFilterChange,
       on: _this2.v3 ? undefined : {
         "change": _this2.onFilterChange,
-        "keydown": _this2.onInputKeyDown
+        "keydown": _this2.onInputKeyDown,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur
       },
       onKeydown: _this2.onInputKeyDown,
       size: size,
       rounded: rounded,
-      fillMode: fillMode
+      fillMode: fillMode,
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur
     }), header && h("div", {
       "class": "k-list-header"
     }, [header]), dataItems.length > 0 ? h(kendo_vue_treeview_1.TreeView, {
@@ -562,11 +585,13 @@ var MultiSelectTreeVue2 = {
         "itemclick": _this2.onChange,
         "checkchange": _this2.onChange,
         "expandchange": _this2.onExpand,
+        "focus": _this2.onFocus,
         "blur": _this2.onBlur,
         "keydown": _this2.onWrapperKeyDown
       },
       onCheckchange: _this2.onChange,
       onExpandchange: _this2.onExpand,
+      onFocus: _this2.onFocus,
       onBlur: _this2.onBlur,
       onKeydown: _this2.onWrapperKeyDown,
       checkboxes: true,
@@ -623,11 +648,26 @@ var MultiSelectTreeVue2 = {
         this.selectRef.setCustomValidity(validity.valid ? '' : this.validationMessage === undefined ? VALIDATION_MESSAGE : this.validationMessage);
       }
     },
-    changeValue: function changeValue(event, relatedItems, operation) {
+    changeValue: function changeValue(event, items, operation) {
+      var fields = {
+        dataItemKey: this.dataItemKey,
+        checkField: this.checkField,
+        checkIndeterminateField: this.checkIndeterminateField,
+        expandField: this.expandField,
+        subItemsField: this.subItemsField
+      };
+      var value = (0, utils_2.getMultiSelectTreeValue)(this.dataItems, __assign(__assign({}, fields), {
+        items: items,
+        operation: operation,
+        value: this.value
+      }));
       var changeEvent = __assign({
-        items: relatedItems,
-        operation: operation
+        items: items,
+        operation: operation,
+        value: value
       }, event);
+      this.$emit('changemodel', value);
+      this.$emit('update:modelValue', value);
       this.$emit('change', changeEvent);
     },
     onChange: function onChange(e) {
@@ -707,6 +747,7 @@ var MultiSelectTreeVue2 = {
     },
     onBlur: function onBlur(event) {
       if (this.focusedState && !this.skipFocusRef) {
+        this.focusedTagState = undefined;
         this.focusedState = false;
         var ev = {
           event: event,
@@ -750,7 +791,7 @@ var MultiSelectTreeVue2 = {
         event: event,
         target: this
       };
-      if (this.value && this.value.length > 0 && (keyCode === kendo_vue_common_1.Keys.left || keyCode === kendo_vue_common_1.Keys.right || keyCode === kendo_vue_common_1.Keys.home || keyCode === kendo_vue_common_1.Keys.end || keyCode === kendo_vue_common_1.Keys.delete)) {
+      if (this.value && this.value.length > 0 && (keyCode === kendo_vue_common_1.Keys.left || keyCode === kendo_vue_common_1.Keys.right || keyCode === kendo_vue_common_1.Keys.home || keyCode === kendo_vue_common_1.Keys.end || keyCode === kendo_vue_common_1.Keys.delete || keyCode === kendo_vue_common_1.Keys.backspace)) {
         var tagsToRender = this.tagsToRenderRef;
         var focusedIndex = this.focusedTagState ? tagsToRender.findIndex(function (t) {
           return (0, utils_1.matchTags)(t, _this.focusedTagState, _this.dataItemKey);
@@ -775,7 +816,7 @@ var MultiSelectTreeVue2 = {
           newFocusedTag = tagsToRender[0];
         } else if (keyCode === kendo_vue_common_1.Keys.end) {
           newFocusedTag = tagsToRender[tagsToRender.length - 1];
-        } else if (keyCode === kendo_vue_common_1.Keys.delete) {
+        } else if (keyCode === kendo_vue_common_1.Keys.delete || keyCode === kendo_vue_common_1.Keys.backspace) {
           if (hasFocused) {
             this.changeValue(ev, tagsToRender[focusedIndex].data, 'delete');
           }
@@ -787,6 +828,9 @@ var MultiSelectTreeVue2 = {
       if (this.isOpen) {
         if (keyCode === kendo_vue_common_1.Keys.esc || altKey && keyCode === kendo_vue_common_1.Keys.up) {
           event.preventDefault();
+          this.switchFocus(function () {
+            _this.focusElement(_this.elementRef);
+          });
           this.closePopup(ev);
         } else if (treeviewElement && treeviewElement.querySelector('.k-focus') && (keyCode === kendo_vue_common_1.Keys.up || keyCode === kendo_vue_common_1.Keys.down || keyCode === kendo_vue_common_1.Keys.left || keyCode === kendo_vue_common_1.Keys.right || keyCode === kendo_vue_common_1.Keys.home || keyCode === kendo_vue_common_1.Keys.end)) {
           if (keyCode === kendo_vue_common_1.Keys.up) {
@@ -822,7 +866,7 @@ var MultiSelectTreeVue2 = {
       }
       event.preventDefault();
       this.switchFocus(keyCode === kendo_vue_common_1.Keys.up ? function () {
-        _this.focusElement(_this.$el);
+        _this.focusElement(_this.elementRef);
       } : function () {
         _this.focusElement(_this.treeViewRef && _this.treeViewRef.$el);
       });

package/dist/npm/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -17,6 +17,10 @@ export interface MultiSelectTreeChangeEvent extends DropdownEvent {
      * The items related to current operation.
      */
     items: any[];
+    /**
+     * The new value.
+     */
+    value: any[];
     /**
      * Describes the current operation:
      * * `clear` - clear button is clicked and value is cleared. Null value is returned.
@@ -85,9 +89,13 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      */
     opened?: boolean;
     /**
-     * Sets the value of the MultiSelectTree. It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     * Sets the value of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.
      */
     value?: Array<any>;
+    /**
+     * Sets the modelValue of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    modelValue?: Array<any>;
     /**
      * The hint that is displayed when the MultiSelectTree is empty.
      */
@@ -161,7 +169,7 @@ export interface MultiSelectTreeProps extends FormComponentProps {
     filterable?: boolean;
     /**
      * Sets the value of filtering input.
-     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     * Useful for making the filtering input a controlled component.
      */
     filter?: string;
     /**
@@ -202,7 +210,7 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      */
     popupSettings?: DropDownsPopupSettings;
     /**
-     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select` element.
      *
      * @example
      * ```jsx-no-run

package/dist/npm/common/ListFilter.js

@@ -22,7 +22,9 @@ var ListFilterVue2 = {
   // @ts-ignore
   emits: {
     keydown: null,
-    change: null
+    change: null,
+    focus: null,
+    blur: null
   },
   props: {
     value: String,
@@ -75,6 +77,12 @@ var ListFilterVue2 = {
     },
     onChange: function onChange(e) {
       this.$emit('change', e);
+    },
+    handleFocus: function handleFocus(e) {
+      this.$emit('focus', e);
+    },
+    handleBlur: function handleBlur(e) {
+      this.$emit('blur', e);
     }
   },
   mounted: function mounted() {
@@ -109,9 +117,13 @@ var ListFilterVue2 = {
       onInput: this.onChange,
       on: this.v3 ? undefined : {
         "input": this.onChange,
-        "keydown": this.onKeyDown
+        "keydown": this.onKeyDown,
+        "focusin": this.handleFocus,
+        "focusout": this.handleBlur
       },
-      onKeydown: this.onKeyDown
+      onKeydown: this.onKeyDown,
+      onFocusin: this.handleFocus,
+      onFocusout: this.handleBlur
     })])]);
   }
 };

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-dropdowns',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1681896936,
+    publishDate: 1682342566,
     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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-dropdowns",
   "description": "Kendo UI for Vue Dropdowns package",
-  "version": "3.9.4-dev.202304190945",
+  "version": "3.9.4-dev.202304241333",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -51,18 +51,18 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-buttons": "3.9.4-dev.202304190945",
-    "@progress/kendo-vue-common": "3.9.4-dev.202304190945",
-    "@progress/kendo-vue-popup": "3.9.4-dev.202304190945"
+    "@progress/kendo-vue-buttons": "3.9.4-dev.202304241333",
+    "@progress/kendo-vue-common": "3.9.4-dev.202304241333",
+    "@progress/kendo-vue-popup": "3.9.4-dev.202304241333"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.4",
     "@progress/kendo-licensing": "^1.3.0",
     "@progress/kendo-svg-icons": "^1.0.0",
-    "@progress/kendo-vue-data-tools": "3.9.4-dev.202304190945",
-    "@progress/kendo-vue-intl": "3.9.4-dev.202304190945",
-    "@progress/kendo-vue-labels": "3.9.4-dev.202304190945",
-    "@progress/kendo-vue-treeview": "3.9.4-dev.202304190945"
+    "@progress/kendo-vue-data-tools": "3.9.4-dev.202304241333",
+    "@progress/kendo-vue-intl": "3.9.4-dev.202304241333",
+    "@progress/kendo-vue-labels": "3.9.4-dev.202304241333",
+    "@progress/kendo-vue-treeview": "3.9.4-dev.202304241333"
   },
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",