imatrix-ui 2.8.97-dw-tmp2 → 2.8.97-dw-tmp4
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/lib/super-ui.css +1 -0
- package/lib/super-ui.umd.min.js +36 -1
- package/package.json +1 -2
- package/src/i18n/i18n.js +1 -1
- package/src/i18n/langs/cn.js +1 -1
- package/src/i18n/langs/en.js +1 -1
- package/src/permission.js +1 -1
- package/src/plugins.js +4 -4
- package/src/store/modules/permission.js +5 -0
- package/src/styles/index.scss +2 -2
- package/src/utils/permissionAuth.js +6 -0
- package/src/utils/request.js +1 -1
- package/src/views/login/index.vue +1 -1
- package/lib/css/super-ui.common~46f24e9d.f712732a.css +0 -1
- package/lib/css/super-ui.common~60a56baa.e6f54088.css +0 -1
- package/lib/css/super-ui.common~691e02b5.3387eefb.css +0 -1
- package/lib/css/super-ui.common~e2e93592.e9ec19a9.css +0 -1
- package/lib/css/super-ui.umd.min~46f24e9d.f712732a.css +0 -1
- package/lib/css/super-ui.umd.min~60a56baa.e6f54088.css +0 -1
- package/lib/css/super-ui.umd.min~691e02b5.3387eefb.css +0 -1
- package/lib/css/super-ui.umd.min~e2e93592.e9ec19a9.css +0 -1
- package/lib/css/super-ui.umd~46f24e9d.f712732a.css +0 -1
- package/lib/css/super-ui.umd~60a56baa.e6f54088.css +0 -1
- package/lib/css/super-ui.umd~691e02b5.3387eefb.css +0 -1
- package/lib/css/super-ui.umd~e2e93592.e9ec19a9.css +0 -1
- package/lib/css/vendors~super-ui.common~253ae210.b57e4bfb.css +0 -1
- package/lib/css/vendors~super-ui.umd.min~253ae210.b57e4bfb.css +0 -1
- package/lib/css/vendors~super-ui.umd~253ae210.b57e4bfb.css +0 -1
- package/lib/css/yarn.tinymce~97d7b732.ea366551.css +0 -1
- package/lib/super-ui.common.super-ui.common~46f24e9d.js +0 -12446
- package/lib/super-ui.common.super-ui.common~60a56baa.js +0 -2774
- package/lib/super-ui.common.super-ui.common~691e02b5.js +0 -3062
- package/lib/super-ui.common.super-ui.common~970f9218.js +0 -3729
- package/lib/super-ui.common.super-ui.common~bd3594d6.js +0 -5264
- package/lib/super-ui.common.super-ui.common~e2e93592.js +0 -6945
- package/lib/super-ui.common.vendors~super-ui.common~253ae210.js +0 -3504
- package/lib/super-ui.common.yarn.async-validator~7864cd12.js +0 -1225
- package/lib/super-ui.common.yarn.core-js~2b13b260.js +0 -7542
- package/lib/super-ui.common.yarn.gcommon~c5c7b9b4.js +0 -11
- package/lib/super-ui.common.yarn.gcommon~cd278a5f.js +0 -4846
- package/lib/super-ui.common.yarn.resize-observer-polyfill~7370204d.js +0 -942
- package/lib/super-ui.common.yarn.sortablejs~f811d8fd.js +0 -3714
- package/lib/super-ui.common.yarn.tinymce~253ae210.js +0 -568
- package/lib/super-ui.common.yarn.tinymce~29bc5d46.js +0 -2125
- package/lib/super-ui.common.yarn.tinymce~35f50c21.js +0 -34090
- package/lib/super-ui.common.yarn.tinymce~8a52df3b.js +0 -30088
- package/lib/super-ui.common.yarn.tinymce~97d7b732.js +0 -31
- package/lib/super-ui.common.yarn.tinymce~b5d80f29.js +0 -7936
- package/lib/super-ui.common.yarn.tinymce~c1068939.js +0 -13346
- package/lib/super-ui.common.yarn.vue-i18n~02576867.js +0 -2179
- package/lib/super-ui.common.yarn.vue-virtual-scroll-list~bd67cfcd.js +0 -1069
- package/lib/super-ui.common.yarn.zxing~3446ce64.js +0 -11996
- package/lib/super-ui.common.yarn.zxing~61a1471b.js +0 -11202
- package/lib/super-ui.common.yarn.zxing~b49f3034.js +0 -3576
- package/lib/super-ui.common.yarn.zxing~fd3cc9f3.js +0 -2916
- package/lib/super-ui.umd.min.super-ui.umd.min~46f24e9d.js +0 -2
- package/lib/super-ui.umd.min.super-ui.umd.min~60a56baa.js +0 -2
- package/lib/super-ui.umd.min.super-ui.umd.min~691e02b5.js +0 -2
- package/lib/super-ui.umd.min.super-ui.umd.min~970f9218.js +0 -2
- package/lib/super-ui.umd.min.super-ui.umd.min~bd3594d6.js +0 -2
- package/lib/super-ui.umd.min.super-ui.umd.min~e2e93592.js +0 -2
- package/lib/super-ui.umd.min.vendors~super-ui.umd.min~253ae210.js +0 -24
- package/lib/super-ui.umd.min.yarn.async-validator~7864cd12.js +0 -2
- package/lib/super-ui.umd.min.yarn.core-js~2b13b260.js +0 -2
- package/lib/super-ui.umd.min.yarn.gcommon~c5c7b9b4.js +0 -2
- package/lib/super-ui.umd.min.yarn.gcommon~cd278a5f.js +0 -26
- package/lib/super-ui.umd.min.yarn.resize-observer-polyfill~7370204d.js +0 -2
- package/lib/super-ui.umd.min.yarn.sortablejs~f811d8fd.js +0 -8
- package/lib/super-ui.umd.min.yarn.tinymce~253ae210.js +0 -2
- package/lib/super-ui.umd.min.yarn.tinymce~29bc5d46.js +0 -2
- package/lib/super-ui.umd.min.yarn.tinymce~35f50c21.js +0 -2
- package/lib/super-ui.umd.min.yarn.tinymce~8a52df3b.js +0 -2
- package/lib/super-ui.umd.min.yarn.tinymce~97d7b732.js +0 -2
- package/lib/super-ui.umd.min.yarn.tinymce~b5d80f29.js +0 -2
- package/lib/super-ui.umd.min.yarn.tinymce~c1068939.js +0 -2
- package/lib/super-ui.umd.min.yarn.vue-i18n~02576867.js +0 -7
- package/lib/super-ui.umd.min.yarn.vue-virtual-scroll-list~bd67cfcd.js +0 -8
- package/lib/super-ui.umd.min.yarn.zxing~3446ce64.js +0 -2
- package/lib/super-ui.umd.min.yarn.zxing~61a1471b.js +0 -2
- package/lib/super-ui.umd.min.yarn.zxing~b49f3034.js +0 -2
- package/lib/super-ui.umd.min.yarn.zxing~fd3cc9f3.js +0 -2
- package/lib/super-ui.umd.super-ui.umd~46f24e9d.js +0 -12446
- package/lib/super-ui.umd.super-ui.umd~60a56baa.js +0 -2774
- package/lib/super-ui.umd.super-ui.umd~691e02b5.js +0 -3062
- package/lib/super-ui.umd.super-ui.umd~970f9218.js +0 -3739
- package/lib/super-ui.umd.super-ui.umd~bd3594d6.js +0 -5264
- package/lib/super-ui.umd.super-ui.umd~e2e93592.js +0 -6945
- package/lib/super-ui.umd.vendors~super-ui.umd~253ae210.js +0 -3504
- package/lib/super-ui.umd.yarn.async-validator~7864cd12.js +0 -1225
- package/lib/super-ui.umd.yarn.core-js~2b13b260.js +0 -7542
- package/lib/super-ui.umd.yarn.gcommon~c5c7b9b4.js +0 -11
- package/lib/super-ui.umd.yarn.gcommon~cd278a5f.js +0 -4846
- package/lib/super-ui.umd.yarn.resize-observer-polyfill~7370204d.js +0 -942
- package/lib/super-ui.umd.yarn.sortablejs~f811d8fd.js +0 -3714
- package/lib/super-ui.umd.yarn.tinymce~253ae210.js +0 -568
- package/lib/super-ui.umd.yarn.tinymce~29bc5d46.js +0 -2125
- package/lib/super-ui.umd.yarn.tinymce~35f50c21.js +0 -34090
- package/lib/super-ui.umd.yarn.tinymce~8a52df3b.js +0 -30088
- package/lib/super-ui.umd.yarn.tinymce~97d7b732.js +0 -31
- package/lib/super-ui.umd.yarn.tinymce~b5d80f29.js +0 -7936
- package/lib/super-ui.umd.yarn.tinymce~c1068939.js +0 -13346
- package/lib/super-ui.umd.yarn.vue-i18n~02576867.js +0 -2179
- package/lib/super-ui.umd.yarn.vue-virtual-scroll-list~bd67cfcd.js +0 -1069
- package/lib/super-ui.umd.yarn.zxing~3446ce64.js +0 -11996
- package/lib/super-ui.umd.yarn.zxing~61a1471b.js +0 -11202
- package/lib/super-ui.umd.yarn.zxing~b49f3034.js +0 -3576
- package/lib/super-ui.umd.yarn.zxing~fd3cc9f3.js +0 -2916
|
@@ -1,1069 +0,0 @@
|
|
|
1
|
-
((typeof self !== 'undefined' ? self : this)["webpackJsonpsuper_ui"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpsuper_ui"] || []).push([[22],{
|
|
2
|
-
|
|
3
|
-
/***/ "89c1":
|
|
4
|
-
/***/ (function(module, exports, __webpack_require__) {
|
|
5
|
-
|
|
6
|
-
/*!
|
|
7
|
-
* vue-virtual-scroll-list v2.3.3
|
|
8
|
-
* open source under the MIT license
|
|
9
|
-
* https://github.com/tangbc/vue-virtual-scroll-list#readme
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
(function (global, factory) {
|
|
13
|
-
true ? module.exports = factory(__webpack_require__("8bbf")) :
|
|
14
|
-
undefined;
|
|
15
|
-
}(this, (function (Vue) { 'use strict';
|
|
16
|
-
|
|
17
|
-
Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
|
|
18
|
-
|
|
19
|
-
function _classCallCheck(instance, Constructor) {
|
|
20
|
-
if (!(instance instanceof Constructor)) {
|
|
21
|
-
throw new TypeError("Cannot call a class as a function");
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function _defineProperties(target, props) {
|
|
26
|
-
for (var i = 0; i < props.length; i++) {
|
|
27
|
-
var descriptor = props[i];
|
|
28
|
-
descriptor.enumerable = descriptor.enumerable || false;
|
|
29
|
-
descriptor.configurable = true;
|
|
30
|
-
if ("value" in descriptor) descriptor.writable = true;
|
|
31
|
-
Object.defineProperty(target, descriptor.key, descriptor);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
function _createClass(Constructor, protoProps, staticProps) {
|
|
36
|
-
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
37
|
-
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
38
|
-
return Constructor;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function _defineProperty(obj, key, value) {
|
|
42
|
-
if (key in obj) {
|
|
43
|
-
Object.defineProperty(obj, key, {
|
|
44
|
-
value: value,
|
|
45
|
-
enumerable: true,
|
|
46
|
-
configurable: true,
|
|
47
|
-
writable: true
|
|
48
|
-
});
|
|
49
|
-
} else {
|
|
50
|
-
obj[key] = value;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
return obj;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
function ownKeys(object, enumerableOnly) {
|
|
57
|
-
var keys = Object.keys(object);
|
|
58
|
-
|
|
59
|
-
if (Object.getOwnPropertySymbols) {
|
|
60
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
61
|
-
if (enumerableOnly) symbols = symbols.filter(function (sym) {
|
|
62
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
63
|
-
});
|
|
64
|
-
keys.push.apply(keys, symbols);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
return keys;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function _objectSpread2(target) {
|
|
71
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
72
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
73
|
-
|
|
74
|
-
if (i % 2) {
|
|
75
|
-
ownKeys(Object(source), true).forEach(function (key) {
|
|
76
|
-
_defineProperty(target, key, source[key]);
|
|
77
|
-
});
|
|
78
|
-
} else if (Object.getOwnPropertyDescriptors) {
|
|
79
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
80
|
-
} else {
|
|
81
|
-
ownKeys(Object(source)).forEach(function (key) {
|
|
82
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
return target;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
function _toConsumableArray(arr) {
|
|
91
|
-
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
function _arrayWithoutHoles(arr) {
|
|
95
|
-
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
function _iterableToArray(iter) {
|
|
99
|
-
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
function _unsupportedIterableToArray(o, minLen) {
|
|
103
|
-
if (!o) return;
|
|
104
|
-
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
105
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
106
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
107
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
108
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
function _arrayLikeToArray(arr, len) {
|
|
112
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
113
|
-
|
|
114
|
-
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
115
|
-
|
|
116
|
-
return arr2;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
function _nonIterableSpread() {
|
|
120
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
/**
|
|
124
|
-
* virtual list core calculating center
|
|
125
|
-
*/
|
|
126
|
-
var DIRECTION_TYPE = {
|
|
127
|
-
FRONT: 'FRONT',
|
|
128
|
-
// scroll up or left
|
|
129
|
-
BEHIND: 'BEHIND' // scroll down or right
|
|
130
|
-
|
|
131
|
-
};
|
|
132
|
-
var CALC_TYPE = {
|
|
133
|
-
INIT: 'INIT',
|
|
134
|
-
FIXED: 'FIXED',
|
|
135
|
-
DYNAMIC: 'DYNAMIC'
|
|
136
|
-
};
|
|
137
|
-
var LEADING_BUFFER = 0;
|
|
138
|
-
|
|
139
|
-
var Virtual = /*#__PURE__*/function () {
|
|
140
|
-
function Virtual(param, callUpdate) {
|
|
141
|
-
_classCallCheck(this, Virtual);
|
|
142
|
-
|
|
143
|
-
this.init(param, callUpdate);
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
_createClass(Virtual, [{
|
|
147
|
-
key: "init",
|
|
148
|
-
value: function init(param, callUpdate) {
|
|
149
|
-
// param data
|
|
150
|
-
this.param = param;
|
|
151
|
-
this.callUpdate = callUpdate; // size data
|
|
152
|
-
|
|
153
|
-
this.sizes = new Map();
|
|
154
|
-
this.firstRangeTotalSize = 0;
|
|
155
|
-
this.firstRangeAverageSize = 0;
|
|
156
|
-
this.lastCalcIndex = 0;
|
|
157
|
-
this.fixedSizeValue = 0;
|
|
158
|
-
this.calcType = CALC_TYPE.INIT; // scroll data
|
|
159
|
-
|
|
160
|
-
this.offset = 0;
|
|
161
|
-
this.direction = ''; // range data
|
|
162
|
-
|
|
163
|
-
this.range = Object.create(null);
|
|
164
|
-
|
|
165
|
-
if (param) {
|
|
166
|
-
this.checkRange(0, param.keeps - 1);
|
|
167
|
-
} // benchmark test data
|
|
168
|
-
// this.__bsearchCalls = 0
|
|
169
|
-
// this.__getIndexOffsetCalls = 0
|
|
170
|
-
|
|
171
|
-
}
|
|
172
|
-
}, {
|
|
173
|
-
key: "destroy",
|
|
174
|
-
value: function destroy() {
|
|
175
|
-
this.init(null, null);
|
|
176
|
-
} // return current render range
|
|
177
|
-
|
|
178
|
-
}, {
|
|
179
|
-
key: "getRange",
|
|
180
|
-
value: function getRange() {
|
|
181
|
-
var range = Object.create(null);
|
|
182
|
-
range.start = this.range.start;
|
|
183
|
-
range.end = this.range.end;
|
|
184
|
-
range.padFront = this.range.padFront;
|
|
185
|
-
range.padBehind = this.range.padBehind;
|
|
186
|
-
return range;
|
|
187
|
-
}
|
|
188
|
-
}, {
|
|
189
|
-
key: "isBehind",
|
|
190
|
-
value: function isBehind() {
|
|
191
|
-
return this.direction === DIRECTION_TYPE.BEHIND;
|
|
192
|
-
}
|
|
193
|
-
}, {
|
|
194
|
-
key: "isFront",
|
|
195
|
-
value: function isFront() {
|
|
196
|
-
return this.direction === DIRECTION_TYPE.FRONT;
|
|
197
|
-
} // return start index offset
|
|
198
|
-
|
|
199
|
-
}, {
|
|
200
|
-
key: "getOffset",
|
|
201
|
-
value: function getOffset(start) {
|
|
202
|
-
return (start < 1 ? 0 : this.getIndexOffset(start)) + this.param.slotHeaderSize;
|
|
203
|
-
}
|
|
204
|
-
}, {
|
|
205
|
-
key: "updateParam",
|
|
206
|
-
value: function updateParam(key, value) {
|
|
207
|
-
var _this = this;
|
|
208
|
-
|
|
209
|
-
if (this.param && key in this.param) {
|
|
210
|
-
// if uniqueIds change, find out deleted id and remove from size map
|
|
211
|
-
if (key === 'uniqueIds') {
|
|
212
|
-
this.sizes.forEach(function (v, key) {
|
|
213
|
-
if (!value.includes(key)) {
|
|
214
|
-
_this.sizes["delete"](key);
|
|
215
|
-
}
|
|
216
|
-
});
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
this.param[key] = value;
|
|
220
|
-
}
|
|
221
|
-
} // save each size map by id
|
|
222
|
-
|
|
223
|
-
}, {
|
|
224
|
-
key: "saveSize",
|
|
225
|
-
value: function saveSize(id, size) {
|
|
226
|
-
this.sizes.set(id, size); // we assume size type is fixed at the beginning and remember first size value
|
|
227
|
-
// if there is no size value different from this at next comming saving
|
|
228
|
-
// we think it's a fixed size list, otherwise is dynamic size list
|
|
229
|
-
|
|
230
|
-
if (this.calcType === CALC_TYPE.INIT) {
|
|
231
|
-
this.fixedSizeValue = size;
|
|
232
|
-
this.calcType = CALC_TYPE.FIXED;
|
|
233
|
-
} else if (this.calcType === CALC_TYPE.FIXED && this.fixedSizeValue !== size) {
|
|
234
|
-
this.calcType = CALC_TYPE.DYNAMIC; // it's no use at all
|
|
235
|
-
|
|
236
|
-
delete this.fixedSizeValue;
|
|
237
|
-
} // calculate the average size only in the first range
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
if (this.calcType !== CALC_TYPE.FIXED && typeof this.firstRangeTotalSize !== 'undefined') {
|
|
241
|
-
if (this.sizes.size < Math.min(this.param.keeps, this.param.uniqueIds.length)) {
|
|
242
|
-
this.firstRangeTotalSize = _toConsumableArray(this.sizes.values()).reduce(function (acc, val) {
|
|
243
|
-
return acc + val;
|
|
244
|
-
}, 0);
|
|
245
|
-
this.firstRangeAverageSize = Math.round(this.firstRangeTotalSize / this.sizes.size);
|
|
246
|
-
} else {
|
|
247
|
-
// it's done using
|
|
248
|
-
delete this.firstRangeTotalSize;
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
} // in some special situation (e.g. length change) we need to update in a row
|
|
252
|
-
// try goiong to render next range by a leading buffer according to current direction
|
|
253
|
-
|
|
254
|
-
}, {
|
|
255
|
-
key: "handleDataSourcesChange",
|
|
256
|
-
value: function handleDataSourcesChange() {
|
|
257
|
-
var start = this.range.start;
|
|
258
|
-
|
|
259
|
-
if (this.isFront()) {
|
|
260
|
-
start = start - LEADING_BUFFER;
|
|
261
|
-
} else if (this.isBehind()) {
|
|
262
|
-
start = start + LEADING_BUFFER;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
start = Math.max(start, 0);
|
|
266
|
-
this.updateRange(this.range.start, this.getEndByStart(start));
|
|
267
|
-
} // when slot size change, we also need force update
|
|
268
|
-
|
|
269
|
-
}, {
|
|
270
|
-
key: "handleSlotSizeChange",
|
|
271
|
-
value: function handleSlotSizeChange() {
|
|
272
|
-
this.handleDataSourcesChange();
|
|
273
|
-
} // calculating range on scroll
|
|
274
|
-
|
|
275
|
-
}, {
|
|
276
|
-
key: "handleScroll",
|
|
277
|
-
value: function handleScroll(offset) {
|
|
278
|
-
this.direction = offset < this.offset ? DIRECTION_TYPE.FRONT : DIRECTION_TYPE.BEHIND;
|
|
279
|
-
this.offset = offset;
|
|
280
|
-
|
|
281
|
-
if (!this.param) {
|
|
282
|
-
return;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
if (this.direction === DIRECTION_TYPE.FRONT) {
|
|
286
|
-
this.handleFront();
|
|
287
|
-
} else if (this.direction === DIRECTION_TYPE.BEHIND) {
|
|
288
|
-
this.handleBehind();
|
|
289
|
-
}
|
|
290
|
-
} // ----------- public method end -----------
|
|
291
|
-
|
|
292
|
-
}, {
|
|
293
|
-
key: "handleFront",
|
|
294
|
-
value: function handleFront() {
|
|
295
|
-
var overs = this.getScrollOvers(); // should not change range if start doesn't exceed overs
|
|
296
|
-
|
|
297
|
-
if (overs > this.range.start) {
|
|
298
|
-
return;
|
|
299
|
-
} // move up start by a buffer length, and make sure its safety
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
var start = Math.max(overs - this.param.buffer, 0);
|
|
303
|
-
this.checkRange(start, this.getEndByStart(start));
|
|
304
|
-
}
|
|
305
|
-
}, {
|
|
306
|
-
key: "handleBehind",
|
|
307
|
-
value: function handleBehind() {
|
|
308
|
-
var overs = this.getScrollOvers(); // range should not change if scroll overs within buffer
|
|
309
|
-
|
|
310
|
-
if (overs < this.range.start + this.param.buffer) {
|
|
311
|
-
return;
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
this.checkRange(overs, this.getEndByStart(overs));
|
|
315
|
-
} // return the pass overs according to current scroll offset
|
|
316
|
-
|
|
317
|
-
}, {
|
|
318
|
-
key: "getScrollOvers",
|
|
319
|
-
value: function getScrollOvers() {
|
|
320
|
-
// if slot header exist, we need subtract its size
|
|
321
|
-
var offset = this.offset - this.param.slotHeaderSize;
|
|
322
|
-
|
|
323
|
-
if (offset <= 0) {
|
|
324
|
-
return 0;
|
|
325
|
-
} // if is fixed type, that can be easily
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
if (this.isFixedType()) {
|
|
329
|
-
return Math.floor(offset / this.fixedSizeValue);
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
var low = 0;
|
|
333
|
-
var middle = 0;
|
|
334
|
-
var middleOffset = 0;
|
|
335
|
-
var high = this.param.uniqueIds.length;
|
|
336
|
-
|
|
337
|
-
while (low <= high) {
|
|
338
|
-
// this.__bsearchCalls++
|
|
339
|
-
middle = low + Math.floor((high - low) / 2);
|
|
340
|
-
middleOffset = this.getIndexOffset(middle);
|
|
341
|
-
|
|
342
|
-
if (middleOffset === offset) {
|
|
343
|
-
return middle;
|
|
344
|
-
} else if (middleOffset < offset) {
|
|
345
|
-
low = middle + 1;
|
|
346
|
-
} else if (middleOffset > offset) {
|
|
347
|
-
high = middle - 1;
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
return low > 0 ? --low : 0;
|
|
352
|
-
} // return a scroll offset from given index, can efficiency be improved more here?
|
|
353
|
-
// although the call frequency is very high, its only a superposition of numbers
|
|
354
|
-
|
|
355
|
-
}, {
|
|
356
|
-
key: "getIndexOffset",
|
|
357
|
-
value: function getIndexOffset(givenIndex) {
|
|
358
|
-
if (!givenIndex) {
|
|
359
|
-
return 0;
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
var offset = 0;
|
|
363
|
-
var indexSize = 0;
|
|
364
|
-
|
|
365
|
-
for (var index = 0; index < givenIndex; index++) {
|
|
366
|
-
// this.__getIndexOffsetCalls++
|
|
367
|
-
indexSize = this.sizes.get(this.param.uniqueIds[index]);
|
|
368
|
-
offset = offset + (typeof indexSize === 'number' ? indexSize : this.getEstimateSize());
|
|
369
|
-
} // remember last calculate index
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
this.lastCalcIndex = Math.max(this.lastCalcIndex, givenIndex - 1);
|
|
373
|
-
this.lastCalcIndex = Math.min(this.lastCalcIndex, this.getLastIndex());
|
|
374
|
-
return offset;
|
|
375
|
-
} // is fixed size type
|
|
376
|
-
|
|
377
|
-
}, {
|
|
378
|
-
key: "isFixedType",
|
|
379
|
-
value: function isFixedType() {
|
|
380
|
-
return this.calcType === CALC_TYPE.FIXED;
|
|
381
|
-
} // return the real last index
|
|
382
|
-
|
|
383
|
-
}, {
|
|
384
|
-
key: "getLastIndex",
|
|
385
|
-
value: function getLastIndex() {
|
|
386
|
-
return this.param.uniqueIds.length - 1;
|
|
387
|
-
} // in some conditions range is broke, we need correct it
|
|
388
|
-
// and then decide whether need update to next range
|
|
389
|
-
|
|
390
|
-
}, {
|
|
391
|
-
key: "checkRange",
|
|
392
|
-
value: function checkRange(start, end) {
|
|
393
|
-
var keeps = this.param.keeps;
|
|
394
|
-
var total = this.param.uniqueIds.length; // datas less than keeps, render all
|
|
395
|
-
|
|
396
|
-
if (total <= keeps) {
|
|
397
|
-
start = 0;
|
|
398
|
-
end = this.getLastIndex();
|
|
399
|
-
} else if (end - start < keeps - 1) {
|
|
400
|
-
// if range length is less than keeps, corrent it base on end
|
|
401
|
-
start = end - keeps + 1;
|
|
402
|
-
}
|
|
403
|
-
|
|
404
|
-
if (this.range.start !== start) {
|
|
405
|
-
this.updateRange(start, end);
|
|
406
|
-
}
|
|
407
|
-
} // setting to a new range and rerender
|
|
408
|
-
|
|
409
|
-
}, {
|
|
410
|
-
key: "updateRange",
|
|
411
|
-
value: function updateRange(start, end) {
|
|
412
|
-
this.range.start = start;
|
|
413
|
-
this.range.end = end;
|
|
414
|
-
this.range.padFront = this.getPadFront();
|
|
415
|
-
this.range.padBehind = this.getPadBehind();
|
|
416
|
-
this.callUpdate(this.getRange());
|
|
417
|
-
} // return end base on start
|
|
418
|
-
|
|
419
|
-
}, {
|
|
420
|
-
key: "getEndByStart",
|
|
421
|
-
value: function getEndByStart(start) {
|
|
422
|
-
var theoryEnd = start + this.param.keeps - 1;
|
|
423
|
-
var truelyEnd = Math.min(theoryEnd, this.getLastIndex());
|
|
424
|
-
return truelyEnd;
|
|
425
|
-
} // return total front offset
|
|
426
|
-
|
|
427
|
-
}, {
|
|
428
|
-
key: "getPadFront",
|
|
429
|
-
value: function getPadFront() {
|
|
430
|
-
if (this.isFixedType()) {
|
|
431
|
-
return this.fixedSizeValue * this.range.start;
|
|
432
|
-
} else {
|
|
433
|
-
return this.getIndexOffset(this.range.start);
|
|
434
|
-
}
|
|
435
|
-
} // return total behind offset
|
|
436
|
-
|
|
437
|
-
}, {
|
|
438
|
-
key: "getPadBehind",
|
|
439
|
-
value: function getPadBehind() {
|
|
440
|
-
var end = this.range.end;
|
|
441
|
-
var lastIndex = this.getLastIndex();
|
|
442
|
-
|
|
443
|
-
if (this.isFixedType()) {
|
|
444
|
-
return (lastIndex - end) * this.fixedSizeValue;
|
|
445
|
-
} // if it's all calculated, return the exactly offset
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
if (this.lastCalcIndex === lastIndex) {
|
|
449
|
-
return this.getIndexOffset(lastIndex) - this.getIndexOffset(end);
|
|
450
|
-
} else {
|
|
451
|
-
// if not, use a estimated value
|
|
452
|
-
return (lastIndex - end) * this.getEstimateSize();
|
|
453
|
-
}
|
|
454
|
-
} // get the item estimate size
|
|
455
|
-
|
|
456
|
-
}, {
|
|
457
|
-
key: "getEstimateSize",
|
|
458
|
-
value: function getEstimateSize() {
|
|
459
|
-
return this.isFixedType() ? this.fixedSizeValue : this.firstRangeAverageSize || this.param.estimateSize;
|
|
460
|
-
}
|
|
461
|
-
}]);
|
|
462
|
-
|
|
463
|
-
return Virtual;
|
|
464
|
-
}();
|
|
465
|
-
|
|
466
|
-
/**
|
|
467
|
-
* props declaration for default, item and slot component
|
|
468
|
-
*/
|
|
469
|
-
var VirtualProps = {
|
|
470
|
-
dataKey: {
|
|
471
|
-
type: [String, Function],
|
|
472
|
-
required: true
|
|
473
|
-
},
|
|
474
|
-
dataSources: {
|
|
475
|
-
type: Array,
|
|
476
|
-
required: true
|
|
477
|
-
},
|
|
478
|
-
dataComponent: {
|
|
479
|
-
type: [Object, Function],
|
|
480
|
-
required: true
|
|
481
|
-
},
|
|
482
|
-
keeps: {
|
|
483
|
-
type: Number,
|
|
484
|
-
"default": 30
|
|
485
|
-
},
|
|
486
|
-
extraProps: {
|
|
487
|
-
type: Object
|
|
488
|
-
},
|
|
489
|
-
estimateSize: {
|
|
490
|
-
type: Number,
|
|
491
|
-
"default": 50
|
|
492
|
-
},
|
|
493
|
-
direction: {
|
|
494
|
-
type: String,
|
|
495
|
-
"default": 'vertical' // the other value is horizontal
|
|
496
|
-
|
|
497
|
-
},
|
|
498
|
-
start: {
|
|
499
|
-
type: Number,
|
|
500
|
-
"default": 0
|
|
501
|
-
},
|
|
502
|
-
offset: {
|
|
503
|
-
type: Number,
|
|
504
|
-
"default": 0
|
|
505
|
-
},
|
|
506
|
-
topThreshold: {
|
|
507
|
-
type: Number,
|
|
508
|
-
"default": 0
|
|
509
|
-
},
|
|
510
|
-
bottomThreshold: {
|
|
511
|
-
type: Number,
|
|
512
|
-
"default": 0
|
|
513
|
-
},
|
|
514
|
-
pageMode: {
|
|
515
|
-
type: Boolean,
|
|
516
|
-
"default": false
|
|
517
|
-
},
|
|
518
|
-
rootTag: {
|
|
519
|
-
type: String,
|
|
520
|
-
"default": 'div'
|
|
521
|
-
},
|
|
522
|
-
wrapTag: {
|
|
523
|
-
type: String,
|
|
524
|
-
"default": 'div'
|
|
525
|
-
},
|
|
526
|
-
wrapClass: {
|
|
527
|
-
type: String,
|
|
528
|
-
"default": ''
|
|
529
|
-
},
|
|
530
|
-
wrapStyle: {
|
|
531
|
-
type: Object
|
|
532
|
-
},
|
|
533
|
-
itemTag: {
|
|
534
|
-
type: String,
|
|
535
|
-
"default": 'div'
|
|
536
|
-
},
|
|
537
|
-
itemClass: {
|
|
538
|
-
type: String,
|
|
539
|
-
"default": ''
|
|
540
|
-
},
|
|
541
|
-
itemClassAdd: {
|
|
542
|
-
type: Function
|
|
543
|
-
},
|
|
544
|
-
itemStyle: {
|
|
545
|
-
type: Object
|
|
546
|
-
},
|
|
547
|
-
headerTag: {
|
|
548
|
-
type: String,
|
|
549
|
-
"default": 'div'
|
|
550
|
-
},
|
|
551
|
-
headerClass: {
|
|
552
|
-
type: String,
|
|
553
|
-
"default": ''
|
|
554
|
-
},
|
|
555
|
-
headerStyle: {
|
|
556
|
-
type: Object
|
|
557
|
-
},
|
|
558
|
-
footerTag: {
|
|
559
|
-
type: String,
|
|
560
|
-
"default": 'div'
|
|
561
|
-
},
|
|
562
|
-
footerClass: {
|
|
563
|
-
type: String,
|
|
564
|
-
"default": ''
|
|
565
|
-
},
|
|
566
|
-
footerStyle: {
|
|
567
|
-
type: Object
|
|
568
|
-
},
|
|
569
|
-
itemScopedSlots: {
|
|
570
|
-
type: Object
|
|
571
|
-
}
|
|
572
|
-
};
|
|
573
|
-
var ItemProps = {
|
|
574
|
-
index: {
|
|
575
|
-
type: Number
|
|
576
|
-
},
|
|
577
|
-
event: {
|
|
578
|
-
type: String
|
|
579
|
-
},
|
|
580
|
-
tag: {
|
|
581
|
-
type: String
|
|
582
|
-
},
|
|
583
|
-
horizontal: {
|
|
584
|
-
type: Boolean
|
|
585
|
-
},
|
|
586
|
-
source: {
|
|
587
|
-
type: Object
|
|
588
|
-
},
|
|
589
|
-
component: {
|
|
590
|
-
type: [Object, Function]
|
|
591
|
-
},
|
|
592
|
-
slotComponent: {
|
|
593
|
-
type: Function
|
|
594
|
-
},
|
|
595
|
-
uniqueKey: {
|
|
596
|
-
type: [String, Number]
|
|
597
|
-
},
|
|
598
|
-
extraProps: {
|
|
599
|
-
type: Object
|
|
600
|
-
},
|
|
601
|
-
scopedSlots: {
|
|
602
|
-
type: Object
|
|
603
|
-
}
|
|
604
|
-
};
|
|
605
|
-
var SlotProps = {
|
|
606
|
-
event: {
|
|
607
|
-
type: String
|
|
608
|
-
},
|
|
609
|
-
uniqueKey: {
|
|
610
|
-
type: String
|
|
611
|
-
},
|
|
612
|
-
tag: {
|
|
613
|
-
type: String
|
|
614
|
-
},
|
|
615
|
-
horizontal: {
|
|
616
|
-
type: Boolean
|
|
617
|
-
}
|
|
618
|
-
};
|
|
619
|
-
|
|
620
|
-
var Wrapper = {
|
|
621
|
-
created: function created() {
|
|
622
|
-
this.shapeKey = this.horizontal ? 'offsetWidth' : 'offsetHeight';
|
|
623
|
-
},
|
|
624
|
-
mounted: function mounted() {
|
|
625
|
-
var _this = this;
|
|
626
|
-
|
|
627
|
-
if (typeof ResizeObserver !== 'undefined') {
|
|
628
|
-
this.resizeObserver = new ResizeObserver(function () {
|
|
629
|
-
_this.dispatchSizeChange();
|
|
630
|
-
});
|
|
631
|
-
this.resizeObserver.observe(this.$el);
|
|
632
|
-
}
|
|
633
|
-
},
|
|
634
|
-
// since componet will be reused, so disptach when updated
|
|
635
|
-
updated: function updated() {
|
|
636
|
-
this.dispatchSizeChange();
|
|
637
|
-
},
|
|
638
|
-
beforeDestroy: function beforeDestroy() {
|
|
639
|
-
if (this.resizeObserver) {
|
|
640
|
-
this.resizeObserver.disconnect();
|
|
641
|
-
this.resizeObserver = null;
|
|
642
|
-
}
|
|
643
|
-
},
|
|
644
|
-
methods: {
|
|
645
|
-
getCurrentSize: function getCurrentSize() {
|
|
646
|
-
return this.$el ? this.$el[this.shapeKey] : 0;
|
|
647
|
-
},
|
|
648
|
-
// tell parent current size identify by unqiue key
|
|
649
|
-
dispatchSizeChange: function dispatchSizeChange() {
|
|
650
|
-
this.$parent.$emit(this.event, this.uniqueKey, this.getCurrentSize(), this.hasInitial);
|
|
651
|
-
}
|
|
652
|
-
}
|
|
653
|
-
}; // wrapping for item
|
|
654
|
-
|
|
655
|
-
var Item = Vue.component('virtual-list-item', {
|
|
656
|
-
mixins: [Wrapper],
|
|
657
|
-
props: ItemProps,
|
|
658
|
-
render: function render(h) {
|
|
659
|
-
var tag = this.tag,
|
|
660
|
-
component = this.component,
|
|
661
|
-
_this$extraProps = this.extraProps,
|
|
662
|
-
extraProps = _this$extraProps === void 0 ? {} : _this$extraProps,
|
|
663
|
-
index = this.index,
|
|
664
|
-
source = this.source,
|
|
665
|
-
_this$scopedSlots = this.scopedSlots,
|
|
666
|
-
scopedSlots = _this$scopedSlots === void 0 ? {} : _this$scopedSlots,
|
|
667
|
-
uniqueKey = this.uniqueKey,
|
|
668
|
-
slotComponent = this.slotComponent;
|
|
669
|
-
|
|
670
|
-
var props = _objectSpread2({}, extraProps, {
|
|
671
|
-
source: source,
|
|
672
|
-
index: index
|
|
673
|
-
});
|
|
674
|
-
|
|
675
|
-
return h(tag, {
|
|
676
|
-
key: uniqueKey,
|
|
677
|
-
attrs: {
|
|
678
|
-
role: 'listitem'
|
|
679
|
-
}
|
|
680
|
-
}, [slotComponent ? h('div', slotComponent({
|
|
681
|
-
item: source,
|
|
682
|
-
index: index,
|
|
683
|
-
scope: props
|
|
684
|
-
})) : h(component, {
|
|
685
|
-
props: props,
|
|
686
|
-
scopedSlots: scopedSlots
|
|
687
|
-
})]);
|
|
688
|
-
}
|
|
689
|
-
}); // wrapping for slot
|
|
690
|
-
|
|
691
|
-
var Slot = Vue.component('virtual-list-slot', {
|
|
692
|
-
mixins: [Wrapper],
|
|
693
|
-
props: SlotProps,
|
|
694
|
-
render: function render(h) {
|
|
695
|
-
var tag = this.tag,
|
|
696
|
-
uniqueKey = this.uniqueKey;
|
|
697
|
-
return h(tag, {
|
|
698
|
-
key: uniqueKey,
|
|
699
|
-
attrs: {
|
|
700
|
-
role: uniqueKey
|
|
701
|
-
}
|
|
702
|
-
}, this.$slots["default"]);
|
|
703
|
-
}
|
|
704
|
-
});
|
|
705
|
-
|
|
706
|
-
/**
|
|
707
|
-
* virtual list default component
|
|
708
|
-
*/
|
|
709
|
-
var EVENT_TYPE = {
|
|
710
|
-
ITEM: 'item_resize',
|
|
711
|
-
SLOT: 'slot_resize'
|
|
712
|
-
};
|
|
713
|
-
var SLOT_TYPE = {
|
|
714
|
-
HEADER: 'thead',
|
|
715
|
-
// string value also use for aria role attribute
|
|
716
|
-
FOOTER: 'tfoot'
|
|
717
|
-
};
|
|
718
|
-
var VirtualList = Vue.component('virtual-list', {
|
|
719
|
-
props: VirtualProps,
|
|
720
|
-
data: function data() {
|
|
721
|
-
return {
|
|
722
|
-
range: null
|
|
723
|
-
};
|
|
724
|
-
},
|
|
725
|
-
watch: {
|
|
726
|
-
'dataSources.length': function dataSourcesLength() {
|
|
727
|
-
this.virtual.updateParam('uniqueIds', this.getUniqueIdFromDataSources());
|
|
728
|
-
this.virtual.handleDataSourcesChange();
|
|
729
|
-
},
|
|
730
|
-
keeps: function keeps(newValue) {
|
|
731
|
-
this.virtual.updateParam('keeps', newValue);
|
|
732
|
-
this.virtual.handleSlotSizeChange();
|
|
733
|
-
},
|
|
734
|
-
start: function start(newValue) {
|
|
735
|
-
this.scrollToIndex(newValue);
|
|
736
|
-
},
|
|
737
|
-
offset: function offset(newValue) {
|
|
738
|
-
this.scrollToOffset(newValue);
|
|
739
|
-
}
|
|
740
|
-
},
|
|
741
|
-
created: function created() {
|
|
742
|
-
this.isHorizontal = this.direction === 'horizontal';
|
|
743
|
-
this.directionKey = this.isHorizontal ? 'scrollLeft' : 'scrollTop';
|
|
744
|
-
this.installVirtual(); // listen item size change
|
|
745
|
-
|
|
746
|
-
this.$on(EVENT_TYPE.ITEM, this.onItemResized); // listen slot size change
|
|
747
|
-
|
|
748
|
-
if (this.$slots.header || this.$slots.footer) {
|
|
749
|
-
this.$on(EVENT_TYPE.SLOT, this.onSlotResized);
|
|
750
|
-
}
|
|
751
|
-
},
|
|
752
|
-
// set back offset when awake from keep-alive
|
|
753
|
-
activated: function activated() {
|
|
754
|
-
this.scrollToOffset(this.virtual.offset);
|
|
755
|
-
},
|
|
756
|
-
mounted: function mounted() {
|
|
757
|
-
// set position
|
|
758
|
-
if (this.start) {
|
|
759
|
-
this.scrollToIndex(this.start);
|
|
760
|
-
} else if (this.offset) {
|
|
761
|
-
this.scrollToOffset(this.offset);
|
|
762
|
-
} // in page mode we bind scroll event to document
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
if (this.pageMode) {
|
|
766
|
-
this.updatePageModeFront();
|
|
767
|
-
document.addEventListener('scroll', this.onScroll, {
|
|
768
|
-
passive: false
|
|
769
|
-
});
|
|
770
|
-
}
|
|
771
|
-
},
|
|
772
|
-
beforeDestroy: function beforeDestroy() {
|
|
773
|
-
this.virtual.destroy();
|
|
774
|
-
|
|
775
|
-
if (this.pageMode) {
|
|
776
|
-
document.removeEventListener('scroll', this.onScroll);
|
|
777
|
-
}
|
|
778
|
-
},
|
|
779
|
-
methods: {
|
|
780
|
-
// get item size by id
|
|
781
|
-
getSize: function getSize(id) {
|
|
782
|
-
return this.virtual.sizes.get(id);
|
|
783
|
-
},
|
|
784
|
-
// get the total number of stored (rendered) items
|
|
785
|
-
getSizes: function getSizes() {
|
|
786
|
-
return this.virtual.sizes.size;
|
|
787
|
-
},
|
|
788
|
-
// return current scroll offset
|
|
789
|
-
getOffset: function getOffset() {
|
|
790
|
-
if (this.pageMode) {
|
|
791
|
-
return document.documentElement[this.directionKey] || document.body[this.directionKey];
|
|
792
|
-
} else {
|
|
793
|
-
var root = this.$refs.root;
|
|
794
|
-
return root ? Math.ceil(root[this.directionKey]) : 0;
|
|
795
|
-
}
|
|
796
|
-
},
|
|
797
|
-
// return client viewport size
|
|
798
|
-
getClientSize: function getClientSize() {
|
|
799
|
-
var key = this.isHorizontal ? 'clientWidth' : 'clientHeight';
|
|
800
|
-
|
|
801
|
-
if (this.pageMode) {
|
|
802
|
-
return document.documentElement[key] || document.body[key];
|
|
803
|
-
} else {
|
|
804
|
-
var root = this.$refs.root;
|
|
805
|
-
return root ? Math.ceil(root[key]) : 0;
|
|
806
|
-
}
|
|
807
|
-
},
|
|
808
|
-
// return all scroll size
|
|
809
|
-
getScrollSize: function getScrollSize() {
|
|
810
|
-
var key = this.isHorizontal ? 'scrollWidth' : 'scrollHeight';
|
|
811
|
-
|
|
812
|
-
if (this.pageMode) {
|
|
813
|
-
return document.documentElement[key] || document.body[key];
|
|
814
|
-
} else {
|
|
815
|
-
var root = this.$refs.root;
|
|
816
|
-
return root ? Math.ceil(root[key]) : 0;
|
|
817
|
-
}
|
|
818
|
-
},
|
|
819
|
-
// set current scroll position to a expectant offset
|
|
820
|
-
scrollToOffset: function scrollToOffset(offset) {
|
|
821
|
-
if (this.pageMode) {
|
|
822
|
-
document.body[this.directionKey] = offset;
|
|
823
|
-
document.documentElement[this.directionKey] = offset;
|
|
824
|
-
} else {
|
|
825
|
-
var root = this.$refs.root;
|
|
826
|
-
|
|
827
|
-
if (root) {
|
|
828
|
-
root[this.directionKey] = offset;
|
|
829
|
-
}
|
|
830
|
-
}
|
|
831
|
-
},
|
|
832
|
-
// set current scroll position to a expectant index
|
|
833
|
-
scrollToIndex: function scrollToIndex(index) {
|
|
834
|
-
// scroll to bottom
|
|
835
|
-
if (index >= this.dataSources.length - 1) {
|
|
836
|
-
this.scrollToBottom();
|
|
837
|
-
} else {
|
|
838
|
-
var offset = this.virtual.getOffset(index);
|
|
839
|
-
this.scrollToOffset(offset);
|
|
840
|
-
}
|
|
841
|
-
},
|
|
842
|
-
// set current scroll position to bottom
|
|
843
|
-
scrollToBottom: function scrollToBottom() {
|
|
844
|
-
var _this = this;
|
|
845
|
-
|
|
846
|
-
var shepherd = this.$refs.shepherd;
|
|
847
|
-
|
|
848
|
-
if (shepherd) {
|
|
849
|
-
var offset = shepherd[this.isHorizontal ? 'offsetLeft' : 'offsetTop'];
|
|
850
|
-
this.scrollToOffset(offset); // check if it's really scrolled to the bottom
|
|
851
|
-
// maybe list doesn't render and calculate to last range
|
|
852
|
-
// so we need retry in next event loop until it really at bottom
|
|
853
|
-
|
|
854
|
-
setTimeout(function () {
|
|
855
|
-
if (_this.getOffset() + _this.getClientSize() < _this.getScrollSize()) {
|
|
856
|
-
_this.scrollToBottom();
|
|
857
|
-
}
|
|
858
|
-
}, 3);
|
|
859
|
-
}
|
|
860
|
-
},
|
|
861
|
-
// when using page mode we need update slot header size manually
|
|
862
|
-
// taking root offset relative to the browser as slot header size
|
|
863
|
-
updatePageModeFront: function updatePageModeFront() {
|
|
864
|
-
var root = this.$refs.root;
|
|
865
|
-
|
|
866
|
-
if (root) {
|
|
867
|
-
var rect = root.getBoundingClientRect();
|
|
868
|
-
var defaultView = root.ownerDocument.defaultView;
|
|
869
|
-
var offsetFront = this.isHorizontal ? rect.left + defaultView.pageXOffset : rect.top + defaultView.pageYOffset;
|
|
870
|
-
this.virtual.updateParam('slotHeaderSize', offsetFront);
|
|
871
|
-
}
|
|
872
|
-
},
|
|
873
|
-
// reset all state back to initial
|
|
874
|
-
reset: function reset() {
|
|
875
|
-
this.virtual.destroy();
|
|
876
|
-
this.scrollToOffset(0);
|
|
877
|
-
this.installVirtual();
|
|
878
|
-
},
|
|
879
|
-
// ----------- public method end -----------
|
|
880
|
-
installVirtual: function installVirtual() {
|
|
881
|
-
this.virtual = new Virtual({
|
|
882
|
-
slotHeaderSize: 0,
|
|
883
|
-
slotFooterSize: 0,
|
|
884
|
-
keeps: this.keeps,
|
|
885
|
-
estimateSize: this.estimateSize,
|
|
886
|
-
buffer: Math.round(this.keeps / 3),
|
|
887
|
-
// recommend for a third of keeps
|
|
888
|
-
uniqueIds: this.getUniqueIdFromDataSources()
|
|
889
|
-
}, this.onRangeChanged); // sync initial range
|
|
890
|
-
|
|
891
|
-
this.range = this.virtual.getRange();
|
|
892
|
-
},
|
|
893
|
-
getUniqueIdFromDataSources: function getUniqueIdFromDataSources() {
|
|
894
|
-
var dataKey = this.dataKey;
|
|
895
|
-
return this.dataSources.map(function (dataSource) {
|
|
896
|
-
return typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey];
|
|
897
|
-
});
|
|
898
|
-
},
|
|
899
|
-
// event called when each item mounted or size changed
|
|
900
|
-
onItemResized: function onItemResized(id, size) {
|
|
901
|
-
this.virtual.saveSize(id, size);
|
|
902
|
-
this.$emit('resized', id, size);
|
|
903
|
-
},
|
|
904
|
-
// event called when slot mounted or size changed
|
|
905
|
-
onSlotResized: function onSlotResized(type, size, hasInit) {
|
|
906
|
-
if (type === SLOT_TYPE.HEADER) {
|
|
907
|
-
this.virtual.updateParam('slotHeaderSize', size);
|
|
908
|
-
} else if (type === SLOT_TYPE.FOOTER) {
|
|
909
|
-
this.virtual.updateParam('slotFooterSize', size);
|
|
910
|
-
}
|
|
911
|
-
|
|
912
|
-
if (hasInit) {
|
|
913
|
-
this.virtual.handleSlotSizeChange();
|
|
914
|
-
}
|
|
915
|
-
},
|
|
916
|
-
// here is the rerendering entry
|
|
917
|
-
onRangeChanged: function onRangeChanged(range) {
|
|
918
|
-
this.range = range;
|
|
919
|
-
},
|
|
920
|
-
onScroll: function onScroll(evt) {
|
|
921
|
-
var offset = this.getOffset();
|
|
922
|
-
var clientSize = this.getClientSize();
|
|
923
|
-
var scrollSize = this.getScrollSize(); // iOS scroll-spring-back behavior will make direction mistake
|
|
924
|
-
|
|
925
|
-
if (offset < 0 || offset + clientSize > scrollSize + 1 || !scrollSize) {
|
|
926
|
-
return;
|
|
927
|
-
}
|
|
928
|
-
|
|
929
|
-
this.virtual.handleScroll(offset);
|
|
930
|
-
this.emitEvent(offset, clientSize, scrollSize, evt);
|
|
931
|
-
},
|
|
932
|
-
// emit event in special position
|
|
933
|
-
emitEvent: function emitEvent(offset, clientSize, scrollSize, evt) {
|
|
934
|
-
this.$emit('scroll', evt, this.virtual.getRange());
|
|
935
|
-
|
|
936
|
-
if (this.virtual.isFront() && !!this.dataSources.length && offset - this.topThreshold <= 0) {
|
|
937
|
-
this.$emit('totop');
|
|
938
|
-
} else if (this.virtual.isBehind() && offset + clientSize + this.bottomThreshold >= scrollSize) {
|
|
939
|
-
this.$emit('tobottom');
|
|
940
|
-
}
|
|
941
|
-
},
|
|
942
|
-
// get the real render slots based on range data
|
|
943
|
-
// in-place patch strategy will try to reuse components as possible
|
|
944
|
-
// so those components that are reused will not trigger lifecycle mounted
|
|
945
|
-
getRenderSlots: function getRenderSlots(h) {
|
|
946
|
-
var slots = [];
|
|
947
|
-
var _this$range = this.range,
|
|
948
|
-
start = _this$range.start,
|
|
949
|
-
end = _this$range.end;
|
|
950
|
-
var dataSources = this.dataSources,
|
|
951
|
-
dataKey = this.dataKey,
|
|
952
|
-
itemClass = this.itemClass,
|
|
953
|
-
itemTag = this.itemTag,
|
|
954
|
-
itemStyle = this.itemStyle,
|
|
955
|
-
isHorizontal = this.isHorizontal,
|
|
956
|
-
extraProps = this.extraProps,
|
|
957
|
-
dataComponent = this.dataComponent,
|
|
958
|
-
itemScopedSlots = this.itemScopedSlots;
|
|
959
|
-
var slotComponent = this.$scopedSlots && this.$scopedSlots.item;
|
|
960
|
-
|
|
961
|
-
for (var index = start; index <= end; index++) {
|
|
962
|
-
var dataSource = dataSources[index];
|
|
963
|
-
|
|
964
|
-
if (dataSource) {
|
|
965
|
-
var uniqueKey = typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey];
|
|
966
|
-
|
|
967
|
-
if (typeof uniqueKey === 'string' || typeof uniqueKey === 'number') {
|
|
968
|
-
slots.push(h(Item, {
|
|
969
|
-
props: {
|
|
970
|
-
index: index,
|
|
971
|
-
tag: itemTag,
|
|
972
|
-
event: EVENT_TYPE.ITEM,
|
|
973
|
-
horizontal: isHorizontal,
|
|
974
|
-
uniqueKey: uniqueKey,
|
|
975
|
-
source: dataSource,
|
|
976
|
-
extraProps: extraProps,
|
|
977
|
-
component: dataComponent,
|
|
978
|
-
slotComponent: slotComponent,
|
|
979
|
-
scopedSlots: itemScopedSlots
|
|
980
|
-
},
|
|
981
|
-
style: itemStyle,
|
|
982
|
-
"class": "".concat(itemClass).concat(this.itemClassAdd ? ' ' + this.itemClassAdd(index) : '')
|
|
983
|
-
}));
|
|
984
|
-
} else {
|
|
985
|
-
console.warn("Cannot get the data-key '".concat(dataKey, "' from data-sources."));
|
|
986
|
-
}
|
|
987
|
-
} else {
|
|
988
|
-
console.warn("Cannot get the index '".concat(index, "' from data-sources."));
|
|
989
|
-
}
|
|
990
|
-
}
|
|
991
|
-
|
|
992
|
-
return slots;
|
|
993
|
-
}
|
|
994
|
-
},
|
|
995
|
-
// render function, a closer-to-the-compiler alternative to templates
|
|
996
|
-
// https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
|
|
997
|
-
render: function render(h) {
|
|
998
|
-
var _this$$slots = this.$slots,
|
|
999
|
-
header = _this$$slots.header,
|
|
1000
|
-
footer = _this$$slots.footer;
|
|
1001
|
-
var _this$range2 = this.range,
|
|
1002
|
-
padFront = _this$range2.padFront,
|
|
1003
|
-
padBehind = _this$range2.padBehind;
|
|
1004
|
-
var isHorizontal = this.isHorizontal,
|
|
1005
|
-
pageMode = this.pageMode,
|
|
1006
|
-
rootTag = this.rootTag,
|
|
1007
|
-
wrapTag = this.wrapTag,
|
|
1008
|
-
wrapClass = this.wrapClass,
|
|
1009
|
-
wrapStyle = this.wrapStyle,
|
|
1010
|
-
headerTag = this.headerTag,
|
|
1011
|
-
headerClass = this.headerClass,
|
|
1012
|
-
headerStyle = this.headerStyle,
|
|
1013
|
-
footerTag = this.footerTag,
|
|
1014
|
-
footerClass = this.footerClass,
|
|
1015
|
-
footerStyle = this.footerStyle;
|
|
1016
|
-
var paddingStyle = {
|
|
1017
|
-
padding: isHorizontal ? "0px ".concat(padBehind, "px 0px ").concat(padFront, "px") : "".concat(padFront, "px 0px ").concat(padBehind, "px")
|
|
1018
|
-
};
|
|
1019
|
-
var wrapperStyle = wrapStyle ? Object.assign({}, wrapStyle, paddingStyle) : paddingStyle;
|
|
1020
|
-
return h(rootTag, {
|
|
1021
|
-
ref: 'root',
|
|
1022
|
-
on: {
|
|
1023
|
-
'&scroll': !pageMode && this.onScroll
|
|
1024
|
-
}
|
|
1025
|
-
}, [// header slot
|
|
1026
|
-
header ? h(Slot, {
|
|
1027
|
-
"class": headerClass,
|
|
1028
|
-
style: headerStyle,
|
|
1029
|
-
props: {
|
|
1030
|
-
tag: headerTag,
|
|
1031
|
-
event: EVENT_TYPE.SLOT,
|
|
1032
|
-
uniqueKey: SLOT_TYPE.HEADER
|
|
1033
|
-
}
|
|
1034
|
-
}, header) : null, // main list
|
|
1035
|
-
h(wrapTag, {
|
|
1036
|
-
"class": wrapClass,
|
|
1037
|
-
attrs: {
|
|
1038
|
-
role: 'group'
|
|
1039
|
-
},
|
|
1040
|
-
style: wrapperStyle
|
|
1041
|
-
}, this.getRenderSlots(h)), // footer slot
|
|
1042
|
-
footer ? h(Slot, {
|
|
1043
|
-
"class": footerClass,
|
|
1044
|
-
style: footerStyle,
|
|
1045
|
-
props: {
|
|
1046
|
-
tag: footerTag,
|
|
1047
|
-
event: EVENT_TYPE.SLOT,
|
|
1048
|
-
uniqueKey: SLOT_TYPE.FOOTER
|
|
1049
|
-
}
|
|
1050
|
-
}, footer) : null, // an empty element use to scroll to bottom
|
|
1051
|
-
h('div', {
|
|
1052
|
-
ref: 'shepherd',
|
|
1053
|
-
style: {
|
|
1054
|
-
width: isHorizontal ? '0px' : '100%',
|
|
1055
|
-
height: isHorizontal ? '100%' : '0px'
|
|
1056
|
-
}
|
|
1057
|
-
})]);
|
|
1058
|
-
}
|
|
1059
|
-
});
|
|
1060
|
-
|
|
1061
|
-
return VirtualList;
|
|
1062
|
-
|
|
1063
|
-
})));
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
/***/ })
|
|
1067
|
-
|
|
1068
|
-
}]);
|
|
1069
|
-
//# sourceMappingURL=super-ui.umd.yarn.vue-virtual-scroll-list~bd67cfcd.js.map
|