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

package/dist/es/DropDownTree/DropDownTree.js

@@ -26,7 +26,7 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { classNames, noop,
 //  useRtl,
-getTabIndex, Keys, guid, kendoThemeMaps, Icon, getRef, templateRendering, getListeners, getTemplate, setRef } from '@progress/kendo-vue-common';
+getTabIndex, Keys, guid, kendoThemeMaps, Icon, getRef, templateRendering, getListeners, getTemplate, canUseDOM, setRef } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { TreeView } from '@progress/kendo-vue-treeview';
@@ -37,8 +37,11 @@ import { ListNoData } from './ListNoData';
 import { messages, clear, nodata } from './../messages/main';
 import { FloatingLabel } from '@progress/kendo-vue-labels';
 import { ListFilter } from '../common/ListFilter';
-import { Button } from '@progress/kendo-vue-buttons';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
 import { xIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { MOBILE_SMALL_DEVICE, MOBILE_MEDIUM_DEVICE } from '../common/constants';
+import { ActionSheet } from '@progress/kendo-vue-layout';
+import DropDownBase from '../common/DropDownBase';
 var sizeMap = kendoThemeMaps.sizeMap,
   roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
@@ -182,7 +185,15 @@ var DropDownTreeVue2 = {
     header: [String, Function, Object],
     footer: [String, Function, Object],
     valueRender: [String, Function, Object],
-    listNoData: [String, Function, Object]
+    listNoData: [String, Function, Object],
+    adaptive: {
+      type: Boolean,
+      default: undefined
+    },
+    adaptiveTitle: {
+      type: String,
+      default: undefined
+    }
   },
   inject: {
     kendoLocalizationService: {
@@ -190,7 +201,9 @@ var DropDownTreeVue2 = {
     }
   },
   created: function created() {
+    this.observer = null;
     validatePackage(packageMetadata);
+    this.base = new DropDownBase(this);
     this.componentGuid = guid();
     this.anchor = guid();
   },
@@ -200,7 +213,9 @@ var DropDownTreeVue2 = {
       focused: false,
       filterState: '',
       currentValue: undefined,
-      popupWidth: '200px'
+      popupWidth: '200px',
+      windowWidth: 0,
+      initialAdaptiveRenderingValues: undefined
     };
   },
   computed: {
@@ -226,6 +241,25 @@ var DropDownTreeVue2 = {
         'k-picker': true
       }, _a[this.$props.className] = this.$props.className, _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'] = this.focused, _a['k-invalid'] = !isValid, _a['k-loading'] = this.$props.loading, _a['k-required'] = required, _a['k-disabled'] = this.$props.disabled, _a;
     },
+    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;
+      }
+    },
     isOpen: function isOpen() {
       return this.opened !== undefined ? this.opened : this.currentOpened;
     },
@@ -239,7 +273,21 @@ var DropDownTreeVue2 = {
       return this.hasValue ? getItemValue(this.computedValue, this.$props.textField) : '';
     }
   },
+  watch: {
+    // This watch gets the state of the data when the adaptive mode is activated
+    isOpen: function isOpen(newValue) {
+      if (newValue && this.value) {
+        this.initialAdaptiveRenderingValues = __spreadArray([], this.value, true);
+      } else {
+        this.initialAdaptiveRenderingValues = undefined;
+      }
+    }
+  },
   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.elementRef = getRef(this, 'kendoAnchor', this.anchor);
     this.inputRef = getRef(this, 'input');
     this.selectRef = getRef(this, 'select');
@@ -248,6 +296,11 @@ var DropDownTreeVue2 = {
     this.popupRef = getRef(this, 'popup');
     this.calculatePopupWidth();
   },
