@progress/kendo-vue-dropdowns 3.5.0-dev.202208020811 → 3.5.1-dev.202208110751

package/dist/esm/common/DropDownBase.js

@@ -0,0 +1,303 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+import VirtualScroll from './VirtualScroll.js';
+import { Navigation } from './Navigation.js';
+import { scrollToItem, areSame } from './utils.js';
+import { guid, validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var DropDownBase =
+/** @class */
+function () {
+  function DropDownBase(component) {
+    var _this = this;
+
+    this.vs = new VirtualScroll();
+    this.navigation = new Navigation();
+
+    this.handleItemClick = function (index, event) {
+      var state = _this.initState();
+
+      state.event = event;
+
+      _this.component.handleItemSelect(index, state);
+
+      _this.togglePopup(state);
+
+      _this.applyState(state);
+    };
+
+    this.handleFocus = function (event) {
+      if (!_this.component.currentFocused) {
+        var state = _this.initState(); // @ts-ignore
+
+
+        state.data.currentFocused = true;
+        state.events.push({
+          type: 'focus'
+        });
+        state.event = event;
+
+        _this.applyState(state);
+      }
+    };
+
+    this.filterChanged = function (text, state) {
+      // @ts-ignore
+      var _a = _this.component.$props,
+          textField = _a.textField,
+          filterable = _a.filterable;
+
+      if (filterable) {
+        state.events.push({
+          type: 'filterchange',
+          filter: {
+            field: textField,
+            operator: 'contains',
+            ignoreCase: true,
+            value: text
+          }
+        });
+      }
+    };
+
+    this.togglePopup = function (state) {
+      // @ts-ignore
+      var props = _this.component.$props; // @ts-ignore
+
+      var opened = props.opened !== undefined ? props.opened : _this.component.currentOpened; // @ts-ignore
+
+      if (props.opened === undefined) {
+        // @ts-ignore
+        state.data.currentOpened = !opened;
+      }
+
+      if (opened) {
+        state.events.push({
+          type: 'close'
+        });
+      } else {
+        state.events.push({
+          type: 'open'
+        });
+
+        _this.calculatePopupWidth();
+      }
+    };
+
+    this.pageChange = function (page, event) {
+      var state = _this.initState();
+
+      state.event = event;
+
+      _this.triggerOnPageChange(state, page.skip, page.take);
+
+      _this.applyState(state);
+    };
+
+    this.scrollChange = function (event) {
+      _this.component.$emit('scroll', event);
+    };
+
+    this.scrollToVirtualItem = function (virtual, selectedItemIndex) {
+      var vs = _this.vs;
+      vs.enabled = false;
+
+      if (virtual.skip === 0) {
+        vs.reset();
+      } else if (virtual.skip + virtual.pageSize === virtual.total) {
+        vs.scrollToEnd();
+      } else {
+        var scrollTop = vs.translate;
+
+        if (scrollTop === 0) {
+          vs.calcScrollElementHeight();
+          scrollTop = vs.itemHeight * virtual.skip;
+          vs.translateTo(scrollTop - vs.itemHeight);
+        }
+
+        if (vs.container) {
+          vs.container.scrollTop = scrollTop;
+        }
+
+        _this.scrollToItem(selectedItemIndex, true);
+      }
+
+      setTimeout(function () {
+        return vs.enabled = true;
+      }, 10);
+    };
+
+    validatePackage(packageMetadata);
+    this.listBoxId = guid();
+    this.guid = guid();
+    this.component = component;
+    this.vs.PageChange = this.pageChange;
+    this.vs.ScrollChange = this.scrollChange;
+  }
+
+  DropDownBase.prototype.didMount = function () {
+    // @ts-ignore
+    var props = this.component.$props;
+    var popupSettings = props.popupSettings || {};
+    var style = props.style || {};
+    var popupWidth = popupSettings.width;
+    var shouldUpdate = props.opened === true;
+
+    if (popupWidth === undefined) {
+      this.calculatePopupWidth();
+    }
+
+    if (props.dir === undefined && style.direction === undefined) {
+      this.calculateDir();
+      shouldUpdate = true;
+    }
+
+    if (shouldUpdate) {
+      // @ts-ignore
+      this.component.$forceUpdate();
+    }
+  };
+
+  DropDownBase.prototype.calculateDir = function () {
+    if (this.component.element) {
+      this.dirCalculated = window.getComputedStyle(this.component.element).direction || undefined;
+    }
+  };
+
+  DropDownBase.prototype.calculatePopupWidth = function () {
+    if (this.wrapper) {
+      this.popupWidth = this.wrapper.offsetWidth + 'px';
+    }
+  };
+
+  DropDownBase.prototype.scrollToItem = function (itemIndex, vsEnabled) {
+    var list = this.list || this.vs.list;
+    var item = list ? list.children[0] : undefined;
+
+    if (item && itemIndex >= 0) {
+      var vs = this.vs;
+      var scrollElement = vs.container || list.parentNode;
+
+      if (scrollElement) {
+        var virtualScroll = vsEnabled !== undefined ? vsEnabled : vs.enabled;
+        scrollToItem(scrollElement, item.offsetHeight, itemIndex, vs.translate, virtualScroll);
+      }
+    }
+  };
+
+  DropDownBase.prototype.initState = function () {
+    var state = {
+      data: {},
+      events: [],
+      event: undefined
+    };
+    return state;
+  };
+
+  DropDownBase.prototype.applyState = function (state) {
+    var _this = this;
+
+    if (Object.keys(state.data).length > 0) {
+      Object.keys(state.data).forEach(function (key) {
+        _this.component[key] = state.data[key];
+      });
+    } // @ts-ignore
+
+
+    var newValue = this.component.primitiveValue();
+    var eventArgs = {
+      event: state.event,
+      component: this.component,
+      target: {
+        // @ts-ignore
+        name: this.component.$props.name,
+        value: newValue
+      },
+      value: newValue
+    };
+    state.events.forEach(function (eventData) {
+      var type = eventData.type;
+      delete eventData.type;
+
+      if (type) {
+        if (type === 'change') {
+          // @ts-ignore
+          _this.component.$emit('changemodel', newValue); // @ts-ignore
+
+
+          _this.component.$emit('update:modelValue', newValue);
+        } // @ts-ignore
+
+
+        _this.component.$emit(type, __assign(__assign({}, eventArgs), eventData));
+      }
+    });
+  };
+
+  DropDownBase.prototype.triggerOnPageChange = function (state, skip, take) {
+    // @ts-ignore
+    var virtual = this.component.$props.virtual;
+
+    if (virtual) {
+      var newSkip = Math.min(Math.max(0, skip), Math.max(0, virtual.total - take));
+
+      if (newSkip !== virtual.skip) {
+        state.events.push({
+          type: 'pagechange',
+          page: {
+            skip: newSkip,
+            take: take
+          }
+        });
+      }
+    }
+  };
+
+  DropDownBase.prototype.triggerPageChangeCornerItems = function (item, state) {
+    // @ts-ignore
+    var props = this.component.$props;
+    var _a = props.dataItems,
+        dataItems = _a === void 0 ? [] : _a,
+        dataItemKey = props.dataItemKey,
+        virtual = props.virtual;
+    var opened = props.opened !== undefined ? props.opened : this.component.currentOpened;
+
+    if (item && virtual && this.vs.enabled) {
+      if (virtual.skip > 0 && areSame(item, dataItems[0], dataItemKey)) {
+        this.triggerOnPageChange(state, virtual.skip - 1, virtual.pageSize);
+      } else if (!opened && virtual.skip + virtual.pageSize < virtual.total && areSame(item, dataItems[dataItems.length - 1], dataItemKey)) {
+        this.triggerOnPageChange(state, virtual.skip + 1, virtual.pageSize);
+      }
+    }
+  };
+
+  DropDownBase.defaultProps = {
+    popupSettings: {
+      animate: true,
+      height: '200px'
+    },
+    required: false,
+    validityStyles: true
+  };
+  return DropDownBase;
+}();
+
+export default DropDownBase;

package/dist/esm/common/List.d.ts

@@ -0,0 +1,58 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface ListProps {
+    id?: string;
+    show?: boolean;
+    dataItems: any[];
+    value?: any;
+    textField?: string;
+    valueField?: string;
+    optionsGuid?: string;
+    listRef?: (element: HTMLUListElement) => void;
+    wrapperCssClass?: string;
+    wrapperStyle?: any;
+    listStyle?: any;
+    skip?: number;
+    focusedIndex?: number;
+    highlightSelected?: boolean;
+    onClick?: (index: number, event: any) => void;
+    itemRender?: any;
+    noDataRender?: any;
+    scroller?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ListMethods extends Vue2type {
+    handleClick: (e: any) => void;
+    handleScroll: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface ListState {
+    list: any;
+    listRef: any;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ListAll extends ListMethods, ListState {
+    listRef: any;
+}
+/**
+ * @hidden
+ */
+declare let ListVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ListMethods>, {}, RecordPropsDefinition<ListProps>>;
+/**
+ * @hidden
+ */
+declare const List: DefineComponent<{}, any, {}, {}, ListMethods, {}, {}, {}, string, {}, {}, {}>;
+export { List, ListVue2 };

package/dist/esm/common/List.js

@@ -0,0 +1,176 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var inject = allVue.inject;
+import { ListItem } from './ListItem.js';
+import { areSame } from './utils.js';
+import { getTemplate, getDefaultSlots, setRef, getRef } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, nodata } from '../messages.js';
+/**
+ * @hidden
+ */
+
+var ListVue2 = {
+  name: 'list',
+  // @ts-ignore
+  emits: {
+    listclick: null,
+    scroll: null
+  },
+  props: {
+    id: String,
+    show: Boolean,
+    dataItems: Array,
+    value: [Object, String, Number, Boolean, Array],
+    textField: String,
+    valueField: String,
+    optionsGuid: String,
+    wrapperCssClass: String,
+    wrapperStyle: Object,
+    listStyle: Object,
+    skip: Number,
+    focusedIndex: Number,
+    highlightSelected: {
+      type: Boolean,
+      default: true
+    },
+    itemRender: [String, Function, Object],
+    noDataRender: [String, Function, Object],
+    scroller: Boolean
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var listRef = ref(null);
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      listRef: listRef,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  mounted: function mounted() {
+    this.list = getRef(this, 'list');
+  },
+  methods: {
+    handleClick: function handleClick(index, e) {
+      this.$emit('listclick', index, e);
+    },
+    handleScroll: function handleScroll(e) {
+      this.$emit('scroll', e);
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var localizationService = provideLocalizationService(this);
+    var _a = this.$props,
+        id = _a.id,
+        show = _a.show,
+        wrapperCssClass = _a.wrapperCssClass,
+        wrapperStyle = _a.wrapperStyle,
+        listStyle = _a.listStyle,
+        listRef = _a.listRef;
+
+    var renderNoValueElement = function renderNoValueElement() {
+      var noDataRender = this.$props.noDataRender;
+      var noDataElement = h("div", {
+        "class": 'k-nodata'
+      }, [h("div", [localizationService.toLanguageString(nodata, messages[nodata])])]);
+      return getTemplate.call(this, {
+        h: h,
+        template: noDataRender,
+        defaultRendering: noDataElement
+      });
+    };
+
+    var renderItems = function renderItems() {
+      var _a = this.$props,
+          textField = _a.textField,
+          valueField = _a.valueField,
+          optionsGuid = _a.optionsGuid,
+          _b = _a.skip,
+          skip = _b === void 0 ? 0 : _b,
+          focusedIndex = _a.focusedIndex,
+          highlightSelected = _a.highlightSelected,
+          value = _a.value,
+          itemRender = _a.itemRender;
+      var isArray = Array.isArray(value);
+      return this.$props.dataItems.map(function (item, index) {
+        var realIndex = skip + index;
+        var selected = highlightSelected && (!isArray && areSame(item, value, valueField) || isArray && value.findIndex(function (i) {
+          return areSame(i, item, valueField);
+        }) !== -1);
+        return (// @ts-ignore
+          h(ListItem, {
+            id: "option-".concat(optionsGuid, "-").concat(realIndex),
+            attrs: this.v3 ? undefined : {
+              id: "option-".concat(optionsGuid, "-").concat(realIndex),
+              dataItem: item,
+              selected: selected,
+              focused: focusedIndex === index,
+              index: realIndex,
+              textField: textField,
+              render: itemRender
+            },
+            dataItem: item,
+            selected: selected,
+            focused: focusedIndex === index,
+            index: realIndex,
+            key: realIndex,
+            onItemclick: this.handleClick,
+            on: this.v3 ? undefined : {
+              "itemclick": this.handleClick
+            },
+            textField: textField,
+            render: itemRender
+          })
+        );
+      }, this);
+    };
+
+    var items = renderItems.call(this);
+    return items.length ? h("div", {
+      "class": wrapperCssClass,
+      style: wrapperStyle,
+      unselectable: 'on',
+      attrs: this.v3 ? undefined : {
+        unselectable: 'on'
+      },
+      onScroll: this.handleScroll,
+      on: this.v3 ? undefined : {
+        "scroll": this.handleScroll
+      }
+    }, [h("ul", {
+      id: id,
+      attrs: this.v3 ? undefined : {
+        id: id,
+        role: "listbox",
+        "aria-live": "polite",
+        "aria-hidden": !show ? true : undefined
+      },
+      role: "listbox",
+      "aria-live": "polite",
+      "aria-hidden": !show ? true : undefined,
+      "class": 'k-list-ul',
+      ref: setRef(this, 'list'),
+      style: listStyle
+    }, [items]), defaultSlot]) : renderNoValueElement.call(this);
+  }
+};
+/**
+ * @hidden
+ */
+
+var List = ListVue2;
+export { List, ListVue2 };

package/dist/esm/common/ListContainer.d.ts

@@ -0,0 +1,40 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface ListContainerProps {
+    width?: string | number;
+    onMouseDown?: any;
+    onBlur?: any;
+    dir?: string;
+    popupSettings?: object;
+    itemsCount?: number;
+}
+/**
+ * @hidden
+ */
+export interface ListContainerState {
+    kendoAnchorRef: any;
+}
+/**
+ * @hidden
+ */
+export interface ListContainerMethods extends Vue2type {
+    onMouseDown: (e: any) => void;
+    onBlur: (e: any) => void;
+    onOpen: (e: any) => void;
+    onClose: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+declare let ListContainerVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ListContainerMethods>, {}, RecordPropsDefinition<ListContainerProps>>;
+/**
+ * @hidden
+ */
+declare const ListContainer: DefineComponent<ListContainerProps, any, {}, {}, ListContainerMethods, {}, {}, {}, string, ListContainerProps, ListContainerProps, {}>;
+export { ListContainer, ListContainerVue2 };

package/dist/esm/common/ListContainer.js

@@ -0,0 +1,131 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { Popup } from '@progress/kendo-vue-popup';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ListContainerVue2 = {
+  name: 'list-container',
+  // @ts-ignore
+  emits: {
+    mousedown: null,
+    blur: null,
+    open: null,
+    close: null
+  },
+  props: {
+    width: [String, Number],
+    dir: String,
+    itemsCount: Number,
+    popupSettings: {
+      type: Object,
+      default: function _default() {
+        return {
+          animate: true,
+          height: '200px'
+        };
+      }
+    }
+  },
+  created: function created() {
+    this.kendoAnchorRef = undefined;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  methods: {
+    onMouseDown: function onMouseDown(e) {
+      this.$emit('mousedown', e);
+    },
+    onBlur: function onBlur(e) {
+      this.$emit('blur', e);
+    },
+    onOpen: function onOpen(e) {
+      this.$emit('open', e);
+    },
+    onClose: function onClose(e) {
+      this.$emit('close', e);
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _a = this.$props,
+        onMouseDown = _a.onMouseDown,
+        onBlur = _a.onBlur,
+        width = _a.width,
+        dir = _a.dir,
+        popupSettings = _a.popupSettings; // @ts-ignore
+
+    var popupClass = popupSettings.popupClass,
+        className = popupSettings.className,
+        animate = popupSettings.animate,
+        anchor = popupSettings.anchor,
+        show = popupSettings.show,
+        open = popupSettings.open,
+        close = popupSettings.close,
+        itemsCount = popupSettings.itemsCount;
+    return (// @ts-ignore function children
+      h(Popup, {
+        style: {
+          width: width,
+          direction: dir
+        },
+        className: className,
+        attrs: this.v3 ? undefined : {
+          className: className,
+          animate: animate,
+          anchor: anchor,
+          show: show,
+          contentKey: itemsCount
+        },
+        animate: animate,
+        anchor: anchor,
+        show: show,
+        contentKey: itemsCount,
+        onOpen: this.onOpen,
+        on: this.v3 ? undefined : {
+          "open": this.onOpen,
+          "close": this.onClose
+        },
+        onClose: this.onClose
+      }, this.v3 ? function () {
+        return [h("div", {
+          "class": popupClass,
+          onMousedown: _this.onMouseDown,
+          on: _this.v3 ? undefined : {
+            "mousedown": _this.onMouseDown,
+            "focusout": _this.onBlur
+          },
+          onFocusout: _this.onBlur
+        }, [defaultSlot])];
+      } : [h("div", {
+        "class": popupClass,
+        onMousedown: _this.onMouseDown,
+        on: _this.v3 ? undefined : {
+          "mousedown": _this.onMouseDown,
+          "focusout": _this.onBlur
+        },
+        onFocusout: _this.onBlur
+      }, [defaultSlot])])
+    );
+  }
+};
+/**
+ * @hidden
+ */
+
+var ListContainer = ListContainerVue2;
+export { ListContainer, ListContainerVue2 };