@progress/kendo-vue-dropdowns 5.2.0-dev.202406271321 → 5.2.0-dev.202408061007

package/dist/es/DropDownTree/DropDownTree.js

@@ -320,7 +320,6 @@ var DropDownTreeVue2 = {
   },
   // @ts-ignore
   render: function render(createElement) {
-    var _this2 = this;
     var _this = this;
     var h = gh || createElement;
     var id = this.$props.id || this.componentGuid;
@@ -527,14 +526,41 @@ var DropDownTreeVue2 = {
       size = _b.size,
       rounded = _b.rounded,
       fillMode = _b.fillMode;
-    var component = h("span", {
-      "class": this.wrapperClass,
-      tabIndex: tabIndex,
-      attrs: this.v3 ? undefined : {
+    var component = function component() {
+      var _this2 = this;
+      return h("span", {
+        "class": this.wrapperClass,
         tabIndex: tabIndex,
+        attrs: this.v3 ? undefined : {
+          tabIndex: tabIndex,
+          accessKey: this.$props.accessKey,
+          id: id,
+          dir: dir,
+          role: "combobox",
+          "aria-haspopup": "tree",
+          "aria-expanded": this.isOpen,
+          "aria-disabled": disabled,
+          "aria-label": label || this.$props.ariaLabel,
+          "aria-labelledby": this.$props.ariaLabelledBy,
+          "aria-describedby": this.$props.ariaDescribedBy,
+          "aria-required": required
+        },
         accessKey: this.$props.accessKey,
         id: id,
         dir: dir,
+        ref: setRef(this, 'kendoAnchor', this.anchor),
+        onKeydown: this.onWrapperKeyDown,
+        on: this.v3 ? undefined : {
+          "keydown": this.onWrapperKeyDown,
+          "click": this.onWrapperClick,
+          "mousedown": this.onWrapperMouseDown,
+          "focusin": this.onFocus,
+          "focusout": this.onBlur
+        },
+        onClick: this.onWrapperClick,
+        onMousedown: this.onWrapperMouseDown,
+        onFocusin: this.onFocus,
+        onFocusout: this.onBlur,
         role: "combobox",
         "aria-haspopup": "tree",
         "aria-expanded": this.isOpen,
@@ -543,146 +569,184 @@ var DropDownTreeVue2 = {
         "aria-labelledby": this.$props.ariaLabelledBy,
         "aria-describedby": this.$props.ariaDescribedBy,
         "aria-required": required
-      },
-      accessKey: this.$props.accessKey,
-      id: id,
-      dir: dir,
-      ref: setRef(this, 'kendoAnchor', this.anchor),
-      onKeydown: this.onWrapperKeyDown,
-      on: this.v3 ? undefined : {
-        "keydown": this.onWrapperKeyDown,
-        "click": this.onWrapperClick,
-        "mousedown": this.onWrapperMouseDown,
-        "focusin": this.onFocus,
-        "focusout": this.onBlur
-      },
-      onClick: this.onWrapperClick,
-      onMousedown: this.onWrapperMouseDown,
-      onFocusin: this.onFocus,
-      onFocusout: this.onBlur,
-      role: "combobox",
-      "aria-haspopup": "tree",
-      "aria-expanded": this.isOpen,
-      "aria-disabled": disabled,
-      "aria-label": label || this.$props.ariaLabel,
-      "aria-labelledby": this.$props.ariaLabelledBy,
-      "aria-describedby": this.$props.ariaDescribedBy,
-      "aria-required": required
-    }, [h("span", {
-      "class": "k-input-inner"
-    }, [valueToRender]), this.$props.loading && h(Icon, {
-      "class": "k-input-loading-icon",
-      name: "loading",
-      attrs: this.v3 ? undefined : {
-        name: "loading"
-      }
-    }), this.hasValue && !disabled && h("span", {
-      onClick: this.onClear,
-      on: this.v3 ? undefined : {
-        "click": this.onClear,
-        "mousedown": function mousedown(e) {
-          return e.preventDefault();
+      }, [h("span", {
+        "class": "k-input-inner"
+      }, [valueToRender]), this.$props.loading && h(Icon, {
+        "class": "k-input-loading-icon",
+        name: "loading",
+        attrs: this.v3 ? undefined : {
+          name: "loading"
         }
-      },
-      "class": "k-clear-value",
-      title: localization.toLanguageString(clear, messages[clear]),
-      attrs: this.v3 ? undefined : {
+      }), this.hasValue && !disabled && h("span", {
+        onClick: this.onClear,
+        on: this.v3 ? undefined : {
+          "click": this.onClear,
+          "mousedown": function mousedown(e) {
+            return e.preventDefault();
+          }
+        },
+        "class": "k-clear-value",
         title: localization.toLanguageString(clear, messages[clear]),
+        attrs: this.v3 ? undefined : {
+          title: localization.toLanguageString(clear, messages[clear]),
+          role: "button",
+          tabIndex: -1
+        },
         role: "button",
-        tabIndex: -1
-      },
-      role: "button",
-      tabIndex: -1,
-      onMousedown: function mousedown(e) {
-        return e.preventDefault();
-      }
-    }, [h(Icon, {
-      name: "x",
-      attrs: this.v3 ? undefined : {
+        tabIndex: -1,
+        onMousedown: function mousedown(e) {
+          return e.preventDefault();
+        }
+      }, [h(Icon, {
         name: "x",
+        attrs: this.v3 ? undefined : {
+          name: "x",
+          icon: xIcon
+        },
         icon: xIcon
-      },
-      icon: xIcon
-    })]), h(KButton, {
-      tabIndex: -1,
-      attrs: this.v3 ? undefined : {
+      })]), h(KButton, {
         tabIndex: -1,
+        attrs: this.v3 ? undefined : {
+          tabIndex: -1,
+          type: "button",
+          "aria-label": "select",
+          size: size,
+          fillMode: fillMode,
+          themeColor: "base",
+          rounded: null,
+          icon: "caret-alt-down",
+          svgIcon: caretAltDownIcon
+        },
         type: "button",
         "aria-label": "select",
+        "class": "k-input-button",
         size: size,
         fillMode: fillMode,
         themeColor: "base",
         rounded: null,
         icon: "caret-alt-down",
         svgIcon: caretAltDownIcon
-      },
-      type: "button",
-      "aria-label": "select",
-      "class": "k-input-button",
-      size: size,
-      fillMode: fillMode,
-      themeColor: "base",
-      rounded: null,
-      icon: "caret-alt-down",
-      svgIcon: caretAltDownIcon
-    }), /* Dummy component to support forms */h("select", {
-      name: name,
-      attrs: this.v3 ? undefined : {
+      }), /* Dummy component to support forms */h("select", {
         name: name,
+        attrs: this.v3 ? undefined : {
+          name: name,
+          tabIndex: -1,
+          "aria-hidden": true,
+          title: label
+        },
+        ref: setRef(this, 'select'),
         tabIndex: -1,
         "aria-hidden": true,
-        title: label
-      },
-      ref: setRef(this, 'select'),
-      tabIndex: -1,
-      "aria-hidden": true,
-      title: label,
-      style: {
-        opacity: 0,
-        width: 1,
-        border: 0,
-        zIndex: -1,
-        position: 'absolute',
-        left: '50%'
-      }
-    }, [h("option", {
-      value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined, this.computedValue) : this.computedValue : null,
-      domProps: this.v3 ? undefined : {
-        "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, this.computedValue) : this.computedValue
-      }
-    })]), !renderAdaptive &&
-    // @ts-ignore function children
-    h(Popup, {
-      style: {
-        width: this.popupWidth,
-        direction: dir
-      },
-      ref: setRef(this, 'popup'),
-      "class": classNames(popupSettings.className, {
-        'k-rtl': dir === 'rtl'
-      }),
-      popupClass: classNames(popupSettings.popupClass, 'k-dropdowntree-popup', 'popup-' + this.componentGuid),
-      attrs: this.v3 ? undefined : {
+        title: label,
+        style: {
+          opacity: 0,
+          width: 1,
+          border: 0,
+          zIndex: -1,
+          position: 'absolute',
+          left: '50%'
+        }
+      }, [h("option", {
+        value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined, this.computedValue) : this.computedValue : null,
+        domProps: this.v3 ? undefined : {
+          "value": this.$props.valueMap ? this.$props.valueMap.call(undefined, this.computedValue) : this.computedValue
+        }
+      })]), !renderAdaptive &&
+      // @ts-ignore function children
+      h(Popup, {
+        style: {
+          width: this.popupWidth,
+          direction: dir
+        },
+        ref: setRef(this, 'popup'),
+        "class": classNames(popupSettings.className, {
+          'k-rtl': dir === 'rtl'
+        }),
         popupClass: classNames(popupSettings.popupClass, 'k-dropdowntree-popup', 'popup-' + this.componentGuid),
+        attrs: this.v3 ? undefined : {
+          popupClass: classNames(popupSettings.popupClass, 'k-dropdowntree-popup', 'popup-' + this.componentGuid),
+          animate: popupSettings.animate,
+          anchor: this.anchor,
+          show: this.isOpen,
+          appendTo: popupSettings.appendTo
+        },
         animate: popupSettings.animate,
         anchor: this.anchor,
         show: this.isOpen,
+        onOpen: this.onPopupOpened,
+        on: this.v3 ? undefined : {
+          "open": this.onPopupOpened,
+          "close": this.onPopupClosed
+        },
+        onClose: this.onPopupClosed,
         appendTo: popupSettings.appendTo
-      },
-      animate: popupSettings.animate,
-      anchor: this.anchor,
-      show: this.isOpen,
-      onOpen: this.onPopupOpened,
-      on: this.v3 ? undefined : {
-        "open": this.onPopupOpened,
-        "close": this.onPopupClosed
-      },
-      onClose: this.onPopupClosed,
-      appendTo: popupSettings.appendTo
-    }, this.v3 ? function () {
-      return [_this2.$props.filterable &&
-      // @ts-ignore
-      h(ListFilter, {
+      }, 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,
+            "blur": _this2.onBlur
+          },
+          onKeydown: _this2.onInputKeyDown,
+          onBlur: _this2.onBlur,
+          size: size,
+          rounded: rounded,
+          fillMode: fillMode
+        }), 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,
+            selectField: selectField,
+            expandField: _this2.$props.expandField,
+            childrenField: subItemsField,
+            expandIcons: true,
+            size: size,
+            item: itemTemplate
+          },
+          dataItems: dataItems,
+          focusIdField: dataItemKey,
+          textField: _this2.$props.textField,
+          selectField: selectField,
+          expandField: _this2.$props.expandField,
+          childrenField: subItemsField,
+          expandIcons: true,
+          onItemclick: _this2.onChange,
+          on: _this2.v3 ? undefined : {
+            "itemclick": _this2.onChange,
+            "expandchange": _this2.onExpand,
+            "focus": _this2.onFocus,
+            "blur": _this2.onBlur,
+            "keydown": _this2.onWrapperKeyDown
+          },
+          onExpandchange: _this2.onExpand,
+          onFocus: _this2.onFocus,
+          onBlur: _this2.onBlur,
+          onKeydown: _this2.onWrapperKeyDown,
+          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,
@@ -694,17 +758,17 @@ var DropDownTreeVue2 = {
         onChange: _this2.onFilterChange,
         on: _this2.v3 ? undefined : {
           "change": _this2.onFilterChange,
-          "keydown": _this2.onInputKeyDown
+          "keydown": _this2.onInputKeyDown,
+          "blur": _this2.onBlur
         },
         onKeydown: _this2.onInputKeyDown,
+        onBlur: _this2.onBlur,
         size: size,
         rounded: rounded,
         fillMode: fillMode
       }), header && h("div", {
         "class": "k-list-header"
-      }, [header]), dataItems.length > 0 ?
-      // @ts-ignore
-      h(TreeView, {
+      }, [header]), dataItems.length > 0 ? h(TreeView, {
         ref: setRef(_this2, 'treeView'),
         tabIndex: tabIndex,
         attrs: _this2.v3 ? undefined : {
@@ -742,70 +806,12 @@ var DropDownTreeVue2 = {
         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(_this2, 'input'),
-      onChange: _this2.onFilterChange,
-      on: _this2.v3 ? undefined : {
-        "change": _this2.onFilterChange,
-        "keydown": _this2.onInputKeyDown
-      },
-      onKeydown: _this2.onInputKeyDown,
-      size: size,
-      rounded: rounded,
-      fillMode: fillMode
-    }), header && h("div", {
-      "class": "k-list-header"
-    }, [header]), dataItems.length > 0 ? h(TreeView, {
-      ref: setRef(_this2, 'treeView'),
-      tabIndex: tabIndex,
-      attrs: _this2.v3 ? undefined : {
-        tabIndex: tabIndex,
-        dataItems: dataItems,
-        focusIdField: dataItemKey,
-        textField: _this2.$props.textField,
-        selectField: selectField,
-        expandField: _this2.$props.expandField,
-        childrenField: subItemsField,
-        expandIcons: true,
-        size: size,
-        item: itemTemplate
-      },
-      dataItems: dataItems,
-      focusIdField: dataItemKey,
-      textField: _this2.$props.textField,
-      selectField: selectField,
-      expandField: _this2.$props.expandField,
-      childrenField: subItemsField,
-      expandIcons: true,
-      onItemclick: _this2.onChange,
-      on: _this2.v3 ? undefined : {
-        "itemclick": _this2.onChange,
-        "expandchange": _this2.onExpand,
-        "focus": _this2.onFocus,
-        "blur": _this2.onBlur,
-        "keydown": _this2.onWrapperKeyDown
-      },
-      onExpandchange: _this2.onExpand,
-      onFocus: _this2.onFocus,
-      onBlur: _this2.onBlur,
-      onKeydown: _this2.onWrapperKeyDown,
-      size: size,
-      item: itemTemplate
-    }) : noDataTemplate, footer && h("div", {
-      "class": "k-list-footer"
-    }, [footer])])]);
+      }, [footer])])]);
+    };
     // The following one combines the default rendering of the MultiSelect and the Adaptive rendering.
     // This is needed because of Vue 2 specifics
-    var dropdowntree = [component, renderAdaptive && renderAdaptiveListContainer.call(this)];
-    var dropdowntreeToRender = isV3 ? dropdowntree : this.$props.adaptive ? h("span", [dropdowntree]) : component;
+    var dropdowntree = [isV3 ? h(component.call(this), __assign({}, this.$attrs)) : component.call(this), renderAdaptive && renderAdaptiveListContainer.call(this)];
+    var dropdowntreeToRender = isV3 ? dropdowntree : this.$props.adaptive ? h("span", [dropdowntree]) : component.call(this);
     return label ?
     // @ts-ignore function children
     h(FloatingLabel, {