@progress/kendo-vue-dropdowns 8.0.3-develop.2 → 8.0.3-develop.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/AutoComplete/AutoComplete.d.ts +331 -0
  2. package/AutoComplete/AutoCompleteProps.d.ts +243 -0
  3. package/ComboBox/ComboBox.d.ts +371 -0
  4. package/ComboBox/ComboBoxProps.d.ts +286 -0
  5. package/DropDownList/DropDownList.d.ts +353 -0
  6. package/DropDownList/DropDownListProps.d.ts +312 -0
  7. package/DropDownTree/DropDownTree.d.ts +301 -0
  8. package/DropDownTree/DropDownTreeProps.d.ts +306 -0
  9. package/DropDownTree/ListNoData.d.ts +12 -0
  10. package/MultiSelect/MultiSelect.d.ts +369 -0
  11. package/MultiSelect/MultiSelect.js +1 -1
  12. package/MultiSelect/MultiSelect.mjs +2 -2
  13. package/MultiSelect/MultiSelectProps.d.ts +300 -0
  14. package/MultiSelect/TagList.d.ts +90 -0
  15. package/MultiSelectTree/MultiSelectTree.d.ts +272 -0
  16. package/MultiSelectTree/MultiSelectTreeProps.d.ts +327 -0
  17. package/MultiSelectTree/utils.d.ts +24 -0
  18. package/common/ClearButton.d.ts +22 -0
  19. package/common/DropDownBase.d.ts +106 -0
  20. package/common/GroupStickyHeader.d.ts +32 -0
  21. package/common/List.d.ts +111 -0
  22. package/common/List.mjs +1 -1
  23. package/common/ListContainer.d.ts +63 -0
  24. package/common/ListDefaultItem.d.ts +35 -0
  25. package/common/ListFilter.d.ts +103 -0
  26. package/common/ListGroupItem.d.ts +70 -0
  27. package/common/ListItem.d.ts +129 -0
  28. package/common/ListItemIcon.d.ts +33 -0
  29. package/common/Navigation.d.ts +19 -0
  30. package/common/SearchBar.d.ts +120 -0
  31. package/common/VirtualScroll.d.ts +49 -0
  32. package/common/constants.d.ts +11 -0
  33. package/common/events.d.ts +70 -0
  34. package/common/filterDescriptor.d.ts +48 -0
  35. package/common/settings.d.ts +118 -0
  36. package/common/utils.d.ts +77 -0
  37. package/dist/cdn/js/kendo-vue-dropdowns.js +1 -1
  38. package/index.d.mts +18 -4024
  39. package/index.d.ts +18 -4024
  40. package/messages/main.d.ts +47 -0
  41. package/package-metadata.d.ts +12 -0
  42. package/package-metadata.js +1 -1
  43. package/package-metadata.mjs +2 -2
  44. package/package.json +18 -12
