@progress/kendo-vue-dropdowns 3.4.3-dev.202207120901 → 3.4.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.
- package/dist/cdn/js/kendo-vue-dropdowns.js +1 -1
- package/dist/es/AutoComplete/AutoComplete.js +9 -3
- package/dist/es/ComboBox/ComboBox.js +21 -4
- package/dist/es/DropDownList/DropDownList.js +1 -1
- package/dist/es/MultiSelect/MultiSelect.js +1 -1
- package/dist/es/MultiSelect/TagList.js +1 -1
- package/dist/es/common/ClearButton.js +1 -1
- package/dist/es/common/List.js +3 -1
- package/dist/es/common/ListContainer.js +1 -1
- package/dist/es/common/ListDefaultItem.js +1 -1
- package/dist/es/common/ListFilter.js +1 -1
- package/dist/es/common/ListItem.js +1 -1
- package/dist/es/common/SearchBar.js +7 -5
- package/dist/es/messages/index.d.ts +5 -0
- package/dist/es/messages/index.js +5 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/npm/AutoComplete/AutoComplete.js +9 -3
- package/dist/npm/ComboBox/ComboBox.js +23 -4
- package/dist/npm/DropDownList/DropDownList.js +1 -1
- package/dist/npm/MultiSelect/MultiSelect.js +1 -1
- package/dist/npm/MultiSelect/TagList.js +1 -1
- package/dist/npm/common/ClearButton.js +1 -1
- package/dist/npm/common/List.js +3 -1
- package/dist/npm/common/ListContainer.js +1 -1
- package/dist/npm/common/ListDefaultItem.js +1 -1
- package/dist/npm/common/ListFilter.js +1 -1
- package/dist/npm/common/ListItem.js +1 -1
- package/dist/npm/common/SearchBar.js +7 -5
- package/dist/npm/messages/index.d.ts +5 -0
- package/dist/npm/messages/index.js +6 -1
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +5 -5
|
@@ -18,7 +18,7 @@ var __assign = this && this.__assign || function () {
|
|
|
18
18
|
import * as Vue from 'vue';
|
|
19
19
|
var allVue = Vue;
|
|
20
20
|
var gh = allVue.h;
|
|
21
|
-
var isV3 = allVue.version[0] === '3';
|
|
21
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
22
22
|
var ref = allVue.ref;
|
|
23
23
|
import { SearchBar } from './../common/SearchBar';
|
|
24
24
|
import { ListContainer } from './../common/ListContainer';
|
|
@@ -412,6 +412,7 @@ var AutoCompleteVue2 = {
|
|
|
412
412
|
var keyCode = event.keyCode;
|
|
413
413
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
414
414
|
var state = this.base.initState();
|
|
415
|
+
var value = this.computedValue();
|
|
415
416
|
state.event = event;
|
|
416
417
|
|
|
417
418
|
var preventDefault = function preventDefault() {
|
|
@@ -420,12 +421,17 @@ var AutoCompleteVue2 = {
|
|
|
420
421
|
}
|
|
421
422
|
};
|
|
422
423
|
|
|
423
|
-
if (keyCode === Keys.enter || keyCode === Keys.esc) {
|
|
424
|
+
if (keyCode === Keys.enter || opened && keyCode === Keys.esc || event.altKey && keyCode === Keys.up) {
|
|
424
425
|
preventDefault();
|
|
425
426
|
this.applyInputValue(event.currentTarget.value, state, event.keyCode);
|
|
426
|
-
} else if (keyCode === Keys.up || keyCode === Keys.down) {
|
|
427
|
+
} else if (!event.altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
|
|
427
428
|
preventDefault();
|
|
428
429
|
this.onNavigate(state, keyCode);
|
|
430
|
+
} else if (!opened && keyCode === Keys.esc) {
|
|
431
|
+
this.clearButtonClick(event);
|
|
432
|
+
} else if (!opened && value && event.altKey && keyCode === Keys.down) {
|
|
433
|
+
this.togglePopup(state);
|
|
434
|
+
this.applyState(state);
|
|
429
435
|
}
|
|
430
436
|
},
|
|
431
437
|
handleBlur: function handleBlur(event) {
|
|
@@ -18,8 +18,9 @@ var __assign = this && this.__assign || function () {
|
|
|
18
18
|
import * as Vue from 'vue';
|
|
19
19
|
var allVue = Vue;
|
|
20
20
|
var gh = allVue.h;
|
|
21
|
-
var isV3 = allVue.version[0] === '3';
|
|
21
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
22
22
|
var ref = allVue.ref;
|
|
23
|
+
var inject = allVue.inject;
|
|
23
24
|
import DropDownBase from '../common/DropDownBase';
|
|
24
25
|
import { guid, classNames, Keys, templateRendering, getListeners, getTemplate, kendoThemeMaps, getRef, setRef } from '@progress/kendo-vue-common';
|
|
25
26
|
import { Button as KButton } from '@progress/kendo-vue-buttons';
|
|
@@ -30,6 +31,8 @@ import { SearchBar } from '../common/SearchBar';
|
|
|
30
31
|
import { ListContainer } from '../common/ListContainer';
|
|
31
32
|
import { List } from '../common/List';
|
|
32
33
|
import { ClearButton } from '../common/ClearButton';
|
|
34
|
+
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
35
|
+
import { expandButton, messages } from '../messages';
|
|
33
36
|
var VALIDATION_MESSAGE = 'Please enter a valid value!';
|
|
34
37
|
/**
|
|
35
38
|
* @hidden
|
|
@@ -170,6 +173,11 @@ var ComboBoxVue2 = {
|
|
|
170
173
|
}
|
|
171
174
|
}
|
|
172
175
|
},
|
|
176
|
+
inject: {
|
|
177
|
+
kendoLocalizationService: {
|
|
178
|
+
default: null
|
|
179
|
+
}
|
|
180
|
+
},
|
|
173
181
|
data: function data() {
|
|
174
182
|
return {
|
|
175
183
|
hasMounted: false,
|
|
@@ -204,11 +212,13 @@ var ComboBoxVue2 = {
|
|
|
204
212
|
var inputRef = ref(null);
|
|
205
213
|
var elementRef = ref(null);
|
|
206
214
|
var kendoAnchorRef = ref(null);
|
|
215
|
+
var kendoLocalizationService = inject('kendoLocalizationService', {});
|
|
207
216
|
return {
|
|
208
217
|
v3: v3,
|
|
209
218
|
inputRef: inputRef,
|
|
210
219
|
elementRef: elementRef,
|
|
211
|
-
kendoAnchorRef: kendoAnchorRef
|
|
220
|
+
kendoAnchorRef: kendoAnchorRef,
|
|
221
|
+
kendoLocalizationService: kendoLocalizationService
|
|
212
222
|
};
|
|
213
223
|
},
|
|
214
224
|
mounted: function mounted() {
|
|
@@ -587,11 +597,15 @@ var ComboBoxVue2 = {
|
|
|
587
597
|
} else if (keyCode === Keys.enter) {
|
|
588
598
|
event.preventDefault();
|
|
589
599
|
this.applyValueOnEnter(event.currentTarget.value, state);
|
|
600
|
+
} else if (keyCode === Keys.esc) {
|
|
601
|
+
togglePopup();
|
|
602
|
+
}
|
|
603
|
+
} else {
|
|
604
|
+
if (event.altKey && keyCode === Keys.down) {
|
|
605
|
+
togglePopup();
|
|
590
606
|
} else if (keyCode === Keys.esc) {
|
|
591
607
|
this.applyValueOnRejectSuggestions(event.currentTarget.value, state);
|
|
592
608
|
}
|
|
593
|
-
} else if (event.altKey && keyCode === Keys.down) {
|
|
594
|
-
togglePopup();
|
|
595
609
|
}
|
|
596
610
|
},
|
|
597
611
|
inputOnChange: function inputOnChange(event) {
|
|
@@ -745,6 +759,7 @@ var ComboBoxVue2 = {
|
|
|
745
759
|
animate: true,
|
|
746
760
|
height: '200px'
|
|
747
761
|
}, this.$props.popupSettings);
|
|
762
|
+
var ariaLabelExpandButton = provideLocalizationService(this).toLanguageString(expandButton, messages[expandButton]);
|
|
748
763
|
vs.enabled = virtual !== undefined;
|
|
749
764
|
|
|
750
765
|
if (virtual !== undefined) {
|
|
@@ -995,12 +1010,14 @@ var ComboBoxVue2 = {
|
|
|
995
1010
|
attrs: this.v3 ? undefined : {
|
|
996
1011
|
type: "button",
|
|
997
1012
|
tabIndex: -1,
|
|
1013
|
+
"aria-label": ariaLabelExpandButton,
|
|
998
1014
|
size: size,
|
|
999
1015
|
fillMode: fillMode,
|
|
1000
1016
|
rounded: null,
|
|
1001
1017
|
iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
|
|
1002
1018
|
},
|
|
1003
1019
|
tabIndex: -1,
|
|
1020
|
+
"aria-label": ariaLabelExpandButton,
|
|
1004
1021
|
size: size,
|
|
1005
1022
|
fillMode: fillMode,
|
|
1006
1023
|
rounded: null,
|
|
@@ -18,7 +18,7 @@ var __assign = this && this.__assign || function () {
|
|
|
18
18
|
import * as Vue from 'vue';
|
|
19
19
|
var allVue = Vue;
|
|
20
20
|
var gh = allVue.h;
|
|
21
|
-
var isV3 = allVue.version[0] === '3';
|
|
21
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
22
22
|
var ref = allVue.ref;
|
|
23
23
|
import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate, kendoThemeMaps, getTabIndex, setRef, getRef } from '@progress/kendo-vue-common';
|
|
24
24
|
import { Button as KButton } from '@progress/kendo-vue-buttons';
|
|
@@ -32,7 +32,7 @@ var __spreadArrays = this && this.__spreadArrays || function () {
|
|
|
32
32
|
import * as Vue from 'vue';
|
|
33
33
|
var allVue = Vue;
|
|
34
34
|
var gh = allVue.h;
|
|
35
|
-
var isV3 = allVue.version[0] === '3';
|
|
35
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
36
36
|
var ref = allVue.ref;
|
|
37
37
|
import { classNames, Keys, guid, templateRendering, getListeners, getTemplate, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
|
|
38
38
|
var sizeMap = kendoThemeMaps.sizeMap,
|
|
@@ -19,7 +19,7 @@ import { getTemplate, kendoThemeMaps } from '@progress/kendo-vue-common';
|
|
|
19
19
|
import * as Vue from 'vue';
|
|
20
20
|
var allVue = Vue;
|
|
21
21
|
var gh = allVue.h;
|
|
22
|
-
var isV3 = allVue.version[0] === '3';
|
|
22
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
23
23
|
var ref = allVue.ref;
|
|
24
24
|
|
|
25
25
|
var preventDefault = function preventDefault(event) {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import * as Vue from 'vue';
|
|
3
3
|
var allVue = Vue;
|
|
4
4
|
var gh = allVue.h;
|
|
5
|
-
var isV3 = allVue.version[0] === '3';
|
|
5
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
6
|
var inject = allVue.inject;
|
|
7
7
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
8
8
|
import { messages, clear } from '../messages';
|
package/dist/es/common/List.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import * as Vue from 'vue';
|
|
3
3
|
var allVue = Vue;
|
|
4
4
|
var gh = allVue.h;
|
|
5
|
-
var isV3 = allVue.version[0] === '3';
|
|
5
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
6
|
var ref = allVue.ref;
|
|
7
7
|
var inject = allVue.inject;
|
|
8
8
|
import { ListItem } from './ListItem';
|
|
@@ -156,9 +156,11 @@ var ListVue2 = {
|
|
|
156
156
|
attrs: this.v3 ? undefined : {
|
|
157
157
|
id: id,
|
|
158
158
|
role: "listbox",
|
|
159
|
+
"aria-live": "polite",
|
|
159
160
|
"aria-hidden": !show ? true : undefined
|
|
160
161
|
},
|
|
161
162
|
role: "listbox",
|
|
163
|
+
"aria-live": "polite",
|
|
162
164
|
"aria-hidden": !show ? true : undefined,
|
|
163
165
|
"class": 'k-list-ul',
|
|
164
166
|
ref: setRef(this, 'list'),
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import * as Vue from 'vue';
|
|
3
3
|
var allVue = Vue;
|
|
4
4
|
var gh = allVue.h;
|
|
5
|
-
var isV3 = allVue.version[0] === '3';
|
|
5
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
6
|
import { Popup } from '@progress/kendo-vue-popup';
|
|
7
7
|
import { getDefaultSlots } from '@progress/kendo-vue-common';
|
|
8
8
|
/**
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import * as Vue from 'vue';
|
|
3
3
|
var allVue = Vue;
|
|
4
4
|
var gh = allVue.h;
|
|
5
|
-
var isV3 = allVue.version[0] === '3';
|
|
5
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
6
|
import { classNames } from '@progress/kendo-vue-common';
|
|
7
7
|
import { getItemValue } from './utils';
|
|
8
8
|
/**
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import * as Vue from 'vue';
|
|
3
3
|
var allVue = Vue;
|
|
4
4
|
var gh = allVue.h;
|
|
5
|
-
var isV3 = allVue.version[0] === '3';
|
|
5
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
6
|
var ref = allVue.ref;
|
|
7
7
|
import { getRef, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
|
|
8
8
|
var sizeMap = kendoThemeMaps.sizeMap,
|
|
@@ -18,7 +18,7 @@ var __assign = this && this.__assign || function () {
|
|
|
18
18
|
import * as Vue from 'vue';
|
|
19
19
|
var allVue = Vue;
|
|
20
20
|
var gh = allVue.h;
|
|
21
|
-
var isV3 = allVue.version[0] === '3';
|
|
21
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
22
22
|
import { classNames, getTemplate } from '@progress/kendo-vue-common';
|
|
23
23
|
import { getItemValue } from './utils';
|
|
24
24
|
/**
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import * as Vue from 'vue';
|
|
3
3
|
var allVue = Vue;
|
|
4
4
|
var gh = allVue.h;
|
|
5
|
-
var isV3 = allVue.version[0] === '3';
|
|
5
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
6
|
var ref = allVue.ref;
|
|
7
7
|
import { canUseDOM, getRef, setRef } from '@progress/kendo-vue-common';
|
|
8
8
|
/**
|
|
@@ -117,15 +117,16 @@ var SearchBarVue2 = {
|
|
|
117
117
|
placeholder: this.$props.placeholder,
|
|
118
118
|
tabindex: this.$props.tabIndex,
|
|
119
119
|
accesskey: this.$props.accessKey,
|
|
120
|
-
role: "
|
|
120
|
+
role: "combobox",
|
|
121
121
|
name: this.$props.name,
|
|
122
122
|
size: this.$props.size ? this.$props.size : 20,
|
|
123
123
|
"aria-disabled": this.$props.disabled || undefined,
|
|
124
124
|
disabled: this.$props.disabled || undefined,
|
|
125
125
|
readonly: this.$props.readOnly || undefined,
|
|
126
|
+
"aria-autocomplete": this.$props.suggestedText ? 'both' : 'list',
|
|
126
127
|
"aria-haspopup": "listbox",
|
|
127
128
|
"aria-expanded": this.$props.expanded || false,
|
|
128
|
-
"aria-
|
|
129
|
+
"aria-controls": this.$props.owns,
|
|
129
130
|
"aria-activedescendant": this.$props.activedescendant,
|
|
130
131
|
"aria-describedby": this.$props.describedby,
|
|
131
132
|
"aria-labelledby": this.$props.ariaLabelledBy
|
|
@@ -137,7 +138,7 @@ var SearchBarVue2 = {
|
|
|
137
138
|
"class": "k-input-inner",
|
|
138
139
|
tabindex: this.$props.tabIndex,
|
|
139
140
|
accesskey: this.$props.accessKey,
|
|
140
|
-
role: "
|
|
141
|
+
role: "combobox",
|
|
141
142
|
name: this.$props.name,
|
|
142
143
|
value: this.v3 ? this.$props.value : null,
|
|
143
144
|
domProps: this.v3 ? undefined : {
|
|
@@ -158,9 +159,10 @@ var SearchBarVue2 = {
|
|
|
158
159
|
"aria-disabled": this.$props.disabled || undefined,
|
|
159
160
|
disabled: this.$props.disabled || undefined,
|
|
160
161
|
readonly: this.$props.readOnly || undefined,
|
|
162
|
+
"aria-autocomplete": this.$props.suggestedText ? 'both' : 'list',
|
|
161
163
|
"aria-haspopup": "listbox",
|
|
162
164
|
"aria-expanded": this.$props.expanded || false,
|
|
163
|
-
"aria-
|
|
165
|
+
"aria-controls": this.$props.owns,
|
|
164
166
|
"aria-activedescendant": this.$props.activedescendant,
|
|
165
167
|
"aria-describedby": this.$props.describedby,
|
|
166
168
|
"aria-labelledby": this.$props.ariaLabelledBy
|
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
* @hidden
|
|
3
3
|
*/
|
|
4
4
|
export declare const nodata = "dropdowns.nodata";
|
|
5
|
+
/**
|
|
6
|
+
* @hidden
|
|
7
|
+
*/
|
|
8
|
+
export declare const expandButton = "dropdowns.expandbutton";
|
|
5
9
|
/**
|
|
6
10
|
* @hidden
|
|
7
11
|
*/
|
|
@@ -11,5 +15,6 @@ export declare const clear = "dropdowns.clear";
|
|
|
11
15
|
*/
|
|
12
16
|
export declare const messages: {
|
|
13
17
|
"dropdowns.clear": string;
|
|
18
|
+
"dropdowns.expandbutton": string;
|
|
14
19
|
"dropdowns.nodata": string;
|
|
15
20
|
};
|
|
@@ -3,6 +3,10 @@ var _a;
|
|
|
3
3
|
* @hidden
|
|
4
4
|
*/
|
|
5
5
|
export var nodata = 'dropdowns.nodata';
|
|
6
|
+
/**
|
|
7
|
+
* @hidden
|
|
8
|
+
*/
|
|
9
|
+
export var expandButton = 'dropdowns.expandbutton';
|
|
6
10
|
/**
|
|
7
11
|
* @hidden
|
|
8
12
|
*/
|
|
@@ -12,5 +16,6 @@ export var clear = 'dropdowns.clear';
|
|
|
12
16
|
*/
|
|
13
17
|
export var messages = (_a = {},
|
|
14
18
|
_a[clear] = 'clear',
|
|
19
|
+
_a[expandButton] = 'expand button',
|
|
15
20
|
_a[nodata] = 'NO DATA FOUND.',
|
|
16
21
|
_a);
|
|
@@ -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: 1658485332,
|
|
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
|
};
|
|
@@ -25,7 +25,7 @@ var Vue = require("vue");
|
|
|
25
25
|
|
|
26
26
|
var allVue = Vue;
|
|
27
27
|
var gh = allVue.h;
|
|
28
|
-
var isV3 = allVue.version[0] === '3';
|
|
28
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
29
29
|
var ref = allVue.ref;
|
|
30
30
|
|
|
31
31
|
var SearchBar_1 = require("./../common/SearchBar");
|
|
@@ -427,6 +427,7 @@ var AutoCompleteVue2 = {
|
|
|
427
427
|
var keyCode = event.keyCode;
|
|
428
428
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
429
429
|
var state = this.base.initState();
|
|
430
|
+
var value = this.computedValue();
|
|
430
431
|
state.event = event;
|
|
431
432
|
|
|
432
433
|
var preventDefault = function preventDefault() {
|
|
@@ -435,12 +436,17 @@ var AutoCompleteVue2 = {
|
|
|
435
436
|
}
|
|
436
437
|
};
|
|
437
438
|
|
|
438
|
-
if (keyCode === kendo_vue_common_1.Keys.enter || keyCode === kendo_vue_common_1.Keys.esc) {
|
|
439
|
+
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) {
|
|
439
440
|
preventDefault();
|
|
440
441
|
this.applyInputValue(event.currentTarget.value, state, event.keyCode);
|
|
441
|
-
} else if (keyCode === kendo_vue_common_1.Keys.up || keyCode === kendo_vue_common_1.Keys.down) {
|
|
442
|
+
} else if (!event.altKey && (keyCode === kendo_vue_common_1.Keys.up || keyCode === kendo_vue_common_1.Keys.down)) {
|
|
442
443
|
preventDefault();
|
|
443
444
|
this.onNavigate(state, keyCode);
|
|
445
|
+
} else if (!opened && keyCode === kendo_vue_common_1.Keys.esc) {
|
|
446
|
+
this.clearButtonClick(event);
|
|
447
|
+
} else if (!opened && value && event.altKey && keyCode === kendo_vue_common_1.Keys.down) {
|
|
448
|
+
this.togglePopup(state);
|
|
449
|
+
this.applyState(state);
|
|
444
450
|
}
|
|
445
451
|
},
|
|
446
452
|
handleBlur: function handleBlur(event) {
|
|
@@ -25,8 +25,9 @@ var Vue = require("vue");
|
|
|
25
25
|
|
|
26
26
|
var allVue = Vue;
|
|
27
27
|
var gh = allVue.h;
|
|
28
|
-
var isV3 = allVue.version[0] === '3';
|
|
28
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
29
29
|
var ref = allVue.ref;
|
|
30
|
+
var inject = allVue.inject;
|
|
30
31
|
|
|
31
32
|
var DropDownBase_1 = require("../common/DropDownBase");
|
|
32
33
|
|
|
@@ -47,6 +48,10 @@ var List_1 = require("../common/List");
|
|
|
47
48
|
|
|
48
49
|
var ClearButton_1 = require("../common/ClearButton");
|
|
49
50
|
|
|
51
|
+
var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
|
|
52
|
+
|
|
53
|
+
var messages_1 = require("../messages");
|
|
54
|
+
|
|
50
55
|
var VALIDATION_MESSAGE = 'Please enter a valid value!';
|
|
51
56
|
/**
|
|
52
57
|
* @hidden
|
|
@@ -187,6 +192,11 @@ var ComboBoxVue2 = {
|
|
|
187
192
|
}
|
|
188
193
|
}
|
|
189
194
|
},
|
|
195
|
+
inject: {
|
|
196
|
+
kendoLocalizationService: {
|
|
197
|
+
default: null
|
|
198
|
+
}
|
|
199
|
+
},
|
|
190
200
|
data: function data() {
|
|
191
201
|
return {
|
|
192
202
|
hasMounted: false,
|
|
@@ -221,11 +231,13 @@ var ComboBoxVue2 = {
|
|
|
221
231
|
var inputRef = ref(null);
|
|
222
232
|
var elementRef = ref(null);
|
|
223
233
|
var kendoAnchorRef = ref(null);
|
|
234
|
+
var kendoLocalizationService = inject('kendoLocalizationService', {});
|
|
224
235
|
return {
|
|
225
236
|
v3: v3,
|
|
226
237
|
inputRef: inputRef,
|
|
227
238
|
elementRef: elementRef,
|
|
228
|
-
kendoAnchorRef: kendoAnchorRef
|
|
239
|
+
kendoAnchorRef: kendoAnchorRef,
|
|
240
|
+
kendoLocalizationService: kendoLocalizationService
|
|
229
241
|
};
|
|
230
242
|
},
|
|
231
243
|
mounted: function mounted() {
|
|
@@ -604,11 +616,15 @@ var ComboBoxVue2 = {
|
|
|
604
616
|
} else if (keyCode === kendo_vue_common_1.Keys.enter) {
|
|
605
617
|
event.preventDefault();
|
|
606
618
|
this.applyValueOnEnter(event.currentTarget.value, state);
|
|
619
|
+
} else if (keyCode === kendo_vue_common_1.Keys.esc) {
|
|
620
|
+
togglePopup();
|
|
621
|
+
}
|
|
622
|
+
} else {
|
|
623
|
+
if (event.altKey && keyCode === kendo_vue_common_1.Keys.down) {
|
|
624
|
+
togglePopup();
|
|
607
625
|
} else if (keyCode === kendo_vue_common_1.Keys.esc) {
|
|
608
626
|
this.applyValueOnRejectSuggestions(event.currentTarget.value, state);
|
|
609
627
|
}
|
|
610
|
-
} else if (event.altKey && keyCode === kendo_vue_common_1.Keys.down) {
|
|
611
|
-
togglePopup();
|
|
612
628
|
}
|
|
613
629
|
},
|
|
614
630
|
inputOnChange: function inputOnChange(event) {
|
|
@@ -762,6 +778,7 @@ var ComboBoxVue2 = {
|
|
|
762
778
|
animate: true,
|
|
763
779
|
height: '200px'
|
|
764
780
|
}, this.$props.popupSettings);
|
|
781
|
+
var ariaLabelExpandButton = kendo_vue_intl_1.provideLocalizationService(this).toLanguageString(messages_1.expandButton, messages_1.messages[messages_1.expandButton]);
|
|
765
782
|
vs.enabled = virtual !== undefined;
|
|
766
783
|
|
|
767
784
|
if (virtual !== undefined) {
|
|
@@ -1012,12 +1029,14 @@ var ComboBoxVue2 = {
|
|
|
1012
1029
|
attrs: this.v3 ? undefined : {
|
|
1013
1030
|
type: "button",
|
|
1014
1031
|
tabIndex: -1,
|
|
1032
|
+
"aria-label": ariaLabelExpandButton,
|
|
1015
1033
|
size: size,
|
|
1016
1034
|
fillMode: fillMode,
|
|
1017
1035
|
rounded: null,
|
|
1018
1036
|
iconClass: kendo_vue_common_1.classNames('k-icon k-i-arrow-s', iconClassName)
|
|
1019
1037
|
},
|
|
1020
1038
|
tabIndex: -1,
|
|
1039
|
+
"aria-label": ariaLabelExpandButton,
|
|
1021
1040
|
size: size,
|
|
1022
1041
|
fillMode: fillMode,
|
|
1023
1042
|
rounded: null,
|
|
@@ -25,7 +25,7 @@ var Vue = require("vue");
|
|
|
25
25
|
|
|
26
26
|
var allVue = Vue;
|
|
27
27
|
var gh = allVue.h;
|
|
28
|
-
var isV3 = allVue.version[0] === '3';
|
|
28
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
29
29
|
var ref = allVue.ref;
|
|
30
30
|
|
|
31
31
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
@@ -39,7 +39,7 @@ var Vue = require("vue");
|
|
|
39
39
|
|
|
40
40
|
var allVue = Vue;
|
|
41
41
|
var gh = allVue.h;
|
|
42
|
-
var isV3 = allVue.version[0] === '3';
|
|
42
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
43
43
|
var ref = allVue.ref;
|
|
44
44
|
|
|
45
45
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
@@ -9,7 +9,7 @@ var Vue = require("vue");
|
|
|
9
9
|
|
|
10
10
|
var allVue = Vue;
|
|
11
11
|
var gh = allVue.h;
|
|
12
|
-
var isV3 = allVue.version[0] === '3';
|
|
12
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
13
13
|
var inject = allVue.inject;
|
|
14
14
|
|
|
15
15
|
var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
|
package/dist/npm/common/List.js
CHANGED
|
@@ -9,7 +9,7 @@ var Vue = require("vue");
|
|
|
9
9
|
|
|
10
10
|
var allVue = Vue;
|
|
11
11
|
var gh = allVue.h;
|
|
12
|
-
var isV3 = allVue.version[0] === '3';
|
|
12
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
13
13
|
var ref = allVue.ref;
|
|
14
14
|
var inject = allVue.inject;
|
|
15
15
|
|
|
@@ -169,9 +169,11 @@ var ListVue2 = {
|
|
|
169
169
|
attrs: this.v3 ? undefined : {
|
|
170
170
|
id: id,
|
|
171
171
|
role: "listbox",
|
|
172
|
+
"aria-live": "polite",
|
|
172
173
|
"aria-hidden": !show ? true : undefined
|
|
173
174
|
},
|
|
174
175
|
role: "listbox",
|
|
176
|
+
"aria-live": "polite",
|
|
175
177
|
"aria-hidden": !show ? true : undefined,
|
|
176
178
|
"class": 'k-list-ul',
|
|
177
179
|
ref: kendo_vue_common_1.setRef(this, 'list'),
|
|
@@ -9,7 +9,7 @@ var Vue = require("vue");
|
|
|
9
9
|
|
|
10
10
|
var allVue = Vue;
|
|
11
11
|
var gh = allVue.h;
|
|
12
|
-
var isV3 = allVue.version[0] === '3';
|
|
12
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
13
13
|
var ref = allVue.ref;
|
|
14
14
|
|
|
15
15
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
@@ -9,7 +9,7 @@ var Vue = require("vue");
|
|
|
9
9
|
|
|
10
10
|
var allVue = Vue;
|
|
11
11
|
var gh = allVue.h;
|
|
12
|
-
var isV3 = allVue.version[0] === '3';
|
|
12
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
13
13
|
var ref = allVue.ref;
|
|
14
14
|
|
|
15
15
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
@@ -126,15 +126,16 @@ var SearchBarVue2 = {
|
|
|
126
126
|
placeholder: this.$props.placeholder,
|
|
127
127
|
tabindex: this.$props.tabIndex,
|
|
128
128
|
accesskey: this.$props.accessKey,
|
|
129
|
-
role: "
|
|
129
|
+
role: "combobox",
|
|
130
130
|
name: this.$props.name,
|
|
131
131
|
size: this.$props.size ? this.$props.size : 20,
|
|
132
132
|
"aria-disabled": this.$props.disabled || undefined,
|
|
133
133
|
disabled: this.$props.disabled || undefined,
|
|
134
134
|
readonly: this.$props.readOnly || undefined,
|
|
135
|
+
"aria-autocomplete": this.$props.suggestedText ? 'both' : 'list',
|
|
135
136
|
"aria-haspopup": "listbox",
|
|
136
137
|
"aria-expanded": this.$props.expanded || false,
|
|
137
|
-
"aria-
|
|
138
|
+
"aria-controls": this.$props.owns,
|
|
138
139
|
"aria-activedescendant": this.$props.activedescendant,
|
|
139
140
|
"aria-describedby": this.$props.describedby,
|
|
140
141
|
"aria-labelledby": this.$props.ariaLabelledBy
|
|
@@ -146,7 +147,7 @@ var SearchBarVue2 = {
|
|
|
146
147
|
"class": "k-input-inner",
|
|
147
148
|
tabindex: this.$props.tabIndex,
|
|
148
149
|
accesskey: this.$props.accessKey,
|
|
149
|
-
role: "
|
|
150
|
+
role: "combobox",
|
|
150
151
|
name: this.$props.name,
|
|
151
152
|
value: this.v3 ? this.$props.value : null,
|
|
152
153
|
domProps: this.v3 ? undefined : {
|
|
@@ -167,9 +168,10 @@ var SearchBarVue2 = {
|
|
|
167
168
|
"aria-disabled": this.$props.disabled || undefined,
|
|
168
169
|
disabled: this.$props.disabled || undefined,
|
|
169
170
|
readonly: this.$props.readOnly || undefined,
|
|
171
|
+
"aria-autocomplete": this.$props.suggestedText ? 'both' : 'list',
|
|
170
172
|
"aria-haspopup": "listbox",
|
|
171
173
|
"aria-expanded": this.$props.expanded || false,
|
|
172
|
-
"aria-
|
|
174
|
+
"aria-controls": this.$props.owns,
|
|
173
175
|
"aria-activedescendant": this.$props.activedescendant,
|
|
174
176
|
"aria-describedby": this.$props.describedby,
|
|
175
177
|
"aria-labelledby": this.$props.ariaLabelledBy
|
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
* @hidden
|
|
3
3
|
*/
|
|
4
4
|
export declare const nodata = "dropdowns.nodata";
|
|
5
|
+
/**
|
|
6
|
+
* @hidden
|
|
7
|
+
*/
|
|
8
|
+
export declare const expandButton = "dropdowns.expandbutton";
|
|
5
9
|
/**
|
|
6
10
|
* @hidden
|
|
7
11
|
*/
|
|
@@ -11,5 +15,6 @@ export declare const clear = "dropdowns.clear";
|
|
|
11
15
|
*/
|
|
12
16
|
export declare const messages: {
|
|
13
17
|
"dropdowns.clear": string;
|
|
18
|
+
"dropdowns.expandbutton": string;
|
|
14
19
|
"dropdowns.nodata": string;
|
|
15
20
|
};
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var _a;
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.messages = exports.clear = exports.nodata = void 0;
|
|
4
|
+
exports.messages = exports.clear = exports.expandButton = exports.nodata = void 0;
|
|
5
5
|
/**
|
|
6
6
|
* @hidden
|
|
7
7
|
*/
|
|
8
8
|
exports.nodata = 'dropdowns.nodata';
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
exports.expandButton = 'dropdowns.expandbutton';
|
|
9
13
|
/**
|
|
10
14
|
* @hidden
|
|
11
15
|
*/
|
|
@@ -15,5 +19,6 @@ exports.clear = 'dropdowns.clear';
|
|
|
15
19
|
*/
|
|
16
20
|
exports.messages = (_a = {},
|
|
17
21
|
_a[exports.clear] = 'clear',
|
|
22
|
+
_a[exports.expandButton] = 'expand button',
|
|
18
23
|
_a[exports.nodata] = 'NO DATA FOUND.',
|
|
19
24
|
_a);
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-vue-dropdowns',
|
|
9
9
|
productName: 'Kendo UI for Vue',
|
|
10
10
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1658485332,
|
|
12
12
|
version: '',
|
|
13
13
|
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'
|
|
14
14
|
};
|