@v-c/virtual-list 0.0.1 → 1.0.0

package/bump.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'bumpp'
+
+export default defineConfig({
+  commit: 'chore(release): @v-c/virtual-list %s',
+  tag: '@v-c/virtual-list@%s',
+})

package/dist/Filler.cjs

@@ -1 +1,51 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),o=require("@v-c/resize-observer"),f=t.defineComponent({name:"Filler",props:{prefixCls:String,height:Number,offsetY:Number,offsetX:Number,scrollWidth:Number,onInnerResize:Function,innerProps:Object,rtl:Boolean,extra:Object},setup(e,{slots:r}){return()=>{let n={},i={display:"flex",flexDirection:"column"};return e.offsetY!==void 0&&(n={height:`${e.height}px`,position:"relative",overflow:"hidden"},i={...i,transform:`translateY(${e.offsetY}px)`,[e.rtl?"marginRight":"marginLeft"]:`-${e.offsetX||0}px`,position:"absolute",left:0,right:0,top:0}),t.createVNode("div",{style:n},[t.createVNode(o,{onResize:({offsetHeight:l})=>{l&&e.onInnerResize&&e.onInnerResize()}},{default:()=>[t.createVNode("div",t.mergeProps({style:i,class:e.prefixCls?`${e.prefixCls}-holder-inner`:void 0},e.innerProps),[r.default?.(),e.extra])]})])}}});exports.default=f;
+Object.defineProperty(exports, "__esModule", { value: true });
+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/Filler.js

@@ -1,57 +1,48 @@
-import { defineComponent as f, createVNode as i, mergeProps as o } from "vue";
-import s from "@v-c/resize-observer";
-const u = /* @__PURE__ */ f({
-  name: "Filler",
-  props: {
-    prefixCls: String,
-    /** Virtual filler height. Should be `count * itemMinHeight` */
-    height: Number,
-    /** Set offset of visible items. Should be the top of start item position */
-    offsetY: Number,
-    offsetX: Number,
-    scrollWidth: Number,
-    onInnerResize: Function,
-    innerProps: Object,
-    rtl: Boolean,
-    extra: Object
-  },
-  setup(e, {
-    slots: r
-  }) {
-    return () => {
-      let n = {}, t = {
-        display: "flex",
-        flexDirection: "column"
-      };
-      return e.offsetY !== void 0 && (n = {
-        height: `${e.height}px`,
-        position: "relative",
-        overflow: "hidden"
-      }, t = {
-        ...t,
-        transform: `translateY(${e.offsetY}px)`,
-        [e.rtl ? "marginRight" : "marginLeft"]: `-${e.offsetX || 0}px`,
-        position: "absolute",
-        left: 0,
-        right: 0,
-        top: 0
-      }), i("div", {
-        style: n
-      }, [i(s, {
-        onResize: ({
-          offsetHeight: l
-        }) => {
-          l && e.onInnerResize && e.onInnerResize();
-        }
-      }, {
-        default: () => [i("div", o({
-          style: t,
-          class: e.prefixCls ? `${e.prefixCls}-holder-inner` : void 0
-        }, e.innerProps), [r.default?.(), e.extra])]
-      })]);
-    };
-  }
+import { createVNode, defineComponent, mergeProps } from "vue";
+import ResizeObserver from "@v-c/resize-observer";
+var Filler_default = /* @__PURE__ */ 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 createVNode("div", { "style": outerStyle }, [createVNode(ResizeObserver, { "onResize": ({ offsetHeight }) => {
+				if (offsetHeight && props.onInnerResize) props.onInnerResize();
+			} }, { default: () => [createVNode("div", mergeProps({
+				"style": innerStyle,
+				"class": props.prefixCls ? `${props.prefixCls}-holder-inner` : void 0
+			}, props.innerProps), [slots.default?.(), props.extra])] })]);
+		};
+	}
 });
-export {
-  u as default
-};
+export { Filler_default as default };

package/dist/Item.cjs

