@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
|
@@ -2,13 +2,9 @@ var maxHeightIE = 1533915;
|
|
|
2
2
|
/**
|
|
3
3
|
* @hidden
|
|
4
4
|
*/
|
|
5
|
-
|
|
6
|
-
var VirtualScroll =
|
|
7
|
-
/** @class */
|
|
8
|
-
function () {
|
|
5
|
+
var VirtualScroll = /** @class */function () {
|
|
9
6
|
function VirtualScroll() {
|
|
10
7
|
var _this = this;
|
|
11
|
-
|
|
12
8
|
this.containerHeight = 0;
|
|
13
9
|
this.skip = 0;
|
|
14
10
|
this.total = 0;
|
|
@@ -18,39 +14,31 @@ function () {
|
|
|
18
14
|
this.prevScrollPos = 0;
|
|
19
15
|
this.listTranslate = 0;
|
|
20
16
|
this.scrollSyncing = false;
|
|
21
|
-
|
|
22
17
|
this.scrollerRef = function (element) {
|
|
23
18
|
var vs = _this;
|
|
24
19
|
vs.container = element;
|
|
25
|
-
|
|
26
20
|
if (element) {
|
|
27
21
|
element.setAttribute('unselectable', 'on');
|
|
28
22
|
setTimeout(vs.calcScrollElementHeight.bind(vs), 0);
|
|
29
23
|
}
|
|
30
24
|
};
|
|
31
|
-
|
|
32
25
|
this.calcScrollElementHeight = function () {
|
|
33
26
|
_this.scrollSyncing = true;
|
|
34
27
|
var heightChanged = false;
|
|
35
28
|
_this.itemHeight = _this.list ? _this.list.children[0].offsetHeight : _this.itemHeight;
|
|
36
29
|
_this.containerHeight = Math.min(maxHeightIE, _this.itemHeight * _this.total);
|
|
37
30
|
var newHeight = _this.containerHeight;
|
|
38
|
-
|
|
39
31
|
if (_this.scrollElement) {
|
|
40
32
|
heightChanged = _this.scrollElement.style.height !== newHeight + 'px';
|
|
41
|
-
|
|
42
33
|
if (heightChanged) {
|
|
43
34
|
_this.scrollElement.style.height = newHeight + 'px';
|
|
44
35
|
}
|
|
45
36
|
}
|
|
46
|
-
|
|
47
37
|
_this.scrollSyncing = false;
|
|
48
38
|
return heightChanged;
|
|
49
39
|
};
|
|
50
|
-
|
|
51
40
|
this.scrollHandler = this.scrollHandler.bind(this);
|
|
52
41
|
}
|
|
53
|
-
|
|
54
42
|
Object.defineProperty(VirtualScroll.prototype, "translate", {
|
|
55
43
|
get: function get() {
|
|
56
44
|
return this.listTranslate;
|
|
@@ -58,10 +46,8 @@ function () {
|
|
|
58
46
|
enumerable: false,
|
|
59
47
|
configurable: true
|
|
60
48
|
});
|
|
61
|
-
|
|
62
49
|
VirtualScroll.prototype.changePage = function (skip, e) {
|
|
63
50
|
var newSkip = Math.min(Math.max(0, skip), this.total - this.pageSize);
|
|
64
|
-
|
|
65
51
|
if (newSkip !== this.skip) {
|
|
66
52
|
this.PageChange({
|
|
67
53
|
skip: newSkip,
|
|
@@ -69,15 +55,12 @@ function () {
|
|
|
69
55
|
}, e);
|
|
70
56
|
}
|
|
71
57
|
};
|
|
72
|
-
|
|
73
58
|
VirtualScroll.prototype.translateTo = function (dY) {
|
|
74
59
|
this.listTranslate = dY;
|
|
75
|
-
|
|
76
60
|
if (this.list) {
|
|
77
61
|
this.list.style.transform = 'translateY(' + dY + 'px)';
|
|
78
62
|
}
|
|
79
63
|
};
|
|
80
|
-
|
|
81
64
|
VirtualScroll.prototype.reset = function () {
|
|
82
65
|
if (this.container) {
|
|
83
66
|
this.calcScrollElementHeight();
|
|
@@ -85,12 +68,11 @@ function () {
|
|
|
85
68
|
this.translateTo(0);
|
|
86
69
|
}
|
|
87
70
|
};
|
|
88
|
-
|
|
89
71
|
VirtualScroll.prototype.scrollToEnd = function () {
|
|
90
72
|
if (this.container && this.list) {
|
|
91
73
|
this.calcScrollElementHeight();
|
|
92
|
-
this.container.scrollTop = this.container.scrollHeight - this.container.offsetHeight;
|
|
93
|
-
|
|
74
|
+
this.container.scrollTop = this.container.scrollHeight - this.container.offsetHeight;
|
|
75
|
+
// this.translateTo(this.container.scrollHeight - this.list.offsetHeight);
|
|
94
76
|
this.translateTo(this.container.scrollHeight); // - this.list.offsetHeight
|
|
95
77
|
}
|
|
96
78
|
};
|
|
@@ -101,51 +83,40 @@ function () {
|
|
|
101
83
|
var targetTranslate = this.listTranslate;
|
|
102
84
|
var items;
|
|
103
85
|
var additionalOnTop = scrollTop - targetTranslate;
|
|
104
|
-
|
|
105
86
|
if (additionalOnTop > height) {
|
|
106
87
|
return;
|
|
107
88
|
}
|
|
108
|
-
|
|
109
89
|
for (items = 0; items < this.skip; items++) {
|
|
110
90
|
if (targetTranslate + height + additionalOnTop <= scrollTop) {
|
|
111
91
|
break;
|
|
112
92
|
}
|
|
113
|
-
|
|
114
93
|
targetTranslate -= height;
|
|
115
94
|
}
|
|
116
|
-
|
|
117
95
|
targetTranslate = this.validateTranslate(targetTranslate);
|
|
118
|
-
|
|
119
96
|
if (this.skip - items <= 0 && targetTranslate >= scrollTop) {
|
|
120
97
|
this.translateTo(0);
|
|
121
98
|
this.changePage(0, e);
|
|
122
99
|
this.container.scrollTop = 0;
|
|
123
100
|
return;
|
|
124
101
|
}
|
|
125
|
-
|
|
126
102
|
if (targetTranslate !== this.listTranslate) {
|
|
127
103
|
this.translateTo(targetTranslate);
|
|
128
104
|
this.changePage(this.skip - items, e);
|
|
129
105
|
}
|
|
130
106
|
};
|
|
131
|
-
|
|
132
107
|
VirtualScroll.prototype.localScrollDown = function (e) {
|
|
133
108
|
var height = this.itemHeight;
|
|
134
109
|
var scrollTop = this.container.scrollTop;
|
|
135
110
|
var targetTranslate = this.listTranslate;
|
|
136
111
|
var itemsLenght = this.list.children.length;
|
|
137
112
|
var items;
|
|
138
|
-
|
|
139
113
|
for (items = 0; items < itemsLenght; items++) {
|
|
140
114
|
if (targetTranslate + height >= scrollTop) {
|
|
141
115
|
break;
|
|
142
116
|
}
|
|
143
|
-
|
|
144
117
|
targetTranslate += height;
|
|
145
118
|
}
|
|
146
|
-
|
|
147
119
|
targetTranslate = this.validateTranslate(targetTranslate);
|
|
148
|
-
|
|
149
120
|
if (items >= itemsLenght && this.skip + items >= this.total) {
|
|
150
121
|
this.translateTo(targetTranslate);
|
|
151
122
|
this.changePage(this.total - 1, e);
|
|
@@ -154,7 +125,6 @@ function () {
|
|
|
154
125
|
this.changePage(this.skip + items, e);
|
|
155
126
|
}
|
|
156
127
|
};
|
|
157
|
-
|
|
158
128
|
VirtualScroll.prototype.scrollNonStrict = function (e) {
|
|
159
129
|
var floatItemIndex = this.total * this.prevScrollPos / this.containerHeight;
|
|
160
130
|
var itemIndex = Math.min(Math.floor(floatItemIndex), this.total - 1);
|
|
@@ -163,17 +133,14 @@ function () {
|
|
|
163
133
|
this.translateTo(targetTranslate);
|
|
164
134
|
this.changePage(itemIndex, e);
|
|
165
135
|
};
|
|
166
|
-
|
|
167
136
|
VirtualScroll.prototype.scrollHandler = function (e) {
|
|
168
137
|
var scrollTop = this.container ? this.container.scrollTop : 0;
|
|
169
138
|
var prev = this.prevScrollPos;
|
|
170
139
|
this.prevScrollPos = scrollTop;
|
|
171
140
|
this.ScrollChange(e);
|
|
172
|
-
|
|
173
141
|
if (!this.enabled || !this.list || !this.container || this.scrollSyncing) {
|
|
174
142
|
return;
|
|
175
143
|
}
|
|
176
|
-
|
|
177
144
|
if (scrollTop - prev <= 0 && scrollTop > this.listTranslate - this.list.scrollHeight / 10) {
|
|
178
145
|
this.localScrollUp(e);
|
|
179
146
|
} else if (scrollTop - prev > 0 && scrollTop < this.listTranslate + this.list.scrollHeight * 2 / 3) {
|
|
@@ -182,15 +149,12 @@ function () {
|
|
|
182
149
|
this.scrollNonStrict(e);
|
|
183
150
|
}
|
|
184
151
|
};
|
|
185
|
-
|
|
186
152
|
VirtualScroll.prototype.validateTranslate = function (translate) {
|
|
187
|
-
translate = Math.max(0, translate);
|
|
188
|
-
|
|
153
|
+
translate = Math.max(0, translate);
|
|
154
|
+
// translate = Math.min(this.containerHeight - this.list!.offsetHeight, translate);
|
|
189
155
|
translate = Math.min(this.containerHeight, translate);
|
|
190
156
|
return translate;
|
|
191
157
|
};
|
|
192
|
-
|
|
193
158
|
return VirtualScroll;
|
|
194
159
|
}();
|
|
195
|
-
|
|
196
160
|
export default VirtualScroll;
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-dropdowns',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1666682238,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
11
11
|
};
|
|
@@ -4,51 +4,37 @@ 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.AutoCompleteVue2 = exports.AutoComplete = void 0;
|
|
23
|
-
|
|
18
|
+
exports.AutoCompleteVue2 = exports.AutoComplete = 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
|
-
|
|
31
25
|
var SearchBar_1 = require("./../common/SearchBar");
|
|
32
|
-
|
|
33
26
|
var ListContainer_1 = require("./../common/ListContainer");
|
|
34
|
-
|
|
35
27
|
var List_1 = require("./../common/List");
|
|
36
|
-
|
|
37
28
|
var DropDownBase_1 = require("../common/DropDownBase");
|
|
38
|
-
|
|
39
29
|
var ClearButton_1 = require("../common/ClearButton");
|
|
40
|
-
|
|
41
30
|
var utils_1 = require("../common/utils");
|
|
42
|
-
|
|
43
31
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
44
|
-
|
|
45
32
|
var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
|
|
46
|
-
|
|
33
|
+
roundedMap = kendo_vue_common_1.kendoThemeMaps.roundedMap;
|
|
47
34
|
var VALIDATION_MESSAGE = 'Please enter a valid value!';
|
|
48
35
|
/**
|
|
49
36
|
* @hidden
|
|
50
37
|
*/
|
|
51
|
-
|
|
52
38
|
var AutoCompleteVue2 = {
|
|
53
39
|
name: 'KendoAutoComplete',
|
|
54
40
|
model: {
|
|
@@ -187,8 +173,8 @@ var AutoCompleteVue2 = {
|
|
|
187
173
|
};
|
|
188
174
|
},
|
|
189
175
|
mounted: function mounted() {
|
|
190
|
-
this.hasMounted = true;
|
|
191
|
-
|
|
176
|
+
this.hasMounted = true;
|
|
177
|
+
// @ts-ignore
|
|
192
178
|
this.input = this.v3 ? this.inputRef.input : this.$refs.input.input;
|
|
193
179
|
this.base.wrapper = (0, kendo_vue_common_1.getRef)(this, 'kendoAnchor', this.anchor);
|
|
194
180
|
this.element = (0, kendo_vue_common_1.getRef)(this, 'kendoAnchor', this.anchor);
|
|
@@ -211,7 +197,7 @@ var AutoCompleteVue2 = {
|
|
|
211
197
|
},
|
|
212
198
|
updated: function updated() {
|
|
213
199
|
var _a = this.$props.dataItems,
|
|
214
|
-
|
|
200
|
+
dataItems = _a === void 0 ? [] : _a;
|
|
215
201
|
var focusedIndex = this.focusedIndex();
|
|
216
202
|
var focusedItem = dataItems[focusedIndex];
|
|
217
203
|
var dataChanged = this.prevData !== dataItems;
|
|
@@ -220,18 +206,15 @@ var AutoCompleteVue2 = {
|
|
|
220
206
|
var prevOpened = this.prevOpened !== undefined ? this.prevOpened : this.prevCurrentOpened;
|
|
221
207
|
var opening = !prevOpened && opened;
|
|
222
208
|
var list = this.$refs.list;
|
|
223
|
-
|
|
224
209
|
if (list) {
|
|
225
210
|
// @ts-ignore
|
|
226
|
-
this.base.vs.list = list.list;
|
|
227
|
-
|
|
211
|
+
this.base.vs.list = list.list;
|
|
212
|
+
// @ts-ignore
|
|
228
213
|
this.base.list = list.list;
|
|
229
214
|
}
|
|
230
|
-
|
|
231
215
|
if (dataItems.length && (opened && (focusedItemChanged || dataChanged) || opening)) {
|
|
232
216
|
this.base.scrollToItem(focusedIndex);
|
|
233
217
|
}
|
|
234
|
-
|
|
235
218
|
this.setValidity();
|
|
236
219
|
},
|
|
237
220
|
computed: {
|
|
@@ -256,7 +239,6 @@ var AutoCompleteVue2 = {
|
|
|
256
239
|
},
|
|
257
240
|
computedValue: function computedValue() {
|
|
258
241
|
var value;
|
|
259
|
-
|
|
260
242
|
if (this.valueDuringOnChange !== undefined) {
|
|
261
243
|
value = this.valueDuringOnChange;
|
|
262
244
|
} else if (this.$props.value !== undefined) {
|
|
@@ -268,7 +250,6 @@ var AutoCompleteVue2 = {
|
|
|
268
250
|
} else if (this.$props.defaultValue !== undefined) {
|
|
269
251
|
value = this.$props.defaultValue;
|
|
270
252
|
}
|
|
271
|
-
|
|
272
253
|
return value;
|
|
273
254
|
},
|
|
274
255
|
primitiveValue: function primitiveValue() {
|
|
@@ -287,17 +268,16 @@ var AutoCompleteVue2 = {
|
|
|
287
268
|
},
|
|
288
269
|
handleItemSelect: function handleItemSelect(index, state) {
|
|
289
270
|
var _a = this.$props.dataItems,
|
|
290
|
-
|
|
271
|
+
dataItems = _a === void 0 ? [] : _a;
|
|
291
272
|
var newText = (0, utils_1.getItemValue)(dataItems[index], this.$props.textField);
|
|
292
273
|
this.triggerOnChange(newText, state);
|
|
293
274
|
},
|
|
294
275
|
itemFocus: function itemFocus(index, state) {
|
|
295
276
|
var _a = this.$props,
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
277
|
+
_b = _a.dataItems,
|
|
278
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
279
|
+
textField = _a.textField;
|
|
299
280
|
var focusedItem = dataItems[index];
|
|
300
|
-
|
|
301
281
|
if (!(0, utils_1.areSame)(this.$data.focusedItem, focusedItem, textField)) {
|
|
302
282
|
state.data.focusedItem = focusedItem;
|
|
303
283
|
}
|
|
@@ -307,13 +287,12 @@ var AutoCompleteVue2 = {
|
|
|
307
287
|
},
|
|
308
288
|
onNavigate: function onNavigate(state, keyCode) {
|
|
309
289
|
var _this = this;
|
|
310
|
-
|
|
311
290
|
var typedText = this.computedValue();
|
|
312
291
|
var _a = this.$props,
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
292
|
+
_b = _a.dataItems,
|
|
293
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
294
|
+
textField = _a.textField,
|
|
295
|
+
focusedItemIndex = _a.focusedItemIndex;
|
|
317
296
|
var focusedIndex = this.$data.focusedItem !== undefined ? dataItems.findIndex(function (i) {
|
|
318
297
|
return (0, utils_1.areSame)(i, _this.$data.focusedItem, textField);
|
|
319
298
|
}) : focusedItemIndex ? focusedItemIndex(dataItems, typedText, textField) : dataItems.indexOf((0, utils_1.getFocusedItem)(dataItems, typedText, textField));
|
|
@@ -323,34 +302,28 @@ var AutoCompleteVue2 = {
|
|
|
323
302
|
max: dataItems.length - 1,
|
|
324
303
|
min: 0
|
|
325
304
|
});
|
|
326
|
-
|
|
327
305
|
if (newFocused !== undefined) {
|
|
328
306
|
this.itemFocus(newFocused, state);
|
|
329
307
|
}
|
|
330
|
-
|
|
331
308
|
this.applyState(state);
|
|
332
309
|
},
|
|
333
|
-
|
|
334
310
|
/**
|
|
335
311
|
* @hidden
|
|
336
312
|
*/
|
|
337
313
|
applyInputValue: function applyInputValue(value, state, eventKey) {
|
|
338
314
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
339
315
|
var _a = this.$props,
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
316
|
+
_b = _a.dataItems,
|
|
317
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
318
|
+
textField = _a.textField;
|
|
343
319
|
this.suggested = '';
|
|
344
|
-
|
|
345
320
|
if (opened && eventKey === kendo_vue_common_1.Keys.enter) {
|
|
346
321
|
var newValue = (0, utils_1.getItemValue)(dataItems[this.focusedIndex(value)], textField);
|
|
347
322
|
this.triggerOnChange(newValue, state);
|
|
348
323
|
}
|
|
349
|
-
|
|
350
324
|
if (opened) {
|
|
351
325
|
this.togglePopup(state);
|
|
352
326
|
}
|
|
353
|
-
|
|
354
327
|
this.applyState(state);
|
|
355
328
|
},
|
|
356
329
|
setValidity: function setValidity() {
|
|
@@ -376,14 +349,12 @@ var AutoCompleteVue2 = {
|
|
|
376
349
|
var deleting = prevUserInput && prevUserInput.length > value.length;
|
|
377
350
|
var suggest = this.$props.suggest;
|
|
378
351
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
379
|
-
|
|
380
352
|
if (suggest !== undefined && suggest !== false) {
|
|
381
353
|
if (deletedSuggestion || deleting || !selectionAtEnd) {
|
|
382
354
|
this.suggested = '';
|
|
383
355
|
} else {
|
|
384
356
|
this.suggestValue(value);
|
|
385
357
|
}
|
|
386
|
-
|
|
387
358
|
var newValue = value + this.suggested;
|
|
388
359
|
var suggestion = {
|
|
389
360
|
userInput: value,
|
|
@@ -396,11 +367,9 @@ var AutoCompleteVue2 = {
|
|
|
396
367
|
this.suggested = '';
|
|
397
368
|
this.triggerOnChange(value, state);
|
|
398
369
|
}
|
|
399
|
-
|
|
400
370
|
if (!opened && value || opened && !value) {
|
|
401
371
|
this.togglePopup(state);
|
|
402
372
|
}
|
|
403
|
-
|
|
404
373
|
state.data.focusedItem = undefined;
|
|
405
374
|
this.applyState(state);
|
|
406
375
|
},
|
|
@@ -412,15 +381,12 @@ var AutoCompleteVue2 = {
|
|
|
412
381
|
var newValue = '';
|
|
413
382
|
this.suggested = '';
|
|
414
383
|
this.triggerOnChange(newValue, state);
|
|
415
|
-
|
|
416
384
|
if (this.$data.focusedItem !== undefined) {
|
|
417
385
|
state.data.focusedItem = undefined;
|
|
418
386
|
}
|
|
419
|
-
|
|
420
387
|
if (opened) {
|
|
421
388
|
this.togglePopup(state);
|
|
422
389
|
}
|
|
423
|
-
|
|
424
390
|
this.applyState(state);
|
|
425
391
|
},
|
|
426
392
|
onInputKeyDown: function onInputKeyDown(event) {
|
|
@@ -429,13 +395,11 @@ var AutoCompleteVue2 = {
|
|
|
429
395
|
var state = this.base.initState();
|
|
430
396
|
var value = this.computedValue();
|
|
431
397
|
state.event = event;
|
|
432
|
-
|
|
433
398
|
var preventDefault = function preventDefault() {
|
|
434
399
|
if (opened) {
|
|
435
400
|
event.preventDefault();
|
|
436
401
|
}
|
|
437
402
|
};
|
|
438
|
-
|
|
439
403
|
if (keyCode === kendo_vue_common_1.Keys.enter || opened && keyCode === kendo_vue_common_1.Keys.esc || event.altKey && keyCode === kendo_vue_common_1.Keys.up) {
|
|
440
404
|
preventDefault();
|
|
441
405
|
this.applyInputValue(event.currentTarget.value, state, event.keyCode);
|
|
@@ -464,9 +428,8 @@ var AutoCompleteVue2 = {
|
|
|
464
428
|
triggerOnChange: function triggerOnChange(newValue, state, eventArgs) {
|
|
465
429
|
if (this.computedValue() === newValue && !eventArgs) {
|
|
466
430
|
return;
|
|
467
|
-
}
|
|
468
|
-
|
|
469
|
-
|
|
431
|
+
}
|
|
432
|
+
// @ts-ignore
|
|
470
433
|
state.data.currentValue = newValue;
|
|
471
434
|
this.valueDuringOnChange = newValue;
|
|
472
435
|
state.events.push(__assign({
|
|
@@ -479,17 +442,14 @@ var AutoCompleteVue2 = {
|
|
|
479
442
|
},
|
|
480
443
|
suggestValue: function suggestValue(value) {
|
|
481
444
|
this.suggested = '';
|
|
482
|
-
|
|
483
445
|
if (value) {
|
|
484
446
|
var _a = this.$props,
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
447
|
+
_b = _a.dataItems,
|
|
448
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
449
|
+
textField = _a.textField;
|
|
488
450
|
var suggestedItem = dataItems[(0, utils_1.itemIndexStartsWith)(dataItems, value, textField)];
|
|
489
|
-
|
|
490
451
|
if (suggestedItem) {
|
|
491
452
|
var suggestedText = (0, utils_1.getItemValue)(suggestedItem, textField);
|
|
492
|
-
|
|
493
453
|
if (value.toLowerCase() !== suggestedText.toLowerCase()) {
|
|
494
454
|
this.suggested = suggestedText.substring(value.length);
|
|
495
455
|
}
|
|
@@ -498,12 +458,11 @@ var AutoCompleteVue2 = {
|
|
|
498
458
|
},
|
|
499
459
|
focusedIndex: function focusedIndex(value) {
|
|
500
460
|
var _this = this;
|
|
501
|
-
|
|
502
461
|
var _a = this.$props,
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
462
|
+
_b = _a.dataItems,
|
|
463
|
+
dataItems = _b === void 0 ? [] : _b,
|
|
464
|
+
textField = _a.textField,
|
|
465
|
+
focusedItemIndex = _a.focusedItemIndex;
|
|
507
466
|
var inputValue = value !== undefined ? value : this.computedValue();
|
|
508
467
|
return this.$data.focusedItem !== undefined ? dataItems.findIndex(function (i) {
|
|
509
468
|
return (0, utils_1.areSame)(i, _this.$data.focusedItem, textField);
|
|
@@ -515,18 +474,17 @@ var AutoCompleteVue2 = {
|
|
|
515
474
|
},
|
|
516
475
|
render: function render(createElement) {
|
|
517
476
|
var _a;
|
|
518
|
-
|
|
519
477
|
var h = gh || createElement;
|
|
520
478
|
var _b = this.$props,
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
479
|
+
dir = _b.dir,
|
|
480
|
+
disabled = _b.disabled,
|
|
481
|
+
label = _b.label,
|
|
482
|
+
size = _b.size,
|
|
483
|
+
rounded = _b.rounded,
|
|
484
|
+
fillMode = _b.fillMode,
|
|
485
|
+
style = _b.style,
|
|
486
|
+
loading = _b.loading,
|
|
487
|
+
suggest = _b.suggest;
|
|
530
488
|
var isValid = !this.$props.validityStyles || this.validity().valid;
|
|
531
489
|
var focused = this.currentFocused;
|
|
532
490
|
var base = this.base;
|
|
@@ -537,20 +495,18 @@ var AutoCompleteVue2 = {
|
|
|
537
495
|
animate: true,
|
|
538
496
|
height: '200px'
|
|
539
497
|
}, this.$props.popupSettings);
|
|
540
|
-
|
|
541
498
|
if (typeof suggest === 'string') {
|
|
542
499
|
this.suggested = suggest;
|
|
543
500
|
}
|
|
544
|
-
|
|
545
501
|
var renderSearchBar = function renderSearchBar(searchValue, searchId) {
|
|
546
502
|
var _this = this;
|
|
547
|
-
|
|
548
503
|
var _a = this.$props,
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
504
|
+
placeholder = _a.placeholder,
|
|
505
|
+
tabIndex = _a.tabIndex,
|
|
506
|
+
readonly = _a.readonly;
|
|
552
507
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
553
|
-
return (
|
|
508
|
+
return (
|
|
509
|
+
// @ts-ignore function children
|
|
554
510
|
h(SearchBar_1.SearchBar, {
|
|
555
511
|
id: searchId,
|
|
556
512
|
attrs: this.v3 ? undefined : {
|
|
@@ -602,16 +558,16 @@ var AutoCompleteVue2 = {
|
|
|
602
558
|
})
|
|
603
559
|
);
|
|
604
560
|
};
|
|
605
|
-
|
|
606
561
|
var renderList = function renderList() {
|
|
607
562
|
var _a = this.$props,
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
563
|
+
textField = _a.textField,
|
|
564
|
+
_b = _a.dataItems,
|
|
565
|
+
dataItems = _b === void 0 ? [] : _b;
|
|
611
566
|
var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
|
|
612
567
|
var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
|
|
613
568
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
614
|
-
return (
|
|
569
|
+
return (
|
|
570
|
+
// @ts-ignore
|
|
615
571
|
h(List_1.List, {
|
|
616
572
|
id: base.listBoxId,
|
|
617
573
|
attrs: this.v3 ? undefined : {
|
|
@@ -653,12 +609,9 @@ var AutoCompleteVue2 = {
|
|
|
653
609
|
})
|
|
654
610
|
);
|
|
655
611
|
};
|
|
656
|
-
|
|
657
612
|
var renderListContainer = function renderListContainer() {
|
|
658
613
|
var _this2 = this;
|
|
659
|
-
|
|
660
614
|
var _a;
|
|
661
|
-
|
|
662
615
|
var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
|
|
663
616
|
var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
|
|
664
617
|
var header = kendo_vue_common_1.getTemplate.call(this, {
|
|
@@ -671,7 +624,8 @@ var AutoCompleteVue2 = {
|
|
|
671
624
|
});
|
|
672
625
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
673
626
|
var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
|
|
674
|
-
return (
|
|
627
|
+
return (
|
|
628
|
+
// @ts-ignore function children
|
|
675
629
|
h(ListContainer_1.ListContainer, {
|
|
676
630
|
onMousedown: function onMousedown(e) {
|
|
677
631
|
return e.preventDefault();
|
|
@@ -713,7 +667,6 @@ var AutoCompleteVue2 = {
|
|
|
713
667
|
}, [footer])])
|
|
714
668
|
);
|
|
715
669
|
};
|
|
716
|
-
|
|
717
670
|
var renderClearButton = function renderClearButton(cbutton) {
|
|
718
671
|
if (cbutton) {
|
|
719
672
|
// @ts-ignore function children
|
|
@@ -725,20 +678,16 @@ var AutoCompleteVue2 = {
|
|
|
725
678
|
key: "clearbutton"
|
|
726
679
|
});
|
|
727
680
|
}
|
|
728
|
-
|
|
729
681
|
return h("span");
|
|
730
682
|
};
|
|
731
|
-
|
|
732
683
|
var renderLoading = function renderLoading(cloading) {
|
|
733
684
|
if (cloading) {
|
|
734
685
|
return h("span", {
|
|
735
686
|
"class": "k-icon k-input-loading-icon k-i-loading"
|
|
736
687
|
});
|
|
737
688
|
}
|
|
738
|
-
|
|
739
689
|
return h("span");
|
|
740
690
|
};
|
|
741
|
-
|
|
742
691
|
var autoComplete = h("span", {
|
|
743
692
|
"class": (0, kendo_vue_common_1.classNames)('k-autocomplete 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-focus'] = focused && !disabled, _a['k-loading'] = loading, _a['k-required'] = this.required, _a['k-disabled'] = disabled, _a)),
|
|
744
693
|
ref: (0, kendo_vue_common_1.setRef)(this, 'kendoAnchor', this.anchor),
|
|
@@ -771,6 +720,5 @@ exports.AutoCompleteVue2 = AutoCompleteVue2;
|
|
|
771
720
|
/**
|
|
772
721
|
* @hidden
|
|
773
722
|
*/
|
|
774
|
-
|
|
775
723
|
var AutoComplete = AutoCompleteVue2;
|
|
776
724
|
exports.AutoComplete = AutoComplete;
|