vite-plugin-vue-devtools 1.0.0-rc.8 → 7.0.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/README.md +8 -172
- package/dist/client/assets/css-a-KJtBLB.js +505 -0
- package/dist/client/assets/diff--l9-nN5b.js +1 -0
- package/dist/client/assets/html-5-AIf93y.js +74 -0
- package/dist/client/assets/index-NNrCE7Vx.css +1 -0
- package/dist/client/assets/index-U-H6nGkn.js +1080 -0
- package/dist/client/assets/javascript-Of8SnKfU.js +699 -0
- package/dist/client/assets/json-t1qiHl76.js +25 -0
- package/dist/client/assets/onig-mBJmD8D5.js +1 -0
- package/dist/client/assets/shellscript-h1L64xId.js +4 -0
- package/dist/client/assets/typescript-b1Nw_bQe.js +666 -0
- package/dist/client/assets/unocss-runtime-kftsoZPE.js +2 -0
- package/dist/client/assets/vitesse-dark-5VceXvs6.js +1 -0
- package/dist/client/assets/vitesse-light-HOMMxGxw.js +1 -0
- package/dist/client/assets/vue-apis-Nh9IahXf.js +1 -0
- package/dist/client/assets/vue-html-eJ6eRCYJ.js +1 -0
- package/dist/client/assets/vue-nOwTje1i.js +2002 -0
- package/dist/client/assets/yaml-FtfhlYqU.js +200 -0
- package/dist/client/color-scheme.js +6 -0
- package/dist/client/css-hXHVOlj5.js +511 -0
- package/dist/client/devtools-panel.css +1 -0
- package/dist/client/devtools-panel.js +77722 -0
- package/dist/client/diff-nydZCsp5.js +7 -0
- package/dist/client/html-r4dic7N6.js +84 -0
- package/dist/client/index.html +13 -21
- package/dist/client/javascript-iu2g-HpL.js +705 -0
- package/dist/client/json-6ED1Ntns.js +31 -0
- package/dist/client/onig-NuJRzyUz.js +4 -0
- package/dist/client/shellscript-lFevXvOp.js +10 -0
- package/dist/client/typescript-SzFP_hYV.js +672 -0
- package/dist/client/unocss-runtime-c8-Zzj4C.js +1974 -0
- package/dist/client/vitesse-dark-Q3b2Vb5y.js +683 -0
- package/dist/client/vitesse-light-T_UJmsth.js +681 -0
- package/dist/client/vue-apis-j7ljdRbm.js +1127 -0
- package/dist/client/vue-html-IdJrwrVJ.js +16 -0
- package/dist/client/vue-vFbCUJfs.js +2118 -0
- package/dist/client/yaml-n_HyS7lr.js +206 -0
- package/dist/vite.cjs +116 -13794
- package/dist/vite.d.cts +6 -9
- package/dist/vite.d.mts +6 -9
- package/dist/vite.d.ts +6 -9
- package/dist/vite.mjs +113 -13774
- package/package.json +18 -19
- package/src/overlay/devtools-overlay.css +1 -0
- package/src/overlay/devtools-overlay.js +4 -0
- package/src/overlay.js +77 -0
- package/README.zh-CN.md +0 -186
- package/client.d.ts +0 -63
- package/dist/client/assets/DrawerRight.vue_vue_type_script_setup_true_lang-99688d1e.js +0 -81
- package/dist/client/assets/IconButton.vue_vue_type_script_setup_true_lang-48a6bea2.js +0 -26
- package/dist/client/assets/IconTitle.vue_vue_type_script_setup_true_lang-adb17252.js +0 -30
- package/dist/client/assets/IframeView.vue_vue_type_script_setup_true_lang-4ccdbf42.js +0 -96
- package/dist/client/assets/PanelGrids-664603ce.js +0 -15
- package/dist/client/assets/SectionBlock-0024395a.css +0 -18
- package/dist/client/assets/SectionBlock-04b7ab1e.js +0 -109
- package/dist/client/assets/StateFields.vue_vue_type_script_setup_true_lang-48cf50ad.js +0 -381
- package/dist/client/assets/Switch.vue_vue_type_script_setup_true_lang-d74bf986.js +0 -87
- package/dist/client/assets/TextInput.vue_vue_type_script_setup_true_lang-65c09c69.js +0 -38
- package/dist/client/assets/__eyedropper-7bbec9b2.js +0 -149
- package/dist/client/assets/_commonjsHelpers-7e83dbf2.js +0 -34
- package/dist/client/assets/assets-641818bf.js +0 -1597
- package/dist/client/assets/component-docs-7bd37475.js +0 -195
- package/dist/client/assets/components-b0181ea4.js +0 -790
- package/dist/client/assets/data-8729d21a.js +0 -399
- package/dist/client/assets/dayjs.min-f03ccd82.js +0 -13
- package/dist/client/assets/documentations-7cba8670.js +0 -276
- package/dist/client/assets/fuse.esm-c317b696.js +0 -1782
- package/dist/client/assets/graph-edf83976.js +0 -52092
- package/dist/client/assets/index-77d53487.js +0 -18551
- package/dist/client/assets/index-b5475fe0.css +0 -482
- package/dist/client/assets/inspect-d17224a9.js +0 -20
- package/dist/client/assets/jse-theme-dark-333a4654.js +0 -1565
- package/dist/client/assets/jse-theme-dark-351d62d5.css +0 -114
- package/dist/client/assets/npm-076ecb7c.js +0 -550
- package/dist/client/assets/npm-832f3f2c.css +0 -209
- package/dist/client/assets/overview-d99e7f18.js +0 -303
- package/dist/client/assets/pages-fca7d8d3.js +0 -561
- package/dist/client/assets/pinia-3f5b6c57.js +0 -108
- package/dist/client/assets/pinia-7ed2c830.svg +0 -1
- package/dist/client/assets/rerender-trace-3afd48a1.css +0 -14
- package/dist/client/assets/rerender-trace-5fc6fb22.js +0 -436
- package/dist/client/assets/routes-9567a43f.js +0 -132
- package/dist/client/assets/settings-5a2e184c.js +0 -9652
- package/dist/client/assets/settings-7bce89ae.css +0 -11
- package/dist/client/assets/splitpanes.es-26cdc434.js +0 -343
- package/dist/client/assets/timeline-20d79e43.js +0 -1480
- package/dist/client/assets/timeline-b315b2e0.css +0 -1
- package/dist/client/assets/vue-5d4e674c.svg +0 -1
- package/dist/client/assets/vueuse-995374f6.svg +0 -1
- package/src/app.js +0 -4
- package/src/views/ComponentInspector.vue +0 -68
- package/src/views/FrameBox.vue +0 -231
- package/src/views/Main.vue +0 -435
- package/src/views/RerenderIndicator.vue +0 -37
- package/src/views/composables.ts +0 -630
- package/src/views/utils.ts +0 -241
|
@@ -1,1480 +0,0 @@
|
|
|
1
|
-
import { _ as _sfc_main$2 } from './StateFields.vue_vue_type_script_setup_true_lang-48cf50ad.js';
|
|
2
|
-
import { _ as __unplugin_components_0 } from './PanelGrids-664603ce.js';
|
|
3
|
-
import { p as pushScopeId, a as popScopeId, n as nextTick, o as openBlock, c as createBlock, w as withScopeId, m as markRaw, s as shallowReactive, r as resolveComponent, b as resolveDirective, d as withDirectives, e as createElementBlock, f as renderSlot, g as createCommentVNode, h as withCtx, F as Fragment, i as renderList, j as resolveDynamicComponent, k as mergeProps, t as toHandlers, l as normalizeStyle, q as normalizeClass, u as createVNode, v as defineComponent, x as createBaseVNode, y as toDisplayString, z as unref, _ as __unplugin_components_7, A as timelineLayer, B as activeTimelineEvents, C as activeTimelineEventIndex, D as toggleTimelineEventIndex, E as timelineEventDetails, G as activeLayerId, H as toggleTimelineLayer } from './index-77d53487.js';
|
|
4
|
-
import { d as dayjs } from './dayjs.min-f03ccd82.js';
|
|
5
|
-
import { g, M } from './splitpanes.es-26cdc434.js';
|
|
6
|
-
import './IconButton.vue_vue_type_script_setup_true_lang-48a6bea2.js';
|
|
7
|
-
import './_commonjsHelpers-7e83dbf2.js';
|
|
8
|
-
|
|
9
|
-
function getInternetExplorerVersion() {
|
|
10
|
-
var ua = window.navigator.userAgent;
|
|
11
|
-
var msie = ua.indexOf('MSIE ');
|
|
12
|
-
|
|
13
|
-
if (msie > 0) {
|
|
14
|
-
// IE 10 or older => return version number
|
|
15
|
-
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
var trident = ua.indexOf('Trident/');
|
|
19
|
-
|
|
20
|
-
if (trident > 0) {
|
|
21
|
-
// IE 11 => return version number
|
|
22
|
-
var rv = ua.indexOf('rv:');
|
|
23
|
-
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
var edge = ua.indexOf('Edge/');
|
|
27
|
-
|
|
28
|
-
if (edge > 0) {
|
|
29
|
-
// Edge (IE 12+) => return version number
|
|
30
|
-
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
|
|
31
|
-
} // other browser
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return -1;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
let isIE;
|
|
38
|
-
|
|
39
|
-
function initCompat () {
|
|
40
|
-
if (!initCompat.init) {
|
|
41
|
-
initCompat.init = true;
|
|
42
|
-
isIE = getInternetExplorerVersion() !== -1;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
var script = {
|
|
47
|
-
name: 'ResizeObserver',
|
|
48
|
-
|
|
49
|
-
props: {
|
|
50
|
-
emitOnMount: {
|
|
51
|
-
type: Boolean,
|
|
52
|
-
default: false,
|
|
53
|
-
},
|
|
54
|
-
|
|
55
|
-
ignoreWidth: {
|
|
56
|
-
type: Boolean,
|
|
57
|
-
default: false,
|
|
58
|
-
},
|
|
59
|
-
|
|
60
|
-
ignoreHeight: {
|
|
61
|
-
type: Boolean,
|
|
62
|
-
default: false,
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
emits: [
|
|
67
|
-
'notify',
|
|
68
|
-
],
|
|
69
|
-
|
|
70
|
-
mounted () {
|
|
71
|
-
initCompat();
|
|
72
|
-
nextTick(() => {
|
|
73
|
-
this._w = this.$el.offsetWidth;
|
|
74
|
-
this._h = this.$el.offsetHeight;
|
|
75
|
-
if (this.emitOnMount) {
|
|
76
|
-
this.emitSize();
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
const object = document.createElement('object');
|
|
80
|
-
this._resizeObject = object;
|
|
81
|
-
object.setAttribute('aria-hidden', 'true');
|
|
82
|
-
object.setAttribute('tabindex', -1);
|
|
83
|
-
object.onload = this.addResizeHandlers;
|
|
84
|
-
object.type = 'text/html';
|
|
85
|
-
if (isIE) {
|
|
86
|
-
this.$el.appendChild(object);
|
|
87
|
-
}
|
|
88
|
-
object.data = 'about:blank';
|
|
89
|
-
if (!isIE) {
|
|
90
|
-
this.$el.appendChild(object);
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
|
|
94
|
-
beforeUnmount () {
|
|
95
|
-
this.removeResizeHandlers();
|
|
96
|
-
},
|
|
97
|
-
|
|
98
|
-
methods: {
|
|
99
|
-
compareAndNotify () {
|
|
100
|
-
if ((!this.ignoreWidth && this._w !== this.$el.offsetWidth) || (!this.ignoreHeight && this._h !== this.$el.offsetHeight)) {
|
|
101
|
-
this._w = this.$el.offsetWidth;
|
|
102
|
-
this._h = this.$el.offsetHeight;
|
|
103
|
-
this.emitSize();
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
|
-
|
|
107
|
-
emitSize () {
|
|
108
|
-
this.$emit('notify', {
|
|
109
|
-
width: this._w,
|
|
110
|
-
height: this._h,
|
|
111
|
-
});
|
|
112
|
-
},
|
|
113
|
-
|
|
114
|
-
addResizeHandlers () {
|
|
115
|
-
this._resizeObject.contentDocument.defaultView.addEventListener('resize', this.compareAndNotify);
|
|
116
|
-
this.compareAndNotify();
|
|
117
|
-
},
|
|
118
|
-
|
|
119
|
-
removeResizeHandlers () {
|
|
120
|
-
if (this._resizeObject && this._resizeObject.onload) {
|
|
121
|
-
if (!isIE && this._resizeObject.contentDocument) {
|
|
122
|
-
this._resizeObject.contentDocument.defaultView.removeEventListener('resize', this.compareAndNotify);
|
|
123
|
-
}
|
|
124
|
-
this.$el.removeChild(this._resizeObject);
|
|
125
|
-
this._resizeObject.onload = null;
|
|
126
|
-
this._resizeObject = null;
|
|
127
|
-
}
|
|
128
|
-
},
|
|
129
|
-
},
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
const _withId = /*#__PURE__*/withScopeId();
|
|
133
|
-
|
|
134
|
-
pushScopeId("data-v-b329ee4c");
|
|
135
|
-
const _hoisted_1$3 = {
|
|
136
|
-
class: "resize-observer",
|
|
137
|
-
tabindex: "-1"
|
|
138
|
-
};
|
|
139
|
-
popScopeId();
|
|
140
|
-
|
|
141
|
-
const render = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $options) => {
|
|
142
|
-
return (openBlock(), createBlock("div", _hoisted_1$3))
|
|
143
|
-
});
|
|
144
|
-
|
|
145
|
-
script.render = render;
|
|
146
|
-
script.__scopeId = "data-v-b329ee4c";
|
|
147
|
-
script.__file = "src/components/ResizeObserver.vue";
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
/* Injected with object hook! */
|
|
151
|
-
|
|
152
|
-
function _typeof$1(obj) {
|
|
153
|
-
"@babel/helpers - typeof";
|
|
154
|
-
|
|
155
|
-
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
156
|
-
_typeof$1 = function (obj) {
|
|
157
|
-
return typeof obj;
|
|
158
|
-
};
|
|
159
|
-
} else {
|
|
160
|
-
_typeof$1 = function (obj) {
|
|
161
|
-
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
162
|
-
};
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
return _typeof$1(obj);
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
function _classCallCheck(instance, Constructor) {
|
|
169
|
-
if (!(instance instanceof Constructor)) {
|
|
170
|
-
throw new TypeError("Cannot call a class as a function");
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
function _defineProperties(target, props) {
|
|
175
|
-
for (var i = 0; i < props.length; i++) {
|
|
176
|
-
var descriptor = props[i];
|
|
177
|
-
descriptor.enumerable = descriptor.enumerable || false;
|
|
178
|
-
descriptor.configurable = true;
|
|
179
|
-
if ("value" in descriptor) descriptor.writable = true;
|
|
180
|
-
Object.defineProperty(target, descriptor.key, descriptor);
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
function _createClass(Constructor, protoProps, staticProps) {
|
|
185
|
-
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
|
|
186
|
-
if (staticProps) _defineProperties(Constructor, staticProps);
|
|
187
|
-
return Constructor;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
function _toConsumableArray(arr) {
|
|
191
|
-
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
function _arrayWithoutHoles(arr) {
|
|
195
|
-
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
function _iterableToArray(iter) {
|
|
199
|
-
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
function _unsupportedIterableToArray(o, minLen) {
|
|
203
|
-
if (!o) return;
|
|
204
|
-
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
205
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
206
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
207
|
-
if (n === "Map" || n === "Set") return Array.from(o);
|
|
208
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
function _arrayLikeToArray(arr, len) {
|
|
212
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
213
|
-
|
|
214
|
-
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
215
|
-
|
|
216
|
-
return arr2;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
function _nonIterableSpread() {
|
|
220
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
function processOptions(value) {
|
|
224
|
-
var options;
|
|
225
|
-
|
|
226
|
-
if (typeof value === 'function') {
|
|
227
|
-
// Simple options (callback-only)
|
|
228
|
-
options = {
|
|
229
|
-
callback: value
|
|
230
|
-
};
|
|
231
|
-
} else {
|
|
232
|
-
// Options object
|
|
233
|
-
options = value;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
return options;
|
|
237
|
-
}
|
|
238
|
-
function throttle(callback, delay) {
|
|
239
|
-
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
240
|
-
var timeout;
|
|
241
|
-
var lastState;
|
|
242
|
-
var currentArgs;
|
|
243
|
-
|
|
244
|
-
var throttled = function throttled(state) {
|
|
245
|
-
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
246
|
-
args[_key - 1] = arguments[_key];
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
currentArgs = args;
|
|
250
|
-
if (timeout && state === lastState) return;
|
|
251
|
-
var leading = options.leading;
|
|
252
|
-
|
|
253
|
-
if (typeof leading === 'function') {
|
|
254
|
-
leading = leading(state, lastState);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
if ((!timeout || state !== lastState) && leading) {
|
|
258
|
-
callback.apply(void 0, [state].concat(_toConsumableArray(currentArgs)));
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
lastState = state;
|
|
262
|
-
clearTimeout(timeout);
|
|
263
|
-
timeout = setTimeout(function () {
|
|
264
|
-
callback.apply(void 0, [state].concat(_toConsumableArray(currentArgs)));
|
|
265
|
-
timeout = 0;
|
|
266
|
-
}, delay);
|
|
267
|
-
};
|
|
268
|
-
|
|
269
|
-
throttled._clear = function () {
|
|
270
|
-
clearTimeout(timeout);
|
|
271
|
-
timeout = null;
|
|
272
|
-
};
|
|
273
|
-
|
|
274
|
-
return throttled;
|
|
275
|
-
}
|
|
276
|
-
function deepEqual(val1, val2) {
|
|
277
|
-
if (val1 === val2) return true;
|
|
278
|
-
|
|
279
|
-
if (_typeof$1(val1) === 'object') {
|
|
280
|
-
for (var key in val1) {
|
|
281
|
-
if (!deepEqual(val1[key], val2[key])) {
|
|
282
|
-
return false;
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
return true;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
return false;
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
var VisibilityState = /*#__PURE__*/function () {
|
|
293
|
-
function VisibilityState(el, options, vnode) {
|
|
294
|
-
_classCallCheck(this, VisibilityState);
|
|
295
|
-
|
|
296
|
-
this.el = el;
|
|
297
|
-
this.observer = null;
|
|
298
|
-
this.frozen = false;
|
|
299
|
-
this.createObserver(options, vnode);
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
_createClass(VisibilityState, [{
|
|
303
|
-
key: "createObserver",
|
|
304
|
-
value: function createObserver(options, vnode) {
|
|
305
|
-
var _this = this;
|
|
306
|
-
|
|
307
|
-
if (this.observer) {
|
|
308
|
-
this.destroyObserver();
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
if (this.frozen) return;
|
|
312
|
-
this.options = processOptions(options);
|
|
313
|
-
|
|
314
|
-
this.callback = function (result, entry) {
|
|
315
|
-
_this.options.callback(result, entry);
|
|
316
|
-
|
|
317
|
-
if (result && _this.options.once) {
|
|
318
|
-
_this.frozen = true;
|
|
319
|
-
|
|
320
|
-
_this.destroyObserver();
|
|
321
|
-
}
|
|
322
|
-
}; // Throttle
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
if (this.callback && this.options.throttle) {
|
|
326
|
-
var _ref = this.options.throttleOptions || {},
|
|
327
|
-
_leading = _ref.leading;
|
|
328
|
-
|
|
329
|
-
this.callback = throttle(this.callback, this.options.throttle, {
|
|
330
|
-
leading: function leading(state) {
|
|
331
|
-
return _leading === 'both' || _leading === 'visible' && state || _leading === 'hidden' && !state;
|
|
332
|
-
}
|
|
333
|
-
});
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
this.oldResult = undefined;
|
|
337
|
-
this.observer = new IntersectionObserver(function (entries) {
|
|
338
|
-
var entry = entries[0];
|
|
339
|
-
|
|
340
|
-
if (entries.length > 1) {
|
|
341
|
-
var intersectingEntry = entries.find(function (e) {
|
|
342
|
-
return e.isIntersecting;
|
|
343
|
-
});
|
|
344
|
-
|
|
345
|
-
if (intersectingEntry) {
|
|
346
|
-
entry = intersectingEntry;
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
|
|
350
|
-
if (_this.callback) {
|
|
351
|
-
// Use isIntersecting if possible because browsers can report isIntersecting as true, but intersectionRatio as 0, when something very slowly enters the viewport.
|
|
352
|
-
var result = entry.isIntersecting && entry.intersectionRatio >= _this.threshold;
|
|
353
|
-
if (result === _this.oldResult) return;
|
|
354
|
-
_this.oldResult = result;
|
|
355
|
-
|
|
356
|
-
_this.callback(result, entry);
|
|
357
|
-
}
|
|
358
|
-
}, this.options.intersection); // Wait for the element to be in document
|
|
359
|
-
|
|
360
|
-
nextTick(function () {
|
|
361
|
-
if (_this.observer) {
|
|
362
|
-
_this.observer.observe(_this.el);
|
|
363
|
-
}
|
|
364
|
-
});
|
|
365
|
-
}
|
|
366
|
-
}, {
|
|
367
|
-
key: "destroyObserver",
|
|
368
|
-
value: function destroyObserver() {
|
|
369
|
-
if (this.observer) {
|
|
370
|
-
this.observer.disconnect();
|
|
371
|
-
this.observer = null;
|
|
372
|
-
} // Cancel throttled call
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
if (this.callback && this.callback._clear) {
|
|
376
|
-
this.callback._clear();
|
|
377
|
-
|
|
378
|
-
this.callback = null;
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
}, {
|
|
382
|
-
key: "threshold",
|
|
383
|
-
get: function get() {
|
|
384
|
-
return this.options.intersection && typeof this.options.intersection.threshold === 'number' ? this.options.intersection.threshold : 0;
|
|
385
|
-
}
|
|
386
|
-
}]);
|
|
387
|
-
|
|
388
|
-
return VisibilityState;
|
|
389
|
-
}();
|
|
390
|
-
|
|
391
|
-
function beforeMount(el, _ref2, vnode) {
|
|
392
|
-
var value = _ref2.value;
|
|
393
|
-
if (!value) return;
|
|
394
|
-
|
|
395
|
-
if (typeof IntersectionObserver === 'undefined') {
|
|
396
|
-
console.warn('[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill');
|
|
397
|
-
} else {
|
|
398
|
-
var state = new VisibilityState(el, value, vnode);
|
|
399
|
-
el._vue_visibilityState = state;
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
function updated(el, _ref3, vnode) {
|
|
404
|
-
var value = _ref3.value,
|
|
405
|
-
oldValue = _ref3.oldValue;
|
|
406
|
-
if (deepEqual(value, oldValue)) return;
|
|
407
|
-
var state = el._vue_visibilityState;
|
|
408
|
-
|
|
409
|
-
if (!value) {
|
|
410
|
-
unmounted(el);
|
|
411
|
-
return;
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
if (state) {
|
|
415
|
-
state.createObserver(value, vnode);
|
|
416
|
-
} else {
|
|
417
|
-
beforeMount(el, {
|
|
418
|
-
value: value
|
|
419
|
-
}, vnode);
|
|
420
|
-
}
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
function unmounted(el) {
|
|
424
|
-
var state = el._vue_visibilityState;
|
|
425
|
-
|
|
426
|
-
if (state) {
|
|
427
|
-
state.destroyObserver();
|
|
428
|
-
delete el._vue_visibilityState;
|
|
429
|
-
}
|
|
430
|
-
}
|
|
431
|
-
|
|
432
|
-
var ObserveVisibility = {
|
|
433
|
-
beforeMount: beforeMount,
|
|
434
|
-
updated: updated,
|
|
435
|
-
unmounted: unmounted
|
|
436
|
-
};
|
|
437
|
-
|
|
438
|
-
/* Injected with object hook! */
|
|
439
|
-
|
|
440
|
-
var config = {
|
|
441
|
-
itemsLimit: 1000
|
|
442
|
-
};
|
|
443
|
-
|
|
444
|
-
// Fork of https://github.com/olahol/scrollparent.js to be able to build with Rollup
|
|
445
|
-
|
|
446
|
-
var regex = /(auto|scroll)/;
|
|
447
|
-
function parents(node, ps) {
|
|
448
|
-
if (node.parentNode === null) {
|
|
449
|
-
return ps;
|
|
450
|
-
}
|
|
451
|
-
return parents(node.parentNode, ps.concat([node]));
|
|
452
|
-
}
|
|
453
|
-
var style = function style(node, prop) {
|
|
454
|
-
return getComputedStyle(node, null).getPropertyValue(prop);
|
|
455
|
-
};
|
|
456
|
-
var overflow = function overflow(node) {
|
|
457
|
-
return style(node, 'overflow') + style(node, 'overflow-y') + style(node, 'overflow-x');
|
|
458
|
-
};
|
|
459
|
-
var scroll = function scroll(node) {
|
|
460
|
-
return regex.test(overflow(node));
|
|
461
|
-
};
|
|
462
|
-
function getScrollParent(node) {
|
|
463
|
-
if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
|
|
464
|
-
return;
|
|
465
|
-
}
|
|
466
|
-
var ps = parents(node.parentNode, []);
|
|
467
|
-
for (var i = 0; i < ps.length; i += 1) {
|
|
468
|
-
if (scroll(ps[i])) {
|
|
469
|
-
return ps[i];
|
|
470
|
-
}
|
|
471
|
-
}
|
|
472
|
-
return document.scrollingElement || document.documentElement;
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
function _typeof(obj) {
|
|
476
|
-
"@babel/helpers - typeof";
|
|
477
|
-
|
|
478
|
-
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
|
|
479
|
-
return typeof obj;
|
|
480
|
-
} : function (obj) {
|
|
481
|
-
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
482
|
-
}, _typeof(obj);
|
|
483
|
-
}
|
|
484
|
-
|
|
485
|
-
var props = {
|
|
486
|
-
items: {
|
|
487
|
-
type: Array,
|
|
488
|
-
required: true
|
|
489
|
-
},
|
|
490
|
-
keyField: {
|
|
491
|
-
type: String,
|
|
492
|
-
default: 'id'
|
|
493
|
-
},
|
|
494
|
-
direction: {
|
|
495
|
-
type: String,
|
|
496
|
-
default: 'vertical',
|
|
497
|
-
validator: function validator(value) {
|
|
498
|
-
return ['vertical', 'horizontal'].includes(value);
|
|
499
|
-
}
|
|
500
|
-
},
|
|
501
|
-
listTag: {
|
|
502
|
-
type: String,
|
|
503
|
-
default: 'div'
|
|
504
|
-
},
|
|
505
|
-
itemTag: {
|
|
506
|
-
type: String,
|
|
507
|
-
default: 'div'
|
|
508
|
-
}
|
|
509
|
-
};
|
|
510
|
-
function simpleArray() {
|
|
511
|
-
return this.items.length && _typeof(this.items[0]) !== 'object';
|
|
512
|
-
}
|
|
513
|
-
|
|
514
|
-
var supportsPassive = false;
|
|
515
|
-
if (typeof window !== 'undefined') {
|
|
516
|
-
supportsPassive = false;
|
|
517
|
-
try {
|
|
518
|
-
var opts = Object.defineProperty({}, 'passive', {
|
|
519
|
-
get: function get() {
|
|
520
|
-
supportsPassive = true;
|
|
521
|
-
}
|
|
522
|
-
});
|
|
523
|
-
window.addEventListener('test', null, opts);
|
|
524
|
-
} catch (e) {}
|
|
525
|
-
}
|
|
526
|
-
|
|
527
|
-
let uid = 0;
|
|
528
|
-
|
|
529
|
-
var script$2 = {
|
|
530
|
-
name: 'RecycleScroller',
|
|
531
|
-
|
|
532
|
-
components: {
|
|
533
|
-
ResizeObserver: script,
|
|
534
|
-
},
|
|
535
|
-
|
|
536
|
-
directives: {
|
|
537
|
-
ObserveVisibility,
|
|
538
|
-
},
|
|
539
|
-
|
|
540
|
-
props: {
|
|
541
|
-
...props,
|
|
542
|
-
|
|
543
|
-
itemSize: {
|
|
544
|
-
type: Number,
|
|
545
|
-
default: null,
|
|
546
|
-
},
|
|
547
|
-
|
|
548
|
-
gridItems: {
|
|
549
|
-
type: Number,
|
|
550
|
-
default: undefined,
|
|
551
|
-
},
|
|
552
|
-
|
|
553
|
-
itemSecondarySize: {
|
|
554
|
-
type: Number,
|
|
555
|
-
default: undefined,
|
|
556
|
-
},
|
|
557
|
-
|
|
558
|
-
minItemSize: {
|
|
559
|
-
type: [Number, String],
|
|
560
|
-
default: null,
|
|
561
|
-
},
|
|
562
|
-
|
|
563
|
-
sizeField: {
|
|
564
|
-
type: String,
|
|
565
|
-
default: 'size',
|
|
566
|
-
},
|
|
567
|
-
|
|
568
|
-
typeField: {
|
|
569
|
-
type: String,
|
|
570
|
-
default: 'type',
|
|
571
|
-
},
|
|
572
|
-
|
|
573
|
-
buffer: {
|
|
574
|
-
type: Number,
|
|
575
|
-
default: 200,
|
|
576
|
-
},
|
|
577
|
-
|
|
578
|
-
pageMode: {
|
|
579
|
-
type: Boolean,
|
|
580
|
-
default: false,
|
|
581
|
-
},
|
|
582
|
-
|
|
583
|
-
prerender: {
|
|
584
|
-
type: Number,
|
|
585
|
-
default: 0,
|
|
586
|
-
},
|
|
587
|
-
|
|
588
|
-
emitUpdate: {
|
|
589
|
-
type: Boolean,
|
|
590
|
-
default: false,
|
|
591
|
-
},
|
|
592
|
-
|
|
593
|
-
updateInterval: {
|
|
594
|
-
type: Number,
|
|
595
|
-
default: 0,
|
|
596
|
-
},
|
|
597
|
-
|
|
598
|
-
skipHover: {
|
|
599
|
-
type: Boolean,
|
|
600
|
-
default: false,
|
|
601
|
-
},
|
|
602
|
-
|
|
603
|
-
listTag: {
|
|
604
|
-
type: String,
|
|
605
|
-
default: 'div',
|
|
606
|
-
},
|
|
607
|
-
|
|
608
|
-
itemTag: {
|
|
609
|
-
type: String,
|
|
610
|
-
default: 'div',
|
|
611
|
-
},
|
|
612
|
-
|
|
613
|
-
listClass: {
|
|
614
|
-
type: [String, Object, Array],
|
|
615
|
-
default: '',
|
|
616
|
-
},
|
|
617
|
-
|
|
618
|
-
itemClass: {
|
|
619
|
-
type: [String, Object, Array],
|
|
620
|
-
default: '',
|
|
621
|
-
},
|
|
622
|
-
},
|
|
623
|
-
|
|
624
|
-
emits: [
|
|
625
|
-
'resize',
|
|
626
|
-
'visible',
|
|
627
|
-
'hidden',
|
|
628
|
-
'update',
|
|
629
|
-
'scroll-start',
|
|
630
|
-
'scroll-end',
|
|
631
|
-
],
|
|
632
|
-
|
|
633
|
-
data () {
|
|
634
|
-
return {
|
|
635
|
-
pool: [],
|
|
636
|
-
totalSize: 0,
|
|
637
|
-
ready: false,
|
|
638
|
-
hoverKey: null,
|
|
639
|
-
}
|
|
640
|
-
},
|
|
641
|
-
|
|
642
|
-
computed: {
|
|
643
|
-
sizes () {
|
|
644
|
-
if (this.itemSize === null) {
|
|
645
|
-
const sizes = {
|
|
646
|
-
'-1': { accumulator: 0 },
|
|
647
|
-
};
|
|
648
|
-
const items = this.items;
|
|
649
|
-
const field = this.sizeField;
|
|
650
|
-
const minItemSize = this.minItemSize;
|
|
651
|
-
let computedMinSize = 10000;
|
|
652
|
-
let accumulator = 0;
|
|
653
|
-
let current;
|
|
654
|
-
for (let i = 0, l = items.length; i < l; i++) {
|
|
655
|
-
current = items[i][field] || minItemSize;
|
|
656
|
-
if (current < computedMinSize) {
|
|
657
|
-
computedMinSize = current;
|
|
658
|
-
}
|
|
659
|
-
accumulator += current;
|
|
660
|
-
sizes[i] = { accumulator, size: current };
|
|
661
|
-
}
|
|
662
|
-
// eslint-disable-next-line
|
|
663
|
-
this.$_computedMinItemSize = computedMinSize;
|
|
664
|
-
return sizes
|
|
665
|
-
}
|
|
666
|
-
return []
|
|
667
|
-
},
|
|
668
|
-
|
|
669
|
-
simpleArray,
|
|
670
|
-
|
|
671
|
-
itemIndexByKey () {
|
|
672
|
-
const { keyField, items } = this;
|
|
673
|
-
const result = {};
|
|
674
|
-
for (let i = 0, l = items.length; i < l; i++) {
|
|
675
|
-
result[items[i][keyField]] = i;
|
|
676
|
-
}
|
|
677
|
-
return result
|
|
678
|
-
},
|
|
679
|
-
},
|
|
680
|
-
|
|
681
|
-
watch: {
|
|
682
|
-
items () {
|
|
683
|
-
this.updateVisibleItems(true);
|
|
684
|
-
},
|
|
685
|
-
|
|
686
|
-
pageMode () {
|
|
687
|
-
this.applyPageMode();
|
|
688
|
-
this.updateVisibleItems(false);
|
|
689
|
-
},
|
|
690
|
-
|
|
691
|
-
sizes: {
|
|
692
|
-
handler () {
|
|
693
|
-
this.updateVisibleItems(false);
|
|
694
|
-
},
|
|
695
|
-
deep: true,
|
|
696
|
-
},
|
|
697
|
-
|
|
698
|
-
gridItems () {
|
|
699
|
-
this.updateVisibleItems(true);
|
|
700
|
-
},
|
|
701
|
-
|
|
702
|
-
itemSecondarySize () {
|
|
703
|
-
this.updateVisibleItems(true);
|
|
704
|
-
},
|
|
705
|
-
},
|
|
706
|
-
|
|
707
|
-
created () {
|
|
708
|
-
this.$_startIndex = 0;
|
|
709
|
-
this.$_endIndex = 0;
|
|
710
|
-
this.$_views = new Map();
|
|
711
|
-
this.$_unusedViews = new Map();
|
|
712
|
-
this.$_scrollDirty = false;
|
|
713
|
-
this.$_lastUpdateScrollPosition = 0;
|
|
714
|
-
|
|
715
|
-
// In SSR mode, we also prerender the same number of item for the first render
|
|
716
|
-
// to avoir mismatch between server and client templates
|
|
717
|
-
if (this.prerender) {
|
|
718
|
-
this.$_prerender = true;
|
|
719
|
-
this.updateVisibleItems(false);
|
|
720
|
-
}
|
|
721
|
-
|
|
722
|
-
if (this.gridItems && !this.itemSize) {
|
|
723
|
-
console.error('[vue-recycle-scroller] You must provide an itemSize when using gridItems');
|
|
724
|
-
}
|
|
725
|
-
},
|
|
726
|
-
|
|
727
|
-
mounted () {
|
|
728
|
-
this.applyPageMode();
|
|
729
|
-
this.$nextTick(() => {
|
|
730
|
-
// In SSR mode, render the real number of visible items
|
|
731
|
-
this.$_prerender = false;
|
|
732
|
-
this.updateVisibleItems(true);
|
|
733
|
-
this.ready = true;
|
|
734
|
-
});
|
|
735
|
-
},
|
|
736
|
-
|
|
737
|
-
activated () {
|
|
738
|
-
const lastPosition = this.$_lastUpdateScrollPosition;
|
|
739
|
-
if (typeof lastPosition === 'number') {
|
|
740
|
-
this.$nextTick(() => {
|
|
741
|
-
this.scrollToPosition(lastPosition);
|
|
742
|
-
});
|
|
743
|
-
}
|
|
744
|
-
},
|
|
745
|
-
|
|
746
|
-
beforeUnmount () {
|
|
747
|
-
this.removeListeners();
|
|
748
|
-
},
|
|
749
|
-
|
|
750
|
-
methods: {
|
|
751
|
-
addView (pool, index, item, key, type) {
|
|
752
|
-
const nr = markRaw({
|
|
753
|
-
id: uid++,
|
|
754
|
-
index,
|
|
755
|
-
used: true,
|
|
756
|
-
key,
|
|
757
|
-
type,
|
|
758
|
-
});
|
|
759
|
-
const view = shallowReactive({
|
|
760
|
-
item,
|
|
761
|
-
position: 0,
|
|
762
|
-
nr,
|
|
763
|
-
});
|
|
764
|
-
pool.push(view);
|
|
765
|
-
return view
|
|
766
|
-
},
|
|
767
|
-
|
|
768
|
-
unuseView (view, fake = false) {
|
|
769
|
-
const unusedViews = this.$_unusedViews;
|
|
770
|
-
const type = view.nr.type;
|
|
771
|
-
let unusedPool = unusedViews.get(type);
|
|
772
|
-
if (!unusedPool) {
|
|
773
|
-
unusedPool = [];
|
|
774
|
-
unusedViews.set(type, unusedPool);
|
|
775
|
-
}
|
|
776
|
-
unusedPool.push(view);
|
|
777
|
-
if (!fake) {
|
|
778
|
-
view.nr.used = false;
|
|
779
|
-
view.position = -9999;
|
|
780
|
-
}
|
|
781
|
-
},
|
|
782
|
-
|
|
783
|
-
handleResize () {
|
|
784
|
-
this.$emit('resize');
|
|
785
|
-
if (this.ready) this.updateVisibleItems(false);
|
|
786
|
-
},
|
|
787
|
-
|
|
788
|
-
handleScroll (event) {
|
|
789
|
-
if (!this.$_scrollDirty) {
|
|
790
|
-
this.$_scrollDirty = true;
|
|
791
|
-
if (this.$_updateTimeout) return
|
|
792
|
-
|
|
793
|
-
const requestUpdate = () => requestAnimationFrame(() => {
|
|
794
|
-
this.$_scrollDirty = false;
|
|
795
|
-
const { continuous } = this.updateVisibleItems(false, true);
|
|
796
|
-
|
|
797
|
-
// It seems sometimes chrome doesn't fire scroll event :/
|
|
798
|
-
// When non continous scrolling is ending, we force a refresh
|
|
799
|
-
if (!continuous) {
|
|
800
|
-
clearTimeout(this.$_refreshTimout);
|
|
801
|
-
this.$_refreshTimout = setTimeout(this.handleScroll, this.updateInterval + 100);
|
|
802
|
-
}
|
|
803
|
-
});
|
|
804
|
-
|
|
805
|
-
requestUpdate();
|
|
806
|
-
|
|
807
|
-
// Schedule the next update with throttling
|
|
808
|
-
if (this.updateInterval) {
|
|
809
|
-
this.$_updateTimeout = setTimeout(() => {
|
|
810
|
-
this.$_updateTimeout = 0;
|
|
811
|
-
if (this.$_scrollDirty) requestUpdate();
|
|
812
|
-
}, this.updateInterval);
|
|
813
|
-
}
|
|
814
|
-
}
|
|
815
|
-
},
|
|
816
|
-
|
|
817
|
-
handleVisibilityChange (isVisible, entry) {
|
|
818
|
-
if (this.ready) {
|
|
819
|
-
if (isVisible || entry.boundingClientRect.width !== 0 || entry.boundingClientRect.height !== 0) {
|
|
820
|
-
this.$emit('visible');
|
|
821
|
-
requestAnimationFrame(() => {
|
|
822
|
-
this.updateVisibleItems(false);
|
|
823
|
-
});
|
|
824
|
-
} else {
|
|
825
|
-
this.$emit('hidden');
|
|
826
|
-
}
|
|
827
|
-
}
|
|
828
|
-
},
|
|
829
|
-
|
|
830
|
-
updateVisibleItems (checkItem, checkPositionDiff = false) {
|
|
831
|
-
const itemSize = this.itemSize;
|
|
832
|
-
const gridItems = this.gridItems || 1;
|
|
833
|
-
const itemSecondarySize = this.itemSecondarySize || itemSize;
|
|
834
|
-
const minItemSize = this.$_computedMinItemSize;
|
|
835
|
-
const typeField = this.typeField;
|
|
836
|
-
const keyField = this.simpleArray ? null : this.keyField;
|
|
837
|
-
const items = this.items;
|
|
838
|
-
const count = items.length;
|
|
839
|
-
const sizes = this.sizes;
|
|
840
|
-
const views = this.$_views;
|
|
841
|
-
const unusedViews = this.$_unusedViews;
|
|
842
|
-
const pool = this.pool;
|
|
843
|
-
const itemIndexByKey = this.itemIndexByKey;
|
|
844
|
-
let startIndex, endIndex;
|
|
845
|
-
let totalSize;
|
|
846
|
-
let visibleStartIndex, visibleEndIndex;
|
|
847
|
-
|
|
848
|
-
if (!count) {
|
|
849
|
-
startIndex = endIndex = visibleStartIndex = visibleEndIndex = totalSize = 0;
|
|
850
|
-
} else if (this.$_prerender) {
|
|
851
|
-
startIndex = visibleStartIndex = 0;
|
|
852
|
-
endIndex = visibleEndIndex = Math.min(this.prerender, items.length);
|
|
853
|
-
totalSize = null;
|
|
854
|
-
} else {
|
|
855
|
-
const scroll = this.getScroll();
|
|
856
|
-
|
|
857
|
-
// Skip update if use hasn't scrolled enough
|
|
858
|
-
if (checkPositionDiff) {
|
|
859
|
-
let positionDiff = scroll.start - this.$_lastUpdateScrollPosition;
|
|
860
|
-
if (positionDiff < 0) positionDiff = -positionDiff;
|
|
861
|
-
if ((itemSize === null && positionDiff < minItemSize) || positionDiff < itemSize) {
|
|
862
|
-
return {
|
|
863
|
-
continuous: true,
|
|
864
|
-
}
|
|
865
|
-
}
|
|
866
|
-
}
|
|
867
|
-
this.$_lastUpdateScrollPosition = scroll.start;
|
|
868
|
-
|
|
869
|
-
const buffer = this.buffer;
|
|
870
|
-
scroll.start -= buffer;
|
|
871
|
-
scroll.end += buffer;
|
|
872
|
-
|
|
873
|
-
// account for leading slot
|
|
874
|
-
let beforeSize = 0;
|
|
875
|
-
if (this.$refs.before) {
|
|
876
|
-
beforeSize = this.$refs.before.scrollHeight;
|
|
877
|
-
scroll.start -= beforeSize;
|
|
878
|
-
}
|
|
879
|
-
|
|
880
|
-
// account for trailing slot
|
|
881
|
-
if (this.$refs.after) {
|
|
882
|
-
const afterSize = this.$refs.after.scrollHeight;
|
|
883
|
-
scroll.end += afterSize;
|
|
884
|
-
}
|
|
885
|
-
|
|
886
|
-
// Variable size mode
|
|
887
|
-
if (itemSize === null) {
|
|
888
|
-
let h;
|
|
889
|
-
let a = 0;
|
|
890
|
-
let b = count - 1;
|
|
891
|
-
let i = ~~(count / 2);
|
|
892
|
-
let oldI;
|
|
893
|
-
|
|
894
|
-
// Searching for startIndex
|
|
895
|
-
do {
|
|
896
|
-
oldI = i;
|
|
897
|
-
h = sizes[i].accumulator;
|
|
898
|
-
if (h < scroll.start) {
|
|
899
|
-
a = i;
|
|
900
|
-
} else if (i < count - 1 && sizes[i + 1].accumulator > scroll.start) {
|
|
901
|
-
b = i;
|
|
902
|
-
}
|
|
903
|
-
i = ~~((a + b) / 2);
|
|
904
|
-
} while (i !== oldI)
|
|
905
|
-
i < 0 && (i = 0);
|
|
906
|
-
startIndex = i;
|
|
907
|
-
|
|
908
|
-
// For container style
|
|
909
|
-
totalSize = sizes[count - 1].accumulator;
|
|
910
|
-
|
|
911
|
-
// Searching for endIndex
|
|
912
|
-
for (endIndex = i; endIndex < count && sizes[endIndex].accumulator < scroll.end; endIndex++);
|
|
913
|
-
if (endIndex === -1) {
|
|
914
|
-
endIndex = items.length - 1;
|
|
915
|
-
} else {
|
|
916
|
-
endIndex++;
|
|
917
|
-
// Bounds
|
|
918
|
-
endIndex > count && (endIndex = count);
|
|
919
|
-
}
|
|
920
|
-
|
|
921
|
-
// search visible startIndex
|
|
922
|
-
for (visibleStartIndex = startIndex; visibleStartIndex < count && (beforeSize + sizes[visibleStartIndex].accumulator) < scroll.start; visibleStartIndex++);
|
|
923
|
-
|
|
924
|
-
// search visible endIndex
|
|
925
|
-
for (visibleEndIndex = visibleStartIndex; visibleEndIndex < count && (beforeSize + sizes[visibleEndIndex].accumulator) < scroll.end; visibleEndIndex++);
|
|
926
|
-
} else {
|
|
927
|
-
// Fixed size mode
|
|
928
|
-
startIndex = ~~(scroll.start / itemSize * gridItems);
|
|
929
|
-
const remainer = startIndex % gridItems;
|
|
930
|
-
startIndex -= remainer;
|
|
931
|
-
endIndex = Math.ceil(scroll.end / itemSize * gridItems);
|
|
932
|
-
visibleStartIndex = Math.max(0, Math.floor((scroll.start - beforeSize) / itemSize * gridItems));
|
|
933
|
-
visibleEndIndex = Math.floor((scroll.end - beforeSize) / itemSize * gridItems);
|
|
934
|
-
|
|
935
|
-
// Bounds
|
|
936
|
-
startIndex < 0 && (startIndex = 0);
|
|
937
|
-
endIndex > count && (endIndex = count);
|
|
938
|
-
visibleStartIndex < 0 && (visibleStartIndex = 0);
|
|
939
|
-
visibleEndIndex > count && (visibleEndIndex = count);
|
|
940
|
-
|
|
941
|
-
totalSize = Math.ceil(count / gridItems) * itemSize;
|
|
942
|
-
}
|
|
943
|
-
}
|
|
944
|
-
|
|
945
|
-
if (endIndex - startIndex > config.itemsLimit) {
|
|
946
|
-
this.itemsLimitError();
|
|
947
|
-
}
|
|
948
|
-
|
|
949
|
-
this.totalSize = totalSize;
|
|
950
|
-
|
|
951
|
-
let view;
|
|
952
|
-
|
|
953
|
-
const continuous = startIndex <= this.$_endIndex && endIndex >= this.$_startIndex;
|
|
954
|
-
|
|
955
|
-
// Unuse views that are no longer visible
|
|
956
|
-
if (continuous) {
|
|
957
|
-
for (let i = 0, l = pool.length; i < l; i++) {
|
|
958
|
-
view = pool[i];
|
|
959
|
-
if (view.nr.used) {
|
|
960
|
-
// Update view item index
|
|
961
|
-
if (checkItem) {
|
|
962
|
-
view.nr.index = itemIndexByKey[view.item[keyField]];
|
|
963
|
-
}
|
|
964
|
-
|
|
965
|
-
// Check if index is still in visible range
|
|
966
|
-
if (
|
|
967
|
-
view.nr.index == null ||
|
|
968
|
-
view.nr.index < startIndex ||
|
|
969
|
-
view.nr.index >= endIndex
|
|
970
|
-
) {
|
|
971
|
-
this.unuseView(view);
|
|
972
|
-
}
|
|
973
|
-
}
|
|
974
|
-
}
|
|
975
|
-
}
|
|
976
|
-
|
|
977
|
-
const unusedIndex = continuous ? null : new Map();
|
|
978
|
-
|
|
979
|
-
let item, type;
|
|
980
|
-
let v;
|
|
981
|
-
for (let i = startIndex; i < endIndex; i++) {
|
|
982
|
-
item = items[i];
|
|
983
|
-
const key = keyField ? item[keyField] : item;
|
|
984
|
-
if (key == null) {
|
|
985
|
-
throw new Error(`Key is ${key} on item (keyField is '${keyField}')`)
|
|
986
|
-
}
|
|
987
|
-
view = views.get(key);
|
|
988
|
-
|
|
989
|
-
if (!itemSize && !sizes[i].size) {
|
|
990
|
-
if (view) this.unuseView(view);
|
|
991
|
-
continue
|
|
992
|
-
}
|
|
993
|
-
|
|
994
|
-
type = item[typeField];
|
|
995
|
-
|
|
996
|
-
let unusedPool = unusedViews.get(type);
|
|
997
|
-
let newlyUsedView = false;
|
|
998
|
-
|
|
999
|
-
// No view assigned to item
|
|
1000
|
-
if (!view) {
|
|
1001
|
-
if (continuous) {
|
|
1002
|
-
// Reuse existing view
|
|
1003
|
-
if (unusedPool && unusedPool.length) {
|
|
1004
|
-
view = unusedPool.pop();
|
|
1005
|
-
} else {
|
|
1006
|
-
view = this.addView(pool, i, item, key, type);
|
|
1007
|
-
}
|
|
1008
|
-
} else {
|
|
1009
|
-
// Use existing view
|
|
1010
|
-
// We don't care if they are already used
|
|
1011
|
-
// because we are not in continous scrolling
|
|
1012
|
-
v = unusedIndex.get(type) || 0;
|
|
1013
|
-
|
|
1014
|
-
if (!unusedPool || v >= unusedPool.length) {
|
|
1015
|
-
view = this.addView(pool, i, item, key, type);
|
|
1016
|
-
this.unuseView(view, true);
|
|
1017
|
-
unusedPool = unusedViews.get(type);
|
|
1018
|
-
}
|
|
1019
|
-
|
|
1020
|
-
view = unusedPool[v];
|
|
1021
|
-
unusedIndex.set(type, v + 1);
|
|
1022
|
-
}
|
|
1023
|
-
|
|
1024
|
-
// Assign view to item
|
|
1025
|
-
views.delete(view.nr.key);
|
|
1026
|
-
view.nr.used = true;
|
|
1027
|
-
view.nr.index = i;
|
|
1028
|
-
view.nr.key = key;
|
|
1029
|
-
view.nr.type = type;
|
|
1030
|
-
views.set(key, view);
|
|
1031
|
-
|
|
1032
|
-
newlyUsedView = true;
|
|
1033
|
-
} else {
|
|
1034
|
-
// View already assigned to item
|
|
1035
|
-
if (!view.nr.used) {
|
|
1036
|
-
view.nr.used = true;
|
|
1037
|
-
newlyUsedView = true;
|
|
1038
|
-
if (unusedPool) {
|
|
1039
|
-
const index = unusedPool.indexOf(view);
|
|
1040
|
-
if (index !== -1) unusedPool.splice(index, 1);
|
|
1041
|
-
}
|
|
1042
|
-
}
|
|
1043
|
-
}
|
|
1044
|
-
|
|
1045
|
-
// Always set item in case it's a new object with the same key
|
|
1046
|
-
view.item = item;
|
|
1047
|
-
|
|
1048
|
-
if (newlyUsedView) {
|
|
1049
|
-
if (i === items.length - 1) this.$emit('scroll-end');
|
|
1050
|
-
if (i === 0) this.$emit('scroll-start');
|
|
1051
|
-
}
|
|
1052
|
-
|
|
1053
|
-
// Update position
|
|
1054
|
-
if (itemSize === null) {
|
|
1055
|
-
view.position = sizes[i - 1].accumulator;
|
|
1056
|
-
view.offset = 0;
|
|
1057
|
-
} else {
|
|
1058
|
-
view.position = Math.floor(i / gridItems) * itemSize;
|
|
1059
|
-
view.offset = (i % gridItems) * itemSecondarySize;
|
|
1060
|
-
}
|
|
1061
|
-
}
|
|
1062
|
-
|
|
1063
|
-
this.$_startIndex = startIndex;
|
|
1064
|
-
this.$_endIndex = endIndex;
|
|
1065
|
-
|
|
1066
|
-
if (this.emitUpdate) this.$emit('update', startIndex, endIndex, visibleStartIndex, visibleEndIndex);
|
|
1067
|
-
|
|
1068
|
-
// After the user has finished scrolling
|
|
1069
|
-
// Sort views so text selection is correct
|
|
1070
|
-
clearTimeout(this.$_sortTimer);
|
|
1071
|
-
this.$_sortTimer = setTimeout(this.sortViews, this.updateInterval + 300);
|
|
1072
|
-
|
|
1073
|
-
return {
|
|
1074
|
-
continuous,
|
|
1075
|
-
}
|
|
1076
|
-
},
|
|
1077
|
-
|
|
1078
|
-
getListenerTarget () {
|
|
1079
|
-
let target = getScrollParent(this.$el);
|
|
1080
|
-
// Fix global scroll target for Chrome and Safari
|
|
1081
|
-
if (window.document && (target === window.document.documentElement || target === window.document.body)) {
|
|
1082
|
-
target = window;
|
|
1083
|
-
}
|
|
1084
|
-
return target
|
|
1085
|
-
},
|
|
1086
|
-
|
|
1087
|
-
getScroll () {
|
|
1088
|
-
const { $el: el, direction } = this;
|
|
1089
|
-
const isVertical = direction === 'vertical';
|
|
1090
|
-
let scrollState;
|
|
1091
|
-
|
|
1092
|
-
if (this.pageMode) {
|
|
1093
|
-
const bounds = el.getBoundingClientRect();
|
|
1094
|
-
const boundsSize = isVertical ? bounds.height : bounds.width;
|
|
1095
|
-
let start = -(isVertical ? bounds.top : bounds.left);
|
|
1096
|
-
let size = isVertical ? window.innerHeight : window.innerWidth;
|
|
1097
|
-
if (start < 0) {
|
|
1098
|
-
size += start;
|
|
1099
|
-
start = 0;
|
|
1100
|
-
}
|
|
1101
|
-
if (start + size > boundsSize) {
|
|
1102
|
-
size = boundsSize - start;
|
|
1103
|
-
}
|
|
1104
|
-
scrollState = {
|
|
1105
|
-
start,
|
|
1106
|
-
end: start + size,
|
|
1107
|
-
};
|
|
1108
|
-
} else if (isVertical) {
|
|
1109
|
-
scrollState = {
|
|
1110
|
-
start: el.scrollTop,
|
|
1111
|
-
end: el.scrollTop + el.clientHeight,
|
|
1112
|
-
};
|
|
1113
|
-
} else {
|
|
1114
|
-
scrollState = {
|
|
1115
|
-
start: el.scrollLeft,
|
|
1116
|
-
end: el.scrollLeft + el.clientWidth,
|
|
1117
|
-
};
|
|
1118
|
-
}
|
|
1119
|
-
|
|
1120
|
-
return scrollState
|
|
1121
|
-
},
|
|
1122
|
-
|
|
1123
|
-
applyPageMode () {
|
|
1124
|
-
if (this.pageMode) {
|
|
1125
|
-
this.addListeners();
|
|
1126
|
-
} else {
|
|
1127
|
-
this.removeListeners();
|
|
1128
|
-
}
|
|
1129
|
-
},
|
|
1130
|
-
|
|
1131
|
-
addListeners () {
|
|
1132
|
-
this.listenerTarget = this.getListenerTarget();
|
|
1133
|
-
this.listenerTarget.addEventListener('scroll', this.handleScroll, supportsPassive
|
|
1134
|
-
? {
|
|
1135
|
-
passive: true,
|
|
1136
|
-
}
|
|
1137
|
-
: false);
|
|
1138
|
-
this.listenerTarget.addEventListener('resize', this.handleResize);
|
|
1139
|
-
},
|
|
1140
|
-
|
|
1141
|
-
removeListeners () {
|
|
1142
|
-
if (!this.listenerTarget) {
|
|
1143
|
-
return
|
|
1144
|
-
}
|
|
1145
|
-
|
|
1146
|
-
this.listenerTarget.removeEventListener('scroll', this.handleScroll);
|
|
1147
|
-
this.listenerTarget.removeEventListener('resize', this.handleResize);
|
|
1148
|
-
|
|
1149
|
-
this.listenerTarget = null;
|
|
1150
|
-
},
|
|
1151
|
-
|
|
1152
|
-
scrollToItem (index) {
|
|
1153
|
-
let scroll;
|
|
1154
|
-
const gridItems = this.gridItems || 1;
|
|
1155
|
-
if (this.itemSize === null) {
|
|
1156
|
-
scroll = index > 0 ? this.sizes[index - 1].accumulator : 0;
|
|
1157
|
-
} else {
|
|
1158
|
-
scroll = Math.floor(index / gridItems) * this.itemSize;
|
|
1159
|
-
}
|
|
1160
|
-
this.scrollToPosition(scroll);
|
|
1161
|
-
},
|
|
1162
|
-
|
|
1163
|
-
scrollToPosition (position) {
|
|
1164
|
-
const direction = this.direction === 'vertical'
|
|
1165
|
-
? { scroll: 'scrollTop', start: 'top' }
|
|
1166
|
-
: { scroll: 'scrollLeft', start: 'left' };
|
|
1167
|
-
|
|
1168
|
-
let viewport;
|
|
1169
|
-
let scrollDirection;
|
|
1170
|
-
let scrollDistance;
|
|
1171
|
-
|
|
1172
|
-
if (this.pageMode) {
|
|
1173
|
-
const viewportEl = getScrollParent(this.$el);
|
|
1174
|
-
// HTML doesn't overflow like other elements
|
|
1175
|
-
const scrollTop = viewportEl.tagName === 'HTML' ? 0 : viewportEl[direction.scroll];
|
|
1176
|
-
const bounds = viewportEl.getBoundingClientRect();
|
|
1177
|
-
|
|
1178
|
-
const scroller = this.$el.getBoundingClientRect();
|
|
1179
|
-
const scrollerPosition = scroller[direction.start] - bounds[direction.start];
|
|
1180
|
-
|
|
1181
|
-
viewport = viewportEl;
|
|
1182
|
-
scrollDirection = direction.scroll;
|
|
1183
|
-
scrollDistance = position + scrollTop + scrollerPosition;
|
|
1184
|
-
} else {
|
|
1185
|
-
viewport = this.$el;
|
|
1186
|
-
scrollDirection = direction.scroll;
|
|
1187
|
-
scrollDistance = position;
|
|
1188
|
-
}
|
|
1189
|
-
|
|
1190
|
-
viewport[scrollDirection] = scrollDistance;
|
|
1191
|
-
},
|
|
1192
|
-
|
|
1193
|
-
itemsLimitError () {
|
|
1194
|
-
setTimeout(() => {
|
|
1195
|
-
console.log('It seems the scroller element isn\'t scrolling, so it tries to render all the items at once.', 'Scroller:', this.$el);
|
|
1196
|
-
console.log('Make sure the scroller has a fixed height (or width) and \'overflow-y\' (or \'overflow-x\') set to \'auto\' so it can scroll correctly and only render the items visible in the scroll viewport.');
|
|
1197
|
-
});
|
|
1198
|
-
throw new Error('Rendered items limit reached')
|
|
1199
|
-
},
|
|
1200
|
-
|
|
1201
|
-
sortViews () {
|
|
1202
|
-
this.pool.sort((viewA, viewB) => viewA.nr.index - viewB.nr.index);
|
|
1203
|
-
},
|
|
1204
|
-
},
|
|
1205
|
-
};
|
|
1206
|
-
|
|
1207
|
-
const _hoisted_1$2 = {
|
|
1208
|
-
key: 0,
|
|
1209
|
-
ref: "before",
|
|
1210
|
-
class: "vue-recycle-scroller__slot"
|
|
1211
|
-
};
|
|
1212
|
-
const _hoisted_2$2 = {
|
|
1213
|
-
key: 1,
|
|
1214
|
-
ref: "after",
|
|
1215
|
-
class: "vue-recycle-scroller__slot"
|
|
1216
|
-
};
|
|
1217
|
-
|
|
1218
|
-
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
|
1219
|
-
const _component_ResizeObserver = resolveComponent("ResizeObserver");
|
|
1220
|
-
const _directive_observe_visibility = resolveDirective("observe-visibility");
|
|
1221
|
-
|
|
1222
|
-
return withDirectives((openBlock(), createElementBlock("div", {
|
|
1223
|
-
class: normalizeClass(["vue-recycle-scroller", {
|
|
1224
|
-
ready: $data.ready,
|
|
1225
|
-
'page-mode': $props.pageMode,
|
|
1226
|
-
[`direction-${_ctx.direction}`]: true,
|
|
1227
|
-
}]),
|
|
1228
|
-
onScrollPassive: _cache[0] || (_cache[0] = (...args) => ($options.handleScroll && $options.handleScroll(...args)))
|
|
1229
|
-
}, [
|
|
1230
|
-
(_ctx.$slots.before)
|
|
1231
|
-
? (openBlock(), createElementBlock("div", _hoisted_1$2, [
|
|
1232
|
-
renderSlot(_ctx.$slots, "before")
|
|
1233
|
-
], 512 /* NEED_PATCH */))
|
|
1234
|
-
: createCommentVNode("v-if", true),
|
|
1235
|
-
(openBlock(), createBlock(resolveDynamicComponent($props.listTag), {
|
|
1236
|
-
ref: "wrapper",
|
|
1237
|
-
style: normalizeStyle({ [_ctx.direction === 'vertical' ? 'minHeight' : 'minWidth']: $data.totalSize + 'px' }),
|
|
1238
|
-
class: normalizeClass(["vue-recycle-scroller__item-wrapper", $props.listClass])
|
|
1239
|
-
}, {
|
|
1240
|
-
default: withCtx(() => [
|
|
1241
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList($data.pool, (view) => {
|
|
1242
|
-
return (openBlock(), createBlock(resolveDynamicComponent($props.itemTag), mergeProps({
|
|
1243
|
-
key: view.nr.id,
|
|
1244
|
-
style: $data.ready ? {
|
|
1245
|
-
transform: `translate${_ctx.direction === 'vertical' ? 'Y' : 'X'}(${view.position}px) translate${_ctx.direction === 'vertical' ? 'X' : 'Y'}(${view.offset}px)`,
|
|
1246
|
-
width: $props.gridItems ? `${_ctx.direction === 'vertical' ? $props.itemSecondarySize || $props.itemSize : $props.itemSize}px` : undefined,
|
|
1247
|
-
height: $props.gridItems ? `${_ctx.direction === 'horizontal' ? $props.itemSecondarySize || $props.itemSize : $props.itemSize}px` : undefined,
|
|
1248
|
-
} : null,
|
|
1249
|
-
class: ["vue-recycle-scroller__item-view", [
|
|
1250
|
-
$props.itemClass,
|
|
1251
|
-
{
|
|
1252
|
-
hover: !$props.skipHover && $data.hoverKey === view.nr.key
|
|
1253
|
-
},
|
|
1254
|
-
]]
|
|
1255
|
-
}, toHandlers($props.skipHover ? {} : {
|
|
1256
|
-
mouseenter: () => { $data.hoverKey = view.nr.key; },
|
|
1257
|
-
mouseleave: () => { $data.hoverKey = null; },
|
|
1258
|
-
})), {
|
|
1259
|
-
default: withCtx(() => [
|
|
1260
|
-
renderSlot(_ctx.$slots, "default", {
|
|
1261
|
-
item: view.item,
|
|
1262
|
-
index: view.nr.index,
|
|
1263
|
-
active: view.nr.used
|
|
1264
|
-
})
|
|
1265
|
-
]),
|
|
1266
|
-
_: 2 /* DYNAMIC */
|
|
1267
|
-
}, 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["style", "class"]))
|
|
1268
|
-
}), 128 /* KEYED_FRAGMENT */)),
|
|
1269
|
-
renderSlot(_ctx.$slots, "empty")
|
|
1270
|
-
]),
|
|
1271
|
-
_: 3 /* FORWARDED */
|
|
1272
|
-
}, 8 /* PROPS */, ["style", "class"])),
|
|
1273
|
-
(_ctx.$slots.after)
|
|
1274
|
-
? (openBlock(), createElementBlock("div", _hoisted_2$2, [
|
|
1275
|
-
renderSlot(_ctx.$slots, "after")
|
|
1276
|
-
], 512 /* NEED_PATCH */))
|
|
1277
|
-
: createCommentVNode("v-if", true),
|
|
1278
|
-
createVNode(_component_ResizeObserver, { onNotify: $options.handleResize }, null, 8 /* PROPS */, ["onNotify"])
|
|
1279
|
-
], 34 /* CLASS, HYDRATE_EVENTS */)), [
|
|
1280
|
-
[_directive_observe_visibility, $options.handleVisibilityChange]
|
|
1281
|
-
])
|
|
1282
|
-
}
|
|
1283
|
-
|
|
1284
|
-
script$2.render = render$1;
|
|
1285
|
-
script$2.__file = "src/components/RecycleScroller.vue";
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
/* Injected with object hook! */
|
|
1289
|
-
|
|
1290
|
-
const vueVirtualScroller = '';
|
|
1291
|
-
/* Injected with object hook! */
|
|
1292
|
-
|
|
1293
|
-
const _hoisted_1$1 = { key: 0 };
|
|
1294
|
-
const _hoisted_2$1 = ["onClick"];
|
|
1295
|
-
const _hoisted_3$1 = {
|
|
1296
|
-
"flex-1": "",
|
|
1297
|
-
truncate: "",
|
|
1298
|
-
"font-mono": "",
|
|
1299
|
-
"space-x-1": ""
|
|
1300
|
-
};
|
|
1301
|
-
const _hoisted_4$1 = { "opacity-75": "" };
|
|
1302
|
-
const _hoisted_5$1 = {
|
|
1303
|
-
"flex-none": "",
|
|
1304
|
-
"font-mono": "",
|
|
1305
|
-
"opacity-50": ""
|
|
1306
|
-
};
|
|
1307
|
-
const _hoisted_6$1 = /* @__PURE__ */ createBaseVNode("h1", {
|
|
1308
|
-
"text-sm": "",
|
|
1309
|
-
italic: "",
|
|
1310
|
-
op50: ""
|
|
1311
|
-
}, " No Events ", -1);
|
|
1312
|
-
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
1313
|
-
__name: "TimelineEvent",
|
|
1314
|
-
props: {
|
|
1315
|
-
data: {},
|
|
1316
|
-
selected: {}
|
|
1317
|
-
},
|
|
1318
|
-
emits: ["update-selected"],
|
|
1319
|
-
setup(__props, { emit: emits }) {
|
|
1320
|
-
return (_ctx, _cache) => {
|
|
1321
|
-
const _component_VDCard = __unplugin_components_7;
|
|
1322
|
-
const _component_VDPanelGrids = __unplugin_components_0;
|
|
1323
|
-
return _ctx.data.length ? (openBlock(), createElementBlock("ul", _hoisted_1$1, [
|
|
1324
|
-
createVNode(unref(script$2), {
|
|
1325
|
-
items: _ctx.data,
|
|
1326
|
-
"min-item-size": 40,
|
|
1327
|
-
"key-field": "id",
|
|
1328
|
-
"page-mode": ""
|
|
1329
|
-
}, {
|
|
1330
|
-
default: withCtx(({ item, index }) => [
|
|
1331
|
-
createBaseVNode("li", {
|
|
1332
|
-
border: "b base",
|
|
1333
|
-
"h-10": "",
|
|
1334
|
-
flex: "",
|
|
1335
|
-
"cursor-pointer": "",
|
|
1336
|
-
"select-none": "",
|
|
1337
|
-
"items-center": "",
|
|
1338
|
-
"pl-3": "",
|
|
1339
|
-
"pr-2": "",
|
|
1340
|
-
"text-xs": "",
|
|
1341
|
-
"space-x-2": "",
|
|
1342
|
-
class: normalizeClass([index === _ctx.selected ? "vue-block-active" : "vue-block-hover"]),
|
|
1343
|
-
onClick: ($event) => emits("update-selected", index)
|
|
1344
|
-
}, [
|
|
1345
|
-
createBaseVNode("span", _hoisted_3$1, [
|
|
1346
|
-
createBaseVNode("span", {
|
|
1347
|
-
"font-medium": "",
|
|
1348
|
-
class: normalizeClass([index === _ctx.selected ? "text-white" : "text-purple-600 dark:text-purple-400"])
|
|
1349
|
-
}, toDisplayString(item.event.title), 3),
|
|
1350
|
-
createBaseVNode("span", _hoisted_4$1, toDisplayString(item.event.subtitle), 1)
|
|
1351
|
-
]),
|
|
1352
|
-
createBaseVNode("span", _hoisted_5$1, toDisplayString(unref(dayjs)(item.event.now).format("HH:mm:ss")), 1)
|
|
1353
|
-
], 10, _hoisted_2$1)
|
|
1354
|
-
]),
|
|
1355
|
-
_: 1
|
|
1356
|
-
}, 8, ["items"])
|
|
1357
|
-
])) : (openBlock(), createBlock(_component_VDPanelGrids, {
|
|
1358
|
-
key: 1,
|
|
1359
|
-
px5: ""
|
|
1360
|
-
}, {
|
|
1361
|
-
default: withCtx(() => [
|
|
1362
|
-
createVNode(_component_VDCard, {
|
|
1363
|
-
flex: "~ col gap2",
|
|
1364
|
-
"min-w-30": "",
|
|
1365
|
-
"items-center": "",
|
|
1366
|
-
p3: ""
|
|
1367
|
-
}, {
|
|
1368
|
-
default: withCtx(() => [
|
|
1369
|
-
_hoisted_6$1
|
|
1370
|
-
]),
|
|
1371
|
-
_: 1
|
|
1372
|
-
})
|
|
1373
|
-
]),
|
|
1374
|
-
_: 1
|
|
1375
|
-
}));
|
|
1376
|
-
};
|
|
1377
|
-
}
|
|
1378
|
-
});
|
|
1379
|
-
|
|
1380
|
-
/* Injected with object hook! */
|
|
1381
|
-
|
|
1382
|
-
const _hoisted_1 = {
|
|
1383
|
-
"h-screen": "",
|
|
1384
|
-
"n-panel-grids": ""
|
|
1385
|
-
};
|
|
1386
|
-
const _hoisted_2 = {
|
|
1387
|
-
"h-screen": "",
|
|
1388
|
-
"select-none": "",
|
|
1389
|
-
"overflow-scroll": "",
|
|
1390
|
-
"p-2": "",
|
|
1391
|
-
class: "no-scrollbar"
|
|
1392
|
-
};
|
|
1393
|
-
const _hoisted_3 = ["onClick"];
|
|
1394
|
-
const _hoisted_4 = { "vue-block-title": "" };
|
|
1395
|
-
const _hoisted_5 = {
|
|
1396
|
-
"h-screen": "",
|
|
1397
|
-
"select-none": "",
|
|
1398
|
-
"overflow-scroll": "",
|
|
1399
|
-
class: "no-scrollbar"
|
|
1400
|
-
};
|
|
1401
|
-
const _hoisted_6 = {
|
|
1402
|
-
"h-screen": "",
|
|
1403
|
-
"select-none": "",
|
|
1404
|
-
"overflow-scroll": "",
|
|
1405
|
-
"p-2": "",
|
|
1406
|
-
class: "no-scrollbar"
|
|
1407
|
-
};
|
|
1408
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
1409
|
-
__name: "timeline",
|
|
1410
|
-
setup(__props) {
|
|
1411
|
-
return (_ctx, _cache) => {
|
|
1412
|
-
const _component_TimelineEvent = _sfc_main$1;
|
|
1413
|
-
const _component_StateFields = _sfc_main$2;
|
|
1414
|
-
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
1415
|
-
createVNode(unref(M), null, {
|
|
1416
|
-
default: withCtx(() => [
|
|
1417
|
-
createVNode(unref(g), {
|
|
1418
|
-
border: "r base",
|
|
1419
|
-
size: "20"
|
|
1420
|
-
}, {
|
|
1421
|
-
default: withCtx(() => [
|
|
1422
|
-
createBaseVNode("div", _hoisted_2, [
|
|
1423
|
-
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(timelineLayer), (item) => {
|
|
1424
|
-
return openBlock(), createElementBlock("div", {
|
|
1425
|
-
key: item.id,
|
|
1426
|
-
"vue-block": "",
|
|
1427
|
-
class: normalizeClass([unref(activeLayerId) === item.id ? "vue-block-active" : "vue-block-hover"]),
|
|
1428
|
-
onClick: ($event) => unref(toggleTimelineLayer)(item.id)
|
|
1429
|
-
}, [
|
|
1430
|
-
createBaseVNode("h3", _hoisted_4, [
|
|
1431
|
-
createBaseVNode("span", {
|
|
1432
|
-
truncate: "",
|
|
1433
|
-
class: normalizeClass([unref(activeLayerId) === item.id && "text-white"])
|
|
1434
|
-
}, toDisplayString(item.label), 3)
|
|
1435
|
-
])
|
|
1436
|
-
], 10, _hoisted_3);
|
|
1437
|
-
}), 128))
|
|
1438
|
-
])
|
|
1439
|
-
]),
|
|
1440
|
-
_: 1
|
|
1441
|
-
}),
|
|
1442
|
-
createVNode(unref(g), {
|
|
1443
|
-
border: "r base",
|
|
1444
|
-
size: "45"
|
|
1445
|
-
}, {
|
|
1446
|
-
default: withCtx(() => [
|
|
1447
|
-
createBaseVNode("div", _hoisted_5, [
|
|
1448
|
-
createVNode(_component_TimelineEvent, {
|
|
1449
|
-
data: unref(activeTimelineEvents),
|
|
1450
|
-
selected: unref(activeTimelineEventIndex),
|
|
1451
|
-
onUpdateSelected: unref(toggleTimelineEventIndex)
|
|
1452
|
-
}, null, 8, ["data", "selected", "onUpdateSelected"])
|
|
1453
|
-
])
|
|
1454
|
-
]),
|
|
1455
|
-
_: 1
|
|
1456
|
-
}),
|
|
1457
|
-
unref(timelineEventDetails).value ? (openBlock(), createBlock(unref(g), {
|
|
1458
|
-
key: 0,
|
|
1459
|
-
size: "35"
|
|
1460
|
-
}, {
|
|
1461
|
-
default: withCtx(() => [
|
|
1462
|
-
createBaseVNode("div", _hoisted_6, [
|
|
1463
|
-
createVNode(_component_StateFields, { data: unref(timelineEventDetails) }, null, 8, ["data"])
|
|
1464
|
-
])
|
|
1465
|
-
]),
|
|
1466
|
-
_: 1
|
|
1467
|
-
})) : createCommentVNode("", true)
|
|
1468
|
-
]),
|
|
1469
|
-
_: 1
|
|
1470
|
-
})
|
|
1471
|
-
]);
|
|
1472
|
-
};
|
|
1473
|
-
}
|
|
1474
|
-
});
|
|
1475
|
-
|
|
1476
|
-
/* Injected with object hook! */
|
|
1477
|
-
|
|
1478
|
-
/* Injected with object hook! */
|
|
1479
|
-
|
|
1480
|
-
export { _sfc_main as default };
|