@@ -1 +1,26 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@v-c/util/dist/props-util"),t=require("vue"),s=t.defineComponent({name:"Item",props:{setRef:{type:Function,required:!0}},setup(u,{slots:n}){const r=t.shallowRef(null),l=e=>{r.value!==e&&(r.value=e,u.setRef(e))};return()=>{const e=o.filterEmpty(n.default?.()??[])[0];return e?t.cloneVNode(e,{ref:l}):null}}});exports.default=s;
+Object.defineProperty(exports, "__esModule", { value: true });
+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/Item.js

@@ -1,27 +1,24 @@
-import { filterEmpty as l } from "@v-c/util/dist/props-util";
-import { defineComponent as o, shallowRef as f, cloneVNode as m } from "vue";
-const i = /* @__PURE__ */ o({
-  name: "Item",
-  props: {
-    setRef: {
-      type: Function,
-      required: !0
-    }
-  },
-  setup(r, {
-    slots: n
-  }) {
-    const t = f(null), u = (e) => {
-      t.value !== e && (t.value = e, r.setRef(e));
-    };
-    return () => {
-      const e = l(n.default?.() ?? [])[0];
-      return e ? m(e, {
-        ref: u
-      }) : null;
-    };
-  }
+import { cloneVNode, defineComponent, shallowRef } from "vue";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+var Item_default = /* @__PURE__ */ defineComponent({
+	name: "Item",
+	props: { setRef: {
+		type: Function,
+		required: true
+	} },
+	setup(props, { slots }) {
+		const currentElement = shallowRef(null);
+		const refFunc = (node) => {
+			if (currentElement.value !== node) {
+				currentElement.value = node;
+				props.setRef(node);
+			}
+		};
+		return () => {
+			const child = filterEmpty(slots.default?.() ?? [])[0];
+			if (!child) return null;
+			return cloneVNode(child, { ref: refFunc });
+		};
+	}
 });
-export {
-  i as default
-};
+export { Item_default as default };

package/dist/List.cjs

@@ -1 +1,408 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),ne=require("@v-c/resize-observer"),ie=require("./Filler.cjs"),ae=require("./hooks/useDiffItem.cjs"),oe=require("./hooks/useFrameWheel.cjs"),ue=require("./hooks/useGetSize.cjs"),re=require("./hooks/useHeights.cjs"),ce=require("./hooks/useMobileTouchMove.cjs"),se=require("./hooks/useScrollDrag.cjs"),fe=require("./Item.cjs"),de=require("./ScrollBar.cjs"),ve=require("./utils/scrollbarUtil.cjs");function j(l){return typeof l=="function"||Object.prototype.toString.call(l)==="[object Object]"&&!n.isVNode(l)}const he=[],ge={overflowY:"auto",overflowAnchor:"none"},me=n.defineComponent({name:"VirtualList",props:{prefixCls:{type:String,default:"vc-virtual-list"},data:{type:Array},height:Number,itemHeight:Number,fullHeight:{type:Boolean,default:!0},itemKey:{type:[String,Number,Function],required:!0},component:{type:String,default:"div"},virtual:{type:Boolean,default:!0},onScroll:Function,onVirtualScroll:Function,onVisibleChange:Function,innerProps:Object,extraRender:Function},setup(l,{expose:F,attrs:q,slots:K}){const v=e=>typeof l.itemKey=="function"?l.itemKey(e):e?.[l.itemKey],[_,L,g,P]=re.default(v,void 0,void 0),o=n.computed(()=>l.data||he),V=n.computed(()=>!!(l.virtual!==!1&&l.height&&l.itemHeight)),W=n.computed(()=>Object.values(g.maps).reduce((e,t)=>e+t,0)),h=n.computed(()=>{const e=o.value;return V.value&&e&&Math.max(l.itemHeight*e.length,W.value)>l.height}),H=n.ref(),z=n.ref(),O=n.ref(),A=n.shallowRef(),f=n.ref(0),y=n.ref(0),M=n.ref(!1),k=n.ref(0),B=n.ref(0);function m(e){let t;typeof e=="function"?t=e(f.value):t=e;const a=c.value-l.height,i=Math.max(0,Math.min(t,a||0));H.value&&(H.value.scrollTop=i),f.value=i}ae.default(o,v);const c=n.ref(0),S=n.ref(0),x=n.ref(0),b=n.ref(void 0);n.watch([()=>h.value,()=>V.value,()=>f.value,()=>o.value,()=>P.value,()=>l.height],()=>{if(!V.value){c.value=0,S.value=0,x.value=o.value.length-1,b.value=void 0;return}if(!h.value){c.value=z.value?.offsetHeight||0,S.value=0,x.value=o.value.length-1,b.value=void 0;return}let e=0,t,a,i;const r=o.value.length,d=o.value;for(let u=0;u<r;u+=1){const s=d[u],I=v(s),N=g.get(I),w=e+(N===void 0?l.itemHeight:N);w>=f.value&&t===void 0&&(t=u,a=e),w>f.value+l.height&&i===void 0&&(i=u),e=w}t===void 0&&(t=0,a=0,i=Math.ceil(l.height/l.itemHeight)),i===void 0&&(i=o.value.length-1),i=Math.min(i+1,o.value.length-1),c.value=e,S.value=t,x.value=i,b.value=a},{immediate:!0}),n.watch(()=>c.value,()=>{const e=g.getRecord();if(e.size===1){const t=Array.from(e.keys())[0],a=e.get(t),i=o.value[S.value];if(i&&a===void 0&&v(i)===t){const u=g.get(t)-l.itemHeight;m(s=>s+u)}}g.resetRecord()});const R=n.ref({width:0,height:l.height||0}),Y=e=>{R.value={width:e.offsetWidth,height:e.offsetHeight}},T=()=>({x:y.value,y:f.value}),C=n.ref(T()),D=e=>{if(l.onVirtualScroll){const t={...T(),...e};(C.value.x!==t.x||C.value.y!==t.y)&&(l.onVirtualScroll(t),C.value=t)}},X=n.computed(()=>f.value===0),E=n.computed(()=>f.value+l.height>=c.value),G=n.computed(()=>y.value===0),U=n.computed(()=>y.value+R.value.width>=B.value),$=()=>{A.value?.delayHidden()},[J]=oe.default(h,X,E,G,U,!1,(e,t)=>{t||m(a=>a+e)});ce.default(h,H,(e,t,a,i)=>e?!1:(m(r=>r+t),!0)),se.default(h,H,e=>{m(t=>t+e)});const Q=(e,t)=>{t||m(e)},Z=()=>{M.value=!0},p=()=>{M.value=!1};n.watch([()=>l.height,()=>c.value,()=>h.value,()=>R.value.height],()=>{h.value&&l.height&&c.value&&(k.value=ve.getSpinSize(R.value.height,c.value))},{immediate:!0});function ee(e){const a=e.currentTarget.scrollTop;a!==f.value&&m(a),l.onScroll?.(e),D()}F({nativeElement:O,getScrollInfo:T,scrollTo:e=>{if(e!=null){if(typeof e=="number")m(e);else if(e&&typeof e=="object"){let t;if("left"in e&&(y.value=e.left||0),"top"in e)t=e.top;else if("index"in e){const a=e.index||0;if(o.value[a]){let r=0;for(let d=0;d<a;d+=1){const u=v(o.value[d]),s=g.get(u);r+=s===void 0?l.itemHeight:s}t=r}}else if("key"in e){const a=o.value.findIndex(i=>v(i)===e.key);if(a>=0){let i=0;for(let r=0;r<a;r+=1){const d=v(o.value[r]),u=g.get(d);i+=u===void 0?l.itemHeight:u}t=i}}t!==void 0&&m(t)}}}}),n.watch([()=>S.value,()=>x.value,()=>o.value],()=>{if(l.onVisibleChange){const e=o.value.slice(S.value,x.value+1);l.onVisibleChange(e,o.value)}});const te=()=>{const e=[],t=o.value,a=K.default;if(!a)return e;for(let i=S.value;i<=x.value;i+=1){const r=t[i],d=v(r),u=a({item:r,index:i,style:{},offsetX:y.value}),s=Array.isArray(u)?u[0]:u;s&&e.push(n.createVNode(fe.default,{key:d,setRef:I=>_(r,I)},j(s)?s:{default:()=>[s]}))}return e},le=ue.useGetSize(o,v,g,l.itemHeight);return()=>{let e;const t={};l.height&&(t[l.fullHeight?"height":"maxHeight"]=`${l.height}px`,Object.assign(t,ge),V.value&&(t.overflowY="hidden",B.value&&(t.overflowX="hidden"),M.value&&(t.pointerEvents="none")));const a=l.extraRender?.({start:S.value,end:x.value,virtual:h.value,offsetX:y.value,offsetY:b.value||0,rtl:!1,getSize:le.value}),i=l.component;return n.createVNode("div",{ref:O,style:{position:"relative",...q.style},class:[l.prefixCls,q.class]},[n.createVNode(ne,{onResize:Y},{default:()=>[n.createVNode(i,{class:`${l.prefixCls}-holder`,style:t,ref:H,onScroll:ee,onWheel:J,onMouseenter:$},{default:()=>[n.createVNode(ie.default,{prefixCls:l.prefixCls,height:c.value,offsetX:y.value,offsetY:b.value,onInnerResize:L,ref:z,innerProps:l.innerProps,rtl:!1,extra:a},j(e=te())?e:{default:()=>[e]})]})]}),h.value&&c.value>(l.height||0)&&n.createVNode(de.default,{ref:A,prefixCls:l.prefixCls,scrollOffset:f.value,scrollRange:c.value,rtl:!1,onScroll:Q,onStartMove:Z,onStopMove:p,spinSize:k.value,containerSize:R.value.height,showScrollBar:"optional"},null)])}}});exports.default=me;
+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_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");
+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",
+	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);
+		const getKey = (item) => {
+			if (typeof props.itemKey === "function") return props.itemKey(item);
+			return item?.[props.itemKey];
+		};
+		const [setInstanceRef, collectHeight, heights, heightUpdatedMark] = require_useHeights.default(getKey, void 0, void 0);
+		const mergedData = (0, vue.computed)(() => 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);
+		});
+		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;
+		}
+		require_useDiffItem.default(mergedData, getKey);
+		(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;
+			}
+			let itemTop = 0;
+			let startIndex;
+			let startOffset;
+			let endIndex;
+			const dataLen = mergedData.value.length;
+			const data = mergedData.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 ? props.itemHeight : cacheHeight);
+				if (currentItemBottom >= offsetTop.value && startIndex === void 0) {
+					startIndex = i;
+					startOffset = itemTop;
+				}
+				if (currentItemBottom > offsetTop.value + props.height && endIndex === void 0) endIndex = i;
+				itemTop = currentItemBottom;
+			}
+			if (startIndex === void 0) {
+				startIndex = 0;
+				startOffset = 0;
+				endIndex = Math.ceil(props.height / props.itemHeight);
+			}
+			if (endIndex === void 0) endIndex = mergedData.value.length - 1;
+			endIndex = Math.min(endIndex + 1, mergedData.value.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);
+					}
+				}
+			}
+			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;
+		};
+		(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.value], () => {
+			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 (newScrollTop !== offsetTop.value) syncScrollTop(newScrollTop);
+			props.onScroll?.(e);
+			triggerScroll();
+		}
+		const scrollTo = require_useScrollTo.default(componentRef, mergedData, heights, itemHeight, getKey, () => collectHeight(true), syncScrollTop, 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);
+			}
+		});
+		const getSize = require_useGetSize.useGetSize(mergedData, getKey, heights, itemHeight);
+		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`;
+				Object.assign(componentStyle, ScrollStyle);
+				if (useVirtual.value) {
+					componentStyle.overflowY = "hidden";
+					if (horizontalRange.value > 0) componentStyle.overflowX = "hidden";
+					if (scrollMoving.value) componentStyle.pointerEvents = "none";
+				}
+			}
+			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
+				}, _isSlot(_slot = renderChildren()) ? _slot : { default: () => [_slot] })] })] }),
+				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;