@v-c/virtual-list 1.0.4 → 1.0.6

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, watch } from "vue";
+import { computed, createVNode, defineComponent, mergeProps, ref, shallowRef, toRaw, unref, watch } from "vue";
 import ResizeObserver from "@v-c/resize-observer";
 import { pureAttrs } from "@v-c/util/dist/props-util";
 var EMPTY_DATA = [];
@@ -137,7 +137,7 @@ var List_default = /* @__PURE__ */ defineComponent({
 				fillerOffset.value = 0;
 				return;
 			}
-			if (heights.id === 0) {
+			if (unref(heights.id) === 0) {
 				const safeItemHeight = itemHeight$1;
 				const safeListHeight = height;
 				const startIndex$1 = Math.max(0, Math.floor(offsetTop.value / safeItemHeight));
@@ -367,7 +367,7 @@ var List_default = /* @__PURE__ */ defineComponent({
 				offsetX: offsetLeft.value,
 				offsetY: fillerOffset.value || 0,
 				rtl: isRTL.value,
-				getSize: getSize.value
+				getSize
 			});
 			const Component = props.component;
 			return createVNode("div", mergeProps({ "ref": containerRef }, pureAttrs(attrs), {

package/dist/hooks/useGetSize.d.ts

@@ -1,7 +1,4 @@
-import { ComputedRef, Ref } from 'vue';
-import { GetKey } from '../interface';
+import { Ref } from 'vue';
+import { GetKey, GetSize } from '../interface';
 import { default as CacheMap } from '../utils/CacheMap';
-export declare function useGetSize<T>(mergedData: Ref<T[]>, getKey: GetKey<T>, heights: CacheMap, itemHeight: Ref<number>): ComputedRef<(startKey: any, endKey?: any) => {
-    top: number;
-    bottom: number;
-}>;
+export declare function useGetSize<T>(mergedData: Ref<T[]>, getKey: GetKey<T>, heights: CacheMap, itemHeight: Ref<number>): GetSize;

package/dist/hooks/useGetSize.js

@@ -1,28 +1,36 @@
-import { computed } from "vue";
+import { watch } from "vue";
 function useGetSize(mergedData, getKey, heights, itemHeight) {
-	return computed(() => {
-		return (startKey, endKey) => {
-			let topIndex = 0;
-			let bottomIndex = mergedData.value.length - 1;
-			if (startKey !== void 0 && startKey !== null) topIndex = mergedData.value.findIndex((item) => getKey(item) === startKey);
-			if (endKey !== void 0 && endKey !== null) bottomIndex = mergedData.value.findIndex((item) => getKey(item) === endKey);
-			let top = 0;
-			for (let i = 0; i < topIndex; i += 1) {
-				const key = getKey(mergedData.value[i]);
-				const cacheHeight = heights.get(key);
-				top += cacheHeight === void 0 ? itemHeight.value : cacheHeight;
-			}
-			let bottom = 0;
-			for (let i = mergedData.value.length - 1; i > bottomIndex; i -= 1) {
-				const key = getKey(mergedData.value[i]);
-				const cacheHeight = heights.get(key);
-				bottom += cacheHeight === void 0 ? itemHeight.value : cacheHeight;
+	let key2Index = /* @__PURE__ */ new Map();
+	let bottomList = [];
+	watch([
+		mergedData,
+		() => heights.id.value,
+		itemHeight
+	], () => {
+		key2Index = /* @__PURE__ */ new Map();
+		bottomList = [];
+	});
+	const getSize = (startKey, endKey = startKey) => {
+		let startIndex = key2Index.get(startKey);
+		let endIndex = key2Index.get(endKey);
+		if (startIndex === void 0 || endIndex === void 0) {
+			const dataLen = mergedData.value.length;
+			for (let i = bottomList.length; i < dataLen; i += 1) {
+				const item = mergedData.value[i];
+				const key = getKey(item);
+				key2Index.set(key, i);
+				const cacheHeight = heights.get(key) ?? itemHeight.value;
+				bottomList[i] = (bottomList[i - 1] || 0) + cacheHeight;
+				if (key === startKey) startIndex = i;
+				if (key === endKey) endIndex = i;
+				if (startIndex !== void 0 && endIndex !== void 0) break;
 			}
-			return {
-				top,
-				bottom
-			};
+		}
+		return {
+			top: bottomList[startIndex - 1] || 0,
+			bottom: bottomList[endIndex]
 		};
-	});
+	};
+	return getSize;
 }
 export { useGetSize };

package/dist/utils/CacheMap.d.ts

@@ -1,7 +1,7 @@
 import { Key } from '@v-c/util/dist/type';
 declare class CacheMap {
     maps: Record<string, number>;
-    id: number;
+    id: import('vue').ShallowRef<number, number>;
     diffRecords: Map<Key, number>;
     constructor();
     set(key: Key, value: number): void;

package/dist/utils/CacheMap.js

@@ -1,6 +1,7 @@
+import { shallowRef } from "vue";
 var CacheMap = class {
 	maps;
-	id = 0;
+	id = shallowRef(0);
 	diffRecords = /* @__PURE__ */ new Map();
 	constructor() {
 		this.maps = Object.create(null);
@@ -8,7 +9,7 @@ var CacheMap = class {
 	set(key, value) {
 		this.diffRecords.set(key, this.maps[key]);
 		this.maps[key] = value;
-		this.id += 1;
+		this.id.value += 1;
 	}
 	get(key) {
 		return this.maps[key];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/virtual-list",
   "type": "module",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Vue Virtual List Component",
   "author": "",
   "license": "MIT",
@@ -14,7 +14,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     },
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
@@ -31,8 +31,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/resize-observer": "^1.0.3",
-    "@v-c/util": "^1.0.4"
+    "@v-c/resize-observer": "^1.0.8",
+    "@v-c/util": "^1.0.14"
   },
   "scripts": {
     "build": "vite build",

package/dist/Filler.cjs

@@ -1,54 +0,0 @@
-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);
-var Filler_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	name: "Filler",
-	props: {
-		prefixCls: String,
-		height: Number,
-		offsetY: Number,
-		offsetX: Number,
-		scrollWidth: Number,
-		onInnerResize: Function,
-		innerProps: Object,
-		rtl: Boolean,
-		extra: Object
-	},
-	setup(props, { slots }) {
-		return () => {
-			let outerStyle = {};
-			let innerStyle = {
-				display: "flex",
-				flexDirection: "column"
-			};
-			if (props.offsetY !== void 0) {
-				outerStyle = {
-					height: `${props.height}px`,
-					position: "relative",
-					overflow: "hidden"
-				};
-				innerStyle = {
-					...innerStyle,
-					transform: `translateY(${props.offsetY}px)`,
-					[props.rtl ? "marginRight" : "marginLeft"]: `-${props.offsetX || 0}px`,
-					position: "absolute",
-					left: 0,
-					right: 0,
-					top: 0
-				};
-			}
-			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,
-				"class": props.prefixCls ? `${props.prefixCls}-holder-inner` : void 0
-			}, props.innerProps), [slots.default?.(), props.extra])] })]);
-		};
-	}
-});
-exports.default = Filler_default;

package/dist/Item.cjs

@@ -1,29 +0,0 @@
-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");
-var Item_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	name: "Item",
-	props: { setRef: {
-		type: Function,
-		required: true
-	} },
-	setup(props, { slots }) {
-		const currentElement = (0, vue.shallowRef)(null);
-		const refFunc = (node) => {
-			if (currentElement.value !== node) {
-				currentElement.value = node;
-				props.setRef(node);
-			}
-		};
-		return () => {
-			const child = (0, _v_c_util_dist_props_util.filterEmpty)(slots.default?.() ?? [])[0];
-			if (!child) return null;
-			return (0, vue.cloneVNode)(child, { ref: refFunc });
-		};
-	}
-});
-exports.default = Item_default;

