@v-c/virtual-list 1.0.3 → 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,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_Filler = require("./Filler.cjs");
 const require_useChildren = require("./hooks/useChildren.cjs");
@@ -12,9 +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");
+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",
@@ -66,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];
 		};
@@ -79,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)();
@@ -131,35 +135,52 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				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;
@@ -178,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)({
@@ -274,7 +299,8 @@ 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();
 		}
@@ -307,7 +333,7 @@ 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,
@@ -316,14 +342,29 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		}), { getKey });
 		return () => {
 			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 {};
+			};
 			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,
@@ -335,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
@@ -347,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,

package/dist/List.js

@@ -9,7 +9,7 @@ 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, 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";
 var EMPTY_DATA = [];
@@ -63,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];
 		};
@@ -76,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();
@@ -128,35 +129,52 @@ var List_default = /* @__PURE__ */ defineComponent({
 				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;
@@ -175,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({
@@ -271,7 +293,8 @@ 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();
 		}
@@ -304,7 +327,7 @@ 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,
@@ -313,14 +336,29 @@ var List_default = /* @__PURE__ */ defineComponent({
 		}), { getKey });
 		return () => {
 			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 {};
+			};
 			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,

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

@@ -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_Item = require("../Item.cjs");
 let vue = require("vue");

package/dist/hooks/useDiffItem.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_algorithmUtil = require("../utils/algorithmUtil.cjs");
 let vue = require("vue");

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,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 = require("@v-c/util");
+let _v_c_util = require("@v-c/util");
 var MAX_TIMES = 10;
 function useScrollTo(containerRef, data, heights, itemHeight, getKey, collectHeight, syncScrollTop, triggerFlash) {
 	const syncState = (0, vue.shallowRef)(null);
@@ -73,7 +76,7 @@ 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"

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

@@ -1,3 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function getIndexByStartLoc(min, max, start, index) {
 	const beforeCount = start - min;
 	const afterCount = max - start;

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.3",
+  "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.1",
-    "@v-c/util": "^1.0.2"
+    "@v-c/resize-observer": "^1.0.3",
+    "@v-c/util": "^1.0.4"
   },
   "scripts": {
     "build": "vite build",