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

package/dist/esm/MultiSelect/MultiSelectProps.d.ts

@@ -0,0 +1,262 @@
+import { FormComponentProps } from '@progress/kendo-vue-common';
+import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
+import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
+import { TagData } from './TagList';
+/**
+ * Represents the object of the `filterChange` MultiSelect event.
+ */
+export interface MultiSelectFilterChangeEvent extends FilterChangeEvent {
+}
+/**
+ * Represents the object of the `change` MultiSelect event.
+ */
+export interface MultiSelectChangeEvent extends ChangeEvent {
+}
+/**
+ * Represents the object of the `open` MultiSelect event.
+ */
+export interface MultiSelectOpenEvent extends OpenEvent {
+}
+/**
+ * Represents the object of the `close` MultiSelect event.
+ */
+export interface MultiSelectCloseEvent extends CloseEvent {
+}
+/**
+ * Represents the object of the `focus` MultiSelect event.
+ */
+export interface MultiSelectFocusEvent extends FocusEvent {
+}
+/**
+ * Represents the object of the `blur` MultiSelect event.
+ */
+export interface MultiSelectBlurEvent extends BlurEvent {
+}
+/**
+ * Represents the object of the `pageChange` MultiSelect event.
+ */
+export interface MultiSelectPageChangeEvent extends PageChangeEvent {
+}
+/**
+ * Represents the props of the [Kendo UI for Vue MultiSelect component]({% slug overview_multiselect %}).
+ */
+export interface MultiSelectProps extends FormComponentProps {
+    /**
+     * Specifies whether the MultiSelect allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_multiselect %})). Defaults to `false`.
+     */
+    allowCustom?: boolean;
+    /**
+     * Sets the data of the MultiSelect ([see example]({% slug binding_multiselect %})).
+     */
+    dataItems?: any[];
+    /**
+     * Sets the opened and closed state of the MultiSelect.
+     */
+    opened?: boolean;
+    /**
+     * Determines whether to close the options list of the MultiSelect after the item selection is finished.
+     *
+     * @default true
+     */
+    autoClose?: boolean;
+    /**
+     * @hidden
+     */
+    modelValue?: any;
+    /**
+     * Sets the value of the MultiSelect ([see example]({% slug binding_multiselect %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    value?: Array<any>;
+    /**
+     * Sets the validate of the input.
+     */
+    validate?: boolean;
+    /**
+     * The hint that is displayed when the MultiSelect is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
+     */
+    tags?: Array<TagData>;
+    /**
+     * Sets the data item field that represents the item value.
+     */
+    valueField?: string;
+    /**
+     * Specifies the type of the selected value. If set to true, the selected value has to be of a primitive value.
+     */
+    valuePrimitive?: boolean;
+    /**
+     * Sets the key for comparing the data items of the MultiSelect ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If `dataItemKey` is not set, the MultiSelect compares the items by reference.
+     */
+    dataItemKey?: string;
+    /**
+     * Sets the default value of the MultiSelect. Similar to the native `select` HTML element.
+     */
+    defaultValue?: Array<any>;
+    /**
+     * Sets the disabled state of the MultiSelect.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Enables the filtering functionality of the MultiSelect ([more information and examples]({% slug filtering_multiselect %})).
+     */
+    filterable?: boolean;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * If set, the MultiSelect will use it to get the focused item index.
+     *
+     * Default functionality returns the first item which starts with the input text.
+     *
+     */
+    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
+    /**
+     * Sets the value of filtering input. Useful for making the filtering input a controlled component.
+     */
+    filter?: string;
+    /**
+     * Sets the loading state of the MultiSelect ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)).
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the MultiSelect.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the MultiSelect.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it.
+     */
+    textField?: string;
+    /**
+     * Renders a floating label for the MultiSelect.
+     */
+    label?: string;
+    /**
+     * Configures the popup of the MultiSelect.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Configures the virtual scrolling of the MultiSelect ([see example]({% slug virtualization_multiselect %})).
+     */
+    virtual?: VirtualizationSettings;
+    /**
+     * Fires each time the popup of the MultiSelect is about to open.
+     */
+    onOpen?: (event: MultiSelectOpenEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelect is about to close.
+     */
+    onClose?: (event: MultiSelectCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the MultiSelect.
+     */
+    onFocus?: (event: MultiSelectFocusEvent) => void;
+    /**
+     * Fires each time the MultiSelect gets blurred.
+     */
+    onBlur?: (event: MultiSelectBlurEvent) => void;
+    /**
+     * Fires each time the value of the MultiSelect is about to change ([see examples]({% slug binding_multiselect %})).
+     */
+    onChange?: (event: MultiSelectChangeEvent) => void;
+    /**
+     * Fires each time the user types in the filter input ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
+     */
+    onFilterchange?: (event: MultiSelectFilterChangeEvent) => void;
+    /**
+     * Fires when both the virtual scrolling of the MultiSelect is enabled and when the component requires data for another page ([see example]({% slug virtualization_multiselect %})).
+     */
+    onPagechange?: (event: MultiSelectPageChangeEvent) => void;
+    /**
+     * Fires when a MultiSelect item is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-items)). Used to override the default appearance of the list items.
+     */
+    itemRender?: any;
+    /**
+     * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-no-data)). Used to override the default appearance of the element.
+     */
+    listNoDataRender?: any;
+    /**
+     * Fires when a tag element is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-tags)). Used to override the default appearance of the element.
+     */
+    tagRender?: any;
+    /**
+     * Sets the header component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
+     */
+    header?: any;
+    /**
+     * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
+     */
+    footer?: any;
+    /**
+     * Configures the `size` of the MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `roundness` of the tags in MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    tagsRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the MultiSelect.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+}

package/dist/esm/MultiSelect/MultiSelectProps.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length

package/dist/esm/MultiSelect/TagList.d.ts

@@ -0,0 +1,51 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => TagListAll);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * Represents the tag data.
+ */
+export interface TagData {
+    /**
+     * Represents the text of the tag.
+     */
+    text: string;
+    /**
+     * Represents the data items which correspond to the tag.
+     */
+    data: Array<any>;
+}
+/**
+ * @hidden
+ */
+export interface TagListProps {
+    dataItems: Array<TagData>;
+    guid: string;
+    focused?: TagData;
+    tagRender?: any;
+    size?: null | 'small' | 'medium' | 'large' | string;
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    tagsRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+}
+/**
+ * @hidden
+ */
+export interface TagListMethods extends Vue2type {
+    [key: string]: any;
+    onTagDelete: (data: any, e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface TagListAll extends TagListMethods {
+}
+/**
+ * @hidden
+ */
+declare let TagListVue2: ComponentOptions<Vue2type, DefaultData<TagListAll>, DefaultMethods<TagListAll>, {}, RecordPropsDefinition<TagListProps>>;
+/**
+ * @hidden
+ */
+declare const TagList: DefineComponent<{}, any, {}, {}, TagListMethods, {}, {}, {}, string, {}, {}, {}>;
+export { TagList, TagListVue2 };

package/dist/esm/MultiSelect/TagList.js

@@ -0,0 +1,180 @@
+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);
+}; // @ts-ignore
+
+
+import { getTemplate, kendoThemeMaps } from '@progress/kendo-vue-common';
+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 preventDefault = function preventDefault(event) {
+  return event.preventDefault();
+};
+
+var stopPropagation = function stopPropagation(event) {
+  return event.stopPropagation();
+};
+/**
+ * @hidden
+ */
+
+
+var TagListVue2 = {
+  name: 'TagList',
+  props: {
+    dataItems: Array,
+    guid: String,
+    focused: Object,
+    tagRender: [String, Function, Object],
+    tagsRounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return ['solid', 'flat', 'outline'].includes(value);
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return ['small', 'medium', 'large'].includes(value);
+      }
+    }
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          disabled = _b.disabled;
+      return _a = {
+        'k-chip-list': true
+      }, _a["k-chip-list-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-selection-single'] = true, _a['k-disabled'] = disabled, _a;
+    },
+    chipClass: function chipClass() {
+      var _a;
+
+      var _b = this.$props,
+          size = _b.size,
+          disabled = _b.disabled,
+          tagsRounded = _b.tagsRounded,
+          fillMode = _b.fillMode;
+      return _a = {
+        'k-chip': true,
+        'k-disabled': disabled
+      }, _a["k-chip-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[tagsRounded] || tagsRounded)] = tagsRounded, _a["k-chip-".concat(fillMode)] = fillMode, _a["k-chip-".concat(fillMode, "-base")] = Boolean(fillMode), _a;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  methods: {
+    onTagDelete: function onTagDelete(tagData, event) {
+      this.$emit('tagdelete', tagData, event);
+    }
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        dataItems = _a.dataItems,
+        guid = _a.guid;
+    return h("div", {
+      "class": this.wrapperClass,
+      role: "listbox",
+      attrs: this.v3 ? undefined : {
+        role: "listbox",
+        id: 'tagslist-' + guid
+      },
+      id: 'tagslist-' + guid
+    }, [dataItems.map(function (tagData, index) {
+      var _this = this;
+
+      var uniqueId = "tag-".concat(guid, "-").concat(tagData.text.toString().replace(/\s+/g, '-'));
+      var defaultRendering = h("div", {
+        "class": __assign(__assign({}, this.chipClass), {
+          'k-focus': tagData === this.$props.focused
+        }),
+        key: uniqueId,
+        id: uniqueId,
+        attrs: this.v3 ? undefined : {
+          id: uniqueId,
+          "aria-selected": true,
+          role: "option",
+          "aria-setsize": dataItems.length
+        },
+        onMousedown: preventDefault,
+        on: this.v3 ? undefined : {
+          "mousedown": preventDefault,
+          "click": stopPropagation
+        },
+        onClick: stopPropagation,
+        "aria-selected": true,
+        role: "option",
+        "aria-setsize": dataItems.length
+      }, [h("span", {
+        "class": "k-chip-content"
+      }, [tagData.text]), h("span", {
+        "aria-label": "delete",
+        attrs: this.v3 ? undefined : {
+          "aria-label": "delete"
+        },
+        "class": "k-select",
+        onClick: function onClick(e) {
+          return _this.onTagDelete(tagData.data, e);
+        },
+        on: this.v3 ? undefined : {
+          "click": function onClick(e) {
+            return _this.onTagDelete(tagData.data, e);
+          }
+        }
+      }, [h("span", {
+        "class": "k-icon k-i-close"
+      })])]);
+      return getTemplate.call(this, {
+        h: h,
+        template: this.$props.tagRender,
+        defaultRendering: defaultRendering,
+        additionalProps: __assign(__assign({}, this.$props), {
+          tagData: tagData,
+          index: index
+        }),
+        additionalListeners: {
+          tagdelete: this.onTagDelete
+        }
+      });
+    }, this)]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var TagList = TagListVue2;
+export { TagList, TagListVue2 };

package/dist/esm/additionalTypes.ts

@@ -0,0 +1,21 @@
+// @ts-ignore
+import { DefineComponent } from 'vue';
+// @ts-ignore
+import * as Vue from 'vue';
+
+/**
+ * @hidden
+ */
+// @ts-ignore
+type Vue2type = Vue.default;
+
+/**
+ * @hidden
+ */
+// @ts-ignore
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+/**
+ * @hidden
+ */
+// @ts-ignore
+export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

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

@@ -0,0 +1,21 @@
+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 ClearButtonMethods extends Vue2type {
+    onMouseDown: (e: any) => void;
+    onClickHandler: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+declare let ClearButtonVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<ClearButtonMethods>, {}, RecordPropsDefinition<{}>>;
+/**
+ * @hidden
+ */
+declare const ClearButton: DefineComponent<{}, any, {}, {}, ClearButtonMethods, {}, {}, {}, string, {}, {}, {}>;
+export { ClearButton, ClearButtonVue2 };

package/dist/esm/common/ClearButton.js

@@ -0,0 +1,68 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, clear } from '../messages.js';
+/**
+ * @hidden
+ */
+
+var ClearButtonVue2 = {
+  name: 'clear-button',
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  methods: {
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+    },
+    onClickHandler: function onClickHandler(e) {
+      this.$emit('clearclick', e);
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var title = provideLocalizationService(this).toLanguageString(clear, messages[clear]);
+    return h("span", {
+      "class": "k-clear-value",
+      role: "button",
+      attrs: this.v3 ? undefined : {
+        role: "button",
+        tabindex: -1,
+        title: title
+      },
+      onClick: this.onClickHandler,
+      on: this.v3 ? undefined : {
+        "click": this.onClickHandler,
+        "mousedown": this.onMouseDown
+      },
+      onMousedown: this.onMouseDown,
+      tabindex: -1,
+      title: title,
+      key: "clearbutton"
+    }, [h("span", {
+      "class": "k-icon k-i-x"
+    })]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var ClearButton = ClearButtonVue2;
+export { ClearButton, ClearButtonVue2 };

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

@@ -0,0 +1,84 @@
+import VirtualScroll from './VirtualScroll';
+import { Navigation } from './Navigation';
+import { ListItemProps } from './ListItem';
+import { InternalState, DropDownStateBase, Page, DropDownsPopupSettings, VirtualizationSettings } from './settings';
+/**
+ * @hidden
+ */
+export interface DropDownComponentProps {
+    data?: any[];
+    opened?: boolean;
+    value?: any;
+    disabled?: boolean;
+    tabIndex?: number;
+    dir?: string;
+    defaultItem?: any;
+    filterable?: boolean;
+    filter?: string | null;
+    textField?: string;
+    dataItemKey?: string;
+    popupSettings?: DropDownsPopupSettings;
+    style?: any;
+    virtual?: VirtualizationSettings;
+    onOpen?: (event: any) => void;
+    onClose?: (event: any) => void;
+    onFocus?: (event: any) => void;
+    onBlur?: (event: any) => void;
+    onChange?: (event: any) => void;
+    onFilterchange?: (event: any) => void;
+    onPagechange?: (event: any) => void;
+    onScrollchange?: (event: any) => void;
+    itemRender?: (li: Element, itemProps: ListItemProps) => any;
+    listNoDataRender?: (element: any) => any;
+    header?: any;
+    footer?: any;
+}
+/**
+ * @hidden
+ */
+export interface DropDownComponent {
+    state: DropDownStateBase;
+    element: HTMLSpanElement | null;
+    handleItemSelect: Function;
+    value: any;
+    currentOpened: boolean;
+    currentFocused: boolean;
+}
+/**
+ * @hidden
+ */
+export default class DropDownBase {
+    static defaultProps: {
+        popupSettings: {
+            animate: boolean;
+            height: string;
+        };
+        required: boolean;
+        validityStyles: boolean;
+    };
+    popupWidth?: string;
+    wrapper: any;
+    list: HTMLUListElement;
+    dirCalculated?: string;
+    readonly vs: VirtualScroll;
+    readonly navigation: Navigation;
+    readonly listBoxId: string;
+    readonly guid: string;
+    readonly component: DropDownComponent;
+    constructor(component: any);
+    didMount(): void;
+    calculateDir(): void;
+    calculatePopupWidth(): void;
+    scrollToItem(itemIndex: number, vsEnabled?: boolean): void;
+    handleItemClick: (index: number, event: any) => void;
+    handleFocus: any;
+    filterChanged: (text: string | null, state: InternalState) => void;
+    initState(): InternalState;
+    applyState(state: InternalState): void;
+    togglePopup: (state: InternalState) => void;
+    pageChange: (page: Page, event: any) => void;
+    scrollChange: (event: any) => void;
+    triggerOnPageChange(state: InternalState, skip: number, take: number): void;
+    triggerPageChangeCornerItems(item: any, state: InternalState): void;
+    scrollToVirtualItem: (virtual: VirtualizationSettings, selectedItemIndex: number) => void;
+}