+  destroyed: !!isV3 ? undefined : function () {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  },
   updated: function updated() {
     this.inputRef = getRef(this, 'input');
     this.treeViewRef = getRef(this, 'treeView');
@@ -266,7 +319,7 @@ 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;
     var _a = this.$props,
@@ -282,7 +335,8 @@ var DropDownTreeVue2 = {
       validationMessage = _a.validationMessage,
       valid = _a.valid,
       required = _a.required,
-      validityStyles = _a.validityStyles;
+      validityStyles = _a.validityStyles,
+      adaptiveTitle = _a.adaptiveTitle;
     var tabIndex = getTabIndex(this.$props.tabIndex, disabled);
     var localization = provideLocalizationService(this);
     var validity = getValidity({
@@ -290,6 +344,7 @@ var DropDownTreeVue2 = {
       valid: valid,
       required: required
     }, this.hasValue);
+    var renderAdaptive = this.adaptiveState;
     var dir = this.$props.dir; // useRtl(elementRef, props.dir);
     var itemTemplate = templateRendering.call(this, this.item, getListeners.call(this));
     var valueTemplate = templateRendering.call(this, this.valueRender, getListeners.call(this));
@@ -325,12 +380,152 @@ var DropDownTreeVue2 = {
         value: this.computedValue
       }
     });
+    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"
+      }, [placeholder])]), h("div", {
+        "class": "k-actionsheet-actions"
+      }, [h(KButton, {
+        tabindex: 1,
+        attrs: this.v3 ? undefined : {
+          tabindex: 1,
+          "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.onWrapperClick,
+        on: this.v3 ? undefined : {
+          "click": _this.onWrapperClick
+        },
+        icon: "x",
+        svgIcon: xIcon
+      })])]), h("div", {
+        "class": "k-actionsheet-titlebar-group k-actionsheet-filter"
+      }, [_this.$props.filterable &&
+      // @ts-ignore
+      h(ListFilter, {
+        tabindex: 0,
+        attrs: this.v3 ? undefined : {
+          tabindex: 0,
+          value: _this.$props.filter === undefined ? _this.filterState : _this.$props.filter,
+          size: size,
+          rounded: rounded,
+          fillMode: fillMode
+        },
+        value: _this.$props.filter === undefined ? _this.filterState : _this.$props.filter,
+        ref: setRef(_this, 'input'),
+        onChange: _this.onFilterChange,
+        on: this.v3 ? undefined : {
+          "change": _this.onFilterChange,
+          "keydown": _this.onInputKeyDown,
+          "focus": _this.onFocus,
+          "blur": _this.onBlur
+        },
+        onKeydown: _this.onInputKeyDown,
+        size: size,
+        rounded: rounded,
+        fillMode: fillMode,
+        onFocus: _this.onFocus,
+        onBlur: _this.onBlur
+      })])];
+    };
+    var adaptiveActionSheetHeaderTemplate = templateRendering.call(this, adaptiveActionSheetHeaderTemplateDef, getListeners.call(this));
+    var adaptiveActionSheetContentTemplateDef = function adaptiveActionSheetContentTemplateDef() {
+      var headerToRender = _this.base.getTemplateDef.call(_this, header, h);
+      var footerToRender = _this.base.getTemplateDef.call(_this, footer, h);
+      return [headerToRender && h("div", {
+        "class": "k-list-header"
+      }, [headerToRender]), dataItems.length > 0 ?
+      // @ts-ignore
+      h(TreeView, {
+        ref: setRef(_this, 'treeView'),
+        tabIndex: tabIndex,
+        attrs: this.v3 ? undefined : {
+          tabIndex: tabIndex,
+          dataItems: dataItems,
+          focusIdField: dataItemKey,
+          textField: _this.$props.textField,
+          selectField: selectField,
+          expandField: _this.$props.expandField,
+          childrenField: subItemsField,
+          expandIcons: true,
+          size: 'large',
+          item: itemTemplate
+        },
+        dataItems: dataItems,
+        focusIdField: dataItemKey,
+        textField: _this.$props.textField,
+        selectField: selectField,
+        expandField: _this.$props.expandField,
+        childrenField: subItemsField,
+        expandIcons: true,
+        onItemclick: _this.onChange,
+        on: this.v3 ? undefined : {
+          "itemclick": _this.onChange,
+          "expandchange": _this.onExpand,
+          "focus": _this.onFocus,
+          "blur": _this.onBlur,
+          "keydown": _this.onWrapperKeyDown
+        },
+        onExpandchange: _this.onExpand,
+        onFocus: _this.onFocus,
+        onBlur: _this.onBlur,
+        onKeydown: _this.onWrapperKeyDown,
+        size: 'large',
+        item: itemTemplate
+      }) : noDataTemplate, 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: this.isOpen,
+        attrs: this.v3 ? undefined : {
+          expand: this.isOpen,
+          animation: true,
+          animationStyles: this.animationStyles,
+          className: this.classNameAdaptive,
+          header: adaptiveActionSheetHeaderTemplate,
+          content: adaptiveActionSheetContentTemplate,
+          contentClassName: '!k-overflow-hidden',
+          navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
+        },
+        animation: true,
+        animationStyles: this.animationStyles,
+        className: this.classNameAdaptive,
+        header: adaptiveActionSheetHeaderTemplate,
+        content: adaptiveActionSheetContentTemplate,
+        contentClassName: '!k-overflow-hidden',
+        onClose: this.onWrapperClick,
+        on: this.v3 ? undefined : {
+          "close": this.onWrapperClick
+        },
+        navigatableElements: ['input.k-input-inner', '.k-actionsheet-actions > button']
+      });
+    };
     var isValid = !validityStyles || validity.valid;
     var _b = this.$props,
       size = _b.size,
       rounded = _b.rounded,
       fillMode = _b.fillMode;
-    var dropdowntree = h("span", {
+    var component = h("span", {
       "class": this.wrapperClass,
       tabIndex: tabIndex,
       attrs: this.v3 ? undefined : {
@@ -406,7 +601,7 @@ var DropDownTreeVue2 = {
         icon: xIcon
       },
       icon: xIcon
-    })]), h(Button, {
+    })]), h(KButton, {
       tabIndex: -1,
       attrs: this.v3 ? undefined : {
         tabIndex: -1,
@@ -455,7 +650,7 @@ var DropDownTreeVue2 = {
       }
     })]),
     // @ts-ignore function children