package/dist/List.cjs

@@ -1,445 +0,0 @@
-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");
-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");
-const require_useMobileTouchMove = require("./hooks/useMobileTouchMove.cjs");
-const require_useScrollDrag = require("./hooks/useScrollDrag.cjs");
-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");
-var EMPTY_DATA = [];
-var ScrollStyle = {
-	overflowY: "auto",
-	overflowAnchor: "none"
-};
-var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
-	name: "VirtualList",
-	props: {
-		prefixCls: {
-			type: String,
-			default: "vc-virtual-list"
-		},
-		data: { type: Array },
-		height: Number,
-		itemHeight: Number,
-		fullHeight: {
-			type: Boolean,
-			default: true
-		},
-		itemKey: {
-			type: [
-				String,
-				Number,
-				Function
-			],
-			required: true
-		},
-		component: {
-			type: String,
-			default: "div"
-		},
-		direction: { type: String },
-		scrollWidth: Number,
-		styles: Object,
-		showScrollBar: {
-			type: [Boolean, String],
-			default: "optional"
-		},
-		virtual: {
-			type: Boolean,
-			default: true
-		},
-		onScroll: Function,
-		onVirtualScroll: Function,
-		onVisibleChange: Function,
-		innerProps: Object,
-		extraRender: Function
-	},
-	inheritAttrs: false,
-	setup(props, { expose, attrs, slots }) {
-		const itemHeight = (0, vue.computed)(() => props.itemHeight);
-		let itemKeyProp = props.itemKey;
-		(0, vue.watch)(() => props.itemKey, (val) => {
-			itemKeyProp = val;
-		});
-		const getKey = (item) => {
-			const _itemKey = itemKeyProp;
-			if (typeof _itemKey === "function") return _itemKey(item);
-			return item?.[_itemKey];
-		};
-		const [setInstanceRef, collectHeight, heights, heightUpdatedMark] = require_useHeights.default(getKey, void 0, void 0);
-		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 inVirtual = (0, vue.computed)(() => {
-			const data = mergedData.value;
-			return useVirtual.value && data && (props.itemHeight * data.length > props.height || !!props.scrollWidth);
-		});
-		const componentRef = (0, vue.ref)();
-		const fillerInnerRef = (0, vue.ref)();
-		const containerRef = (0, vue.ref)();
-		const verticalScrollBarRef = (0, vue.shallowRef)();
-		const horizontalScrollBarRef = (0, vue.shallowRef)();
-		const offsetTop = (0, vue.ref)(0);
-		const offsetLeft = (0, vue.ref)(0);
-		const scrollMoving = (0, vue.ref)(false);
-		const verticalScrollBarSpinSize = (0, vue.ref)(0);
-		const horizontalScrollBarSpinSize = (0, vue.ref)(0);
-		const contentScrollWidth = (0, vue.ref)(props.scrollWidth || 0);
-		const scrollHeight = (0, vue.ref)(0);
-		const start = (0, vue.ref)(0);
-		const end = (0, vue.ref)(0);
-		const fillerOffset = (0, vue.ref)(void 0);
-		function syncScrollTop(newTop) {
-			let value;
-			if (typeof newTop === "function") value = newTop(offsetTop.value);
-			else value = newTop;
-			const maxScrollHeight = scrollHeight.value - props.height;
-			const alignedTop = Math.max(0, Math.min(value, maxScrollHeight || 0));
-			if (componentRef.value) componentRef.value.scrollTop = alignedTop;
-			offsetTop.value = alignedTop;
-		}
-		(0, vue.watch)([
-			inVirtual,
-			useVirtual,
-			offsetTop,
-			mergedData,
-			heightUpdatedMark,
-			() => props.height
-		], () => {
-			if (!useVirtual.value) {
-				scrollHeight.value = 0;
-				start.value = 0;
-				end.value = mergedData.value.length - 1;
-				fillerOffset.value = void 0;
-				return;
-			}
-			if (!inVirtual.value) {
-				scrollHeight.value = fillerInnerRef.value?.offsetHeight || 0;
-				start.value = 0;
-				end.value = mergedData.value.length - 1;
-				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 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 && startIndex === void 0) {
-					startIndex = i;
-					startOffset = itemTop;
-				}
-				if (currentItemBottom > _offsetTop + height && endIndex === void 0) endIndex = i;
-				itemTop = currentItemBottom;
-			}
-			if (startIndex === void 0) {
-				startIndex = 0;
-				startOffset = 0;
-				endIndex = Math.ceil(height / itemHeight$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;
-			fillerOffset.value = startOffset;
-		}, { immediate: true });
-		(0, vue.watch)(scrollHeight, () => {
-			const changedRecord = heights.getRecord();
-			if (changedRecord.size === 1) {
-				const recordKey = Array.from(changedRecord.keys())[0];
-				const prevCacheHeight = changedRecord.get(recordKey);
-				const startItem = mergedData.value[start.value];
-				if (startItem && prevCacheHeight === void 0) {
-					if (getKey(startItem) === recordKey) {
-						const diffHeight = heights.get(recordKey) - props.itemHeight;
-						syncScrollTop((ori) => ori + diffHeight);
-					}
-				}
-			}
-			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)({
-			width: 0,
-			height: props.height || 0
-		});
-		const onHolderResize = (sizeInfo) => {
-			size.value = {
-				width: sizeInfo.offsetWidth,
-				height: sizeInfo.offsetHeight
-			};
-			contentScrollWidth.value = props.scrollWidth ?? sizeInfo.offsetWidth;
-		};
-		const isRTL = (0, vue.computed)(() => props.direction === "rtl");
-		const getVirtualScrollInfo = () => ({
-			x: isRTL.value ? -offsetLeft.value : offsetLeft.value,
-			y: offsetTop.value
-		});
-		const lastVirtualScrollInfo = (0, vue.ref)(getVirtualScrollInfo());
-		const triggerScroll = (params) => {
-			if (props.onVirtualScroll) {
-				const nextInfo = {
-					...getVirtualScrollInfo(),
-					...params
-				};
-				if (lastVirtualScrollInfo.value.x !== nextInfo.x || lastVirtualScrollInfo.value.y !== nextInfo.y) {
-					props.onVirtualScroll(nextInfo);
-					lastVirtualScrollInfo.value = nextInfo;
-				}
-			}
-		};
-		const horizontalRange = (0, vue.computed)(() => Math.max(0, (contentScrollWidth.value || 0) - size.value.width));
-		const isScrollAtTop = (0, vue.computed)(() => offsetTop.value === 0);
-		const isScrollAtBottom = (0, vue.computed)(() => offsetTop.value + props.height >= scrollHeight.value);
-		const isScrollAtLeft = (0, vue.computed)(() => offsetLeft.value === 0);
-		const isScrollAtRight = (0, vue.computed)(() => offsetLeft.value >= horizontalRange.value);
-		const keepInHorizontalRange = (nextOffsetLeft) => {
-			const max = horizontalRange.value;
-			return Math.max(0, Math.min(nextOffsetLeft, max));
-		};
-		const delayHideScrollBar = () => {
-			verticalScrollBarRef.value?.delayHidden();
-			horizontalScrollBarRef.value?.delayHidden();
-		};
-		const [onWheel] = require_useFrameWheel.default(inVirtual, isScrollAtTop, isScrollAtBottom, isScrollAtLeft, isScrollAtRight, horizontalRange.value > 0, (offsetY, isHorizontal) => {
-			if (isHorizontal) {
-				const aligned = keepInHorizontalRange(isRTL.value ? offsetLeft.value - offsetY : offsetLeft.value + offsetY);
-				offsetLeft.value = aligned;
-				triggerScroll({ x: isRTL.value ? -aligned : aligned });
-			} else syncScrollTop((top) => top + offsetY);
-		});
-		require_useMobileTouchMove.default(inVirtual, componentRef, (isHorizontal, offset, _smoothOffset, _e) => {
-			if (isHorizontal) {
-				const aligned = keepInHorizontalRange(isRTL.value ? offsetLeft.value - offset : offsetLeft.value + offset);
-				offsetLeft.value = aligned;
-				triggerScroll({ x: isRTL.value ? -aligned : aligned });
-				return true;
-			} else {
-				syncScrollTop((top) => top + offset);
-				return true;
-			}
-		});
-		require_useScrollDrag.default(inVirtual, componentRef, (offset) => {
-			syncScrollTop((top) => top + offset);
-		});
-		const onScrollBar = (newScrollOffset, horizontal) => {
-			const newOffset = newScrollOffset;
-			if (horizontal) {
-				offsetLeft.value = newOffset;
-				triggerScroll({ x: isRTL.value ? -newOffset : newOffset });
-			} else syncScrollTop(newOffset);
-		};
-		const onScrollbarStartMove = () => {
-			scrollMoving.value = true;
-		};
-		const onScrollbarStopMove = () => {
-			scrollMoving.value = false;
-		};
-		require_useDiffItem.default(mergedData, getKey);
-		(0, vue.watch)([
-			() => props.height,
-			scrollHeight,
-			inVirtual,
-			() => size.value.height
-		], () => {
-			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], () => {
-			if (inVirtual.value && contentScrollWidth.value) horizontalScrollBarSpinSize.value = require_scrollbarUtil.getSpinSize(size.value.width, contentScrollWidth.value);
-		}, { immediate: true });
-		(0, vue.watch)(() => props.scrollWidth, (val) => {
-			contentScrollWidth.value = val ?? size.value.width;
-			offsetLeft.value = keepInHorizontalRange(offsetLeft.value);
-		}, { immediate: true });
-		function onFallbackScroll(e) {
-			const newScrollTop = e.currentTarget.scrollTop;
-			if (!useVirtual.value || !inVirtual.value) offsetTop.value = newScrollTop;
-			else if (newScrollTop !== offsetTop.value) syncScrollTop(newScrollTop);
-			props.onScroll?.(e);
-			triggerScroll();
-		}
-		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,
-			scrollTo: (config) => {
-				function isPosScroll(arg) {
-					return arg && typeof arg === "object" && ("left" in arg || "top" in arg);
-				}
-				if (isPosScroll(config)) {
-					if (config.left !== void 0) offsetLeft.value = keepInHorizontalRange(config.left);
-					scrollTo(config.top);
-				} else scrollTo(config);
-			}
-		});
-		(0, vue.watch)([
-			start,
-			end,
-			mergedData
-		], () => {
-			if (props.onVisibleChange) {
-				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 () => {
-			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 (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,
-				end: end.value,
-				virtual: inVirtual.value,
-				offsetX: offsetLeft.value,
-				offsetY: fillerOffset.value || 0,
-				rtl: isRTL.value,
-				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), {
-				"style": {
-					position: "relative",
-					...attrs.style
-				},
-				"dir": isRTL.value ? "rtl" : void 0,
-				"class": [
-					props.prefixCls,
-					{ [`${props.prefixCls}-rtl`]: isRTL.value },
-					attrs.class
-				]
-			}), [
-				(0, vue.createVNode)(_v_c_resize_observer.default, { "onResize": onHolderResize }, { default: () => [(0, vue.createVNode)(Component, {
-					"class": `${props.prefixCls}-holder`,
-					"style": componentStyle,
-					"ref": componentRef,
-					"onScroll": onFallbackScroll,
-					"onWheel": onWheel,
-					"onMouseenter": delayHideScrollBar
-				}, { default: () => [(0, vue.createVNode)(require_Filler.default, {
-					"prefixCls": props.prefixCls,
-					"height": scrollHeight.value,
-					"offsetX": offsetLeft.value,
-					"offsetY": fillerOffset.value,
-					"scrollWidth": contentScrollWidth.value,
-					"onInnerResize": collectHeight,
-					"ref": fillerInnerRef,
-					"innerProps": props.innerProps,
-					"rtl": isRTL.value,
-					"extra": extraContent
-				}, { default: () => [listChildren.value] })] })] }),
-				inVirtual.value && scrollHeight.value > (props.height || 0) && (0, vue.createVNode)(require_ScrollBar.default, {
-					"ref": verticalScrollBarRef,
-					"prefixCls": props.prefixCls,
-					"scrollOffset": offsetTop.value,
-					"scrollRange": scrollHeight.value,
-					"rtl": isRTL.value,
-					"onScroll": onScrollBar,
-					"onStartMove": onScrollbarStartMove,
-					"onStopMove": onScrollbarStopMove,
-					"spinSize": verticalScrollBarSpinSize.value,
-					"containerSize": size.value.height,
-					"showScrollBar": props.showScrollBar,
-					"style": props.styles?.verticalScrollBar,
-					"thumbStyle": props.styles?.verticalScrollBarThumb
-				}, null),
-				inVirtual.value && contentScrollWidth.value > size.value.width && (0, vue.createVNode)(require_ScrollBar.default, {
-					"ref": horizontalScrollBarRef,
-					"prefixCls": props.prefixCls,
-					"scrollOffset": offsetLeft.value,
-					"scrollRange": contentScrollWidth.value,
-					"rtl": isRTL.value,
-					"onScroll": onScrollBar,
-					"onStartMove": onScrollbarStartMove,
-					"onStopMove": onScrollbarStopMove,
-					"spinSize": horizontalScrollBarSpinSize.value,
-					"containerSize": size.value.width,
-					"horizontal": true,
-					"showScrollBar": props.showScrollBar,
-					"style": props.styles?.horizontalScrollBar,
-					"thumbStyle": props.styles?.horizontalScrollBarThumb
-				}, null)
-			]);
-		};
-	}
-});
-exports.default = List_default;