@progress/kendo-vue-data-tools 3.12.1-dev.202308170413 → 3.13.0-dev.202308240911
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-data-tools.js +1 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/pager/Pager.js +56 -34
- package/dist/es/pager/PagerNumericButtons.js +9 -1
- package/dist/esm/package-metadata.js +1 -1
- package/dist/esm/pager/Pager.js +56 -34
- package/dist/esm/pager/PagerNumericButtons.js +9 -1
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/pager/Pager.js +56 -34
- package/dist/npm/pager/PagerNumericButtons.js +9 -1
- package/package.json +13 -10
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-data-tools',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1692867896,
|
|
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
|
};
|
package/dist/es/pager/Pager.js
CHANGED
|
@@ -25,14 +25,6 @@ import { messages, pagerFirstPage, pagerLastPage, pagerNextPage, pagerPreviousPa
|
|
|
25
25
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
26
26
|
import { getListeners, getTemplate, hasListener, isRtl, kendoThemeMaps, templateRendering } from '@progress/kendo-vue-common';
|
|
27
27
|
import { caretAltLeftIcon, caretAltRightIcon, caretAltToLeftIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
|
|
28
|
-
/**
|
|
29
|
-
* @hidden
|
|
30
|
-
*/
|
|
31
|
-
var RESPONSIVE_BREAKPOINT_MEDIUM = 600;
|
|
32
|
-
/**
|
|
33
|
-
* @hidden
|
|
34
|
-
*/
|
|
35
|
-
var RESPONSIVE_BREAKPOINT_LARGE = 768;
|
|
36
28
|
/**
|
|
37
29
|
* @hidden
|
|
38
30
|
*/
|
|
@@ -83,18 +75,23 @@ var PagerVue2 = {
|
|
|
83
75
|
default: undefined
|
|
84
76
|
}
|
|
85
77
|
},
|
|
78
|
+
created: function created() {
|
|
79
|
+
this.pagerSizesIndex = 1;
|
|
80
|
+
this.pagerInfoIndex = 2;
|
|
81
|
+
},
|
|
86
82
|
data: function data() {
|
|
87
83
|
return {
|
|
88
84
|
currentSize: 'medium',
|
|
89
|
-
currentRtl: false
|
|
85
|
+
currentRtl: false,
|
|
86
|
+
itemsToFit: undefined,
|
|
87
|
+
itemsWidths: undefined
|
|
90
88
|
};
|
|
91
89
|
},
|
|
92
90
|
mounted: function mounted() {
|
|
93
91
|
window.addEventListener('resize', this.onWindowResize);
|
|
94
92
|
this.currentRtl = isRtl(this.$el);
|
|
95
|
-
this.
|
|
96
|
-
|
|
97
|
-
updated: function updated() {
|
|
93
|
+
var childsWidths = this.collectPagerChildsWidths();
|
|
94
|
+
this.itemsWidths = childsWidths;
|
|
98
95
|
this.onWindowResize();
|
|
99
96
|
},
|
|
100
97
|
destroyed: !!isV3 ? undefined : function () {
|
|
@@ -161,17 +158,41 @@ var PagerVue2 = {
|
|
|
161
158
|
if (!element || !this.$props.responsive || this.$props.settings.responsive === false) {
|
|
162
159
|
return;
|
|
163
160
|
}
|
|
164
|
-
|
|
165
|
-
if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
|
|
166
|
-
this.currentSize = 'small';
|
|
167
|
-
} else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
|
|
168
|
-
this.currentSize = 'medium';
|
|
169
|
-
} else {
|
|
170
|
-
this.currentSize = 'large';
|
|
171
|
-
}
|
|
161
|
+
this.itemsToFit = this.fitChildsInParent(element, this.itemsWidths || []);
|
|
172
162
|
},
|
|
173
163
|
transformDimesion: function transformDimesion(initialValue) {
|
|
174
164
|
return typeof initialValue === 'string' ? initialValue.endsWith('px') ? initialValue : initialValue + 'px' : initialValue + 'px';
|
|
165
|
+
},
|
|
166
|
+
collectPagerChildsWidths: function collectPagerChildsWidths() {
|
|
167
|
+
var _a;
|
|
168
|
+
var arrayChildren = Array.from(((_a = this.$el) === null || _a === void 0 ? void 0 : _a.children) || []);
|
|
169
|
+
var widths = arrayChildren.map(function (item) {
|
|
170
|
+
if (item instanceof HTMLElement) {
|
|
171
|
+
return item.offsetWidth;
|
|
172
|
+
}
|
|
173
|
+
return 0;
|
|
174
|
+
});
|
|
175
|
+
return widths;
|
|
176
|
+
},
|
|
177
|
+
fitChildsInParent: function fitChildsInParent(parent, childsWidths) {
|
|
178
|
+
var fitItems = [0];
|
|
179
|
+
var elementsWith = 0;
|
|
180
|
+
var updatedWidths = childsWidths;
|
|
181
|
+
var parentWidth = parent.offsetWidth;
|
|
182
|
+
var firstElement = childsWidths[0];
|
|
183
|
+
var buffer = 40;
|
|
184
|
+
elementsWith += firstElement;
|
|
185
|
+
for (var index = 1; index < childsWidths.length; index++) {
|
|
186
|
+
var parentChild = parent.children[index];
|
|
187
|
+
var currentElement = (parentChild === null || parentChild === void 0 ? void 0 : parentChild.offsetWidth) || childsWidths[index];
|
|
188
|
+
if ((elementsWith += currentElement) < parentWidth - buffer) {
|
|
189
|
+
fitItems.push(index);
|
|
190
|
+
} else {
|
|
191
|
+
updatedWidths[index] = currentElement;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
this.itemsWidths = updatedWidths;
|
|
195
|
+
return fitItems;
|
|
175
196
|
}
|
|
176
197
|
},
|
|
177
198
|
// @ts-ignore
|
|
@@ -187,18 +208,19 @@ var PagerVue2 = {
|
|
|
187
208
|
},
|
|
188
209
|
// @ts-ignore
|
|
189
210
|
render: function render(createElement) {
|
|
211
|
+
var _a, _b;
|
|
190
212
|
var h = gh || createElement;
|
|
191
|
-
var
|
|
192
|
-
skip =
|
|
193
|
-
take =
|
|
194
|
-
total =
|
|
195
|
-
pageSizes =
|
|
196
|
-
buttonCount =
|
|
197
|
-
messagesMap =
|
|
198
|
-
info =
|
|
199
|
-
type =
|
|
200
|
-
previousNext =
|
|
201
|
-
pageSizeValue =
|
|
213
|
+
var _c = this.$props,
|
|
214
|
+
skip = _c.skip,
|
|
215
|
+
take = _c.take,
|
|
216
|
+
total = _c.total,
|
|
217
|
+
pageSizes = _c.pageSizes,
|
|
218
|
+
buttonCount = _c.buttonCount,
|
|
219
|
+
messagesMap = _c.messagesMap,
|
|
220
|
+
info = _c.info,
|
|
221
|
+
type = _c.type,
|
|
222
|
+
previousNext = _c.previousNext,
|
|
223
|
+
pageSizeValue = _c.pageSizeValue;
|
|
202
224
|
var settings = __assign({
|
|
203
225
|
pageSizes: pageSizes,
|
|
204
226
|
buttonCount: buttonCount,
|
|
@@ -233,9 +255,9 @@ var PagerVue2 = {
|
|
|
233
255
|
var changer = settings.type === 'numeric' ?
|
|
234
256
|
// @ts-ignore
|
|
235
257
|
h(PagerNumericButtons, {
|
|
236
|
-
responsiveSize: this.
|
|
258
|
+
responsiveSize: this.responsive && this.itemsToFit && this.itemsToFit.length < 2 ? 'small' : 'large',
|
|
237
259
|
attrs: this.v3 ? undefined : {
|
|
238
|
-
responsiveSize: this.
|
|
260
|
+
responsiveSize: this.responsive && this.itemsToFit && this.itemsToFit.length < 2 ? 'small' : 'large',
|
|
239
261
|
size: this.size,
|
|
240
262
|
buttonCount: settings.buttonCount || 0,
|
|
241
263
|
totalPages: this.totalPages,
|
|
@@ -435,7 +457,7 @@ var PagerVue2 = {
|
|
|
435
457
|
"aria-controls": this.$props.ariaControls
|
|
436
458
|
}, [h("div", {
|
|
437
459
|
"class": 'k-pager-numbers-wrap'
|
|
438
|
-
}, [first, prev, changer, next, last]), renderPageSizes, infoElement]);
|
|
460
|
+
}, [first, prev, changer, next, last]), !(this.responsive && this.itemsToFit && !((_a = this.itemsToFit) === null || _a === void 0 ? void 0 : _a.includes(this.pagerSizesIndex))) && renderPageSizes, !(this.responsive && this.itemsToFit && !((_b = this.itemsToFit) === null || _b === void 0 ? void 0 : _b.includes(this.pagerInfoIndex))) && infoElement]);
|
|
439
461
|
}
|
|
440
462
|
};
|
|
441
463
|
/**
|
|
@@ -170,6 +170,11 @@ var PagerNumericButtonsVue2 = {
|
|
|
170
170
|
}, this);
|
|
171
171
|
var dropdown = function dropdown(currentButtons) {
|
|
172
172
|
return h("select", {
|
|
173
|
+
style: {
|
|
174
|
+
width: '5em',
|
|
175
|
+
margin: '0px 1em',
|
|
176
|
+
display: this.$props.responsiveSize === 'small' ? 'inline-flex' : 'none'
|
|
177
|
+
},
|
|
173
178
|
"class": this.dropdownClass,
|
|
174
179
|
ariaLabel: localizationService.toLanguageString(pagerSmallPageSelectoLabel.messageKey, pagerSmallPageSelectoLabel.defaultMessage),
|
|
175
180
|
attrs: this.v3 ? undefined : {
|
|
@@ -193,7 +198,10 @@ var PagerNumericButtonsVue2 = {
|
|
|
193
198
|
return h("div", {
|
|
194
199
|
"class": "k-pager-numbers-wrap"
|
|
195
200
|
}, [h("div", {
|
|
196
|
-
"class": "k-pager-numbers"
|
|
201
|
+
"class": "k-pager-numbers",
|
|
202
|
+
style: {
|
|
203
|
+
display: this.$props.responsiveSize !== 'small' ? '' : 'none'
|
|
204
|
+
}
|
|
197
205
|
}, [prevDots, numerics, postDots]), dropdown.call(this, buttons)]);
|
|
198
206
|
}
|
|
199
207
|
};
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-data-tools',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1692867896,
|
|
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
|
};
|
package/dist/esm/pager/Pager.js
CHANGED
|
@@ -25,14 +25,6 @@ import { messages, pagerFirstPage, pagerLastPage, pagerNextPage, pagerPreviousPa
|
|
|
25
25
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
26
26
|
import { getListeners, getTemplate, hasListener, isRtl, kendoThemeMaps, templateRendering } from '@progress/kendo-vue-common';
|
|
27
27
|
import { caretAltLeftIcon, caretAltRightIcon, caretAltToLeftIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
|
|
28
|
-
/**
|
|
29
|
-
* @hidden
|
|
30
|
-
*/
|
|
31
|
-
var RESPONSIVE_BREAKPOINT_MEDIUM = 600;
|
|
32
|
-
/**
|
|
33
|
-
* @hidden
|
|
34
|
-
*/
|
|
35
|
-
var RESPONSIVE_BREAKPOINT_LARGE = 768;
|
|
36
28
|
/**
|
|
37
29
|
* @hidden
|
|
38
30
|
*/
|
|
@@ -83,18 +75,23 @@ var PagerVue2 = {
|
|
|
83
75
|
default: undefined
|
|
84
76
|
}
|
|
85
77
|
},
|
|
78
|
+
created: function created() {
|
|
79
|
+
this.pagerSizesIndex = 1;
|
|
80
|
+
this.pagerInfoIndex = 2;
|
|
81
|
+
},
|
|
86
82
|
data: function data() {
|
|
87
83
|
return {
|
|
88
84
|
currentSize: 'medium',
|
|
89
|
-
currentRtl: false
|
|
85
|
+
currentRtl: false,
|
|
86
|
+
itemsToFit: undefined,
|
|
87
|
+
itemsWidths: undefined
|
|
90
88
|
};
|
|
91
89
|
},
|
|
92
90
|
mounted: function mounted() {
|
|
93
91
|
window.addEventListener('resize', this.onWindowResize);
|
|
94
92
|
this.currentRtl = isRtl(this.$el);
|
|
95
|
-
this.
|
|
96
|
-
|
|
97
|
-
updated: function updated() {
|
|
93
|
+
var childsWidths = this.collectPagerChildsWidths();
|
|
94
|
+
this.itemsWidths = childsWidths;
|
|
98
95
|
this.onWindowResize();
|
|
99
96
|
},
|
|
100
97
|
destroyed: !!isV3 ? undefined : function () {
|
|
@@ -161,17 +158,41 @@ var PagerVue2 = {
|
|
|
161
158
|
if (!element || !this.$props.responsive || this.$props.settings.responsive === false) {
|
|
162
159
|
return;
|
|
163
160
|
}
|
|
164
|
-
|
|
165
|
-
if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
|
|
166
|
-
this.currentSize = 'small';
|
|
167
|
-
} else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
|
|
168
|
-
this.currentSize = 'medium';
|
|
169
|
-
} else {
|
|
170
|
-
this.currentSize = 'large';
|
|
171
|
-
}
|
|
161
|
+
this.itemsToFit = this.fitChildsInParent(element, this.itemsWidths || []);
|
|
172
162
|
},
|
|
173
163
|
transformDimesion: function transformDimesion(initialValue) {
|
|
174
164
|
return typeof initialValue === 'string' ? initialValue.endsWith('px') ? initialValue : initialValue + 'px' : initialValue + 'px';
|
|
165
|
+
},
|
|
166
|
+
collectPagerChildsWidths: function collectPagerChildsWidths() {
|
|
167
|
+
var _a;
|
|
168
|
+
var arrayChildren = Array.from(((_a = this.$el) === null || _a === void 0 ? void 0 : _a.children) || []);
|
|
169
|
+
var widths = arrayChildren.map(function (item) {
|
|
170
|
+
if (item instanceof HTMLElement) {
|
|
171
|
+
return item.offsetWidth;
|
|
172
|
+
}
|
|
173
|
+
return 0;
|
|
174
|
+
});
|
|
175
|
+
return widths;
|
|
176
|
+
},
|
|
177
|
+
fitChildsInParent: function fitChildsInParent(parent, childsWidths) {
|
|
178
|
+
var fitItems = [0];
|
|
179
|
+
var elementsWith = 0;
|
|
180
|
+
var updatedWidths = childsWidths;
|
|
181
|
+
var parentWidth = parent.offsetWidth;
|
|
182
|
+
var firstElement = childsWidths[0];
|
|
183
|
+
var buffer = 40;
|
|
184
|
+
elementsWith += firstElement;
|
|
185
|
+
for (var index = 1; index < childsWidths.length; index++) {
|
|
186
|
+
var parentChild = parent.children[index];
|
|
187
|
+
var currentElement = (parentChild === null || parentChild === void 0 ? void 0 : parentChild.offsetWidth) || childsWidths[index];
|
|
188
|
+
if ((elementsWith += currentElement) < parentWidth - buffer) {
|
|
189
|
+
fitItems.push(index);
|
|
190
|
+
} else {
|
|
191
|
+
updatedWidths[index] = currentElement;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
this.itemsWidths = updatedWidths;
|
|
195
|
+
return fitItems;
|
|
175
196
|
}
|
|
176
197
|
},
|
|
177
198
|
// @ts-ignore
|
|
@@ -187,18 +208,19 @@ var PagerVue2 = {
|
|
|
187
208
|
},
|
|
188
209
|
// @ts-ignore
|
|
189
210
|
render: function render(createElement) {
|
|
211
|
+
var _a, _b;
|
|
190
212
|
var h = gh || createElement;
|
|
191
|
-
var
|
|
192
|
-
skip =
|
|
193
|
-
take =
|
|
194
|
-
total =
|
|
195
|
-
pageSizes =
|
|
196
|
-
buttonCount =
|
|
197
|
-
messagesMap =
|
|
198
|
-
info =
|
|
199
|
-
type =
|
|
200
|
-
previousNext =
|
|
201
|
-
pageSizeValue =
|
|
213
|
+
var _c = this.$props,
|
|
214
|
+
skip = _c.skip,
|
|
215
|
+
take = _c.take,
|
|
216
|
+
total = _c.total,
|
|
217
|
+
pageSizes = _c.pageSizes,
|
|
218
|
+
buttonCount = _c.buttonCount,
|
|
219
|
+
messagesMap = _c.messagesMap,
|
|
220
|
+
info = _c.info,
|
|
221
|
+
type = _c.type,
|
|
222
|
+
previousNext = _c.previousNext,
|
|
223
|
+
pageSizeValue = _c.pageSizeValue;
|
|
202
224
|
var settings = __assign({
|
|
203
225
|
pageSizes: pageSizes,
|
|
204
226
|
buttonCount: buttonCount,
|
|
@@ -233,9 +255,9 @@ var PagerVue2 = {
|
|
|
233
255
|
var changer = settings.type === 'numeric' ?
|
|
234
256
|
// @ts-ignore
|
|
235
257
|
h(PagerNumericButtons, {
|
|
236
|
-
responsiveSize: this.
|
|
258
|
+
responsiveSize: this.responsive && this.itemsToFit && this.itemsToFit.length < 2 ? 'small' : 'large',
|
|
237
259
|
attrs: this.v3 ? undefined : {
|
|
238
|
-
responsiveSize: this.
|
|
260
|
+
responsiveSize: this.responsive && this.itemsToFit && this.itemsToFit.length < 2 ? 'small' : 'large',
|
|
239
261
|
size: this.size,
|
|
240
262
|
buttonCount: settings.buttonCount || 0,
|
|
241
263
|
totalPages: this.totalPages,
|
|
@@ -435,7 +457,7 @@ var PagerVue2 = {
|
|
|
435
457
|
"aria-controls": this.$props.ariaControls
|
|
436
458
|
}, [h("div", {
|
|
437
459
|
"class": 'k-pager-numbers-wrap'
|
|
438
|
-
}, [first, prev, changer, next, last]), renderPageSizes, infoElement]);
|
|
460
|
+
}, [first, prev, changer, next, last]), !(this.responsive && this.itemsToFit && !((_a = this.itemsToFit) === null || _a === void 0 ? void 0 : _a.includes(this.pagerSizesIndex))) && renderPageSizes, !(this.responsive && this.itemsToFit && !((_b = this.itemsToFit) === null || _b === void 0 ? void 0 : _b.includes(this.pagerInfoIndex))) && infoElement]);
|
|
439
461
|
}
|
|
440
462
|
};
|
|
441
463
|
/**
|
|
@@ -170,6 +170,11 @@ var PagerNumericButtonsVue2 = {
|
|
|
170
170
|
}, this);
|
|
171
171
|
var dropdown = function dropdown(currentButtons) {
|
|
172
172
|
return h("select", {
|
|
173
|
+
style: {
|
|
174
|
+
width: '5em',
|
|
175
|
+
margin: '0px 1em',
|
|
176
|
+
display: this.$props.responsiveSize === 'small' ? 'inline-flex' : 'none'
|
|
177
|
+
},
|
|
173
178
|
"class": this.dropdownClass,
|
|
174
179
|
ariaLabel: localizationService.toLanguageString(pagerSmallPageSelectoLabel.messageKey, pagerSmallPageSelectoLabel.defaultMessage),
|
|
175
180
|
attrs: this.v3 ? undefined : {
|
|
@@ -193,7 +198,10 @@ var PagerNumericButtonsVue2 = {
|
|
|
193
198
|
return h("div", {
|
|
194
199
|
"class": "k-pager-numbers-wrap"
|
|
195
200
|
}, [h("div", {
|
|
196
|
-
"class": "k-pager-numbers"
|
|
201
|
+
"class": "k-pager-numbers",
|
|
202
|
+
style: {
|
|
203
|
+
display: this.$props.responsiveSize !== 'small' ? '' : 'none'
|
|
204
|
+
}
|
|
197
205
|
}, [prevDots, numerics, postDots]), dropdown.call(this, buttons)]);
|
|
198
206
|
}
|
|
199
207
|
};
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-vue-data-tools',
|
|
9
9
|
productName: 'Kendo UI for Vue',
|
|
10
10
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1692867896,
|
|
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
|
};
|
package/dist/npm/pager/Pager.js
CHANGED
|
@@ -31,14 +31,6 @@ var main_1 = require("../messages/main");
|
|
|
31
31
|
var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
|
|
32
32
|
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
33
33
|
var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
|
|
34
|
-
/**
|
|
35
|
-
* @hidden
|
|
36
|
-
*/
|
|
37
|
-
var RESPONSIVE_BREAKPOINT_MEDIUM = 600;
|
|
38
|
-
/**
|
|
39
|
-
* @hidden
|
|
40
|
-
*/
|
|
41
|
-
var RESPONSIVE_BREAKPOINT_LARGE = 768;
|
|
42
34
|
/**
|
|
43
35
|
* @hidden
|
|
44
36
|
*/
|
|
@@ -89,18 +81,23 @@ var PagerVue2 = {
|
|
|
89
81
|
default: undefined
|
|
90
82
|
}
|
|
91
83
|
},
|
|
84
|
+
created: function created() {
|
|
85
|
+
this.pagerSizesIndex = 1;
|
|
86
|
+
this.pagerInfoIndex = 2;
|
|
87
|
+
},
|
|
92
88
|
data: function data() {
|
|
93
89
|
return {
|
|
94
90
|
currentSize: 'medium',
|
|
95
|
-
currentRtl: false
|
|
91
|
+
currentRtl: false,
|
|
92
|
+
itemsToFit: undefined,
|
|
93
|
+
itemsWidths: undefined
|
|
96
94
|
};
|
|
97
95
|
},
|
|
98
96
|
mounted: function mounted() {
|
|
99
97
|
window.addEventListener('resize', this.onWindowResize);
|
|
100
98
|
this.currentRtl = (0, kendo_vue_common_1.isRtl)(this.$el);
|
|
101
|
-
this.
|
|
102
|
-
|
|
103
|
-
updated: function updated() {
|
|
99
|
+
var childsWidths = this.collectPagerChildsWidths();
|
|
100
|
+
this.itemsWidths = childsWidths;
|
|
104
101
|
this.onWindowResize();
|
|
105
102
|
},
|
|
106
103
|
destroyed: !!isV3 ? undefined : function () {
|
|
@@ -167,17 +164,41 @@ var PagerVue2 = {
|
|
|
167
164
|
if (!element || !this.$props.responsive || this.$props.settings.responsive === false) {
|
|
168
165
|
return;
|
|
169
166
|
}
|
|
170
|
-
|
|
171
|
-
if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
|
|
172
|
-
this.currentSize = 'small';
|
|
173
|
-
} else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
|
|
174
|
-
this.currentSize = 'medium';
|
|
175
|
-
} else {
|
|
176
|
-
this.currentSize = 'large';
|
|
177
|
-
}
|
|
167
|
+
this.itemsToFit = this.fitChildsInParent(element, this.itemsWidths || []);
|
|
178
168
|
},
|
|
179
169
|
transformDimesion: function transformDimesion(initialValue) {
|
|
180
170
|
return typeof initialValue === 'string' ? initialValue.endsWith('px') ? initialValue : initialValue + 'px' : initialValue + 'px';
|
|
171
|
+
},
|
|
172
|
+
collectPagerChildsWidths: function collectPagerChildsWidths() {
|
|
173
|
+
var _a;
|
|
174
|
+
var arrayChildren = Array.from(((_a = this.$el) === null || _a === void 0 ? void 0 : _a.children) || []);
|
|
175
|
+
var widths = arrayChildren.map(function (item) {
|
|
176
|
+
if (item instanceof HTMLElement) {
|
|
177
|
+
return item.offsetWidth;
|
|
178
|
+
}
|
|
179
|
+
return 0;
|
|
180
|
+
});
|
|
181
|
+
return widths;
|
|
182
|
+
},
|
|
183
|
+
fitChildsInParent: function fitChildsInParent(parent, childsWidths) {
|
|
184
|
+
var fitItems = [0];
|
|
185
|
+
var elementsWith = 0;
|
|
186
|
+
var updatedWidths = childsWidths;
|
|
187
|
+
var parentWidth = parent.offsetWidth;
|
|
188
|
+
var firstElement = childsWidths[0];
|
|
189
|
+
var buffer = 40;
|
|
190
|
+
elementsWith += firstElement;
|
|
191
|
+
for (var index = 1; index < childsWidths.length; index++) {
|
|
192
|
+
var parentChild = parent.children[index];
|
|
193
|
+
var currentElement = (parentChild === null || parentChild === void 0 ? void 0 : parentChild.offsetWidth) || childsWidths[index];
|
|
194
|
+
if ((elementsWith += currentElement) < parentWidth - buffer) {
|
|
195
|
+
fitItems.push(index);
|
|
196
|
+
} else {
|
|
197
|
+
updatedWidths[index] = currentElement;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
this.itemsWidths = updatedWidths;
|
|
201
|
+
return fitItems;
|
|
181
202
|
}
|
|
182
203
|
},
|
|
183
204
|
// @ts-ignore
|
|
@@ -193,18 +214,19 @@ var PagerVue2 = {
|
|
|
193
214
|
},
|
|
194
215
|
// @ts-ignore
|
|
195
216
|
render: function render(createElement) {
|
|
217
|
+
var _a, _b;
|
|
196
218
|
var h = gh || createElement;
|
|
197
|
-
var
|
|
198
|
-
skip =
|
|
199
|
-
take =
|
|
200
|
-
total =
|
|
201
|
-
pageSizes =
|
|
202
|
-
buttonCount =
|
|
203
|
-
messagesMap =
|
|
204
|
-
info =
|
|
205
|
-
type =
|
|
206
|
-
previousNext =
|
|
207
|
-
pageSizeValue =
|
|
219
|
+
var _c = this.$props,
|
|
220
|
+
skip = _c.skip,
|
|
221
|
+
take = _c.take,
|
|
222
|
+
total = _c.total,
|
|
223
|
+
pageSizes = _c.pageSizes,
|
|
224
|
+
buttonCount = _c.buttonCount,
|
|
225
|
+
messagesMap = _c.messagesMap,
|
|
226
|
+
info = _c.info,
|
|
227
|
+
type = _c.type,
|
|
228
|
+
previousNext = _c.previousNext,
|
|
229
|
+
pageSizeValue = _c.pageSizeValue;
|
|
208
230
|
var settings = __assign({
|
|
209
231
|
pageSizes: pageSizes,
|
|
210
232
|
buttonCount: buttonCount,
|
|
@@ -239,9 +261,9 @@ var PagerVue2 = {
|
|
|
239
261
|
var changer = settings.type === 'numeric' ?
|
|
240
262
|
// @ts-ignore
|
|
241
263
|
h(PagerNumericButtons_1.PagerNumericButtons, {
|
|
242
|
-
responsiveSize: this.
|
|
264
|
+
responsiveSize: this.responsive && this.itemsToFit && this.itemsToFit.length < 2 ? 'small' : 'large',
|
|
243
265
|
attrs: this.v3 ? undefined : {
|
|
244
|
-
responsiveSize: this.
|
|
266
|
+
responsiveSize: this.responsive && this.itemsToFit && this.itemsToFit.length < 2 ? 'small' : 'large',
|
|
245
267
|
size: this.size,
|
|
246
268
|
buttonCount: settings.buttonCount || 0,
|
|
247
269
|
totalPages: this.totalPages,
|
|
@@ -441,7 +463,7 @@ var PagerVue2 = {
|
|
|
441
463
|
"aria-controls": this.$props.ariaControls
|
|
442
464
|
}, [h("div", {
|
|
443
465
|
"class": 'k-pager-numbers-wrap'
|
|
444
|
-
}, [first, prev, changer, next, last]), renderPageSizes, infoElement]);
|
|
466
|
+
}, [first, prev, changer, next, last]), !(this.responsive && this.itemsToFit && !((_a = this.itemsToFit) === null || _a === void 0 ? void 0 : _a.includes(this.pagerSizesIndex))) && renderPageSizes, !(this.responsive && this.itemsToFit && !((_b = this.itemsToFit) === null || _b === void 0 ? void 0 : _b.includes(this.pagerInfoIndex))) && infoElement]);
|
|
445
467
|
}
|
|
446
468
|
};
|
|
447
469
|
exports.PagerVue2 = PagerVue2;
|
|
@@ -176,6 +176,11 @@ var PagerNumericButtonsVue2 = {
|
|
|
176
176
|
}, this);
|
|
177
177
|
var dropdown = function dropdown(currentButtons) {
|
|
178
178
|
return h("select", {
|
|
179
|
+
style: {
|
|
180
|
+
width: '5em',
|
|
181
|
+
margin: '0px 1em',
|
|
182
|
+
display: this.$props.responsiveSize === 'small' ? 'inline-flex' : 'none'
|
|
183
|
+
},
|
|
179
184
|
"class": this.dropdownClass,
|
|
180
185
|
ariaLabel: localizationService.toLanguageString(pagerSmallPageSelectoLabel.messageKey, pagerSmallPageSelectoLabel.defaultMessage),
|
|
181
186
|
attrs: this.v3 ? undefined : {
|
|
@@ -199,7 +204,10 @@ var PagerNumericButtonsVue2 = {
|
|
|
199
204
|
return h("div", {
|
|
200
205
|
"class": "k-pager-numbers-wrap"
|
|
201
206
|
}, [h("div", {
|
|
202
|
-
"class": "k-pager-numbers"
|
|
207
|
+
"class": "k-pager-numbers",
|
|
208
|
+
style: {
|
|
209
|
+
display: this.$props.responsiveSize !== 'small' ? '' : 'none'
|
|
210
|
+
}
|
|
203
211
|
}, [prevDots, numerics, postDots]), dropdown.call(this, buttons)]);
|
|
204
212
|
}
|
|
205
213
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-vue-data-tools",
|
|
3
3
|
"description": "Kendo UI for Vue Data Tools package",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.13.0-dev.202308240911",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/telerik/kendo-vue.git"
|
|
@@ -39,15 +39,18 @@
|
|
|
39
39
|
"@progress/kendo-data-query": "^1.5.4",
|
|
40
40
|
"@progress/kendo-drawing": "^1.9.3",
|
|
41
41
|
"@progress/kendo-licensing": "^1.3.0",
|
|
42
|
+
"@progress/kendo-svg-icons": "^1.0.0",
|
|
43
|
+
"@progress/kendo-vue-animation": "^3.12.0",
|
|
42
44
|
"@progress/kendo-vue-buttons": "^3.10.0",
|
|
43
45
|
"@progress/kendo-vue-dateinputs": "^3.10.0",
|
|
44
46
|
"@progress/kendo-vue-dropdowns": "^3.10.0",
|
|
45
47
|
"@progress/kendo-vue-inputs": "^3.10.0",
|
|
46
48
|
"@progress/kendo-vue-intl": "^3.10.0",
|
|
49
|
+
"@progress/kendo-vue-popup": "^3.10.0",
|
|
47
50
|
"vue": "^2.6.12 || ^3.0.2"
|
|
48
51
|
},
|
|
49
52
|
"dependencies": {
|
|
50
|
-
"@progress/kendo-vue-common": "3.
|
|
53
|
+
"@progress/kendo-vue-common": "3.13.0-dev.202308240911"
|
|
51
54
|
},
|
|
52
55
|
"devDependencies": {
|
|
53
56
|
"@progress/kendo-data-query": "^1.0.0",
|
|
@@ -55,14 +58,14 @@
|
|
|
55
58
|
"@progress/kendo-drawing": "^1.8.0",
|
|
56
59
|
"@progress/kendo-licensing": "^1.3.0",
|
|
57
60
|
"@progress/kendo-svg-icons": "^1.0.0",
|
|
58
|
-
"@progress/kendo-vue-animation": "3.
|
|
59
|
-
"@progress/kendo-vue-buttons": "3.
|
|
60
|
-
"@progress/kendo-vue-dateinputs": "3.
|
|
61
|
-
"@progress/kendo-vue-dropdowns": "3.
|
|
62
|
-
"@progress/kendo-vue-grid": "3.
|
|
63
|
-
"@progress/kendo-vue-inputs": "3.
|
|
64
|
-
"@progress/kendo-vue-intl": "3.
|
|
65
|
-
"@progress/kendo-vue-popup": "3.
|
|
61
|
+
"@progress/kendo-vue-animation": "3.13.0-dev.202308240911",
|
|
62
|
+
"@progress/kendo-vue-buttons": "3.13.0-dev.202308240911",
|
|
63
|
+
"@progress/kendo-vue-dateinputs": "3.13.0-dev.202308240911",
|
|
64
|
+
"@progress/kendo-vue-dropdowns": "3.13.0-dev.202308240911",
|
|
65
|
+
"@progress/kendo-vue-grid": "3.13.0-dev.202308240911",
|
|
66
|
+
"@progress/kendo-vue-inputs": "3.13.0-dev.202308240911",
|
|
67
|
+
"@progress/kendo-vue-intl": "3.13.0-dev.202308240911",
|
|
68
|
+
"@progress/kendo-vue-popup": "3.13.0-dev.202308240911"
|
|
66
69
|
},
|
|
67
70
|
"@progress": {
|
|
68
71
|
"friendlyName": "Data Tools",
|