@v-c/virtual-list 1.0.1 → 1.0.3

package/dist/List.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 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");
@@ -15,9 +15,6 @@ 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);
-}
 var EMPTY_DATA = [];
 var ScrollStyle = {
 	overflowY: "auto",
@@ -77,7 +74,10 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			return item?.[_itemKey];
 		};
 		const [setInstanceRef, collectHeight, heights, heightUpdatedMark] = require_useHeights.default(getKey, void 0, void 0);
-		const mergedData = (0, vue.computed)(() => props.data || EMPTY_DATA);
+		const mergedData = (0, vue.shallowRef)(props?.data || EMPTY_DATA);
+		(0, vue.watch)(() => props.data, () => {
+			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)(() => {
@@ -108,7 +108,6 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			if (componentRef.value) componentRef.value.scrollTop = alignedTop;
 			offsetTop.value = alignedTop;
 		}
-		require_useDiffItem.default(mergedData, getKey);
 		(0, vue.watch)([
 			inVirtual,
 			useVirtual,
@@ -124,7 +123,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;
@@ -132,6 +130,7 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				fillerOffset.value = void 0;
 				return;
 			}
+			const { itemHeight: itemHeight$1, height } = props;
 			let itemTop = 0;
 			let startIndex;
 			let startOffset;
@@ -149,6 +148,10 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}
 				if (currentItemBottom > offsetTop.value + 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;
@@ -253,6 +256,7 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const onScrollbarStopMove = () => {
 			scrollMoving.value = false;
 		};
+		require_useDiffItem.default(mergedData, getKey);
 		(0, vue.watch)([
 			() => props.height,
 			scrollHeight,
@@ -261,7 +265,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) => {
@@ -274,7 +278,13 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			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,
@@ -299,30 +309,12 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}
 		});
 		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] }));
-				}
-				return children;
-			};
 			const componentStyle = {};
 			if (props.height) {
 				componentStyle[props.fullHeight ? "height" : "maxHeight"] = `${props.height}px`;
@@ -373,7 +365,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,5 @@
 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";
@@ -9,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, toRef, 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",
@@ -74,7 +71,10 @@ var List_default = /* @__PURE__ */ defineComponent({
 			return item?.[_itemKey];
 		};
 		const [setInstanceRef, collectHeight, heights, heightUpdatedMark] = useHeights(getKey, void 0, void 0);
-		const mergedData = computed(() => props.data || EMPTY_DATA);
+		const mergedData = shallowRef(props?.data || EMPTY_DATA);
+		watch(() => props.data, () => {
+			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(() => {
@@ -105,7 +105,6 @@ var List_default = /* @__PURE__ */ defineComponent({
 			if (componentRef.value) componentRef.value.scrollTop = alignedTop;
 			offsetTop.value = alignedTop;
 		}
-		useDiffItem(mergedData, getKey);
 		watch([
 			inVirtual,
 			useVirtual,
@@ -121,7 +120,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;
@@ -129,6 +127,7 @@ var List_default = /* @__PURE__ */ defineComponent({
 				fillerOffset.value = void 0;
 				return;
 			}
+			const { itemHeight: itemHeight$1, height } = props;
 			let itemTop = 0;
 			let startIndex;
 			let startOffset;
@@ -146,6 +145,10 @@ var List_default = /* @__PURE__ */ defineComponent({
 				}
 				if (currentItemBottom > offsetTop.value + 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;
@@ -250,6 +253,7 @@ var List_default = /* @__PURE__ */ defineComponent({
 		const onScrollbarStopMove = () => {
 			scrollMoving.value = false;
 		};
+		useDiffItem(mergedData, getKey);
 		watch([
 			() => props.height,
 			scrollHeight,
@@ -258,7 +262,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) => {
@@ -271,7 +275,13 @@ var List_default = /* @__PURE__ */ defineComponent({
 			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,
@@ -296,30 +306,12 @@ var List_default = /* @__PURE__ */ defineComponent({
 			}
 		});
 		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] }));
-				}
-				return children;
-			};
 			const componentStyle = {};
 			if (props.height) {
 				componentStyle[props.fullHeight ? "height" : "maxHeight"] = `${props.height}px`;
@@ -370,7 +362,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/hooks/useChildren.cjs

@@ -0,0 +1,23 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 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/useScrollTo.cjs

@@ -2,13 +2,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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);
 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 };
@@ -72,12 +78,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;
 		}
-		__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 +98,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/utils/algorithmUtil.cjs

@@ -0,0 +1,46 @@
+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/package.json

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