fix price and modular
This commit is contained in:
+100
-24
@@ -93,7 +93,6 @@ const observeElementOffset = (instance, cb) => {
|
||||
};
|
||||
const handler = createHandler(true);
|
||||
const endHandler = createHandler(false);
|
||||
endHandler();
|
||||
element.addEventListener("scroll", handler, addEventListenerOptions);
|
||||
const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
|
||||
if (registerScrollendEvent) {
|
||||
@@ -130,7 +129,6 @@ const observeWindowOffset = (instance, cb) => {
|
||||
};
|
||||
const handler = createHandler(true);
|
||||
const endHandler = createHandler(false);
|
||||
endHandler();
|
||||
element.addEventListener("scroll", handler, addEventListenerOptions);
|
||||
const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
|
||||
if (registerScrollendEvent) {
|
||||
@@ -183,9 +181,14 @@ class Virtualizer {
|
||||
this.scrollElement = null;
|
||||
this.targetWindow = null;
|
||||
this.isScrolling = false;
|
||||
this.currentScrollToIndex = null;
|
||||
this.measurementsCache = [];
|
||||
this.itemSizeCache = /* @__PURE__ */ new Map();
|
||||
this.laneAssignments = /* @__PURE__ */ new Map();
|
||||
this.pendingMeasuredCacheIndexes = [];
|
||||
this.prevLanes = void 0;
|
||||
this.lanesChangedFlag = false;
|
||||
this.lanesSettling = false;
|
||||
this.scrollRect = null;
|
||||
this.scrollOffset = null;
|
||||
this.scrollDirection = null;
|
||||
@@ -314,10 +317,6 @@ class Virtualizer {
|
||||
this.elementsCache.forEach((cached) => {
|
||||
this.observer.observe(cached);
|
||||
});
|
||||
this._scrollToOffset(this.getScrollOffset(), {
|
||||
adjustments: void 0,
|
||||
behavior: void 0
|
||||
});
|
||||
this.unsubs.push(
|
||||
this.options.observeElementRect(this, (rect) => {
|
||||
this.scrollRect = rect;
|
||||
@@ -333,6 +332,10 @@ class Virtualizer {
|
||||
this.maybeNotify();
|
||||
})
|
||||
);
|
||||
this._scrollToOffset(this.getScrollOffset(), {
|
||||
adjustments: void 0,
|
||||
behavior: void 0
|
||||
});
|
||||
}
|
||||
};
|
||||
this.getSize = () => {
|
||||
@@ -384,16 +387,23 @@ class Virtualizer {
|
||||
this.options.paddingStart,
|
||||
this.options.scrollMargin,
|
||||
this.options.getItemKey,
|
||||
this.options.enabled
|
||||
this.options.enabled,
|
||||
this.options.lanes
|
||||
],
|
||||
(count, paddingStart, scrollMargin, getItemKey, enabled) => {
|
||||
(count, paddingStart, scrollMargin, getItemKey, enabled, lanes) => {
|
||||
const lanesChanged = this.prevLanes !== void 0 && this.prevLanes !== lanes;
|
||||
if (lanesChanged) {
|
||||
this.lanesChangedFlag = true;
|
||||
}
|
||||
this.prevLanes = lanes;
|
||||
this.pendingMeasuredCacheIndexes = [];
|
||||
return {
|
||||
count,
|
||||
paddingStart,
|
||||
scrollMargin,
|
||||
getItemKey,
|
||||
enabled
|
||||
enabled,
|
||||
lanes
|
||||
};
|
||||
},
|
||||
{
|
||||
@@ -402,29 +412,70 @@ class Virtualizer {
|
||||
);
|
||||
this.getMeasurements = memo(
|
||||
() => [this.getMeasurementOptions(), this.itemSizeCache],
|
||||
({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
|
||||
({ count, paddingStart, scrollMargin, getItemKey, enabled, lanes }, itemSizeCache) => {
|
||||
if (!enabled) {
|
||||
this.measurementsCache = [];
|
||||
this.itemSizeCache.clear();
|
||||
this.laneAssignments.clear();
|
||||
return [];
|
||||
}
|
||||
if (this.measurementsCache.length === 0) {
|
||||
if (this.laneAssignments.size > count) {
|
||||
for (const index of this.laneAssignments.keys()) {
|
||||
if (index >= count) {
|
||||
this.laneAssignments.delete(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.lanesChangedFlag) {
|
||||
this.lanesChangedFlag = false;
|
||||
this.lanesSettling = true;
|
||||
this.measurementsCache = [];
|
||||
this.itemSizeCache.clear();
|
||||
this.laneAssignments.clear();
|
||||
this.pendingMeasuredCacheIndexes = [];
|
||||
}
|
||||
if (this.measurementsCache.length === 0 && !this.lanesSettling) {
|
||||
this.measurementsCache = this.options.initialMeasurementsCache;
|
||||
this.measurementsCache.forEach((item) => {
|
||||
this.itemSizeCache.set(item.key, item.size);
|
||||
});
|
||||
}
|
||||
const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
|
||||
const min = this.lanesSettling ? 0 : this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
|
||||
this.pendingMeasuredCacheIndexes = [];
|
||||
if (this.lanesSettling && this.measurementsCache.length === count) {
|
||||
this.lanesSettling = false;
|
||||
}
|
||||
const measurements = this.measurementsCache.slice(0, min);
|
||||
const laneLastIndex = new Array(lanes).fill(
|
||||
void 0
|
||||
);
|
||||
for (let m = 0; m < min; m++) {
|
||||
const item = measurements[m];
|
||||
if (item) {
|
||||
laneLastIndex[item.lane] = m;
|
||||
}
|
||||
}
|
||||
for (let i = min; i < count; i++) {
|
||||
const key = getItemKey(i);
|
||||
const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
|
||||
const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
|
||||
const cachedLane = this.laneAssignments.get(i);
|
||||
let lane;
|
||||
let start;
|
||||
if (cachedLane !== void 0 && this.options.lanes > 1) {
|
||||
lane = cachedLane;
|
||||
const prevIndex = laneLastIndex[lane];
|
||||
const prevInLane = prevIndex !== void 0 ? measurements[prevIndex] : void 0;
|
||||
start = prevInLane ? prevInLane.end + this.options.gap : paddingStart + scrollMargin;
|
||||
} else {
|
||||
const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
|
||||
start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
|
||||
lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
|
||||
if (this.options.lanes > 1) {
|
||||
this.laneAssignments.set(i, lane);
|
||||
}
|
||||
}
|
||||
const measuredSize = itemSizeCache.get(key);
|
||||
const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
|
||||
const end = start + size;
|
||||
const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
|
||||
measurements[i] = {
|
||||
index: i,
|
||||
start,
|
||||
@@ -433,6 +484,7 @@ class Virtualizer {
|
||||
key,
|
||||
lane
|
||||
};
|
||||
laneLastIndex[lane] = i;
|
||||
}
|
||||
this.measurementsCache = measurements;
|
||||
return measurements;
|
||||
@@ -587,7 +639,17 @@ class Virtualizer {
|
||||
)]
|
||||
);
|
||||
};
|
||||
this.getMaxScrollOffset = () => {
|
||||
if (!this.scrollElement) return 0;
|
||||
if ("scrollHeight" in this.scrollElement) {
|
||||
return this.options.horizontal ? this.scrollElement.scrollWidth - this.scrollElement.clientWidth : this.scrollElement.scrollHeight - this.scrollElement.clientHeight;
|
||||
} else {
|
||||
const doc = this.scrollElement.document.documentElement;
|
||||
return this.options.horizontal ? doc.scrollWidth - this.scrollElement.innerWidth : doc.scrollHeight - this.scrollElement.innerHeight;
|
||||
}
|
||||
};
|
||||
this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
|
||||
if (!this.scrollElement) return 0;
|
||||
const size = this.getSize();
|
||||
const scrollOffset = this.getScrollOffset();
|
||||
if (align === "auto") {
|
||||
@@ -598,7 +660,7 @@ class Virtualizer {
|
||||
} else if (align === "end") {
|
||||
toOffset -= size;
|
||||
}
|
||||
const maxOffset = this.getTotalSize() + this.options.scrollMargin - size;
|
||||
const maxOffset = this.getMaxScrollOffset();
|
||||
return Math.max(Math.min(maxOffset, toOffset), 0);
|
||||
};
|
||||
this.getOffsetForIndex = (index, align = "auto") => {
|
||||
@@ -618,6 +680,9 @@ class Virtualizer {
|
||||
return [scrollOffset, align];
|
||||
}
|
||||
}
|
||||
if (align === "end" && index === this.options.count - 1) {
|
||||
return [this.getMaxScrollOffset(), align];
|
||||
}
|
||||
const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
|
||||
return [
|
||||
this.getOffsetForAlignment(toOffset, align, item.size),
|
||||
@@ -643,6 +708,7 @@ class Virtualizer {
|
||||
);
|
||||
}
|
||||
index = Math.max(0, Math.min(index, this.options.count - 1));
|
||||
this.currentScrollToIndex = index;
|
||||
let attempts = 0;
|
||||
const maxAttempts = 10;
|
||||
const tryScroll = (currentAlign) => {
|
||||
@@ -655,19 +721,28 @@ class Virtualizer {
|
||||
const [offset, align] = offsetInfo;
|
||||
this._scrollToOffset(offset, { adjustments: void 0, behavior });
|
||||
this.targetWindow.requestAnimationFrame(() => {
|
||||
const currentOffset = this.getScrollOffset();
|
||||
const afterInfo = this.getOffsetForIndex(index, align);
|
||||
if (!afterInfo) {
|
||||
console.warn("Failed to get offset for index:", index);
|
||||
return;
|
||||
}
|
||||
if (!approxEqual(afterInfo[0], currentOffset)) {
|
||||
scheduleRetry(align);
|
||||
const verify = () => {
|
||||
if (this.currentScrollToIndex !== index) return;
|
||||
const currentOffset = this.getScrollOffset();
|
||||
const afterInfo = this.getOffsetForIndex(index, align);
|
||||
if (!afterInfo) {
|
||||
console.warn("Failed to get offset for index:", index);
|
||||
return;
|
||||
}
|
||||
if (!approxEqual(afterInfo[0], currentOffset)) {
|
||||
scheduleRetry(align);
|
||||
}
|
||||
};
|
||||
if (this.isDynamicMode()) {
|
||||
this.targetWindow.requestAnimationFrame(verify);
|
||||
} else {
|
||||
verify();
|
||||
}
|
||||
});
|
||||
};
|
||||
const scheduleRetry = (align) => {
|
||||
if (!this.targetWindow) return;
|
||||
if (this.currentScrollToIndex !== index) return;
|
||||
attempts++;
|
||||
if (attempts < maxAttempts) {
|
||||
if (process.env.NODE_ENV !== "production" && this.options.debug) {
|
||||
@@ -726,6 +801,7 @@ class Virtualizer {
|
||||
};
|
||||
this.measure = () => {
|
||||
this.itemSizeCache = /* @__PURE__ */ new Map();
|
||||
this.laneAssignments = /* @__PURE__ */ new Map();
|
||||
this.notify(false);
|
||||
};
|
||||
this.setOptions(opts);
|
||||
|
||||
+6
-2
@@ -1,8 +1,9 @@
|
||||
function memo(getDeps, fn, opts) {
|
||||
let deps = opts.initialDeps ?? [];
|
||||
let result;
|
||||
let isInitial = true;
|
||||
function memoizedFunction() {
|
||||
var _a, _b, _c, _d;
|
||||
var _a, _b, _c;
|
||||
let depTime;
|
||||
if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
|
||||
const newDeps = getDeps();
|
||||
@@ -37,7 +38,10 @@ function memo(getDeps, fn, opts) {
|
||||
opts == null ? void 0 : opts.key
|
||||
);
|
||||
}
|
||||
(_d = opts == null ? void 0 : opts.onChange) == null ? void 0 : _d.call(opts, result);
|
||||
if ((opts == null ? void 0 : opts.onChange) && !(isInitial && opts.skipInitialOnChange)) {
|
||||
opts.onChange(result);
|
||||
}
|
||||
isInitial = false;
|
||||
return result;
|
||||
}
|
||||
memoizedFunction.updateDeps = (newDeps) => {
|
||||
|
||||
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@tanstack/virtual-core",
|
||||
"version": "3.13.12",
|
||||
"version": "3.13.18",
|
||||
"description": "Headless UI for virtualizing scrollable elements in TS/JS + Frameworks",
|
||||
"author": "Tanner Linsley",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/TanStack/virtual.git",
|
||||
"url": "git+https://github.com/TanStack/virtual.git",
|
||||
"directory": "packages/virtual-core"
|
||||
},
|
||||
"homepage": "https://tanstack.com/virtual",
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
../../../.nitro/vue@3.5.22
|
||||
../../../.nitro/vue@3.5.14
|
||||
+3
-3
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@tanstack/vue-virtual",
|
||||
"version": "3.13.12",
|
||||
"version": "3.13.18",
|
||||
"description": "Headless UI for virtualizing scrollable elements in Vue",
|
||||
"author": "Tanner Linsley",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/TanStack/virtual.git",
|
||||
"url": "git+https://github.com/TanStack/virtual.git",
|
||||
"directory": "packages/vue-virtual"
|
||||
},
|
||||
"homepage": "https://tanstack.com/virtual",
|
||||
@@ -49,7 +49,7 @@
|
||||
"src"
|
||||
],
|
||||
"dependencies": {
|
||||
"@tanstack/virtual-core": "3.13.12"
|
||||
"@tanstack/virtual-core": "3.13.18"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.4",
|
||||
|
||||
Reference in New Issue
Block a user