@sdata/web-vue 3.3.0 → 3.4.0

package/es/_components/virtual-list/virtual-list.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,13 @@
 import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../../_utils/global-config.js";
-import { isObject, isString } from "../../_utils/is.js";
-import { useVirtualSize } from "./use-virtual-size.js";
+import { isString } from "../../_utils/is.js";
+import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectWithoutProperties.js";
 import { _asyncToGenerator } from "../../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
-import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toHandlers, unref, watch, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, watch, withCtx } from "vue";
 import { OverlayScrollbars } from "overlayscrollbars";
-import { DynamicScroller, DynamicScrollerItem, RecycleScroller } from "vue-virtual-scroller";
+import { Virtualizer } from "virtua/vue";
 //#region components/_components/virtual-list/virtual-list.vue?vue&type=script&setup=true&lang.ts
+var _excluded = ["class", "style"];
 var virtual_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "VirtualList" }), {}, {
 	__name: "virtual-list",
 	props: {
@@ -130,21 +131,16 @@ var virtual_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		const props = __props;
 		const prefixCls = getPrefixCls("virtual-list");
 		const scrollbarHostRef = ref();
-		const scrollerRef = ref();
 		const viewportRef = ref();
-		const compatItemRefs = /* @__PURE__ */ new Map();
+		const virtuaRef = ref();
 		const osInstanceRef = ref(null);
 		const overlayViewportReadyRef = ref(false);
 		const resolvedItems = computed(() => {
 			var _props$items;
 			return (_props$items = props.items) !== null && _props$items !== void 0 ? _props$items : [];
 		});
-		const isCompatMode = computed(() => {
-			return Boolean(props.component || props.listAttrs || props.contentWrapperAttrs || props.contentAttrs || props.listStyle || props.paddingPosition !== "content");
-		});
-		const hasCompatContentWrapper = computed(() => {
-			return Boolean(props.contentWrapperAttrs || isObject(props.component) && props.component.item);
-		});
+		const isEmpty = computed(() => resolvedItems.value.length === 0);
+		const isHorizontal = computed(() => props.direction === "horizontal");
 		const resolvedScrollbarProps = computed(() => {
 			if (typeof props.scrollbar === "boolean") return { type: "embed" };
 			return _objectSpread2({ type: "embed" }, props.scrollbar);
@@ -166,158 +162,74 @@ var virtual_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			if (props.height === void 0) return;
 			return typeof props.height === "number" ? `${props.height}px` : props.height;
 		});
-		const mergedCompatComponent = computed(() => {
-			var _props$component;
-			if (isObject(props.component)) return _objectSpread2({
-				container: "div",
-				list: "div",
-				content: "div",
-				item: "div"
-			}, props.component);
-			return {
-				container: (_props$component = props.component) !== null && _props$component !== void 0 ? _props$component : "div",
-				list: "div",
-				content: "div",
-				item: "div"
-			};
-		});
-		const compatFixedSize = computed(() => {
-			return props.fixedSize || typeof props.itemSize === "number";
-		});
-		const compatEstimatedSize = computed(() => {
-			if (props.estimatedSize !== void 0) return props.estimatedSize;
-			if (typeof props.itemSize === "number") return props.itemSize;
-			if (typeof props.minItemSize === "number") return props.minItemSize;
-		});
-		const compatViewportSize = ref(0);
-		const compatResolvedItemSize = computed(() => {
-			var _compatEstimatedSize$;
-			return (_compatEstimatedSize$ = compatEstimatedSize.value) !== null && _compatEstimatedSize$ !== void 0 ? _compatEstimatedSize$ : 30;
-		});
-		const compatBuffer = computed(() => {
-			var _props$buffer;
-			return (_props$buffer = props.buffer) !== null && _props$buffer !== void 0 ? _props$buffer : 200;
-		});
-		const compatOverscan = computed(() => {
-			const baseItemSize = Math.max(compatResolvedItemSize.value, 1);
-			return Math.max(Math.ceil(compatBuffer.value / baseItemSize), 0);
-		});
-		const compatVisibleCount = computed(() => {
-			const baseItemSize = Math.max(compatResolvedItemSize.value, 1);
-			if (compatViewportSize.value <= 0) return 1;
-			return Math.max(Math.ceil(compatViewportSize.value / baseItemSize), 1);
-		});
-		const getCompatItemKey = (item, index) => {
-			const keyField = props.keyField;
-			if (typeof keyField === "function") return keyField(item, index);
-			if (item && typeof item === "object" && isString(keyField)) {
-				var _item$keyField;
-				return (_item$keyField = item[keyField]) !== null && _item$keyField !== void 0 ? _item$keyField : index;
-			}
-			return index;
-		};
-		const { frontPadding: compatFrontPadding, behindPadding: compatBehindPadding, start: compatStartRef, end: compatEnd, getStartByScroll: getCompatStartByScroll, setItemSize: compatSetItemSize, setStart: setCompatStart, getScrollOffset: getCompatScrollOffset, getItemSize: getCompatItemSize } = useVirtualSize({
-			dataKeys: computed(() => {
-				return resolvedItems.value.map((item, index) => getCompatItemKey(item, index));
-			}),
-			fixedSize: compatFixedSize,
-			estimatedSize: compatEstimatedSize,
-			overscan: compatOverscan,
-			visibleCount: compatVisibleCount
-		});
-		const compatCurrentList = computed(() => {
-			if (!isCompatMode.value) return [];
-			if (props.threshold && resolvedItems.value.length <= props.threshold) return resolvedItems.value;
-			return resolvedItems.value.slice(compatStartRef.value, compatEnd.value);
-		});
-		const compatStart = computed(() => {
-			if (props.threshold && resolvedItems.value.length <= props.threshold) return 0;
-			return compatStartRef.value;
-		});
-		const compatViewportStyle = computed(() => {
-			const style = { minHeight: 0 };
-			if (resolvedHeightValue.value !== void 0) style.height = resolvedHeightValue.value !== "auto" ? "100%" : resolvedHeightValue.value;
-			if (!overlayViewportReadyRef.value) if (props.direction === "horizontal") {
-				style.overflowX = "auto";
-				style.overflowY = "hidden";
-			} else {
-				style.overflowY = "auto";
-				style.overflowX = "hidden";
-			}
-			return style;
-		});
-		const compatListPaddingStyle = computed(() => {
-			if (props.paddingPosition !== "list") return;
-			return {
-				paddingTop: `${compatFrontPadding.value}px`,
-				paddingBottom: `${compatBehindPadding.value}px`
-			};
-		});
-		const compatContentPaddingStyle = computed(() => {
-			if (props.paddingPosition !== "content") return;
-			return {
-				paddingTop: `${compatFrontPadding.value}px`,
-				paddingBottom: `${compatBehindPadding.value}px`
-			};
-		});
-		const compatListStyle = computed(() => {
-			if (!props.listStyle && !compatListPaddingStyle.value) return;
-			return _objectSpread2(_objectSpread2({}, props.listStyle), compatListPaddingStyle.value);
-		});
-		const compatContentStyle = computed(() => {
-			return compatContentPaddingStyle.value;
-		});
-		const compatContentWrapperStyle = computed(() => {
-			if (!hasCompatContentWrapper.value || props.paddingPosition !== "content") return;
-			return compatContentStyle.value;
-		});
-		const updateCompatItemSize = (key, element) => {
-			const height = element.getBoundingClientRect().height || element.offsetHeight;
-			if (height) compatSetItemSize(key, height);
-		};
-		const updateCompatItemSizes = () => {
-			compatItemRefs.forEach((element, key) => {
-				updateCompatItemSize(key, element);
-			});
-		};
-		const updateCompatViewportSize = () => {
-			var _scrollerElement$clie, _scrollerElement$clie2;
-			if (!isCompatMode.value) {
-				compatViewportSize.value = 0;
-				return;
+		const resolveSizeValue = (value) => {
+			if (typeof value === "number") return value > 0 ? value : void 0;
+			if (typeof value === "string") {
+				const parsed = Number.parseFloat(value);
+				return parsed > 0 ? parsed : void 0;
 			}
-			const scrollerElement = getScrollerElement();
-			const nextViewportSize = props.direction === "horizontal" ? (_scrollerElement$clie = scrollerElement === null || scrollerElement === void 0 ? void 0 : scrollerElement.clientWidth) !== null && _scrollerElement$clie !== void 0 ? _scrollerElement$clie : 0 : (_scrollerElement$clie2 = scrollerElement === null || scrollerElement === void 0 ? void 0 : scrollerElement.clientHeight) !== null && _scrollerElement$clie2 !== void 0 ? _scrollerElement$clie2 : 0;
-			if (nextViewportSize > 0) compatViewportSize.value = nextViewportSize;
 		};
-		const setCompatItemRef = (key, value) => {
-			var _value$$el;
-			const element = (_value$$el = value === null || value === void 0 ? void 0 : value.$el) !== null && _value$$el !== void 0 ? _value$$el : value;
-			if (!(element instanceof HTMLElement)) {
-				compatItemRefs.delete(key);
-				return;
-			}
-			compatItemRefs.set(key, element);
-			updateCompatItemSize(key, element);
+		const formatSizeValue = (value) => {
+			if (typeof value === "number") return value > 0 ? `${value}px` : void 0;
+			if (typeof value === "string") return resolveSizeValue(value) === void 0 ? void 0 : value;
 		};
-		const getCompatContentStyle = (index) => {
-			if (hasCompatContentWrapper.value) return;
-			if (props.paddingPosition !== "content") return compatContentStyle.value;
-			const style = _objectSpread2({}, compatContentStyle.value);
-			if (index === 0) style.paddingTop = `${compatFrontPadding.value}px`;
-			if (index === compatCurrentList.value.length - 1) style.paddingBottom = `${compatBehindPadding.value}px`;
-			return style;
-		};
-		const isDynamicScroller = computed(() => {
-			return !isCompatMode.value && props.itemSize === void 0;
+		const itemSizeHint = computed(() => {
+			var _props$estimatedSize;
+			const itemSize = resolveSizeValue(typeof props.itemSize === "number" || typeof props.itemSize === "string" ? props.itemSize : void 0);
+			if (itemSize !== void 0) return itemSize;
+			return (_props$estimatedSize = props.estimatedSize) !== null && _props$estimatedSize !== void 0 ? _props$estimatedSize : resolveSizeValue(props.minItemSize);
+		});
+		const fixedItemSizeValue = computed(() => {
+			if (!props.fixedSize) return;
+			return formatSizeValue(typeof props.itemSize === "number" || typeof props.itemSize === "string" ? props.itemSize : void 0);
+		});
+		const minItemSizeValue = computed(() => formatSizeValue(props.minItemSize));
+		const virtualizerKey = computed(() => {
+			var _itemSizeHint$value, _minItemSizeValue$val;
+			return [
+				isHorizontal.value ? "horizontal" : "vertical",
+				props.fixedSize ? "fixed" : "dynamic",
+				(_itemSizeHint$value = itemSizeHint.value) !== null && _itemSizeHint$value !== void 0 ? _itemSizeHint$value : "auto",
+				(_minItemSizeValue$val = minItemSizeValue.value) !== null && _minItemSizeValue$val !== void 0 ? _minItemSizeValue$val : "none"
+			].join(":");
+		});
+		const resolvedBuffer = computed(() => props.buffer);
+		const resolvedAs = computed(() => props.listTag || "div");
+		const resolvedItem = computed(() => props.itemTag || "div");
+		const resolvedListAttrs = computed(() => {
+			if (!props.listAttrs) return;
+			const _props$listAttrs = props.listAttrs, { class: _class, style: _style } = _props$listAttrs;
+			return _objectWithoutProperties(_props$listAttrs, _excluded);
+		});
+		const listClassNames = computed(() => {
+			var _props$listAttrs2;
+			return [
+				(_props$listAttrs2 = props.listAttrs) === null || _props$listAttrs2 === void 0 ? void 0 : _props$listAttrs2.class,
+				`${prefixCls}-content`,
+				props.listClass
+			];
 		});
-		const currentScroller = computed(() => {
-			return isDynamicScroller.value ? DynamicScroller : RecycleScroller;
+		const listStyle = computed(() => {
+			var _props$listAttrs3;
+			return [(_props$listAttrs3 = props.listAttrs) === null || _props$listAttrs3 === void 0 ? void 0 : _props$listAttrs3.style, props.listStyle];
+		});
+		const resolvedItemProps = computed(() => {
+			const itemStyle = {};
+			if (fixedItemSizeValue.value !== void 0) if (isHorizontal.value) itemStyle.width = fixedItemSizeValue.value;
+			else itemStyle.height = fixedItemSizeValue.value;
+			if (minItemSizeValue.value !== void 0) if (isHorizontal.value) itemStyle.minWidth = minItemSizeValue.value;
+			else itemStyle.minHeight = minItemSizeValue.value;
+			if (props.itemClass === void 0 && Object.keys(itemStyle).length === 0) return;
+			const itemClass = props.itemClass;
+			return () => ({
+				class: itemClass,
+				style: itemStyle
+			});
 		});
-		const scrollerStyle = computed(() => {
+		const viewportStyle = computed(() => {
 			const style = { minHeight: 0 };
 			if (resolvedHeightValue.value !== void 0) style.height = "100%";
-			if (!overlayViewportReadyRef.value) if (props.direction === "horizontal") {
+			if (!overlayViewportReadyRef.value) if (isHorizontal.value) {
 				style.overflowX = "auto";
 				style.overflowY = "hidden";
 			} else {
@@ -353,55 +265,6 @@ var virtual_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			if (!instance || instance.state().destroyed) return null;
 			return instance;
 		};
-		const getScrollerElement = () => {
-			if (isCompatMode.value) {
-				var _viewportRef$value;
-				return (_viewportRef$value = viewportRef.value) !== null && _viewportRef$value !== void 0 ? _viewportRef$value : null;
-			}
-			const scroller = scrollerRef.value;
-			return (scroller === null || scroller === void 0 ? void 0 : scroller.$el) instanceof HTMLElement ? scroller.$el : null;
-		};
-		const getEstimatedItemSize = () => {
-			if (typeof props.itemSize === "number" && props.itemSize > 0) return props.itemSize;
-			if (typeof props.minItemSize === "number" && props.minItemSize > 0) return props.minItemSize;
-			return 32;
-		};
-		const shouldResetScrollForSmallList = (nextItems, previousItems) => {
-			const viewport = getScrollerElement();
-			if (!viewport || viewport.scrollTop <= 0 || !(previousItems === null || previousItems === void 0 ? void 0 : previousItems.length)) return false;
-			if (!nextItems.length) return true;
-			if (nextItems.length >= previousItems.length || props.shift) return false;
-			const estimatedItemSize = getEstimatedItemSize();
-			const visibleCount = Math.max(1, Math.ceil(viewport.clientHeight / estimatedItemSize));
-			return nextItems.length <= visibleCount * 2;
-		};
-		const clampScrollPosition = () => {
-			const viewport = getScrollerElement();
-			if (!viewport) return;
-			const maxScrollTop = Math.max(viewport.scrollHeight - viewport.clientHeight, 0);
-			if (viewport.scrollTop > maxScrollTop) scrollToPosition(maxScrollTop);
-		};
-		const refreshVisibleWindow = (itemsChanged = true) => {
-			if (isDynamicScroller.value) {
-				forceUpdate(true);
-				return;
-			}
-			updateVisibleItems(itemsChanged, true);
-		};
-		const waitForLayoutFrame = function() {
-			var _ref = _asyncToGenerator(function* () {
-				yield new Promise((resolve) => {
-					if (typeof requestAnimationFrame === "function") {
-						requestAnimationFrame(() => resolve());
-						return;
-					}
-					resolve();
-				});
-			});
-			return function waitForLayoutFrame() {
-				return _ref.apply(this, arguments);
-			};
-		}();
 		const destroyOverlayScrollbar = () => {
 			var _osInstanceRef$value;
 			overlayViewportReadyRef.value = false;
@@ -409,11 +272,11 @@ var virtual_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 			osInstanceRef.value = null;
 		};
 		const initOverlayScrollbar = function() {
-			var _ref2 = _asyncToGenerator(function* (waitForDom = true) {
+			var _ref = _asyncToGenerator(function* (waitForDom = true) {
 				destroyOverlayScrollbar();
 				if (waitForDom) yield nextTick();
 				const host = scrollbarHostRef.value;
-				const viewport = getScrollerElement();
+				const viewport = viewportRef.value;
 				if (!host || !viewport) return;
 				osInstanceRef.value = OverlayScrollbars({
 					target: host,
@@ -422,232 +285,114 @@ var virtual_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 						padding: false,
 						content: false
 					}
-				}, resolvedOverlayOptions.value, { scroll: (_instance, event) => {
-					if (!isCompatMode.value) onScroll(event);
-				} });
+				}, resolvedOverlayOptions.value);
 				overlayViewportReadyRef.value = true;
 			});
 			return function initOverlayScrollbar() {
-				return _ref2.apply(this, arguments);
+				return _ref.apply(this, arguments);
 			};
 		}();
-		onMounted(_asyncToGenerator(function* () {
-			yield nextTick();
-			updateCompatViewportSize();
+		onMounted(() => {
 			initOverlayScrollbar(false);
-		}));
-		onUpdated(() => {
-			if (isCompatMode.value) {
-				updateCompatItemSizes();
-				updateCompatViewportSize();
-			}
 		});
-		watch([currentScroller, resolvedOverlayOptions], _asyncToGenerator(function* () {
+		onBeforeUnmount(() => {
+			destroyOverlayScrollbar();
+		});
+		watch([resolvedOverlayOptions], _asyncToGenerator(function* () {
 			yield nextTick();
-			const viewport = getScrollerElement();
 			const osInstance = resolveOSInstance();
-			if (!viewport || !scrollbarHostRef.value) return;
-			if (!osInstance || osInstance.elements().viewport !== viewport) {
+			if (!osInstance) {
 				yield initOverlayScrollbar(true);
 				return;
 			}
 			osInstance.options(resolvedOverlayOptions.value);
 			osInstance.update(true);
 		}), { deep: true });
-		watch(() => resolvedItems.value, function() {
-			var _ref3 = _asyncToGenerator(function* (nextItems, previousItems) {
-				var _resolveOSInstance, _resolveOSInstance2;
-				yield nextTick();
-				if (isCompatMode.value) {
-					updateCompatItemSizes();
-					updateCompatViewportSize();
-				}
-				(_resolveOSInstance = resolveOSInstance()) === null || _resolveOSInstance === void 0 || _resolveOSInstance.update(true);
-				yield waitForLayoutFrame();
-				if (shouldResetScrollForSmallList(nextItems, previousItems)) {
-					scrollToPosition(0);
-					yield waitForLayoutFrame();
-				}
-				refreshVisibleWindow(true);
-				yield nextTick();
-				yield waitForLayoutFrame();
-				clampScrollPosition();
-				(_resolveOSInstance2 = resolveOSInstance()) === null || _resolveOSInstance2 === void 0 || _resolveOSInstance2.update(true);
-				yield nextTick();
-				yield waitForLayoutFrame();
-				refreshVisibleWindow(true);
-			});
-			return function(_x, _x2) {
-				return _ref3.apply(this, arguments);
-			};
-		}(), { deep: true });
-		onBeforeUnmount(() => {
-			destroyOverlayScrollbar();
-		});
-		const scrollerProps = computed(() => {
-			const commonProps = {
-				items: resolvedItems.value,
-				height: props.height,
-				keyField: props.keyField,
-				direction: props.direction,
-				listTag: props.listTag,
-				itemTag: props.itemTag,
-				shift: props.shift,
-				cache: props.cache,
-				disableTransform: props.disableTransform,
-				flowMode: props.flowMode,
-				hiddenPosition: props.hiddenPosition,
-				enabled: props.enabled
-			};
-			if (isDynamicScroller.value) {
-				var _props$minItemSize;
-				return _objectSpread2(_objectSpread2({}, commonProps), {}, { minItemSize: (_props$minItemSize = props.minItemSize) !== null && _props$minItemSize !== void 0 ? _props$minItemSize : 32 });
-			}
-			return _objectSpread2(_objectSpread2({}, commonProps), {}, {
-				itemSize: props.itemSize,
-				gridItems: props.gridItems,
-				itemSecondarySize: props.itemSecondarySize,
-				minItemSize: props.minItemSize,
-				sizeField: props.sizeField,
-				typeField: props.typeField,
-				buffer: props.buffer,
-				prerender: props.prerender,
-				emitUpdate: props.emitUpdate,
-				updateInterval: props.updateInterval,
-				skipHover: props.skipHover,
-				listClass: props.listClass,
-				itemClass: props.itemClass
-			});
-		});
+		watch(() => resolvedItems.value, _asyncToGenerator(function* () {
+			var _resolveOSInstance;
+			yield nextTick();
+			(_resolveOSInstance = resolveOSInstance()) === null || _resolveOSInstance === void 0 || _resolveOSInstance.update(true);
+		}), { deep: true });
 		const onScroll = (ev) => {
 			emit("scroll", ev);
 			const target = ev.target;
 			if (!target) return;
 			if (Math.floor(target.scrollHeight - (target.scrollTop + target.clientHeight)) <= 0) emit("reachBottom", ev);
 		};
-		const onCompatScroll = (ev) => {
-			const target = ev.target;
-			if (target) {
-				const nextStart = getCompatStartByScroll(target.scrollTop);
-				if (nextStart !== compatStartRef.value) setCompatStart(nextStart);
-			}
-			onScroll(ev);
-		};
-		const onScrollEnd = () => {
-			var _osInstance$elements$;
+		const onVirtuaScroll = () => {};
+		const onVirtuaScrollEnd = () => {
+			var _ref2, _osInstance$elements$;
 			emit("scrollEnd");
 			const osInstance = resolveOSInstance();
-			if (!(osInstance ? (_osInstance$elements$ = osInstance.elements().scrollOffsetElement) !== null && _osInstance$elements$ !== void 0 ? _osInstance$elements$ : osInstance.elements().viewport : getScrollerElement())) return;
+			if (!((_ref2 = (_osInstance$elements$ = osInstance === null || osInstance === void 0 ? void 0 : osInstance.elements().scrollOffsetElement) !== null && _osInstance$elements$ !== void 0 ? _osInstance$elements$ : osInstance === null || osInstance === void 0 ? void 0 : osInstance.elements().viewport) !== null && _ref2 !== void 0 ? _ref2 : viewportRef.value)) return;
 			emit("reachBottom", new Event("scroll"));
 		};
-		const scrollerListeners = computed(() => {
-			if (isDynamicScroller.value) return {
-				resize: () => emit("resize"),
-				visible: () => emit("visible")
-			};
-			return {
-				resize: () => emit("resize"),
-				visible: () => emit("visible"),
-				hidden: () => emit("hidden"),
-				update: (startIndex, endIndex, visibleStartIndex, visibleEndIndex) => emit("update", startIndex, endIndex, visibleStartIndex, visibleEndIndex),
-				scrollStart: () => emit("scrollStart"),
-				scrollEnd: onScrollEnd
-			};
-		});
 		const normalizeAlign = (align) => {
 			if (!align || align === "auto") return "nearest";
 			if (align === "top") return "start";
 			if (align === "bottom") return "end";
 			return align;
 		};
-		const getSlotItemWithSize = (slotProps) => {
-			return "itemWithSize" in slotProps ? slotProps.itemWithSize : void 0;
+		const getItemKey = (item, index) => {
+			const keyField = props.keyField;
+			if (typeof keyField === "function") return keyField(item, index);
+			if (item && typeof item === "object" && isString(keyField)) {
+				var _item$keyField;
+				return (_item$keyField = item[keyField]) !== null && _item$keyField !== void 0 ? _item$keyField : index;
+			}
+			return index;
+		};
+		const findIndexByKey = (key) => {
+			return resolvedItems.value.findIndex((item, index) => getItemKey(item, index) === key);
 		};
-		const getScroller = () => scrollerRef.value;
+		const getVirtua = () => virtuaRef.value;
 		const scrollToItem = (index, options) => {
-			var _getScroller;
-			if (isCompatMode.value) {
-				scrollTo({
-					index,
-					align: (options === null || options === void 0 ? void 0 : options.smooth) ? "auto" : void 0,
-					smooth: options === null || options === void 0 ? void 0 : options.smooth,
-					offset: options === null || options === void 0 ? void 0 : options.offset
-				});
-				return;
-			}
-			(_getScroller = getScroller()) === null || _getScroller === void 0 || _getScroller.scrollToItem(index, options);
+			var _getVirtua;
+			(_getVirtua = getVirtua()) === null || _getVirtua === void 0 || _getVirtua.scrollToIndex(index, {
+				align: normalizeAlign(options === null || options === void 0 ? void 0 : options.align),
+				smooth: options === null || options === void 0 ? void 0 : options.smooth,
+				offset: options === null || options === void 0 ? void 0 : options.offset
+			});
 		};
 		const scrollToPosition = (position, options) => {
-			var _getScroller2;
-			if (isCompatMode.value) {
-				const viewport = getScrollerElement();
-				if (!viewport) return;
-				if (options === null || options === void 0 ? void 0 : options.smooth) viewport.scrollTo({
+			const viewport = viewportRef.value;
+			if (!viewport) return;
+			if (options === null || options === void 0 ? void 0 : options.smooth) {
+				viewport.scrollTo({
 					top: position,
 					behavior: "smooth"
 				});
-				else viewport.scrollTop = position;
 				return;
 			}
-			(_getScroller2 = getScroller()) === null || _getScroller2 === void 0 || _getScroller2.scrollToPosition(position, options);
+			viewport.scrollTop = position;
 		};
 		const findItemIndex = (offset) => {
-			var _getScroller$findItem, _getScroller3;
-			if (isCompatMode.value) return getCompatStartByScroll(offset);
-			return (_getScroller$findItem = (_getScroller3 = getScroller()) === null || _getScroller3 === void 0 ? void 0 : _getScroller3.findItemIndex(offset)) !== null && _getScroller$findItem !== void 0 ? _getScroller$findItem : -1;
+			var _getVirtua$findItemIn, _getVirtua2;
+			return (_getVirtua$findItemIn = (_getVirtua2 = getVirtua()) === null || _getVirtua2 === void 0 ? void 0 : _getVirtua2.findItemIndex(offset)) !== null && _getVirtua$findItemIn !== void 0 ? _getVirtua$findItemIn : -1;
 		};
 		const getItemOffset = (index) => {
-			var _getScroller$getItemO, _getScroller4;
-			if (isCompatMode.value) return getCompatScrollOffset(index);
-			return (_getScroller$getItemO = (_getScroller4 = getScroller()) === null || _getScroller4 === void 0 ? void 0 : _getScroller4.getItemOffset(index)) !== null && _getScroller$getItemO !== void 0 ? _getScroller$getItemO : 0;
+			var _getVirtua$getItemOff, _getVirtua3;
+			return (_getVirtua$getItemOff = (_getVirtua3 = getVirtua()) === null || _getVirtua3 === void 0 ? void 0 : _getVirtua3.getItemOffset(index)) !== null && _getVirtua$getItemOff !== void 0 ? _getVirtua$getItemOff : 0;
 		};
 		const getItemSize = (index) => {
-			var _getScroller$getItemS, _getScroller5;
-			if (isCompatMode.value) return getCompatItemSize(index);
-			if (isDynamicScroller.value) {
-				const dynamicScroller = getScroller();
-				if (!dynamicScroller) return 0;
-				return dynamicScroller.getItemSize(resolvedItems.value[index], index);
-			}
-			return (_getScroller$getItemS = (_getScroller5 = getScroller()) === null || _getScroller5 === void 0 ? void 0 : _getScroller5.getItemSize(index)) !== null && _getScroller$getItemS !== void 0 ? _getScroller$getItemS : 0;
+			var _getVirtua$getItemSiz, _getVirtua4;
+			return (_getVirtua$getItemSiz = (_getVirtua4 = getVirtua()) === null || _getVirtua4 === void 0 ? void 0 : _getVirtua4.getItemSize(index)) !== null && _getVirtua$getItemSiz !== void 0 ? _getVirtua$getItemSiz : 0;
 		};
 		const cacheSnapshot = () => {
-			const scroller = getScroller();
-			if (!(scroller === null || scroller === void 0 ? void 0 : scroller.cacheSnapshot)) return;
-			if ("value" in scroller.cacheSnapshot) return scroller.cacheSnapshot.value;
-			return scroller.cacheSnapshot;
-		};
-		const restoreCache = (snapshot) => {
-			var _getScroller$restoreC, _getScroller6;
-			return (_getScroller$restoreC = (_getScroller6 = getScroller()) === null || _getScroller6 === void 0 ? void 0 : _getScroller6.restoreCache(snapshot)) !== null && _getScroller$restoreC !== void 0 ? _getScroller$restoreC : false;
-		};
-		const updateVisibleItems = (itemsChanged, checkPositionDiff) => {
-			const scroller = getScroller();
-			scroller === null || scroller === void 0 || scroller.updateVisibleItems(itemsChanged, checkPositionDiff);
+			var _getVirtua5;
+			return (_getVirtua5 = getVirtua()) === null || _getVirtua5 === void 0 ? void 0 : _getVirtua5.cache;
 		};
+		const restoreCache = () => false;
+		const updateVisibleItems = () => {};
 		const scrollToBottom = () => {
-			if (isCompatMode.value) {
-				const viewport = getScrollerElement();
-				if (!viewport) return;
-				scrollToPosition(viewport.scrollHeight);
-				return;
-			}
-			const scroller = getScroller();
-			scroller === null || scroller === void 0 || scroller.scrollToBottom();
+			const handle = getVirtua();
+			if (!handle) return;
+			handle.scrollTo(handle.scrollSize);
 		};
-		const forceUpdate = (clear) => {
-			if (isCompatMode.value) {
-				if (clear) setCompatStart(0);
-				return;
-			}
-			const scroller = getScroller();
-			scroller === null || scroller === void 0 || scroller.forceUpdate(clear);
-		};
-		const getDynamicItemSize = (item, index) => {
-			var _scroller$getItemSize;
-			if (isCompatMode.value) return typeof index === "number" ? getCompatItemSize(index) : 0;
-			const scroller = getScroller();
-			return (_scroller$getItemSize = scroller === null || scroller === void 0 ? void 0 : scroller.getItemSize(item, index)) !== null && _scroller$getItemSize !== void 0 ? _scroller$getItemSize : 0;
+		const forceUpdate = () => {};
+		const getDynamicItemSize = (_item, index) => {
+			if (typeof index !== "number") return 0;
+			return getItemSize(index);
 		};
 		const scrollTo = (options) => {
 			if (typeof options === "number") {
@@ -655,28 +400,8 @@ var virtual_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				return;
 			}
 			let index = options.index;
-			if (typeof index !== "number" && options.key !== void 0) {
-				const keyField = props.keyField;
-				index = resolvedItems.value.findIndex((item, currentIndex) => {
-					if (typeof keyField === "function") return keyField(item, currentIndex) === options.key;
-					if (item && typeof item === "object" && isString(keyField)) return item[keyField] === options.key;
-					return currentIndex === options.key;
-				});
-			}
+			if (typeof index !== "number" && options.key !== void 0) index = findIndexByKey(options.key);
 			if (typeof index !== "number" || index < 0) return;
-			if (isCompatMode.value) {
-				setCompatStart(index - compatOverscan.value);
-				scrollToPosition(getCompatScrollOffset(index), {
-					smooth: options.smooth,
-					offset: options.offset
-				});
-				nextTick(() => {
-					const scrollTop = getCompatScrollOffset(index);
-					const viewport = getScrollerElement();
-					if (viewport && scrollTop !== viewport.scrollTop) viewport.scrollTop = scrollTop;
-				});
-				return;
-			}
 			scrollToItem(index, {
 				align: normalizeAlign(options.align),
 				smooth: options.smooth,
@@ -703,111 +428,63 @@ var virtual_list_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 				ref: scrollbarHostRef,
 				class: normalizeClass(hostClassNames.value),
 				style: normalizeStyle(containerOuterStyle.value)
-			}, [isCompatMode.value ? (openBlock(), createBlock(resolveDynamicComponent(mergedCompatComponent.value.container), {
-				key: 0,
+			}, [createElementVNode("div", {
 				ref_key: "viewportRef",
 				ref: viewportRef,
 				class: normalizeClass(`${unref(prefixCls)}-scroller`),
-				style: normalizeStyle(compatViewportStyle.value),
-				onScroll: onCompatScroll
-			}, {
-				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(mergedCompatComponent.value.list), mergeProps(props.listAttrs, { style: compatListStyle.value }), {
-					default: withCtx(() => [
-						renderSlot(_ctx.$slots, "before"),
-						hasCompatContentWrapper.value ? (openBlock(), createBlock(resolveDynamicComponent(mergedCompatComponent.value.content), mergeProps({ key: 0 }, props.contentWrapperAttrs, { style: compatContentWrapperStyle.value }), {
-							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(compatCurrentList.value, (item, index) => {
-								return openBlock(), createBlock(resolveDynamicComponent(mergedCompatComponent.value.item), mergeProps({ key: getCompatItemKey(item, compatStart.value + index) }, { ref_for: true }, props.contentAttrs, {
-									ref_for: true,
-									ref: (element) => setCompatItemRef(getCompatItemKey(item, compatStart.value + index), element),
-									style: getCompatContentStyle(index)
-								}), {
-									default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
-										item,
-										index: compatStart.value + index,
-										active: true,
-										itemWithSize: void 0
-									}, () => [renderSlot(_ctx.$slots, "default", {
-										item,
-										index: compatStart.value + index,
-										active: true,
-										itemWithSize: void 0
-									})])]),
-									_: 2
-								}, 1040, ["style"]);
-							}), 128))]),
-							_: 3
-						}, 16, ["style"])) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(compatCurrentList.value, (item, index) => {
-							return openBlock(), createBlock(resolveDynamicComponent(mergedCompatComponent.value.content), mergeProps({ key: getCompatItemKey(item, compatStart.value + index) }, { ref_for: true }, props.contentAttrs, {
-								ref_for: true,
-								ref: (element) => setCompatItemRef(getCompatItemKey(item, compatStart.value + index), element),
-								style: getCompatContentStyle(index)
-							}), {
-								default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
-									item,
-									index: compatStart.value + index,
-									active: true,
-									itemWithSize: void 0
-								}, () => [renderSlot(_ctx.$slots, "default", {
-									item,
-									index: compatStart.value + index,
-									active: true,
-									itemWithSize: void 0
-								})])]),
-								_: 2
-							}, 1040, ["style"]);
-						}), 128)),
-						renderSlot(_ctx.$slots, "after")
-					]),
-					_: 3
-				}, 16, ["style"]))]),
-				_: 3
-			}, 40, ["class", "style"])) : (openBlock(), createBlock(resolveDynamicComponent(currentScroller.value), mergeProps({
-				key: 1,
-				ref_key: "scrollerRef",
-				ref: scrollerRef,
-				class: `${unref(prefixCls)}-scroller`,
-				style: scrollerStyle.value
-			}, scrollerProps.value, toHandlers(scrollerListeners.value)), {
-				before: withCtx(() => [renderSlot(_ctx.$slots, "before")]),
-				default: withCtx((slotProps) => [isDynamicScroller.value ? (openBlock(), createBlock(unref(DynamicScrollerItem), {
-					key: 0,
-					item: slotProps.item,
-					active: slotProps.active,
-					index: slotProps.index,
-					"size-dependencies": null
-				}, {
-					default: withCtx(() => [renderSlot(_ctx.$slots, "item", {
-						item: slotProps.item,
-						index: slotProps.index,
-						active: slotProps.active,
-						itemWithSize: getSlotItemWithSize(slotProps)
+				style: normalizeStyle(viewportStyle.value),
+				onScroll
+			}, [
+				renderSlot(_ctx.$slots, "before"),
+				!isEmpty.value ? (openBlock(), createBlock(unref(Virtualizer), mergeProps({
+					key: virtualizerKey.value,
+					ref_key: "virtuaRef",
+					ref: virtuaRef
+				}, resolvedListAttrs.value, {
+					data: resolvedItems.value,
+					horizontal: isHorizontal.value,
+					"item-size": itemSizeHint.value,
+					"buffer-size": resolvedBuffer.value,
+					"ssr-count": props.prerender,
+					shift: props.shift,
+					cache: props.cache,
+					as: resolvedAs.value,
+					item: resolvedItem.value,
+					"item-props": resolvedItemProps.value,
+					class: listClassNames.value,
+					style: listStyle.value,
+					onScroll: onVirtuaScroll,
+					onScrollEnd: onVirtuaScrollEnd
+				}), {
+					default: withCtx(({ item, index }) => [renderSlot(_ctx.$slots, "item", {
+						item,
+						index,
+						active: true,
+						itemWithSize: void 0
 					}, () => [renderSlot(_ctx.$slots, "default", {
-						item: slotProps.item,
-						index: slotProps.index,
-						active: slotProps.active,
-						itemWithSize: getSlotItemWithSize(slotProps)
+						item,
+						index,
+						active: true,
+						itemWithSize: void 0
 					})])]),
-					_: 2
-				}, 1032, [
+					_: 3
+				}, 16, [
+					"data",
+					"horizontal",
+					"item-size",
+					"buffer-size",
+					"ssr-count",
+					"shift",
+					"cache",
+					"as",
 					"item",
-					"active",
-					"index"
-				])) : renderSlot(_ctx.$slots, "item", {
-					key: 1,
-					item: slotProps.item,
-					index: slotProps.index,
-					active: slotProps.active,
-					itemWithSize: getSlotItemWithSize(slotProps)
-				}, () => [renderSlot(_ctx.$slots, "default", {
-					item: slotProps.item,
-					index: slotProps.index,
-					active: slotProps.active,
-					itemWithSize: getSlotItemWithSize(slotProps)
-				})])]),
-				empty: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
-				after: withCtx(() => [renderSlot(_ctx.$slots, "after")]),
-				_: 3
-			}, 16, ["class", "style"]))], 6);
+					"item-props",
+					"class",
+					"style"
+				])) : createCommentVNode("", true),
+				renderSlot(_ctx.$slots, "after"),
+				isEmpty.value ? renderSlot(_ctx.$slots, "empty", { key: 1 }) : createCommentVNode("", true)
+			], 38)], 6);
 		};
 	}
 }));