@progress/kendo-vue-dropdowns 2.7.3-dev.202201070829 → 2.8.0-dev.202201131525
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.d.ts +5 -6
- package/dist/es/AutoComplete/AutoComplete.js +63 -29
- package/dist/es/AutoComplete/AutoCompleteProps.d.ts +39 -0
- package/dist/es/ComboBox/ComboBox.d.ts +5 -6
- package/dist/es/ComboBox/ComboBox.js +96 -78
- package/dist/es/ComboBox/ComboBoxProps.d.ts +39 -0
- package/dist/es/DropDownList/DropDownList.d.ts +5 -6
- package/dist/es/DropDownList/DropDownList.js +182 -153
- package/dist/es/DropDownList/DropDownListProps.d.ts +43 -0
- package/dist/es/MultiSelect/MultiSelect.d.ts +5 -6
- package/dist/es/MultiSelect/MultiSelect.js +106 -78
- package/dist/es/MultiSelect/MultiSelectProps.d.ts +53 -0
- package/dist/es/MultiSelect/TagList.d.ts +8 -4
- package/dist/es/MultiSelect/TagList.js +60 -11
- package/dist/es/additionalTypes.ts +7 -1
- package/dist/es/common/ClearButton.d.ts +5 -6
- package/dist/es/common/ClearButton.js +7 -5
- package/dist/es/common/DropDownBase.d.ts +4 -5
- package/dist/es/common/List.d.ts +7 -4
- package/dist/es/common/List.js +21 -6
- package/dist/es/common/ListContainer.d.ts +5 -6
- package/dist/es/common/ListContainer.js +7 -4
- package/dist/es/common/ListDefaultItem.d.ts +5 -6
- package/dist/es/common/ListDefaultItem.js +7 -4
- package/dist/es/common/ListFilter.d.ts +8 -6
- package/dist/es/common/ListFilter.js +50 -7
- package/dist/es/common/ListItem.d.ts +5 -6
- package/dist/es/common/ListItem.js +17 -9
- package/dist/es/common/SearchBar.d.ts +6 -6
- package/dist/es/common/SearchBar.js +13 -13
- package/dist/es/common/VirtualScroll.js +6 -4
- package/dist/es/main.d.ts +5 -5
- package/dist/es/main.js +5 -5
- package/dist/es/package-metadata.js +1 -1
- package/dist/npm/AutoComplete/AutoComplete.d.ts +5 -6
- package/dist/npm/AutoComplete/AutoComplete.js +64 -30
- package/dist/npm/AutoComplete/AutoCompleteProps.d.ts +39 -0
- package/dist/npm/ComboBox/ComboBox.d.ts +5 -6
- package/dist/npm/ComboBox/ComboBox.js +99 -79
- package/dist/npm/ComboBox/ComboBoxProps.d.ts +39 -0
- package/dist/npm/DropDownList/DropDownList.d.ts +5 -6
- package/dist/npm/DropDownList/DropDownList.js +185 -154
- package/dist/npm/DropDownList/DropDownListProps.d.ts +43 -0
- package/dist/npm/MultiSelect/MultiSelect.d.ts +5 -6
- package/dist/npm/MultiSelect/MultiSelect.js +108 -79
- package/dist/npm/MultiSelect/MultiSelectProps.d.ts +53 -0
- package/dist/npm/MultiSelect/TagList.d.ts +8 -4
- package/dist/npm/MultiSelect/TagList.js +60 -10
- package/dist/npm/additionalTypes.ts +7 -1
- package/dist/npm/common/ClearButton.d.ts +5 -6
- package/dist/npm/common/ClearButton.js +9 -7
- package/dist/npm/common/DropDownBase.d.ts +4 -5
- package/dist/npm/common/List.d.ts +7 -4
- package/dist/npm/common/List.js +21 -5
- package/dist/npm/common/ListContainer.d.ts +5 -6
- package/dist/npm/common/ListContainer.js +9 -6
- package/dist/npm/common/ListDefaultItem.d.ts +5 -6
- package/dist/npm/common/ListDefaultItem.js +9 -6
- package/dist/npm/common/ListFilter.d.ts +8 -6
- package/dist/npm/common/ListFilter.js +54 -9
- package/dist/npm/common/ListItem.d.ts +5 -6
- package/dist/npm/common/ListItem.js +18 -10
- package/dist/npm/common/SearchBar.d.ts +6 -6
- package/dist/npm/common/SearchBar.js +15 -15
- package/dist/npm/common/VirtualScroll.js +6 -4
- package/dist/npm/main.d.ts +5 -5
- package/dist/npm/main.js +5 -5
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +5 -4
|
@@ -19,7 +19,7 @@ var __assign = undefined && undefined.__assign || function () {
|
|
|
19
19
|
Object.defineProperty(exports, "__esModule", {
|
|
20
20
|
value: true
|
|
21
21
|
});
|
|
22
|
-
exports.
|
|
22
|
+
exports.DropDownListVue2 = exports.DropDownList = void 0; // @ts-ignore
|
|
23
23
|
|
|
24
24
|
var Vue = require("vue");
|
|
25
25
|
|
|
@@ -29,6 +29,11 @@ var ref = allVue.ref;
|
|
|
29
29
|
|
|
30
30
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
31
31
|
|
|
32
|
+
var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
|
|
33
|
+
|
|
34
|
+
var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap,
|
|
35
|
+
roundedMap = kendo_vue_common_1.kendoThemeMaps.roundedMap;
|
|
36
|
+
|
|
32
37
|
var ListContainer_1 = require("../common/ListContainer");
|
|
33
38
|
|
|
34
39
|
var ListFilter_1 = require("../common/ListFilter");
|
|
@@ -46,13 +51,14 @@ var VALIDATION_MESSAGE = 'Please select a value from the list!';
|
|
|
46
51
|
* Represents the default `DropDownList` component.
|
|
47
52
|
*/
|
|
48
53
|
|
|
49
|
-
var
|
|
54
|
+
var DropDownListVue2 = {
|
|
50
55
|
name: 'KendoDropDownList',
|
|
51
56
|
model: {
|
|
52
57
|
event: 'changemodel'
|
|
53
58
|
},
|
|
54
59
|
props: {
|
|
55
60
|
id: String,
|
|
61
|
+
title: String,
|
|
56
62
|
dataItemKey: {
|
|
57
63
|
type: [Object, String]
|
|
58
64
|
},
|
|
@@ -150,7 +156,28 @@ var DropDownList = {
|
|
|
150
156
|
default: undefined
|
|
151
157
|
},
|
|
152
158
|
ariaLabelledBy: String,
|
|
153
|
-
ariaDescribedBy: String
|
|
159
|
+
ariaDescribedBy: String,
|
|
160
|
+
rounded: {
|
|
161
|
+
type: String,
|
|
162
|
+
default: 'medium',
|
|
163
|
+
validator: function validator(value) {
|
|
164
|
+
return ['small', 'medium', 'large', 'full'].includes(value);
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
fillMode: {
|
|
168
|
+
type: String,
|
|
169
|
+
default: 'solid',
|
|
170
|
+
validator: function validator(value) {
|
|
171
|
+
return ['solid', 'flat', 'outline'].includes(value);
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
size: {
|
|
175
|
+
type: String,
|
|
176
|
+
default: 'medium',
|
|
177
|
+
validator: function validator(value) {
|
|
178
|
+
return ['small', 'medium', 'large'].includes(value);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
154
181
|
},
|
|
155
182
|
data: function data() {
|
|
156
183
|
return {
|
|
@@ -222,7 +249,7 @@ var DropDownList = {
|
|
|
222
249
|
mounted: function mounted() {
|
|
223
250
|
this.hasMounted = true;
|
|
224
251
|
this.select = this.v3 ? this.selectRef : this.$refs.select;
|
|
225
|
-
this.base.wrapper = this.v3 ? this.
|
|
252
|
+
this.base.wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this.anchor];
|
|
226
253
|
this.base.didMount();
|
|
227
254
|
this.setValidity();
|
|
228
255
|
},
|
|
@@ -256,8 +283,9 @@ var DropDownList = {
|
|
|
256
283
|
this.filterInput = filterInput;
|
|
257
284
|
}
|
|
258
285
|
|
|
259
|
-
if (
|
|
260
|
-
|
|
286
|
+
if (list && dataItems.length) {
|
|
287
|
+
// @ts-ignore
|
|
288
|
+
this.base.vs.scrollerRef(list.$el);
|
|
261
289
|
}
|
|
262
290
|
|
|
263
291
|
if (!this.$props.popupSettings.animate) {
|
|
@@ -319,10 +347,10 @@ var DropDownList = {
|
|
|
319
347
|
get: function get() {
|
|
320
348
|
var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
|
|
321
349
|
return {
|
|
322
|
-
'k-
|
|
323
|
-
'k-
|
|
324
|
-
'k-
|
|
325
|
-
'k-
|
|
350
|
+
'k-floating-label-container': true,
|
|
351
|
+
'k-focus': this.currentFocused,
|
|
352
|
+
'k-empty': !this.computedValue(),
|
|
353
|
+
'k-invalid': !isValid && isValid !== undefined,
|
|
326
354
|
'k-rtl': this.$props.dir === 'rtl'
|
|
327
355
|
};
|
|
328
356
|
}
|
|
@@ -700,18 +728,23 @@ var DropDownList = {
|
|
|
700
728
|
}
|
|
701
729
|
},
|
|
702
730
|
render: function render(createElement) {
|
|
731
|
+
var _a;
|
|
732
|
+
|
|
703
733
|
var _this = this;
|
|
704
734
|
|
|
705
735
|
var h = gh || createElement;
|
|
706
|
-
var
|
|
707
|
-
style =
|
|
708
|
-
className =
|
|
709
|
-
label =
|
|
710
|
-
dir =
|
|
711
|
-
|
|
712
|
-
virtual =
|
|
736
|
+
var _b = this.$props,
|
|
737
|
+
style = _b.style,
|
|
738
|
+
className = _b.className,
|
|
739
|
+
label = _b.label,
|
|
740
|
+
dir = _b.dir,
|
|
741
|
+
_c = _b.virtual,
|
|
742
|
+
virtual = _c === void 0 ? {
|
|
713
743
|
skip: 0
|
|
714
|
-
} :
|
|
744
|
+
} : _c,
|
|
745
|
+
size = _b.size,
|
|
746
|
+
rounded = _b.rounded,
|
|
747
|
+
fillMode = _b.fillMode;
|
|
715
748
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
716
749
|
var text = utils_1.getItemValue(this.computedValue(), this.$props.textField);
|
|
717
750
|
var isValid = !this.$props.validityStyles || this.validity().valid;
|
|
@@ -723,8 +756,35 @@ var DropDownList = {
|
|
|
723
756
|
animate: true,
|
|
724
757
|
height: '200px'
|
|
725
758
|
}, this.$props.popupSettings);
|
|
726
|
-
|
|
727
|
-
|
|
759
|
+
var _d = this.$props,
|
|
760
|
+
dataItemKey = _d.dataItemKey,
|
|
761
|
+
_e = _d.dataItems,
|
|
762
|
+
dataItems = _e === void 0 ? [] : _e,
|
|
763
|
+
disabled = _d.disabled,
|
|
764
|
+
tabIndex = _d.tabIndex,
|
|
765
|
+
loading = _d.loading,
|
|
766
|
+
iconClassName = _d.iconClassName;
|
|
767
|
+
var valueRender = kendo_vue_common_1.templateRendering.call(this, this.$props.valueRender, kendo_vue_common_1.getListeners.call(this));
|
|
768
|
+
var focused = this.currentFocused;
|
|
769
|
+
var value = this.computedValue();
|
|
770
|
+
var selectedIndex = dataItems.findIndex(function (i) {
|
|
771
|
+
return utils_1.areSame(i, value, dataItemKey);
|
|
772
|
+
});
|
|
773
|
+
var valueDefaultRendering = h("span", {
|
|
774
|
+
"class": "k-input-inner"
|
|
775
|
+
}, [h("span", {
|
|
776
|
+
"class": "k-input-value-text"
|
|
777
|
+
}, [text])]);
|
|
778
|
+
var valueElement = kendo_vue_common_1.getTemplate.call(this, {
|
|
779
|
+
h: h,
|
|
780
|
+
template: valueRender,
|
|
781
|
+
defaultRendering: valueDefaultRendering,
|
|
782
|
+
additionalProps: __assign({
|
|
783
|
+
value: this.computedValue()
|
|
784
|
+
}, this.$data)
|
|
785
|
+
});
|
|
786
|
+
|
|
787
|
+
var dummySelect = function dummySelect(cvalue) {
|
|
728
788
|
var _this = this;
|
|
729
789
|
/* Dummy component to support forms */
|
|
730
790
|
|
|
@@ -754,97 +814,17 @@ var DropDownList = {
|
|
|
754
814
|
left: '50%'
|
|
755
815
|
}
|
|
756
816
|
}, [h("option", {
|
|
757
|
-
value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined,
|
|
817
|
+
value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined, cvalue) : cvalue : null,
|
|
758
818
|
domProps: this.v3 ? undefined : {
|
|
759
|
-
"value": this.$props.valueMap ? this.$props.valueMap.call(undefined,
|
|
819
|
+
"value": this.$props.valueMap ? this.$props.valueMap.call(undefined, cvalue) : cvalue
|
|
760
820
|
}
|
|
761
821
|
})]);
|
|
762
822
|
};
|
|
763
823
|
|
|
764
|
-
var renderDropDownWrapper = function renderDropDownWrapper() {
|
|
765
|
-
var _this = this;
|
|
766
|
-
|
|
767
|
-
var _a = this.$props,
|
|
768
|
-
dataItemKey = _a.dataItemKey,
|
|
769
|
-
_b = _a.dataItems,
|
|
770
|
-
dataItems = _b === void 0 ? [] : _b,
|
|
771
|
-
disabled = _a.disabled,
|
|
772
|
-
tabIndex = _a.tabIndex,
|
|
773
|
-
loading = _a.loading,
|
|
774
|
-
iconClassName = _a.iconClassName;
|
|
775
|
-
var valueRender = kendo_vue_common_1.templateRendering.call(this, this.$props.valueRender, kendo_vue_common_1.getListeners.call(this));
|
|
776
|
-
var focused = this.currentFocused;
|
|
777
|
-
var value = this.computedValue();
|
|
778
|
-
var selectedIndex = dataItems.findIndex(function (i) {
|
|
779
|
-
return utils_1.areSame(i, value, dataItemKey);
|
|
780
|
-
});
|
|
781
|
-
var valueDefaultRendering = h("span", {
|
|
782
|
-
"class": "k-input"
|
|
783
|
-
}, [text]);
|
|
784
|
-
var valueElement = kendo_vue_common_1.getTemplate.call(this, {
|
|
785
|
-
h: h,
|
|
786
|
-
template: valueRender,
|
|
787
|
-
defaultRendering: valueDefaultRendering,
|
|
788
|
-
additionalProps: __assign({
|
|
789
|
-
value: this.computedValue()
|
|
790
|
-
}, this.$data)
|
|
791
|
-
});
|
|
792
|
-
return h("span", {
|
|
793
|
-
ref: this.v3 ? function (el) {
|
|
794
|
-
_this.baseWrapperRef = el;
|
|
795
|
-
} : 'baseWrapper',
|
|
796
|
-
role: 'listbox',
|
|
797
|
-
attrs: this.v3 ? undefined : {
|
|
798
|
-
role: 'listbox',
|
|
799
|
-
tabIndex: disabled ? undefined : tabIndex,
|
|
800
|
-
accessKey: this.$props.accessKey,
|
|
801
|
-
"aria-disabled": disabled || undefined,
|
|
802
|
-
"aria-haspopup": true,
|
|
803
|
-
"aria-expanded": opened || false,
|
|
804
|
-
"aria-owns": this.base.listBoxId,
|
|
805
|
-
"aria-activedescendant": 'option-' + this.base.guid + '-' + (selectedIndex + virtual.skip),
|
|
806
|
-
"aria-label": this.$props.label,
|
|
807
|
-
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
808
|
-
"aria-describedby": this.$props.ariaDescribedBy
|
|
809
|
-
},
|
|
810
|
-
tabIndex: disabled ? undefined : tabIndex,
|
|
811
|
-
accessKey: this.$props.accessKey,
|
|
812
|
-
"class": kendo_vue_common_1.classNames('k-dropdown-wrap', {
|
|
813
|
-
'k-state-focused': focused,
|
|
814
|
-
'k-state-disabled': disabled
|
|
815
|
-
}),
|
|
816
|
-
style: this.$props.style,
|
|
817
|
-
onKeydown: this.handleKeyDown,
|
|
818
|
-
on: this.v3 ? undefined : {
|
|
819
|
-
"keydown": this.handleKeyDown,
|
|
820
|
-
"keypress": this.handleKeyPress,
|
|
821
|
-
"click": disabled ? kendo_vue_common_1.noop : this.handleWrapperClick
|
|
822
|
-
},
|
|
823
|
-
onKeypress: this.handleKeyPress,
|
|
824
|
-
onClick: disabled ? kendo_vue_common_1.noop : this.handleWrapperClick,
|
|
825
|
-
"aria-disabled": disabled || undefined,
|
|
826
|
-
"aria-haspopup": true,
|
|
827
|
-
"aria-expanded": opened || false,
|
|
828
|
-
"aria-owns": this.base.listBoxId,
|
|
829
|
-
"aria-activedescendant": 'option-' + this.base.guid + '-' + (selectedIndex + virtual.skip),
|
|
830
|
-
"aria-label": this.$props.label,
|
|
831
|
-
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
832
|
-
"aria-describedby": this.$props.ariaDescribedBy
|
|
833
|
-
}, [valueElement, h("span", {
|
|
834
|
-
"class": "k-select"
|
|
835
|
-
}, [h("span", {
|
|
836
|
-
"class": kendo_vue_common_1.classNames('k-icon', iconClassName, {
|
|
837
|
-
'k-i-arrow-s': !loading && !iconClassName,
|
|
838
|
-
'k-i-loading': loading && !iconClassName
|
|
839
|
-
})
|
|
840
|
-
})]), dummySelect.call(this, value)]);
|
|
841
|
-
};
|
|
842
|
-
|
|
843
824
|
var renderDefaultItem = function renderDefaultItem() {
|
|
844
825
|
var _a = this.$props,
|
|
845
826
|
textField = _a.textField,
|
|
846
|
-
defaultItem = _a.defaultItem
|
|
847
|
-
dataItemKey = _a.dataItemKey;
|
|
827
|
+
defaultItem = _a.defaultItem;
|
|
848
828
|
return defaultItem !== undefined && // @ts-ignore
|
|
849
829
|
h(ListDefaultItem_1.ListDefaultItem, {
|
|
850
830
|
defaultItem: defaultItem,
|
|
@@ -864,16 +844,14 @@ var DropDownList = {
|
|
|
864
844
|
};
|
|
865
845
|
|
|
866
846
|
var renderList = function renderList() {
|
|
867
|
-
var
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
textField = _a.textField,
|
|
871
|
-
dataItemKey = _a.dataItemKey;
|
|
847
|
+
var _this2 = this;
|
|
848
|
+
|
|
849
|
+
var textField = this.$props.textField;
|
|
872
850
|
var itemRender = kendo_vue_common_1.templateRendering.call(this, this.$props.itemRender, kendo_vue_common_1.getListeners.call(this));
|
|
873
851
|
var listNoDataRender = kendo_vue_common_1.templateRendering.call(this, this.$props.listNoDataRender, kendo_vue_common_1.getListeners.call(this));
|
|
874
852
|
var skip = virtual.skip;
|
|
875
853
|
var translate = "translateY(" + vs.translate + "px)";
|
|
876
|
-
return (// @ts-ignore
|
|
854
|
+
return (// @ts-ignore function children
|
|
877
855
|
h(List_1.List, {
|
|
878
856
|
id: this.base.listBoxId,
|
|
879
857
|
attrs: this.v3 ? undefined : {
|
|
@@ -885,13 +863,10 @@ var DropDownList = {
|
|
|
885
863
|
textField: textField,
|
|
886
864
|
valueField: dataItemKey,
|
|
887
865
|
optionsGuid: this.base.guid,
|
|
888
|
-
wrapperStyle:
|
|
866
|
+
wrapperStyle: {
|
|
889
867
|
maxHeight: popupSettings.height
|
|
890
|
-
} : {
|
|
891
|
-
float: 'left',
|
|
892
|
-
width: '100%'
|
|
893
868
|
},
|
|
894
|
-
wrapperCssClass:
|
|
869
|
+
wrapperCssClass: 'k-list-content',
|
|
895
870
|
listStyle: vs.enabled ? {
|
|
896
871
|
transform: translate
|
|
897
872
|
} : undefined,
|
|
@@ -907,13 +882,10 @@ var DropDownList = {
|
|
|
907
882
|
valueField: dataItemKey,
|
|
908
883
|
optionsGuid: this.base.guid,
|
|
909
884
|
ref: 'list',
|
|
910
|
-
wrapperStyle:
|
|
885
|
+
wrapperStyle: {
|
|
911
886
|
maxHeight: popupSettings.height
|
|
912
|
-
} : {
|
|
913
|
-
float: 'left',
|
|
914
|
-
width: '100%'
|
|
915
887
|
},
|
|
916
|
-
wrapperCssClass:
|
|
888
|
+
wrapperCssClass: 'k-list-content',
|
|
917
889
|
listStyle: vs.enabled ? {
|
|
918
890
|
transform: translate
|
|
919
891
|
} : undefined,
|
|
@@ -921,11 +893,15 @@ var DropDownList = {
|
|
|
921
893
|
skip: skip,
|
|
922
894
|
onListclick: this.handleItemClick,
|
|
923
895
|
on: this.v3 ? undefined : {
|
|
924
|
-
"listclick": this.handleItemClick
|
|
896
|
+
"listclick": this.handleItemClick,
|
|
897
|
+
"scroll": vs.scrollHandler
|
|
925
898
|
},
|
|
926
899
|
itemRender: itemRender,
|
|
927
|
-
noDataRender: listNoDataRender
|
|
928
|
-
|
|
900
|
+
noDataRender: listNoDataRender,
|
|
901
|
+
onScroll: vs.scrollHandler
|
|
902
|
+
}, this.v3 ? function () {
|
|
903
|
+
return [renderScrollElement.call(_this2)];
|
|
904
|
+
} : [renderScrollElement.call(_this2)])
|
|
929
905
|
);
|
|
930
906
|
};
|
|
931
907
|
|
|
@@ -935,7 +911,10 @@ var DropDownList = {
|
|
|
935
911
|
h(ListFilter_1.ListFilter, {
|
|
936
912
|
value: filterText,
|
|
937
913
|
attrs: this.v3 ? undefined : {
|
|
938
|
-
value: filterText
|
|
914
|
+
value: filterText,
|
|
915
|
+
size: this.$props.size,
|
|
916
|
+
rounded: this.$props.rounded,
|
|
917
|
+
fillMode: this.$props.fillMode
|
|
939
918
|
},
|
|
940
919
|
ref: 'filterInput',
|
|
941
920
|
onChange: this.handleListFilterChange,
|
|
@@ -943,23 +922,11 @@ var DropDownList = {
|
|
|
943
922
|
"change": this.handleListFilterChange,
|
|
944
923
|
"keydown": this.handleKeyDown
|
|
945
924
|
},
|
|
946
|
-
onKeydown: this.handleKeyDown
|
|
925
|
+
onKeydown: this.handleKeyDown,
|
|
926
|
+
size: this.$props.size,
|
|
927
|
+
rounded: this.$props.rounded,
|
|
928
|
+
fillMode: this.$props.fillMode
|
|
947
929
|
});
|
|
948
|
-
}; // Common rendering
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
var renderScrollWrapper = function renderScrollWrapper(children) {
|
|
952
|
-
return vs.enabled ? h("div", {
|
|
953
|
-
onScroll: vs.scrollHandler,
|
|
954
|
-
on: this.v3 ? undefined : {
|
|
955
|
-
"scroll": vs.scrollHandler
|
|
956
|
-
},
|
|
957
|
-
ref: 'scroller',
|
|
958
|
-
style: {
|
|
959
|
-
height: popupSettings.height,
|
|
960
|
-
overflowY: 'scroll'
|
|
961
|
-
}
|
|
962
|
-
}, [children]) : children;
|
|
963
930
|
};
|
|
964
931
|
|
|
965
932
|
var renderScrollElement = function renderScrollElement() {
|
|
@@ -970,7 +937,9 @@ var DropDownList = {
|
|
|
970
937
|
};
|
|
971
938
|
|
|
972
939
|
var renderListContainer = function renderListContainer() {
|
|
973
|
-
var
|
|
940
|
+
var _this3 = this;
|
|
941
|
+
|
|
942
|
+
var _a;
|
|
974
943
|
|
|
975
944
|
var headerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
|
|
976
945
|
var footerTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.footer, kendo_vue_common_1.getListeners.call(this));
|
|
@@ -998,7 +967,8 @@ var DropDownList = {
|
|
|
998
967
|
width: popupWidth // @ts-ignore
|
|
999
968
|
,
|
|
1000
969
|
popupSettings: {
|
|
1001
|
-
|
|
970
|
+
popupClass: kendo_vue_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
|
|
971
|
+
className: popupSettings.className,
|
|
1002
972
|
animate: popupSettings.animate,
|
|
1003
973
|
anchor: this.anchor,
|
|
1004
974
|
show: opened
|
|
@@ -1006,7 +976,8 @@ var DropDownList = {
|
|
|
1006
976
|
},
|
|
1007
977
|
width: popupWidth,
|
|
1008
978
|
popupSettings: {
|
|
1009
|
-
|
|
979
|
+
popupClass: kendo_vue_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
|
|
980
|
+
className: popupSettings.className,
|
|
1010
981
|
animate: popupSettings.animate,
|
|
1011
982
|
anchor: this.anchor,
|
|
1012
983
|
show: opened
|
|
@@ -1015,8 +986,16 @@ var DropDownList = {
|
|
|
1015
986
|
onClose: this.onPopupClosed,
|
|
1016
987
|
onBlur: this.handleBlur
|
|
1017
988
|
}, this.v3 ? function () {
|
|
1018
|
-
return [renderListFilter.call(
|
|
1019
|
-
|
|
989
|
+
return [renderListFilter.call(_this3), renderDefaultItem.call(_this3), header && h("div", {
|
|
990
|
+
"class": "k-list-header"
|
|
991
|
+
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
992
|
+
"class": "k-list-footer"
|
|
993
|
+
}, [footer])];
|
|
994
|
+
} : [renderListFilter.call(_this3), renderDefaultItem.call(_this3), header && h("div", {
|
|
995
|
+
"class": "k-list-header"
|
|
996
|
+
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
997
|
+
"class": "k-list-footer"
|
|
998
|
+
}, [footer])])
|
|
1020
999
|
);
|
|
1021
1000
|
};
|
|
1022
1001
|
|
|
@@ -1032,25 +1011,77 @@ var DropDownList = {
|
|
|
1032
1011
|
ref: this.v3 ? function (el) {
|
|
1033
1012
|
_this.kendoAnchorRef = el;
|
|
1034
1013
|
} : this.anchor,
|
|
1035
|
-
"class": kendo_vue_common_1.classNames('k-
|
|
1036
|
-
'k-state-invalid': !isValid
|
|
1037
|
-
}, className),
|
|
1014
|
+
"class": kendo_vue_common_1.classNames('k-dropdownlist k-picker', className, (_a = {}, _a["k-picker-" + (sizeMap[size] || size)] = size, _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded, _a["k-picker-" + fillMode] = fillMode, _a['k-focus'] = focused, _a['k-disabled'] = disabled, _a['k-invalid'] = !isValid, _a['k-valid'] = isValid, _a['k-loading'] = loading, _a['k-required'] = this.required, _a)),
|
|
1038
1015
|
style: !label ? style : __assign(__assign({}, style), {
|
|
1039
1016
|
width: undefined
|
|
1040
1017
|
}),
|
|
1041
1018
|
dir: dir,
|
|
1042
1019
|
attrs: this.v3 ? undefined : {
|
|
1043
|
-
dir: dir
|
|
1020
|
+
dir: dir,
|
|
1021
|
+
tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
|
|
1022
|
+
accessKey: this.$props.accessKey,
|
|
1023
|
+
role: 'listbox',
|
|
1024
|
+
"aria-disabled": disabled || undefined,
|
|
1025
|
+
"aria-haspopup": true,
|
|
1026
|
+
"aria-expanded": opened || false,
|
|
1027
|
+
"aria-owns": this.base.listBoxId,
|
|
1028
|
+
"aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
|
|
1029
|
+
"aria-label": this.$props.label,
|
|
1030
|
+
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
1031
|
+
"aria-describedby": this.$props.ariaDescribedBy,
|
|
1032
|
+
id: this.$props.id,
|
|
1033
|
+
title: this.$props.title
|
|
1044
1034
|
},
|
|
1045
1035
|
onMousedown: opened ? utils_1.preventDefaultNonInputs : kendo_vue_common_1.noop,
|
|
1046
1036
|
on: this.v3 ? undefined : {
|
|
1047
1037
|
"mousedown": opened ? utils_1.preventDefaultNonInputs : kendo_vue_common_1.noop,
|
|
1048
1038
|
"focusin": this.handleFocus,
|
|
1049
|
-
"focusout": this.handleBlur
|
|
1039
|
+
"focusout": this.handleBlur,
|
|
1040
|
+
"keydown": this.handleKeyDown,
|
|
1041
|
+
"keypress": this.handleKeyPress,
|
|
1042
|
+
"click": disabled ? kendo_vue_common_1.noop : this.handleWrapperClick
|
|
1050
1043
|
},
|
|
1051
1044
|
onFocusin: this.handleFocus,
|
|
1052
|
-
onFocusout: this.handleBlur
|
|
1053
|
-
|
|
1045
|
+
onFocusout: this.handleBlur,
|
|
1046
|
+
tabIndex: kendo_vue_common_1.getTabIndex(tabIndex, disabled),
|
|
1047
|
+
accessKey: this.$props.accessKey,
|
|
1048
|
+
onKeydown: this.handleKeyDown,
|
|
1049
|
+
onKeypress: this.handleKeyPress,
|
|
1050
|
+
role: 'listbox',
|
|
1051
|
+
onClick: disabled ? kendo_vue_common_1.noop : this.handleWrapperClick,
|
|
1052
|
+
"aria-disabled": disabled || undefined,
|
|
1053
|
+
"aria-haspopup": true,
|
|
1054
|
+
"aria-expanded": opened || false,
|
|
1055
|
+
"aria-owns": this.base.listBoxId,
|
|
1056
|
+
"aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
|
|
1057
|
+
"aria-label": this.$props.label,
|
|
1058
|
+
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
1059
|
+
"aria-describedby": this.$props.ariaDescribedBy,
|
|
1060
|
+
id: this.$props.id,
|
|
1061
|
+
title: this.$props.title
|
|
1062
|
+
}, [valueElement, loading && h("span", {
|
|
1063
|
+
"class": "k-icon k-i-loading",
|
|
1064
|
+
key: "loading"
|
|
1065
|
+
}), // @ts-ignore
|
|
1066
|
+
h(kendo_vue_buttons_1.Button, {
|
|
1067
|
+
size: size,
|
|
1068
|
+
attrs: this.v3 ? undefined : {
|
|
1069
|
+
size: size,
|
|
1070
|
+
fillMode: fillMode,
|
|
1071
|
+
iconClass: kendo_vue_common_1.classNames('k-icon k-i-arrow-s', iconClassName)
|
|
1072
|
+
},
|
|
1073
|
+
fillMode: fillMode,
|
|
1074
|
+
"class": 'k-input-button',
|
|
1075
|
+
iconClass: kendo_vue_common_1.classNames('k-icon k-i-arrow-s', iconClassName),
|
|
1076
|
+
onMousedown: function onMousedown(e) {
|
|
1077
|
+
return e.preventDefault();
|
|
1078
|
+
},
|
|
1079
|
+
on: this.v3 ? undefined : {
|
|
1080
|
+
"mousedown": function onMousedown(e) {
|
|
1081
|
+
return e.preventDefault();
|
|
1082
|
+
}
|
|
1083
|
+
}
|
|
1084
|
+
}), dummySelect.call(this, value), renderListContainer.call(this)]);
|
|
1054
1085
|
return label ? h("span", {
|
|
1055
1086
|
"class": this.spanClassNames,
|
|
1056
1087
|
onFocusin: this.handleFocus,
|
|
@@ -1074,6 +1105,6 @@ var DropDownList = {
|
|
|
1074
1105
|
}, [this.$props.label]) : null]) : dropdownlist;
|
|
1075
1106
|
}
|
|
1076
1107
|
};
|
|
1077
|
-
exports.
|
|
1078
|
-
var
|
|
1079
|
-
exports.
|
|
1108
|
+
exports.DropDownListVue2 = DropDownListVue2;
|
|
1109
|
+
var DropDownList = DropDownListVue2;
|
|
1110
|
+
exports.DropDownList = DropDownList;
|
|
@@ -44,6 +44,10 @@ export interface DropDownListProps extends FormComponentProps {
|
|
|
44
44
|
* Specifies the id of the component.
|
|
45
45
|
*/
|
|
46
46
|
id?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Specifies the title of the component.
|
|
49
|
+
*/
|
|
50
|
+
title?: string;
|
|
47
51
|
/**
|
|
48
52
|
* 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).
|
|
49
53
|
* For example these elements could contain error or hint message.
|
|
@@ -221,4 +225,43 @@ export interface DropDownListProps extends FormComponentProps {
|
|
|
221
225
|
* Useful when the DropDownList is placed inside a toolbar which needs to handle left and right keys.
|
|
222
226
|
*/
|
|
223
227
|
leftRightKeysNavigation?: boolean;
|
|
228
|
+
/**
|
|
229
|
+
* Configures the `size` of the DropDownList.
|
|
230
|
+
*
|
|
231
|
+
* The available options are:
|
|
232
|
+
* - small
|
|
233
|
+
* - medium
|
|
234
|
+
* - large
|
|
235
|
+
* - null—Does not set a size `class`.
|
|
236
|
+
*
|
|
237
|
+
* @default `medium`
|
|
238
|
+
*/
|
|
239
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
240
|
+
/**
|
|
241
|
+
* Configures the `roundness` of the DropDownList.
|
|
242
|
+
*
|
|
243
|
+
* The available options are:
|
|
244
|
+
* - small
|
|
245
|
+
* - medium
|
|
246
|
+
* - large
|
|
247
|
+
* - circle
|
|
248
|
+
* - full
|
|
249
|
+
* - null—Does not set a rounded `class`.
|
|
250
|
+
*
|
|
251
|
+
* @default `medium`
|
|
252
|
+
*/
|
|
253
|
+
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
254
|
+
/**
|
|
255
|
+
* Configures the `fillMode` of the DropDownList.
|
|
256
|
+
*
|
|
257
|
+
* The available options are:
|
|
258
|
+
* - solid
|
|
259
|
+
* - outline
|
|
260
|
+
* - flat
|
|
261
|
+
* - link
|
|
262
|
+
* - null—Does not set a fillMode `class`.
|
|
263
|
+
*
|
|
264
|
+
* @default `solid`
|
|
265
|
+
*/
|
|
266
|
+
fillMode?: null | 'solid' | 'outline' | 'flat' | string;
|
|
224
267
|
}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
2
1
|
declare type DefaultData<V> = object | ((this: V) => MultiSelectData);
|
|
3
2
|
declare type DefaultMethods<V> = {
|
|
4
3
|
[key: string]: (this: V, ...args: any[]) => any;
|
|
5
4
|
};
|
|
6
5
|
import { FormComponentValidity } from '@progress/kendo-vue-common';
|
|
7
|
-
import { DefineComponent } from '../additionalTypes';
|
|
6
|
+
import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
|
|
8
7
|
import { TagData } from './TagList';
|
|
9
8
|
import { MultiSelectProps } from './MultiSelectProps';
|
|
10
9
|
import { DropDownStateBase, InternalState, ActiveDescendant } from './../common/settings';
|
|
@@ -103,11 +102,11 @@ export interface MultiSelectComputed {
|
|
|
103
102
|
/**
|
|
104
103
|
* @hidden
|
|
105
104
|
*/
|
|
106
|
-
export interface MultiSelectAll extends MultiSelectMethods, MultiSelectState, MultiSelectData, MultiSelectComputed,
|
|
105
|
+
export interface MultiSelectAll extends MultiSelectMethods, MultiSelectState, MultiSelectData, MultiSelectComputed, Vue2type {
|
|
107
106
|
}
|
|
108
107
|
/**
|
|
109
108
|
* Represents the default `MultiSelect` component.
|
|
110
109
|
*/
|
|
111
|
-
declare let
|
|
112
|
-
declare const
|
|
113
|
-
export { MultiSelect,
|
|
110
|
+
declare let MultiSelectVue2: ComponentOptions<Vue2type, DefaultData<MultiSelectData>, DefaultMethods<MultiSelectAll>, MultiSelectComputed, RecordPropsDefinition<MultiSelectProps>>;
|
|
111
|
+
declare const MultiSelect: DefineComponent<MultiSelectProps, any, MultiSelectData, MultiSelectComputed, MultiSelectMethods, {}, {}, {}, string, MultiSelectProps, MultiSelectProps, {}>;
|
|
112
|
+
export { MultiSelect, MultiSelectVue2 };
|