@progress/kendo-vue-dropdowns 3.14.2 → 3.15.0-dev.202309281301

package/dist/es/ComboBox/ComboBox.js

@@ -19,7 +19,7 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 import DropDownBase from '../common/DropDownBase';
 import { GroupStickyHeader } from '../common/GroupStickyHeader';
-import { guid, classNames, Keys, templateRendering, getListeners, getTemplate, kendoThemeMaps, getRef, setRef, Icon } from '@progress/kendo-vue-common';
+import { guid, classNames, Keys, templateRendering, getListeners, kendoThemeMaps, getRef, setRef, Icon, canUseDOM } from '@progress/kendo-vue-common';
 import { Button as KButton } from '@progress/kendo-vue-buttons';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -30,7 +30,10 @@ import { List } from '../common/List';
 import { ClearButton } from '../common/ClearButton';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { expandButton, messages } from '../messages/main';
-import { caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, xIcon } from '@progress/kendo-svg-icons';
+import { MOBILE_SMALL_DEVICE, MOBILE_MEDIUM_DEVICE } from '../common/constants';
+import { ActionSheet } from '@progress/kendo-vue-layout';
+import { ListFilter } from '../common/ListFilter';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 /**
  * @hidden
@@ -178,6 +181,14 @@ var ComboBoxVue2 = {
     },
     groupField: {
       type: String
+    },
+    adaptive: {
+      type: Boolean,
+      default: undefined
+    },
+    adaptiveTitle: {
+      type: String,
+      default: undefined
     }
   },
   inject: {
@@ -202,10 +213,13 @@ var ComboBoxVue2 = {
       suggested: '',
       group: undefined,
       isScrolling: false,
-      itemHeight: 0
+      itemHeight: 0,
+      state: undefined,
+      windowWidth: 0
     };
   },
   created: function created() {
+    this.observer = null;
     this.valueDuringOnChange = undefined;
     this.currentText = undefined;
     this.currentValue = undefined;
@@ -232,6 +246,10 @@ var ComboBoxVue2 = {
     };
   },
   mounted: function mounted() {
+    this.observer = canUseDOM && new ResizeObserver(this.calculateMedia);
+    if ((document === null || document === void 0 ? void 0 : document.body) && this.observer) {
+      this.observer.observe(document.body);
+    }
     this.hasMounted = true;
     // @ts-ignore
     this.input = this.v3 ? this.inputRef.input : this.$refs.input.input;
@@ -240,6 +258,11 @@ var ComboBoxVue2 = {
     this.base.didMount();
     this.setValidity();
   },
+  destroyed: !!isV3 ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
   updated: function updated() {
     var _a;
     var _b = this.$props,
@@ -249,7 +272,7 @@ var ComboBoxVue2 = {
       virtual = _b.virtual,
       groupField = _b.groupField,
       textField = _b.textField;
-    var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+    var opened = this.isOpen;
     var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
     var opening = !prevOpened && opened;
     var closing = prevOpened && !opened;
@@ -331,6 +354,13 @@ var ComboBoxVue2 = {
         this.virtualTotalHasChanged = true;
       }
       this.virtualHasChanged = true;
+    },
+    isOpen: function isOpen() {
+      var _this = this;
+      setTimeout(function () {
+        var listItem = document.querySelector('.k-list-item');
+        _this.itemHeight = _this.base.getListItemHeight(listItem);
+      }, 100);
     }
   },
   computed: {
@@ -358,6 +388,30 @@ var ComboBoxVue2 = {
           'k-rtl': this.$props.dir === 'rtl'
         };
       }
+    },
+    isOpen: {
+      get: function get() {
+        return this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      }
+    },
+    animationStyles: {
+      get: function get() {
+        return this.windowWidth <= MOBILE_SMALL_DEVICE ? {
+          top: 0,
+          width: '100%',
+          height: '100%'
+        } : undefined;
+      }
+    },
+    classNameAdaptive: {
+      get: function get() {
+        return this.windowWidth <= MOBILE_SMALL_DEVICE ? 'k-adaptive-actionsheet k-actionsheet-fullscreen' : 'k-adaptive-actionsheet k-actionsheet-bottom';
+      }
+    },
+    adaptiveState: {
+      get: function get() {
+        return this.windowWidth <= MOBILE_MEDIUM_DEVICE && this.$props.adaptive;
+      }
     }
   },
   methods: {
@@ -451,8 +505,13 @@ var ComboBoxVue2 = {
     },
     toggleBtnClick: function toggleBtnClick(event) {
       var state = this.base.initState();
+      var opened = this.isOpen;
+      var renderAdaptive = this.adaptiveState;
       state.event = event;
       this.base.togglePopup(state);
+      if (!opened && renderAdaptive) {
+        this.base.filterChanged('', state);
+      }
       this.applyState(state);
     },
     applyValueOnEnter: function applyValueOnEnter(value, state) {
@@ -462,7 +521,7 @@ var ComboBoxVue2 = {
         dataItems = _c === void 0 ? [] : _c,
         textField = _b.textField,
         allowCustom = _b.allowCustom;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var currentValueText = getItemValue(this.computedValue(), textField);
       var valueIndex = currentValueText === value ? this.index : getItemIndexByText(dataItems, value, textField);
       var itemSelected = valueIndex !== -1;
@@ -496,11 +555,11 @@ var ComboBoxVue2 = {
         dataItems = _c === void 0 ? [] : _c,
         textField = _b.textField,
         allowCustom = _b.allowCustom;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var valueItemText = getItemValue(this.computedValue(), textField);
       this.suggested = '';
       if (text === valueItemText || text === '' && !isPresent(valueItemText)) {
-        if (opened) {
+        if (opened && !this.adaptiveState) {
           this.base.togglePopup(state);
         }
         return this.applyState(state);
@@ -519,13 +578,13 @@ var ComboBoxVue2 = {
         state.data.currentText = undefined;
         this.base.filterChanged('', state);
       }
-      if (opened) {
+      if (opened && !this.adaptiveState) {
         this.base.togglePopup(state);
       }
       this.applyState(state);
     },
     selectFocusedItem: function selectFocusedItem(text, state) {
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var _a = this.$props,
         _b = _a.dataItems,
         dataItems = _b === void 0 ? [] : _b,
@@ -576,7 +635,7 @@ var ComboBoxVue2 = {
         this.isScrolling = false;
       }
       var keyCode = event.keyCode;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var state = this.base.initState();
       state.event = event;
       if (!event.altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
@@ -597,6 +656,10 @@ var ComboBoxVue2 = {
           event.preventDefault();
           this.applyValueOnEnter(event.currentTarget.value, state);
         } else if (keyCode === Keys.esc) {
+          if (this.adaptiveState) {
+            this.toggleBtnClick(event); // Handle the closing on "Esc" key press in adaptive mode
+          }
+
           togglePopup();
         }
       } else {
@@ -610,7 +673,7 @@ var ComboBoxVue2 = {
     inputOnChange: function inputOnChange(event) {
       var state = this.base.initState();
       state.event = event;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var input = event.currentTarget;
       var value = input.value;
       if (this.$props.suggest) {
@@ -656,7 +719,7 @@ var ComboBoxVue2 = {
         state.data.currentText = undefined;
       }
       this.triggerOnChange(null, state);
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       if (opened) {
         this.base.togglePopup(state);
       }
@@ -714,6 +777,12 @@ var ComboBoxVue2 = {
       this.base.applyState(state);
       this.valueDuringOnChange = undefined;
     },
+    calculateMedia: function calculateMedia(entries) {
+      for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+        var entry = entries_1[_i];
+        this.windowWidth = entry.target.clientWidth;
+      }
+    },
     repositionPopup: function repositionPopup() {
       this.base.repositionPopup();
     },
@@ -727,6 +796,7 @@ var ComboBoxVue2 = {
       var groupField = this.$props.groupField;
       var _b = this.$props.dataItems,
         dataItems = _b === void 0 ? [] : _b;
+      var group;
       if (!groupField || !dataItems.length) {
         return;
       }
@@ -735,8 +805,8 @@ var ComboBoxVue2 = {
       var scrollTop = target.scrollTop - vs.skip * itemHeight;
       if (groupField) {
         dataItems = this.base.getGroupedDataModernMode(dataItems, groupField);
+        group = dataItems[0][groupField];
       }
-      var group = dataItems[0][groupField];
       for (var i = 1; i < dataItems.length; i++) {
         if (itemHeight * i > scrollTop) {
           break;
@@ -753,6 +823,7 @@ var ComboBoxVue2 = {
   },
   render: function render(createElement) {
     var _a;
+    var _this = this;
     var h = gh || createElement;
     var _b = this.$props,
       dir = _b.dir,
@@ -769,7 +840,12 @@ var ComboBoxVue2 = {
       virtual = _b.virtual,
       size = _b.size,
       fillMode = _b.fillMode,
-      rounded = _b.rounded;
+      rounded = _b.rounded,
+      adaptiveTitle = _b.adaptiveTitle,
+      header = _b.header,
+      footer = _b.footer,
+      groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender,
+      placeholder = _b.placeholder;
     var focused = this.currentFocused;
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
@@ -784,12 +860,146 @@ var ComboBoxVue2 = {
       height: '200px'
     }, this.$props.popupSettings);
     var ariaLabelExpandButton = provideLocalizationService(this).toLanguageString(expandButton, messages[expandButton]);
+    var opened = this.isOpen;
+    var renderAdaptive = this.adaptiveState;
     vs.enabled = virtual !== undefined;
     if (virtual !== undefined) {
       vs.skip = virtual.skip;
       vs.total = virtual.total;
       vs.pageSize = virtual.pageSize;
     }
+    if (this.group === undefined && this.$props.groupField !== undefined) {
+      this.group = getItemValue(this.$props.dataItems[0], this.$props.groupField);
+    }
+    var handleMobileFilterChange = function handleMobileFilterChange(event) {
+      var state = _this.base.initState();
+      state.event = event;
+      var eventTargetValue = event.event.target.value;
+      state.data.text = eventTargetValue;
+      _this.base.filterChanged(eventTargetValue, state);
+      _this.applyState(state);
+    };
+    var adaptiveActionSheetHeaderTemplateDef = function adaptiveActionSheetHeaderTemplateDef() {
+      return [h("div", {
+        "class": "k-actionsheet-titlebar-group k-hbox"
+      }, [h("div", {
+        "class": "k-actionsheet-title"
+      }, [h("div", {
+        "class": "k-text-center"
+      }, [adaptiveTitle]), placeholder && h("div", {
+        "class": "k-actionsheet-subtitle k-text-center"
+      }, [placeholder])]), h("div", {
+        "class": "k-actionsheet-actions"
+      }, [h(KButton, {
+        tabindex: 5,
+        attrs: this.v3 ? undefined : {
+          tabindex: 5,
+          "aria-label": "Cancel",
+          "aria-disabled": "false",
+          type: "button",
+          fillMode: "flat",
+          icon: "x",
+          svgIcon: xIcon
+        },
+        "aria-label": "Cancel",
+        "aria-disabled": "false",
+        type: "button",
+        fillMode: "flat",
+        onClick: _this.toggleBtnClick,
+        on: this.v3 ? undefined : {
+          "click": _this.toggleBtnClick
+        },
+        icon: "x",
+        svgIcon: xIcon
+      })])]), h("div", {
+        "class": "k-actionsheet-titlebar-group k-actionsheet-filter"
+      }, [renderMobileListFilter.call(_this)])];
+    };
+    var adaptiveActionSheetHeaderTemplate = templateRendering.call(this, adaptiveActionSheetHeaderTemplateDef, getListeners.call(this));
+    var adaptiveActionSheetContentTemplateDef = function adaptiveActionSheetContentTemplateDef() {
+      var _a;
+      var headerToRender = base.getTemplateDef.call(_this, header, h);
+      var footerToRender = base.getTemplateDef.call(_this, footer, h);
+      var groupStickyHeaderTemplate = templateRendering.call(_this, groupStickyHeaderItemRender, getListeners.call(_this));
+      var dataItems = _this.$props.dataItems || [];
+      return h("div", {
+        "class": "k-list-container"
+      }, [headerToRender && h("div", {
+        "class": "k-list-header"
+      }, [headerToRender]), h("div", {
+        "class": classNames('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = !renderAdaptive ? size : false, _a['k-list-lg'] = renderAdaptive ? true : false, _a['k-virtual-list'] = vs.enabled, _a))
+      }, [header && h("div", {
+        "class": "k-list-header"
+      }, [header]), _this.group && dataItems.length !== 0 && h(GroupStickyHeader, {
+        group: _this.group,
+        attrs: this.v3 ? undefined : {
+          group: _this.group,
+          render: groupStickyHeaderTemplate
+        },
+        render: groupStickyHeaderTemplate
+      }), renderList.call(_this), footerToRender && h("div", {
+        className: "k-list-footer",
+        attrs: this.v3 ? undefined : {
+          className: "k-list-footer"
+        }
+      }, [footerToRender])])]);
+    };
+    var adaptiveActionSheetContentTemplate = templateRendering.call(this, adaptiveActionSheetContentTemplateDef, getListeners.call(this));
+    var renderAdaptiveListContainer = function renderAdaptiveListContainer() {
+      return h(ActionSheet, {
+        expand: opened,
+        attrs: this.v3 ? undefined : {
+          expand: opened,
+          animation: true,
+          animationStyles: this.animationStyles,
+          className: this.classNameAdaptive,
+          contentClassName: '!k-overflow-hidden',
+          header: adaptiveActionSheetHeaderTemplate,
+          content: adaptiveActionSheetContentTemplate,
+          navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
+        },
+        animation: true,
+        animationStyles: this.animationStyles,
+        className: this.classNameAdaptive,
+        contentClassName: '!k-overflow-hidden',
+        header: adaptiveActionSheetHeaderTemplate,
+        content: adaptiveActionSheetContentTemplate,
+        onClose: this.toggleBtnClick,
+        on: this.v3 ? undefined : {
+          "close": this.toggleBtnClick
+        },
+        navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
+      });
+    };
+    var renderMobileListFilter = function renderMobileListFilter() {
+      var state = this.base.initState();
+      var mobileText = state.data.text;
+      return h(ListFilter, {
+        adaptiveMode: true,
+        attrs: this.v3 ? undefined : {
+          adaptiveMode: true,
+          value: mobileText,
+          size: this.$props.size,
+          rounded: this.$props.rounded,
+          fillMode: this.$props.fillMode
+        },
+        value: mobileText,
+        ref: 'filterInput',
+        onChange: function onChange(ev) {
+          return handleMobileFilterChange(ev);
+        },
+        on: this.v3 ? undefined : {
+          "change": function onChange(ev) {
+            return handleMobileFilterChange(ev);
+          },
+          "keydown": this.onInputKeyDown
+        },
+        onKeydown: this.onInputKeyDown,
+        size: this.$props.size,
+        rounded: this.$props.rounded,
+        fillMode: this.$props.fillMode
+      });
+    };
     var renderList = function renderList() {
       var _this2 = this;
       var _a;
@@ -806,7 +1016,6 @@ var ComboBoxVue2 = {
         };
       }
       var skip = virtual.skip;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var translate = "translateY(".concat(vs.translate, "px)");
       var focusedIndex = opened ? this.getFocusedIndex() : undefined;
       var value = isPresent(text) && text !== selectedItemText ? null : this.computedValue();
@@ -827,7 +1036,7 @@ var ComboBoxVue2 = {
             valueField: dataItemKey,
             optionsGuid: base.guid,
             wrapperStyle: {
-              maxHeight: popupSettings.height
+              maxHeight: !renderAdaptive ? popupSettings.height : undefined
             },
             wrapperCssClass: classNames('k-list-content', (_a = {}, _a['k-list-scroller'] = !this.$props.virtual, _a)),
             listStyle: vs.enabled ? {
@@ -848,7 +1057,7 @@ var ComboBoxVue2 = {
           optionsGuid: base.guid,
           ref: 'list',
           wrapperStyle: {
-            maxHeight: popupSettings.height
+            maxHeight: !renderAdaptive ? popupSettings.height : undefined
           },
           wrapperCssClass: classNames('k-list-content', (_a = {}, _a['k-list-scroller'] = !this.$props.virtual, _a)),
           listStyle: vs.enabled ? {
@@ -880,18 +1089,9 @@ var ComboBoxVue2 = {
     var renderListContainer = function renderListContainer() {
       var _this3 = this;
       var _a;
-      var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
-      var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
       var groupStickyHeaderTemplate = templateRendering.call(this, this.$props.groupStickyHeaderItemRender, getListeners.call(this));
-      var header = getTemplate.call(this, {
-        h: h,
-        template: headerTemplate
-      });
-      var footer = getTemplate.call(this, {
-        h: h,
-        template: footerTemplate
-      });
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var headerListContainer = base.getTemplateDef.call(this, header);
+      var footerListContainer = base.getTemplateDef.call(this, footer);
       var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
       var dataItems = this.$props.dataItems || [];
       if (this.group === undefined && this.$props.groupField !== undefined) {
@@ -928,36 +1128,35 @@ var ComboBoxVue2 = {
           }),
           dir: dir !== undefined ? dir : this.base.dirCalculated
         }, this.v3 ? function () {
-          return [header && h("div", {
+          return [headerListContainer && h("div", {
             "class": "k-list-header"
-          }, [header]), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
+          }, [headerListContainer]), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
             group: _this3.group,
             attrs: _this3.v3 ? undefined : {
               group: _this3.group,
               render: groupStickyHeaderTemplate
             },
             render: groupStickyHeaderTemplate
-          }), renderList.call(_this3), footer && h("div", {
+          }), renderList.call(_this3), footerListContainer && h("div", {
             "class": "k-list-footer"
-          }, [footer])];
-        } : [header && h("div", {
+          }, [footerListContainer])];
+        } : [headerListContainer && h("div", {
           "class": "k-list-header"
-        }, [header]), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
+        }, [headerListContainer]), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
           group: _this3.group,
           attrs: _this3.v3 ? undefined : {
             group: _this3.group,
             render: groupStickyHeaderTemplate
           },
           render: groupStickyHeaderTemplate
-        }), renderList.call(_this3), footer && h("div", {
+        }), renderList.call(_this3), footerListContainer && h("div", {
           "class": "k-list-footer"
-        }, [footer])])
+        }, [footerListContainer])])
       );
     };
     var renderSearchBar = function renderSearchBar(searchText, searchId) {
       var _this = this;
       var _a = this.$props,
-        placeholder = _a.placeholder,
         tabIndex = _a.tabIndex,
         _b = _a.dataItems,
         dataItems = _b === void 0 ? [] : _b,
@@ -967,7 +1166,6 @@ var ComboBoxVue2 = {
           skip: 0
         };
       }
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
       var value = this.computedValue();
       var selectedIndex = Math.max(0, dataItems.findIndex(function (i) {
         return areSame(i, value, dataItemKey);
@@ -1022,7 +1220,7 @@ var ComboBoxVue2 = {
         })
       );
     };
-    var combobox = h("span", {
+    var comboboxDefault = h("span", {
       "class": classNames('k-combobox k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a['k-focus'] = focused && !disabled, _a), className),
       ref: setRef(this, 'kendoAnchor', this.anchor),
       style: !label ? style : __assign(__assign({}, style), {
@@ -1081,7 +1279,11 @@ var ComboBoxVue2 = {
       onMousedown: function mousedown(e) {
         return e.preventDefault();
       }
-    }), renderListContainer.call(this)]);
+    }), !renderAdaptive && renderListContainer.call(this)]);
+    // The following one combines the default rendering of the Combobox and the Adaptive rendering.
+    // This is needed because of Vue 2 specifics
+    var combobox = [comboboxDefault, renderAdaptive && renderAdaptiveListContainer.call(this)];
+    var comboboxToRender = isV3 ? combobox : this.$props.adaptive ? h("span", [combobox]) : comboboxDefault;
     return label ? h("span", {
       "class": this.spanClassNames,
       onFocusin: this.handleFocus,
@@ -1092,7 +1294,7 @@ var ComboBoxVue2 = {
       attrs: this.v3 ? undefined : {
         dir: this.$props.dir
       }
-    }, [combobox, this.$props.label ? id ? h("label", {
+    }, [comboboxToRender, this.$props.label ? id ? h("label", {
       "for": id,
       attrs: this.v3 ? undefined : {
         "for": id
@@ -1100,7 +1302,7 @@ var ComboBoxVue2 = {
       "class": "k-label"
     }, [this.$props.label]) : h("span", {
       "class": "k-label"
-    }, [this.$props.label]) : null]) : combobox;
+    }, [this.$props.label]) : null]) : comboboxToRender;
   }
 };
 /**

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

@@ -266,4 +266,12 @@ export interface ComboBoxProps extends FormComponentProps {
      * 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;
+    /**
+     * Provides different rendering of the popup element based on the screen dimensions ([see example]({% slug adaptive_rendering_combobox %})).
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup ([see example]({% slug adaptive_rendering_combobox %})).
+     */
+    adaptiveTitle?: string;
 }

package/dist/es/DropDownList/DropDownList.d.ts

@@ -83,6 +83,9 @@ export interface DropDownListComputed {
     [key: string]: any;
     spanClassNames: any;
     index: number;
+    isOpen: boolean;
+    classNameAdaptive: string;
+    animationStyles: object | undefined;
 }
 /**
  * @hidden