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

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -36,6 +36,7 @@ import { FloatingLabel } from '@progress/kendo-vue-labels';
 import { TagList } from '../MultiSelect/TagList';
 import { ClearButton } from '../common/ClearButton';
 import { ListFilter } from '../common/ListFilter';
+import { getMultiSelectTreeValue } from './utils';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -59,6 +60,9 @@ var getValidity = function getValidity(parameters, hasValue) {
  */
 var MultiSelectTreeVue2 = {
   name: 'KendoMultiSelectTree',
+  model: {
+    event: 'changemodel'
+  },
   // @ts-ignore
   emits: {
     open: null,
@@ -67,7 +71,9 @@ var MultiSelectTreeVue2 = {
     blur: null,
     change: null,
     filterChange: null,
-    expandChange: null
+    expandChange: null,
+    'changemodel': null,
+    'update:modelValue': null
   },
   props: {
     opened: {
@@ -85,6 +91,7 @@ var MultiSelectTreeVue2 = {
       }
     },
     value: Array,
+    modelValue: Array,
     valueMap: Function,
     placeholder: String,
     dataItemKey: {
@@ -117,7 +124,7 @@ var MultiSelectTreeVue2 = {
     },
     valid: {
       type: Boolean,
-      default: true
+      default: undefined
     },
     required: Boolean,
     name: String,
@@ -189,7 +196,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;
@@ -314,13 +321,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,
@@ -345,7 +352,9 @@ var MultiSelectTreeVue2 = {
         focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
           return matchTags(t, _this.focusedTagState, dataItemKey);
         }) : undefined,
-        size: size
+        tagsRounded: rounded,
+        size: size,
+        fillMode: fillMode
       },
       onTagdelete: this.onTagDelete,
       on: this.v3 ? undefined : {
@@ -356,7 +365,9 @@ var MultiSelectTreeVue2 = {
       focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
         return matchTags(t, _this.focusedTagState, dataItemKey);
       }) : undefined,
-      size: size
+      tagsRounded: rounded,
+      size: size,
+      fillMode: fillMode
     }) : !this.hasValue && h("span", {
       "class": "k-input-inner",
       role: 'combobox',
@@ -390,11 +401,13 @@ var MultiSelectTreeVue2 = {
         name: name,
         tabIndex: -1,
         "aria-hidden": true,
+        required: required,
         title: label
       },
       ref: setRef(this, 'select'),
       tabIndex: -1,
       "aria-hidden": true,
+      required: required,
       title: label,
       style: {
         opacity: 0,
@@ -629,11 +642,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 = 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) {

package/dist/es/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.
      */

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: 1682059133,
+    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/esm/MultiSelectTree/MultiSelectTree.js

@@ -36,6 +36,7 @@ import { FloatingLabel } from '@progress/kendo-vue-labels';
 import { TagList } from '../MultiSelect/TagList.js';
 import { ClearButton } from '../common/ClearButton.js';
 import { ListFilter } from '../common/ListFilter.js';
+import { getMultiSelectTreeValue } from './utils.js';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -59,6 +60,9 @@ var getValidity = function getValidity(parameters, hasValue) {
  */
 var MultiSelectTreeVue2 = {
   name: 'KendoMultiSelectTree',
+  model: {
+    event: 'changemodel'
+  },
   // @ts-ignore
   emits: {
     open: null,
@@ -67,7 +71,9 @@ var MultiSelectTreeVue2 = {
     blur: null,
     change: null,
     filterChange: null,
-    expandChange: null
+    expandChange: null,
+    'changemodel': null,
+    'update:modelValue': null
   },
   props: {
     opened: {
@@ -85,6 +91,7 @@ var MultiSelectTreeVue2 = {
       }
     },
     value: Array,
+    modelValue: Array,
     valueMap: Function,
     placeholder: String,
     dataItemKey: {
@@ -117,7 +124,7 @@ var MultiSelectTreeVue2 = {
     },
     valid: {
       type: Boolean,
-      default: true
+      default: undefined
     },
     required: Boolean,
     name: String,
@@ -189,7 +196,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;
@@ -314,13 +321,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,
@@ -345,7 +352,9 @@ var MultiSelectTreeVue2 = {
         focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
           return matchTags(t, _this.focusedTagState, dataItemKey);
         }) : undefined,
-        size: size
+        tagsRounded: rounded,
+        size: size,
+        fillMode: fillMode
       },
       onTagdelete: this.onTagDelete,
       on: this.v3 ? undefined : {
@@ -356,7 +365,9 @@ var MultiSelectTreeVue2 = {
       focused: this.focusedTagState ? this.tagsToRenderRef.find(function (t) {
         return matchTags(t, _this.focusedTagState, dataItemKey);
       }) : undefined,
-      size: size
+      tagsRounded: rounded,
+      size: size,
+      fillMode: fillMode
     }) : !this.hasValue && h("span", {
       "class": "k-input-inner",
       role: 'combobox',
@@ -390,11 +401,13 @@ var MultiSelectTreeVue2 = {
         name: name,
         tabIndex: -1,
         "aria-hidden": true,
+        required: required,
         title: label
       },
       ref: setRef(this, 'select'),
       tabIndex: -1,
       "aria-hidden": true,
+      required: required,
       title: label,
       style: {
         opacity: 0,
@@ -629,11 +642,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 = 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) {

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.
      */

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: 1682059133,
+    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/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,7 +371,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
     }) : !this.hasValue && h("span", {
       "class": "k-input-inner",
       role: 'combobox',
@@ -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,
@@ -635,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) {

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.
      */

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: 1682059133,
+    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.202304210655",
+  "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.202304210655",
-    "@progress/kendo-vue-common": "3.9.4-dev.202304210655",
-    "@progress/kendo-vue-popup": "3.9.4-dev.202304210655"
+    "@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.202304210655",
-    "@progress/kendo-vue-intl": "3.9.4-dev.202304210655",
-    "@progress/kendo-vue-labels": "3.9.4-dev.202304210655",
-    "@progress/kendo-vue-treeview": "3.9.4-dev.202304210655"
+    "@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",