-    h(Popup, {
+    !renderAdaptive && h(Popup, {
       style: {
         width: this.popupWidth,
         direction: dir
@@ -482,100 +677,40 @@ var DropDownTreeVue2 = {
       },
       onClose: this.onPopupClosed,
       appendTo: popupSettings.appendTo
-    }, 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
-        },
-        onKeydown: _this2.onInputKeyDown,
-        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,
+    }, [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,
         size: size,
         rounded: rounded,
         fillMode: fillMode
       },
-      ref: setRef(_this2, 'input'),
-      onChange: _this2.onFilterChange,
-      on: _this2.v3 ? undefined : {
-        "change": _this2.onFilterChange,
-        "keydown": _this2.onInputKeyDown
+      ref: setRef(this, 'input'),
+      onChange: this.onFilterChange,
+      on: this.v3 ? undefined : {
+        "change": this.onFilterChange,
+        "keydown": this.onInputKeyDown
       },
-      onKeydown: _this2.onInputKeyDown,
+      onKeydown: this.onInputKeyDown,
       size: size,
       rounded: rounded,
       fillMode: fillMode
     }), header && h("div", {
       "class": "k-list-header"
-    }, [header]), dataItems.length > 0 ? h(TreeView, {
-      ref: setRef(_this2, 'treeView'),
+    }, [header]), dataItems.length > 0 ?
+    // @ts-ignore
+    h(TreeView, {
+      ref: setRef(this, 'treeView'),
       tabIndex: tabIndex,
-      attrs: _this2.v3 ? undefined : {
+      attrs: this.v3 ? undefined : {
         tabIndex: tabIndex,
         dataItems: dataItems,
         focusIdField: dataItemKey,
-        textField: _this2.$props.textField,
+        textField: this.$props.textField,
         selectField: selectField,
-        expandField: _this2.$props.expandField,
+        expandField: this.$props.expandField,
         childrenField: subItemsField,
         expandIcons: true,
         size: size,
@@ -583,28 +718,32 @@ var DropDownTreeVue2 = {
       },
       dataItems: dataItems,
       focusIdField: dataItemKey,
-      textField: _this2.$props.textField,
+      textField: this.$props.textField,
       selectField: selectField,
-      expandField: _this2.$props.expandField,
+      expandField: this.$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
+      onItemclick: this.onChange,
+      on: this.v3 ? undefined : {
+        "itemclick": this.onChange,
+        "expandchange": this.onExpand,
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "keydown": this.onWrapperKeyDown
       },
-      onExpandchange: _this2.onExpand,
-      onFocus: _this2.onFocus,
-      onBlur: _this2.onBlur,
-      onKeydown: _this2.onWrapperKeyDown,
+      onExpandchange: this.onExpand,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      onKeydown: this.onWrapperKeyDown,
       size: size,
       item: itemTemplate
     }) : noDataTemplate, footer && h("div", {
       "class": "k-list-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;
     return label ?
     // @ts-ignore function children
     h(FloatingLabel, {
@@ -627,10 +766,16 @@ var DropDownTreeVue2 = {
       focused: this.focused,
       dir: dir
     }, this.v3 ? function () {
-      return [dropdowntree];
-    } : [dropdowntree]) : dropdowntree;
+      return [dropdowntreeToRender];
+    } : [dropdowntreeToRender]) : dropdowntreeToRender;
   },
   methods: {
+    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;
+      }
+    },
     calculatePopupWidth: function calculatePopupWidth() {
       if (this.elementRef) {
         this.popupWidth = this.popupSettings.width !== undefined ? this.popupSettings.width : this.elementRef.offsetWidth + 'px';
@@ -670,6 +815,11 @@ var DropDownTreeVue2 = {
       }
     },
     onWrapperClick: function onWrapperClick(event) {
+      this.onFilterChange(__assign(__assign({}, event), {
+        target: {
+          value: ''
+        }
+      }));
       if (!event.defaultPrevented && this.$el) {
         this.focused = true;
         var ev = {
@@ -733,7 +883,9 @@ var DropDownTreeVue2 = {
       var _this = this;
       var keyCode = event.keyCode,
         altKey = event.altKey;
-      if (altKey || keyCode !== Keys.up && keyCode !== Keys.down) {
+      if (keyCode === Keys.esc) {
+        this.onWrapperClick(event);
+      } else if (altKey || keyCode !== Keys.up && keyCode !== Keys.down) {
         return;
       }
       event.preventDefault();
@@ -788,7 +940,7 @@ var DropDownTreeVue2 = {
           target: this
         };
         var focusEvent = __assign({}, ev);
-        if (!event.relatedTarget || !event.relatedTarget.closest('.popup-' + this.componentGuid)) {
+        if ((!event.relatedTarget || !event.relatedTarget.closest('.popup-' + this.componentGuid)) && !this.adaptiveState) {
           this.$emit('blur', focusEvent);
           this.closePopup(ev);
         }

package/dist/es/DropDownTree/DropDownTreeProps.d.ts

@@ -290,4 +290,12 @@ export interface DropDownTreeProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline' | string;
+    /**
+     * Provides different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
 }