package/index.d.ts CHANGED
@@ -5,4027 +5,21 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import { ComponentOptionsMixin } from 'vue';
9
- import { ComponentProvideOptions } from 'vue';
10
- import { DefineComponent } from 'vue';
11
- import { DropDownListChangeEvent as DropDownListChangeEvent_2 } from './DropDownListProps';
12
- import { DropDownsPopupSettings as DropDownsPopupSettings_2 } from './../common/settings';
13
- import { DropDownsPopupSettings as DropDownsPopupSettings_3 } from '..';
14
- import { ExtractPropTypes } from 'vue';
15
- import { FormComponentProps } from '@progress/kendo-vue-common';
16
- import { FormComponentValidity } from '@progress/kendo-vue-common';
17
- import { ItemRenderProps } from '@progress/kendo-vue-treeview';
18
- import { PopupAnimation } from '@progress/kendo-vue-popup';
19
- import { PopupSettings } from '@progress/kendo-vue-popup';
20
- import { PropType } from 'vue';
21
- import { PublicProps } from 'vue';
22
- import { Ref } from 'vue';
23
- import { SVGIcon } from '@progress/kendo-svg-icons';
24
- import { TreeViewExpandChangeEvent } from '@progress/kendo-vue-treeview';
25
- import { TreeViewItemClickEvent } from '@progress/kendo-vue-treeview';
26
- import { VirtualizationSettings as VirtualizationSettings_2 } from './../common/settings';
27
-
28
- /**
29
- * @hidden
30
- */
31
- declare enum ActiveDescendant {
32
- PopupList = 0,
33
- TagsList = 1
34
- }
35
-
36
- /**
37
- * @hidden
38
- */
39
- export declare const AutoComplete: DefineComponent<ExtractPropTypes< {
40
- id: PropType<string>;
41
- defaultValue: {
42
- type: PropType<string>;
43
- default: any;
44
- };
45
- name: PropType<string>;
46
- modelValue: {
47
- type: PropType<string>;
48
- default: any;
49
- };
50
- value: {
51
- type: PropType<string>;
52
- default: any;
53
- };
54
- label: {
55
- type: PropType<string>;
56
- };
57
- placeholder: PropType<string>;
58
- required: {
59
- type: PropType<boolean>;
60
- default: boolean;
61
- };
62
- valid: {
63
- type: PropType<boolean>;
64
- default: any;
65
- };
66
- validationMessage: {
67
- type: PropType<string>;
68
- default: any;
69
- };
70
- validityStyles: {
71
- type: PropType<boolean>;
72
- default: boolean;
73
- };
74
- opened: {
75
- type: PropType<boolean>;
76
- default: any;
77
- };
78
- disabled: PropType<boolean>;
79
- dir: {
80
- type: PropType<string>;
81
- default: any;
82
- };
83
- tabIndex: {
84
- type: PropType<number>;
85
- default: any;
86
- };
87
- readonly: PropType<boolean>;
88
- accessKey: PropType<string>;
89
- dataItems: PropType<any[]>;
90
- textField: PropType<string>;
91
- loading: PropType<boolean>;
92
- popupSettings: {
93
- type: PropType<DropDownsPopupSettings_2>;
94
- default: () => {
95
- animate: boolean;
96
- height: string;
97
- anchor: string;
98
- };
99
- };
100
- itemRender: PropType<any>;
101
- groupHeaderItemRender: PropType<any>;
102
- groupStickyHeaderItemRender: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
103
- listNoDataRender: PropType<any>;
104
- focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
105
- header: PropType<any>;
106
- footer: PropType<any>;
107
- suggest: {
108
- type: PropType<string | boolean>;
109
- default: boolean;
110
- };
111
- ariaLabel: {
112
- type: PropType<string>;
113
- default: any;
114
- };
115
- ariaLabelledBy: PropType<string>;
116
- ariaDescribedBy: PropType<string>;
117
- rounded: {
118
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
119
- validator: (value: string) => boolean;
120
- };
121
- fillMode: {
122
- type: PropType<"flat" | "solid" | "outline">;
123
- validator: (value: string) => boolean;
124
- };
125
- size: {
126
- type: PropType<"small" | "medium" | "large">;
127
- validator: (value: string) => boolean;
128
- };
129
- groupField: {
130
- type: PropType<string>;
131
- };
132
- inputAttributes: PropType<Object>;
133
- }>, {
134
- inputRef: Ref<any, any>;
135
- kendoAnchorRef: Ref<any, any>;
136
- }, {
137
- hasMounted: boolean;
138
- currentText: string;
139
- currentValue: string;
140
- currentFocused: boolean;
141
- currentOpened: boolean;
142
- focusedItem: any;
143
- searchState: {
144
- word: string;
145
- last: string;
146
- };
147
- valueDuringOnChange: {};
148
- suggested: string;
149
- group: any;
150
- isScrolling: boolean;
151
- popupWidth: any;
152
- itemHeight: number;
153
- }, {
154
- spanClassNames(): {
155
- 'k-floating-label-container': boolean;
156
- 'k-focus': any;
157
- 'k-empty': boolean;
158
- 'k-invalid': boolean;
159
- 'k-rtl': boolean;
160
- };
161
- }, {
162
- focus(): void;
163
- computedValue(): any;
164
- primitiveValue(): any;
165
- validity(): FormComponentValidity;
166
- handleItemSelect(index: number, state: AutoCompleteInternalState): void;
167
- itemFocus(index: number, state: AutoCompleteInternalState): void;
168
- togglePopup(state: InternalState): void;
169
- onNavigate(state: AutoCompleteInternalState, keyCode: number): void;
170
- /**
171
- * @hidden
172
- */
173
- applyInputValue(value: string, state: AutoCompleteInternalState, eventKey?: number): void;
174
- setValidity(): void;
175
- handleItemClick(index: number, event: any): void;
176
- onChangeHandler(event: any): void;
177
- clearButtonClick(event: any): void;
178
- onInputKeyDown(event: any): void;
179
- handleBlur(event: any): void;
180
- triggerOnChange(newValue: string, state: AutoCompleteInternalState, eventArgs?: any): void;
181
- triggerOnSelect(state: AutoCompleteInternalState, eventArgs?: any): void;
182
- applyState(state: AutoCompleteInternalState): void;
183
- suggestValue(value: string): void;
184
- focusedIndex(value?: string): any;
185
- repositionPopup(): void;
186
- onScroll(event: any): void;
187
- }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
188
- id: PropType<string>;
189
- defaultValue: {
190
- type: PropType<string>;
191
- default: any;
192
- };
193
- name: PropType<string>;
194
- modelValue: {
195
- type: PropType<string>;
196
- default: any;
197
- };
198
- value: {
199
- type: PropType<string>;
200
- default: any;
201
- };
202
- label: {
203
- type: PropType<string>;
204
- };
205
- placeholder: PropType<string>;
206
- required: {
207
- type: PropType<boolean>;
208
- default: boolean;
209
- };
210
- valid: {
211
- type: PropType<boolean>;
212
- default: any;
213
- };
214
- validationMessage: {
215
- type: PropType<string>;
216
- default: any;
217
- };
218
- validityStyles: {
219
- type: PropType<boolean>;
220
- default: boolean;
221
- };
222
- opened: {
223
- type: PropType<boolean>;
224
- default: any;
225
- };
226
- disabled: PropType<boolean>;
227
- dir: {
228
- type: PropType<string>;
229
- default: any;
230
- };
231
- tabIndex: {
232
- type: PropType<number>;
233
- default: any;
234
- };
235
- readonly: PropType<boolean>;
236
- accessKey: PropType<string>;
237
- dataItems: PropType<any[]>;
238
- textField: PropType<string>;
239
- loading: PropType<boolean>;
240
- popupSettings: {
241
- type: PropType<DropDownsPopupSettings_2>;
242
- default: () => {
243
- animate: boolean;
244
- height: string;
245
- anchor: string;
246
- };
247
- };
248
- itemRender: PropType<any>;
249
- groupHeaderItemRender: PropType<any>;
250
- groupStickyHeaderItemRender: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
251
- listNoDataRender: PropType<any>;
252
- focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
253
- header: PropType<any>;
254
- footer: PropType<any>;
255
- suggest: {
256
- type: PropType<string | boolean>;
257
- default: boolean;
258
- };
259
- ariaLabel: {
260
- type: PropType<string>;
261
- default: any;
262
- };
263
- ariaLabelledBy: PropType<string>;
264
- ariaDescribedBy: PropType<string>;
265
- rounded: {
266
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
267
- validator: (value: string) => boolean;
268
- };
269
- fillMode: {
270
- type: PropType<"flat" | "solid" | "outline">;
271
- validator: (value: string) => boolean;
272
- };
273
- size: {
274
- type: PropType<"small" | "medium" | "large">;
275
- validator: (value: string) => boolean;
276
- };
277
- groupField: {
278
- type: PropType<string>;
279
- };
280
- inputAttributes: PropType<Object>;
281
- }>> & Readonly<{}>, {
282
- required: boolean;
283
- value: string;
284
- ariaLabel: string;
285
- tabIndex: number;
286
- dir: string;
287
- defaultValue: string;
288
- opened: boolean;
289
- popupSettings: DropDownsPopupSettings_2;
290
- modelValue: string;
291
- valid: boolean;
292
- validationMessage: string;
293
- validityStyles: boolean;
294
- suggest: string | boolean;
295
- }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
296
-
297
- /**
298
- * Represents the object of the `blur` AutoComplete event.
299
- */
300
- export declare interface AutoCompleteBlurEvent extends BlurEvent {
301
- }
302
-
303
- /**
304
- * Represents the object of the `change` AutoComplete event.
305
- */
306
- export declare interface AutoCompleteChangeEvent extends ChangeEvent {
307
- /**
308
- * The selected Suggestion object.
309
- */
310
- suggestion?: Suggestion;
311
- /**
312
- * Represents the selected item.
313
- */
314
- item?: any;
315
- }
316
-
317
- /**
318
- * Represents the object of the `select` AutoComplete event.
319
- */
320
- export declare interface AutoCompleteChangeEvent extends ChangeEvent {
321
- /**
322
- * Represents the selected item.
323
- */
324
- item?: any;
325
- }
326
-
327
- /**
328
- * Represents the object of the `close` AutoComplete event.
329
- */
330
- export declare interface AutoCompleteCloseEvent extends CloseEvent_2 {
331
- }
332
-
333
- /**
334
- * Represents the object of the `focus` AutoComplete event.
335
- */
336
- export declare interface AutoCompleteFocusEvent extends FocusEvent_2 {
337
- }
338
-
339
- /**
340
- * @hidden
341
- */
342
- declare interface AutoCompleteInternalState extends InternalState {
343
- data: AutoCompleteState;
344
- }
345
-
346
- /**
347
- * Represents the object of the `open` AutoComplete event.
348
- */
349
- export declare interface AutoCompleteOpenEvent extends OpenEvent {
350
- }
351
-
352
- /**
353
- * Represents the props of the [Kendo UI for Vue AutoComplete component]({% slug overview_autocomplete %}).
354
- */
355
- export declare interface AutoCompleteProps extends FormComponentProps {
356
- /**
357
- * Sets the data of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
358
- */
359
- dataItems?: any[];
360
- /**
361
- * Sets the opened and closed state of the AutoComplete.
362
- */
363
- opened?: boolean;
364
- /**
365
- * Sets the v-model value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
366
- */
367
- modelValue?: string;
368
- /**
369
- * Sets the value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
370
- */
371
- value?: string;
372
- /**
373
- * Sets the default value of the AutoComplete. Similar to the native `input` HTML element.
374
- */
375
- defaultValue?: string;
376
- /**
377
- * The hint that is displayed when the AutoComplete is empty.
378
- */
379
- placeholder?: string;
380
- /**
381
- * Sets the read-only state of the AutoComplete.
382
- */
383
- readonly?: boolean;
384
- /**
385
- * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_autocomplete %})).
386
- */
387
- suggest?: boolean | string;
388
- /**
389
- * Sets the disabled state of the AutoComplete.
390
- */
391
- disabled?: boolean;
392
- /**
393
- * Represents the `dir` HTML attribute.
394
- */
395
- dir?: string;
396
- /**
397
- * Sets the loading state of the AutoComplete ([see example]({% slug filtering_autocomplete %}#toc-basic-configuration)).
398
- */
399
- loading?: boolean;
400
- /**
401
- * Specifies the `tabIndex` of the AutoComplete.
402
- */
403
- tabIndex?: number;
404
- /**
405
- * Specifies the `accessKey` of the AutoComplete.
406
- */
407
- accessKey?: string;
408
- /**
409
- * Sets the data item field that represents the item text ([see example]({% slug binding_autocomplete %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it.
410
- */
411
- textField?: string;
412
- /**
413
- * Renders a floating label for the AutoComplete.
414
- */
415
- label?: string;
416
- /**
417
- * Configures the popup of the AutoComplete.
418
- */
419
- popupSettings?: DropDownsPopupSettings;
420
- /**
421
- * Specifies the id of the component.
422
- */
423
- id?: string;
424
- /**
425
- * 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).
426
- * For example these elements could contain error or hint message.
427
- */
428
- ariaDescribedBy?: string;
429
- /**
430
- * Identifies the element(s) which will label the component.
431
- */
432
- ariaLabelledBy?: string;
433
- /**
434
- * Defines the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute of the component.
435
- */
436
- ariaLabel?: string;
437
- /**
438
- * If set, the AutoComplete will use it to get the focused item index.
439
- *
440
- * Default functionality returns the first item which starts with the input text.
441
- *
442
- * @example
443
- * ```jsx-no-run
444
- * const focusedItemIndex = (data, inputText, textField) => {
445
- * let text = inputText.toLowerCase();
446
- * return data.findIndex(item =>
447
- * String(textField ? item[textField] : item).toLowerCase().includes(text));
448
- * };
449
- *
450
- * <AutoComplete focusedItemIndex={focusedItemIndex} />
451
- * ```
452
- */
453
- focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
454
- /**
455
- * Fires each time the popup of the AutoComplete is about to open.
456
- */
457
- onOpen?: (event: AutoCompleteOpenEvent) => void;
458
- /**
459
- * Fires each time the popup of the AutoComplete is about to close.
460
- */
461
- onClose?: (event: AutoCompleteCloseEvent) => void;
462
- /**
463
- * Fires each time the user focuses the AutoComplete.
464
- */
465
- onFocus?: (event: AutoCompleteFocusEvent) => void;
466
- /**
467
- * Fires each time the AutoComplete gets blurred.
468
- */
469
- onBlur?: (event: AutoCompleteBlurEvent) => void;
470
- /**
471
- * Fires each time the value of the AutoComplete is about to change ([more information and example]({% slug binding_autocomplete %})).
472
- */
473
- onChange?: (event: AutoCompleteChangeEvent) => void;
474
- /**
475
- * Fires when an AutoComplete list item is about to be rendered ([see example]({% slug customrendering_autocomplete %}#toc-items)). Used to override the default appearance of the list items.
476
- */
477
- itemRender?: any;
478
- /**
479
- * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_autocomplete %}#toc-no-data)). Used to override the default appearance of the element.
480
- */
481
- listNoDataRender?: any;
482
- /**
483
- * Sets the header component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
484
- */
485
- header?: any;
486
- /**
487
- * Sets the footer component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
488
- */
489
- footer?: any;
490
- /**
491
- * Configures the `size` of the AutoComnplete.
492
- *
493
- * The available options are:
494
- * - small
495
- * - medium
496
- * - large
497
- *
498
- * @default undefined
499
- */
500
- size?: 'small' | 'medium' | 'large';
501
- /**
502
- * Configures the `roundness` of the AutoComnplete.
503
- *
504
- * The available options are:
505
- * - none
506
- * - small
507
- * - medium
508
- * - large
509
- * - full
510
- *
511
- * @default undefined
512
- */
513
- rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
514
- /**
515
- * Configures the `fillMode` of the AutoComnplete.
516
- *
517
- * The available options are:
518
- * - solid
519
- * - outline
520
- * - flat
521
- *
522
- * @default undefined
523
- */
524
- fillMode?: 'solid' | 'outline' | 'flat';
525
- /**
526
- * Sets the data item field that represents the start of a group. Applicable to objects data.
527
- */
528
- groupField?: string;
529
- /**
530
- * Fires when a AutoComplete group header item is about to be rendered. Used to override the default appearance of the group's headers.
531
- */
532
- groupHeaderItemRender?: any;
533
- /**
534
- * Fires when a AutoComplete sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
535
- */
536
- groupStickyHeaderItemRender?: any;
537
- /**
538
- * Sets the built-in HTML attributes of the inner focusable input element.
539
- * Attributes which are essential for certain component functionalities cannot be changed.
540
- */
541
- inputAttributes?: Object;
542
- }
543
-
544
- /**
545
- * @hidden
546
- */
547
- declare interface AutoCompleteState extends DropDownStateBase {
548
- focusedItem?: any;
549
- value?: string;
550
- currentValue?: string;
551
- }
552
-
553
- /**
554
- * @hidden
555
- */
556
- declare interface AutoCompleteState extends DropDownStateBase {
557
- anchor: string;
558
- typingTimeout: any;
559
- base: any;
560
- input: any;
561
- element: any;
562
- inputId: string;
563
- virtualHasChanged: any;
564
- prevOpened: any;
565
- prevCurrentOpened: any;
566
- prevData: any;
567
- prevFocusedItem: any;
568
- inputRef: any;
569
- listRef: any;
570
- filterInputRef: any;
571
- scrollElementRef: any;
572
- scrollerRef: any;
573
- kendoAnchorRef: any;
574
- }
575
-
576
- /**
577
- * @hidden
578
- */
579
- declare interface BlurEvent extends DropdownEvent {
580
- }
581
-
582
- /**
583
- * @hidden
584
- */
585
- declare interface ChangeEvent extends DropdownEvent {
586
- /**
587
- * The current value of the component.
588
- */
589
- value: any;
590
- }
591
-
592
- /**
593
- * @hidden
594
- */
595
- declare interface CloseEvent_2 extends DropdownEvent {
596
- }
597
-
598
- /**
599
- * @hidden
600
- */
601
- export declare const ComboBox: DefineComponent<ExtractPropTypes< {
602
- id: PropType<string>;
603
- dataItemKey: {
604
- type: PropType<string>;
605
- };
606
- defaultValue: {
607
- type: PropType<any>;
608
- default: any;
609
- };
610
- name: StringConstructor;
611
- modelValue: {
612
- type: PropType<any>;
613
- default: any;
614
- };
615
- value: {
616
- type: PropType<any>;
617
- default: any;
618
- };
619
- label: {
620
- type: PropType<string>;
621
- };
622
- placeholder: PropType<string>;
623
- required: {
624
- type: PropType<boolean>;
625
- default: boolean;
626
- };
627
- valid: {
628
- type: PropType<boolean>;
629
- default: any;
630
- };
631
- validationMessage: {
632
- type: PropType<string>;
633
- default: any;
634
- };
635
- validityStyles: {
636
- type: PropType<boolean>;
637
- default: boolean;
638
- };
639
- iconClassName: PropType<string>;
640
- opened: {
641
- type: PropType<boolean>;
642
- default: any;
643
- };
644
- disabled: PropType<boolean>;
645
- dir: {
646
- type: PropType<string>;
647
- default: any;
648
- };
649
- tabIndex: {
650
- type: PropType<number>;
651
- default: number;
652
- };
653
- accessKey: PropType<string>;
654
- dataItems: PropType<any[]>;
655
- textField: PropType<string>;
656
- className: PropType<string>;
657
- loading: PropType<boolean>;
658
- popupSettings: {
659
- type: PropType<DropDownsPopupSettings_2>;
660
- default: () => {
661
- animate: boolean;
662
- height: string;
663
- anchor: string;
664
- };
665
- };
666
- itemRender: PropType<any>;
667
- groupHeaderItemRender: PropType<any>;
668
- groupStickyHeaderItemRender: PropType<any>;
669
- listNoDataRender: PropType<any>;
670
- focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
671
- header: PropType<any>;
672
- footer: PropType<any>;
673
- filterable: PropType<boolean>;
674
- filter: {
675
- type: PropType<string>;
676
- default: any;
677
- };
678
- virtual: {
679
- type: PropType<VirtualizationSettings_2>;
680
- default: any;
681
- };
682
- suggest: {
683
- type: PropType<boolean>;
684
- default: boolean;
685
- };
686
- allowCustom: {
687
- type: PropType<boolean>;
688
- default: boolean;
689
- };
690
- clearButton: {
691
- type: PropType<boolean>;
692
- default: boolean;
693
- };
694
- ariaLabel: {
695
- type: PropType<string>;
696
- default: any;
697
- };
698
- ariaLabelledBy: PropType<string>;
699
- ariaDescribedBy: PropType<string>;
700
- valueField: PropType<string>;
701
- valuePrimitive: PropType<boolean>;
702
- rounded: {
703
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
704
- validator: (value: string) => boolean;
705
- };
706
- fillMode: {
707
- type: PropType<"flat" | "solid" | "outline">;
708
- validator: (value: string) => boolean;
709
- };
710
- size: {
711
- type: PropType<"small" | "medium" | "large">;
712
- validator: (value: string) => boolean;
713
- };
714
- groupField: {
715
- type: PropType<string>;
716
- };
717
- adaptive: {
718
- type: PropType<boolean>;
719
- default: any;
720
- };
721
- adaptiveTitle: {
722
- type: PropType<string>;
723
- default: any;
724
- };
725
- onFilterchange: PropType<(event: ComboBoxFilterChangeEvent) => void>;
726
- inputAttributes: PropType<Object>;
727
- }>, {
728
- inputRef: Ref<any, any>;
729
- elementRef: Ref<any, any>;
730
- kendoAnchorRef: Ref<any, any>;
731
- kendoLocalizationService: {};
732
- }, {
733
- hasMounted: boolean;
734
- currentText: string;
735
- currentValue: string;
736
- currentFocused: boolean;
737
- currentOpened: boolean;
738
- searchState: {
739
- word: string;
740
- last: string;
741
- };
742
- _skipFocusEvent: boolean;
743
- valueDuringOnChange: {};
744
- _navigated: boolean;
745
- suggested: string;
746
- group: any;
747
- isScrolling: boolean;
748
- itemHeight: number;
749
- state: any;
750
- popupWidth: any;
751
- windowWidth: number;
752
- }, {
753
- index(): number;
754
- spanClassNames(): object;
755
- isOpen(): boolean;
756
- animationStyles(): object | undefined;
757
- classNameAdaptive(): string;
758
- adaptiveState(): any;
759
- }, {
760
- focus(): void;
761
- computedValue(): any;
762
- findByFieldValue(field: string, value: string): any;
763
- primitiveValue(): any;
764
- validity(): FormComponentValidity;
765
- handleItemSelect(index: number, state: InternalState): void;
766
- onNavigate(state: InternalState, keyCode: number): void;
767
- toggleBtnClick(event: MouseEvent): void;
768
- applyValueOnEnter(value: string, state: InternalState): any;
769
- applyValueOnRejectSuggestions(text: string, state: InternalState): any;
770
- selectFocusedItem(text: string, state: InternalState): any;
771
- handleItemClick(index: number, event: any): void;
772
- handleFocus(event: any): void;
773
- handleBlur(event: any): void;
774
- onInputKeyDown(event: any): void;
775
- inputOnChange(event: any): void;
776
- clearButtonClick(event: any): void;
777
- getFocusedIndex(): number;
778
- suggestValue(value?: string): void;
779
- setValidity(): void;
780
- compareValues(value: any, item: any): boolean;
781
- triggerOnChange(item: any, state: InternalState): void;
782
- applyState(state: InternalState): void;
783
- calculateMedia(entries: ResizeObserverEntry[]): void;
784
- repositionPopup(): void;
785
- onScroll(event: any): void;
786
- getInputText(text: any, selectedItemText: any): string;
787
- getSelectedItemText(): string | undefined;
788
- }, ComponentOptionsMixin, ComponentOptionsMixin, {
789
- changemodel: (value: any) => true;
790
- 'update:modelValue': (value: any) => true;
791
- filterchange: (event: ComboBoxFilterChangeEvent) => true;
792
- pagechange: (event: ComboBoxPageChangeEvent) => true;
793
- change: (event: ComboBoxChangeEvent) => true;
794
- focus: (event: ComboBoxFocusEvent) => true;
795
- blur: (event: ComboBoxBlurEvent) => true;
796
- open: (event: ComboBoxOpenEvent) => true;
797
- close: (event: ComboBoxCloseEvent) => true;
798
- scroll: (event: Event) => true;
799
- }, string, PublicProps, Readonly<ExtractPropTypes< {
800
- id: PropType<string>;
801
- dataItemKey: {
802
- type: PropType<string>;
803
- };
804
- defaultValue: {
805
- type: PropType<any>;
806
- default: any;
807
- };
808
- name: StringConstructor;
809
- modelValue: {
810
- type: PropType<any>;
811
- default: any;
812
- };
813
- value: {
814
- type: PropType<any>;
815
- default: any;
816
- };
817
- label: {
818
- type: PropType<string>;
819
- };
820
- placeholder: PropType<string>;
821
- required: {
822
- type: PropType<boolean>;
823
- default: boolean;
824
- };
825
- valid: {
826
- type: PropType<boolean>;
827
- default: any;
828
- };
829
- validationMessage: {
830
- type: PropType<string>;
831
- default: any;
832
- };
833
- validityStyles: {
834
- type: PropType<boolean>;
835
- default: boolean;
836
- };
837
- iconClassName: PropType<string>;
838
- opened: {
839
- type: PropType<boolean>;
840
- default: any;
841
- };
842
- disabled: PropType<boolean>;
843
- dir: {
844
- type: PropType<string>;
845
- default: any;
846
- };
847
- tabIndex: {
848
- type: PropType<number>;
849
- default: number;
850
- };
851
- accessKey: PropType<string>;
852
- dataItems: PropType<any[]>;
853
- textField: PropType<string>;
854
- className: PropType<string>;
855
- loading: PropType<boolean>;
856
- popupSettings: {
857
- type: PropType<DropDownsPopupSettings_2>;
858
- default: () => {
859
- animate: boolean;
860
- height: string;
861
- anchor: string;
862
- };
863
- };
864
- itemRender: PropType<any>;
865
- groupHeaderItemRender: PropType<any>;
866
- groupStickyHeaderItemRender: PropType<any>;
867
- listNoDataRender: PropType<any>;
868
- focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
869
- header: PropType<any>;
870
- footer: PropType<any>;
871
- filterable: PropType<boolean>;
872
- filter: {
873
- type: PropType<string>;
874
- default: any;
875
- };
876
- virtual: {
877
- type: PropType<VirtualizationSettings_2>;
878
- default: any;
879
- };
880
- suggest: {
881
- type: PropType<boolean>;
882
- default: boolean;
883
- };
884
- allowCustom: {
885
- type: PropType<boolean>;
886
- default: boolean;
887
- };
888
- clearButton: {
889
- type: PropType<boolean>;
890
- default: boolean;
891
- };
892
- ariaLabel: {
893
- type: PropType<string>;
894
- default: any;
895
- };
896
- ariaLabelledBy: PropType<string>;
897
- ariaDescribedBy: PropType<string>;
898
- valueField: PropType<string>;
899
- valuePrimitive: PropType<boolean>;
900
- rounded: {
901
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
902
- validator: (value: string) => boolean;
903
- };
904
- fillMode: {
905
- type: PropType<"flat" | "solid" | "outline">;
906
- validator: (value: string) => boolean;
907
- };
908
- size: {
909
- type: PropType<"small" | "medium" | "large">;
910
- validator: (value: string) => boolean;
911
- };
912
- groupField: {
913
- type: PropType<string>;
914
- };
915
- adaptive: {
916
- type: PropType<boolean>;
917
- default: any;
918
- };
919
- adaptiveTitle: {
920
- type: PropType<string>;
921
- default: any;
922
- };
923
- onFilterchange: PropType<(event: ComboBoxFilterChangeEvent) => void>;
924
- inputAttributes: PropType<Object>;
925
- }>> & Readonly<{
926
- onBlur?: (event: ComboBoxBlurEvent) => any;
927
- onChange?: (event: ComboBoxChangeEvent) => any;
928
- onClose?: (event: ComboBoxCloseEvent) => any;
929
- onFocus?: (event: ComboBoxFocusEvent) => any;
930
- onScroll?: (event: Event) => any;
931
- onOpen?: (event: ComboBoxOpenEvent) => any;
932
- onChangemodel?: (value: any) => any;
933
- "onUpdate:modelValue"?: (value: any) => any;
934
- onPagechange?: (event: ComboBoxPageChangeEvent) => any;
935
- onFilterchange?: (event: ComboBoxFilterChangeEvent) => any;
936
- }>, {
937
- filter: string;
938
- required: boolean;
939
- value: any;
940
- ariaLabel: string;
941
- tabIndex: number;
942
- virtual: VirtualizationSettings_2;
943
- adaptive: boolean;
944
- clearButton: boolean;
945
- dir: string;
946
- defaultValue: any;
947
- opened: boolean;
948
- popupSettings: DropDownsPopupSettings_2;
949
- modelValue: any;
950
- valid: boolean;
951
- validationMessage: string;
952
- validityStyles: boolean;
953
- adaptiveTitle: string;
954
- suggest: boolean;
955
- allowCustom: boolean;
956
- }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
957
-
958
- /**
959
- * Represents the object of the `blur` ComboBox event.
960
- */
961
- export declare interface ComboBoxBlurEvent extends BlurEvent {
962
- }
963
-
964
- /**
965
- * Represents the object of the `change` ComboBox event.
966
- */
967
- export declare interface ComboBoxChangeEvent extends ChangeEvent {
968
- }
969
-
970
- /**
971
- * Represents the object of the `close` ComboBox event.
972
- */
973
- export declare interface ComboBoxCloseEvent extends CloseEvent_2 {
974
- }
975
-
976
- /**
977
- * Represents the object of the `FilterChange` ComboBox event.
978
- */
979
- export declare interface ComboBoxFilterChangeEvent extends FilterChangeEvent {
980
- }
981
-
982
- /**
983
- * Represents the object of the `focus` ComboBox event.
984
- */
985
- export declare interface ComboBoxFocusEvent extends FocusEvent_2 {
986
- }
987
-
988
- /**
989
- * Represents the object of the `open` ComboBox event.
990
- */
991
- export declare interface ComboBoxOpenEvent extends OpenEvent {
992
- }
993
-
994
- /**
995
- * Represents the object of the `PageChange` ComboBox event.
996
- */
997
- export declare interface ComboBoxPageChangeEvent extends PageChangeEvent {
998
- }
999
-
1000
- /**
1001
- * Represents the props of the [Kendo UI for Vue ComboBox component]({% slug overview_combobox %}).
1002
- */
1003
- export declare interface ComboBoxProps extends FormComponentProps {
1004
- /**
1005
- * Sets the dataItems of the ComboBox ([more information and examples]({% slug binding_combobox %})).
1006
- */
1007
- dataItems?: any[];
1008
- /**
1009
- * Sets the opened and closed state of the ComboBox.
1010
- */
1011
- opened?: boolean;
1012
- /**
1013
- * Sets the value of the ComboBox ([more information and examples]({% slug binding_combobox %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
1014
- */
1015
- value?: any;
1016
- /**
1017
- * Sets the default value of the ComboBox. Similar to the native `select` HTML element.
1018
- */
1019
- defaultValue?: any;
1020
- /**
1021
- * Defines the name for an existing arrow icon.
1022
- */
1023
- icon?: string;
1024
- /**
1025
- * Defines the svg icon in a Kendo UI for Vue theme.
1026
- */
1027
- svgIcon?: SVGIcon;
1028
- /**
1029
- * Sets CSS classes to the expand `icon` DOM element.
1030
- */
1031
- iconClassName?: string;
1032
- /**
1033
- * If `clearButton` is set to `true`, the ComboBox renders a button on hovering over the component. Clicking this button resets the value of the ComboBox to `undefined` and triggers the `change` event.
1034
- */
1035
- clearButton?: boolean;
1036
- /**
1037
- * The hint that is displayed when the ComboBox is empty.
1038
- */
1039
- placeholder?: string;
1040
- /**
1041
- * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_combobox %})).
1042
- */
1043
- suggest?: boolean;
1044
- /**
1045
- * Specifies whether the ComboBox allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_combobox %})). Defaults to `false`.
1046
- */
1047
- allowCustom?: boolean;
1048
- /**
1049
- * Sets the disabled state of the ComboBox.
1050
- */
1051
- disabled?: boolean;
1052
- /**
1053
- * Sets additional classes to the DropDownList.
1054
- */
1055
- className?: string;
1056
- /**
1057
- * @hidden
1058
- */
1059
- modelValue?: any;
1060
- /**
1061
- * Represents the `dir` HTML attribute.
1062
- */
1063
- dir?: string;
1064
- /**
1065
- * Enables the filtering functionality of the ComboBox ([more information and examples]({% slug filtering_combobox %})).
1066
- */
1067
- filterable?: boolean;
1068
- /**
1069
- * Sets the value of ComboBox input. Useful for making the ComboBox input a controlled component.
1070
- */
1071
- filter?: string | null;
1072
- /**
1073
- * Sets the loading state of the ComboBox ([see example]({% slug filtering_combobox %}#toc-basic-configuration)).
1074
- */
1075
- loading?: boolean;
1076
- /**
1077
- * Specifies the `tabIndex` of the ComboBox.
1078
- */
1079
- tabIndex?: number;
1080
- /**
1081
- * Specifies the `accessKey` of the ComboBox.
1082
- */
1083
- accessKey?: string;
1084
- /**
1085
- * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
1086
- */
1087
- textField?: string;
1088
- /**
1089
- * Sets the data item field that represents the item value.
1090
- */
1091
- valueField?: string;
1092
- /**
1093
- * Specifies the type of the selected value. If set to true, the selected value has to be of a primitive value.
1094
- */
1095
- valuePrimitive?: boolean;
1096
- /**
1097
- * Sets the key for comparing the data items of the ComboBox. If `dataItemKey` is not set, the ComboBox compares the items by reference ([see example]({% slug binding_combobox %}#toc-datasets-of-objects)).
1098
- */
1099
- dataItemKey?: string;
1100
- /**
1101
- * Renders a floating label for the ComboBox.
1102
- */
1103
- label?: string;
1104
- /**
1105
- * Configures the popup of the ComboBox.
1106
- */
1107
- popupSettings?: DropDownsPopupSettings;
1108
- /**
1109
- * Configures the virtual scrolling of the ComboBox ([more information and examples]({% slug virtualization_combobox %})).
1110
- */
1111
- virtual?: VirtualizationSettings;
1112
- /**
1113
- * Specifies the id of the component.
1114
- */
1115
- id?: string;
1116
- /**
1117
- * 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).
1118
- * For example these elements could contain error or hint message.
1119
- */
1120
- ariaDescribedBy?: string;
1121
- /**
1122
- * Identifies the element(s) which will label the component.
1123
- */
1124
- ariaLabelledBy?: string;
1125
- /**
1126
- * Defines the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute of the component.
1127
- */
1128
- ariaLabel?: string;
1129
- /**
1130
- * If set, the ComboBox will use it to get the focused item index.
1131
- *
1132
- * Default functionality returns the first item which starts with the input text.
1133
- */
1134
- focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
1135
- /**
1136
- * Fires each time the popup of the ComboBox is about to open.
1137
- */
1138
- onOpen?: (event: ComboBoxOpenEvent) => void;
1139
- /**
1140
- * Fires each time the popup of the ComboBox is about to close.
1141
- */
1142
- onClose?: (event: ComboBoxCloseEvent) => void;
1143
- /**
1144
- * Fires each time the user focuses the ComboBox.
1145
- */
1146
- onFocus?: (event: ComboBoxFocusEvent) => void;
1147
- /**
1148
- * Fires each time the ComboBox gets blurred.
1149
- */
1150
- onBlur?: (event: ComboBoxBlurEvent) => void;
1151
- /**
1152
- * Fires each time the value of the ComboBox is about to change ([see examples]({% slug binding_combobox %})).
1153
- */
1154
- onChange?: (event: ComboBoxChangeEvent) => void;
1155
- /**
1156
- * Fires each time the user types in the filter input ([see examples]({% slug filtering_combobox %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
1157
- */
1158
- onFilterchange?: (event: ComboBoxFilterChangeEvent) => void;
1159
- /**
1160
- * Fires when both the virtual scrolling of the ComboBox is enabled and the component requires data for another page ([more information and examples]({% slug virtualization_combobox %})).
1161
- */
1162
- onPagechange?: (event: ComboBoxPageChangeEvent) => void;
1163
- /**
1164
- * Fires when a ComboBox list item is about to be rendered ([see example]({% slug customrendering_combobox %}#toc-items)). Used to override the default appearance of the list items.
1165
- */
1166
- itemRender?: any;
1167
- /**
1168
- * Fires when the element which indicates no data in the popup is about to be rendered. Used to override the default appearance of the element.
1169
- */
1170
- listNoDataRender?: any;
1171
- /**
1172
- * Sets the header component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
1173
- */
1174
- header?: any;
1175
- /**
1176
- * Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
1177
- */
1178
- footer?: any;
1179
- /**
1180
- * Configures the `size` of the ComboBox.
1181
- *
1182
- * The available options are:
1183
- * - small
1184
- * - medium
1185
- * - large
1186
- *
1187
- * @default undefined
1188
- */
1189
- size?: 'small' | 'medium' | 'large';
1190
- /**
1191
- * Configures the `roundness` of the ComboBox.
1192
- *
1193
- * The available options are:
1194
- * - none
1195
- * - small
1196
- * - medium
1197
- * - large
1198
- * - full
1199
- *
1200
- * @default undefined
1201
- */
1202
- rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
1203
- /**
1204
- * Configures the `fillMode` of the ComboBox.
1205
- *
1206
- * The available options are:
1207
- * - solid
1208
- * - outline
1209
- * - flat
1210
- *
1211
- * @default undefined
1212
- */
1213
- fillMode?: 'solid' | 'outline' | 'flat';
1214
- /**
1215
- * Sets the data item field that represents the start of a group. Applicable to objects data.
1216
- */
1217
- groupField?: string;
1218
- /**
1219
- * Fires when a ComboBox group header item is about to be rendered. Used to override the default appearance of the group's headers.
1220
- */
1221
- groupHeaderItemRender?: any;
1222
- /**
1223
- * Fires when a ComboBox sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
1224
- */
1225
- groupStickyHeaderItemRender?: any;
1226
- /**
1227
- * Provides different rendering of the popup element based on the screen dimensions ([see example]({% slug adaptive_rendering_combobox %})).
1228
- */
1229
- adaptive?: boolean;
1230
- /**
1231
- * Specifies the text that is rendered as title in the adaptive popup ([see example]({% slug adaptive_rendering_combobox %})).
1232
- */
1233
- adaptiveTitle?: string;
1234
- /**
1235
- * Sets the built-in HTML attributes of the inner focusable input element.
1236
- * Attributes which are essential for certain component functionalities cannot be changed.
1237
- */
1238
- inputAttributes?: Object;
1239
- }
1240
-
1241
- /**
1242
- * @hidden
1243
- */
1244
- declare interface DropdownEvent {
1245
- /**
1246
- * A native event.
1247
- */
1248
- event: any;
1249
- /**
1250
- * An event target.
1251
- */
1252
- target: any;
1253
- }
1254
-
1255
- /**
1256
- * @hidden
1257
- */
1258
- export declare const DropDownList: DefineComponent<ExtractPropTypes< {
1259
- id: PropType<string>;
1260
- title: PropType<string>;
1261
- dataItemKey: {
1262
- type: PropType<string>;
1263
- };
1264
- defaultValue: {
1265
- type: PropType<any>;
1266
- default: any;
1267
- };
1268
- name: PropType<string>;
1269
- modelValue: {
1270
- type: PropType<any>;
1271
- default: any;
1272
- };
1273
- value: {
1274
- type: PropType<any>;
1275
- default: any;
1276
- };
1277
- label: {
1278
- type: PropType<string>;
1279
- };
1280
- required: {
1281
- type: PropType<boolean>;
1282
- default: boolean;
1283
- };
1284
- leftRightKeysNavigation: {
1285
- type: PropType<boolean>;
1286
- default: boolean;
1287
- };
1288
- valid: {
1289
- type: PropType<boolean>;
1290
- default: any;
1291
- };
1292
- validate: {
1293
- type: PropType<boolean>;
1294
- };
1295
- validationMessage: {
1296
- type: PropType<string>;
1297
- default: any;
1298
- };
1299
- validityStyles: {
1300
- type: PropType<boolean>;
1301
- default: boolean;
1302
- };
1303
- delay: {
1304
- type: PropType<number>;
1305
- default: number;
1306
- };
1307
- ignoreCase: {
1308
- type: PropType<boolean>;
1309
- default: boolean;
1310
- };
1311
- icon: PropType<string>;
1312
- svgIcon: PropType<SVGIcon>;
1313
- iconClassName: PropType<string>;
1314
- defaultItem: PropType<any>;
1315
- valueRender: PropType<any>;
1316
- valueMap: PropType<(value: any) => any>;
1317
- opened: {
1318
- type: PropType<boolean>;
1319
- default: any;
1320
- };
1321
- disabled: PropType<boolean>;
1322
- dir: {
1323
- type: PropType<string>;
1324
- default: any;
1325
- };
1326
- tabIndex: {
1327
- type: PropType<number>;
1328
- default: number;
1329
- };
1330
- accessKey: PropType<string>;
1331
- dataItems: PropType<any[]>;
1332
- textField: PropType<string>;
1333
- valueField: PropType<string>;
1334
- valuePrimitive: PropType<boolean>;
1335
- className: PropType<string>;
1336
- loading: PropType<boolean>;
1337
- popupSettings: {
1338
- type: PropType<DropDownsPopupSettings_2>;
1339
- default: {
1340
- animate: boolean;
1341
- height: string;
1342
- anchor: string;
1343
- };
1344
- };
1345
- itemRender: PropType<any>;
1346
- groupHeaderItemRender: PropType<any>;
1347
- groupStickyHeaderItemRender: PropType<any>;
1348
- listNoDataRender: PropType<any>;
1349
- focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
1350
- header: PropType<any>;
1351
- footer: PropType<any>;
1352
- filterable: PropType<boolean>;
1353
- filter: {
1354
- type: PropType<string>;
1355
- default: any;
1356
- };
1357
- virtual: {
1358
- type: PropType<VirtualizationSettings_2>;
1359
- default: any;
1360
- };
1361
- ariaLabelledBy: PropType<string>;
1362
- ariaLabel: PropType<string>;
1363
- ariaDescribedBy: PropType<string>;
1364
- rounded: {
1365
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
1366
- validator: (value: string) => boolean;
1367
- };
1368
- fillMode: {
1369
- type: PropType<"flat" | "solid" | "outline">;
1370
- validator: (value: string) => boolean;
1371
- };
1372
- size: {
1373
- type: PropType<"small" | "medium" | "large">;
1374
- validator: (value: string) => boolean;
1375
- };
1376
- groupField: {
1377
- type: PropType<string>;
1378
- };
1379
- adaptive: {
1380
- type: PropType<boolean>;
1381
- default: any;
1382
- };
1383
- adaptiveTitle: {
1384
- type: PropType<string>;
1385
- default: any;
1386
- };
1387
- onChange: PropType<(event: DropDownListChangeEvent_2) => void>;
1388
- }>, {
1389
- selectRef: Ref<any, any>;
1390
- baseWrapperRef: Ref<any, any>;
1391
- kendoAnchorRef: Ref<any, any>;
1392
- }, {
1393
- hasMounted: boolean;
1394
- currentText: string;
1395
- currentValue: string;
1396
- currentFocused: boolean;
1397
- currentOpened: boolean;
1398
- searchState: {
1399
- word: string;
1400
- last: string;
1401
- };
1402
- _skipFocusEvent: boolean;
1403
- valueDuringOnChange: {};
1404
- _navigated: boolean;
1405
- group: any;
1406
- isScrolling: boolean;
1407
- itemHeight: number;
1408
- state: any;
1409
- popupWidth: any;
1410
- windowWidth: number;
1411
- }, {
1412
- index(): number;
1413
- spanClassNames(): object;
1414
- dropDownListId(): string;
1415
- isOpen(): boolean;
1416
- animationStyles(): object | undefined;
1417
- classNameAdaptive(): string;
1418
- adaptiveState(): boolean;
1419
- }, {
1420
- focus(): void;
1421
- computedValue(): any;
1422
- findByFieldValue(field: string, value: string): any;
1423
- primitiveValue(): any;
1424
- validity(): FormComponentValidity;
1425
- handleItemSelect(index: number, state: InternalState): void;
1426
- onNavigate(state: InternalState, keyCode: number): void;
1427
- search(event: any): void;
1428
- selectNext(event: any): void;
1429
- handleKeyDown(event: any): void;
1430
- handleItemClick(index: number, event: any): void;
1431
- handleFocus(event: any): void;
1432
- handleBlur(event: any): void;
1433
- handleDefaultItemClick(event: any): void;
1434
- handleWrapperClick(event: MouseEvent): void;
1435
- handleKeyPress(event: any): void;
1436
- handleListFilterChange(event: any): void;
1437
- onPopupOpened(): void;
1438
- onPopupClosed(): void;
1439
- focusedIndex(): any;
1440
- focusElement(element: HTMLElement): void;
1441
- setValidity(): void;
1442
- triggerOnChange(item: any, state: InternalState): void;
1443
- applyState(state: InternalState): void;
1444
- calculateMedia(entries: ResizeObserverEntry[]): void;
1445
- repositionPopup(): void;
1446
- onScroll(event: any): void;
1447
- }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
1448
- id: PropType<string>;
1449
- title: PropType<string>;
1450
- dataItemKey: {
1451
- type: PropType<string>;
1452
- };
1453
- defaultValue: {
1454
- type: PropType<any>;
1455
- default: any;
1456
- };
1457
- name: PropType<string>;
1458
- modelValue: {
1459
- type: PropType<any>;
1460
- default: any;
1461
- };
1462
- value: {
1463
- type: PropType<any>;
1464
- default: any;
1465
- };
1466
- label: {
1467
- type: PropType<string>;
1468
- };
1469
- required: {
1470
- type: PropType<boolean>;
1471
- default: boolean;
1472
- };
1473
- leftRightKeysNavigation: {
1474
- type: PropType<boolean>;
1475
- default: boolean;
1476
- };
1477
- valid: {
1478
- type: PropType<boolean>;
1479
- default: any;
1480
- };
1481
- validate: {
1482
- type: PropType<boolean>;
1483
- };
1484
- validationMessage: {
1485
- type: PropType<string>;
1486
- default: any;
1487
- };
1488
- validityStyles: {
1489
- type: PropType<boolean>;
1490
- default: boolean;
1491
- };
1492
- delay: {
1493
- type: PropType<number>;
1494
- default: number;
1495
- };
1496
- ignoreCase: {
1497
- type: PropType<boolean>;
1498
- default: boolean;
1499
- };
1500
- icon: PropType<string>;
1501
- svgIcon: PropType<SVGIcon>;
1502
- iconClassName: PropType<string>;
1503
- defaultItem: PropType<any>;
1504
- valueRender: PropType<any>;
1505
- valueMap: PropType<(value: any) => any>;
1506
- opened: {
1507
- type: PropType<boolean>;
1508
- default: any;
1509
- };
1510
- disabled: PropType<boolean>;
1511
- dir: {
1512
- type: PropType<string>;
1513
- default: any;
1514
- };
1515
- tabIndex: {
1516
- type: PropType<number>;
1517
- default: number;
1518
- };
1519
- accessKey: PropType<string>;
1520
- dataItems: PropType<any[]>;
1521
- textField: PropType<string>;
1522
- valueField: PropType<string>;
1523
- valuePrimitive: PropType<boolean>;
1524
- className: PropType<string>;
1525
- loading: PropType<boolean>;
1526
- popupSettings: {
1527
- type: PropType<DropDownsPopupSettings_2>;
1528
- default: {
1529
- animate: boolean;
1530
- height: string;
1531
- anchor: string;
1532
- };
1533
- };
1534
- itemRender: PropType<any>;
1535
- groupHeaderItemRender: PropType<any>;
1536
- groupStickyHeaderItemRender: PropType<any>;
1537
- listNoDataRender: PropType<any>;
1538
- focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
1539
- header: PropType<any>;
1540
- footer: PropType<any>;
1541
- filterable: PropType<boolean>;
1542
- filter: {
1543
- type: PropType<string>;
1544
- default: any;
1545
- };
1546
- virtual: {
1547
- type: PropType<VirtualizationSettings_2>;
1548
- default: any;
1549
- };
1550
- ariaLabelledBy: PropType<string>;
1551
- ariaLabel: PropType<string>;
1552
- ariaDescribedBy: PropType<string>;
1553
- rounded: {
1554
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
1555
- validator: (value: string) => boolean;
1556
- };
1557
- fillMode: {
1558
- type: PropType<"flat" | "solid" | "outline">;
1559
- validator: (value: string) => boolean;
1560
- };
1561
- size: {
1562
- type: PropType<"small" | "medium" | "large">;
1563
- validator: (value: string) => boolean;
1564
- };
1565
- groupField: {
1566
- type: PropType<string>;
1567
- };
1568
- adaptive: {
1569
- type: PropType<boolean>;
1570
- default: any;
1571
- };
1572
- adaptiveTitle: {
1573
- type: PropType<string>;
1574
- default: any;
1575
- };
1576
- onChange: PropType<(event: DropDownListChangeEvent_2) => void>;
1577
- }>> & Readonly<{}>, {
1578
- filter: string;
1579
- required: boolean;
1580
- value: any;
1581
- tabIndex: number;
1582
- virtual: VirtualizationSettings_2;
1583
- adaptive: boolean;
1584
- dir: string;
1585
- defaultValue: any;
1586
- opened: boolean;
1587
- popupSettings: DropDownsPopupSettings_2;
1588
- modelValue: any;
1589
- valid: boolean;
1590
- validationMessage: string;
1591
- validityStyles: boolean;
1592
- adaptiveTitle: string;
1593
- delay: number;
1594
- ignoreCase: boolean;
1595
- leftRightKeysNavigation: boolean;
1596
- }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
1597
-
1598
- /**
1599
- * Represents the object of the `blur` DropDownList event.
1600
- */
1601
- export declare interface DropDownListBlurEvent extends BlurEvent {
1602
- }
1603
-
1604
- /**
1605
- * Represents the object of the `change` DropDownList event.
1606
- */
1607
- export declare interface DropDownListChangeEvent extends ChangeEvent {
1608
- }
1609
-
1610
- /**
1611
- * Represents the object of the `close` DropDownList event.
1612
- */
1613
- export declare interface DropDownListCloseEvent extends CloseEvent_2 {
1614
- }
1615
-
1616
- /**
1617
- * Represents the object of the `filterChange` DropDownList event.
1618
- */
1619
- export declare interface DropDownListFilterChangeEvent extends FilterChangeEvent {
1620
- }
1621
-
1622
- /**
1623
- * Represents the object of the `focus` DropDownList event.
1624
- */
1625
- export declare interface DropDownListFocusEvent extends FocusEvent_2 {
1626
- }
1627
-
1628
- /**
1629
- * Represents the object of the `open` DropDownList event.
1630
- */
1631
- export declare interface DropDownListOpenEvent extends OpenEvent {
1632
- }
1633
-
1634
- /**
1635
- * Represents the object of the `pageChange` DropDownList event.
1636
- */
1637
- export declare interface DropDownListPageChangeEvent extends PageChangeEvent {
1638
- }
1639
-
1640
- /**
1641
- * Represents the props of the [KendoVue DropDownList component]({% slug overview_dropdownlist %}).
1642
- */
1643
- export declare interface DropDownListProps extends FormComponentProps {
1644
- /**
1645
- * Specifies the id of the component.
1646
- */
1647
- id?: string;
1648
- /**
1649
- * Specifies the title of the component.
1650
- */
1651
- title?: string;
1652
- /**
1653
- * 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).
1654
- * For example these elements could contain error or hint message.
1655
- */
1656
- ariaDescribedBy?: string;
1657
- /**
1658
- * Identifies the element(s) which will label the component.
1659
- */
1660
- ariaLabelledBy?: string;
1661
- /**
1662
- * Defines the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute of the component.
1663
- */
1664
- ariaLabel?: string;
1665
- /**
1666
- * There is no placeholder concept when it comes to DropDownList/HTML select element. The approach
1667
- * that we recommend in such cases is to use the default Item as it is shown here ([see example]({% slug defaultitem_dropdownlist %})).
1668
- */
1669
- placeholder?: string;
1670
- /**
1671
- * Sets the validate of the input.
1672
- */
1673
- validate?: boolean;
1674
- /**
1675
- * Sets the data of the DropDownList ([see example]({% slug binding_dropdownlist %})).
1676
- */
1677
- dataItems?: any[];
1678
- /**
1679
- * Sets the text of the default empty item. The type of the defined value has to match the data type.
1680
- */
1681
- defaultItem?: any;
1682
- /**
1683
- * Sets the delay before an item search is performed. When filtration is disabled, use this option.
1684
- */
1685
- delay?: number;
1686
- /**
1687
- * Enables a case-insensitive search. When filtering is disabled, use this option.
1688
- */
1689
- ignoreCase?: boolean;
1690
- /**
1691
- * Sets the opened and closed state of the DropDownList.
1692
- */
1693
- opened?: boolean;
1694
- /**
1695
- * The styles that are applied to the DropDownList.
1696
- */
1697
- style?: any;
1698
- /**
1699
- * @hidden
1700
- */
1701
- modelValue?: any;
1702
- /**
1703
- * Sets the value of the DropDownList ([see example]({% slug binding_dropdownlist %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
1704
- */
1705
- value?: any;
1706
- /**
1707
- * Sets the default value of the DropDownList ([see example]({% slug defaultitem_dropdownlist %})). Similar to the native `select` HTML element.
1708
- */
1709
- defaultValue?: any;
1710
- /**
1711
- * Sets additional classes to the DropDownList.
1712
- */
1713
- className?: string;
1714
- /**
1715
- * Defines the name for an existing arrow icon.
1716
- */
1717
- icon?: string;
1718
- /**
1719
- * Defines the svg icon in a Kendo UI for Vue theme.
1720
- */
1721
- svgIcon?: SVGIcon;
1722
- /**
1723
- * Sets CSS classes to the expand `icon` DOM element.
1724
- */
1725
- iconClassName?: string;
1726
- /**
1727
- * Sets the disabled state of the DropDownList.
1728
- */
1729
- disabled?: boolean;
1730
- /**
1731
- * Represents the `dir` HTML attribute.
1732
- */
1733
- dir?: string;
1734
- /**
1735
- * Enables the filtering functionality of the DropDownList ([more information and examples]({% slug filtering_dropdownlist %})).
1736
- */
1737
- filterable?: boolean;
1738
- /**
1739
- * Sets the value of filtering input.
1740
- */
1741
- filter?: string;
1742
- /**
1743
- * Sets the loading state of the DropDownList.
1744
- */
1745
- loading?: boolean;
1746
- /**
1747
- * Specifies the `tabIndex` of the DropDownList.
1748
- */
1749
- tabIndex?: number;
1750
- /**
1751
- * Specifies the `accessKey` of the DropDownList.
1752
- */
1753
- accessKey?: string;
1754
- /**
1755
- * Sets the data item field that represents the item text ([see example]({% slug defaultitem_dropdownlist %})). If the data contains only primitive values, do not define it.
1756
- */
1757
- textField?: string;
1758
- /**
1759
- * Sets the data item field that represents the item value.
1760
- */
1761
- valueField?: string;
1762
- /**
1763
- * Specifies the type of the selected value. If set to true, the selected value has to be of a primitive value.
1764
- */
1765
- valuePrimitive?: boolean;
1766
- /**
1767
- * Sets the key for comparing the data items of the DropDownList. If `dataItemKey` is not set, the DropDownList compares the items by reference ([see example]({% slug binding_dropdownlist %}#toc-datasets-of-objects)).
1768
- */
1769
- dataItemKey?: string;
1770
- /**
1771
- * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select` element.
1772
- */
1773
- valueMap?: (value: any) => any;
1774
- /**
1775
- * Renders a floating label for the DropDownList.
1776
- */
1777
- label?: string;
1778
- /**
1779
- * Configures the popup of the DropDownList.
1780
- */
1781
- popupSettings?: DropDownsPopupSettings;
1782
- /**
1783
- * Configures the virtual scrolling of the DropDownList ([see example]({% slug virtualization_dropdownlist %})).
1784
- */
1785
- virtual?: VirtualizationSettings;
1786
- /**
1787
- * If set, the DropDownList will use it to get the focused item index.
1788
- *
1789
- * Default functionality returns the first item which starts with the input text.
1790
- *
1791
- */
1792
- focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
1793
- /**
1794
- * Fires each time the popup of the DropDownList is about to open.
1795
- */
1796
- onOpen?: (event: DropDownListOpenEvent) => void;
1797
- /**
1798
- * Fires each time the popup of the DropDownList is about to close.
1799
- */
1800
- onClose?: (event: DropDownListCloseEvent) => void;
1801
- /**
1802
- * Fires each time the user focuses the DropDownList.
1803
- */
1804
- onFocus?: (event: DropDownListFocusEvent) => void;
1805
- /**
1806
- * Fires each time the DropDownList gets blurred.
1807
- */
1808
- onBlur?: (event: DropDownListBlurEvent) => void;
1809
- /**
1810
- * Fires each time the value of the DropDownList is about to change ([see examples]({% slug binding_dropdownlist %})).
1811
- */
1812
- onChange?: (event: DropDownListChangeEvent) => void;
1813
- /**
1814
- * Fires each time the user types in the filter input. You can filter the source based on the passed filtration value.
1815
- */
1816
- onFilterchange?: (event: DropDownListFilterChangeEvent) => void;
1817
- /**
1818
- * Fires when both the virtual scrolling of the DropDownList is enabled and the component requires data for another page ([see example]({% slug virtualization_dropdownlist %})).
1819
- */
1820
- onPagechange?: (event: DropDownListPageChangeEvent) => void;
1821
- /**
1822
- * Fires when a DropDownList item is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-items)). Used to override the default appearance of the list items.
1823
- */
1824
- itemRender?: any;
1825
- /**
1826
- * Fires when the element which renders the value is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-values)). Used to override the default appearance of the element.
1827
- */
1828
- valueRender?: any;
1829
- /**
1830
- * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-no-data)). Used to override the default appearance of the element.
1831
- */
1832
- listNoDataRender?: any;
1833
- /**
1834
- * Sets the header component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)).
1835
- */
1836
- header?: any;
1837
- /**
1838
- * Sets the footer component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)).
1839
- */
1840
- footer?: any;
1841
- /**
1842
- * Specifies the `name` property of the `select` DOM element.
1843
- */
1844
- name?: string;
1845
- /**
1846
- * If set to `false`, the DropDownList will not navigate over its data through left and right keys.
1847
- * Useful when the DropDownList is placed inside a toolbar which needs to handle left and right keys.
1848
- */
1849
- leftRightKeysNavigation?: boolean;
1850
- /**
1851
- * Configures the `size` of the DropDownList.
1852
- *
1853
- * The available options are:
1854
- * - small
1855
- * - medium
1856
- * - large
1857
- *
1858
- * @default undefined
1859
- */
1860
- size?: 'small' | 'medium' | 'large';
1861
- /**
1862
- * Configures the `roundness` of the DropDownList.
1863
- *
1864
- * The available options are:
1865
- * - none
1866
- * - small
1867
- * - medium
1868
- * - large
1869
- * - full
1870
- *
1871
- * @default undefined
1872
- */
1873
- rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
1874
- /**
1875
- * Configures the `fillMode` of the DropDownList.
1876
- *
1877
- * The available options are:
1878
- * - solid
1879
- * - outline
1880
- * - flat
1881
- *
1882
- * @default undefined
1883
- */
1884
- fillMode?: 'solid' | 'outline' | 'flat';
1885
- /**
1886
- * Sets the data item field that represents the start of a group. Applicable to objects data.
1887
- */
1888
- groupField?: string;
1889
- /**
1890
- * Fires when a DropDownList group header item is about to be rendered. Used to override the default appearance of the group's headers.
1891
- */
1892
- groupHeaderItemRender?: any;
1893
- /**
1894
- * 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.
1895
- */
1896
- groupStickyHeaderItemRender?: any;
1897
- /**
1898
- * Provides different rendering of the popup element based on the screen dimensions ([see example]({% slug adaptive_rendering_dropdownlist %})).
1899
- */
1900
- adaptive?: boolean;
1901
- /**
1902
- * Specifies the text that is rendered as title in the adaptive popup ([see example]({% slug adaptive_rendering_dropdownlist %})).
1903
- */
1904
- adaptiveTitle?: string;
1905
- }
1906
-
1907
- /**
1908
- * The settings of the popup container.
1909
- */
1910
- export declare interface DropDownsPopupSettings extends PopupSettings {
1911
- /**
1912
- * Controls the popup animation. By default, the open and close animations are enabled.
1913
- */
1914
- animate?: boolean | PopupAnimation;
1915
- /**
1916
- * Specifies a list of CSS classes that will be added to the Popup element.
1917
- */
1918
- className?: string | Array<string>;
1919
- /**
1920
- * Sets the width of the popup container. By default, the width of the host element is used.
1921
- */
1922
- width?: string;
1923
- /**
1924
- * Sets the height of the popup container. By default, the height is 200px.
1925
- */
1926
- height?: string;
1927
- /**
1928
- * Sets the styles that will be added to the popup element.
1929
- */
1930
- popupStyle?: string;
1931
- }
1932
-
1933
- /**
1934
- * @hidden
1935
- */
1936
- declare interface DropDownStateBase {
1937
- /**
1938
- * Input element text of the Component.
1939
- */
1940
- text?: string;
1941
- value?: any;
1942
- focused?: boolean;
1943
- opened?: boolean;
1944
- group?: string;
1945
- currentText?: string;
1946
- currentFocused?: boolean;
1947
- currentOpened?: boolean;
1948
- focusedItem?: any;
1949
- }
1950
-
1951
- /**
1952
- * @hidden
1953
- */
1954
- export declare const DropDownTree: DefineComponent<ExtractPropTypes< {
1955
- opened: {
1956
- type: PropType<boolean>;
1957
- default: any;
1958
- };
1959
- disabled: PropType<boolean>;
1960
- dir: PropType<string>;
1961
- tabIndex: PropType<number>;
1962
- accessKey: PropType<string>;
1963
- dataItems: {
1964
- type: PropType<any[]>;
1965
- default: () => any[];
1966
- };
1967
- value: {
1968
- type: PropType<any>;
1969
- default: () => any;
1970
- };
1971
- modelValue: {
1972
- type: PropType<any>;
1973
- default: () => any;
1974
- };
1975
- valueMap: PropType<(value: any) => any>;
1976
- placeholder: PropType<string>;
1977
- dataItemKey: {
1978
- type: PropType<string>;
1979
- required: true;
1980
- };
1981
- textField: {
1982
- type: PropType<string>;
1983
- required: true;
1984
- };
1985
- selectField: {
1986
- type: PropType<string>;
1987
- default: string;
1988
- };
1989
- expandField: PropType<string>;
1990
- subItemsField: {
1991
- type: PropType<string>;
1992
- default: string;
1993
- };
1994
- className: PropType<string>;
1995
- label: PropType<string>;
1996
- validationMessage: PropType<string>;
1997
- validityStyles: {
1998
- type: PropType<boolean>;
1999
- default: boolean;
2000
- };
2001
- valid: {
2002
- type: PropType<boolean>;
2003
- default: any;
2004
- };
2005
- required: PropType<boolean>;
2006
- name: PropType<string>;
2007
- id: PropType<string>;
2008
- ariaLabel: {
2009
- type: PropType<string>;
2010
- default: any;
2011
- };
2012
- ariaLabelledBy: PropType<string>;
2013
- ariaDescribedBy: PropType<string>;
2014
- filterable: PropType<boolean>;
2015
- filter: PropType<string>;
2016
- loading: PropType<boolean>;
2017
- popupSettings: {
2018
- type: PropType<DropDownsPopupSettings_3>;
2019
- default: () => {
2020
- animate: boolean;
2021
- height: string;
2022
- anchor: string;
2023
- };
2024
- };
2025
- size: {
2026
- type: PropType<"small" | "medium" | "large">;
2027
- validator: (value: any) => boolean;
2028
- };
2029
- rounded: {
2030
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
2031
- validator: (value: any) => boolean;
2032
- };
2033
- fillMode: {
2034
- type: PropType<"flat" | "solid" | "outline">;
2035
- validator: (value: any) => boolean;
2036
- };
2037
- item: PropType<any>;
2038
- header: PropType<any>;
2039
- footer: PropType<any>;
2040
- valueRender: PropType<any>;
2041
- listNoData: PropType<any>;
2042
- adaptive: {
2043
- type: PropType<boolean>;
2044
- default: any;
2045
- };
2046
- adaptiveTitle: {
2047
- type: PropType<string>;
2048
- default: any;
2049
- };
2050
- }>, {}, {
2051
- currentOpened: boolean;
2052
- focused: boolean;
2053
- filterState: string;
2054
- currentValue: any;
2055
- popupWidth: string;
2056
- windowWidth: number;
2057
- initialAdaptiveRenderingValues: any;
2058
- }, {
2059
- wrapperClass(): {
2060
- [x: string]: any;
2061
- [x: number]: any;
2062
- 'k-dropdowntree': boolean;
2063
- 'k-picker': boolean;
2064
- 'k-focus': any;
2065
- 'k-invalid': boolean;
2066
- 'k-loading': any;
2067
- 'k-required': any;
2068
- 'k-disabled': any;
2069
- };
2070
- animationStyles(): object | undefined;
2071
- classNameAdaptive(): string;
2072
- adaptiveState(): any;
2073
- isOpen(): any;
2074
- computedValue(): any;
2075
- hasValue(): boolean;
2076
- currentValueText(): any;
2077
- }, {
2078
- calculateMedia(entries: ResizeObserverEntry[]): void;
2079
- calculatePopupWidth(): void;
2080
- focus(): void;
2081
- setValidity(): void;
2082
- openPopup(event: DropdownEvent): void;
2083
- closePopup(event: DropdownEvent): void;
2084
- onWrapperClick(event: any): void;
2085
- switchFocus(focusFn: () => void): void;
2086
- onWrapperKeyDown(event: any): any;
2087
- onInputKeyDown(event: KeyboardEvent): void;
2088
- focusElement(element: HTMLElement | null): void;
2089
- onPopupOpened(): void;
2090
- onPopupClosed(): void;
2091
- onFocus(event: any): void;
2092
- onBlur(event: any): void;
2093
- onWrapperMouseDown(): void;
2094
- changeValue(event: DropdownEvent, newValue: any, hierarchicalIndex?: string): void;
2095
- onChange(e: TreeViewItemClickEvent): void;
2096
- onClear(event: any): void;
2097
- onExpand(e: TreeViewExpandChangeEvent): void;
2098
- onFilterChange(event: any): void;
2099
- }, ComponentOptionsMixin, ComponentOptionsMixin, {
2100
- open: (event: DropDownTreeOpenEvent) => true;
2101
- close: (event: DropDownTreeCloseEvent) => true;
2102
- focus: (event: DropDownTreeFocusEvent) => true;
2103
- blur: (event: DropDownTreeBlurEvent) => true;
2104
- change: (event: DropDownTreeChangeEvent) => true;
2105
- filterchange: (event: DropDownTreeFilterChangeEvent) => true;
2106
- expandchange: (event: DropDownTreeExpandEvent) => true;
2107
- changemodel: (value: any) => true;
2108
- 'update:modelValue': (value: any) => true;
2109
- }, string, PublicProps, Readonly<ExtractPropTypes< {
2110
- opened: {
2111
- type: PropType<boolean>;
2112
- default: any;
2113
- };
2114
- disabled: PropType<boolean>;
2115
- dir: PropType<string>;
2116
- tabIndex: PropType<number>;
2117
- accessKey: PropType<string>;
2118
- dataItems: {
2119
- type: PropType<any[]>;
2120
- default: () => any[];
2121
- };
2122
- value: {
2123
- type: PropType<any>;
2124
- default: () => any;
2125
- };
2126
- modelValue: {
2127
- type: PropType<any>;
2128
- default: () => any;
2129
- };
2130
- valueMap: PropType<(value: any) => any>;
2131
- placeholder: PropType<string>;
2132
- dataItemKey: {
2133
- type: PropType<string>;
2134
- required: true;
2135
- };
2136
- textField: {
2137
- type: PropType<string>;
2138
- required: true;
2139
- };
2140
- selectField: {
2141
- type: PropType<string>;
2142
- default: string;
2143
- };
2144
- expandField: PropType<string>;
2145
- subItemsField: {
2146
- type: PropType<string>;
2147
- default: string;
2148
- };
2149
- className: PropType<string>;
2150
- label: PropType<string>;
2151
- validationMessage: PropType<string>;
2152
- validityStyles: {
2153
- type: PropType<boolean>;
2154
- default: boolean;
2155
- };
2156
- valid: {
2157
- type: PropType<boolean>;
2158
- default: any;
2159
- };
2160
- required: PropType<boolean>;
2161
- name: PropType<string>;
2162
- id: PropType<string>;
2163
- ariaLabel: {
2164
- type: PropType<string>;
2165
- default: any;
2166
- };
2167
- ariaLabelledBy: PropType<string>;
2168
- ariaDescribedBy: PropType<string>;
2169
- filterable: PropType<boolean>;
2170
- filter: PropType<string>;
2171
- loading: PropType<boolean>;
2172
- popupSettings: {
2173
- type: PropType<DropDownsPopupSettings_3>;
2174
- default: () => {
2175
- animate: boolean;
2176
- height: string;
2177
- anchor: string;
2178
- };
2179
- };
2180
- size: {
2181
- type: PropType<"small" | "medium" | "large">;
2182
- validator: (value: any) => boolean;
2183
- };
2184
- rounded: {
2185
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
2186
- validator: (value: any) => boolean;
2187
- };
2188
- fillMode: {
2189
- type: PropType<"flat" | "solid" | "outline">;
2190
- validator: (value: any) => boolean;
2191
- };
2192
- item: PropType<any>;
2193
- header: PropType<any>;
2194
- footer: PropType<any>;
2195
- valueRender: PropType<any>;
2196
- listNoData: PropType<any>;
2197
- adaptive: {
2198
- type: PropType<boolean>;
2199
- default: any;
2200
- };
2201
- adaptiveTitle: {
2202
- type: PropType<string>;
2203
- default: any;
2204
- };
2205
- }>> & Readonly<{
2206
- onBlur?: (event: DropDownTreeBlurEvent) => any;
2207
- onChange?: (event: DropDownTreeChangeEvent) => any;
2208
- onClose?: (event: DropDownTreeCloseEvent) => any;
2209
- onFocus?: (event: DropDownTreeFocusEvent) => any;
2210
- onOpen?: (event: DropDownTreeOpenEvent) => any;
2211
- onChangemodel?: (value: any) => any;
2212
- "onUpdate:modelValue"?: (value: any) => any;
2213
- onFilterchange?: (event: DropDownTreeFilterChangeEvent) => any;
2214
- onExpandchange?: (event: DropDownTreeExpandEvent) => any;
2215
- }>, {
2216
- value: any;
2217
- ariaLabel: string;
2218
- adaptive: boolean;
2219
- dataItems: any[];
2220
- opened: boolean;
2221
- popupSettings: DropDownsPopupSettings_3;
2222
- modelValue: any;
2223
- valid: boolean;
2224
- validityStyles: boolean;
2225
- adaptiveTitle: string;
2226
- selectField: string;
2227
- subItemsField: string;
2228
- }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
2229
-
2230
- /**
2231
- * Represents the object of the `onBlur` DropDownTree event.
2232
- */
2233
- export declare interface DropDownTreeBlurEvent extends BlurEvent {
2234
- }
2235
-
2236
- /**
2237
- * Represents the object of the `onChange` DropDownTree event.
2238
- */
2239
- export declare interface DropDownTreeChangeEvent extends ChangeEvent {
2240
- level: number[];
2241
- }
2242
-
2243
- /**
2244
- * Represents the object of the `onClose` DropDownTree event.
2245
- */
2246
- export declare interface DropDownTreeCloseEvent extends CloseEvent_2 {
2247
- }
2248
-
2249
- /**
2250
- * Represents the object of the `onExpandChange` DropDownTree event.
2251
- */
2252
- export declare interface DropDownTreeExpandEvent extends DropdownEvent {
2253
- item: any;
2254
- level: number[];
2255
- }
2256
-
2257
- /**
2258
- * Represents the object of the `onFilterChange` DropDownTree event.
2259
- */
2260
- export declare interface DropDownTreeFilterChangeEvent extends FilterChangeEvent {
2261
- }
2262
-
2263
- /**
2264
- * Represents the object of the `onFocus` DropDownTree event.
2265
- */
2266
- export declare interface DropDownTreeFocusEvent extends FocusEvent_2 {
2267
- }
2268
-
2269
- /**
2270
- * Represents the Object which is passed to the
2271
- */
2272
- export declare interface DropDownTreeHandle {
2273
- /**
2274
- * The current element or `null` if there is no one.
2275
- */
2276
- element: HTMLElement | null;
2277
- /**
2278
- * The props of the DropDownTree component.
2279
- */
2280
- props: DropDownTreeProps;
2281
- /**
2282
- * The focus function.
2283
- */
2284
- focus: () => void;
2285
- }
2286
-
2287
- /**
2288
- * Represents the object of the `onOpen` DropDownTree event.
2289
- */
2290
- export declare interface DropDownTreeOpenEvent extends OpenEvent {
2291
- }
2292
-
2293
- /**
2294
- * Represents the props of the [Kendo UI for Vue DropDownTree component]({% slug overview_dropdowntree %}).
2295
- */
2296
- export declare interface DropDownTreeProps extends FormComponentProps {
2297
- /**
2298
- * Sets the data of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
2299
- */
2300
- dataItems?: any[];
2301
- /**
2302
- * Sets the opened state of the DropDownTree.
2303
- */
2304
- opened?: boolean;
2305
- /**
2306
- * Sets the value of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
2307
- * It can be an object from the data-tree.
2308
- */
2309
- value?: any;
2310
- modelValue?: any;
2311
- /**
2312
- * The hint that is displayed when the DropDownTree is empty.
2313
- */
2314
- placeholder?: string;
2315
- /**
2316
- * Sets the key for comparing the data items of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
2317
- * If `dataItemKey` is not set, the DropDownTree compares the items by reference.
2318
- */
2319
- dataItemKey: string;
2320
- /**
2321
- * Sets additional classes to the DropDownTree.
2322
- */
2323
- className?: string;
2324
- /**
2325
- * Sets the disabled state of the DropDownTree.
2326
- */
2327
- disabled?: boolean;
2328
- /**
2329
- * Represents the `dir` HTML attribute.
2330
- */
2331
- dir?: string;
2332
- /**
2333
- * Renders a floating label for the DropDownTree.
2334
- */
2335
- label?: string;
2336
- /**
2337
- * Specifies the id of the component.
2338
- */
2339
- id?: string;
2340
- /**
2341
- * 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).
2342
- * For example these elements could contain error or hint message.
2343
- */
2344
- ariaDescribedBy?: string;
2345
- /**
2346
- * Identifies the element(s) which will label the component.
2347
- */
2348
- ariaLabelledBy?: string;
2349
- /**
2350
- * Defines the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute of the component.
2351
- */
2352
- ariaLabel?: string;
2353
- /**
2354
- * Enables the filtering functionality of the DropDownTree ([more information and examples]({% slug filtering_dropdowntree %})).
2355
- */
2356
- filterable?: boolean;
2357
- /**
2358
- * Sets the value of filtering input.
2359
- * Useful for making the filtering input a controlled component.
2360
- */
2361
- filter?: string;
2362
- /**
2363
- * Sets the loading state of the DropDownTree ([see example]({% slug filtering_dropdowntree %}#toc-visualize-filtering)).
2364
- */
2365
- loading?: boolean;
2366
- /**
2367
- * Specifies the `tabIndex` of the DropDownTree.
2368
- */
2369
- tabIndex?: number;
2370
- /**
2371
- * Specifies the `accessKey` of the DropDownTree.
2372
- */
2373
- accessKey?: string;
2374
- /**
2375
- * Sets the data item field that represents the item text ([see example]({% slug overview_dropdowntree %})).
2376
- */
2377
- textField: string;
2378
- /**
2379
- * Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
2380
- */
2381
- selectField?: string;
2382
- /**
2383
- * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
2384
- */
2385
- expandField?: string;
2386
- /**
2387
- * Specifies the name of the field which will provide an array representation of the item subitems.
2388
- * Defaults to 'items'.
2389
- */
2390
- subItemsField?: string;
2391
- /**
2392
- * Configures the popup of the DropDownTree.
2393
- */
2394
- popupSettings?: DropDownsPopupSettings;
2395
- /**
2396
- * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select`.
2397
- *
2398
- * @example
2399
- * ```jsx-no-run
2400
- * class App extends React.Component {
2401
- * render() {
2402
- * return (
2403
- * <form>
2404
- * <DropDownTree
2405
- * data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
2406
- * valueMap={value => value && value.id}
2407
- * />
2408
- * <button type="submit">Submit</button>
2409
- * </form>
2410
- * );
2411
- * }
2412
- * }
2413
- * ReactDOM.render(<App />, document.querySelector('my-app'));
2414
- * ```
2415
- */
2416
- valueMap?: (value: any) => any;
2417
- /**
2418
- * Fires each time the popup of the DropDownTree is about to open.
2419
- */
2420
- onOpen?: (event: DropDownTreeOpenEvent) => void;
2421
- /**
2422
- * Fires each time the popup of the DropDownTree is about to close.
2423
- */
2424
- onClose?: (event: DropDownTreeCloseEvent) => void;
2425
- /**
2426
- * Fires each time the user focuses the DropDownTree.
2427
- */
2428
- onFocus?: (event: DropDownTreeFocusEvent) => void;
2429
- /**
2430
- * Fires each time the DropDownTree gets blurred.
2431
- */
2432
- onBlur?: (event: DropDownTreeBlurEvent) => void;
2433
- /**
2434
- * Fires each time the value of the DropDownTree is about to change ([see examples]({% slug overview_dropdowntree %})).
2435
- */
2436
- onChange?: (event: DropDownTreeChangeEvent) => void;
2437
- /**
2438
- * Fires each time the user types in the filter input
2439
- * ([see example]({% slug filtering_dropdowntree %}#toc-basic-configuration)).
2440
- * You can filter the source based on the passed filtration value.
2441
- */
2442
- onFilterChange?: (event: DropDownTreeFilterChangeEvent) => void;
2443
- /**
2444
- * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_dropdowntree %})).
2445
- */
2446
- onExpandChange?: (event: any) => void;
2447
- /**
2448
- * Defines the slot that will be used for rendering each of the DropDownTree items
2449
- * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
2450
- */
2451
- item?: any;
2452
- /**
2453
- * Defines the slot that will be used for rendering the selected value
2454
- * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
2455
- */
2456
- valueRender?: any;
2457
- /**
2458
- * Defines the slot that will be used for header
2459
- * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
2460
- */
2461
- header?: any;
2462
- /**
2463
- * Defines the slot that will be used for footer
2464
- * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
2465
- */
2466
- footer?: any;
2467
- /**
2468
- * Defines the slot that will be rendered in the DropDownTree popup when no data is available
2469
- * ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
2470
- */
2471
- listNoData?: any;
2472
- /**
2473
- * Configures the `size` of the DropDownTree.
2474
- *
2475
- * The available options are:
2476
- * - small
2477
- * - medium
2478
- * - large
2479
- *
2480
- * @default undefined
2481
- */
2482
- size?: 'small' | 'medium' | 'large';
2483
- /**
2484
- * Configures the `roundness` of the DropDownTree.
2485
- *
2486
- * The available options are:
2487
- * - none
2488
- * - small
2489
- * - medium
2490
- * - large
2491
- * - full
2492
- *
2493
- * @default undefined
2494
- */
2495
- rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
2496
- /**
2497
- * Configures the `fillMode` of the DropDownTree.
2498
- *
2499
- * The available options are:
2500
- * - solid
2501
- * - flat
2502
- * - outline
2503
- *
2504
- * @default undefined
2505
- */
2506
- fillMode?: 'solid' | 'flat' | 'outline';
2507
- /**
2508
- * Provides different rendering of the popup element based on the screen dimensions.
2509
- */
2510
- adaptive?: boolean;
2511
- /**
2512
- * Specifies the text that is rendered as title in the adaptive popup.
2513
- */
2514
- adaptiveTitle?: string;
2515
- }
2516
-
2517
- /**
2518
- * @hidden
2519
- */
2520
- declare interface EventData {
2521
- type?: string;
2522
- filter?: FilterDescriptor;
2523
- page?: Page;
2524
- suggestion?: Suggestion;
2525
- }
2526
-
2527
- /**
2528
- * @hidden
2529
- */
2530
- declare interface FilterChangeEvent extends DropdownEvent {
2531
- /**
2532
- * A native event.
2533
- */
2534
- event: any;
2535
- /**
2536
- * The default `FilterDescriptor` object.
2537
- */
2538
- filter: FilterDescriptor;
2539
- }
2540
-
2541
- /**
2542
- * A basic filter expression. Usually a part of [`CompositeFilterDescriptor`]({% slug api_kendo-data-query_compositefilterdescriptor %}).
2543
- *
2544
- * For more information, refer to the [`filterBy`]({% slug api_kendo-data-query_filterby %}) method.
2545
- */
2546
- declare interface FilterDescriptor {
2547
- /**
2548
- * The field of the data item to which the filter operator is applied.
2549
- */
2550
- field?: string | Function;
2551
- /**
2552
- * The filter operator (comparison).
2553
- *
2554
- * The supported operators are:
2555
- * * `"eq"` (equal to)
2556
- * * `"neq"` (not equal to)
2557
- * * `"isnull"` (is equal to null)
2558
- * * `"isnotnull"` (is not equal to null)
2559
- * * `"lt"` (less than)
2560
- * * `"lte"` (less than or equal to)
2561
- * * `"gt"` (greater than)
2562
- * * `"gte"` (greater than or equal to)
2563
- *
2564
- * The following operators are supported for string fields only:
2565
- * * `"startswith"`
2566
- * * `"endswith"`
2567
- * * `"contains"`
2568
- * * `"doesnotcontain"`
2569
- * * `"isempty"`
2570
- * * `"isnotempty"`
2571
- */
2572
- operator: string | Function;
2573
- /**
2574
- * The value to which the field is compared. Has to be of the same type as the field.
2575
- */
2576
- value?: any;
2577
- /**
2578
- * Determines if the string comparison is case-insensitive.
2579
- */
2580
- ignoreCase?: boolean;
2581
- }
2582
-
2583
- declare enum FocusedItemType {
2584
- None = 0,
2585
- ListItem = 1,
2586
- CustomItem = 2
2587
- }
2588
-
2589
- /**
2590
- * @hidden
2591
- */
2592
- declare interface FocusEvent_2 extends DropdownEvent {
2593
- }
2594
-
2595
- export { FormComponentValidity }
2596
-
2597
- /**
2598
- * Get MultiSelectTree new value from the component `onChange` event.
2599
- *
2600
- * @param {any[]} data
2601
- * @param {object} options
2602
- * @returns {any[]}
2603
- */
2604
- export declare const getMultiSelectTreeValue: (data: any[], options: {
2605
- subItemsField?: string;
2606
- dataItemKey: string;
2607
- items: any;
2608
- value: Array<any>;
2609
- operation: MultiSelectTreeChangeEventOperation;
2610
- }) => any[];
2611
-
2612
- /** @hidden */
2613
- export declare const getValueMap: (value: any[], idGetter: any) => any;
2614
-
2615
- /**
2616
- * @hidden
2617
- */
2618
- declare interface InternalState {
2619
- data: DropDownStateBase;
2620
- events: Array<EventData>;
2621
- event: any;
2622
- }
2623
-
2624
- /**
2625
- * The props of component that will be used for rendering each of the DropDownTree items
2626
- * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
2627
- */
2628
- export declare interface ItemProps extends ItemRenderProps {
2629
- }
2630
-
2631
- declare interface ListFocusedState {
2632
- focusedItem?: any;
2633
- focusedIndex: number;
2634
- focusedType: FocusedItemType;
2635
- }
2636
-
2637
- /**
2638
- * Represents the props of the ListItem component.
2639
- */
2640
- export declare interface ListItemProps {
2641
- /**
2642
- * Specifies the id that will be added to the list item element.
2643
- */
2644
- id?: string;
2645
- /**
2646
- * Represents the index of the list item element.
2647
- */
2648
- index: number;
2649
- /**
2650
- * Represents the data item of the list item element.
2651
- */
2652
- dataItem: any;
2653
- /**
2654
- * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
2655
- */
2656
- textField?: string;
2657
- /**
2658
- * Indicates the focused state of the list item element.
2659
- */
2660
- focused: boolean;
2661
- /**
2662
- * Indicates the selected state of the list item element.
2663
- */
2664
- selected: boolean;
2665
- /**
2666
- * Indicates the disabled/enabled state of the list item element.
2667
- */
2668
- disabled?: boolean;
2669
- /**
2670
- * The group that will be rendered.
2671
- */
2672
- group?: string;
2673
- /**
2674
- * @hidden
2675
- */
2676
- virtual?: boolean;
2677
- /**
2678
- * Fires when the list item is about to be rendered. Used to override the default appearance of the list item.
2679
- */
2680
- render?: any;
2681
- /**
2682
- * The `onClick` event handler of the list item element.
2683
- */
2684
- onItemClick?: (index: number, event: any) => void;
2685
- /**
2686
- * @hidden
2687
- * The field name in the dataItem that contains the actions.
2688
- */
2689
- actionsField?: string;
2690
- /**
2691
- * @hidden
2692
- * The field name in the dataItem that contains the description.
2693
- */
2694
- descriptionField?: string;
2695
- /**
2696
- * @hidden
2697
- * The field name in the dataItem that contains the icon.
2698
- */
2699
- iconField?: string;
2700
- /**
2701
- * @hidden
2702
- * The field name in the dataItem that contains the SVG icon.
2703
- */
2704
- svgIconField?: string;
2705
- /**
2706
- * @hidden
2707
- * The field name in the dataItem that contains the checkbox state.
2708
- */
2709
- checkboxField?: string;
2710
- }
2711
-
2712
- /**
2713
- * The props of the `ListNoData` component ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
2714
- */
2715
- export declare interface ListNoDataProps {
2716
- }
2717
-
2718
- /**
2719
- * @hidden
2720
- */
2721
- export declare const MultiSelect: DefineComponent<ExtractPropTypes< {
2722
- autoClose: {
2723
- type: PropType<boolean>;
2724
- default: boolean;
2725
- };
2726
- removeTagIcon: PropType<string>;
2727
- allowCustom: PropType<boolean>;
2728
- modelValue: PropType<any>;
2729
- opened: {
2730
- type: PropType<boolean>;
2731
- default: any;
2732
- };
2733
- disabled: PropType<boolean>;
2734
- dir: PropType<string>;
2735
- tabIndex: {
2736
- type: PropType<number>;
2737
- default: number;
2738
- };
2739
- accessKey: PropType<string>;
2740
- dataItems: PropType<any[]>;
2741
- textField: PropType<string>;
2742
- label: PropType<string>;
2743
- loading: PropType<boolean>;
2744
- name: PropType<string>;
2745
- value: PropType<any[]>;
2746
- defaultValue: PropType<any[]>;
2747
- valueField: PropType<string>;
2748
- valuePrimitive: PropType<boolean>;
2749
- dataItemKey: PropType<string>;
2750
- placeholder: PropType<string>;
2751
- tags: PropType<MultiSelectTagData[]>;
2752
- required: {
2753
- type: PropType<boolean>;
2754
- default: boolean;
2755
- };
2756
- valid: {
2757
- type: PropType<boolean>;
2758
- default: any;
2759
- };
2760
- validate: {
2761
- type: PropType<boolean>;
2762
- };
2763
- validationMessage: {
2764
- type: PropType<string>;
2765
- default: any;
2766
- };
2767
- validityStyles: {
2768
- type: PropType<boolean>;
2769
- default: boolean;
2770
- };
2771
- tagRender: PropType<any>;
2772
- id: PropType<string>;
2773
- popupSettings: {
2774
- type: PropType<DropDownsPopupSettings_2>;
2775
- default: () => {
2776
- animate: boolean;
2777
- height: string;
2778
- anchor: string;
2779
- };
2780
- };
2781
- itemRender: PropType<any>;
2782
- groupHeaderItemRender: PropType<any>;
2783
- groupStickyHeaderItemRender: PropType<any>;
2784
- listNoDataRender: PropType<any>;
2785
- focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
2786
- virtual: {
2787
- type: PropType<VirtualizationSettings_2>;
2788
- default: any;
2789
- };
2790
- header: PropType<any>;
2791
- footer: PropType<any>;
2792
- filterable: PropType<boolean>;
2793
- filter: {
2794
- type: PropType<string>;
2795
- default: any;
2796
- };
2797
- ariaLabel: {
2798
- type: PropType<string>;
2799
- default: any;
2800
- };
2801
- ariaLabelledBy: PropType<string>;
2802
- ariaDescribedBy: PropType<string>;
2803
- rounded: {
2804
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
2805
- validator: (value: string) => boolean;
2806
- };
2807
- tagsRounded: {
2808
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
2809
- validator: (value: string) => boolean;
2810
- };
2811
- fillMode: {
2812
- type: PropType<"flat" | "link" | "solid" | "outline">;
2813
- validator: (value: string) => boolean;
2814
- };
2815
- size: {
2816
- type: PropType<"small" | "medium" | "large">;
2817
- validator: (value: string) => boolean;
2818
- };
2819
- groupField: {
2820
- type: PropType<string>;
2821
- };
2822
- adaptive: {
2823
- type: PropType<boolean>;
2824
- default: any;
2825
- };
2826
- adaptiveTitle: {
2827
- type: PropType<string>;
2828
- default: any;
2829
- };
2830
- inputAttributes: PropType<Object>;
2831
- }>, {
2832
- inputRef: Ref<any, any>;
2833
- kendoAnchorRef: Ref<any, any>;
2834
- kendoLocalizationService: {};
2835
- }, {
2836
- hasMounted: boolean;
2837
- currentText: string;
2838
- currentValue: string;
2839
- currentFocused: boolean;
2840
- currentOpened: boolean;
2841
- currentFocusedIndex: any;
2842
- currentFocusedTag: any;
2843
- searchState: {
2844
- word: string;
2845
- last: string;
2846
- };
2847
- suggested: string;
2848
- activedescendant: ActiveDescendant;
2849
- group: any;
2850
- isScrolling: boolean;
2851
- itemHeight: number;
2852
- windowWidth: number;
2853
- popupWidth: any;
2854
- initialAdaptiveRenderingValues: any;
2855
- }, {
2856
- spanClassNames(): object;
2857
- isOpen(): boolean;
2858
- animationStyles(): object | undefined;
2859
- classNameAdaptive(): string;
2860
- adaptiveState(): any;
2861
- }, {
2862
- clearFilter(state: MultiSelectInternalState): void;
2863
- computedValue(): any;
2864
- findByFieldValue(field: string, result: Array<any>): any[];
2865
- primitiveValue(): any;
2866
- validity(): FormComponentValidity;
2867
- handleItemSelect(index: number, state: MultiSelectInternalState): void;
2868
- onTagDelete(itemsToRemove: Array<any>, event: any): void;
2869
- onNavigate(state: MultiSelectInternalState, keyCode: number): void;
2870
- itemFocus(index: number, state: MultiSelectInternalState): void;
2871
- searchBarRef(): void;
2872
- onChangeHandler(event: any): void;
2873
- clearButtonClick(event: any): void;
2874
- onInputKeyDown(event: any): any;
2875
- onTagsNavigate(event: any, state: MultiSelectInternalState): void;
2876
- triggerOnChange(items: Array<any>, state: MultiSelectInternalState): void;
2877
- selectFocusedItem(event: any): void;
2878
- setItems(srcItems: Array<any>, destItems: Array<any>): void;
2879
- getFocusedState(): ListFocusedState;
2880
- customItemSelect(event: any): void;
2881
- handleWrapperClick(event: MouseEvent): void;
2882
- onCancel(event: MouseEvent): void;
2883
- handleItemClick(index: number, event: any): void;
2884
- handleBlur(event: any): void;
2885
- handleFocus(event: any): void;
2886
- onPopupOpened(): void;
2887
- onPopupClosed(): void;
2888
- focusElement(element: any): void;
2889
- applyState(state: MultiSelectInternalState): void;
2890
- setValidity(): void;
2891
- focus(): void;
2892
- calculateMedia(entries: ResizeObserverEntry[]): void;
2893
- repositionPopup(): void;
2894
- onScroll(event: any): void;
2895
- }, ComponentOptionsMixin, ComponentOptionsMixin, {
2896
- changemodel: (value: any) => true;
2897
- 'update:modelValue': (value: any) => true;
2898
- filterchange: (event: MultiSelectFilterChangeEvent) => true;
2899
- change: (event: MultiSelectChangeEvent) => true;
2900
- pagechange: (event: MultiSelectPageChangeEvent) => true;
2901
- focus: (event: MultiSelectFocusEvent) => true;
2902
- blur: (event: MultiSelectBlurEvent) => true;
2903
- open: (event: MultiSelectOpenEvent) => true;
2904
- close: (event: MultiSelectCloseEvent) => true;
2905
- scroll: (event: Event) => true;
2906
- }, string, PublicProps, Readonly<ExtractPropTypes< {
2907
- autoClose: {
2908
- type: PropType<boolean>;
2909
- default: boolean;
2910
- };
2911
- removeTagIcon: PropType<string>;
2912
- allowCustom: PropType<boolean>;
2913
- modelValue: PropType<any>;
2914
- opened: {
2915
- type: PropType<boolean>;
2916
- default: any;
2917
- };
2918
- disabled: PropType<boolean>;
2919
- dir: PropType<string>;
2920
- tabIndex: {
2921
- type: PropType<number>;
2922
- default: number;
2923
- };
2924
- accessKey: PropType<string>;
2925
- dataItems: PropType<any[]>;
2926
- textField: PropType<string>;
2927
- label: PropType<string>;
2928
- loading: PropType<boolean>;
2929
- name: PropType<string>;
2930
- value: PropType<any[]>;
2931
- defaultValue: PropType<any[]>;
2932
- valueField: PropType<string>;
2933
- valuePrimitive: PropType<boolean>;
2934
- dataItemKey: PropType<string>;
2935
- placeholder: PropType<string>;
2936
- tags: PropType<MultiSelectTagData[]>;
2937
- required: {
2938
- type: PropType<boolean>;
2939
- default: boolean;
2940
- };
2941
- valid: {
2942
- type: PropType<boolean>;
2943
- default: any;
2944
- };
2945
- validate: {
2946
- type: PropType<boolean>;
2947
- };
2948
- validationMessage: {
2949
- type: PropType<string>;
2950
- default: any;
2951
- };
2952
- validityStyles: {
2953
- type: PropType<boolean>;
2954
- default: boolean;
2955
- };
2956
- tagRender: PropType<any>;
2957
- id: PropType<string>;
2958
- popupSettings: {
2959
- type: PropType<DropDownsPopupSettings_2>;
2960
- default: () => {
2961
- animate: boolean;
2962
- height: string;
2963
- anchor: string;
2964
- };
2965
- };
2966
- itemRender: PropType<any>;
2967
- groupHeaderItemRender: PropType<any>;
2968
- groupStickyHeaderItemRender: PropType<any>;
2969
- listNoDataRender: PropType<any>;
2970
- focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
2971
- virtual: {
2972
- type: PropType<VirtualizationSettings_2>;
2973
- default: any;
2974
- };
2975
- header: PropType<any>;
2976
- footer: PropType<any>;
2977
- filterable: PropType<boolean>;
2978
- filter: {
2979
- type: PropType<string>;
2980
- default: any;
2981
- };
2982
- ariaLabel: {
2983
- type: PropType<string>;
2984
- default: any;
2985
- };
2986
- ariaLabelledBy: PropType<string>;
2987
- ariaDescribedBy: PropType<string>;
2988
- rounded: {
2989
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
2990
- validator: (value: string) => boolean;
2991
- };
2992
- tagsRounded: {
2993
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
2994
- validator: (value: string) => boolean;
2995
- };
2996
- fillMode: {
2997
- type: PropType<"flat" | "link" | "solid" | "outline">;
2998
- validator: (value: string) => boolean;
2999
- };
3000
- size: {
3001
- type: PropType<"small" | "medium" | "large">;
3002
- validator: (value: string) => boolean;
3003
- };
3004
- groupField: {
3005
- type: PropType<string>;
3006
- };
3007
- adaptive: {
3008
- type: PropType<boolean>;
3009
- default: any;
3010
- };
3011
- adaptiveTitle: {
3012
- type: PropType<string>;
3013
- default: any;
3014
- };
3015
- inputAttributes: PropType<Object>;
3016
- }>> & Readonly<{
3017
- onBlur?: (event: MultiSelectBlurEvent) => any;
3018
- onChange?: (event: MultiSelectChangeEvent) => any;
3019
- onClose?: (event: MultiSelectCloseEvent) => any;
3020
- onFocus?: (event: MultiSelectFocusEvent) => any;
3021
- onScroll?: (event: Event) => any;
3022
- onOpen?: (event: MultiSelectOpenEvent) => any;
3023
- onChangemodel?: (value: any) => any;
3024
- "onUpdate:modelValue"?: (value: any) => any;
3025
- onPagechange?: (event: MultiSelectPageChangeEvent) => any;
3026
- onFilterchange?: (event: MultiSelectFilterChangeEvent) => any;
3027
- }>, {
3028
- filter: string;
3029
- required: boolean;
3030
- ariaLabel: string;
3031
- tabIndex: number;
3032
- virtual: VirtualizationSettings_2;
3033
- adaptive: boolean;
3034
- opened: boolean;
3035
- popupSettings: DropDownsPopupSettings_2;
3036
- valid: boolean;
3037
- validationMessage: string;
3038
- validityStyles: boolean;
3039
- adaptiveTitle: string;
3040
- autoClose: boolean;
3041
- }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
3042
-
3043
- /**
3044
- * Represents the object of the `blur` MultiSelect event.
3045
- */
3046
- export declare interface MultiSelectBlurEvent extends BlurEvent {
3047
- }
3048
-
3049
- /**
3050
- * Represents the object of the `change` MultiSelect event.
3051
- */
3052
- export declare interface MultiSelectChangeEvent extends ChangeEvent {
3053
- }
3054
-
3055
- /**
3056
- * Represents the object of the `close` MultiSelect event.
3057
- */
3058
- export declare interface MultiSelectCloseEvent extends CloseEvent_2 {
3059
- }
3060
-
3061
- /**
3062
- * @hidden
3063
- */
3064
- declare interface MultiSelectData extends DropDownStateBase {
3065
- hasMounted: boolean;
3066
- selectedItems?: Array<any>;
3067
- valuesItemsDuringOnChange?: Array<any> | null;
3068
- currentText?: string;
3069
- currentFocusedIndex?: number;
3070
- currentFocused?: boolean;
3071
- currentOpened?: boolean;
3072
- currentFocusedTag?: any;
3073
- currentValue?: Array<any>;
3074
- activedescendant?: ActiveDescendant;
3075
- _skipFocusEvent: boolean;
3076
- }
3077
-
3078
- /**
3079
- * Represents the object of the `filterChange` MultiSelect event.
3080
- */
3081
- export declare interface MultiSelectFilterChangeEvent extends FilterChangeEvent {
3082
- }
3083
-
3084
- /**
3085
- * Represents the object of the `focus` MultiSelect event.
3086
- */
3087
- export declare interface MultiSelectFocusEvent extends FocusEvent_2 {
3088
- }
3089
-
3090
- /**
3091
- * @hidden
3092
- */
3093
- declare interface MultiSelectInternalState extends InternalState {
3094
- data: MultiSelectData;
3095
- }
3096
-
3097
- /**
3098
- * Represents the object of the `open` MultiSelect event.
3099
- */
3100
- export declare interface MultiSelectOpenEvent extends OpenEvent {
3101
- }
3102
-
3103
- /**
3104
- * Represents the object of the `pageChange` MultiSelect event.
3105
- */
3106
- export declare interface MultiSelectPageChangeEvent extends PageChangeEvent {
3107
- }
3108
-
3109
- /**
3110
- * Represents the props of the [Kendo UI for Vue MultiSelect component]({% slug overview_multiselect %}).
3111
- */
3112
- export declare interface MultiSelectProps extends FormComponentProps {
3113
- /**
3114
- * Specifies whether the MultiSelect allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_multiselect %})). Defaults to `false`.
3115
- */
3116
- allowCustom?: boolean;
3117
- /**
3118
- * Sets the data of the MultiSelect ([see example]({% slug binding_multiselect %})).
3119
- */
3120
- dataItems?: any[];
3121
- /**
3122
- * Sets the opened and closed state of the MultiSelect.
3123
- */
3124
- opened?: boolean;
3125
- /**
3126
- * Determines whether to close the options list of the MultiSelect after the item selection is finished.
3127
- *
3128
- * @default true
3129
- */
3130
- autoClose?: boolean;
3131
- /**
3132
- * @hidden
3133
- */
3134
- modelValue?: any;
3135
- /**
3136
- * 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.
3137
- */
3138
- value?: Array<any>;
3139
- /**
3140
- * Sets the validate of the input.
3141
- */
3142
- validate?: boolean;
3143
- /**
3144
- * The hint that is displayed when the MultiSelect is empty.
3145
- */
3146
- placeholder?: string;
3147
- /**
3148
- * Sets the close icon of the tag items.
3149
- */
3150
- removeTagIcon?: string;
3151
- /**
3152
- * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
3153
- */
3154
- tags?: Array<MultiSelectTagData>;
3155
- /**
3156
- * Sets the data item field that represents the item value.
3157
- */
3158
- valueField?: string;
3159
- /**
3160
- * Specifies the type of the selected value. If set to true, the selected value has to be of a primitive value.
3161
- */
3162
- valuePrimitive?: boolean;
3163
- /**
3164
- * 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.
3165
- */
3166
- dataItemKey?: string;
3167
- /**
3168
- * Sets the default value of the MultiSelect. Similar to the native `select` HTML element.
3169
- */
3170
- defaultValue?: Array<any>;
3171
- /**
3172
- * Sets the disabled state of the MultiSelect.
3173
- */
3174
- disabled?: boolean;
3175
- /**
3176
- * Represents the `dir` HTML attribute.
3177
- */
3178
- dir?: string;
3179
- /**
3180
- * Enables the filtering functionality of the MultiSelect ([more information and examples]({% slug filtering_multiselect %})).
3181
- */
3182
- filterable?: boolean;
3183
- /**
3184
- * Specifies the id of the component.
3185
- */
3186
- id?: string;
3187
- /**
3188
- * 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).
3189
- * For example these elements could contain error or hint message.
3190
- */
3191
- ariaDescribedBy?: string;
3192
- /**
3193
- * Identifies the element(s) which will label the component.
3194
- */
3195
- ariaLabelledBy?: string;
3196
- /**
3197
- * Defines the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute of the component.
3198
- */
3199
- ariaLabel?: string;
3200
- /**
3201
- * If set, the MultiSelect will use it to get the focused item index.
3202
- *
3203
- * Default functionality returns the first item which starts with the input text.
3204
- *
3205
- */
3206
- focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
3207
- /**
3208
- * Sets the value of filtering input. Useful for making the filtering input a controlled component.
3209
- */
3210
- filter?: string;
3211
- /**
3212
- * Sets the loading state of the MultiSelect ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)).
3213
- */
3214
- loading?: boolean;
3215
- /**
3216
- * Specifies the `tabIndex` of the MultiSelect.
3217
- */
3218
- tabIndex?: number;
3219
- /**
3220
- * Specifies the `accessKey` of the MultiSelect.
3221
- */
3222
- accessKey?: string;
3223
- /**
3224
- * 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.
3225
- */
3226
- textField?: string;
3227
- /**
3228
- * Renders a floating label for the MultiSelect.
3229
- */
3230
- label?: string;
3231
- /**
3232
- * Configures the popup of the MultiSelect.
3233
- */
3234
- popupSettings?: DropDownsPopupSettings;
3235
- /**
3236
- * Configures the virtual scrolling of the MultiSelect ([see example]({% slug virtualization_multiselect %})).
3237
- */
3238
- virtual?: VirtualizationSettings;
3239
- /**
3240
- * Fires each time the popup of the MultiSelect is about to open.
3241
- */
3242
- onOpen?: (event: MultiSelectOpenEvent) => void;
3243
- /**
3244
- * Fires each time the popup of the MultiSelect is about to close.
3245
- */
3246
- onClose?: (event: MultiSelectCloseEvent) => void;
3247
- /**
3248
- * Fires each time the user focuses the MultiSelect.
3249
- */
3250
- onFocus?: (event: MultiSelectFocusEvent) => void;
3251
- /**
3252
- * Fires each time the MultiSelect gets blurred.
3253
- */
3254
- onBlur?: (event: MultiSelectBlurEvent) => void;
3255
- /**
3256
- * Fires each time the value of the MultiSelect is about to change ([see examples]({% slug binding_multiselect %})).
3257
- */
3258
- onChange?: (event: MultiSelectChangeEvent) => void;
3259
- /**
3260
- * 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.
3261
- */
3262
- onFilterchange?: (event: MultiSelectFilterChangeEvent) => void;
3263
- /**
3264
- * 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 %})).
3265
- */
3266
- onPagechange?: (event: MultiSelectPageChangeEvent) => void;
3267
- /**
3268
- * 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.
3269
- */
3270
- itemRender?: any;
3271
- /**
3272
- * 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.
3273
- */
3274
- listNoDataRender?: any;
3275
- /**
3276
- * 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.
3277
- */
3278
- tagRender?: any;
3279
- /**
3280
- * Sets the header component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
3281
- */
3282
- header?: any;
3283
- /**
3284
- * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
3285
- */
3286
- footer?: any;
3287
- /**
3288
- * Configures the `size` of the MultiSelect.
3289
- *
3290
- * The available options are:
3291
- * - small
3292
- * - medium
3293
- * - large
3294
- *
3295
- * @default `undefined`
3296
- */
3297
- size?: 'small' | 'medium' | 'large';
3298
- /**
3299
- * Configures the `roundness` of the MultiSelect.
3300
- *
3301
- * The available options are:
3302
- * - none
3303
- * - small
3304
- * - medium
3305
- * - large
3306
- * - full
3307
- *
3308
- * @default `undefined`
3309
- */
3310
- rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
3311
- /**
3312
- * Configures the `roundness` of the tags in MultiSelect.
3313
- *
3314
- * The available options are:
3315
- * - none
3316
- * - small
3317
- * - medium
3318
- * - large
3319
- * - circle
3320
- * - full
3321
- *
3322
- * @default `undefined`
3323
- */
3324
- tagsRounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
3325
- /**
3326
- * Configures the `fillMode` of the MultiSelect.
3327
- *
3328
- * The available options are:
3329
- * - solid
3330
- * - outline
3331
- * - flat
3332
- * - link
3333
- *
3334
- * @default `undefined`
3335
- */
3336
- fillMode?: 'solid' | 'outline' | 'flat' | 'link';
3337
- /**
3338
- * Sets the data item field that represents the start of a group. Applicable to objects data.
3339
- */
3340
- groupField?: string;
3341
- /**
3342
- * Fires when a MultiSelect group header item is about to be rendered. Used to override the default appearance of the group's headers.
3343
- */
3344
- groupHeaderItemRender?: any;
3345
- /**
3346
- * Fires when a MultiSelect sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
3347
- */
3348
- groupStickyHeaderItemRender?: any;
3349
- /**
3350
- * Provides different rendering of the popup element based on the screen dimensions.
3351
- */
3352
- adaptive?: boolean;
3353
- /**
3354
- * Specifies the text that is rendered as title in the adaptive popup.
3355
- */
3356
- adaptiveTitle?: string;
3357
- /**
3358
- * Sets the built-in HTML attributes of the inner focusable input element.
3359
- * Attributes which are essential for certain component functionalities cannot be changed.
3360
- */
3361
- inputAttributes?: Object;
3362
- }
3363
-
3364
- /**
3365
- * Represents the tag data.
3366
- */
3367
- export declare interface MultiSelectTagData {
3368
- /**
3369
- * Represents the text of the tag.
3370
- */
3371
- text: string;
3372
- /**
3373
- * Represents the data items which correspond to the tag.
3374
- */
3375
- data: Array<any>;
3376
- }
3377
-
3378
- /**
3379
- * @hidden
3380
- */
3381
- export declare const MultiSelectTree: DefineComponent<ExtractPropTypes< {
3382
- opened: {
3383
- type: PropType<boolean>;
3384
- default: any;
3385
- };
3386
- disabled: PropType<boolean>;
3387
- dir: PropType<string>;
3388
- tabIndex: PropType<number>;
3389
- accessKey: PropType<string>;
3390
- dataItems: {
3391
- type: PropType<any[]>;
3392
- default: () => any[];
3393
- };
3394
- value: PropType<any[]>;
3395
- modelValue: PropType<any[]>;
3396
- valueMap: PropType<(value: any[]) => any>;
3397
- placeholder: PropType<string>;
3398
- dataItemKey: {
3399
- type: PropType<string>;
3400
- required: true;
3401
- };
3402
- textField: {
3403
- type: PropType<string>;
3404
- required: true;
3405
- };
3406
- checkField: {
3407
- type: PropType<string>;
3408
- default: string;
3409
- };
3410
- checkIndeterminateField: {
3411
- type: PropType<string>;
3412
- default: string;
3413
- };
3414
- expandField: PropType<string>;
3415
- subItemsField: {
3416
- type: PropType<string>;
3417
- default: string;
3418
- };
3419
- className: PropType<string>;
3420
- label: PropType<string>;
3421
- validationMessage: PropType<string>;
3422
- validityStyles: {
3423
- type: PropType<boolean>;
3424
- default: boolean;
3425
- };
3426
- valid: {
3427
- type: PropType<boolean>;
3428
- default: any;
3429
- };
3430
- required: PropType<boolean>;
3431
- name: PropType<string>;
3432
- id: PropType<string>;
3433
- ariaLabelledBy: PropType<string>;
3434
- ariaDescribedBy: PropType<string>;
3435
- filterable: PropType<boolean>;
3436
- filter: PropType<string>;
3437
- loading: PropType<boolean>;
3438
- tags: PropType<MultiSelectTagData[]>;
3439
- popupSettings: {
3440
- type: PropType<DropDownsPopupSettings_3>;
3441
- default: () => {
3442
- animate: boolean;
3443
- height: string;
3444
- anchor: string;
3445
- };
3446
- };
3447
- size: {
3448
- type: PropType<"small" | "medium" | "large">;
3449
- validator: (value: string) => boolean;
3450
- };
3451
- rounded: {
3452
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
3453
- validator: (value: string) => boolean;
3454
- };
3455
- fillMode: {
3456
- type: PropType<"flat" | "solid" | "outline">;
3457
- validator: (value: string) => boolean;
3458
- };
3459
- item: PropType<any>;
3460
- tag: PropType<any>;
3461
- header: PropType<any>;
3462
- footer: PropType<any>;
3463
- listNoData: PropType<any>;
3464
- adaptive: {
3465
- type: PropType<boolean>;
3466
- default: any;
3467
- };
3468
- adaptiveTitle: {
3469
- type: PropType<string>;
3470
- default: any;
3471
- };
3472
- }>, {}, {
3473
- focusedTagState: any;
3474
- openState: boolean;
3475
- focusedState: boolean;
3476
- filterState: string;
3477
- currentValue: any[];
3478
- popupWidth: string;
3479
- windowWidth: number;
3480
- initialAdaptiveRenderingValues: any;
3481
- }, {
3482
- animationStyles(): object | undefined;
3483
- classNameAdaptive(): string;
3484
- adaptiveState(): any;
3485
- isOpen(): any;
3486
- computedValue(): any;
3487
- hasValue(): boolean;
3488
- tagsToRenderRef(): any;
3489
- }, {
3490
- clearFilter(event: MultiSelectTreeCloseEvent): void;
3491
- onCancel(event: MouseEvent): void;
3492
- calculateMedia(entries: ResizeObserverEntry[]): void;
3493
- calculatePopupWidth(): void;
3494
- focus(): void;
3495
- setValidity(): void;
3496
- changeValue(event: DropdownEvent, items: any[], operation: MultiSelectTreeChangeEventOperation): void;
3497
- onChange(e: TreeViewItemClickEvent): void;
3498
- openPopup(event: MultiSelectTreeCloseEvent): void;
3499
- closePopup(event: MultiSelectTreeCloseEvent): void;
3500
- switchFocus(focusFn: () => void): void;
3501
- focusElement(element: HTMLElement | null): void;
3502
- onPopupOpened(): void;
3503
- onPopupClosed(): void;
3504
- onFocus(event: any): void;
3505
- onBlur(event: any): void;
3506
- onWrapperMouseDown(): void;
3507
- onWrapperClick(event: any): void;
3508
- onWrapperKeyDown(event: any): any;
3509
- onInputKeyDown(event: any): void;
3510
- onClear(event: any): void;
3511
- onTagDelete(itemsToRemove: Array<any>, event: any): void;
3512
- onExpand(e: TreeViewExpandChangeEvent): void;
3513
- onFilterChange(event: any, emptyValue?: boolean): void;
3514
- }, ComponentOptionsMixin, ComponentOptionsMixin, {
3515
- open: (event: MultiSelectTreeOpenEvent) => true;
3516
- close: (event: MultiSelectTreeCloseEvent) => true;
3517
- focus: (event: MultiSelectTreeFocusEvent) => true;
3518
- blur: (event: MultiSelectTreeBlurEvent) => true;
3519
- change: (event: MultiSelectTreeChangeEvent) => true;
3520
- filterchange: (event: MultiSelectTreeFilterChangeEvent) => true;
3521
- expandchange: (event: MultiSelectTreeExpandEvent) => true;
3522
- changemodel: (value: any) => true;
3523
- 'update:modelValue': (value: any) => true;
3524
- }, string, PublicProps, Readonly<ExtractPropTypes< {
3525
- opened: {
3526
- type: PropType<boolean>;
3527
- default: any;
3528
- };
3529
- disabled: PropType<boolean>;
3530
- dir: PropType<string>;
3531
- tabIndex: PropType<number>;
3532
- accessKey: PropType<string>;
3533
- dataItems: {
3534
- type: PropType<any[]>;
3535
- default: () => any[];
3536
- };
3537
- value: PropType<any[]>;
3538
- modelValue: PropType<any[]>;
3539
- valueMap: PropType<(value: any[]) => any>;
3540
- placeholder: PropType<string>;
3541
- dataItemKey: {
3542
- type: PropType<string>;
3543
- required: true;
3544
- };
3545
- textField: {
3546
- type: PropType<string>;
3547
- required: true;
3548
- };
3549
- checkField: {
3550
- type: PropType<string>;
3551
- default: string;
3552
- };
3553
- checkIndeterminateField: {
3554
- type: PropType<string>;
3555
- default: string;
3556
- };
3557
- expandField: PropType<string>;
3558
- subItemsField: {
3559
- type: PropType<string>;
3560
- default: string;
3561
- };
3562
- className: PropType<string>;
3563
- label: PropType<string>;
3564
- validationMessage: PropType<string>;
3565
- validityStyles: {
3566
- type: PropType<boolean>;
3567
- default: boolean;
3568
- };
3569
- valid: {
3570
- type: PropType<boolean>;
3571
- default: any;
3572
- };
3573
- required: PropType<boolean>;
3574
- name: PropType<string>;
3575
- id: PropType<string>;
3576
- ariaLabelledBy: PropType<string>;
3577
- ariaDescribedBy: PropType<string>;
3578
- filterable: PropType<boolean>;
3579
- filter: PropType<string>;
3580
- loading: PropType<boolean>;
3581
- tags: PropType<MultiSelectTagData[]>;
3582
- popupSettings: {
3583
- type: PropType<DropDownsPopupSettings_3>;
3584
- default: () => {
3585
- animate: boolean;
3586
- height: string;
3587
- anchor: string;
3588
- };
3589
- };
3590
- size: {
3591
- type: PropType<"small" | "medium" | "large">;
3592
- validator: (value: string) => boolean;
3593
- };
3594
- rounded: {
3595
- type: PropType<"small" | "medium" | "large" | "full" | "none">;
3596
- validator: (value: string) => boolean;
3597
- };
3598
- fillMode: {
3599
- type: PropType<"flat" | "solid" | "outline">;
3600
- validator: (value: string) => boolean;
3601
- };
3602
- item: PropType<any>;
3603
- tag: PropType<any>;
3604
- header: PropType<any>;
3605
- footer: PropType<any>;
3606
- listNoData: PropType<any>;
3607
- adaptive: {
3608
- type: PropType<boolean>;
3609
- default: any;
3610
- };
3611
- adaptiveTitle: {
3612
- type: PropType<string>;
3613
- default: any;
3614
- };
3615
- }>> & Readonly<{
3616
- onBlur?: (event: MultiSelectTreeBlurEvent) => any;
3617
- onChange?: (event: MultiSelectTreeChangeEvent) => any;
3618
- onClose?: (event: MultiSelectTreeCloseEvent) => any;
3619
- onFocus?: (event: MultiSelectTreeFocusEvent) => any;
3620
- onOpen?: (event: MultiSelectTreeOpenEvent) => any;
3621
- onChangemodel?: (value: any) => any;
3622
- "onUpdate:modelValue"?: (value: any) => any;
3623
- onFilterchange?: (event: MultiSelectTreeFilterChangeEvent) => any;
3624
- onExpandchange?: (event: MultiSelectTreeExpandEvent) => any;
3625
- }>, {
3626
- adaptive: boolean;
3627
- dataItems: any[];
3628
- opened: boolean;
3629
- popupSettings: DropDownsPopupSettings_3;
3630
- valid: boolean;
3631
- validityStyles: boolean;
3632
- adaptiveTitle: string;
3633
- checkIndeterminateField: string;
3634
- checkField: string;
3635
- subItemsField: string;
3636
- }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
3637
-
3638
- /**
3639
- * Represents the object of the `onBlur` MultiSelectTree event.
3640
- */
3641
- export declare interface MultiSelectTreeBlurEvent extends BlurEvent {
3642
- }
3643
-
3644
- /**
3645
- * Represents the object of the `onChange` MultiSelectTree event.
3646
- */
3647
- export declare interface MultiSelectTreeChangeEvent extends DropdownEvent {
3648
- /**
3649
- * The items related to current operation.
3650
- */
3651
- items: any[];
3652
- /**
3653
- * The new value.
3654
- */
3655
- value: any[];
3656
- /**
3657
- * Describes the current operation:
3658
- * * `clear` - clear button is clicked and value is cleared. Null value is returned.
3659
- * * `delete` - tag is deleted using keyboard or mouse. The items contained in current tag are returned.
3660
- * * `toggle` - item in TreeView is toggled. Single item is returned.
3661
- */
3662
- operation: MultiSelectTreeChangeEventOperation;
3663
- }
3664
-
3665
- export declare type MultiSelectTreeChangeEventOperation = 'clear' | 'delete' | 'toggle';
3666
-
3667
- /**
3668
- * Represents the object of the `onClose` MultiSelectTree event.
3669
- */
3670
- export declare interface MultiSelectTreeCloseEvent extends CloseEvent_2 {
3671
- }
3672
-
3673
- /**
3674
- * Represents the object of the `onExpandChange` MultiSelectTree event.
3675
- */
3676
- export declare interface MultiSelectTreeExpandEvent extends DropdownEvent {
3677
- item: any;
3678
- level: number[];
3679
- }
3680
-
3681
- /**
3682
- * Represents the object of the `onFilterChange` MultiSelectTree event.
3683
- */
3684
- export declare interface MultiSelectTreeFilterChangeEvent extends FilterChangeEvent {
3685
- }
3686
-
3687
- /**
3688
- * Represents the object of the `onFocus` MultiSelectTree event.
3689
- */
3690
- export declare interface MultiSelectTreeFocusEvent extends FocusEvent_2 {
3691
- }
3692
-
3693
- /**
3694
- * The props of component that will be used for rendering each of the MultiSelectTree items
3695
- * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)).
3696
- */
3697
- export declare interface MultiSelectTreeItemProps extends ItemRenderProps {
3698
- }
3699
-
3700
- /**
3701
- * The props of the `ListNoData` component ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
3702
- */
3703
- export declare interface MultiSelectTreeListNoDataProps {
3704
- }
3705
-
3706
- /**
3707
- * Represents the object of the `onOpen` MultiSelectTree event.
3708
- */
3709
- export declare interface MultiSelectTreeOpenEvent extends OpenEvent {
3710
- }
3711
-
3712
- /**
3713
- * Represents the props of the [Kendo UI for Vue MultiSelectTree component]({% slug overview_multiselecttree %}).
3714
- */
3715
- export declare interface MultiSelectTreeProps extends FormComponentProps {
3716
- /**
3717
- * Sets the data of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
3718
- */
3719
- dataItems?: any[];
3720
- /**
3721
- * Sets the opened state of the MultiSelectTree.
3722
- */
3723
- opened?: boolean;
3724
- /**
3725
- * Sets the value of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.
3726
- */
3727
- value?: Array<any>;
3728
- /**
3729
- * Sets the modelValue of the MultiSelectTree. It can either be an array of the primitive (string, numbers) or of the complex (objects) type.
3730
- */
3731
- modelValue?: Array<any>;
3732
- /**
3733
- * The hint that is displayed when the MultiSelectTree is empty.
3734
- */
3735
- placeholder?: string;
3736
- /**
3737
- * Sets the key for comparing the data items of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})).
3738
- * If `dataItemKey` is not set, the MultiSelectTree compares the items by reference.
3739
- */
3740
- dataItemKey: string;
3741
- /**
3742
- * Sets additional classes to the MultiSelectTree.
3743
- */
3744
- className?: string;
3745
- /**
3746
- * Sets the disabled state of the MultiSelectTree.
3747
- */
3748
- disabled?: boolean;
3749
- /**
3750
- * Represents the `dir` HTML attribute.
3751
- */
3752
- dir?: string;
3753
- /**
3754
- * Renders a floating label for the MultiSelectTree.
3755
- */
3756
- label?: string;
3757
- /**
3758
- * Specifies the id of the component.
3759
- */
3760
- id?: string;
3761
- /**
3762
- * Specifies the validationMessage of the component.
3763
- */
3764
- validationMessage?: string;
3765
- /**
3766
- * If set to `false`, no visual representation of the invalid state of the component will be applied.
3767
- *
3768
- */
3769
- validityStyles?: boolean;
3770
- /**
3771
- * Overrides the validity state of the component.
3772
- * If `valid` is set, the `required` property will be ignored.
3773
- *
3774
- */
3775
- valid?: boolean;
3776
- /**
3777
- * Specifies the `name` property of the `input` DOM element.
3778
- *
3779
- */
3780
- name?: string;
3781
- /**
3782
- * Specifies if `null` is a valid value for the component.
3783
- *
3784
- */
3785
- required?: boolean;
3786
- /**
3787
- * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
3788
- */
3789
- tags?: Array<MultiSelectTagData>;
3790
- /**
3791
- * 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).
3792
- * For example these elements could contain error or hint message.
3793
- */
3794
- ariaDescribedBy?: string;
3795
- /**
3796
- * Identifies the element(s) which will label the component.
3797
- */
3798
- ariaLabelledBy?: string;
3799
- /**
3800
- * Enables the filtering functionality of the MultiSelectTree ([more information and examples]({% slug filtering_multiselecttree %})).
3801
- */
3802
- filterable?: boolean;
3803
- /**
3804
- * Sets the value of filtering input.
3805
- * Useful for making the filtering input a controlled component.
3806
- */
3807
- filter?: string;
3808
- /**
3809
- * Sets the loading state of the MultiSelectTree ([see example]({% slug filtering_multiselecttree %}#toc-visualize-filtering)).
3810
- */
3811
- loading?: boolean;
3812
- /**
3813
- * Specifies the `tabIndex` of the MultiSelectTree.
3814
- */
3815
- tabIndex?: number;
3816
- /**
3817
- * Specifies the `accessKey` of the MultiSelectTree.
3818
- */
3819
- accessKey?: string;
3820
- /**
3821
- * Sets the data item field that represents the item text ([see example]({% slug overview_multiselecttree %})).
3822
- */
3823
- textField: string;
3824
- /**
3825
- * Specifies the name of the field which will provide a Boolean representation of the checked state of the item.
3826
- */
3827
- checkField?: string;
3828
- /**
3829
- * Specifies the name of the field which will provide a Boolean representation of the checked indeterminaet state of the item.
3830
- */
3831
- checkIndeterminateField?: string;
3832
- /**
3833
- * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
3834
- */
3835
- expandField?: string;
3836
- /**
3837
- * Specifies the name of the field which will provide an array representation of the item subitems.
3838
- * Defaults to 'items'.
3839
- */
3840
- subItemsField?: string;
3841
- /**
3842
- * Configures the popup of the MultiSelectTree.
3843
- */
3844
- popupSettings?: DropDownsPopupSettings;
3845
- /**
3846
- * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select` element.
3847
- *
3848
- * @example
3849
- * ```jsx-no-run
3850
- * class App extends React.Component {
3851
- * render() {
3852
- * return (
3853
- * <form>
3854
- * <MultiSelectTree
3855
- * data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]}
3856
- * valueMap={value => value && value.id}
3857
- * />
3858
- * <button type="submit">Submit</button>
3859
- * </form>
3860
- * );
3861
- * }
3862
- * }
3863
- * ReactDOM.render(<App />, document.querySelector('my-app'));
3864
- * ```
3865
- */
3866
- valueMap?: (value: Array<any>) => any;
3867
- /**
3868
- * Fires each time the popup of the MultiSelectTree is about to open.
3869
- */
3870
- onOpen?: (event: MultiSelectTreeOpenEvent) => void;
3871
- /**
3872
- * Fires each time the popup of the MultiSelectTree is about to close.
3873
- */
3874
- onClose?: (event: MultiSelectTreeCloseEvent) => void;
3875
- /**
3876
- * Fires each time the user focuses the MultiSelectTree.
3877
- */
3878
- onFocus?: (event: MultiSelectTreeFocusEvent) => void;
3879
- /**
3880
- * Fires each time the MultiSelectTree gets blurred.
3881
- */
3882
- onBlur?: (event: MultiSelectTreeBlurEvent) => void;
3883
- /**
3884
- * Fires each time the value of the MultiSelectTree is about to change ([see examples]({% slug overview_multiselecttree %})).
3885
- */
3886
- onChange?: (event: MultiSelectTreeChangeEvent) => void;
3887
- /**
3888
- * Fires each time the user types in the filter input
3889
- * ([see example]({% slug filtering_multiselecttree %}#toc-basic-configuration)).
3890
- * You can filter the source based on the passed filtration value.
3891
- */
3892
- onFilterChange?: (event: MultiSelectTreeFilterChangeEvent) => void;
3893
- /**
3894
- * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_multiselecttree %})).
3895
- */
3896
- onExpandChange?: (event: any) => void;
3897
- /**
3898
- * Defines the component that will be used for rendering each of the MultiSelectTree items
3899
- * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)).
3900
- */
3901
- item?: any;
3902
- /**
3903
- * Defines the component that will be rendered in the MultiSelectTree popup when no data is available
3904
- * ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)).
3905
- */
3906
- listNoData?: any;
3907
- tag?: any;
3908
- header?: any;
3909
- footer?: any;
3910
- /**
3911
- * Configures the `size` of the MultiSelectTree.
3912
- *
3913
- * The available options are:
3914
- * - small
3915
- * - medium
3916
- * - large
3917
- *
3918
- * @default undefined
3919
- */
3920
- size?: 'small' | 'medium' | 'large';
3921
- /**
3922
- * Configures the `roundness` of the MultiSelectTree.
3923
- *
3924
- * The available options are:
3925
- * - none
3926
- * - small
3927
- * - medium
3928
- * - large
3929
- * - full
3930
- *
3931
- * @default undefined
3932
- */
3933
- rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
3934
- /**
3935
- * Configures the `fillMode` of the MultiSelectTree.
3936
- *
3937
- * The available options are:
3938
- * - solid
3939
- * - flat
3940
- * - outline
3941
- *
3942
- * @default undefined
3943
- */
3944
- fillMode?: 'solid' | 'flat' | 'outline';
3945
- /**
3946
- * Provides different rendering of the popup element based on the screen dimensions.
3947
- */
3948
- adaptive?: boolean;
3949
- /**
3950
- * Specifies the text that is rendered as title in the adaptive popup.
3951
- */
3952
- adaptiveTitle?: string;
3953
- }
3954
-
3955
- /**
3956
- * The props of component that will be used for rendering each of the MultiSelectTree tags
3957
- */
3958
- export declare interface MultiSelectTreeTagProps {
3959
- tagData: MultiSelectTagData;
3960
- guid: string;
3961
- focusedTag?: MultiSelectTagData;
3962
- onTagDelete: (items: Array<any>, event: any) => void;
3963
- }
3964
-
3965
- /**
3966
- * @hidden
3967
- */
3968
- declare interface OpenEvent extends DropdownEvent {
3969
- }
3970
-
3971
- /**
3972
- * Represents the `skip` and `take` configurations which are wrapped in the `page` object.
3973
- */
3974
- export declare interface Page {
3975
- /**
3976
- * The number of records to skip.
3977
- */
3978
- skip: number;
3979
- /**
3980
- * The number of records to take.
3981
- */
3982
- take: number;
3983
- }
3984
-
3985
- /**
3986
- * @hidden
3987
- */
3988
- declare interface PageChangeEvent extends DropdownEvent {
3989
- page: Page;
3990
- }
3991
-
3992
- /**
3993
- * Represents the `Suggestion` object of the AutoComplete.
3994
- */
3995
- export declare interface Suggestion {
3996
- /**
3997
- * Represents the typed text of the user.
3998
- */
3999
- readonly userInput: string;
4000
- /**
4001
- * Represents the suggested text without the user input.
4002
- */
4003
- readonly value: string;
4004
- }
4005
-
4006
- /**
4007
- * The props of the `ValueHolder` component ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
4008
- */
4009
- export declare interface ValueHolderProps {
4010
- item?: any;
4011
- }
4012
-
4013
- /**
4014
- * The virtualization settings.
4015
- */
4016
- export declare interface VirtualizationSettings {
4017
- /**
4018
- * The number of the requested records.
4019
- */
4020
- pageSize: number;
4021
- /**
4022
- * The number of records to skip.
4023
- */
4024
- skip: number;
4025
- /**
4026
- * The number of all records.
4027
- */
4028
- total: number;
4029
- }
4030
-
4031
- export { }
8
+ import { FormComponentValidity } from '@progress/kendo-vue-common';
9
+ import { DropDownList } from './DropDownList/DropDownList';
10
+ import { DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent } from './DropDownList/DropDownListProps';
11
+ import { Page, VirtualizationSettings, DropDownsPopupSettings, Suggestion } from './common/settings';
12
+ import { ListItemProps } from './common/ListItem';
13
+ import { ComboBox } from './ComboBox/ComboBox';
14
+ import { ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent } from './ComboBox/ComboBoxProps';
15
+ import { AutoComplete } from './AutoComplete/AutoComplete';
16
+ import { AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent } from './AutoComplete/AutoCompleteProps';
17
+ import { MultiSelect } from './MultiSelect/MultiSelect';
18
+ import { MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent } from './MultiSelect/MultiSelectProps';
19
+ import { TagData as MultiSelectTagData } from './MultiSelect/TagList';
20
+ import { DropDownTree } from './DropDownTree/DropDownTree';
21
+ import { MultiSelectTree } from './MultiSelectTree/MultiSelectTree';
22
+ export * from './DropDownTree/DropDownTreeProps';
23
+ export * from './MultiSelectTree/MultiSelectTreeProps';
24
+ export * from './MultiSelectTree/utils';
25
+ export { AutoComplete, type AutoCompleteProps, type AutoCompleteChangeEvent, type AutoCompleteOpenEvent, type AutoCompleteCloseEvent, type AutoCompleteFocusEvent, type AutoCompleteBlurEvent, DropDownList, type DropDownListProps, type DropDownListFilterChangeEvent, type DropDownListChangeEvent, type DropDownListOpenEvent, type DropDownListCloseEvent, type DropDownListFocusEvent, type DropDownListBlurEvent, type DropDownListPageChangeEvent, type Page, type VirtualizationSettings, type DropDownsPopupSettings, type ListItemProps, type Suggestion, ComboBox, type ComboBoxProps, type ComboBoxFilterChangeEvent, type ComboBoxChangeEvent, type ComboBoxOpenEvent, type ComboBoxCloseEvent, type ComboBoxFocusEvent, type ComboBoxBlurEvent, type ComboBoxPageChangeEvent, MultiSelect, type MultiSelectProps, type MultiSelectChangeEvent, type MultiSelectPageChangeEvent, type MultiSelectFilterChangeEvent, type MultiSelectOpenEvent, type MultiSelectCloseEvent, type MultiSelectFocusEvent, type MultiSelectBlurEvent, type MultiSelectTagData, type FormComponentValidity, MultiSelectTree, DropDownTree };