@king-design/vue 3.5.0-beta.0 → 3.5.1-beta.0
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/__tests__/__snapshots__/Vue Next Demos.md +70 -38
- package/components/affix/index.d.ts +1 -0
- package/components/affix/index.js +2 -1
- package/components/affix/useStyle.js +50 -47
- package/components/datepicker/basepicker.js +3 -3
- package/components/dialog/styles.js +2 -2
- package/components/dropdown/useKeyboard.js +3 -0
- package/components/input/index.spec.js +4 -2
- package/components/layout/styles.js +1 -1
- package/components/select/base.d.ts +1 -0
- package/components/select/base.js +2 -1
- package/components/select/base.vdt.js +2 -4
- package/components/select/group.vdt.js +8 -3
- package/components/select/menu.vdt.js +12 -3
- package/components/select/select.vdt.js +2 -1
- package/components/select/useFilterable.js +7 -5
- package/components/select/useInput.js +6 -2
- package/components/table/index.spec.js +7 -6
- package/components/table/styles.js +1 -1
- package/components/table/table.d.ts +1 -0
- package/components/table/table.js +3 -2
- package/components/table/table.vdt.js +126 -114
- package/components/treeSelect/index.js +4 -3
- package/components/virtualList/container.d.ts +10 -0
- package/components/virtualList/container.js +26 -0
- package/components/virtualList/container.vdt.js +39 -0
- package/components/virtualList/index.d.ts +5 -0
- package/components/virtualList/index.js +5 -0
- package/components/virtualList/index.spec.d.ts +1 -0
- package/components/virtualList/index.spec.js +372 -0
- package/components/virtualList/phantom.d.ts +9 -0
- package/components/virtualList/phantom.js +24 -0
- package/components/virtualList/phantom.vdt.js +33 -0
- package/components/virtualList/rows.d.ts +8 -0
- package/components/virtualList/rows.js +20 -0
- package/components/virtualList/rows.vdt.js +32 -0
- package/components/virtualList/styles.d.ts +13 -0
- package/components/virtualList/styles.js +34 -0
- package/components/virtualList/useRows.d.ts +2 -0
- package/components/virtualList/useRows.js +19 -0
- package/components/virtualList/useVirtualRows.d.ts +20 -0
- package/components/virtualList/useVirtualRows.js +120 -0
- package/components/virtualList/virtual.d.ts +8 -0
- package/components/virtualList/virtual.js +15 -0
- package/components/virtualList/virtual.vdt.js +26 -0
- package/components/virtualList/wrapper.d.ts +9 -0
- package/components/virtualList/wrapper.js +24 -0
- package/components/virtualList/wrapper.vdt.js +34 -0
- package/index.d.ts +3 -2
- package/index.js +3 -2
- package/package.json +2 -2
|
@@ -0,0 +1,372 @@
|
|
|
1
|
+
import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
|
|
3
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
|
|
4
|
+
import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
|
|
5
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
|
|
6
|
+
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
|
|
7
|
+
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
|
|
8
|
+
import { mount, unmount, getElement, wait } from '../../test/utils';
|
|
9
|
+
import { VirtualList } from './';
|
|
10
|
+
import { Component } from 'intact-vue-next';
|
|
11
|
+
import BasicDemo from '~/components/virtualList/demos/basic';
|
|
12
|
+
import CombinedDemo from '~/components/virtualList/demos/combined';
|
|
13
|
+
describe('VirtualList', function () {
|
|
14
|
+
afterEach(function () {
|
|
15
|
+
return unmount();
|
|
16
|
+
});
|
|
17
|
+
it('should render virtual list correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
18
|
+
var _mount, instance, element, container, wrapper, items;
|
|
19
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
20
|
+
while (1) switch (_context.prev = _context.next) {
|
|
21
|
+
case 0:
|
|
22
|
+
_mount = mount(BasicDemo), instance = _mount[0], element = _mount[1]; // check basic structure
|
|
23
|
+
container = element.querySelector('.k-virtual-container');
|
|
24
|
+
expect(container.outerHTML).to.matchSnapshot();
|
|
25
|
+
wrapper = element.querySelector('.k-virtual-wrapper');
|
|
26
|
+
expect(wrapper).to.exist;
|
|
27
|
+
// check render items is less than total
|
|
28
|
+
items = wrapper.children;
|
|
29
|
+
expect(items.length).to.be.lessThan(100);
|
|
30
|
+
case 7:
|
|
31
|
+
case "end":
|
|
32
|
+
return _context.stop();
|
|
33
|
+
}
|
|
34
|
+
}, _callee);
|
|
35
|
+
})));
|
|
36
|
+
it('should handle scroll correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
|
|
37
|
+
var _mount2, instance, element, container, wrapper, currentFirstItem;
|
|
38
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
39
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
40
|
+
case 0:
|
|
41
|
+
_mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
|
|
42
|
+
container = element.querySelector('.k-virtual-container');
|
|
43
|
+
wrapper = element.querySelector('.k-virtual-wrapper');
|
|
44
|
+
_context2.next = 5;
|
|
45
|
+
return wait(50);
|
|
46
|
+
case 5:
|
|
47
|
+
container.scrollTop = 400;
|
|
48
|
+
_context2.next = 8;
|
|
49
|
+
return wait(50);
|
|
50
|
+
case 8:
|
|
51
|
+
// check content is updated
|
|
52
|
+
currentFirstItem = wrapper.firstElementChild;
|
|
53
|
+
expect(currentFirstItem.textContent).to.not.equal('测试0');
|
|
54
|
+
case 10:
|
|
55
|
+
case "end":
|
|
56
|
+
return _context2.stop();
|
|
57
|
+
}
|
|
58
|
+
}, _callee2);
|
|
59
|
+
})));
|
|
60
|
+
it('should update total height when data changes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
|
|
61
|
+
var _mount3, instance, element, _element$querySelecto, container2, _element$querySelecto2, phantom2, initialHeight;
|
|
62
|
+
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
|
|
63
|
+
while (1) switch (_context3.prev = _context3.next) {
|
|
64
|
+
case 0:
|
|
65
|
+
_mount3 = mount(BasicDemo), instance = _mount3[0], element = _mount3[1];
|
|
66
|
+
_element$querySelecto = element.querySelectorAll('.k-virtual-container'), container2 = _element$querySelecto[1];
|
|
67
|
+
_element$querySelecto2 = element.querySelectorAll('.k-virtual-phantom'), phantom2 = _element$querySelecto2[1];
|
|
68
|
+
initialHeight = phantom2.style.height;
|
|
69
|
+
_context3.next = 6;
|
|
70
|
+
return wait(50);
|
|
71
|
+
case 6:
|
|
72
|
+
container2.scrollTop = 800;
|
|
73
|
+
_context3.next = 9;
|
|
74
|
+
return wait(50);
|
|
75
|
+
case 9:
|
|
76
|
+
// check phantom height is updated
|
|
77
|
+
expect(phantom2.style.height).to.not.equal(initialHeight);
|
|
78
|
+
case 10:
|
|
79
|
+
case "end":
|
|
80
|
+
return _context3.stop();
|
|
81
|
+
}
|
|
82
|
+
}, _callee3);
|
|
83
|
+
})));
|
|
84
|
+
it('should work with custom container and wrapper', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
|
|
85
|
+
var _mount4, instance, element, container, wrapper;
|
|
86
|
+
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
|
|
87
|
+
while (1) switch (_context4.prev = _context4.next) {
|
|
88
|
+
case 0:
|
|
89
|
+
_mount4 = mount(CombinedDemo), instance = _mount4[0], element = _mount4[1];
|
|
90
|
+
_context4.next = 3;
|
|
91
|
+
return wait();
|
|
92
|
+
case 3:
|
|
93
|
+
container = element.querySelector('.k-virtual-container');
|
|
94
|
+
wrapper = element.querySelector('.k-virtual-wrapper');
|
|
95
|
+
expect(container.outerHTML).to.matchSnapshot();
|
|
96
|
+
// check wrapper tag name
|
|
97
|
+
expect(wrapper.tagName.toLowerCase()).to.equal('ul');
|
|
98
|
+
case 7:
|
|
99
|
+
case "end":
|
|
100
|
+
return _context4.stop();
|
|
101
|
+
}
|
|
102
|
+
}, _callee4);
|
|
103
|
+
})));
|
|
104
|
+
it('should handle dynamic data changes correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
|
|
105
|
+
var _context6, _context7;
|
|
106
|
+
var Demo, _mount5, instance, container, wrapper, middleContent, newList, prevScrollTop;
|
|
107
|
+
return _regeneratorRuntime.wrap(function _callee5$(_context8) {
|
|
108
|
+
while (1) switch (_context8.prev = _context8.next) {
|
|
109
|
+
case 0:
|
|
110
|
+
Demo = /*#__PURE__*/function (_Component) {
|
|
111
|
+
_inheritsLoose(Demo, _Component);
|
|
112
|
+
function Demo() {
|
|
113
|
+
var _context5;
|
|
114
|
+
var _this;
|
|
115
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
116
|
+
args[_key] = arguments[_key];
|
|
117
|
+
}
|
|
118
|
+
_this = _Component.call.apply(_Component, _concatInstanceProperty(_context5 = [this]).call(_context5, args)) || this;
|
|
119
|
+
_this.VirtualList = VirtualList;
|
|
120
|
+
return _this;
|
|
121
|
+
}
|
|
122
|
+
Demo.defaults = function defaults() {
|
|
123
|
+
return {
|
|
124
|
+
list: _Array$from({
|
|
125
|
+
length: 100
|
|
126
|
+
}, function (_, i) {
|
|
127
|
+
return i;
|
|
128
|
+
})
|
|
129
|
+
};
|
|
130
|
+
};
|
|
131
|
+
return Demo;
|
|
132
|
+
}(Component);
|
|
133
|
+
Demo.template = "\n const VirtualList = this.VirtualList;\n <VirtualList style=\"height: 300px\">\n <div v-for={this.get('list')} key={$value}>Item {$value}</div>\n </VirtualList>\n ";
|
|
134
|
+
_mount5 = mount(Demo), instance = _mount5[0];
|
|
135
|
+
_context8.next = 5;
|
|
136
|
+
return wait();
|
|
137
|
+
case 5:
|
|
138
|
+
container = getElement('.k-virtual-container');
|
|
139
|
+
wrapper = getElement('.k-virtual-wrapper');
|
|
140
|
+
instance.set('list', _filterInstanceProperty(_context6 = instance.get('list')).call(_context6, function (i) {
|
|
141
|
+
return i % 2 === 0;
|
|
142
|
+
}));
|
|
143
|
+
_context8.next = 10;
|
|
144
|
+
return wait();
|
|
145
|
+
case 10:
|
|
146
|
+
// check deleted render
|
|
147
|
+
expect(wrapper.children.length).to.be.lessThan(100);
|
|
148
|
+
expect(wrapper.firstElementChild.textContent).to.equal('Item 0');
|
|
149
|
+
container.scrollTop = 300;
|
|
150
|
+
_context8.next = 15;
|
|
151
|
+
return wait(50);
|
|
152
|
+
case 15:
|
|
153
|
+
// check scroll render
|
|
154
|
+
middleContent = wrapper.firstElementChild.textContent;
|
|
155
|
+
expect(middleContent).to.not.equal('Item 0');
|
|
156
|
+
newList = _concatInstanceProperty(_context7 = []).call(_context7, instance.get('list'), _Array$from({
|
|
157
|
+
length: 20
|
|
158
|
+
}, function (_, i) {
|
|
159
|
+
return i + 200;
|
|
160
|
+
}));
|
|
161
|
+
instance.set('list', newList);
|
|
162
|
+
_context8.next = 21;
|
|
163
|
+
return wait(50);
|
|
164
|
+
case 21:
|
|
165
|
+
// check add render position not change
|
|
166
|
+
expect(wrapper.firstElementChild.textContent).to.equal(middleContent);
|
|
167
|
+
prevScrollTop = container.scrollTop;
|
|
168
|
+
container.scrollTop = prevScrollTop + 200;
|
|
169
|
+
_context8.next = 26;
|
|
170
|
+
return wait(50);
|
|
171
|
+
case 26:
|
|
172
|
+
// check scroll to new content
|
|
173
|
+
expect(wrapper.firstElementChild.textContent).to.not.equal(middleContent);
|
|
174
|
+
case 27:
|
|
175
|
+
case "end":
|
|
176
|
+
return _context8.stop();
|
|
177
|
+
}
|
|
178
|
+
}, _callee5);
|
|
179
|
+
})));
|
|
180
|
+
it('should handle visible area data changes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
|
|
181
|
+
var Demo, _mount6, instance, element, container, wrapper, visibleFirstItem, currentList, visibleIndex, newList;
|
|
182
|
+
return _regeneratorRuntime.wrap(function _callee6$(_context10) {
|
|
183
|
+
while (1) switch (_context10.prev = _context10.next) {
|
|
184
|
+
case 0:
|
|
185
|
+
Demo = /*#__PURE__*/function (_Component2) {
|
|
186
|
+
_inheritsLoose(Demo, _Component2);
|
|
187
|
+
function Demo() {
|
|
188
|
+
var _context9;
|
|
189
|
+
var _this2;
|
|
190
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
191
|
+
args[_key2] = arguments[_key2];
|
|
192
|
+
}
|
|
193
|
+
_this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
|
|
194
|
+
_this2.VirtualList = VirtualList;
|
|
195
|
+
return _this2;
|
|
196
|
+
}
|
|
197
|
+
Demo.defaults = function defaults() {
|
|
198
|
+
return {
|
|
199
|
+
list: _Array$from({
|
|
200
|
+
length: 100
|
|
201
|
+
}, function (_, i) {
|
|
202
|
+
return i;
|
|
203
|
+
})
|
|
204
|
+
};
|
|
205
|
+
};
|
|
206
|
+
return Demo;
|
|
207
|
+
}(Component);
|
|
208
|
+
Demo.template = "\n const VirtualList = this.VirtualList;\n <VirtualList style=\"height: 300px\">\n <div v-for={this.get('list')} key={$value}>Item {$value}</div>\n </VirtualList>\n ";
|
|
209
|
+
_mount6 = mount(Demo), instance = _mount6[0], element = _mount6[1];
|
|
210
|
+
_context10.next = 5;
|
|
211
|
+
return wait();
|
|
212
|
+
case 5:
|
|
213
|
+
container = getElement('.k-virtual-container');
|
|
214
|
+
wrapper = getElement('.k-virtual-wrapper');
|
|
215
|
+
container.scrollTop = 300;
|
|
216
|
+
_context10.next = 10;
|
|
217
|
+
return wait(50);
|
|
218
|
+
case 10:
|
|
219
|
+
visibleFirstItem = wrapper.firstElementChild.textContent;
|
|
220
|
+
currentList = instance.get('list'); // delete visible items
|
|
221
|
+
visibleIndex = parseInt(visibleFirstItem.replace('Item ', ''));
|
|
222
|
+
newList = _filterInstanceProperty(currentList).call(currentList, function (i) {
|
|
223
|
+
return i !== visibleIndex && i !== visibleIndex + 1;
|
|
224
|
+
});
|
|
225
|
+
instance.set('list', newList);
|
|
226
|
+
_context10.next = 17;
|
|
227
|
+
return wait();
|
|
228
|
+
case 17:
|
|
229
|
+
// check deleted render and position
|
|
230
|
+
expect(wrapper.firstElementChild.textContent).to.not.equal(visibleFirstItem);
|
|
231
|
+
expect(wrapper.children.length).to.be.greaterThan(0);
|
|
232
|
+
case 19:
|
|
233
|
+
case "end":
|
|
234
|
+
return _context10.stop();
|
|
235
|
+
}
|
|
236
|
+
}, _callee6);
|
|
237
|
+
})));
|
|
238
|
+
it('should clean up height cache when items are deleted', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
|
|
239
|
+
var Demo, _mount7, instance, element, container, wrapper, firstVisibleItem, firstVisibleIndex, currentList, newList, newFirstItem, afterScrollItem;
|
|
240
|
+
return _regeneratorRuntime.wrap(function _callee7$(_context12) {
|
|
241
|
+
while (1) switch (_context12.prev = _context12.next) {
|
|
242
|
+
case 0:
|
|
243
|
+
Demo = /*#__PURE__*/function (_Component3) {
|
|
244
|
+
_inheritsLoose(Demo, _Component3);
|
|
245
|
+
function Demo() {
|
|
246
|
+
var _context11;
|
|
247
|
+
var _this3;
|
|
248
|
+
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
|
|
249
|
+
args[_key3] = arguments[_key3];
|
|
250
|
+
}
|
|
251
|
+
_this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
|
|
252
|
+
_this3.VirtualList = VirtualList;
|
|
253
|
+
return _this3;
|
|
254
|
+
}
|
|
255
|
+
Demo.defaults = function defaults() {
|
|
256
|
+
return {
|
|
257
|
+
list: _Array$from({
|
|
258
|
+
length: 100
|
|
259
|
+
}, function (_, i) {
|
|
260
|
+
return i;
|
|
261
|
+
})
|
|
262
|
+
};
|
|
263
|
+
};
|
|
264
|
+
return Demo;
|
|
265
|
+
}(Component);
|
|
266
|
+
Demo.template = "\n const VirtualList = this.VirtualList;\n <VirtualList style=\"height: 300px\">\n <div v-for={this.get('list')} key={$value} style=\"height: 30px\">Item {$value}</div>\n </VirtualList>\n ";
|
|
267
|
+
_mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
|
|
268
|
+
_context12.next = 5;
|
|
269
|
+
return wait();
|
|
270
|
+
case 5:
|
|
271
|
+
container = getElement('.k-virtual-container'); // first cache some height
|
|
272
|
+
container.scrollTop = 300;
|
|
273
|
+
_context12.next = 9;
|
|
274
|
+
return wait(50);
|
|
275
|
+
case 9:
|
|
276
|
+
// get first visible item
|
|
277
|
+
wrapper = getElement('.k-virtual-wrapper');
|
|
278
|
+
firstVisibleItem = wrapper.firstElementChild;
|
|
279
|
+
firstVisibleIndex = parseInt(firstVisibleItem.textContent.replace('Item ', '')); // delete visible items
|
|
280
|
+
currentList = instance.get('list');
|
|
281
|
+
newList = _filterInstanceProperty(currentList).call(currentList, function (i) {
|
|
282
|
+
return i > firstVisibleIndex + 5;
|
|
283
|
+
});
|
|
284
|
+
instance.set('list', newList);
|
|
285
|
+
_context12.next = 17;
|
|
286
|
+
return wait(50);
|
|
287
|
+
case 17:
|
|
288
|
+
// check scroll position is adjusted
|
|
289
|
+
newFirstItem = wrapper.firstElementChild;
|
|
290
|
+
expect(parseInt(newFirstItem.textContent.replace('Item ', ''))).to.be.greaterThan(firstVisibleIndex);
|
|
291
|
+
// scroll again to check render is normal
|
|
292
|
+
container.scrollTop += 100;
|
|
293
|
+
_context12.next = 22;
|
|
294
|
+
return wait(50);
|
|
295
|
+
case 22:
|
|
296
|
+
// check new render position is correct
|
|
297
|
+
afterScrollItem = wrapper.firstElementChild;
|
|
298
|
+
expect(afterScrollItem.textContent).to.not.equal(newFirstItem.textContent);
|
|
299
|
+
case 24:
|
|
300
|
+
case "end":
|
|
301
|
+
return _context12.stop();
|
|
302
|
+
}
|
|
303
|
+
}, _callee7);
|
|
304
|
+
})));
|
|
305
|
+
it('should update total height when deleting last items', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
|
|
306
|
+
var Demo, _mount8, instance, element, container, phantom, initialHeight, wrapper, lastVisibleItem, lastVisibleIndex, currentList, newList, finalHeight, newLastItem, newLastIndex, containerRect, lastItemRect, isAtBottom;
|
|
307
|
+
return _regeneratorRuntime.wrap(function _callee8$(_context14) {
|
|
308
|
+
while (1) switch (_context14.prev = _context14.next) {
|
|
309
|
+
case 0:
|
|
310
|
+
Demo = /*#__PURE__*/function (_Component4) {
|
|
311
|
+
_inheritsLoose(Demo, _Component4);
|
|
312
|
+
function Demo() {
|
|
313
|
+
var _context13;
|
|
314
|
+
var _this4;
|
|
315
|
+
for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
|
|
316
|
+
args[_key4] = arguments[_key4];
|
|
317
|
+
}
|
|
318
|
+
_this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
|
|
319
|
+
_this4.VirtualList = VirtualList;
|
|
320
|
+
return _this4;
|
|
321
|
+
}
|
|
322
|
+
Demo.defaults = function defaults() {
|
|
323
|
+
return {
|
|
324
|
+
list: _Array$from({
|
|
325
|
+
length: 100
|
|
326
|
+
}, function (_, i) {
|
|
327
|
+
return i;
|
|
328
|
+
})
|
|
329
|
+
};
|
|
330
|
+
};
|
|
331
|
+
return Demo;
|
|
332
|
+
}(Component);
|
|
333
|
+
Demo.template = "\n const VirtualList = this.VirtualList;\n <VirtualList style=\"height: 300px\">\n <div v-for={this.get('list')} key={$value} style=\"height: 30px\">Item {$value}</div>\n </VirtualList>\n ";
|
|
334
|
+
_mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
|
|
335
|
+
_context14.next = 5;
|
|
336
|
+
return wait();
|
|
337
|
+
case 5:
|
|
338
|
+
container = getElement('.k-virtual-container');
|
|
339
|
+
phantom = getElement('.k-virtual-phantom'); // record initial total height
|
|
340
|
+
initialHeight = parseInt(phantom.style.height); // scroll to cache height
|
|
341
|
+
container.scrollTop = initialHeight;
|
|
342
|
+
_context14.next = 11;
|
|
343
|
+
return wait(50);
|
|
344
|
+
case 11:
|
|
345
|
+
wrapper = getElement('.k-virtual-wrapper');
|
|
346
|
+
lastVisibleItem = wrapper.lastElementChild;
|
|
347
|
+
lastVisibleIndex = parseInt(lastVisibleItem.textContent.replace('Item ', '')); // delete last 5 items
|
|
348
|
+
currentList = instance.get('list');
|
|
349
|
+
newList = _sliceInstanceProperty(currentList).call(currentList, 0, -5);
|
|
350
|
+
instance.set('list', newList);
|
|
351
|
+
_context14.next = 19;
|
|
352
|
+
return wait(50);
|
|
353
|
+
case 19:
|
|
354
|
+
// check total height is updated
|
|
355
|
+
finalHeight = parseInt(phantom.style.height);
|
|
356
|
+
expect(finalHeight).to.equal(initialHeight - 5 * 30);
|
|
357
|
+
// check new last item is at bottom
|
|
358
|
+
newLastItem = wrapper.lastElementChild;
|
|
359
|
+
newLastIndex = parseInt(newLastItem.textContent.replace('Item ', ''));
|
|
360
|
+
expect(newLastIndex).to.equal(94);
|
|
361
|
+
// check new last item is at bottom
|
|
362
|
+
containerRect = container.getBoundingClientRect();
|
|
363
|
+
lastItemRect = newLastItem.getBoundingClientRect();
|
|
364
|
+
isAtBottom = Math.abs(containerRect.bottom - lastItemRect.bottom) <= 1;
|
|
365
|
+
expect(isAtBottom).to.be.true;
|
|
366
|
+
case 28:
|
|
367
|
+
case "end":
|
|
368
|
+
return _context14.stop();
|
|
369
|
+
}
|
|
370
|
+
}, _callee8);
|
|
371
|
+
})));
|
|
372
|
+
});
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Component, TypeDefs } from 'intact-vue-next';
|
|
2
|
+
export interface VirtualListPhantomProps {
|
|
3
|
+
tagName?: string;
|
|
4
|
+
}
|
|
5
|
+
export declare class VirtualListPhantom extends Component<VirtualListPhantomProps> {
|
|
6
|
+
static template: string | import('intact-vue-next').Template<any>;
|
|
7
|
+
static typeDefs: Required<TypeDefs<VirtualListPhantomProps>>;
|
|
8
|
+
private config;
|
|
9
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
|
|
2
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
|
|
3
|
+
import { Component } from 'intact-vue-next';
|
|
4
|
+
import template from './phantom.vdt';
|
|
5
|
+
import { useConfigContext } from '../config';
|
|
6
|
+
var typeDefs = {
|
|
7
|
+
tagName: String
|
|
8
|
+
};
|
|
9
|
+
export var VirtualListPhantom = /*#__PURE__*/function (_Component) {
|
|
10
|
+
_inheritsLoose(VirtualListPhantom, _Component);
|
|
11
|
+
function VirtualListPhantom() {
|
|
12
|
+
var _context;
|
|
13
|
+
var _this;
|
|
14
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
15
|
+
args[_key] = arguments[_key];
|
|
16
|
+
}
|
|
17
|
+
_this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
|
|
18
|
+
_this.config = useConfigContext();
|
|
19
|
+
return _this;
|
|
20
|
+
}
|
|
21
|
+
return VirtualListPhantom;
|
|
22
|
+
}(Component);
|
|
23
|
+
VirtualListPhantom.template = template;
|
|
24
|
+
VirtualListPhantom.typeDefs = typeDefs;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
2
|
+
import { createUnknownComponentVNode as _$cc } from 'intact-vue-next';
|
|
3
|
+
import { getRestProps } from '../utils';
|
|
4
|
+
import { context as VirtualRowsContext } from './useVirtualRows';
|
|
5
|
+
import { cx } from '@emotion/css';
|
|
6
|
+
import { createVNode } from 'intact-vue-next';
|
|
7
|
+
import { makePhantomStyles } from './styles';
|
|
8
|
+
export default function ($props, $blocks, $__proto__) {
|
|
9
|
+
var _classNameObj,
|
|
10
|
+
_this = this;
|
|
11
|
+
$blocks || ($blocks = {});
|
|
12
|
+
$props || ($props = {});
|
|
13
|
+
var $this = this;
|
|
14
|
+
var _this$get = this.get(),
|
|
15
|
+
className = _this$get.className,
|
|
16
|
+
tagName = _this$get.tagName;
|
|
17
|
+
var k = this.config.k;
|
|
18
|
+
var classNameObj = (_classNameObj = {}, _classNameObj[k + "-virtual-phantom"] = true, _classNameObj[makePhantomStyles()] = true, _classNameObj[className] = className, _classNameObj);
|
|
19
|
+
return _$cc(VirtualRowsContext.Consumer, {
|
|
20
|
+
'children': function children(_ref) {
|
|
21
|
+
var getTotalHeight = _ref.getTotalHeight,
|
|
22
|
+
disabled = _ref.disabled;
|
|
23
|
+
if (disabled) return;
|
|
24
|
+
return createVNode(tagName || 'div', _extends({}, getRestProps(_this), {
|
|
25
|
+
className: cx(classNameObj),
|
|
26
|
+
style: {
|
|
27
|
+
height: getTotalHeight() + 'px'
|
|
28
|
+
}
|
|
29
|
+
}));
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Component } from 'intact-vue-next';
|
|
2
|
+
export interface VirtualListRowsProps {
|
|
3
|
+
tagName?: string;
|
|
4
|
+
}
|
|
5
|
+
export declare class VirtualListRows extends Component<VirtualListRowsProps> {
|
|
6
|
+
static template: string | import('intact-vue-next').Template<any>;
|
|
7
|
+
private rows;
|
|
8
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
|
|
2
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
|
|
3
|
+
import { Component } from 'intact-vue-next';
|
|
4
|
+
import { useRows } from './useRows';
|
|
5
|
+
import template from './rows.vdt';
|
|
6
|
+
export var VirtualListRows = /*#__PURE__*/function (_Component) {
|
|
7
|
+
_inheritsLoose(VirtualListRows, _Component);
|
|
8
|
+
function VirtualListRows() {
|
|
9
|
+
var _context;
|
|
10
|
+
var _this;
|
|
11
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
12
|
+
args[_key] = arguments[_key];
|
|
13
|
+
}
|
|
14
|
+
_this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
|
|
15
|
+
_this.rows = useRows();
|
|
16
|
+
return _this;
|
|
17
|
+
}
|
|
18
|
+
return VirtualListRows;
|
|
19
|
+
}(Component);
|
|
20
|
+
VirtualListRows.template = template;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
|
|
2
|
+
import { createUnknownComponentVNode as _$cc } from 'intact-vue-next';
|
|
3
|
+
import { createFragment, createVNode } from 'intact-vue-next';
|
|
4
|
+
import { isNullOrUndefined } from 'intact-shared';
|
|
5
|
+
import { context as VirtualRowsContext } from './useVirtualRows';
|
|
6
|
+
export default function ($props, $blocks, $__proto__) {
|
|
7
|
+
$blocks || ($blocks = {});
|
|
8
|
+
$props || ($props = {});
|
|
9
|
+
var $this = this;
|
|
10
|
+
var _this$get = this.get(),
|
|
11
|
+
tagName = _this$get.tagName,
|
|
12
|
+
_children = _this$get.children;
|
|
13
|
+
var rows = this.rows;
|
|
14
|
+
return _$cc(VirtualRowsContext.Consumer, {
|
|
15
|
+
'children': function children(_ref) {
|
|
16
|
+
var notifyRows = _ref.notifyRows,
|
|
17
|
+
startIndex = _ref.startIndex,
|
|
18
|
+
length = _ref.length,
|
|
19
|
+
disabled = _ref.disabled;
|
|
20
|
+
if (!disabled) {
|
|
21
|
+
var _context;
|
|
22
|
+
_children = _sliceInstanceProperty(_context = rows.value).call(_context, startIndex, startIndex + length);
|
|
23
|
+
notifyRows(rows.value);
|
|
24
|
+
}
|
|
25
|
+
if (isNullOrUndefined(tagName)) {
|
|
26
|
+
return createFragment(_children, 8 /* ChildrenTypes.HasKeyedChildren */);
|
|
27
|
+
}
|
|
28
|
+
return createVNode(tagName, null, _children);
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import '../../styles/global';
|
|
2
|
+
export declare const makeContainerStyles: {
|
|
3
|
+
(): string;
|
|
4
|
+
clearCache(): {};
|
|
5
|
+
};
|
|
6
|
+
export declare const makePhantomStyles: {
|
|
7
|
+
(): string;
|
|
8
|
+
clearCache(): {};
|
|
9
|
+
};
|
|
10
|
+
export declare const makeWrapperStyles: {
|
|
11
|
+
(): string;
|
|
12
|
+
clearCache(): {};
|
|
13
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
2
|
+
import { css } from '@emotion/css';
|
|
3
|
+
import '../../styles/global';
|
|
4
|
+
import { cache } from '../utils';
|
|
5
|
+
export var makeContainerStyles = cache(function () {
|
|
6
|
+
return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
|
|
7
|
+
name: "1mtyfo1",
|
|
8
|
+
styles: "overflow:auto;position:relative;height:100%"
|
|
9
|
+
} : {
|
|
10
|
+
name: "1mtyfo1",
|
|
11
|
+
styles: "overflow:auto;position:relative;height:100%",
|
|
12
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
13
|
+
});
|
|
14
|
+
});
|
|
15
|
+
export var makePhantomStyles = cache(function () {
|
|
16
|
+
return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
|
|
17
|
+
name: "aekvjh",
|
|
18
|
+
styles: "position:absolute;left:0;top:0;right:0;z-index:-1;pointer-events:none"
|
|
19
|
+
} : {
|
|
20
|
+
name: "aekvjh",
|
|
21
|
+
styles: "position:absolute;left:0;top:0;right:0;z-index:-1;pointer-events:none",
|
|
22
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
export var makeWrapperStyles = cache(function () {
|
|
26
|
+
return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
|
|
27
|
+
name: "1hssyz7",
|
|
28
|
+
styles: "width:100%;will-change:transform"
|
|
29
|
+
} : {
|
|
30
|
+
name: "1hssyz7",
|
|
31
|
+
styles: "width:100%;will-change:transform",
|
|
32
|
+
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
33
|
+
});
|
|
34
|
+
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useInstance, createRef, createFragment } from 'intact-vue-next';
|
|
2
|
+
export function useRows() {
|
|
3
|
+
var instance = useInstance();
|
|
4
|
+
var rows = createRef([]);
|
|
5
|
+
instance.on('$receive:children', function (children) {
|
|
6
|
+
// use fragment vnode to normalize children
|
|
7
|
+
var vNode = createFragment(children, 0 /* ChildrenTypes.UnknownChildren */);
|
|
8
|
+
// convert to array if it has only one child
|
|
9
|
+
var childrenType = vNode.childrenType;
|
|
10
|
+
if (childrenType & 2 /* ChildrenTypes.HasVNodeChildren */) {
|
|
11
|
+
rows.value = [vNode.children];
|
|
12
|
+
} else if (childrenType & 1 /* ChildrenTypes.HasInvalidChildren */) {
|
|
13
|
+
rows.value = [];
|
|
14
|
+
} else {
|
|
15
|
+
rows.value = vNode.children;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
return rows;
|
|
19
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { State } from '../../hooks/useState';
|
|
2
|
+
import { VNode } from 'intact-vue-next';
|
|
3
|
+
type ContextValue = {
|
|
4
|
+
notifyRows: (rows: State<VNode[]>) => void;
|
|
5
|
+
startIndex: number;
|
|
6
|
+
endIndex: number;
|
|
7
|
+
};
|
|
8
|
+
export declare const context: {
|
|
9
|
+
Provider: import('intact-vue-next').ComponentConstructor<import('intact-vue-next').Component<import("../context").ProviderProps<ContextValue>, {}, {}, {}>>;
|
|
10
|
+
Consumer: import('intact-vue-next').ComponentConstructor<import('intact-vue-next').Component<import("../context").ConsumerProps<ContextValue>, {}, {}, {}>>;
|
|
11
|
+
useContext: () => import('intact-vue-next').RefObject<ContextValue | undefined>;
|
|
12
|
+
};
|
|
13
|
+
export declare function useVirtualRows(): {
|
|
14
|
+
notifyRows: (_rows: VNode[]) => void;
|
|
15
|
+
startIndex: State<number>;
|
|
16
|
+
length: State<number>;
|
|
17
|
+
getTotalHeight: () => number;
|
|
18
|
+
translateY: State<number>;
|
|
19
|
+
};
|
|
20
|
+
export {};
|