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

package/dist/npm/AutoComplete/AutoComplete.js

@@ -26,6 +26,7 @@ var SearchBar_1 = require("./../common/SearchBar");
 var ListContainer_1 = require("./../common/ListContainer");
 var List_1 = require("./../common/List");
 var DropDownBase_1 = require("../common/DropDownBase");
+var GroupStickyHeader_1 = require("../common/GroupStickyHeader");
 var ClearButton_1 = require("../common/ClearButton");
 var utils_1 = require("../common/utils");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
@@ -103,6 +104,8 @@ var AutoCompleteVue2 = {
       }
     },
     itemRender: [String, Function, Object],
+    groupHeaderItemRender: [String, Function, Object],
+    groupStickyHeaderItemRender: [String, Function, Object],
     listNoDataRender: [String, Function, Object],
     focusedItemIndex: Function,
     header: [String, Function, Object],
@@ -133,6 +136,9 @@ var AutoCompleteVue2 = {
       validator: function validator(value) {
         return ['small', 'medium', 'large'].includes(value);
       }
+    },
+    groupField: {
+      type: String
     }
   },
   data: function data() {
@@ -148,7 +154,10 @@ var AutoCompleteVue2 = {
         last: ''
       },
       valueDuringOnChange: {},
-      suggested: ''
+      suggested: '',
+      group: undefined,
+      isScrolling: false,
+      itemHeight: 0
     };
   },
   created: function created() {
@@ -196,8 +205,12 @@ var AutoCompleteVue2 = {
     }
   },
   updated: function updated() {
-    var _a = this.$props.dataItems,
-      dataItems = _a === void 0 ? [] : _a;
+    var _a;
+    var _b = this.$props,
+      _c = _b.groupField,
+      groupField = _c === void 0 ? '' : _c,
+      _d = _b.dataItems,
+      dataItems = _d === void 0 ? [] : _d;
     var focusedIndex = this.focusedIndex();
     var focusedItem = dataItems[focusedIndex];
     var dataChanged = this.prevData !== dataItems;
@@ -212,8 +225,22 @@ var AutoCompleteVue2 = {
       // @ts-ignore
       this.base.list = list.list;
     }
-    if (dataItems.length && (opened && (focusedItemChanged || dataChanged) || opening)) {
-      this.base.scrollToItem(focusedIndex);
+    if (groupField === '') {
+      if (opened && (focusedItemChanged || dataChanged) || opening) {
+        this.base.scrollToItem(focusedIndex);
+      }
+    } else if (!this.isScrolling) {
+      var focusedItemIndex = (_a = this.base.getGroupedDataModernMode(dataItems, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
+      if (opening) {
+        // Resets the sticky header group value for scenarios with open/close of component's popup
+        if (dataItems && dataItems.length !== 0) {
+          this.base.resetGroupStickyHeader(dataItems[0][groupField], this);
+        }
+        this.base.scrollToItem(focusedItemIndex);
+      }
+      if (opened && prevOpened && focusedItemChanged) {
+        this.base.scrollToItem(focusedItemIndex);
+      }
     }
     this.setValidity();
   },
@@ -383,6 +410,10 @@ var AutoCompleteVue2 = {
         this.togglePopup(state);
       }
       state.data.focusedItem = undefined;
+      // Resets the value of the StickyHeader when filtering the data or just entering symbols in the input
+      if (this.prevData && this.prevData.length !== this.$props.dataItems) {
+        state.data.group = undefined;
+      }
       this.applyState(state);
     },
     clearButtonClick: function clearButtonClick(event) {
@@ -402,6 +433,9 @@ var AutoCompleteVue2 = {
       this.applyState(state);
     },
     onInputKeyDown: function onInputKeyDown(event) {
+      if (this.isScrolling) {
+        this.isScrolling = false;
+      }
       var keyCode = event.keyCode;
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var state = this.base.initState();
@@ -487,6 +521,39 @@ var AutoCompleteVue2 = {
     },
     repositionPopup: function repositionPopup() {
       this.base.repositionPopup();
+    },
+    onScroll: function onScroll(event) {
+      this.isScrolling = true;
+      var state = this.base.initState();
+      var list = this.base.list;
+      var groupField = this.$props.groupField;
+      var _a = this.$props.dataItems,
+        dataItems = _a === void 0 ? [] : _a;
+      if (!groupField || !dataItems.length) {
+        return;
+      }
+      var itemHeight = this.itemHeight || (list.children ? list.children[0].offsetHeight : 0);
+      var target = event.target;
+      var scrollTop = target.scrollTop;
+      if (groupField) {
+        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+      }
+      var group = dataItems[0][groupField];
+      if (itemHeight === 0) {
+        itemHeight = 28;
+      }
+      for (var i = 1; i < dataItems.length; i++) {
+        if (itemHeight * i > scrollTop) {
+          break;
+        }
+        if (dataItems[i] && dataItems[i][groupField]) {
+          group = dataItems[i][groupField];
+        }
+      }
+      if (group !== this.group) {
+        state.data.group = group;
+        this.applyState(state);
+      }
     }
   },
   render: function render(createElement) {
@@ -578,11 +645,15 @@ var AutoCompleteVue2 = {
     var renderList = function renderList() {
       var _a = this.$props,
         textField = _a.textField,
-        _b = _a.dataItems,
-        dataItems = _b === void 0 ? [] : _b;
+        groupField = _a.groupField;
+      var dataItems = this.$props.dataItems || [];
       var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
+      var groupHeaderItemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.groupHeaderItemRender, kendo_vue_common_1.getListeners.call(this));
       var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      if (groupField) {
+        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+      }
       return (
         // @ts-ignore
         h(List_1.List, {
@@ -602,7 +673,9 @@ var AutoCompleteVue2 = {
             },
             wrapperCssClass: "k-list-content",
             itemRender: itemRender,
-            noDataRender: listNoDataRender
+            groupHeaderItemRender: groupHeaderItemRender,
+            noDataRender: listNoDataRender,
+            groupField: groupField
           },
           show: opened,
           dataItems: dataItems.slice(),
@@ -619,10 +692,14 @@ var AutoCompleteVue2 = {
           wrapperCssClass: "k-list-content",
           onListclick: this.handleItemClick,
           on: this.v3 ? undefined : {
-            "listclick": this.handleItemClick
+            "listclick": this.handleItemClick,
+            "scroll": this.onScroll
           },
           itemRender: itemRender,
-          noDataRender: listNoDataRender
+          groupHeaderItemRender: groupHeaderItemRender,
+          noDataRender: listNoDataRender,
+          groupField: groupField,
+          onScroll: this.onScroll
         })
       );
     };
@@ -631,6 +708,7 @@ var AutoCompleteVue2 = {
       var _a;
       var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
       var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
+      var groupStickyHeaderTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.groupStickyHeaderItemRender, kendo_vue_common_1.getListeners.call(this));
       var header = kendo_vue_common_1.getTemplate.call(this, {
         h: h,
         template: headerTemplate
@@ -641,6 +719,10 @@ var AutoCompleteVue2 = {
       });
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
+      var dataItems = this.$props.dataItems || [];
+      if (this.group === undefined && this.$props.groupField !== undefined) {
+        this.group = (0, utils_1.getItemValue)(dataItems[0], this.$props.groupField);
+      }
       return (
         // @ts-ignore  function children
         h(ListContainer_1.ListContainer, {
@@ -674,12 +756,26 @@ var AutoCompleteVue2 = {
         }, this.v3 ? function () {
           return [header && h("div", {
             "class": "k-list-header"
-          }, [header]), renderList.call(_this2), footer && h("div", {
+          }, [header]), _this2.group && dataItems.length !== 0 && h(GroupStickyHeader_1.GroupStickyHeader, {
+            group: _this2.group,
+            attrs: _this2.v3 ? undefined : {
+              group: _this2.group,
+              render: groupStickyHeaderTemplate
+            },
+            render: groupStickyHeaderTemplate
+          }), renderList.call(_this2), footer && h("div", {
             "class": "k-list-footer"
           }, [footer])];
         } : [header && h("div", {
           "class": "k-list-header"
-        }, [header]), renderList.call(_this2), footer && h("div", {
+        }, [header]), _this2.group && dataItems.length !== 0 && h(GroupStickyHeader_1.GroupStickyHeader, {
+          group: _this2.group,
+          attrs: _this2.v3 ? undefined : {
+            group: _this2.group,
+            render: groupStickyHeaderTemplate
+          },
+          render: groupStickyHeaderTemplate
+        }), renderList.call(_this2), footer && h("div", {
           "class": "k-list-footer"
         }, [footer])])
       );

package/dist/npm/AutoComplete/AutoCompleteProps.d.ts

@@ -215,4 +215,16 @@ export interface AutoCompleteProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Sets the data item field that represents the start of a group. Applicable to objects data.
+     */
+    groupField?: string;
+    /**
+     * Fires when a AutoComplete group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: any;
+    /**
+     * Fires when a AutoComplete sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    groupStickyHeaderItemRender?: any;
 }

package/dist/npm/ComboBox/ComboBox.js

@@ -24,6 +24,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 var DropDownBase_1 = require("../common/DropDownBase");
+var GroupStickyHeader_1 = require("../common/GroupStickyHeader");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
@@ -125,6 +126,8 @@ var ComboBoxVue2 = {
       }
     },
     itemRender: [String, Function, Object],
+    groupHeaderItemRender: [String, Function, Object],
+    groupStickyHeaderItemRender: [String, Function, Object],
     listNoDataRender: [String, Function, Object],
     focusedItemIndex: Function,
     header: [String, Function, Object],
@@ -174,6 +177,9 @@ var ComboBoxVue2 = {
       validator: function validator(value) {
         return ['small', 'medium', 'large'].includes(value);
       }
+    },
+    groupField: {
+      type: String
     }
   },
   inject: {
@@ -195,7 +201,10 @@ var ComboBoxVue2 = {
       _skipFocusEvent: false,
       valueDuringOnChange: {},
       _navigated: false,
-      suggested: ''
+      suggested: '',
+      group: undefined,
+      isScrolling: false,
+      itemHeight: 0
     };
   },
   created: function created() {
@@ -234,11 +243,14 @@ var ComboBoxVue2 = {
     this.setValidity();
   },
   updated: function updated() {
-    var _a = this.$props,
-      _b = _a.dataItems,
-      dataItems = _b === void 0 ? [] : _b,
-      dataItemKey = _a.dataItemKey,
-      virtual = _a.virtual;
+    var _a;
+    var _b = this.$props,
+      _c = _b.dataItems,
+      dataItems = _c === void 0 ? [] : _c,
+      dataItemKey = _b.dataItemKey,
+      virtual = _b.virtual,
+      groupField = _b.groupField,
+      textField = _b.textField;
     var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
     var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
     var opening = !prevOpened && opened;
@@ -270,17 +282,37 @@ var ComboBoxVue2 = {
       var selectedItemIndex = dataItems.findIndex(function (i) {
         return (0, utils_1.areSame)(i, selectedItem, dataItemKey);
       });
+      // Needed to calculate the proper item index when in grouping mode
+      if (groupField) {
+        selectedItemIndex = (_a = this.base.getGroupedDataModernMode(dataItems, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(selectedItem);
+      }
       var selectedItemChanged = !(0, utils_1.areSame)(prevSelectedItem, selectedItem, dataItemKey);
       if (opening && virtual) {
         this.base.scrollToVirtualItem(virtual, selectedItemIndex);
         this.prevCurrentOpened = true;
       } else if (opening && !virtual) {
-        this.base.scrollToItem(selectedItem ? selectedItemIndex : this.getFocusedIndex());
+        // Resets the sticky header group value for scenarios with open/close of component's popup
+        if (dataItems && dataItems.length !== 0) {
+          this.base.resetGroupStickyHeader(dataItems[0][groupField], this);
+        }
+        this.base.scrollToItem(selectedItemIndex);
         this.prevCurrentOpened = true;
       } else if (opened && prevOpened && selectedItem && selectedItemChanged) {
         this.base.scrollToItem(selectedItemIndex);
-      } else if (opened && !selectedItem) {
-        this.base.scrollToItem(this.getFocusedIndex());
+      } else if (opened && !selectedItem && !this.isScrolling) {
+        var groupHeadersBeforeFocus = 0;
+        // Handle the items' focusing when working with grouped data
+        if (groupField && this.getFocusedIndex() !== -1 && dataItems.length > 0) {
+          var focusedElemBeforeGrouping_1 = dataItems[this.getFocusedIndex()][textField];
+          var gropedDataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+          var groupedDataIdex = gropedDataItems.findIndex(function (el) {
+            return el[textField] === focusedElemBeforeGrouping_1;
+          });
+          groupHeadersBeforeFocus = gropedDataItems.slice(0, groupedDataIdex).filter(function (el) {
+            return Object.keys(el).length === 1;
+          }).length;
+        }
+        this.base.scrollToItem(this.getFocusedIndex() + groupHeadersBeforeFocus);
       }
     }
     if (opening && this.input) {
@@ -542,6 +574,9 @@ var ComboBoxVue2 = {
     },
     onInputKeyDown: function onInputKeyDown(event) {
       var _this = this;
+      if (this.isScrolling) {
+        this.isScrolling = false;
+      }
       var keyCode = event.keyCode;
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var state = this.base.initState();
@@ -606,6 +641,10 @@ var ComboBoxVue2 = {
         this.base.togglePopup(state);
       }
       this.base.filterChanged(value, state);
+      // Resets the value of the StickyHeader when filtering the data or just entering symbols in the input
+      if (this.$props.filterable) {
+        state.data.group = undefined;
+      }
       this.applyState(state);
     },
     clearButtonClick: function clearButtonClick(event) {
@@ -679,6 +718,39 @@ var ComboBoxVue2 = {
     },
     repositionPopup: function repositionPopup() {
       this.base.repositionPopup();
+    },
+    onScroll: function onScroll(event) {
+      this.isScrolling = true;
+      var _a = this.base,
+        vs = _a.vs,
+        list = _a.list;
+      vs.scrollHandler(event);
+      var state = this.base.initState();
+      var groupField = this.$props.groupField;
+      var _b = this.$props.dataItems,
+        dataItems = _b === void 0 ? [] : _b;
+      if (!groupField || !dataItems.length) {
+        return;
+      }
+      var itemHeight = this.itemHeight = this.itemHeight || (vs.enabled ? vs.itemHeight : list ? list.children[0].offsetHeight : 0);
+      var target = event.target;
+      var scrollTop = target.scrollTop - vs.skip * itemHeight;
+      if (groupField) {
+        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+      }
+      var group = dataItems[0][groupField];
+      for (var i = 1; i < dataItems.length; i++) {
+        if (itemHeight * i > scrollTop) {
+          break;
+        }
+        if (dataItems[i] && dataItems[i][groupField]) {
+          group = dataItems[i][groupField];
+        }
+      }
+      if (group !== this.group) {
+        state.data.group = group;
+        this.applyState(state);
+      }
     }
   },
   render: function render(createElement) {
@@ -725,9 +797,10 @@ var ComboBoxVue2 = {
       var _a;
       var _b = this.$props,
         dataItemKey = _b.dataItemKey,
-        _c = _b.dataItems,
-        dataItems = _c === void 0 ? [] : _c;
+        groupField = _b.groupField;
+      var dataItems = this.$props.dataItems || [];
       var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
+      var groupHeaderItemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.groupHeaderItemRender, kendo_vue_common_1.getListeners.call(this));
       var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
       if (!virtual) {
         virtual = {
@@ -739,6 +812,9 @@ var ComboBoxVue2 = {
       var translate = "translateY(".concat(vs.translate, "px)");
       var focusedIndex = opened ? this.getFocusedIndex() : undefined;
       var value = (0, utils_1.isPresent)(text) && text !== selectedItemText ? null : this.computedValue();
+      if (groupField) {
+        dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+      }
       return (
         // @ts-ignore  function children
         h(List_1.List, {
@@ -761,7 +837,9 @@ var ComboBoxVue2 = {
             } : undefined,
             skip: skip,
             itemRender: itemRender,
-            noDataRender: listNoDataRender
+            groupHeaderItemRender: groupHeaderItemRender,
+            noDataRender: listNoDataRender,
+            groupField: groupField
           },
           show: opened,
           dataItems: dataItems,
@@ -783,11 +861,13 @@ var ComboBoxVue2 = {
           onListclick: this.handleItemClick,
           on: this.v3 ? undefined : {
             "listclick": this.handleItemClick,
-            "scroll": vs.scrollHandler
+            "scroll": this.onScroll
           },
           itemRender: itemRender,
+          groupHeaderItemRender: groupHeaderItemRender,
           noDataRender: listNoDataRender,
-          onScroll: vs.scrollHandler
+          groupField: groupField,
+          onScroll: this.onScroll
         }, this.v3 ? function () {
           return [renderScrollElement.call(_this2)];
         } : [renderScrollElement.call(_this2)])
@@ -804,6 +884,7 @@ var ComboBoxVue2 = {
       var _a;
       var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
       var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
+      var groupStickyHeaderTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.groupStickyHeaderItemRender, kendo_vue_common_1.getListeners.call(this));
       var header = kendo_vue_common_1.getTemplate.call(this, {
         h: h,
         template: headerTemplate
@@ -814,6 +895,10 @@ var ComboBoxVue2 = {
       });
       var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
+      var dataItems = this.$props.dataItems || [];
+      if (this.group === undefined && this.$props.groupField !== undefined) {
+        this.group = (0, utils_1.getItemValue)(dataItems[0], this.$props.groupField);
+      }
       return (
         // @ts-ignore  function children
         h(ListContainer_1.ListContainer, {
@@ -847,12 +932,26 @@ var ComboBoxVue2 = {
         }, this.v3 ? function () {
           return [header && h("div", {
             "class": "k-list-header"
-          }, [header]), renderList.call(_this3), footer && h("div", {
+          }, [header]), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader_1.GroupStickyHeader, {
+            group: _this3.group,
+            attrs: _this3.v3 ? undefined : {
+              group: _this3.group,
+              render: groupStickyHeaderTemplate
+            },
+            render: groupStickyHeaderTemplate
+          }), renderList.call(_this3), footer && h("div", {
             "class": "k-list-footer"
           }, [footer])];
         } : [header && h("div", {
           "class": "k-list-header"
-        }, [header]), renderList.call(_this3), footer && h("div", {
+        }, [header]), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader_1.GroupStickyHeader, {
+          group: _this3.group,
+          attrs: _this3.v3 ? undefined : {
+            group: _this3.group,
+            render: groupStickyHeaderTemplate
+          },
+          render: groupStickyHeaderTemplate
+        }), renderList.call(_this3), footer && h("div", {
           "class": "k-list-footer"
         }, [footer])])
       );

package/dist/npm/ComboBox/ComboBoxProps.d.ts

@@ -250,4 +250,16 @@ export interface ComboBoxProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Sets the data item field that represents the start of a group. Applicable to objects data.
+     */
+    groupField?: string;
+    /**
+     * Fires when a ComboBox group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: any;
+    /**
+     * Fires when a ComboBox sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    groupStickyHeaderItemRender?: any;
 }