@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,10 @@ import * as Vue from 'vue';
|
|
|
19
19
|
var allVue = Vue;
|
|
20
20
|
var gh = allVue.h;
|
|
21
21
|
var ref = allVue.ref;
|
|
22
|
-
import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate } from '@progress/kendo-vue-common';
|
|
22
|
+
import { templateRendering, getListeners, classNames, Keys, guid, noop, getTemplate, kendoThemeMaps, getTabIndex } from '@progress/kendo-vue-common';
|
|
23
|
+
import { Button as KButton } from '@progress/kendo-vue-buttons';
|
|
24
|
+
var sizeMap = kendoThemeMaps.sizeMap,
|
|
25
|
+
roundedMap = kendoThemeMaps.roundedMap;
|
|
23
26
|
import { ListContainer } from '../common/ListContainer';
|
|
24
27
|
import { ListFilter } from '../common/ListFilter';
|
|
25
28
|
import { ListDefaultItem } from '../common/ListDefaultItem';
|
|
@@ -31,13 +34,14 @@ var VALIDATION_MESSAGE = 'Please select a value from the list!';
|
|
|
31
34
|
* Represents the default `DropDownList` component.
|
|
32
35
|
*/
|
|
33
36
|
|
|
34
|
-
var
|
|
37
|
+
var DropDownListVue2 = {
|
|
35
38
|
name: 'KendoDropDownList',
|
|
36
39
|
model: {
|
|
37
40
|
event: 'changemodel'
|
|
38
41
|
},
|
|
39
42
|
props: {
|
|
40
43
|
id: String,
|
|
44
|
+
title: String,
|
|
41
45
|
dataItemKey: {
|
|
42
46
|
type: [Object, String]
|
|
43
47
|
},
|
|
@@ -135,7 +139,28 @@ var DropDownList = {
|
|
|
135
139
|
default: undefined
|
|
136
140
|
},
|
|
137
141
|
ariaLabelledBy: String,
|
|
138
|
-
ariaDescribedBy: String
|
|
142
|
+
ariaDescribedBy: String,
|
|
143
|
+
rounded: {
|
|
144
|
+
type: String,
|
|
145
|
+
default: 'medium',
|
|
146
|
+
validator: function validator(value) {
|
|
147
|
+
return ['small', 'medium', 'large', 'full'].includes(value);
|
|
148
|
+
}
|
|
149
|
+
},
|
|
150
|
+
fillMode: {
|
|
151
|
+
type: String,
|
|
152
|
+
default: 'solid',
|
|
153
|
+
validator: function validator(value) {
|
|
154
|
+
return ['solid', 'flat', 'outline'].includes(value);
|
|
155
|
+
}
|
|
156
|
+
},
|
|
157
|
+
size: {
|
|
158
|
+
type: String,
|
|
159
|
+
default: 'medium',
|
|
160
|
+
validator: function validator(value) {
|
|
161
|
+
return ['small', 'medium', 'large'].includes(value);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
139
164
|
},
|
|
140
165
|
data: function data() {
|
|
141
166
|
return {
|
|
@@ -207,7 +232,7 @@ var DropDownList = {
|
|
|
207
232
|
mounted: function mounted() {
|
|
208
233
|
this.hasMounted = true;
|
|
209
234
|
this.select = this.v3 ? this.selectRef : this.$refs.select;
|
|
210
|
-
this.base.wrapper = this.v3 ? this.
|
|
235
|
+
this.base.wrapper = this.v3 ? this.kendoAnchorRef : this.$refs[this.anchor];
|
|
211
236
|
this.base.didMount();
|
|
212
237
|
this.setValidity();
|
|
213
238
|
},
|
|
@@ -241,8 +266,9 @@ var DropDownList = {
|
|
|
241
266
|
this.filterInput = filterInput;
|
|
242
267
|
}
|
|
243
268
|
|
|
244
|
-
if (
|
|
245
|
-
|
|
269
|
+
if (list && dataItems.length) {
|
|
270
|
+
// @ts-ignore
|
|
271
|
+
this.base.vs.scrollerRef(list.$el);
|
|
246
272
|
}
|
|
247
273
|
|
|
248
274
|
if (!this.$props.popupSettings.animate) {
|
|
@@ -304,10 +330,10 @@ var DropDownList = {
|
|
|
304
330
|
get: function get() {
|
|
305
331
|
var isValid = !this.hasMounted || !this.$props.validityStyles || this.validity().valid;
|
|
306
332
|
return {
|
|
307
|
-
'k-
|
|
308
|
-
'k-
|
|
309
|
-
'k-
|
|
310
|
-
'k-
|
|
333
|
+
'k-floating-label-container': true,
|
|
334
|
+
'k-focus': this.currentFocused,
|
|
335
|
+
'k-empty': !this.computedValue(),
|
|
336
|
+
'k-invalid': !isValid && isValid !== undefined,
|
|
311
337
|
'k-rtl': this.$props.dir === 'rtl'
|
|
312
338
|
};
|
|
313
339
|
}
|
|
@@ -685,18 +711,23 @@ var DropDownList = {
|
|
|
685
711
|
}
|
|
686
712
|
},
|
|
687
713
|
render: function render(createElement) {
|
|
714
|
+
var _a;
|
|
715
|
+
|
|
688
716
|
var _this = this;
|
|
689
717
|
|
|
690
718
|
var h = gh || createElement;
|
|
691
|
-
var
|
|
692
|
-
style =
|
|
693
|
-
className =
|
|
694
|
-
label =
|
|
695
|
-
dir =
|
|
696
|
-
|
|
697
|
-
virtual =
|
|
719
|
+
var _b = this.$props,
|
|
720
|
+
style = _b.style,
|
|
721
|
+
className = _b.className,
|
|
722
|
+
label = _b.label,
|
|
723
|
+
dir = _b.dir,
|
|
724
|
+
_c = _b.virtual,
|
|
725
|
+
virtual = _c === void 0 ? {
|
|
698
726
|
skip: 0
|
|
699
|
-
} :
|
|
727
|
+
} : _c,
|
|
728
|
+
size = _b.size,
|
|
729
|
+
rounded = _b.rounded,
|
|
730
|
+
fillMode = _b.fillMode;
|
|
700
731
|
var opened = this.$props.opened !== undefined ? this.$props.opened : this.currentOpened;
|
|
701
732
|
var text = getItemValue(this.computedValue(), this.$props.textField);
|
|
702
733
|
var isValid = !this.$props.validityStyles || this.validity().valid;
|
|
@@ -708,8 +739,35 @@ var DropDownList = {
|
|
|
708
739
|
animate: true,
|
|
709
740
|
height: '200px'
|
|
710
741
|
}, this.$props.popupSettings);
|
|
711
|
-
|
|
712
|
-
|
|
742
|
+
var _d = this.$props,
|
|
743
|
+
dataItemKey = _d.dataItemKey,
|
|
744
|
+
_e = _d.dataItems,
|
|
745
|
+
dataItems = _e === void 0 ? [] : _e,
|
|
746
|
+
disabled = _d.disabled,
|
|
747
|
+
tabIndex = _d.tabIndex,
|
|
748
|
+
loading = _d.loading,
|
|
749
|
+
iconClassName = _d.iconClassName;
|
|
750
|
+
var valueRender = templateRendering.call(this, this.$props.valueRender, getListeners.call(this));
|
|
751
|
+
var focused = this.currentFocused;
|
|
752
|
+
var value = this.computedValue();
|
|
753
|
+
var selectedIndex = dataItems.findIndex(function (i) {
|
|
754
|
+
return areSame(i, value, dataItemKey);
|
|
755
|
+
});
|
|
756
|
+
var valueDefaultRendering = h("span", {
|
|
757
|
+
"class": "k-input-inner"
|
|
758
|
+
}, [h("span", {
|
|
759
|
+
"class": "k-input-value-text"
|
|
760
|
+
}, [text])]);
|
|
761
|
+
var valueElement = getTemplate.call(this, {
|
|
762
|
+
h: h,
|
|
763
|
+
template: valueRender,
|
|
764
|
+
defaultRendering: valueDefaultRendering,
|
|
765
|
+
additionalProps: __assign({
|
|
766
|
+
value: this.computedValue()
|
|
767
|
+
}, this.$data)
|
|
768
|
+
});
|
|
769
|
+
|
|
770
|
+
var dummySelect = function dummySelect(cvalue) {
|
|
713
771
|
var _this = this;
|
|
714
772
|
/* Dummy component to support forms */
|
|
715
773
|
|
|
@@ -739,97 +797,17 @@ var DropDownList = {
|
|
|
739
797
|
left: '50%'
|
|
740
798
|
}
|
|
741
799
|
}, [h("option", {
|
|
742
|
-
value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined,
|
|
800
|
+
value: this.v3 ? this.$props.valueMap ? this.$props.valueMap.call(undefined, cvalue) : cvalue : null,
|
|
743
801
|
domProps: this.v3 ? undefined : {
|
|
744
|
-
"value": this.$props.valueMap ? this.$props.valueMap.call(undefined,
|
|
802
|
+
"value": this.$props.valueMap ? this.$props.valueMap.call(undefined, cvalue) : cvalue
|
|
745
803
|
}
|
|
746
804
|
})]);
|
|
747
805
|
};
|
|
748
806
|
|
|
749
|
-
var renderDropDownWrapper = function renderDropDownWrapper() {
|
|
750
|
-
var _this = this;
|
|
751
|
-
|
|
752
|
-
var _a = this.$props,
|
|
753
|
-
dataItemKey = _a.dataItemKey,
|
|
754
|
-
_b = _a.dataItems,
|
|
755
|
-
dataItems = _b === void 0 ? [] : _b,
|
|
756
|
-
disabled = _a.disabled,
|
|
757
|
-
tabIndex = _a.tabIndex,
|
|
758
|
-
loading = _a.loading,
|
|
759
|
-
iconClassName = _a.iconClassName;
|
|
760
|
-
var valueRender = templateRendering.call(this, this.$props.valueRender, getListeners.call(this));
|
|
761
|
-
var focused = this.currentFocused;
|
|
762
|
-
var value = this.computedValue();
|
|
763
|
-
var selectedIndex = dataItems.findIndex(function (i) {
|
|
764
|
-
return areSame(i, value, dataItemKey);
|
|
765
|
-
});
|
|
766
|
-
var valueDefaultRendering = h("span", {
|
|
767
|
-
"class": "k-input"
|
|
768
|
-
}, [text]);
|
|
769
|
-
var valueElement = getTemplate.call(this, {
|
|
770
|
-
h: h,
|
|
771
|
-
template: valueRender,
|
|
772
|
-
defaultRendering: valueDefaultRendering,
|
|
773
|
-
additionalProps: __assign({
|
|
774
|
-
value: this.computedValue()
|
|
775
|
-
}, this.$data)
|
|
776
|
-
});
|
|
777
|
-
return h("span", {
|
|
778
|
-
ref: this.v3 ? function (el) {
|
|
779
|
-
_this.baseWrapperRef = el;
|
|
780
|
-
} : 'baseWrapper',
|
|
781
|
-
role: 'listbox',
|
|
782
|
-
attrs: this.v3 ? undefined : {
|
|
783
|
-
role: 'listbox',
|
|
784
|
-
tabIndex: disabled ? undefined : tabIndex,
|
|
785
|
-
accessKey: this.$props.accessKey,
|
|
786
|
-
"aria-disabled": disabled || undefined,
|
|
787
|
-
"aria-haspopup": true,
|
|
788
|
-
"aria-expanded": opened || false,
|
|
789
|
-
"aria-owns": this.base.listBoxId,
|
|
790
|
-
"aria-activedescendant": 'option-' + this.base.guid + '-' + (selectedIndex + virtual.skip),
|
|
791
|
-
"aria-label": this.$props.label,
|
|
792
|
-
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
793
|
-
"aria-describedby": this.$props.ariaDescribedBy
|
|
794
|
-
},
|
|
795
|
-
tabIndex: disabled ? undefined : tabIndex,
|
|
796
|
-
accessKey: this.$props.accessKey,
|
|
797
|
-
"class": classNames('k-dropdown-wrap', {
|
|
798
|
-
'k-state-focused': focused,
|
|
799
|
-
'k-state-disabled': disabled
|
|
800
|
-
}),
|
|
801
|
-
style: this.$props.style,
|
|
802
|
-
onKeydown: this.handleKeyDown,
|
|
803
|
-
on: this.v3 ? undefined : {
|
|
804
|
-
"keydown": this.handleKeyDown,
|
|
805
|
-
"keypress": this.handleKeyPress,
|
|
806
|
-
"click": disabled ? noop : this.handleWrapperClick
|
|
807
|
-
},
|
|
808
|
-
onKeypress: this.handleKeyPress,
|
|
809
|
-
onClick: disabled ? noop : this.handleWrapperClick,
|
|
810
|
-
"aria-disabled": disabled || undefined,
|
|
811
|
-
"aria-haspopup": true,
|
|
812
|
-
"aria-expanded": opened || false,
|
|
813
|
-
"aria-owns": this.base.listBoxId,
|
|
814
|
-
"aria-activedescendant": 'option-' + this.base.guid + '-' + (selectedIndex + virtual.skip),
|
|
815
|
-
"aria-label": this.$props.label,
|
|
816
|
-
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
817
|
-
"aria-describedby": this.$props.ariaDescribedBy
|
|
818
|
-
}, [valueElement, h("span", {
|
|
819
|
-
"class": "k-select"
|
|
820
|
-
}, [h("span", {
|
|
821
|
-
"class": classNames('k-icon', iconClassName, {
|
|
822
|
-
'k-i-arrow-s': !loading && !iconClassName,
|
|
823
|
-
'k-i-loading': loading && !iconClassName
|
|
824
|
-
})
|
|
825
|
-
})]), dummySelect.call(this, value)]);
|
|
826
|
-
};
|
|
827
|
-
|
|
828
807
|
var renderDefaultItem = function renderDefaultItem() {
|
|
829
808
|
var _a = this.$props,
|
|
830
809
|
textField = _a.textField,
|
|
831
|
-
defaultItem = _a.defaultItem
|
|
832
|
-
dataItemKey = _a.dataItemKey;
|
|
810
|
+
defaultItem = _a.defaultItem;
|
|
833
811
|
return defaultItem !== undefined && // @ts-ignore
|
|
834
812
|
h(ListDefaultItem, {
|
|
835
813
|
defaultItem: defaultItem,
|
|
@@ -849,16 +827,14 @@ var DropDownList = {
|
|
|
849
827
|
};
|
|
850
828
|
|
|
851
829
|
var renderList = function renderList() {
|
|
852
|
-
var
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
textField = _a.textField,
|
|
856
|
-
dataItemKey = _a.dataItemKey;
|
|
830
|
+
var _this2 = this;
|
|
831
|
+
|
|
832
|
+
var textField = this.$props.textField;
|
|
857
833
|
var itemRender = templateRendering.call(this, this.$props.itemRender, getListeners.call(this));
|
|
858
834
|
var listNoDataRender = templateRendering.call(this, this.$props.listNoDataRender, getListeners.call(this));
|
|
859
835
|
var skip = virtual.skip;
|
|
860
836
|
var translate = "translateY(" + vs.translate + "px)";
|
|
861
|
-
return (// @ts-ignore
|
|
837
|
+
return (// @ts-ignore function children
|
|
862
838
|
h(List, {
|
|
863
839
|
id: this.base.listBoxId,
|
|
864
840
|
attrs: this.v3 ? undefined : {
|
|
@@ -870,13 +846,10 @@ var DropDownList = {
|
|
|
870
846
|
textField: textField,
|
|
871
847
|
valueField: dataItemKey,
|
|
872
848
|
optionsGuid: this.base.guid,
|
|
873
|
-
wrapperStyle:
|
|
849
|
+
wrapperStyle: {
|
|
874
850
|
maxHeight: popupSettings.height
|
|
875
|
-
} : {
|
|
876
|
-
float: 'left',
|
|
877
|
-
width: '100%'
|
|
878
851
|
},
|
|
879
|
-
wrapperCssClass:
|
|
852
|
+
wrapperCssClass: 'k-list-content',
|
|
880
853
|
listStyle: vs.enabled ? {
|
|
881
854
|
transform: translate
|
|
882
855
|
} : undefined,
|
|
@@ -892,13 +865,10 @@ var DropDownList = {
|
|
|
892
865
|
valueField: dataItemKey,
|
|
893
866
|
optionsGuid: this.base.guid,
|
|
894
867
|
ref: 'list',
|
|
895
|
-
wrapperStyle:
|
|
868
|
+
wrapperStyle: {
|
|
896
869
|
maxHeight: popupSettings.height
|
|
897
|
-
} : {
|
|
898
|
-
float: 'left',
|
|
899
|
-
width: '100%'
|
|
900
870
|
},
|
|
901
|
-
wrapperCssClass:
|
|
871
|
+
wrapperCssClass: 'k-list-content',
|
|
902
872
|
listStyle: vs.enabled ? {
|
|
903
873
|
transform: translate
|
|
904
874
|
} : undefined,
|
|
@@ -906,11 +876,15 @@ var DropDownList = {
|
|
|
906
876
|
skip: skip,
|
|
907
877
|
onListclick: this.handleItemClick,
|
|
908
878
|
on: this.v3 ? undefined : {
|
|
909
|
-
"listclick": this.handleItemClick
|
|
879
|
+
"listclick": this.handleItemClick,
|
|
880
|
+
"scroll": vs.scrollHandler
|
|
910
881
|
},
|
|
911
882
|
itemRender: itemRender,
|
|
912
|
-
noDataRender: listNoDataRender
|
|
913
|
-
|
|
883
|
+
noDataRender: listNoDataRender,
|
|
884
|
+
onScroll: vs.scrollHandler
|
|
885
|
+
}, this.v3 ? function () {
|
|
886
|
+
return [renderScrollElement.call(_this2)];
|
|
887
|
+
} : [renderScrollElement.call(_this2)])
|
|
914
888
|
);
|
|
915
889
|
};
|
|
916
890
|
|
|
@@ -920,7 +894,10 @@ var DropDownList = {
|
|
|
920
894
|
h(ListFilter, {
|
|
921
895
|
value: filterText,
|
|
922
896
|
attrs: this.v3 ? undefined : {
|
|
923
|
-
value: filterText
|
|
897
|
+
value: filterText,
|
|
898
|
+
size: this.$props.size,
|
|
899
|
+
rounded: this.$props.rounded,
|
|
900
|
+
fillMode: this.$props.fillMode
|
|
924
901
|
},
|
|
925
902
|
ref: 'filterInput',
|
|
926
903
|
onChange: this.handleListFilterChange,
|
|
@@ -928,23 +905,11 @@ var DropDownList = {
|
|
|
928
905
|
"change": this.handleListFilterChange,
|
|
929
906
|
"keydown": this.handleKeyDown
|
|
930
907
|
},
|
|
931
|
-
onKeydown: this.handleKeyDown
|
|
908
|
+
onKeydown: this.handleKeyDown,
|
|
909
|
+
size: this.$props.size,
|
|
910
|
+
rounded: this.$props.rounded,
|
|
911
|
+
fillMode: this.$props.fillMode
|
|
932
912
|
});
|
|
933
|
-
}; // Common rendering
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
var renderScrollWrapper = function renderScrollWrapper(children) {
|
|
937
|
-
return vs.enabled ? h("div", {
|
|
938
|
-
onScroll: vs.scrollHandler,
|
|
939
|
-
on: this.v3 ? undefined : {
|
|
940
|
-
"scroll": vs.scrollHandler
|
|
941
|
-
},
|
|
942
|
-
ref: 'scroller',
|
|
943
|
-
style: {
|
|
944
|
-
height: popupSettings.height,
|
|
945
|
-
overflowY: 'scroll'
|
|
946
|
-
}
|
|
947
|
-
}, [children]) : children;
|
|
948
913
|
};
|
|
949
914
|
|
|
950
915
|
var renderScrollElement = function renderScrollElement() {
|
|
@@ -955,7 +920,9 @@ var DropDownList = {
|
|
|
955
920
|
};
|
|
956
921
|
|
|
957
922
|
var renderListContainer = function renderListContainer() {
|
|
958
|
-
var
|
|
923
|
+
var _this3 = this;
|
|
924
|
+
|
|
925
|
+
var _a;
|
|
959
926
|
|
|
960
927
|
var headerTemplate = templateRendering.call(this, this.$props.header, getListeners.call(this));
|
|
961
928
|
var footerTemplate = templateRendering.call(this, this.$props.footer, getListeners.call(this));
|
|
@@ -983,7 +950,8 @@ var DropDownList = {
|
|
|
983
950
|
width: popupWidth // @ts-ignore
|
|
984
951
|
,
|
|
985
952
|
popupSettings: {
|
|
986
|
-
|
|
953
|
+
popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
|
|
954
|
+
className: popupSettings.className,
|
|
987
955
|
animate: popupSettings.animate,
|
|
988
956
|
anchor: this.anchor,
|
|
989
957
|
show: opened
|
|
@@ -991,7 +959,8 @@ var DropDownList = {
|
|
|
991
959
|
},
|
|
992
960
|
width: popupWidth,
|
|
993
961
|
popupSettings: {
|
|
994
|
-
|
|
962
|
+
popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {}, _a["k-list-" + (sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)),
|
|
963
|
+
className: popupSettings.className,
|
|
995
964
|
animate: popupSettings.animate,
|
|
996
965
|
anchor: this.anchor,
|
|
997
966
|
show: opened
|
|
@@ -1000,8 +969,16 @@ var DropDownList = {
|
|
|
1000
969
|
onClose: this.onPopupClosed,
|
|
1001
970
|
onBlur: this.handleBlur
|
|
1002
971
|
}, this.v3 ? function () {
|
|
1003
|
-
return [renderListFilter.call(
|
|
1004
|
-
|
|
972
|
+
return [renderListFilter.call(_this3), renderDefaultItem.call(_this3), header && h("div", {
|
|
973
|
+
"class": "k-list-header"
|
|
974
|
+
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
975
|
+
"class": "k-list-footer"
|
|
976
|
+
}, [footer])];
|
|
977
|
+
} : [renderListFilter.call(_this3), renderDefaultItem.call(_this3), header && h("div", {
|
|
978
|
+
"class": "k-list-header"
|
|
979
|
+
}, [header]), renderList.call(_this3), footer && h("div", {
|
|
980
|
+
"class": "k-list-footer"
|
|
981
|
+
}, [footer])])
|
|
1005
982
|
);
|
|
1006
983
|
};
|
|
1007
984
|
|
|
@@ -1017,25 +994,77 @@ var DropDownList = {
|
|
|
1017
994
|
ref: this.v3 ? function (el) {
|
|
1018
995
|
_this.kendoAnchorRef = el;
|
|
1019
996
|
} : this.anchor,
|
|
1020
|
-
"class": classNames('k-
|
|
1021
|
-
'k-state-invalid': !isValid
|
|
1022
|
-
}, className),
|
|
997
|
+
"class": 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)),
|
|
1023
998
|
style: !label ? style : __assign(__assign({}, style), {
|
|
1024
999
|
width: undefined
|
|
1025
1000
|
}),
|
|
1026
1001
|
dir: dir,
|
|
1027
1002
|
attrs: this.v3 ? undefined : {
|
|
1028
|
-
dir: dir
|
|
1003
|
+
dir: dir,
|
|
1004
|
+
tabIndex: getTabIndex(tabIndex, disabled),
|
|
1005
|
+
accessKey: this.$props.accessKey,
|
|
1006
|
+
role: 'listbox',
|
|
1007
|
+
"aria-disabled": disabled || undefined,
|
|
1008
|
+
"aria-haspopup": true,
|
|
1009
|
+
"aria-expanded": opened || false,
|
|
1010
|
+
"aria-owns": this.base.listBoxId,
|
|
1011
|
+
"aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
|
|
1012
|
+
"aria-label": this.$props.label,
|
|
1013
|
+
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
1014
|
+
"aria-describedby": this.$props.ariaDescribedBy,
|
|
1015
|
+
id: this.$props.id,
|
|
1016
|
+
title: this.$props.title
|
|
1029
1017
|
},
|
|
1030
1018
|
onMousedown: opened ? preventDefaultNonInputs : noop,
|
|
1031
1019
|
on: this.v3 ? undefined : {
|
|
1032
1020
|
"mousedown": opened ? preventDefaultNonInputs : noop,
|
|
1033
1021
|
"focusin": this.handleFocus,
|
|
1034
|
-
"focusout": this.handleBlur
|
|
1022
|
+
"focusout": this.handleBlur,
|
|
1023
|
+
"keydown": this.handleKeyDown,
|
|
1024
|
+
"keypress": this.handleKeyPress,
|
|
1025
|
+
"click": disabled ? noop : this.handleWrapperClick
|
|
1035
1026
|
},
|
|
1036
1027
|
onFocusin: this.handleFocus,
|
|
1037
|
-
onFocusout: this.handleBlur
|
|
1038
|
-
|
|
1028
|
+
onFocusout: this.handleBlur,
|
|
1029
|
+
tabIndex: getTabIndex(tabIndex, disabled),
|
|
1030
|
+
accessKey: this.$props.accessKey,
|
|
1031
|
+
onKeydown: this.handleKeyDown,
|
|
1032
|
+
onKeypress: this.handleKeyPress,
|
|
1033
|
+
role: 'listbox',
|
|
1034
|
+
onClick: disabled ? noop : this.handleWrapperClick,
|
|
1035
|
+
"aria-disabled": disabled || undefined,
|
|
1036
|
+
"aria-haspopup": true,
|
|
1037
|
+
"aria-expanded": opened || false,
|
|
1038
|
+
"aria-owns": this.base.listBoxId,
|
|
1039
|
+
"aria-activedescendant": opened ? 'option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0)) : undefined,
|
|
1040
|
+
"aria-label": this.$props.label,
|
|
1041
|
+
"aria-labelledby": this.$props.ariaLabelledBy,
|
|
1042
|
+
"aria-describedby": this.$props.ariaDescribedBy,
|
|
1043
|
+
id: this.$props.id,
|
|
1044
|
+
title: this.$props.title
|
|
1045
|
+
}, [valueElement, loading && h("span", {
|
|
1046
|
+
"class": "k-icon k-i-loading",
|
|
1047
|
+
key: "loading"
|
|
1048
|
+
}), // @ts-ignore
|
|
1049
|
+
h(KButton, {
|
|
1050
|
+
size: size,
|
|
1051
|
+
attrs: this.v3 ? undefined : {
|
|
1052
|
+
size: size,
|
|
1053
|
+
fillMode: fillMode,
|
|
1054
|
+
iconClass: classNames('k-icon k-i-arrow-s', iconClassName)
|
|
1055
|
+
},
|
|
1056
|
+
fillMode: fillMode,
|
|
1057
|
+
"class": 'k-input-button',
|
|
1058
|
+
iconClass: classNames('k-icon k-i-arrow-s', iconClassName),
|
|
1059
|
+
onMousedown: function onMousedown(e) {
|
|
1060
|
+
return e.preventDefault();
|
|
1061
|
+
},
|
|
1062
|
+
on: this.v3 ? undefined : {
|
|
1063
|
+
"mousedown": function onMousedown(e) {
|
|
1064
|
+
return e.preventDefault();
|
|
1065
|
+
}
|
|
1066
|
+
}
|
|
1067
|
+
}), dummySelect.call(this, value), renderListContainer.call(this)]);
|
|
1039
1068
|
return label ? h("span", {
|
|
1040
1069
|
"class": this.spanClassNames,
|
|
1041
1070
|
onFocusin: this.handleFocus,
|
|
@@ -1059,5 +1088,5 @@ var DropDownList = {
|
|
|
1059
1088
|
}, [this.$props.label]) : null]) : dropdownlist;
|
|
1060
1089
|
}
|
|
1061
1090
|
};
|
|
1062
|
-
var
|
|
1063
|
-
export { DropDownList,
|
|
1091
|
+
var DropDownList = DropDownListVue2;
|
|
1092
|
+
export { DropDownList, DropDownListVue2 };
|
|
@@ -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 };
|