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

package/dist/es/DropDownList/DropDownList.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate, kendoThemeMaps, getTabIndex, setRef, getRef, Icon } from '@progress/kendo-vue-common';
+import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate, kendoThemeMaps, getTabIndex, setRef, getRef, Icon, canUseDOM } from '@progress/kendo-vue-common';
 import { Button as KButton } from '@progress/kendo-vue-buttons';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
@@ -28,8 +28,10 @@ import DropDownBase from '../common/DropDownBase';
 import { GroupStickyHeader } from '../common/GroupStickyHeader';
 import { selectButton, messages } from '../messages/main';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { MOBILE_SMALL_DEVICE, MOBILE_MEDIUM_DEVICE } from '../common/constants';
+import { ActionSheet } from '@progress/kendo-vue-layout';
 import { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame, preventDefaultNonInputs, getFocusedItem } from '../common/utils';
-import { caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, xIcon } from '@progress/kendo-svg-icons';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 /**
  * @hidden
@@ -169,6 +171,14 @@ var DropDownListVue2 = {
     },
     groupField: {
       type: String
+    },
+    adaptive: {
+      type: Boolean,
+      default: undefined
+    },
+    adaptiveTitle: {
+      type: String,
+      default: undefined
     }
   },
   inject: {
@@ -192,7 +202,9 @@ var DropDownListVue2 = {
       _navigated: false,
       group: undefined,
       isScrolling: false,
-      itemHeight: 0
+      itemHeight: 0,
+      state: undefined,
+      windowWidth: 0
     };
   },
   watch: {
@@ -209,9 +221,17 @@ var DropDownListVue2 = {
         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);
     }
   },
   created: function created() {
+    this.observer = null;
     this.valueDuringOnChange = undefined;
     this.currentText = undefined;
     this.currentValue = undefined;
@@ -236,12 +256,21 @@ var DropDownListVue2 = {
     };
   },
   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;
     this.select = getRef(this, 'select');
     this.base.wrapper = getRef(this, 'kendoAnchor', this.anchor);
     this.base.didMount();
     this.setValidity();
   },
+  destroyed: !!isV3 ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
   updated: function updated() {
     var _a;
     var _b = this.$props,
@@ -251,7 +280,7 @@ var DropDownListVue2 = {
       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;
@@ -353,6 +382,30 @@ var DropDownListVue2 = {
       get: function get() {
         return "value-".concat(this.base.guid).concat(this.$props.ariaDescribedBy ? ' ' + this.$props.ariaDescribedBy : '');
       }
+    },
+    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: {
@@ -522,7 +575,7 @@ var DropDownListVue2 = {
           total: 0,
           pageSize: 0
         } : _c;
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var keyCode = event.keyCode;
       var homeOrEndKeys = keyCode === Keys.home || keyCode === Keys.end;
       var upOrDownKeys = keyCode === Keys.up || keyCode === Keys.down;
@@ -558,6 +611,10 @@ var DropDownListVue2 = {
         this.base.togglePopup(state);
         event.preventDefault();
       } else if (shouldOpen || shouldClose) {
+        if (this.adaptiveState) {
+          this.handleWrapperClick(event); // Handle the closing on "Esc" key press in adaptive mode
+        }
+
         this.base.togglePopup(state);
         event.preventDefault();
       } else if (shouldNavigate) {
@@ -580,14 +637,14 @@ var DropDownListVue2 = {
       if (this._skipFocusEvent || !this.currentFocused) {
         return;
       }
-      var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      var opened = this.isOpen;
       var state = this.base.initState();
       state.event = event;
       state.data.currentFocused = false;
       state.events.push({
         type: 'blur'
       });
-      if (opened) {
+      if (opened && !this.adaptiveState) {
         this.base.togglePopup(state);
       }
       this.applyState(state);
@@ -705,6 +762,12 @@ var DropDownListVue2 = {
       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();
     },
@@ -718,6 +781,7 @@ var DropDownListVue2 = {
       var groupField = this.$props.groupField;
       var _b = this.$props.dataItems,
         dataItems = _b === void 0 ? [] : _b;
+      var group;
       if (!groupField || !dataItems.length) {
         return;
       }
@@ -726,8 +790,8 @@ var DropDownListVue2 = {
       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;
@@ -744,6 +808,7 @@ var DropDownListVue2 = {
   },
   render: function render(createElement) {
     var _a;
+    var _this = this;
     var h = gh || createElement;
     var _b = this.$props,
       style = _b.style,
@@ -756,8 +821,21 @@ var DropDownListVue2 = {
       } : _c,
       size = _b.size,
       rounded = _b.rounded,
-      fillMode = _b.fillMode;
-    var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
+      fillMode = _b.fillMode,
+      dataItemKey = _b.dataItemKey,
+      _d = _b.dataItems,
+      dataItems = _d === void 0 ? [] : _d,
+      disabled = _b.disabled,
+      tabIndex = _b.tabIndex,
+      loading = _b.loading,
+      icon = _b.icon,
+      svgIcon = _b.svgIcon,
+      iconClassName = _b.iconClassName,
+      adaptiveTitle = _b.adaptiveTitle,
+      header = _b.header,
+      footer = _b.footer,
+      groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender;
+    var opened = this.isOpen;
     var text = getItemValue(this.computedValue(), this.$props.textField);
     var isValid = !this.$props.validityStyles || this.validity().valid;
     var base = this.base;
@@ -769,16 +847,10 @@ var DropDownListVue2 = {
       height: '200px'
     }, this.$props.popupSettings);
     var ariaLabelSelectButton = provideLocalizationService(this).toLanguageString(selectButton, messages[selectButton]);
-    var _d = this.$props,
-      dataItemKey = _d.dataItemKey,
-      _e = _d.dataItems,
-      dataItems = _e === void 0 ? [] : _e,
-      disabled = _d.disabled,
-      tabIndex = _d.tabIndex,
-      loading = _d.loading,
-      icon = _d.icon,
-      svgIcon = _d.svgIcon,
-      iconClassName = _d.iconClassName;
+    var renderAdaptive = this.adaptiveState;
+    if (this.group === undefined && this.$props.groupField !== undefined) {
+      this.group = getItemValue(this.$props.dataItems[0], this.$props.groupField);
+    }
     var valueRender = templateRendering.call(this, this.$props.valueRender, getListeners.call(this));
     var focused = this.currentFocused;
     var value = this.primitiveValue();
@@ -833,6 +905,95 @@ var DropDownListVue2 = {
         }
       })]);
     };
+    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]), h("div", {
+        "class": "k-actionsheet-subtitle k-text-center"
+      })]), 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.handleWrapperClick,
+        on: this.v3 ? undefined : {
+          "click": _this.handleWrapperClick
+        },
+        icon: "x",
+        svgIcon: xIcon
+      })])]), h("div", {
+        "class": "k-actionsheet-titlebar-group k-actionsheet-filter"
+      }, [renderListFilter.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));
+      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))
+      }, [renderDefaultItem.call(_this), _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.handleWrapperClick,
+        on: this.v3 ? undefined : {
+          "close": this.handleWrapperClick
+        },
+        navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
+      });
+    };
     var renderDefaultItem = function renderDefaultItem() {
       var _a = this.$props,
         textField = _a.textField,
@@ -960,21 +1121,10 @@ var DropDownListVue2 = {
     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 headerListContainer = base.getTemplateDef.call(this, header);
+      var footerListContainer = base.getTemplateDef.call(this, footer);
       var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
-      if (this.group === undefined && this.$props.groupField !== undefined) {
-        this.group = getItemValue(dataItems[0], this.$props.groupField);
-      }
       return (
         // @ts-ignore  function children
         h(ListContainer, {
@@ -1017,11 +1167,11 @@ var DropDownListVue2 = {
               render: groupStickyHeaderTemplate
             },
             render: groupStickyHeaderTemplate
-          }), header && h("div", {
+          }), headerListContainer && h("div", {
             "class": "k-list-header"
-          }, [header]), renderList.call(_this3), footer && h("div", {
+          }, [headerListContainer]), renderList.call(_this3), footerListContainer && h("div", {
             "class": "k-list-footer"
-          }, [footer])];
+          }, [footerListContainer])];
         } : [renderListFilter.call(_this3), renderDefaultItem.call(_this3), _this3.group && dataItems.length !== 0 && h(GroupStickyHeader, {
           group: _this3.group,
           attrs: _this3.v3 ? undefined : {
@@ -1029,11 +1179,11 @@ var DropDownListVue2 = {
             render: groupStickyHeaderTemplate
           },
           render: groupStickyHeaderTemplate
-        }), header && h("div", {
+        }), headerListContainer && h("div", {
           "class": "k-list-header"
-        }, [header]), renderList.call(_this3), footer && h("div", {
+        }, [headerListContainer]), renderList.call(_this3), footerListContainer && h("div", {
           "class": "k-list-footer"
-        }, [footer])])
+        }, [footerListContainer])])
       );
     };
     if (this.$props.virtual !== undefined) {
@@ -1043,7 +1193,7 @@ var DropDownListVue2 = {
       // @ts-ignore
       base.vs.pageSize = virtual.pageSize;
     }
-    var dropdownlist = h("span", {
+    var dropdownlistDefault = h("span", {
       ref: setRef(this, 'kendoAnchor', this.anchor),
       "class": classNames('k-dropdownlist k-picker', className, (_a = {}, _a["k-picker-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-picker-".concat(fillMode)] = fillMode, _a['k-focus'] = focused, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
       style: !label ? style : __assign(__assign({}, style), {
@@ -1124,7 +1274,11 @@ var DropDownListVue2 = {
       svgIcon: svgIcon || caretAltDownIcon,
       iconClass: iconClassName,
       "aria-hidden": true
-    }), dummySelect.call(this, value), renderListContainer.call(this)]);
+    }), dummySelect.call(this, value), !renderAdaptive && renderListContainer.call(this)]);
+    // The following one combines the default rendering of the DropDownList and the Adaptive rendering.
+    // This is needed because of Vue 2 specifics
+    var dropdownlist = [dropdownlistDefault, renderAdaptive && renderAdaptiveListContainer.call(this)];
+    var dropdownlistToRender = isV3 ? dropdownlist : this.$props.adaptive ? h("span", [dropdownlist]) : dropdownlistDefault;
     return label ? h("span", {
       "class": this.spanClassNames,
       onFocusin: this.handleFocus,
@@ -1137,7 +1291,7 @@ var DropDownListVue2 = {
       attrs: this.v3 ? undefined : {
         dir: this.$props.dir
       }
-    }, [dropdownlist, this.$props.label ? id ? h("label", {
+    }, [dropdownlistToRender, this.$props.label ? id ? h("label", {
       "for": id,
       attrs: this.v3 ? undefined : {
         "for": id
@@ -1145,7 +1299,7 @@ var DropDownListVue2 = {
       "class": "k-label"
     }, [this.$props.label]) : h("span", {
       "class": "k-label"
-    }, [this.$props.label]) : null]) : dropdownlist;
+    }, [this.$props.label]) : null]) : dropdownlistToRender;
   }
 };
 /**

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

@@ -296,4 +296,12 @@ export interface DropDownListProps extends FormComponentProps {
      * Fires when a DropDownList 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_dropdownlist %})).
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup ([see example]({% slug adaptive_rendering_dropdownlist %})).
+     */
+    adaptiveTitle?: string;
 }