@progress/kendo-vue-dropdowns 3.9.3 → 3.9.4-dev.202304190945

package/dist/es/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -0,0 +1,306 @@
+import { FormComponentProps } from '@progress/kendo-vue-common';
+import { ItemRenderProps } from '@progress/kendo-vue-treeview';
+import { FilterChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events';
+import { DropDownsPopupSettings } from '../common/settings';
+import { TagData } from '../MultiSelect/TagList';
+/**
+ * Represents the object of the `onFilterChange` MultiSelectTree event.
+ */
+export interface MultiSelectTreeFilterChangeEvent extends FilterChangeEvent {
+}
+export declare type MultiSelectTreeChangeEventOperation = 'clear' | 'delete' | 'toggle';
+/**
+ * Represents the object of the `onChange` MultiSelectTree event.
+ */
+export interface MultiSelectTreeChangeEvent extends DropdownEvent {
+    /**
+     * The items related to current operation.
+     */
+    items: any[];
+    /**
+     * Describes the current operation:
+     * * `clear` - clear button is clicked and value is cleared. Null value is returned.
+     * * `delete` - tag is deleted using keyboard or mouse. The items contained in current tag are returned.
+     * * `toggle` - item in TreeView is toggled. Single item is returned.
+     */
+    operation: MultiSelectTreeChangeEventOperation;
+}
+/**
+ * Represents the object of the `onOpen` MultiSelectTree event.
+ */
+export interface MultiSelectTreeOpenEvent extends OpenEvent {
+}
+/**
+ * Represents the object of the `onClose` MultiSelectTree event.
+ */
+export interface MultiSelectTreeCloseEvent extends CloseEvent {
+}
+/**
+ * Represents the object of the `onFocus` MultiSelectTree event.
+ */
+export interface MultiSelectTreeFocusEvent extends FocusEvent {
+}
+/**
+ * Represents the object of the `onBlur` MultiSelectTree event.
+ */
+export interface MultiSelectTreeBlurEvent extends BlurEvent {
+}
+/**
+ * Represents the object of the `onExpandChange` MultiSelectTree event.
+ */
+export interface MultiSelectTreeExpandEvent extends DropdownEvent {
+    item: any;
+    level: number[];
+}
+/**
+ * The props of component that will be used for rendering each of the MultiSelectTree items
+ * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)).
+ */
+export interface MultiSelectTreeItemProps extends ItemRenderProps {
+}
+/**
+ * The props of component that will be used for rendering each of the MultiSelectTree tags
+ */
+export interface MultiSelectTreeTagProps {
+    tagData: TagData;
+    guid: string;
+    focusedTag?: TagData;
+    onTagDelete: (items: Array<any>, event: any) => void;
+}
+/**
+ * The props of the `ListNoData` component ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
+ */
+export interface MultiSelectTreeListNoDataProps {
+}
+/**
+ * Represents the props of the [Kendo UI for Vue MultiSelectTree component]({% slug overview_multiselecttree %}).
+ */
+export interface MultiSelectTreeProps extends FormComponentProps {
+    /**
+     * Sets the data of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
+     */
+    dataItems?: any[];
+    /**
+     * Sets the opened state of the MultiSelectTree.
+     */
+    opened?: boolean;
+    /**
+     * Sets the value of the MultiSelectTree. It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    value?: Array<any>;
+    /**
+     * The hint that is displayed when the MultiSelectTree is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets the key for comparing the data items of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
+     * If `dataItemKey` is not set, the MultiSelectTree compares the items by reference.
+     */
+    dataItemKey: string;
+    /**
+     * Sets additional classes to the MultiSelectTree.
+     */
+    className?: string;
+    /**
+     * Sets the disabled state of the MultiSelectTree.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Renders a floating label for the MultiSelectTree.
+     */
+    label?: string;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * Specifies the validationMessage of the component.
+     */
+    validationMessage?: string;
+    /**
+     * If set to `false`, no visual representation of the invalid state of the component will be applied.
+     *
+     */
+    validityStyles?: boolean;
+    /**
+     * Overrides the validity state of the component.
+     * If `valid` is set, the `required` property will be ignored.
+     *
+     */
+    valid?: boolean;
+    /**
+     * Specifies the `name` property of the `input` DOM element.
+     *
+     */
+    name?: string;
+    /**
+     * Specifies if `null` is a valid value for the component.
+     *
+     */
+    required?: boolean;
+    /**
+     * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
+     */
+    tags?: Array<TagData>;
+    /**
+     * 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;
+    /**
+     * Enables the filtering functionality of the MultiSelectTree ([more information and examples]({% slug filtering_multiselecttree %})).
+     */
+    filterable?: boolean;
+    /**
+     * Sets the value of filtering input.
+     * Useful for making the filtering input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
+     */
+    filter?: string;
+    /**
+     * Sets the loading state of the MultiSelectTree ([see example]({% slug filtering_multiselecttree %}#toc-visualize-filtering)).
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the MultiSelectTree.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the MultiSelectTree.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example]({% slug overview_multiselecttree %})).
+     */
+    textField: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the checked state of the item.
+     */
+    checkField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the checked indeterminaet state of the item.
+     */
+    checkIndeterminateField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
+     */
+    expandField?: string;
+    /**
+     * Specifies the name of the field which will provide an array representation of the item subitems.
+     * Defaults to 'items'.
+     */
+    subItemsField?: string;
+    /**
+     * Configures the popup of the MultiSelectTree.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://reactjs.org/docs/forms.html#the-select-tag) element.
+     *
+     * @example
+     * ```jsx-no-run
+     * class App extends React.Component {
+     *    render() {
+     *       return (
+     *          <form>
+     *              <MultiSelectTree
+     *                  data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
+     *                  valueMap={value => value && value.id}
+     *              />
+     *              <button type="submit">Submit</button>
+     *          </form>
+     *       );
+     *    }
+     * }
+     * ReactDOM.render(<App />, document.querySelector('my-app'));
+     * ```
+     */
+    valueMap?: (value: Array<any>) => any;
+    /**
+     * Fires each time the popup of the MultiSelectTree is about to open.
+     */
+    onOpen?: (event: MultiSelectTreeOpenEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelectTree is about to close.
+     */
+    onClose?: (event: MultiSelectTreeCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the MultiSelectTree.
+     */
+    onFocus?: (event: MultiSelectTreeFocusEvent) => void;
+    /**
+     * Fires each time the MultiSelectTree gets blurred.
+     */
+    onBlur?: (event: MultiSelectTreeBlurEvent) => void;
+    /**
+     * Fires each time the value of the MultiSelectTree is about to change ([see examples]({% slug overview_multiselecttree %})).
+     */
+    onChange?: (event: MultiSelectTreeChangeEvent) => void;
+    /**
+     * Fires each time the user types in the filter input
+     * ([see example]({% slug filtering_multiselecttree %}#toc-basic-configuration)).
+     * You can filter the source based on the passed filtration value.
+     */
+    onFilterChange?: (event: MultiSelectTreeFilterChangeEvent) => void;
+    /**
+     * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_multiselecttree %})).
+     */
+    onExpandChange?: (event: any) => void;
+    /**
+     * Defines the component that will be used for rendering each of the MultiSelectTree items
+     * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)).
+     */
+    item?: any;
+    /**
+     * Defines the component that will be rendered in the MultiSelectTree popup when no data is available
+     * ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
+     */
+    listNoData?: any;
+    tag?: any;
+    header?: any;
+    footer?: any;
+    /**
+     * Configures the `size` of the MultiSelectTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the MultiSelectTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the MultiSelectTree.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline' | string;
+}

package/dist/es/MultiSelectTree/MultiSelectTreeProps.js

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

package/dist/es/MultiSelectTree/utils.d.ts

@@ -0,0 +1,17 @@
+import { MultiSelectTreeChangeEventOperation } from './MultiSelectTreeProps';
+/** @hidden */
+export declare const getValueMap: (value: any[], idGetter: any) => any;
+/**
+ * Get MultiSelectTree new value from the component `onChange` event.
+ *
+ * @param {any[]} data
+ * @param {object} options
+ * @returns {any[]}
+ */
+export declare const getMultiSelectTreeValue: (data: any[], options: {
+    subItemsField?: string;
+    dataItemKey: string;
+    items: any;
+    value: Array<any>;
+    operation: MultiSelectTreeChangeEventOperation;
+}) => any[];

package/dist/es/MultiSelectTree/utils.js

@@ -0,0 +1,109 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { getter } from '@progress/kendo-vue-common';
+/** @hidden */
+export var getValueMap = function (value, idGetter) {
+    var map = {};
+    if (value && value.length) {
+        value.forEach(function (item) {
+            map[idGetter(item)] = true;
+        });
+    }
+    return map;
+};
+/**
+ * Get MultiSelectTree new value from the component `onChange` event.
+ *
+ * @param {any[]} data
+ * @param {object} options
+ * @returns {any[]}
+ */
+export var getMultiSelectTreeValue = function (data, options) {
+    var items = options.items, dataItemKey = options.dataItemKey, value = options.value, _a = options.subItemsField, subItemsField = _a === void 0 ? 'items' : _a, operation = options.operation;
+    var idGetter = getter(dataItemKey);
+    var valueMap = getValueMap(value, idGetter);
+    if (operation === 'clear') {
+        return [];
+    }
+    else if (operation === 'delete') {
+        var deletedItemsMap_1 = getValueMap(items, idGetter);
+        return value.filter(function (item) { return !deletedItemsMap_1[idGetter(item)]; });
+    }
+    // operation === 'toggle'
+    var selectedItem = items[0];
+    var selectedId = idGetter(selectedItem);
+    var subItemGetter = getter(subItemsField);
+    var stack = __spreadArray([], data, true);
+    var context = [];
+    var parents = [];
+    var foundItem;
+    while (stack.length) {
+        var currentItem = stack.pop();
+        if (selectedId === idGetter(currentItem)) {
+            parents = context.map(function (contextItem) { return contextItem.item; });
+            foundItem = currentItem;
+            break;
+        }
+        else {
+            if (context &&
+                context.length &&
+                context[context.length - 1].parentPosition === stack.length) {
+                context.pop();
+            }
+            var subItems = subItemGetter(currentItem);
+            if (subItems && subItems.length) {
+                context.push({ item: currentItem, parentPosition: stack.length });
+                stack.push.apply(stack, subItems);
+            }
+        }
+    }
+    var childrenStack = __spreadArray([], (subItemGetter(foundItem) || []), true);
+    var children = [];
+    while (childrenStack.length) {
+        var currentItem = childrenStack.pop();
+        children.push(currentItem);
+        var subItems = subItemGetter(currentItem);
+        if (subItems && subItems.length) {
+            childrenStack.push.apply(childrenStack, subItems);
+        }
+    }
+    var isChecked = !valueMap[selectedId];
+    var newValue = [];
+    if (isChecked) {
+        newValue.push.apply(newValue, value);
+        newValue.push(foundItem);
+        newValue.push.apply(newValue, children.filter(function (item) { return !valueMap[idGetter(item)]; }));
+        var parentCandidates = parents.filter(function (item) { return !valueMap[idGetter(item)]; });
+        var newValueMap_1 = getValueMap(newValue, idGetter);
+        for (var i = parentCandidates.length - 1; i > -1; i--) {
+            var candidate = parentCandidates[i];
+            var subItems = subItemGetter(candidate);
+            var checkedChildrenLength = subItems.filter(function (item) { return newValueMap_1[idGetter(item)]; }).length;
+            if (checkedChildrenLength < subItems.length) {
+                break;
+            }
+            else {
+                newValue.push(candidate);
+                newValueMap_1[idGetter(candidate)] = true;
+            }
+        }
+    }
+    else {
+        var foundId_1 = idGetter(foundItem);
+        var childrenMap_1 = getValueMap(children, idGetter);
+        var parentsMap_1 = getValueMap(parents, idGetter);
+        newValue.push.apply(newValue, (value
+            .filter(function (item) {
+            var itemId = idGetter(item);
+            return !childrenMap_1[itemId] && foundId_1 !== itemId && !parentsMap_1[itemId];
+        })));
+    }
+    return newValue;
+};

package/dist/es/common/utils.d.ts

@@ -1,3 +1,4 @@
+import { TagData } from '../MultiSelect/TagList';
 /**
  * @hidden
  */
@@ -54,6 +55,10 @@ declare const suggestValue: (value?: string, data?: Array<any>, textField?: stri
  * @hidden
  */
 declare const preventDefaultNonInputs: (event: any) => void;
+/**
+ * @hidden
+ */
+declare const matchTags: (tag1: TagData, tag2: TagData, key?: string) => boolean;
 /**
  * @hidden
  */
@@ -62,4 +67,4 @@ declare const firefox: boolean;
  * @hidden
  */
 declare const firefoxMaxHeight = 17895697;
-export { isPresent, sameCharsOnly, shuffleData, matchText, scrollToItem, itemIndexStartsWith, getItemIndexByText, getItemValue, matchDataCollections, removeDataItems, areSame, getFocusedItem, preventDefaultNonInputs, suggestValue, firefox, firefoxMaxHeight };
+export { isPresent, sameCharsOnly, shuffleData, matchText, scrollToItem, itemIndexStartsWith, getItemIndexByText, getItemValue, matchDataCollections, removeDataItems, areSame, getFocusedItem, preventDefaultNonInputs, suggestValue, matchTags, firefox, firefoxMaxHeight };

package/dist/es/common/utils.js

@@ -181,6 +181,15 @@ var preventDefaultNonInputs = function (event) {
         event.preventDefault();
     }
 };
+/**
+ * @hidden
+ */
+var matchTags = function (tag1, tag2, key) {
+    if (!!tag1 !== !!tag2 || tag1.text !== tag2.text) {
+        return false;
+    }
+    return tag1 === tag2 || matchDataCollections(tag1.data, tag2.data, key);
+};
 /**
  * @hidden
  */
@@ -190,4 +199,4 @@ var firefox = typeof window !== 'undefined' &&
  * @hidden
  */
 var firefoxMaxHeight = 17895697;
-export { isPresent, sameCharsOnly, shuffleData, matchText, scrollToItem, itemIndexStartsWith, getItemIndexByText, getItemValue, matchDataCollections, removeDataItems, areSame, getFocusedItem, preventDefaultNonInputs, suggestValue, firefox, firefoxMaxHeight };
+export { isPresent, sameCharsOnly, shuffleData, matchText, scrollToItem, itemIndexStartsWith, getItemIndexByText, getItemValue, matchDataCollections, removeDataItems, areSame, getFocusedItem, preventDefaultNonInputs, suggestValue, matchTags, firefox, firefoxMaxHeight };

package/dist/es/main.d.ts

@@ -10,4 +10,8 @@ import { AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, Auto
 import { MultiSelect, MultiSelectVue2 } from './MultiSelect/MultiSelect';
 import { MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent } from './MultiSelect/MultiSelectProps';
 import { TagData as MultiSelectTagData } from './MultiSelect/TagList';
-export { AutoComplete, AutoCompleteVue2, AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListVue2, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxVue2, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectVue2, MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity };
+export * from './DropDownTree/DropDownTreeProps';
+import { MultiSelectTree } from './MultiSelectTree/MultiSelectTree';
+export * from './MultiSelectTree/MultiSelectTreeProps';
+export * from './MultiSelectTree/utils';
+export { AutoComplete, AutoCompleteVue2, AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListVue2, DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxVue2, ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectVue2, MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity, MultiSelectTree };

package/dist/es/main.js

@@ -2,4 +2,8 @@ import { DropDownList, DropDownListVue2 } from './DropDownList/DropDownList';
 import { ComboBox, ComboBoxVue2 } from './ComboBox/ComboBox';
 import { AutoComplete, AutoCompleteVue2 } from './AutoComplete/AutoComplete';
 import { MultiSelect, MultiSelectVue2 } from './MultiSelect/MultiSelect';
-export { AutoComplete, AutoCompleteVue2, DropDownList, DropDownListVue2, ComboBox, ComboBoxVue2, MultiSelect, MultiSelectVue2 };
+export * from './DropDownTree/DropDownTreeProps';
+import { MultiSelectTree } from './MultiSelectTree/MultiSelectTree';
+export * from './MultiSelectTree/MultiSelectTreeProps';
+export * from './MultiSelectTree/utils';
+export { AutoComplete, AutoCompleteVue2, DropDownList, DropDownListVue2, ComboBox, ComboBoxVue2, MultiSelect, MultiSelectVue2, MultiSelectTree };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-dropdowns',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1681119718,
+    publishDate: 1681896936,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/DropDownTree/DropDownTree.d.ts

@@ -0,0 +1 @@
+