@progress/kendo-vue-dropdowns 3.6.4 → 3.7.0-dev.202210250731
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.
- package/dist/cdn/js/kendo-vue-dropdowns.js +1 -1
- package/dist/es/AutoComplete/AutoComplete.js +49 -92
- package/dist/es/ComboBox/ComboBox.js +88 -162
- package/dist/es/DropDownList/DropDownList.js +99 -154
- package/dist/es/MultiSelect/MultiSelect.js +61 -170
- package/dist/es/MultiSelect/TagList.js +10 -21
- package/dist/es/common/ClearButton.js +0 -2
- package/dist/es/common/DropDownBase.js +18 -78
- package/dist/es/common/List.js +17 -21
- package/dist/es/common/ListContainer.js +16 -18
- package/dist/es/common/ListDefaultItem.js +3 -5
- package/dist/es/common/ListFilter.js +4 -7
- package/dist/es/common/ListItem.js +2 -8
- package/dist/es/common/SearchBar.js +3 -9
- package/dist/es/common/VirtualScroll.js +5 -41
- package/dist/es/package-metadata.js +1 -1
- package/dist/esm/AutoComplete/AutoComplete.js +49 -92
- package/dist/esm/ComboBox/ComboBox.js +88 -162
- package/dist/esm/DropDownList/DropDownList.js +99 -154
- package/dist/esm/MultiSelect/MultiSelect.js +61 -170
- package/dist/esm/MultiSelect/TagList.js +10 -21
- package/dist/esm/common/ClearButton.js +0 -2
- package/dist/esm/common/DropDownBase.js +18 -78
- package/dist/esm/common/List.js +17 -21
- package/dist/esm/common/ListContainer.js +16 -18
- package/dist/esm/common/ListDefaultItem.js +3 -5
- package/dist/esm/common/ListFilter.js +4 -7
- package/dist/esm/common/ListItem.js +2 -8
- package/dist/esm/common/SearchBar.js +3 -9
- package/dist/esm/common/VirtualScroll.js +5 -41
- package/dist/esm/package-metadata.js +1 -1
- package/dist/npm/AutoComplete/AutoComplete.js +49 -101
- package/dist/npm/ComboBox/ComboBox.js +88 -175
- package/dist/npm/DropDownList/DropDownList.js +99 -165
- package/dist/npm/MultiSelect/MultiSelect.js +61 -182
- package/dist/npm/MultiSelect/TagList.js +10 -24
- package/dist/npm/common/ClearButton.js +2 -8
- package/dist/npm/common/DropDownBase.js +18 -84
- package/dist/npm/common/List.js +19 -30
- package/dist/npm/common/ListContainer.js +18 -24
- package/dist/npm/common/ListDefaultItem.js +5 -11
- package/dist/npm/common/ListFilter.js +6 -12
- package/dist/npm/common/ListItem.js +2 -12
- package/dist/npm/common/SearchBar.js +5 -14
- package/dist/npm/common/VirtualScroll.js +5 -41
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +5 -5
|
@@ -4,59 +4,41 @@ var __assign = undefined && undefined.__assign || function () {
|
|
|
4
4
|
__assign = Object.assign || function (t) {
|
|
5
5
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
6
|
s = arguments[i];
|
|
7
|
-
|
|
8
7
|
for (var p in s) {
|
|
9
8
|
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
10
9
|
}
|
|
11
10
|
}
|
|
12
|
-
|
|
13
11
|
return t;
|
|
14
12
|
};
|
|
15
|
-
|
|
16
13
|
return __assign.apply(this, arguments);
|
|
17
14
|
};
|
|
18
|
-
|
|
19
15
|
Object.defineProperty(exports, "__esModule", {
|
|
20
16
|
value: true
|
|
21
17
|
});
|
|
22
|
-
exports.ComboBoxVue2 = exports.ComboBox = void 0;
|
|
23
|
-
|
|
18
|
+
exports.ComboBoxVue2 = exports.ComboBox = void 0;
|
|
19
|
+
// @ts-ignore
|
|
24
20
|
var Vue = require("vue");
|
|
25
|
-
|
|
26
21
|
var allVue = Vue;
|
|
27
22
|
var gh = allVue.h;
|
|
28
23
|
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
29
24
|
var ref = allVue.ref;
|
|
30
25
|
var inject = allVue.inject;
|
|
31
|
-
|
|
32
26
|
var DropDownBase_1 = require("../common/DropDownBase");
|
|
33
|
-
|
|
34
27
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
35
|
-
|
|
36
28
|
var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
|
|
37
|
-
|
|
38
29
|
var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
|
|
39
|
-
|
|
40
|
-
|
|
30
|
+
roundedMap = kendo_vue_common_1.kendoThemeMaps.roundedMap;
|
|
41
31
|
var utils_1 = require("../common/utils");
|
|
42
|
-
|
|
43
32
|
var SearchBar_1 = require("../common/SearchBar");
|
|
44
|
-
|
|
45
33
|
var ListContainer_1 = require("../common/ListContainer");
|
|
46
|
-
|
|
47
34
|
var List_1 = require("../common/List");
|
|
48
|
-
|
|
49
35
|
var ClearButton_1 = require("../common/ClearButton");
|
|
50
|
-
|
|
51
36
|
var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
|
|
52
|
-
|
|
53
37
|
var main_1 = require("../messages/main");
|
|
54
|
-
|
|
55
38
|
var VALIDATION_MESSAGE = 'Please enter a valid value!';
|
|
56
39
|
/**
|
|
57
40
|
* @hidden
|
|
58
41
|
*/
|
|
59
|
-
|
|
60
42
|
var ComboBoxVue2 = {
|
|
61
43
|
name: 'KendoComboBox',
|
|
62
44
|
model: {
|
|
@@ -242,8 +224,8 @@ var ComboBoxVue2 = {
|
|
|
242
224
|
};
|
|
243
225
|
},
|
|
244
226
|
mounted: function mounted() {
|
|
245
|
-
this.hasMounted = true;
|
|
246
|
-
|
|
227
|
+
this.hasMounted = true;
|
|
228
|
+
// @ts-ignore
|
|
247
229
|
this.input = this.v3 ? this.inputRef.input : this.$refs.input.input;
|
|
248
230
|
this.base.wrapper = (0, kendo_vue_common_1.getRef)(this, 'kendoAnchor', this.anchor);
|
|
249
231
|
this.element = (0, kendo_vue_common_1.getRef)(this, 'kendoAnchor', this.anchor);
|
|
@@ -252,10 +234,10 @@ var ComboBoxVue2 = {
|
|
|
252
234
|
},
|
|
253
235
|
updated: function updated() {
|
|
254
236
|
var _a = this.$props,
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
237
|
+
_b = _a.dataItems,
|
|
238
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
239
|
+
dataItemKey = _a.dataItemKey,
|
|
240
|
+
virtual = _a.virtual;
|
|
259
241
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
260
242
|
var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
|
|
261
243
|
var opening = !prevOpened && opened;
|
|
@@ -264,24 +246,20 @@ var ComboBoxVue2 = {
|
|
|
264
246
|
var scrollElement = this.$refs.scrollElement;
|
|
265
247
|
var selectedItem = this.computedValue();
|
|
266
248
|
this.valueOnDidUpdate = selectedItem;
|
|
267
|
-
|
|
268
249
|
if (list) {
|
|
269
250
|
// @ts-ignore
|
|
270
|
-
this.base.vs.list = list.list;
|
|
271
|
-
|
|
251
|
+
this.base.vs.list = list.list;
|
|
252
|
+
// @ts-ignore
|
|
272
253
|
this.base.list = list.list;
|
|
273
254
|
}
|
|
274
|
-
|
|
275
255
|
if (scrollElement) {
|
|
276
256
|
this.base.vs.scrollElement = scrollElement;
|
|
277
257
|
}
|
|
278
|
-
|
|
279
258
|
if (list && dataItems.length) {
|
|
280
259
|
// @ts-ignore
|
|
281
260
|
this.base.vs.scrollerRef(list.$el);
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
|
|
261
|
+
}
|
|
262
|
+
// @ts-ignore
|
|
285
263
|
if (virtual && this.virtualTotalHasChanged) {
|
|
286
264
|
this.base.vs.calcScrollElementHeight();
|
|
287
265
|
this.base.vs.reset();
|
|
@@ -292,7 +270,6 @@ var ComboBoxVue2 = {
|
|
|
292
270
|
return (0, utils_1.areSame)(i, selectedItem, dataItemKey);
|
|
293
271
|
});
|
|
294
272
|
var selectedItemChanged = !(0, utils_1.areSame)(prevSelectedItem, selectedItem, dataItemKey);
|
|
295
|
-
|
|
296
273
|
if (opening && virtual) {
|
|
297
274
|
this.base.scrollToVirtualItem(virtual, selectedItemIndex);
|
|
298
275
|
this.prevCurrentOpened = true;
|
|
@@ -303,11 +280,9 @@ var ComboBoxVue2 = {
|
|
|
303
280
|
this.base.scrollToItem(selectedItemIndex);
|
|
304
281
|
}
|
|
305
282
|
}
|
|
306
|
-
|
|
307
283
|
if (opening && this.input) {
|
|
308
284
|
this.input.focus();
|
|
309
285
|
}
|
|
310
|
-
|
|
311
286
|
this.prevCurrentValue = this.computedValue();
|
|
312
287
|
this.setValidity();
|
|
313
288
|
},
|
|
@@ -322,7 +297,6 @@ var ComboBoxVue2 = {
|
|
|
322
297
|
if (newValue && oldValue && newValue.total !== oldValue.total) {
|
|
323
298
|
this.virtualTotalHasChanged = true;
|
|
324
299
|
}
|
|
325
|
-
|
|
326
300
|
this.virtualHasChanged = true;
|
|
327
301
|
}
|
|
328
302
|
},
|
|
@@ -330,11 +304,11 @@ var ComboBoxVue2 = {
|
|
|
330
304
|
index: {
|
|
331
305
|
get: function get() {
|
|
332
306
|
var _a = this.$props,
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
var value = this.computedValue();
|
|
337
|
-
|
|
307
|
+
_b = _a.dataItems,
|
|
308
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
309
|
+
dataItemKey = _a.dataItemKey;
|
|
310
|
+
var value = this.computedValue();
|
|
311
|
+
// TO DO: deprecate it!
|
|
338
312
|
return dataItems.findIndex(function (i) {
|
|
339
313
|
return (0, utils_1.areSame)(i, value, dataItemKey);
|
|
340
314
|
});
|
|
@@ -361,7 +335,6 @@ var ComboBoxVue2 = {
|
|
|
361
335
|
},
|
|
362
336
|
computedValue: function computedValue() {
|
|
363
337
|
var value;
|
|
364
|
-
|
|
365
338
|
if (this.valueDuringOnChange !== undefined) {
|
|
366
339
|
value = this.valueDuringOnChange;
|
|
367
340
|
} else if (this.$props.value !== undefined) {
|
|
@@ -373,7 +346,6 @@ var ComboBoxVue2 = {
|
|
|
373
346
|
} else if (this.$props.defaultValue !== undefined) {
|
|
374
347
|
value = this.$props.defaultValue;
|
|
375
348
|
}
|
|
376
|
-
|
|
377
349
|
return this.valuePrimitive ? this.findByFieldValue(this.valueField, value) || value : value;
|
|
378
350
|
},
|
|
379
351
|
findByFieldValue: function findByFieldValue(field, value) {
|
|
@@ -398,38 +370,35 @@ var ComboBoxVue2 = {
|
|
|
398
370
|
},
|
|
399
371
|
handleItemSelect: function handleItemSelect(index, state) {
|
|
400
372
|
var _a = this.$props,
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
373
|
+
_b = _a.dataItems,
|
|
374
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
375
|
+
virtual = _a.virtual,
|
|
376
|
+
dataItemKey = _a.dataItemKey;
|
|
405
377
|
var skip = virtual ? virtual.skip : 0;
|
|
406
378
|
var item = dataItems[index - skip];
|
|
407
379
|
var newSelected = !(0, utils_1.areSame)(item, this.computedValue(), dataItemKey);
|
|
408
380
|
this.triggerOnChange(item, state);
|
|
409
|
-
|
|
410
381
|
if (this.currentText !== undefined) {
|
|
411
382
|
// @ts-ignore
|
|
412
383
|
state.data.currentText = undefined;
|
|
413
384
|
}
|
|
414
|
-
|
|
415
385
|
if (newSelected) {
|
|
416
386
|
this.base.triggerPageChangeCornerItems(item, state);
|
|
417
387
|
}
|
|
418
388
|
},
|
|
419
389
|
onNavigate: function onNavigate(state, keyCode) {
|
|
420
390
|
var _a = this.$props,
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
391
|
+
_b = _a.dataItems,
|
|
392
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
393
|
+
_c = _a.virtual,
|
|
394
|
+
virtual = _c === void 0 ? {
|
|
395
|
+
skip: 0
|
|
396
|
+
} : _c;
|
|
427
397
|
var text = this.$props.filter ? this.$props.filter : this.currentText;
|
|
428
398
|
var focusedIndex = this.getFocusedIndex();
|
|
429
399
|
var vs = this.base.vs;
|
|
430
400
|
var value = this.computedValue();
|
|
431
401
|
this.suggested = '';
|
|
432
|
-
|
|
433
402
|
if (focusedIndex !== -1 && !(0, utils_1.isPresent)(value)) {
|
|
434
403
|
this.handleItemSelect(focusedIndex, state);
|
|
435
404
|
} else if (text === '') {
|
|
@@ -442,7 +411,6 @@ var ComboBoxVue2 = {
|
|
|
442
411
|
max: (vs.enabled ? vs.total : dataItems.length) - 1,
|
|
443
412
|
min: 0
|
|
444
413
|
});
|
|
445
|
-
|
|
446
414
|
if (newIndex !== undefined) {
|
|
447
415
|
this.handleItemSelect(newIndex, state);
|
|
448
416
|
}
|
|
@@ -456,19 +424,17 @@ var ComboBoxVue2 = {
|
|
|
456
424
|
},
|
|
457
425
|
applyValueOnEnter: function applyValueOnEnter(value, state) {
|
|
458
426
|
var _a;
|
|
459
|
-
|
|
460
427
|
var _b = this.$props,
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
428
|
+
_c = _b.dataItems,
|
|
429
|
+
dataItems = _c === void 0 ? [] : _c,
|
|
430
|
+
textField = _b.textField,
|
|
431
|
+
allowCustom = _b.allowCustom;
|
|
465
432
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
466
433
|
var currentValueText = (0, utils_1.getItemValue)(this.computedValue(), textField);
|
|
467
434
|
var valueIndex = currentValueText === value ? this.index : (0, utils_1.getItemIndexByText)(dataItems, value, textField);
|
|
468
435
|
var itemSelected = valueIndex !== -1;
|
|
469
436
|
var newSelected = undefined;
|
|
470
437
|
this.suggested = '';
|
|
471
|
-
|
|
472
438
|
if (itemSelected) {
|
|
473
439
|
// typed text match item from list
|
|
474
440
|
newSelected = dataItems[valueIndex];
|
|
@@ -480,94 +446,77 @@ var ComboBoxVue2 = {
|
|
|
480
446
|
return this.selectFocusedItem(value, state);
|
|
481
447
|
}
|
|
482
448
|
}
|
|
483
|
-
|
|
484
449
|
this.triggerOnChange(newSelected, state);
|
|
485
|
-
|
|
486
450
|
if (opened) {
|
|
487
451
|
this.base.togglePopup(state);
|
|
488
452
|
}
|
|
489
|
-
|
|
490
453
|
if (this.$props.filter === undefined && this.currentText !== undefined) {
|
|
491
454
|
// @ts-ignore
|
|
492
455
|
state.data.currentText = undefined;
|
|
493
456
|
}
|
|
494
|
-
|
|
495
457
|
this.applyState(state);
|
|
496
458
|
},
|
|
497
459
|
applyValueOnRejectSuggestions: function applyValueOnRejectSuggestions(text, state) {
|
|
498
460
|
var _a;
|
|
499
|
-
|
|
500
461
|
var _b = this.$props,
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
462
|
+
_c = _b.dataItems,
|
|
463
|
+
dataItems = _c === void 0 ? [] : _c,
|
|
464
|
+
textField = _b.textField,
|
|
465
|
+
allowCustom = _b.allowCustom;
|
|
505
466
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
506
467
|
var valueItemText = (0, utils_1.getItemValue)(this.computedValue(), textField);
|
|
507
468
|
this.suggested = '';
|
|
508
|
-
|
|
509
469
|
if (text === valueItemText || text === '' && !(0, utils_1.isPresent)(valueItemText)) {
|
|
510
470
|
if (opened) {
|
|
511
471
|
this.base.togglePopup(state);
|
|
512
472
|
}
|
|
513
|
-
|
|
514
473
|
return this.applyState(state);
|
|
515
474
|
}
|
|
516
|
-
|
|
517
475
|
var valueIndex = (0, utils_1.getItemIndexByText)(dataItems, text, textField, true);
|
|
518
476
|
var itemSelected = valueIndex !== -1;
|
|
519
477
|
var newSelected = null;
|
|
520
|
-
|
|
521
478
|
if (itemSelected) {
|
|
522
479
|
newSelected = dataItems[valueIndex];
|
|
523
480
|
} else if (allowCustom) {
|
|
524
481
|
newSelected = text ? textField ? (_a = {}, _a[textField] = text, _a) : text : null;
|
|
525
482
|
}
|
|
526
|
-
|
|
527
483
|
this.triggerOnChange(newSelected, state);
|
|
528
|
-
|
|
529
484
|
if (this.currentText !== undefined) {
|
|
530
485
|
// @ts-ignore
|
|
531
486
|
state.data.currentText = undefined;
|
|
532
487
|
this.base.filterChanged('', state);
|
|
533
488
|
}
|
|
534
|
-
|
|
535
489
|
if (opened) {
|
|
536
490
|
this.base.togglePopup(state);
|
|
537
491
|
}
|
|
538
|
-
|
|
539
492
|
this.applyState(state);
|
|
540
493
|
},
|
|
541
494
|
selectFocusedItem: function selectFocusedItem(text, state) {
|
|
542
495
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
543
496
|
var _a = this.$props,
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
497
|
+
_b = _a.dataItems,
|
|
498
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
499
|
+
textField = _a.textField,
|
|
500
|
+
_c = _a.virtual,
|
|
501
|
+
virtual = _c === void 0 ? {
|
|
502
|
+
skip: 0
|
|
503
|
+
} : _c,
|
|
504
|
+
_d = _a.focusedItemIndex,
|
|
505
|
+
focusedItemIndex = _d === void 0 ? utils_1.itemIndexStartsWith : _d;
|
|
553
506
|
var skip = virtual.skip;
|
|
554
507
|
var focusedIndex = text === '' && skip === 0 ? 0 : focusedItemIndex(dataItems, text, textField);
|
|
555
|
-
|
|
556
508
|
if (focusedIndex !== -1) {
|
|
557
509
|
this.handleItemSelect(focusedIndex + skip, state);
|
|
558
510
|
} else {
|
|
559
511
|
this.triggerOnChange(null, state);
|
|
560
|
-
|
|
561
512
|
if (this.currentText !== undefined) {
|
|
562
513
|
// @ts-ignore
|
|
563
514
|
state.data.currentText = undefined;
|
|
564
515
|
}
|
|
565
516
|
}
|
|
566
|
-
|
|
567
517
|
if (opened) {
|
|
568
518
|
this.base.togglePopup(state);
|
|
569
519
|
}
|
|
570
|
-
|
|
571
520
|
return this.applyState(state);
|
|
572
521
|
},
|
|
573
522
|
handleItemClick: function handleItemClick(index, event) {
|
|
@@ -590,27 +539,21 @@ var ComboBoxVue2 = {
|
|
|
590
539
|
},
|
|
591
540
|
onInputKeyDown: function onInputKeyDown(event) {
|
|
592
541
|
var _this = this;
|
|
593
|
-
|
|
594
542
|
var keyCode = event.keyCode;
|
|
595
543
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
596
544
|
var state = this.base.initState();
|
|
597
545
|
state.event = event;
|
|
598
|
-
|
|
599
546
|
if (!event.altKey && (keyCode === kendo_vue_common_1.Keys.up || keyCode === kendo_vue_common_1.Keys.down)) {
|
|
600
547
|
event.preventDefault();
|
|
601
548
|
this.onNavigate(state, keyCode);
|
|
602
549
|
this.applyState(state);
|
|
603
550
|
return;
|
|
604
551
|
}
|
|
605
|
-
|
|
606
552
|
var togglePopup = function togglePopup() {
|
|
607
553
|
event.preventDefault();
|
|
608
|
-
|
|
609
554
|
_this.base.togglePopup(state);
|
|
610
|
-
|
|
611
555
|
_this.applyState(state);
|
|
612
556
|
};
|
|
613
|
-
|
|
614
557
|
if (opened) {
|
|
615
558
|
if (event.altKey && keyCode === kendo_vue_common_1.Keys.up) {
|
|
616
559
|
togglePopup();
|
|
@@ -634,39 +577,31 @@ var ComboBoxVue2 = {
|
|
|
634
577
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
635
578
|
var input = event.currentTarget;
|
|
636
579
|
var value = input.value;
|
|
637
|
-
|
|
638
580
|
if (this.$props.suggest) {
|
|
639
581
|
var selectionAtEnd = input.selectionEnd === value.length;
|
|
640
582
|
var prevText = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
|
|
641
|
-
|
|
642
583
|
if (!(0, utils_1.isPresent)(prevText)) {
|
|
643
584
|
prevText = (0, utils_1.getItemValue)(this.computedValue(), this.$props.textField) || '';
|
|
644
585
|
}
|
|
645
|
-
|
|
646
586
|
var deletedSuggestion = prevText && prevText === value;
|
|
647
587
|
var deleting = prevText && prevText.length > value.length;
|
|
648
|
-
|
|
649
588
|
if (deletedSuggestion || deleting || !selectionAtEnd) {
|
|
650
589
|
this.suggested = '';
|
|
651
590
|
} else {
|
|
652
591
|
this.suggestValue(value);
|
|
653
592
|
}
|
|
654
593
|
}
|
|
655
|
-
|
|
656
594
|
if (this.$props.filter === undefined) {
|
|
657
595
|
// @ts-ignore
|
|
658
596
|
state.data.currentText = value;
|
|
659
597
|
}
|
|
660
|
-
|
|
661
598
|
if (this.currentFocusedItem !== undefined) {
|
|
662
599
|
// @ts-ignore
|
|
663
600
|
state.data.focusedItem = undefined;
|
|
664
601
|
}
|
|
665
|
-
|
|
666
602
|
if (!opened) {
|
|
667
603
|
this.base.togglePopup(state);
|
|
668
604
|
}
|
|
669
|
-
|
|
670
605
|
this.base.filterChanged(value, state);
|
|
671
606
|
this.applyState(state);
|
|
672
607
|
},
|
|
@@ -676,36 +611,31 @@ var ComboBoxVue2 = {
|
|
|
676
611
|
event.stopPropagation();
|
|
677
612
|
this.suggested = '';
|
|
678
613
|
this.base.filterChanged('', state);
|
|
679
|
-
|
|
680
614
|
if (this.$props.filter === undefined && this.currentText !== undefined) {
|
|
681
615
|
// @ts-ignore
|
|
682
616
|
state.data.currentText = undefined;
|
|
683
617
|
}
|
|
684
|
-
|
|
685
618
|
this.triggerOnChange(null, state);
|
|
686
619
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
687
|
-
|
|
688
620
|
if (opened) {
|
|
689
621
|
this.base.togglePopup(state);
|
|
690
622
|
}
|
|
691
|
-
|
|
692
623
|
this.applyState(state);
|
|
693
624
|
},
|
|
694
625
|
getFocusedIndex: function getFocusedIndex() {
|
|
695
626
|
var value = this.computedValue();
|
|
696
627
|
var _a = this.$props,
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
628
|
+
_b = _a.dataItems,
|
|
629
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
630
|
+
textField = _a.textField,
|
|
631
|
+
dataItemKey = _a.dataItemKey,
|
|
632
|
+
_c = _a.virtual,
|
|
633
|
+
virtual = _c === void 0 ? {
|
|
634
|
+
skip: 0
|
|
635
|
+
} : _c,
|
|
636
|
+
_d = _a.focusedItemIndex,
|
|
637
|
+
focusedItemIndex = _d === void 0 ? utils_1.itemIndexStartsWith : _d;
|
|
707
638
|
var text = this.$props.filter ? this.$props.filter : this.currentText;
|
|
708
|
-
|
|
709
639
|
if ((0, utils_1.isPresent)(value) && text === undefined) {
|
|
710
640
|
return dataItems.findIndex(function (i) {
|
|
711
641
|
return (0, utils_1.areSame)(i, value, dataItemKey);
|
|
@@ -718,8 +648,8 @@ var ComboBoxVue2 = {
|
|
|
718
648
|
},
|
|
719
649
|
suggestValue: function suggestValue(value) {
|
|
720
650
|
var _a = this.$props,
|
|
721
|
-
|
|
722
|
-
|
|
651
|
+
dataItems = _a.dataItems,
|
|
652
|
+
textField = _a.textField;
|
|
723
653
|
this.suggested = (0, utils_1.suggestValue)(value, dataItems, textField);
|
|
724
654
|
},
|
|
725
655
|
setValidity: function setValidity() {
|
|
@@ -729,15 +659,12 @@ var ComboBoxVue2 = {
|
|
|
729
659
|
},
|
|
730
660
|
triggerOnChange: function triggerOnChange(item, state) {
|
|
731
661
|
var value = this.computedValue();
|
|
732
|
-
|
|
733
662
|
if (!(0, utils_1.isPresent)(value) && !(0, utils_1.isPresent)(item) || (0, utils_1.areSame)(value, item, this.$props.dataItemKey)) {
|
|
734
663
|
return;
|
|
735
664
|
}
|
|
736
|
-
|
|
737
665
|
if (this.$props.value === undefined) {
|
|
738
666
|
this.currentValue = item;
|
|
739
667
|
}
|
|
740
|
-
|
|
741
668
|
this.valueDuringOnChange = item;
|
|
742
669
|
state.events.push({
|
|
743
670
|
type: 'change'
|
|
@@ -753,22 +680,21 @@ var ComboBoxVue2 = {
|
|
|
753
680
|
},
|
|
754
681
|
render: function render(createElement) {
|
|
755
682
|
var _a;
|
|
756
|
-
|
|
757
683
|
var h = gh || createElement;
|
|
758
684
|
var _b = this.$props,
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
685
|
+
dir = _b.dir,
|
|
686
|
+
disabled = _b.disabled,
|
|
687
|
+
clearButton = _b.clearButton,
|
|
688
|
+
label = _b.label,
|
|
689
|
+
textField = _b.textField,
|
|
690
|
+
className = _b.className,
|
|
691
|
+
style = _b.style,
|
|
692
|
+
loading = _b.loading,
|
|
693
|
+
iconClassName = _b.iconClassName,
|
|
694
|
+
virtual = _b.virtual,
|
|
695
|
+
size = _b.size,
|
|
696
|
+
fillMode = _b.fillMode,
|
|
697
|
+
rounded = _b.rounded;
|
|
772
698
|
var focused = this.currentFocused;
|
|
773
699
|
var isValid = !this.$props.validityStyles || this.validity().valid;
|
|
774
700
|
var text = this.$props.filter !== undefined ? this.$props.filter : this.currentText;
|
|
@@ -784,37 +710,32 @@ var ComboBoxVue2 = {
|
|
|
784
710
|
}, this.$props.popupSettings);
|
|
785
711
|
var ariaLabelExpandButton = (0, kendo_vue_intl_1.provideLocalizationService)(this).toLanguageString(main_1.expandButton, main_1.messages[main_1.expandButton]);
|
|
786
712
|
vs.enabled = virtual !== undefined;
|
|
787
|
-
|
|
788
713
|
if (virtual !== undefined) {
|
|
789
714
|
vs.skip = virtual.skip;
|
|
790
715
|
vs.total = virtual.total;
|
|
791
716
|
vs.pageSize = virtual.pageSize;
|
|
792
717
|
}
|
|
793
|
-
|
|
794
718
|
var renderList = function renderList() {
|
|
795
719
|
var _this2 = this;
|
|
796
|
-
|
|
797
720
|
var _a;
|
|
798
|
-
|
|
799
721
|
var _b = this.$props,
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
722
|
+
dataItemKey = _b.dataItemKey,
|
|
723
|
+
_c = _b.dataItems,
|
|
724
|
+
dataItems = _c === void 0 ? [] : _c;
|
|
803
725
|
var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
|
|
804
726
|
var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
|
|
805
|
-
|
|
806
727
|
if (!virtual) {
|
|
807
728
|
virtual = {
|
|
808
729
|
skip: 0
|
|
809
730
|
};
|
|
810
731
|
}
|
|
811
|
-
|
|
812
732
|
var skip = virtual.skip;
|
|
813
733
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
814
734
|
var translate = "translateY(".concat(vs.translate, "px)");
|
|
815
735
|
var focusedIndex = opened ? this.getFocusedIndex() : undefined;
|
|
816
736
|
var value = (0, utils_1.isPresent)(text) && text !== selectedItemText ? null : this.computedValue();
|
|
817
|
-
return (
|
|
737
|
+
return (
|
|
738
|
+
// @ts-ignore function children
|
|
818
739
|
h(List_1.List, {
|
|
819
740
|
id: base.listBoxId,
|
|
820
741
|
attrs: this.v3 ? undefined : {
|
|
@@ -867,19 +788,15 @@ var ComboBoxVue2 = {
|
|
|
867
788
|
} : [renderScrollElement.call(_this2)])
|
|
868
789
|
);
|
|
869
790
|
};
|
|
870
|
-
|
|
871
791
|
var renderScrollElement = function renderScrollElement() {
|
|
872
792
|
return vs.enabled && h("div", {
|
|
873
793
|
ref: 'scrollElement',
|
|
874
794
|
key: 'scrollElementKey'
|
|
875
795
|
});
|
|
876
796
|
};
|
|
877
|
-
|
|
878
797
|
var renderListContainer = function renderListContainer() {
|
|
879
798
|
var _this3 = this;
|
|
880
|
-
|
|
881
799
|
var _a;
|
|
882
|
-
|
|
883
800
|
var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
|
|
884
801
|
var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
|
|
885
802
|
var header = kendo_vue_common_1.getTemplate.call(this, {
|
|
@@ -892,7 +809,8 @@ var ComboBoxVue2 = {
|
|
|
892
809
|
});
|
|
893
810
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
894
811
|
var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
|
|
895
|
-
return (
|
|
812
|
+
return (
|
|
813
|
+
// @ts-ignore function children
|
|
896
814
|
h(ListContainer_1.ListContainer, {
|
|
897
815
|
ref: 'container',
|
|
898
816
|
onMousedown: function onMousedown(e) {
|
|
@@ -934,34 +852,29 @@ var ComboBoxVue2 = {
|
|
|
934
852
|
}, [footer])])
|
|
935
853
|
);
|
|
936
854
|
};
|
|
937
|
-
|
|
938
855
|
var renderSearchBar = function renderSearchBar(searchText, searchId) {
|
|
939
856
|
var _this = this;
|
|
940
|
-
|
|
941
857
|
var _a = this.$props,
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
858
|
+
placeholder = _a.placeholder,
|
|
859
|
+
tabIndex = _a.tabIndex,
|
|
860
|
+
_b = _a.dataItems,
|
|
861
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
862
|
+
dataItemKey = _a.dataItemKey;
|
|
948
863
|
if (!virtual) {
|
|
949
864
|
virtual = {
|
|
950
865
|
skip: 0
|
|
951
866
|
};
|
|
952
867
|
}
|
|
953
|
-
|
|
954
868
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
955
869
|
var value = this.computedValue();
|
|
956
870
|
var selectedIndex = Math.max(0, dataItems.findIndex(function (i) {
|
|
957
871
|
return (0, utils_1.areSame)(i, value, dataItemKey);
|
|
958
872
|
}));
|
|
959
|
-
|
|
960
873
|
if (this.suggested && !(0, utils_1.areSame)(this.valueOnDidUpdate, value, dataItemKey)) {
|
|
961
874
|
this.suggested = '';
|
|
962
875
|
}
|
|
963
|
-
|
|
964
|
-
|
|
876
|
+
return (
|
|
877
|
+
// @ts-ignore function children
|
|
965
878
|
h(SearchBar_1.SearchBar, {
|
|
966
879
|
id: searchId,
|
|
967
880
|
attrs: this.v3 ? undefined : {
|
|
@@ -1005,7 +918,6 @@ var ComboBoxVue2 = {
|
|
|
1005
918
|
})
|
|
1006
919
|
);
|
|
1007
920
|
};
|
|
1008
|
-
|
|
1009
921
|
var combobox = h("span", {
|
|
1010
922
|
"class": (0, kendo_vue_common_1.classNames)('k-combobox k-input', (_a = {}, _a["k-input-".concat(sizeMap[size] || size)] = size, _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded, _a["k-input-".concat(fillMode)] = fillMode, _a['k-invalid'] = !isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a['k-focus'] = focused && !disabled, _a), className),
|
|
1011
923
|
ref: (0, kendo_vue_common_1.setRef)(this, 'kendoAnchor', this.anchor),
|
|
@@ -1016,7 +928,8 @@ var ComboBoxVue2 = {
|
|
|
1016
928
|
attrs: this.v3 ? undefined : {
|
|
1017
929
|
dir: dir
|
|
1018
930
|
}
|
|
1019
|
-
}, [renderSearchBar.call(this, inputText || '', id), renderClearButton && !loading &&
|
|
931
|
+
}, [renderSearchBar.call(this, inputText || '', id), renderClearButton && !loading &&
|
|
932
|
+
// @ts-ignore function children
|
|
1020
933
|
h(ClearButton_1.ClearButton, {
|
|
1021
934
|
onClearclick: this.clearButtonClick,
|
|
1022
935
|
on: this.v3 ? undefined : {
|
|
@@ -1026,7 +939,8 @@ var ComboBoxVue2 = {
|
|
|
1026
939
|
}), loading && h("span", {
|
|
1027
940
|
"class": "k-icon k-input-loading-icon k-i-loading",
|
|
1028
941
|
key: "loading"
|
|
1029
|
-
}),
|
|
942
|
+
}),
|
|
943
|
+
// @ts-ignore
|
|
1030
944
|
h(kendo_vue_buttons_1.Button, {
|
|
1031
945
|
type: "button",
|
|
1032
946
|
attrs: this.v3 ? undefined : {
|
|
@@ -1081,6 +995,5 @@ exports.ComboBoxVue2 = ComboBoxVue2;
|
|
|
1081
995
|
/**
|
|
1082
996
|
* @hidden
|
|
1083
997
|
*/
|
|
1084
|
-
|
|
1085
998
|
var ComboBox = ComboBoxVue2;
|
|
1086
999
|
exports.ComboBox = ComboBox;
|