@progress/kendo-vue-dropdowns 4.3.0-dev.202401300902 → 4.3.0-dev.202401301055

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -303,6 +303,7 @@ var MultiSelectTreeVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this2 = this;
     var _a, _b;
     var _this = this;
     var h = gh || createElement;
@@ -634,7 +635,7 @@ var MultiSelectTreeVue2 = {
       "aria-expanded": this.isOpen,
       "aria-describedby": 'tagslist-' + id,
       "aria-label": this.$props.ariaLabelledBy
-    }, [this.tagsToRender.length === 0 && h("span", {
+    }, [this.tagsToRenderRef.length === 0 && h("span", {
       "class": "k-input-value-text"
     }, [placeholder])])]), this.$props.loading && h(Icon, {
       "class": "k-input-loading-icon",
@@ -674,9 +675,9 @@ var MultiSelectTreeVue2 = {
       domProps: this.v3 ? undefined : {
         "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, value) : value
       }
-    })]),
+    })]), !renderAdaptive &&
     // @ts-ignore function children
-    !renderAdaptive && h(Popup, {
+    h(Popup, {
       style: {
         width: this.popupWidth,
         direction: dir
@@ -703,45 +704,115 @@ var MultiSelectTreeVue2 = {
       onClose: this.onPopupClosed,
       appendTo: popupSettings.appendTo,
       ref: setRef(this, 'popup')
-    }, [this.$props.filterable &&
-    // @ts-ignore
-    h(ListFilter, {
-      value: this.$props.filter === undefined ? this.filterState : this.$props.filter,
-      attrs: this.v3 ? undefined : {
-        value: this.$props.filter === undefined ? this.filterState : this.$props.filter,
+    }, this.v3 ? function () {
+      return [_this2.$props.filterable &&
+      // @ts-ignore
+      h(ListFilter, {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+        attrs: _this2.v3 ? undefined : {
+          value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+          size: size,
+          rounded: rounded,
+          fillMode: fillMode
+        },
+        ref: setRef(_this2, 'input'),
+        onChange: _this2.onFilterChange,
+        on: _this2.v3 ? undefined : {
+          "change": _this2.onFilterChange,
+          "keydown": _this2.onInputKeyDown,
+          "focus": _this2.onFocus,
+          "blur": _this2.onBlur
+        },
+        onKeydown: _this2.onInputKeyDown,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode,
+        onFocus: _this2.onFocus,
+        onBlur: _this2.onBlur
+      }), header && h("div", {
+        "class": "k-list-header"
+      }, [header]), dataItems.length > 0 ?
+      // @ts-ignore
+      h(TreeView, {
+        ref: setRef(_this2, 'treeView'),
+        tabIndex: tabIndex,
+        attrs: _this2.v3 ? undefined : {
+          tabIndex: tabIndex,
+          dataItems: dataItems,
+          focusIdField: dataItemKey,
+          textField: _this2.$props.textField,
+          checkField: checkField,
+          checkIndeterminateField: checkIndeterminateField,
+          expandField: _this2.$props.expandField,
+          childrenField: subItemsField,
+          expandIcons: true,
+          checkboxes: true,
+          size: size,
+          item: itemTemplate
+        },
+        dataItems: dataItems,
+        focusIdField: dataItemKey,
+        textField: _this2.$props.textField,
+        checkField: checkField,
+        checkIndeterminateField: checkIndeterminateField,
+        expandField: _this2.$props.expandField,
+        childrenField: subItemsField,
+        expandIcons: true,
+        onItemclick: _this2.onChange,
+        on: _this2.v3 ? undefined : {
+          "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,
+        size: size,
+        item: itemTemplate
+      }) : noDataTemplate, footer && h("div", {
+        "class": "k-list-footer"
+      }, [footer])];
+    } : [_this2.$props.filterable && h(ListFilter, {
+      value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+      attrs: _this2.v3 ? undefined : {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
         size: size,
         rounded: rounded,
         fillMode: fillMode
       },
-      ref: setRef(this, 'input'),
-      onChange: this.onFilterChange,
-      on: this.v3 ? undefined : {
-        "change": this.onFilterChange,
-        "keydown": this.onInputKeyDown,
-        "focus": this.onFocus,
-        "blur": this.onBlur
+      ref: setRef(_this2, 'input'),
+      onChange: _this2.onFilterChange,
+      on: _this2.v3 ? undefined : {
+        "change": _this2.onFilterChange,
+        "keydown": _this2.onInputKeyDown,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur
       },
-      onKeydown: this.onInputKeyDown,
+      onKeydown: _this2.onInputKeyDown,
       size: size,
       rounded: rounded,
       fillMode: fillMode,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur
     }), header && h("div", {
       "class": "k-list-header"
-    }, [header]), dataItems.length > 0 ?
-    // @ts-ignore
-    h(TreeView, {
-      ref: setRef(this, 'treeView'),
+    }, [header]), dataItems.length > 0 ? h(TreeView, {
+      ref: setRef(_this2, 'treeView'),
       tabIndex: tabIndex,
-      attrs: this.v3 ? undefined : {
+      attrs: _this2.v3 ? undefined : {
         tabIndex: tabIndex,
         dataItems: dataItems,
         focusIdField: dataItemKey,
-        textField: this.$props.textField,
+        textField: _this2.$props.textField,
         checkField: checkField,
         checkIndeterminateField: checkIndeterminateField,
-        expandField: this.$props.expandField,
+        expandField: _this2.$props.expandField,
         childrenField: subItemsField,
         expandIcons: true,
         checkboxes: true,
@@ -750,26 +821,26 @@ var MultiSelectTreeVue2 = {
       },
       dataItems: dataItems,
       focusIdField: dataItemKey,
-      textField: this.$props.textField,
+      textField: _this2.$props.textField,
       checkField: checkField,
       checkIndeterminateField: checkIndeterminateField,
-      expandField: this.$props.expandField,
+      expandField: _this2.$props.expandField,
       childrenField: subItemsField,
       expandIcons: true,
-      onItemclick: this.onChange,
-      on: this.v3 ? undefined : {
-        "itemclick": this.onChange,
-        "checkchange": this.onChange,
-        "expandchange": this.onExpand,
-        "focus": this.onFocus,
-        "blur": this.onBlur,
-        "keydown": this.onWrapperKeyDown
+      onItemclick: _this2.onChange,
+      on: _this2.v3 ? undefined : {
+        "itemclick": _this2.onChange,
+        "checkchange": _this2.onChange,
+        "expandchange": _this2.onExpand,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur,
+        "keydown": _this2.onWrapperKeyDown
       },
-      onCheckchange: this.onChange,
-      onExpandchange: this.onExpand,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onKeydown: this.onWrapperKeyDown,
+      onCheckchange: _this2.onChange,
+      onExpandchange: _this2.onExpand,
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur,
+      onKeydown: _this2.onWrapperKeyDown,
       checkboxes: true,
       size: size,
       item: itemTemplate
@@ -805,11 +876,7 @@ var MultiSelectTreeVue2 = {
   },
   methods: {
     clearFilter: function clearFilter(event) {
-      this.onFilterChange(__assign(__assign({}, event), {
-        target: __assign(__assign({}, event.target), {
-          value: ''
-        })
-      }));
+      this.onFilterChange(event, '');
     },
     onCancel: function onCancel(event) {
       var dropdownEvent = {
@@ -898,7 +965,9 @@ var MultiSelectTreeVue2 = {
       }
     },
     closePopup: function closePopup(event) {
-      this.clearFilter(event);
+      if (this.$props.filterable) {
+        this.clearFilter(event);
+      }
       if (this.isOpen) {
         var closeEvent = __assign({}, event);
         this.$emit('close', closeEvent);
@@ -1124,11 +1193,12 @@ var MultiSelectTreeVue2 = {
       };
       this.$emit('expandchange', expandEvent);
     },
-    onFilterChange: function onFilterChange(event) {
+    onFilterChange: function onFilterChange(event, emptyValue) {
+      var newValue = emptyValue ? '' : event.target.value;
       var filterDesc = {
         field: this.$props.textField,
         operator: 'contains',
-        value: event.target.value
+        value: newValue
       };
       var ev = {
         filter: filterDesc,
@@ -1137,7 +1207,7 @@ var MultiSelectTreeVue2 = {
       };
       this.$emit('filterchange', ev);
       if (this.$props.filter === undefined) {
-        this.filterState = event.target.value;
+        this.filterState = newValue;
       }
     }
   }

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: 1706604833,
+    publishDate: 1706611548,
     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

@@ -303,6 +303,7 @@ var MultiSelectTreeVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
+    var _this2 = this;
     var _a, _b;
     var _this = this;
     var h = gh || createElement;
@@ -634,7 +635,7 @@ var MultiSelectTreeVue2 = {
       "aria-expanded": this.isOpen,
       "aria-describedby": 'tagslist-' + id,
       "aria-label": this.$props.ariaLabelledBy
-    }, [this.tagsToRender.length === 0 && h("span", {
+    }, [this.tagsToRenderRef.length === 0 && h("span", {
       "class": "k-input-value-text"
     }, [placeholder])])]), this.$props.loading && h(Icon, {
       "class": "k-input-loading-icon",
@@ -674,9 +675,9 @@ var MultiSelectTreeVue2 = {
       domProps: this.v3 ? undefined : {
         "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, value) : value
       }
-    })]),
+    })]), !renderAdaptive &&
     // @ts-ignore function children
-    !renderAdaptive && h(Popup, {
+    h(Popup, {
       style: {
         width: this.popupWidth,
         direction: dir
@@ -703,45 +704,115 @@ var MultiSelectTreeVue2 = {
       onClose: this.onPopupClosed,
       appendTo: popupSettings.appendTo,
       ref: setRef(this, 'popup')
-    }, [this.$props.filterable &&
-    // @ts-ignore
-    h(ListFilter, {
-      value: this.$props.filter === undefined ? this.filterState : this.$props.filter,
-      attrs: this.v3 ? undefined : {
-        value: this.$props.filter === undefined ? this.filterState : this.$props.filter,
+    }, this.v3 ? function () {
+      return [_this2.$props.filterable &&
+      // @ts-ignore
+      h(ListFilter, {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+        attrs: _this2.v3 ? undefined : {
+          value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+          size: size,
+          rounded: rounded,
+          fillMode: fillMode
+        },
+        ref: setRef(_this2, 'input'),
+        onChange: _this2.onFilterChange,
+        on: _this2.v3 ? undefined : {
+          "change": _this2.onFilterChange,
+          "keydown": _this2.onInputKeyDown,
+          "focus": _this2.onFocus,
+          "blur": _this2.onBlur
+        },
+        onKeydown: _this2.onInputKeyDown,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode,
+        onFocus: _this2.onFocus,
+        onBlur: _this2.onBlur
+      }), header && h("div", {
+        "class": "k-list-header"
+      }, [header]), dataItems.length > 0 ?
+      // @ts-ignore
+      h(TreeView, {
+        ref: setRef(_this2, 'treeView'),
+        tabIndex: tabIndex,
+        attrs: _this2.v3 ? undefined : {
+          tabIndex: tabIndex,
+          dataItems: dataItems,
+          focusIdField: dataItemKey,
+          textField: _this2.$props.textField,
+          checkField: checkField,
+          checkIndeterminateField: checkIndeterminateField,
+          expandField: _this2.$props.expandField,
+          childrenField: subItemsField,
+          expandIcons: true,
+          checkboxes: true,
+          size: size,
+          item: itemTemplate
+        },
+        dataItems: dataItems,
+        focusIdField: dataItemKey,
+        textField: _this2.$props.textField,
+        checkField: checkField,
+        checkIndeterminateField: checkIndeterminateField,
+        expandField: _this2.$props.expandField,
+        childrenField: subItemsField,
+        expandIcons: true,
+        onItemclick: _this2.onChange,
+        on: _this2.v3 ? undefined : {
+          "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,
+        size: size,
+        item: itemTemplate
+      }) : noDataTemplate, footer && h("div", {
+        "class": "k-list-footer"
+      }, [footer])];
+    } : [_this2.$props.filterable && h(ListFilter, {
+      value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
+      attrs: _this2.v3 ? undefined : {
+        value: _this2.$props.filter === undefined ? _this2.filterState : _this2.$props.filter,
         size: size,
         rounded: rounded,
         fillMode: fillMode
       },
-      ref: setRef(this, 'input'),
-      onChange: this.onFilterChange,
-      on: this.v3 ? undefined : {
-        "change": this.onFilterChange,
-        "keydown": this.onInputKeyDown,
-        "focus": this.onFocus,
-        "blur": this.onBlur
+      ref: setRef(_this2, 'input'),
+      onChange: _this2.onFilterChange,
+      on: _this2.v3 ? undefined : {
+        "change": _this2.onFilterChange,
+        "keydown": _this2.onInputKeyDown,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur
       },
-      onKeydown: this.onInputKeyDown,
+      onKeydown: _this2.onInputKeyDown,
       size: size,
       rounded: rounded,
       fillMode: fillMode,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur
     }), header && h("div", {
       "class": "k-list-header"
-    }, [header]), dataItems.length > 0 ?
-    // @ts-ignore
-    h(TreeView, {
-      ref: setRef(this, 'treeView'),
+    }, [header]), dataItems.length > 0 ? h(TreeView, {
+      ref: setRef(_this2, 'treeView'),
       tabIndex: tabIndex,
-      attrs: this.v3 ? undefined : {
+      attrs: _this2.v3 ? undefined : {
         tabIndex: tabIndex,
         dataItems: dataItems,
         focusIdField: dataItemKey,
-        textField: this.$props.textField,
+        textField: _this2.$props.textField,
         checkField: checkField,
         checkIndeterminateField: checkIndeterminateField,
-        expandField: this.$props.expandField,
+        expandField: _this2.$props.expandField,
         childrenField: subItemsField,
         expandIcons: true,
         checkboxes: true,
@@ -750,26 +821,26 @@ var MultiSelectTreeVue2 = {
       },
       dataItems: dataItems,
       focusIdField: dataItemKey,
-      textField: this.$props.textField,
+      textField: _this2.$props.textField,
       checkField: checkField,
       checkIndeterminateField: checkIndeterminateField,
-      expandField: this.$props.expandField,
+      expandField: _this2.$props.expandField,
       childrenField: subItemsField,
       expandIcons: true,
-      onItemclick: this.onChange,
-      on: this.v3 ? undefined : {
-        "itemclick": this.onChange,
-        "checkchange": this.onChange,
-        "expandchange": this.onExpand,
-        "focus": this.onFocus,
-        "blur": this.onBlur,
-        "keydown": this.onWrapperKeyDown
+      onItemclick: _this2.onChange,
+      on: _this2.v3 ? undefined : {
+        "itemclick": _this2.onChange,
+        "checkchange": _this2.onChange,
+        "expandchange": _this2.onExpand,
+        "focus": _this2.onFocus,
+        "blur": _this2.onBlur,
+        "keydown": _this2.onWrapperKeyDown
       },
-      onCheckchange: this.onChange,
-      onExpandchange: this.onExpand,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onKeydown: this.onWrapperKeyDown,
+      onCheckchange: _this2.onChange,
+      onExpandchange: _this2.onExpand,
+      onFocus: _this2.onFocus,
+      onBlur: _this2.onBlur,
+      onKeydown: _this2.onWrapperKeyDown,
       checkboxes: true,
       size: size,
       item: itemTemplate
@@ -805,11 +876,7 @@ var MultiSelectTreeVue2 = {
   },
   methods: {
     clearFilter: function clearFilter(event) {
-      this.onFilterChange(__assign(__assign({}, event), {
-        target: __assign(__assign({}, event.target), {
-          value: ''
-        })
-      }));
+      this.onFilterChange(event, '');
     },
     onCancel: function onCancel(event) {
       var dropdownEvent = {
@@ -898,7 +965,9 @@ var MultiSelectTreeVue2 = {
       }
     },
     closePopup: function closePopup(event) {
-      this.clearFilter(event);
+      if (this.$props.filterable) {
+        this.clearFilter(event);
+      }
       if (this.isOpen) {
         var closeEvent = __assign({}, event);
         this.$emit('close', closeEvent);
@@ -1124,11 +1193,12 @@ var MultiSelectTreeVue2 = {
       };
       this.$emit('expandchange', expandEvent);
     },
-    onFilterChange: function onFilterChange(event) {
+    onFilterChange: function onFilterChange(event, emptyValue) {
+      var newValue = emptyValue ? '' : event.target.value;
       var filterDesc = {
         field: this.$props.textField,
         operator: 'contains',
-        value: event.target.value
+        value: newValue
       };
       var ev = {
         filter: filterDesc,
@@ -1137,7 +1207,7 @@ var MultiSelectTreeVue2 = {
       };
       this.$emit('filterchange', ev);
       if (this.$props.filter === undefined) {
-        this.filterState = event.target.value;
+        this.filterState = newValue;
       }
     }
   }

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: 1706604833,
+    publishDate: 1706611548,
     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'
 };