@v-c/virtual-list 1.0.2 → 1.0.4

package/dist/Filler.cjs

@@ -1,8 +1,11 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
-let __v_c_resize_observer = require("@v-c/resize-observer");
-__v_c_resize_observer = require_rolldown_runtime.__toESM(__v_c_resize_observer);
+let _v_c_resize_observer = require("@v-c/resize-observer");
+_v_c_resize_observer = require_rolldown_runtime.__toESM(_v_c_resize_observer);
 var Filler_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "Filler",
 	props: {
@@ -39,7 +42,7 @@ var Filler_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					top: 0
 				};
 			}
-			return (0, vue.createVNode)("div", { "style": outerStyle }, [(0, vue.createVNode)(__v_c_resize_observer.default, { "onResize": ({ offsetHeight }) => {
+			return (0, vue.createVNode)("div", { "style": outerStyle }, [(0, vue.createVNode)(_v_c_resize_observer.default, { "onResize": ({ offsetHeight }) => {
 				if (offsetHeight && props.onInnerResize) props.onInnerResize();
 			} }, { default: () => [(0, vue.createVNode)("div", (0, vue.mergeProps)({
 				"style": innerStyle,

package/dist/Item.cjs

@@ -1,7 +1,10 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
-let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
 var Item_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	name: "Item",
 	props: { setRef: {
@@ -17,7 +20,7 @@ var Item_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}
 		};
 		return () => {
-			const child = (0, __v_c_util_dist_props_util.filterEmpty)(slots.default?.() ?? [])[0];
+			const child = (0, _v_c_util_dist_props_util.filterEmpty)(slots.default?.() ?? [])[0];
 			if (!child) return null;
 			return (0, vue.cloneVNode)(child, { ref: refFunc });
 		};

package/dist/List.cjs

@@ -1,7 +1,11 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 const require_Filler = require("./Filler.cjs");
-const require_Item = require("./Item.cjs");
+const require_useChildren = require("./hooks/useChildren.cjs");
+const require_useDiffItem = require("./hooks/useDiffItem.cjs");
 const require_useFrameWheel = require("./hooks/useFrameWheel.cjs");
 const require_useGetSize = require("./hooks/useGetSize.cjs");
 const require_useHeights = require("./hooks/useHeights.cjs");
@@ -11,12 +15,9 @@ const require_useScrollTo = require("./hooks/useScrollTo.cjs");
 const require_ScrollBar = require("./ScrollBar.cjs");
 const require_scrollbarUtil = require("./utils/scrollbarUtil.cjs");
 let vue = require("vue");
-let __v_c_resize_observer = require("@v-c/resize-observer");
-__v_c_resize_observer = require_rolldown_runtime.__toESM(__v_c_resize_observer);
-let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
-}
+let _v_c_resize_observer = require("@v-c/resize-observer");
+_v_c_resize_observer = require_rolldown_runtime.__toESM(_v_c_resize_observer);
+let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
 var EMPTY_DATA = [];
 var ScrollStyle = {
 	overflowY: "auto",
@@ -68,10 +69,12 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	setup(props, { expose, attrs, slots }) {
 		const itemHeight = (0, vue.computed)(() => props.itemHeight);
-		const itemKey = (0, vue.toRef)(props, "itemKey");
+		let itemKeyProp = props.itemKey;
+		(0, vue.watch)(() => props.itemKey, (val) => {
+			itemKeyProp = val;
+		});
 		const getKey = (item) => {
-			item = (0, vue.toRaw)(item);
-			const _itemKey = itemKey.value;
+			const _itemKey = itemKeyProp;
 			if (typeof _itemKey === "function") return _itemKey(item);
 			return item?.[_itemKey];
 		};
@@ -81,10 +84,9 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			mergedData.value = props?.data || EMPTY_DATA;
 		});
 		const useVirtual = (0, vue.computed)(() => !!(props.virtual !== false && props.height && props.itemHeight));
-		const containerHeight = (0, vue.computed)(() => Object.values(heights.maps).reduce((total, curr) => total + curr, 0));
 		const inVirtual = (0, vue.computed)(() => {
 			const data = mergedData.value;
-			return useVirtual.value && data && (Math.max(props.itemHeight * data.length, containerHeight.value) > props.height || !!props.scrollWidth);
+			return useVirtual.value && data && (props.itemHeight * data.length > props.height || !!props.scrollWidth);
 		});
 		const componentRef = (0, vue.ref)();
 		const fillerInnerRef = (0, vue.ref)();
@@ -125,7 +127,6 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				fillerOffset.value = void 0;
 				return;
 			}
-			const { itemHeight: itemHeight$1, height } = props;
 			if (!inVirtual.value) {
 				scrollHeight.value = fillerInnerRef.value?.offsetHeight || 0;
 				start.value = 0;
@@ -133,35 +134,53 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				fillerOffset.value = void 0;
 				return;
 			}
+			const { itemHeight: itemHeight$1, height } = props;
+			const dataLen = mergedData.value.length;
+			if (!dataLen) {
+				scrollHeight.value = 0;
+				start.value = 0;
+				end.value = -1;
+				fillerOffset.value = 0;
+				return;
+			}
+			if (heights.id === 0) {
+				const safeItemHeight = itemHeight$1;
+				const safeListHeight = height;
+				const startIndex$1 = Math.max(0, Math.floor(offsetTop.value / safeItemHeight));
+				const startOffset$1 = startIndex$1 * safeItemHeight;
+				let endIndex$1 = startIndex$1 + Math.ceil(safeListHeight / safeItemHeight);
+				endIndex$1 = Math.min(endIndex$1 + 1, dataLen - 1);
+				scrollHeight.value = dataLen * safeItemHeight;
+				start.value = startIndex$1;
+				end.value = endIndex$1;
+				fillerOffset.value = startOffset$1;
+				return;
+			}
 			let itemTop = 0;
 			let startIndex;
 			let startOffset;
 			let endIndex;
-			const dataLen = mergedData.value.length;
 			const data = (0, vue.toRaw)(mergedData.value);
+			const _offsetTop = offsetTop.value;
 			for (let i = 0; i < dataLen; i += 1) {
 				const item = data[i];
 				const key = getKey(item);
 				const cacheHeight = heights.get(key);
 				const currentItemBottom = itemTop + (cacheHeight === void 0 ? itemHeight$1 : cacheHeight);
-				if (currentItemBottom >= offsetTop.value && startIndex === void 0) {
+				if (currentItemBottom >= _offsetTop && startIndex === void 0) {
 					startIndex = i;
 					startOffset = itemTop;
 				}
-				if (currentItemBottom > offsetTop.value + height && endIndex === void 0) endIndex = i;
+				if (currentItemBottom > _offsetTop + height && endIndex === void 0) endIndex = i;
 				itemTop = currentItemBottom;
-				if (startIndex !== void 0 && endIndex !== void 0) {
-					itemTop = currentItemBottom + (dataLen - 1 - i) * itemHeight$1;
-					break;
-				}
 			}
 			if (startIndex === void 0) {
 				startIndex = 0;
 				startOffset = 0;
 				endIndex = Math.ceil(height / itemHeight$1);
 			}
-			if (endIndex === void 0) endIndex = mergedData.value.length - 1;
-			endIndex = Math.min(endIndex + 1, mergedData.value.length - 1);
+			if (endIndex === void 0) endIndex = data.length - 1;
+			endIndex = Math.min(endIndex + 1, data.length - 1);
 			scrollHeight.value = itemTop;
 			start.value = startIndex;
 			end.value = endIndex;
@@ -180,6 +199,10 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}
 				}
 			}
+			if (useVirtual.value && props.height) {
+				const maxScrollTop = Math.max(0, scrollHeight.value - props.height);
+				if (offsetTop.value > maxScrollTop) syncScrollTop(maxScrollTop);
+			}
 			heights.resetRecord();
 		});
 		const size = (0, vue.ref)({
@@ -258,6 +281,7 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const onScrollbarStopMove = () => {
 			scrollMoving.value = false;
 		};
+		require_useDiffItem.default(mergedData, getKey);
 		(0, vue.watch)([
 			() => props.height,
 			scrollHeight,
@@ -266,7 +290,7 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		], () => {
 			if (inVirtual.value && props.height && scrollHeight.value) verticalScrollBarSpinSize.value = require_scrollbarUtil.getSpinSize(size.value.height, scrollHeight.value);
 		}, { immediate: true });
-		(0, vue.watch)([() => size.value.width, () => contentScrollWidth.value], () => {
+		(0, vue.watch)([() => size.value.width, contentScrollWidth], () => {
 			if (inVirtual.value && contentScrollWidth.value) horizontalScrollBarSpinSize.value = require_scrollbarUtil.getSpinSize(size.value.width, contentScrollWidth.value);
 		}, { immediate: true });
 		(0, vue.watch)(() => props.scrollWidth, (val) => {
@@ -275,11 +299,18 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}, { immediate: true });
 		function onFallbackScroll(e) {
 			const newScrollTop = e.currentTarget.scrollTop;
-			if (newScrollTop !== offsetTop.value) syncScrollTop(newScrollTop);
+			if (!useVirtual.value || !inVirtual.value) offsetTop.value = newScrollTop;
+			else if (newScrollTop !== offsetTop.value) syncScrollTop(newScrollTop);
 			props.onScroll?.(e);
 			triggerScroll();
 		}
-		const scrollTo = require_useScrollTo.default(componentRef, mergedData, heights, itemHeight, getKey, () => collectHeight(true), syncScrollTop, delayHideScrollBar);
+		const [scrollTo, getTotalHeight] = require_useScrollTo.default(componentRef, mergedData, heights, itemHeight, getKey, () => collectHeight(true), (newTop) => {
+			const totalHeight = getTotalHeight();
+			const maxScrollHeight = Math.max(scrollHeight.value, totalHeight) - props.height;
+			const alignedTop = Math.max(0, Math.min(newTop, maxScrollHeight || 0));
+			if (componentRef.value) componentRef.value.scrollTop = alignedTop;
+			offsetTop.value = alignedTop;
+		}, delayHideScrollBar);
 		expose({
 			nativeElement: containerRef,
 			getScrollInfo: getVirtualScrollInfo,
@@ -302,41 +333,38 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				const renderList = mergedData.value.slice(start.value, end.value + 1);
 				props.onVisibleChange(renderList, mergedData.value);
 			}
-		});
+		}, { flush: "post" });
 		const getSize = require_useGetSize.useGetSize(mergedData, getKey, heights, itemHeight);
+		const listChildren = require_useChildren.default(mergedData, start, end, contentScrollWidth, offsetLeft, setInstanceRef, (item, index, props$1) => slots.default?.({
+			item,
+			index,
+			...props$1
+		}), { getKey });
 		return () => {
-			let _slot;
-			const renderChildren = () => {
-				const children = [];
-				const data = mergedData.value;
-				const defaultSlot = slots.default;
-				if (!defaultSlot) return children;
-				for (let i = start.value; i <= end.value; i += 1) {
-					const item = data[i];
-					const key = getKey(item);
-					const nodes = defaultSlot({
-						item,
-						index: i,
-						style: {},
-						offsetX: offsetLeft.value
-					});
-					const node = Array.isArray(nodes) ? nodes[0] : nodes;
-					if (node) children.push((0, vue.createVNode)(require_Item.default, {
-						"key": key,
-						"setRef": (ele) => setInstanceRef(item, ele)
-					}, _isSlot(node) ? node : { default: () => [node] }));
+			const componentStyle = {};
+			const getHolderSizeStyle = (style) => {
+				if (!style) return {};
+				if (Array.isArray(style)) return style.reduce((acc, item) => Object.assign(acc, getHolderSizeStyle(item)), {});
+				if (typeof style === "object") {
+					const { height, maxHeight } = style;
+					const sizeStyle = {};
+					if (height !== void 0) sizeStyle.height = height;
+					if (maxHeight !== void 0) sizeStyle.maxHeight = maxHeight;
+					return sizeStyle;
 				}
-				return children;
+				return {};
 			};
-			const componentStyle = {};
 			if (props.height) {
 				componentStyle[props.fullHeight ? "height" : "maxHeight"] = `${props.height}px`;
 				Object.assign(componentStyle, ScrollStyle);
-				if (useVirtual.value) {
+				if (inVirtual.value) {
 					componentStyle.overflowY = "hidden";
 					if (horizontalRange.value > 0) componentStyle.overflowX = "hidden";
 					if (scrollMoving.value) componentStyle.pointerEvents = "none";
 				}
+			} else {
+				const holderSizeStyle = getHolderSizeStyle(attrs.style);
+				if (holderSizeStyle.height !== void 0 || holderSizeStyle.maxHeight !== void 0) Object.assign(componentStyle, holderSizeStyle, ScrollStyle);
 			}
 			const extraContent = props.extraRender?.({
 				start: start.value,
@@ -348,7 +376,7 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				getSize: getSize.value
 			});
 			const Component = props.component;
-			return (0, vue.createVNode)("div", (0, vue.mergeProps)({ "ref": containerRef }, (0, __v_c_util_dist_props_util.pureAttrs)(attrs), {
+			return (0, vue.createVNode)("div", (0, vue.mergeProps)({ "ref": containerRef }, (0, _v_c_util_dist_props_util.pureAttrs)(attrs), {
 				"style": {
 					position: "relative",
 					...attrs.style
@@ -360,7 +388,7 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					attrs.class
 				]
 			}), [
-				(0, vue.createVNode)(__v_c_resize_observer.default, { "onResize": onHolderResize }, { default: () => [(0, vue.createVNode)(Component, {
+				(0, vue.createVNode)(_v_c_resize_observer.default, { "onResize": onHolderResize }, { default: () => [(0, vue.createVNode)(Component, {
 					"class": `${props.prefixCls}-holder`,
 					"style": componentStyle,
 					"ref": componentRef,
@@ -378,7 +406,7 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"innerProps": props.innerProps,
 					"rtl": isRTL.value,
 					"extra": extraContent
-				}, _isSlot(_slot = renderChildren()) ? _slot : { default: () => [_slot] })] })] }),
+				}, { default: () => [listChildren.value] })] })] }),
 				inVirtual.value && scrollHeight.value > (props.height || 0) && (0, vue.createVNode)(require_ScrollBar.default, {
 					"ref": verticalScrollBarRef,
 					"prefixCls": props.prefixCls,

package/dist/List.js

@@ -1,5 +1,6 @@
 import Filler_default from "./Filler.js";
-import Item_default from "./Item.js";
+import useChildren from "./hooks/useChildren.js";
+import useDiffItem from "./hooks/useDiffItem.js";
 import useFrameWheel from "./hooks/useFrameWheel.js";
 import { useGetSize } from "./hooks/useGetSize.js";
 import useHeights from "./hooks/useHeights.js";
@@ -8,12 +9,9 @@ import useScrollDrag from "./hooks/useScrollDrag.js";
 import useScrollTo from "./hooks/useScrollTo.js";
 import ScrollBar_default from "./ScrollBar.js";
 import { getSpinSize } from "./utils/scrollbarUtil.js";
-import { computed, createVNode, defineComponent, isVNode, mergeProps, ref, shallowRef, toRaw, toRef, watch } from "vue";
+import { computed, createVNode, defineComponent, mergeProps, ref, shallowRef, toRaw, watch } from "vue";
 import ResizeObserver from "@v-c/resize-observer";
 import { pureAttrs } from "@v-c/util/dist/props-util";
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
 var EMPTY_DATA = [];
 var ScrollStyle = {
 	overflowY: "auto",
@@ -65,10 +63,12 @@ var List_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	setup(props, { expose, attrs, slots }) {
 		const itemHeight = computed(() => props.itemHeight);
-		const itemKey = toRef(props, "itemKey");
+		let itemKeyProp = props.itemKey;
+		watch(() => props.itemKey, (val) => {
+			itemKeyProp = val;
+		});
 		const getKey = (item) => {
-			item = toRaw(item);
-			const _itemKey = itemKey.value;
+			const _itemKey = itemKeyProp;
 			if (typeof _itemKey === "function") return _itemKey(item);
 			return item?.[_itemKey];
 		};
@@ -78,10 +78,9 @@ var List_default = /* @__PURE__ */ defineComponent({
 			mergedData.value = props?.data || EMPTY_DATA;
 		});
 		const useVirtual = computed(() => !!(props.virtual !== false && props.height && props.itemHeight));
-		const containerHeight = computed(() => Object.values(heights.maps).reduce((total, curr) => total + curr, 0));
 		const inVirtual = computed(() => {
 			const data = mergedData.value;
-			return useVirtual.value && data && (Math.max(props.itemHeight * data.length, containerHeight.value) > props.height || !!props.scrollWidth);
+			return useVirtual.value && data && (props.itemHeight * data.length > props.height || !!props.scrollWidth);
 		});
 		const componentRef = ref();
 		const fillerInnerRef = ref();
@@ -122,7 +121,6 @@ var List_default = /* @__PURE__ */ defineComponent({
 				fillerOffset.value = void 0;
 				return;
 			}
-			const { itemHeight: itemHeight$1, height } = props;
 			if (!inVirtual.value) {
 				scrollHeight.value = fillerInnerRef.value?.offsetHeight || 0;
 				start.value = 0;
@@ -130,35 +128,53 @@ var List_default = /* @__PURE__ */ defineComponent({
 				fillerOffset.value = void 0;
 				return;
 			}
+			const { itemHeight: itemHeight$1, height } = props;
+			const dataLen = mergedData.value.length;
+			if (!dataLen) {
+				scrollHeight.value = 0;
+				start.value = 0;
+				end.value = -1;
+				fillerOffset.value = 0;
+				return;
+			}
+			if (heights.id === 0) {
+				const safeItemHeight = itemHeight$1;
+				const safeListHeight = height;
+				const startIndex$1 = Math.max(0, Math.floor(offsetTop.value / safeItemHeight));
+				const startOffset$1 = startIndex$1 * safeItemHeight;
+				let endIndex$1 = startIndex$1 + Math.ceil(safeListHeight / safeItemHeight);
+				endIndex$1 = Math.min(endIndex$1 + 1, dataLen - 1);
+				scrollHeight.value = dataLen * safeItemHeight;
+				start.value = startIndex$1;
+				end.value = endIndex$1;
+				fillerOffset.value = startOffset$1;
+				return;
+			}
 			let itemTop = 0;
 			let startIndex;
 			let startOffset;
 			let endIndex;
-			const dataLen = mergedData.value.length;
 			const data = toRaw(mergedData.value);
+			const _offsetTop = offsetTop.value;
 			for (let i = 0; i < dataLen; i += 1) {
 				const item = data[i];
 				const key = getKey(item);
 				const cacheHeight = heights.get(key);
 				const currentItemBottom = itemTop + (cacheHeight === void 0 ? itemHeight$1 : cacheHeight);
-				if (currentItemBottom >= offsetTop.value && startIndex === void 0) {
+				if (currentItemBottom >= _offsetTop && startIndex === void 0) {
 					startIndex = i;
 					startOffset = itemTop;
 				}
-				if (currentItemBottom > offsetTop.value + height && endIndex === void 0) endIndex = i;
+				if (currentItemBottom > _offsetTop + height && endIndex === void 0) endIndex = i;
 				itemTop = currentItemBottom;
-				if (startIndex !== void 0 && endIndex !== void 0) {
-					itemTop = currentItemBottom + (dataLen - 1 - i) * itemHeight$1;
-					break;
-				}
 			}
 			if (startIndex === void 0) {
 				startIndex = 0;
 				startOffset = 0;
 				endIndex = Math.ceil(height / itemHeight$1);
 			}
-			if (endIndex === void 0) endIndex = mergedData.value.length - 1;
-			endIndex = Math.min(endIndex + 1, mergedData.value.length - 1);
+			if (endIndex === void 0) endIndex = data.length - 1;
+			endIndex = Math.min(endIndex + 1, data.length - 1);
 			scrollHeight.value = itemTop;
 			start.value = startIndex;
 			end.value = endIndex;
@@ -177,6 +193,10 @@ var List_default = /* @__PURE__ */ defineComponent({
 					}
 				}
 			}
+			if (useVirtual.value && props.height) {
+				const maxScrollTop = Math.max(0, scrollHeight.value - props.height);
+				if (offsetTop.value > maxScrollTop) syncScrollTop(maxScrollTop);
+			}
 			heights.resetRecord();
 		});
 		const size = ref({
@@ -255,6 +275,7 @@ var List_default = /* @__PURE__ */ defineComponent({
 		const onScrollbarStopMove = () => {
 			scrollMoving.value = false;
 		};
+		useDiffItem(mergedData, getKey);
 		watch([
 			() => props.height,
 			scrollHeight,
@@ -263,7 +284,7 @@ var List_default = /* @__PURE__ */ defineComponent({
 		], () => {
 			if (inVirtual.value && props.height && scrollHeight.value) verticalScrollBarSpinSize.value = getSpinSize(size.value.height, scrollHeight.value);
 		}, { immediate: true });
-		watch([() => size.value.width, () => contentScrollWidth.value], () => {
+		watch([() => size.value.width, contentScrollWidth], () => {
 			if (inVirtual.value && contentScrollWidth.value) horizontalScrollBarSpinSize.value = getSpinSize(size.value.width, contentScrollWidth.value);
 		}, { immediate: true });
 		watch(() => props.scrollWidth, (val) => {
@@ -272,11 +293,18 @@ var List_default = /* @__PURE__ */ defineComponent({
 		}, { immediate: true });
 		function onFallbackScroll(e) {
 			const newScrollTop = e.currentTarget.scrollTop;
-			if (newScrollTop !== offsetTop.value) syncScrollTop(newScrollTop);
+			if (!useVirtual.value || !inVirtual.value) offsetTop.value = newScrollTop;
+			else if (newScrollTop !== offsetTop.value) syncScrollTop(newScrollTop);
 			props.onScroll?.(e);
 			triggerScroll();
 		}
-		const scrollTo = useScrollTo(componentRef, mergedData, heights, itemHeight, getKey, () => collectHeight(true), syncScrollTop, delayHideScrollBar);
+		const [scrollTo, getTotalHeight] = useScrollTo(componentRef, mergedData, heights, itemHeight, getKey, () => collectHeight(true), (newTop) => {
+			const totalHeight = getTotalHeight();
+			const maxScrollHeight = Math.max(scrollHeight.value, totalHeight) - props.height;
+			const alignedTop = Math.max(0, Math.min(newTop, maxScrollHeight || 0));
+			if (componentRef.value) componentRef.value.scrollTop = alignedTop;
+			offsetTop.value = alignedTop;
+		}, delayHideScrollBar);
 		expose({
 			nativeElement: containerRef,
 			getScrollInfo: getVirtualScrollInfo,
@@ -299,41 +327,38 @@ var List_default = /* @__PURE__ */ defineComponent({
 				const renderList = mergedData.value.slice(start.value, end.value + 1);
 				props.onVisibleChange(renderList, mergedData.value);
 			}
-		});
+		}, { flush: "post" });
 		const getSize = useGetSize(mergedData, getKey, heights, itemHeight);
+		const listChildren = useChildren(mergedData, start, end, contentScrollWidth, offsetLeft, setInstanceRef, (item, index, props$1) => slots.default?.({
+			item,
+			index,
+			...props$1
+		}), { getKey });
 		return () => {
-			let _slot;
-			const renderChildren = () => {
-				const children = [];
-				const data = mergedData.value;
-				const defaultSlot = slots.default;
-				if (!defaultSlot) return children;
-				for (let i = start.value; i <= end.value; i += 1) {
-					const item = data[i];
-					const key = getKey(item);
-					const nodes = defaultSlot({
-						item,
-						index: i,
-						style: {},
-						offsetX: offsetLeft.value
-					});
-					const node = Array.isArray(nodes) ? nodes[0] : nodes;
-					if (node) children.push(createVNode(Item_default, {
-						"key": key,
-						"setRef": (ele) => setInstanceRef(item, ele)
-					}, _isSlot(node) ? node : { default: () => [node] }));
+			const componentStyle = {};
+			const getHolderSizeStyle = (style) => {
+				if (!style) return {};
+				if (Array.isArray(style)) return style.reduce((acc, item) => Object.assign(acc, getHolderSizeStyle(item)), {});
+				if (typeof style === "object") {
+					const { height, maxHeight } = style;
+					const sizeStyle = {};
+					if (height !== void 0) sizeStyle.height = height;
+					if (maxHeight !== void 0) sizeStyle.maxHeight = maxHeight;
+					return sizeStyle;
 				}
-				return children;
+				return {};
 			};
-			const componentStyle = {};
 			if (props.height) {
 				componentStyle[props.fullHeight ? "height" : "maxHeight"] = `${props.height}px`;
 				Object.assign(componentStyle, ScrollStyle);
-				if (useVirtual.value) {
+				if (inVirtual.value) {
 					componentStyle.overflowY = "hidden";
 					if (horizontalRange.value > 0) componentStyle.overflowX = "hidden";
 					if (scrollMoving.value) componentStyle.pointerEvents = "none";
 				}
+			} else {
+				const holderSizeStyle = getHolderSizeStyle(attrs.style);
+				if (holderSizeStyle.height !== void 0 || holderSizeStyle.maxHeight !== void 0) Object.assign(componentStyle, holderSizeStyle, ScrollStyle);
 			}
 			const extraContent = props.extraRender?.({
 				start: start.value,
@@ -375,7 +400,7 @@ var List_default = /* @__PURE__ */ defineComponent({
 					"innerProps": props.innerProps,
 					"rtl": isRTL.value,
 					"extra": extraContent
-				}, _isSlot(_slot = renderChildren()) ? _slot : { default: () => [_slot] })] })] }),
+				}, { default: () => [listChildren.value] })] })] }),
 				inVirtual.value && scrollHeight.value > (props.height || 0) && createVNode(ScrollBar_default, {
 					"ref": verticalScrollBarRef,
 					"prefixCls": props.prefixCls,

package/dist/ScrollBar.cjs

@@ -1,8 +1,11 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
-let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
-__v_c_util_dist_raf = require_rolldown_runtime.__toESM(__v_c_util_dist_raf);
+let _v_c_util_dist_raf = require("@v-c/util/dist/raf");
+_v_c_util_dist_raf = require_rolldown_runtime.__toESM(_v_c_util_dist_raf);
 function getPageXY(e, horizontal) {
 	return ("touches" in e ? e.touches[0] : e)[horizontal ? "pageX" : "pageY"] - window[horizontal ? "scrollX" : "scrollY"];
 }
@@ -149,7 +152,7 @@ var ScrollBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				let moveRafId = null;
 				const onMouseMove = (e) => {
 					const { dragging: stateDragging, pageY: statePageY, startTop: stateStartTop } = stateRef.value;
-					__v_c_util_dist_raf.default.cancel(moveRafId);
+					_v_c_util_dist_raf.default.cancel(moveRafId);
 					const rect = scrollbarRef.value.getBoundingClientRect();
 					const scale = props.containerSize / (props.horizontal ? rect.width : rect.height);
 					if (stateDragging) {
@@ -163,7 +166,7 @@ var ScrollBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						let newScrollTop = Math.ceil(ptg * tmpEnableScrollRange);
 						newScrollTop = Math.max(newScrollTop, 0);
 						newScrollTop = Math.min(newScrollTop, tmpEnableScrollRange);
-						moveRafId = (0, __v_c_util_dist_raf.default)(() => {
+						moveRafId = (0, _v_c_util_dist_raf.default)(() => {
 							props?.onScroll?.(newScrollTop, props.horizontal);
 						});
 					}
@@ -181,7 +184,7 @@ var ScrollBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					window.removeEventListener("touchmove", onMouseMove);
 					window.removeEventListener("mouseup", onMouseUp);
 					window.removeEventListener("touchend", onMouseUp);
-					__v_c_util_dist_raf.default.cancel(moveRafId);
+					_v_c_util_dist_raf.default.cancel(moveRafId);
 				});
 			}
 		});

package/dist/hooks/useChildren.cjs

@@ -0,0 +1,26 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_Item = require("../Item.cjs");
+let vue = require("vue");
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+}
+function useChildren(list, startIndex, endIndex, scrollWidth, offsetX, setNodeRef, renderFunc, { getKey }) {
+	return (0, vue.computed)(() => {
+		return list.value.slice(startIndex.value, endIndex.value + 1).map((item, index) => {
+			const node = renderFunc(item, startIndex.value + index, {
+				style: { width: `${scrollWidth.value}px` },
+				offsetX: offsetX.value
+			});
+			const key = getKey(item);
+			return (0, vue.createVNode)(require_Item.default, {
+				"key": key,
+				"setRef": (ele) => setNodeRef(item, ele)
+			}, _isSlot(node) ? node : { default: () => [node] });
+		});
+	});
+}
+exports.default = useChildren;

package/dist/hooks/useChildren.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import { SharedConfig } from '../interface';
+export default function useChildren(list: Ref<any[]>, startIndex: Ref<number>, endIndex: Ref<number>, scrollWidth: Ref<number>, offsetX: Ref<number>, setNodeRef: (item: any, element: HTMLElement | null) => void, renderFunc: any, { getKey }: SharedConfig<any>): import('vue').ComputedRef<import("vue/jsx-runtime").JSX.Element[]>;

package/dist/hooks/useChildren.js

@@ -0,0 +1,21 @@
+import Item_default from "../Item.js";
+import { computed, createVNode, isVNode } from "vue";
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function useChildren(list, startIndex, endIndex, scrollWidth, offsetX, setNodeRef, renderFunc, { getKey }) {
+	return computed(() => {
+		return list.value.slice(startIndex.value, endIndex.value + 1).map((item, index) => {
+			const node = renderFunc(item, startIndex.value + index, {
+				style: { width: `${scrollWidth.value}px` },
+				offsetX: offsetX.value
+			});
+			const key = getKey(item);
+			return createVNode(Item_default, {
+				"key": key,
+				"setRef": (ele) => setNodeRef(item, ele)
+			}, _isSlot(node) ? node : { default: () => [node] });
+		});
+	});
+}
+export { useChildren as default };

package/dist/hooks/useDiffItem.cjs

@@ -1,18 +1,20 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_algorithmUtil = require("../utils/algorithmUtil.cjs");
 let vue = require("vue");
-function useDiffItem(data, getKey) {
-	const prevDataRef = (0, vue.ref)([]);
-	const diffItem = (0, vue.ref)();
+function useDiffItem(data, getKey, onDiff) {
+	const prevData = (0, vue.shallowRef)(data.value);
+	const diffItem = (0, vue.shallowRef)();
 	(0, vue.watch)(data, (newData) => {
-		const prevData = prevDataRef.value;
-		if (newData !== prevData) {
-			diffItem.value = newData.find((item) => {
-				const key = getKey(item);
-				return !prevData.some((prevItem) => getKey(prevItem) === key);
-			});
-			prevDataRef.value = newData;
+		const diff = require_algorithmUtil.findListDiffIndex(prevData.value || [], data.value || [], getKey);
+		if (diff?.index !== void 0) {
+			onDiff?.(diff.index);
+			diffItem.value = newData[diff.index];
 		}
+		prevData.value = newData;
 	}, { immediate: true });
 	return diffItem;
 }

package/dist/hooks/useDiffItem.d.ts

@@ -1,2 +1,2 @@
 import { Ref } from 'vue';
-export default function useDiffItem<T>(data: Ref<T[]>, getKey: (item: T) => any): Ref<T | undefined>;
+export default function useDiffItem<T>(data: Ref<T[]>, getKey: (item: T) => any, onDiff?: (diffIndex: number) => void): Ref<T | undefined>;

package/dist/hooks/useDiffItem.js

@@ -1,16 +1,15 @@
-import { ref, watch } from "vue";
-function useDiffItem(data, getKey) {
-	const prevDataRef = ref([]);
-	const diffItem = ref();
+import { findListDiffIndex } from "../utils/algorithmUtil.js";
+import { shallowRef, watch } from "vue";
+function useDiffItem(data, getKey, onDiff) {
+	const prevData = shallowRef(data.value);
+	const diffItem = shallowRef();
 	watch(data, (newData) => {
-		const prevData = prevDataRef.value;
-		if (newData !== prevData) {
-			diffItem.value = newData.find((item) => {
-				const key = getKey(item);
-				return !prevData.some((prevItem) => getKey(prevItem) === key);
-			});
-			prevDataRef.value = newData;
+		const diff = findListDiffIndex(prevData.value || [], data.value || [], getKey);
+		if (diff?.index !== void 0) {
+			onDiff?.(diff.index);
+			diffItem.value = newData[diff.index];
 		}
+		prevData.value = newData;
 	}, { immediate: true });
 	return diffItem;
 }

package/dist/hooks/useFrameWheel.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 const require_isFirefox = require("../utils/isFirefox.cjs");
 const require_useOriginScroll = require("./useOriginScroll.cjs");

package/dist/hooks/useGetSize.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
 function useGetSize(mergedData, getKey, heights, itemHeight) {

package/dist/hooks/useHeights.cjs

@@ -1,7 +1,11 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 const require_CacheMap = require("../utils/CacheMap.cjs");
 let vue = require("vue");
+let _v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
 function parseNumber(value) {
 	const num = parseFloat(value);
 	return isNaN(num) ? 0 : num;
@@ -9,8 +13,12 @@ function parseNumber(value) {
 function useHeights(getKey, onItemAdd, onItemRemove) {
 	const updatedMark = (0, vue.ref)(0);
 	const instanceRef = (0, vue.ref)(/* @__PURE__ */ new Map());
-	const heightsRef = new require_CacheMap.default();
+	const heightsRef = (0, vue.markRaw)(new require_CacheMap.default());
 	const promiseIdRef = (0, vue.ref)(0);
+	const observedElements = /* @__PURE__ */ new Map();
+	const resizeObserver = typeof window !== "undefined" && "ResizeObserver" in window ? new window.ResizeObserver(() => {
+		collectHeight();
+	}) : null;
 	function cancelRaf() {
 		promiseIdRef.value += 1;
 	}
@@ -19,6 +27,7 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
 		const doCollect = () => {
 			let changed = false;
 			instanceRef.value.forEach((element, key) => {
+				element = (0, _v_c_util_dist_Dom_findDOMNode.getDOM)(element);
 				if (element && element.offsetParent) {
 					const { offsetHeight } = element;
 					const { marginTop, marginBottom } = getComputedStyle(element);
@@ -46,15 +55,27 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
 		const key = getKey(item);
 		const origin = instanceRef.value.get(key);
 		if (origin === instance) return;
+		const prevObserved = observedElements.get(key);
+		if (prevObserved && resizeObserver) {
+			resizeObserver.unobserve(prevObserved);
+			observedElements.delete(key);
+		}
 		if (instance) {
 			instanceRef.value.set(key, instance);
 			collectHeight();
+			const element = (0, _v_c_util_dist_Dom_findDOMNode.getDOM)(instance);
+			if (element && element.nodeType === 1 && resizeObserver) {
+				resizeObserver.observe(element);
+				observedElements.set(key, element);
+			}
 		} else instanceRef.value.delete(key);
 		if (!origin !== !instance) if (instance) onItemAdd?.(item);
 		else onItemRemove?.(item);
 	}
 	(0, vue.onUnmounted)(() => {
 		cancelRaf();
+		resizeObserver?.disconnect?.();
+		observedElements.clear();
 	});
 	return [
 		setInstanceRef,

package/dist/hooks/useHeights.js

@@ -1,5 +1,6 @@
 import CacheMap_default from "../utils/CacheMap.js";
-import { onUnmounted, ref } from "vue";
+import { markRaw, onUnmounted, ref } from "vue";
+import { getDOM } from "@v-c/util/dist/Dom/findDOMNode";
 function parseNumber(value) {
 	const num = parseFloat(value);
 	return isNaN(num) ? 0 : num;
@@ -7,8 +8,12 @@ function parseNumber(value) {
 function useHeights(getKey, onItemAdd, onItemRemove) {
 	const updatedMark = ref(0);
 	const instanceRef = ref(/* @__PURE__ */ new Map());
-	const heightsRef = new CacheMap_default();
+	const heightsRef = markRaw(new CacheMap_default());
 	const promiseIdRef = ref(0);
+	const observedElements = /* @__PURE__ */ new Map();
+	const resizeObserver = typeof window !== "undefined" && "ResizeObserver" in window ? new window.ResizeObserver(() => {
+		collectHeight();
+	}) : null;
 	function cancelRaf() {
 		promiseIdRef.value += 1;
 	}
@@ -17,6 +22,7 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
 		const doCollect = () => {
 			let changed = false;
 			instanceRef.value.forEach((element, key) => {
+				element = getDOM(element);
 				if (element && element.offsetParent) {
 					const { offsetHeight } = element;
 					const { marginTop, marginBottom } = getComputedStyle(element);
@@ -44,15 +50,27 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
 		const key = getKey(item);
 		const origin = instanceRef.value.get(key);
 		if (origin === instance) return;
+		const prevObserved = observedElements.get(key);
+		if (prevObserved && resizeObserver) {
+			resizeObserver.unobserve(prevObserved);
+			observedElements.delete(key);
+		}
 		if (instance) {
 			instanceRef.value.set(key, instance);
 			collectHeight();
+			const element = getDOM(instance);
+			if (element && element.nodeType === 1 && resizeObserver) {
+				resizeObserver.observe(element);
+				observedElements.set(key, element);
+			}
 		} else instanceRef.value.delete(key);
 		if (!origin !== !instance) if (instance) onItemAdd?.(item);
 		else onItemRemove?.(item);
 	}
 	onUnmounted(() => {
 		cancelRaf();
+		resizeObserver?.disconnect?.();
+		observedElements.clear();
 	});
 	return [
 		setInstanceRef,

package/dist/hooks/useMobileTouchMove.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
 var SMOOTH_PTG = 14 / 15;

package/dist/hooks/useOriginScroll.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
 function useOriginScroll(isScrollAtTop, isScrollAtBottom, isScrollAtLeft, isScrollAtRight) {

package/dist/hooks/useScrollDrag.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
 function smoothScrollOffset(offset) {

package/dist/hooks/useScrollTo.cjs

@@ -1,14 +1,23 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 let vue = require("vue");
-let __v_c_util = require("@v-c/util");
-let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
-__v_c_util_dist_raf = require_rolldown_runtime.__toESM(__v_c_util_dist_raf);
+let _v_c_util = require("@v-c/util");
 var MAX_TIMES = 10;
 function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop, triggerFlash) {
-	const scrollRef = (0, vue.shallowRef)();
 	const syncState = (0, vue.shallowRef)(null);
-	(0, vue.watch)([syncState, containerRef], () => {
+	const getTotalHeight = () => {
+		let totalHeight = 0;
+		for (let i = 0; i < data.value.length; i += 1) {
+			const key = getKey(data.value[i]);
+			const cacheHeight = heights.get(key);
+			totalHeight += cacheHeight === void 0 ? itemHeight.value : cacheHeight;
+		}
+		return totalHeight;
+	};
+	(0, vue.watch)(syncState, () => {
 		if (syncState.value && syncState.value.times < MAX_TIMES) {
 			if (!containerRef.value) {
 				syncState.value = { ...syncState.value };
@@ -67,17 +76,16 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
 				targetAlign: newTargetAlign,
 				lastTop: targetTop
 			};
-		} else if (process.env.NODE_ENV !== "production" && syncState.value?.times === MAX_TIMES) (0, __v_c_util.warning)(false, "Seems `scrollTo` with `rc-virtual-list` reach the max limitation. Please fire issue for us. Thanks.");
+		} else if (process.env.NODE_ENV !== "production" && syncState.value?.times === MAX_TIMES) (0, _v_c_util.warning)(false, "Seems `scrollTo` with `rc-virtual-list` reach the max limitation. Please fire issue for us. Thanks.");
 	}, {
 		immediate: true,
 		flush: "post"
 	});
-	return (arg) => {
+	const scrollTo = (arg) => {
 		if (arg === null || arg === void 0) {
 			triggerFlash();
 			return;
 		}
-		__v_c_util_dist_raf.default.cancel(scrollRef.value);
 		if (typeof arg === "number") syncScrollTop(arg);
 		else if (arg && typeof arg === "object") {
 			let index;
@@ -93,5 +101,6 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
 			};
 		}
 	};
+	return [scrollTo, getTotalHeight];
 }
 exports.default = useScrollTo;

package/dist/hooks/useScrollTo.d.ts

@@ -1,7 +1,7 @@
 import { Key } from '@v-c/util/dist/type';
 import { Ref } from 'vue';
-import { GetKey } from '../interface.ts';
-import { default as CacheMap } from '../utils/CacheMap.ts';
+import { GetKey } from '../interface';
+import { default as CacheMap } from '../utils/CacheMap';
 export type ScrollAlign = 'top' | 'bottom' | 'auto';
 export interface ScrollPos {
     left?: number;
@@ -16,4 +16,4 @@ export type ScrollTarget = {
     align?: ScrollAlign;
     offset?: number;
 };
-export default function useScrollTo(containerRef: Ref<HTMLDivElement>, data: Ref<any[]>, heights: CacheMap, itemHeight: Ref<number>, getKey: GetKey<any>, collectHeight: () => void, syncScrollTop: (newTop: number) => void, triggerFlash: () => void): (arg: number | ScrollTarget) => void;
+export default function useScrollTo(containerRef: Ref<HTMLDivElement>, data: Ref<any[]>, heights: CacheMap, itemHeight: Ref<number>, getKey: GetKey<any>, collectHeight: () => void, syncScrollTop: (newTop: number) => void, triggerFlash: () => void): [(arg: number | ScrollTarget) => void, () => number];

package/dist/hooks/useScrollTo.js

@@ -1,11 +1,18 @@
 import { shallowRef, watch } from "vue";
 import { warning } from "@v-c/util";
-import raf from "@v-c/util/dist/raf";
 var MAX_TIMES = 10;
 function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop, triggerFlash) {
-	const scrollRef = shallowRef();
 	const syncState = shallowRef(null);
-	watch([syncState, containerRef], () => {
+	const getTotalHeight = () => {
+		let totalHeight = 0;
+		for (let i = 0; i < data.value.length; i += 1) {
+			const key = getKey(data.value[i]);
+			const cacheHeight = heights.get(key);
+			totalHeight += cacheHeight === void 0 ? itemHeight.value : cacheHeight;
+		}
+		return totalHeight;
+	};
+	watch(syncState, () => {
 		if (syncState.value && syncState.value.times < MAX_TIMES) {
 			if (!containerRef.value) {
 				syncState.value = { ...syncState.value };
@@ -69,12 +76,11 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
 		immediate: true,
 		flush: "post"
 	});
-	return (arg) => {
+	const scrollTo = (arg) => {
 		if (arg === null || arg === void 0) {
 			triggerFlash();
 			return;
 		}
-		raf.cancel(scrollRef.value);
 		if (typeof arg === "number") syncScrollTop(arg);
 		else if (arg && typeof arg === "object") {
 			let index;
@@ -90,5 +96,6 @@ function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHei
 			};
 		}
 	};
+	return [scrollTo, getTotalHeight];
 }
 export { useScrollTo as default };

package/dist/index.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_List = require("./List.cjs");
 var src_default = require_List.default;
 exports.default = src_default;

package/dist/interface.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });

package/dist/utils/CacheMap.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 var CacheMap = class {
 	maps;
 	id = 0;

package/dist/utils/algorithmUtil.cjs

@@ -0,0 +1,47 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getIndexByStartLoc(min, max, start, index) {
+	const beforeCount = start - min;
+	const afterCount = max - start;
+	if (index <= Math.min(beforeCount, afterCount) * 2) {
+		const stepIndex = Math.floor(index / 2);
+		if (index % 2) return start + stepIndex + 1;
+		return start - stepIndex;
+	}
+	if (beforeCount > afterCount) return start - (index - afterCount);
+	return start + (index - beforeCount);
+}
+function findListDiffIndex(originList, targetList, getKey) {
+	const originLen = originList.length;
+	const targetLen = targetList.length;
+	let shortList;
+	let longList;
+	if (originLen === 0 && targetLen === 0) return null;
+	if (originLen < targetLen) {
+		shortList = originList;
+		longList = targetList;
+	} else {
+		shortList = targetList;
+		longList = originList;
+	}
+	const notExistKey = { __EMPTY_ITEM__: true };
+	function getItemKey(item) {
+		if (item !== void 0) return getKey(item);
+		return notExistKey;
+	}
+	let diffIndex = null;
+	let multiple = Math.abs(originLen - targetLen) !== 1;
+	for (let i = 0; i < longList.length; i += 1) {
+		const shortKey = getItemKey(shortList[i]);
+		if (shortKey !== getItemKey(longList[i])) {
+			diffIndex = i;
+			multiple = multiple || shortKey !== getItemKey(longList[i + 1]);
+			break;
+		}
+	}
+	return diffIndex === null ? null : {
+		index: diffIndex,
+		multiple
+	};
+}
+exports.findListDiffIndex = findListDiffIndex;
+exports.getIndexByStartLoc = getIndexByStartLoc;

package/dist/utils/algorithmUtil.d.ts

@@ -0,0 +1,23 @@
+import { Key } from '@v-c/util/dist/type';
+/**
+ * Get index with specific start index one by one. e.g.
+ * min: 3, max: 9, start: 6
+ *
+ * Return index is:
+ * [0]: 6
+ * [1]: 7
+ * [2]: 5
+ * [3]: 8
+ * [4]: 4
+ * [5]: 9
+ * [6]: 3
+ */
+export declare function getIndexByStartLoc(min: number, max: number, start: number, index: number): number;
+/**
+ * We assume that 2 list has only 1 item diff and others keeping the order.
+ * So we can use dichotomy algorithm to find changed one.
+ */
+export declare function findListDiffIndex<T>(originList: T[], targetList: T[], getKey: (item: T) => Key): {
+    index: number;
+    multiple: boolean;
+} | null;

package/dist/utils/algorithmUtil.js

@@ -0,0 +1,45 @@
+function getIndexByStartLoc(min, max, start, index) {
+	const beforeCount = start - min;
+	const afterCount = max - start;
+	if (index <= Math.min(beforeCount, afterCount) * 2) {
+		const stepIndex = Math.floor(index / 2);
+		if (index % 2) return start + stepIndex + 1;
+		return start - stepIndex;
+	}
+	if (beforeCount > afterCount) return start - (index - afterCount);
+	return start + (index - beforeCount);
+}
+function findListDiffIndex(originList, targetList, getKey) {
+	const originLen = originList.length;
+	const targetLen = targetList.length;
+	let shortList;
+	let longList;
+	if (originLen === 0 && targetLen === 0) return null;
+	if (originLen < targetLen) {
+		shortList = originList;
+		longList = targetList;
+	} else {
+		shortList = targetList;
+		longList = originList;
+	}
+	const notExistKey = { __EMPTY_ITEM__: true };
+	function getItemKey(item) {
+		if (item !== void 0) return getKey(item);
+		return notExistKey;
+	}
+	let diffIndex = null;
+	let multiple = Math.abs(originLen - targetLen) !== 1;
+	for (let i = 0; i < longList.length; i += 1) {
+		const shortKey = getItemKey(shortList[i]);
+		if (shortKey !== getItemKey(longList[i])) {
+			diffIndex = i;
+			multiple = multiple || shortKey !== getItemKey(longList[i + 1]);
+			break;
+		}
+	}
+	return diffIndex === null ? null : {
+		index: diffIndex,
+		multiple
+	};
+}
+export { findListDiffIndex, getIndexByStartLoc };

package/dist/utils/isFirefox.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 var isFF = typeof navigator === "object" && /Firefox/i.test(navigator.userAgent);
 var isFirefox_default = isFF;
 exports.default = isFirefox_default;

package/dist/utils/scrollbarUtil.cjs

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 var MIN_SIZE = 20;
 function getSpinSize(containerSize = 0, scrollRange = 0) {
 	let baseSize = containerSize / scrollRange * containerSize;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/virtual-list",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Vue Virtual List Component",
   "author": "",
   "license": "MIT",
@@ -31,8 +31,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/resize-observer": "^1.0.0",
-    "@v-c/util": "^1.0.2"
+    "@v-c/resize-observer": "^1.0.3",
+    "@v-c/util": "^1.0.4"
   },
   "scripts": {
     "build": "vite build",